@ui5/webcomponents-fiori 2.20.0-rc.2 → 2.20.0

package/dist/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.20.0-rc.2",
+  "version": "2.20.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "ui5-barcode-scanner-dialog",
-          "description": "### Overview\n\nThe `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n\nA `scanSuccess` event fires whenever a barcode is identified\nand a `scanError` event fires when the scan failed (for example, due to missing permisions).\n\nInternally, the component  uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.\n---\n\n\n### **Events:**\n - **close** - Fired when the user closes the component.\n- **scan-success** - Fires when the scan is completed successfuuly.\n- **scan-error** - Fires when the scan fails with error.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\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 you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.",
+          "description": "### Overview\n\nThe `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n\nA `scanSuccess` event fires whenever a barcode is identified\nand a `scanError` event fires when the scan failed (for example, due to missing permisions).\n\nInternally, the component  uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.\n---\n\n\n### **Events:**\n - **close** - Fired when the user closes the component.\n- **scan-error** - Fires when the scan fails with error.\n- **scan-success** - Fires when the scan is completed successfuuly.\n\n### **Slots:**\n - **footer** - Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.\n- **header** - Defines the header HTML Element.\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.",
           "doc-url": "",
           "attributes": [
             {
@@ -18,13 +18,13 @@
             }
           ],
           "slots": [
-            {
-              "name": "header",
-              "description": "Defines the header HTML Element.\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."
-            },
             {
               "name": "footer",
               "description": "Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation."
+            },
+            {
+              "name": "header",
+              "description": "Defines the header HTML Element.\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."
             }
           ],
           "events": [
@@ -32,13 +32,13 @@
               "name": "close",
               "description": "Fired when the user closes the component."
             },
-            {
-              "name": "scan-success",
-              "description": "Fires when the scan is completed successfuuly."
-            },
             {
               "name": "scan-error",
               "description": "Fires when the scan fails with error."
+            },
+            {
+              "name": "scan-success",
+              "description": "Fires when the scan is completed successfuuly."
             }
           ],
           "js": {
@@ -54,41 +54,41 @@
                 "name": "close",
                 "description": "Fired when the user closes the component."
               },
-              {
-                "name": "scan-success",
-                "description": "Fires when the scan is completed successfuuly."
-              },
               {
                 "name": "scan-error",
                 "description": "Fires when the scan fails with error."
+              },
+              {
+                "name": "scan-success",
+                "description": "Fires when the scan is completed successfuuly."
               }
             ]
           }
         },
         {
           "name": "ui5-dynamic-page",
-          "description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  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-fiori/dist/DynamicPage.js\";`\n---\n\n\n### **Events:**\n - **pin-button-toggle** - Fired when the pin header button is toggled.\n- **title-toggle** - Fired when the expand/collapse area of the title is toggled.\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page.\n- **titleArea** - Defines the title HTML Element.\n- **headerArea** - Defines the header HTML Element.\n- **footerArea** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **fit-content** - Used to style the fit content container of the component.\n- **footer** - Used to style the footer of the component",
+          "description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  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-fiori/dist/DynamicPage.js\";`\n---\n\n\n### **Events:**\n - **pin-button-toggle** - Fired when the pin header button is toggled.\n- **title-toggle** - Fired when the expand/collapse area of the title is toggled.\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page.\n- **footerArea** - Defines the footer HTML Element.\n- **headerArea** - Defines the header HTML Element.\n- **titleArea** - Defines the title HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **fit-content** - Used to style the fit content container of the component.\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
-              "name": "hide-pin-button",
-              "description": "Defines if the pin button is hidden.",
+              "name": "header-pinned",
+              "description": "Defines if the header is pinned.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "header-pinned",
-              "description": "Defines if the header is pinned.",
+              "name": "header-snapped",
+              "description": "Defines if the header is snapped.",
+              "value": { "type": "any", "default": "false" }
+            },
+            {
+              "name": "hide-pin-button",
+              "description": "Defines if the pin button is hidden.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "show-footer",
               "description": "Defines if the footer is shown.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "header-snapped",
-              "description": "Defines if the header is snapped.",
-              "value": { "type": "any", "default": "false" }
             }
           ],
           "slots": [
@@ -97,16 +97,16 @@
               "description": "Defines the content of the Dynamic Page."
             },
             {
-              "name": "titleArea",
-              "description": "Defines the title HTML Element."
+              "name": "footerArea",
+              "description": "Defines the footer HTML Element."
             },
             {
               "name": "headerArea",
               "description": "Defines the header HTML Element."
             },
             {
-              "name": "footerArea",
-              "description": "Defines the footer HTML Element."
+              "name": "titleArea",
+              "description": "Defines the title HTML Element."
             }
           ],
           "events": [
@@ -122,24 +122,24 @@
           "js": {
             "properties": [
               {
-                "name": "hide-pin-button",
-                "description": "Defines if the pin button is hidden.",
+                "name": "header-pinned",
+                "description": "Defines if the header is pinned.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "header-pinned",
-                "description": "Defines if the header is pinned.",
+                "name": "header-snapped",
+                "description": "Defines if the header is snapped.",
+                "value": { "type": "any" }
+              },
+              {
+                "name": "hide-pin-button",
+                "description": "Defines if the pin button is hidden.",
                 "value": { "type": "boolean" }
               },
               {
                 "name": "show-footer",
                 "description": "Defines if the footer is shown.",
                 "value": { "type": "boolean" }
-              },
-              {
-                "name": "header-snapped",
-                "description": "Defines if the header is snapped.",
-                "value": { "type": "any" }
               }
             ],
             "events": [
@@ -168,47 +168,55 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "ui5-dynamic-page-header-actions",
+          "description": "### Overview\n\nThe `DynamicPageHeaderActions` component is part of the `DynamicPage`\nfamily and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n\nThe \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\nThe expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "ui5-dynamic-page-title",
-          "description": "### Overview\n\nTitle of the `DynamicPage`.\n\nThe `DynamicPageTitle` component is part of the `DynamicPage`\nfamily and is used to serve as title of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageTitle` can hold any component and displays the most important\ninformation regarding the object that will always remain visible while scrolling.\n\n**Note:** The `actions` slot accepts any UI5 web component, but it's\nrecommended to use `ui5-toolbar`.\n\nThe user can switch between the expanded/collapsed states of the\n`DynamicPage` by clicking on the `DynamicPageTitle`\nor by using the expand/collapse visual indicators, positioned at the bottom of the\n`DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageTitle` depends on the behavior of the\ncontent that is displayed.\n---\n\n\n### **Slots:**\n - **heading** - Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`\n- **snappedHeading** - Defines the heading that is shown only when the header is snapped.\n- **snappedTitleOnMobile** - Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.\n- **actionsBar** - Defines the bar with actions in the Dynamic page title.\n- **navigationBar** - Defines the bar with navigation actions in the Dynamic page title.\n- **default** - Defines the content of the Dynamic page title.\n- **subheading** - Defines the content of the title that is shown only when the header is not snapped.\n- **snappedSubheading** - Defines the content of the title that is shown only when the header is snapped.\n- **breadcrumbs** - Defines the content of the breadcrumbs inside Dynamic Page Title.",
+          "description": "### Overview\n\nTitle of the `DynamicPage`.\n\nThe `DynamicPageTitle` component is part of the `DynamicPage`\nfamily and is used to serve as title of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageTitle` can hold any component and displays the most important\ninformation regarding the object that will always remain visible while scrolling.\n\n**Note:** The `actions` slot accepts any UI5 web component, but it's\nrecommended to use `ui5-toolbar`.\n\nThe user can switch between the expanded/collapsed states of the\n`DynamicPage` by clicking on the `DynamicPageTitle`\nor by using the expand/collapse visual indicators, positioned at the bottom of the\n`DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageTitle` depends on the behavior of the\ncontent that is displayed.\n---\n\n\n### **Slots:**\n - **actionsBar** - Defines the bar with actions in the Dynamic page title.\n- **breadcrumbs** - Defines the content of the breadcrumbs inside Dynamic Page Title.\n- **default** - Defines the content of the Dynamic page title.\n- **heading** - Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`\n- **navigationBar** - Defines the bar with navigation actions in the Dynamic page title.\n- **snappedHeading** - Defines the heading that is shown only when the header is snapped.\n- **snappedSubheading** - Defines the content of the title that is shown only when the header is snapped.\n- **snappedTitleOnMobile** - Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.\n- **subheading** - Defines the content of the title that is shown only when the header is not snapped.",
           "doc-url": "",
           "attributes": [],
           "slots": [
             {
-              "name": "heading",
-              "description": "Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`"
+              "name": "actionsBar",
+              "description": "Defines the bar with actions in the Dynamic page title."
             },
             {
-              "name": "snappedHeading",
-              "description": "Defines the heading that is shown only when the header is snapped."
+              "name": "breadcrumbs",
+              "description": "Defines the content of the breadcrumbs inside Dynamic Page Title."
             },
             {
-              "name": "snappedTitleOnMobile",
-              "description": "Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component."
+              "name": "default",
+              "description": "Defines the content of the Dynamic page title."
             },
             {
-              "name": "actionsBar",
-              "description": "Defines the bar with actions in the Dynamic page title."
+              "name": "heading",
+              "description": "Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`"
             },
             {
               "name": "navigationBar",
               "description": "Defines the bar with navigation actions in the Dynamic page title."
             },
             {
-              "name": "default",
-              "description": "Defines the content of the Dynamic page title."
-            },
-            {
-              "name": "subheading",
-              "description": "Defines the content of the title that is shown only when the header is not snapped."
+              "name": "snappedHeading",
+              "description": "Defines the heading that is shown only when the header is snapped."
             },
             {
               "name": "snappedSubheading",
               "description": "Defines the content of the title that is shown only when the header is snapped."
             },
             {
-              "name": "breadcrumbs",
-              "description": "Defines the content of the breadcrumbs inside Dynamic Page Title."
+              "name": "snappedTitleOnMobile",
+              "description": "Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component."
+            },
+            {
+              "name": "subheading",
+              "description": "Defines the content of the title that is shown only when the header is not snapped."
             }
           ],
           "events": [],
@@ -219,6 +227,19 @@
           "description": "### Overview\n\nThe DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\nto be displayed in a way that flexibly adapts to different screen sizes. The side\ncontent appears in a container next to or directly below the main content\n(it doesn't overlay). When the side content is triggered, the main content becomes\nnarrower (if appearing side-by-side). The side content contains a separate scrollbar\nwhen appearing next to the main content.\n\n### Usage\n\n*When to use?*\n\nUse this component if you want to display relevant information that is not critical\nfor users to complete a task. Users should have access to all the key functions and\ncritical information in the app even if they do not see the side content. This is\nimportant because on smaller screen sizes it may be difficult to display the side\ncontent in a way that is easily accessible for the user.\n\n*When not to use?*\n\nDon't use it if you want to display navigation or critical information that prevents\nusers from completing a task when they have no access to the side content.\n\n### Responsive Behavior\n\nScreen width \\> 1440px\n\n- Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\neach).\n- If the application defines a trigger, the side content can be hidden.\n\nScreen width \\<\\= 1440px and \\> 1024px\n\n- Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n320px each). If the side content width falls below 320 px, it automatically slides\nunder the main content, unless the app development team specifies that it should\ndisappear.\n\nScreen width \\<\\= 1024px and \\> 720px\n\n- The side content ratio is fixed to 340px, and the main content takes the rest\nof the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\nand screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n\nScreen width \\<\\= 720px (for example on a mobile device)\n\n- In this case, the side content automatically disappears from the screen (unless\nspecified to stay under the content by setting of `sideContentVisibility`\nproperty to `AlwaysShow`) and can be triggered from a pre-set trigger\n(specified within the app). When the side content is triggered, it replaces the main\ncontent. We recommend that you always place the trigger for the side content in the\nsame location, such as in the app footer.\n\nA special case allows switching the comparison mode between the main and side content.\nIn this case, the screen is split into 50:50 percent for main vs. side content. The\nresponsive behavior of the equal split is the same as in the standard view - the\nside content disappears on screen widths of less than 720 px and can only be\nviewed by triggering it.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`\n---\n\n\n### **Events:**\n - **layout-change** - Fires when the current breakpoint has been changed.\n\n### **Methods:**\n - **toggleContents(): _void_** - Toggles visibility of main and side contents on S screen size (mobile device).\n\n### **Slots:**\n - **default** - Defines the main content.\n- **sideContent** - Defines the side content.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
+              "value": {
+                "type": "DynamicSideContentAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
+            {
+              "name": "equal-split",
+              "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "hide-main-content",
               "description": "Defines the visibility of the main content.",
@@ -229,19 +250,6 @@
               "description": "Defines the visibility of the side content.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "side-content-position",
-              "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).",
-              "value": { "type": "\"End\" | \"Start\"", "default": "\"End\"" }
-            },
-            {
-              "name": "side-content-visibility",
-              "description": "Defines on which breakpoints the side content is visible.",
-              "value": {
-                "type": "\"AlwaysShow\" | \"ShowAboveL\" | \"ShowAboveM\" | \"ShowAboveS\" | \"NeverShow\"",
-                "default": "\"ShowAboveS\""
-              }
-            },
             {
               "name": "side-content-fall-down",
               "description": "Defines on which breakpoints the side content falls down below the main content.",
@@ -251,16 +259,16 @@
               }
             },
             {
-              "name": "equal-split",
-              "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "side-content-position",
+              "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).",
+              "value": { "type": "\"End\" | \"Start\"", "default": "\"End\"" }
             },
             {
-              "name": "accessibility-attributes",
-              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
+              "name": "side-content-visibility",
+              "description": "Defines on which breakpoints the side content is visible.",
               "value": {
-                "type": "DynamicSideContentAccessibilityAttributes",
-                "default": "{}"
+                "type": "\"AlwaysShow\" | \"ShowAboveL\" | \"ShowAboveM\" | \"ShowAboveS\" | \"NeverShow\"",
+                "default": "\"ShowAboveS\""
               }
             }
           ],
@@ -279,6 +287,16 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
+                "value": { "type": "DynamicSideContentAccessibilityAttributes" }
+              },
+              {
+                "name": "equal-split",
+                "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "hide-main-content",
                 "description": "Defines the visibility of the main content.",
@@ -289,6 +307,13 @@
                 "description": "Defines the visibility of the side content.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "side-content-fall-down",
+                "description": "Defines on which breakpoints the side content falls down below the main content.",
+                "value": {
+                  "type": "\"BelowXL\" | \"BelowL\" | \"BelowM\" | \"OnMinimumWidth\""
+                }
+              },
               {
                 "name": "side-content-position",
                 "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).",
@@ -300,23 +325,6 @@
                 "value": {
                   "type": "\"AlwaysShow\" | \"ShowAboveL\" | \"ShowAboveM\" | \"ShowAboveS\" | \"NeverShow\""
                 }
-              },
-              {
-                "name": "side-content-fall-down",
-                "description": "Defines on which breakpoints the side content falls down below the main content.",
-                "value": {
-                  "type": "\"BelowXL\" | \"BelowL\" | \"BelowM\" | \"OnMinimumWidth\""
-                }
-              },
-              {
-                "name": "equal-split",
-                "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "accessibility-attributes",
-                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
-                "value": { "type": "DynamicSideContentAccessibilityAttributes" }
               }
             ],
             "events": [
@@ -333,13 +341,13 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "text",
-              "description": "Defines the text of the filter item.",
+              "name": "additional-text",
+              "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "additional-text",
-              "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.",
+              "name": "text",
+              "description": "Defines the text of the filter item.",
               "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
@@ -353,13 +361,13 @@
           "js": {
             "properties": [
               {
-                "name": "text",
-                "description": "Defines the text of the filter item.",
+                "name": "additional-text",
+                "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.",
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "additional-text",
-                "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.",
+                "name": "text",
+                "description": "Defines the text of the filter item.",
                 "value": { "type": "string | undefined" }
               }
             ],
@@ -371,29 +379,29 @@
           "description": "### Overview\n\nThe `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.\nIt represents a single selectable option that users can choose to filter data.\n\n### Usage\n\nThe `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context\nof `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItemOption.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "text",
-              "description": "Defines the text of the filter option.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "selected",
               "description": "Defines if the filter option is selected.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "text",
+              "description": "Defines the text of the filter option.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "text",
-                "description": "Defines the text of the filter option.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "selected",
                 "description": "Defines if the filter option is selected.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "text",
+                "description": "Defines the text of the filter option.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -401,16 +409,18 @@
         },
         {
           "name": "ui5-flexible-column-layout",
-          "description": "### Overview\n\nThe `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\nThere are several possible layouts that can be changed either with the component API, or by dragging the column separators.\n\n### Usage\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\nThe Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n### Responsive Behavior\n\nThe `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.\nThe component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\nand 3 columns for sizes bigger than 1023px.\n\n**Note:** When the component displays more than one column, the minimal width of each column is 248px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 248px.\n\n### Keyboard Handling\n\n#### Basic Navigation\n\nWhen a column separator is focused,  the following keyboard\nshortcuts allow the user to resize the columns and change the layout:\n\n- [Shift] + [Left] or [Shift] + [Right] - Moves the separator to the left or right, which resizes the columns accordingly.\n- [Left] or [Right] - Moves the separator to the left or right with a bigger step, which resizes the columns accordingly.\n- [Home] - Moves the separator to the start position.\n- [End] - Moves the separator to the end position.\n- This 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#### 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-fiori/dist/FlexibleColumnLayout.js\";`\n---\n\n\n### **Events:**\n - **layout-change** - Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing.\n- **layout-configuration-change** - Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n### **Slots:**\n - **startColumn** - Defines the content in the start column.\n- **midColumn** - Defines the content in the middle column.\n- **endColumn** - Defines the content in the end column.",
+          "description": "### Overview\n\nThe `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\nThere are several possible layouts that can be changed either with the component API, or by dragging the column separators.\n\n### Usage\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\nThe Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n### Responsive Behavior\n\nThe `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.\nThe component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\nand 3 columns for sizes bigger than 1023px.\n\n**Note:** When the component displays more than one column, the minimal width of each column is 248px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 248px.\n\n### Keyboard Handling\n\n#### Basic Navigation\n\nWhen a column separator is focused,  the following keyboard\nshortcuts allow the user to resize the columns and change the layout:\n\n- [Shift] + [Left] or [Shift] + [Right] - Moves the separator to the left or right, which resizes the columns accordingly.\n- [Left] or [Right] - Moves the separator to the left or right with a bigger step, which resizes the columns accordingly.\n- [Home] - Moves the separator to the start position.\n- [End] - Moves the separator to the end position.\n- This 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#### 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-fiori/dist/FlexibleColumnLayout.js\";`\n---\n\n\n### **Events:**\n - **layout-change** - Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing.\n- **layout-configuration-change** - Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n**Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change.\n\n### **Slots:**\n - **endColumn** - Defines the content in the end column.\n- **midColumn** - Defines the content in the middle column.\n- **startColumn** - Defines the content in the start column.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "layout",
-              "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.",
-              "value": {
-                "type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS...",
-                "default": "\"OneColumn\""
-              }
+              "name": "accessibility-attributes",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
+              "value": { "type": "FCLAccessibilityAttributes", "default": "{}" }
+            },
+            {
+              "name": "column-layout",
+              "description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.",
+              "value": { "type": "any", "default": "undefined" }
             },
             {
               "name": "disable-resizing",
@@ -418,9 +428,17 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "accessibility-attributes",
-              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
-              "value": { "type": "FCLAccessibilityAttributes", "default": "{}" }
+              "name": "end-column-visible",
+              "description": "Returns if the `end` column is visible.",
+              "value": { "type": "any", "default": "false" }
+            },
+            {
+              "name": "layout",
+              "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.",
+              "value": {
+                "type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS...",
+                "default": "\"OneColumn\""
+              }
             },
             {
               "name": "layouts-configuration",
@@ -428,25 +446,15 @@
               "value": { "type": "LayoutConfiguration", "default": "{}" }
             },
             {
-              "name": "column-layout",
-              "description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.",
-              "value": { "type": "any", "default": "undefined" }
+              "name": "mid-column-visible",
+              "description": "Returns if the `middle` column is visible.",
+              "value": { "type": "any", "default": "false" }
             },
             {
               "name": "start-column-visible",
               "description": "Returns if the `start` column is visible.",
               "value": { "type": "any", "default": "true" }
             },
-            {
-              "name": "mid-column-visible",
-              "description": "Returns if the `middle` column is visible.",
-              "value": { "type": "any", "default": "false" }
-            },
-            {
-              "name": "end-column-visible",
-              "description": "Returns if the `end` column is visible.",
-              "value": { "type": "any", "default": "false" }
-            },
             {
               "name": "visible-columns",
               "description": "Returns the number of currently visible columns.",
@@ -455,16 +463,16 @@
           ],
           "slots": [
             {
-              "name": "startColumn",
-              "description": "Defines the content in the start column."
+              "name": "endColumn",
+              "description": "Defines the content in the end column."
             },
             {
               "name": "midColumn",
               "description": "Defines the content in the middle column."
             },
             {
-              "name": "endColumn",
-              "description": "Defines the content in the end column."
+              "name": "startColumn",
+              "description": "Defines the content in the start column."
             }
           ],
           "events": [
@@ -474,17 +482,20 @@
             },
             {
               "name": "layout-configuration-change",
-              "description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators."
+              "description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n**Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change."
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "layout",
-                "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.",
-                "value": {
-                  "type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS..."
-                }
+                "name": "accessibility-attributes",
+                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
+                "value": { "type": "FCLAccessibilityAttributes" }
+              },
+              {
+                "name": "column-layout",
+                "description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.",
+                "value": { "type": "any" }
               },
               {
                 "name": "disable-resizing",
@@ -492,33 +503,30 @@
                 "value": { "type": "boolean" }
               },
               {
-                "name": "accessibility-attributes",
-                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
-                "value": { "type": "FCLAccessibilityAttributes" }
+                "name": "end-column-visible",
+                "description": "Returns if the `end` column is visible.",
+                "value": { "type": "any" }
+              },
+              {
+                "name": "layout",
+                "description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.",
+                "value": {
+                  "type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS..."
+                }
               },
               {
                 "name": "layouts-configuration",
                 "description": "Allows to customize the column proportions per screen size and layout.\nIf no custom proportion provided for a specific layout, the default will be used.\n\n**Notes:**\n\n- The proportions should be given in percentages. For example [\"30%\", \"40%\", \"30%\"], [\"70%\", \"30%\", 0], etc.\n- The proportions should add up to 100%.\n- Hidden columns are marked as \"0px\", e.g. [\"0px\", \"70%\", \"30%\"]. Specifying 0 or \"0%\" for hidden columns is also valid.\n- If the proportions do not match the layout (e.g. if provided proportions [\"70%\", \"30%\", \"0px\"] for \"OneColumn\" layout), then the default proportions will be used instead.\n- Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).\n- No custom configuration available for the phone screen size, as the default of 100% column width is always used there.",
                 "value": { "type": "LayoutConfiguration" }
               },
-              {
-                "name": "column-layout",
-                "description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.",
-                "value": { "type": "any" }
-              },
-              {
-                "name": "start-column-visible",
-                "description": "Returns if the `start` column is visible.",
-                "value": { "type": "any" }
-              },
               {
                 "name": "mid-column-visible",
                 "description": "Returns if the `middle` column is visible.",
                 "value": { "type": "any" }
               },
               {
-                "name": "end-column-visible",
-                "description": "Returns if the `end` column is visible.",
+                "name": "start-column-visible",
+                "description": "Returns if the `start` column is visible.",
                 "value": { "type": "any" }
               },
               {
@@ -534,7 +542,7 @@
               },
               {
                 "name": "layout-configuration-change",
-                "description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators."
+                "description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n**Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change."
               }
             ]
           }
@@ -544,29 +552,29 @@
           "description": "### Overview\n\nThe `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`.\nIt represents a single group option that users can select to organize data into logical groups.\n\n### Usage\n\nThe `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options.\nEach group item represents a column or field by which data can be grouped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "text",
-              "description": "Defines the text of the group item.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "selected",
               "description": "Defines if the group item is selected.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "text",
+              "description": "Defines the text of the group item.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "text",
-                "description": "Defines the text of the group item.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "selected",
                 "description": "Defines if the group item is selected.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "text",
+                "description": "Defines the text of the group item.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -574,13 +582,18 @@
         },
         {
           "name": "ui5-illustrated-message",
-          "description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n---\n\n\n### **Slots:**\n - **title** - Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.\n- **subtitle** - Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.\n- **default** - Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.\n\n### **CSS Parts:**\n - **subtitle** - Used to style the subtitle wrapper of the `ui5-illustrated-message`",
+          "description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.\n- **subtitle** - Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.\n- **title** - Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.\n\n### **CSS Parts:**\n - **subtitle** - Used to style the subtitle wrapper of the `ui5-illustrated-message`",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`",
-              "value": { "type": "string", "default": "\"BeforeSearch\"" }
+              "name": "accessible-name-ref",
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "decorative",
+              "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "design",
@@ -590,6 +603,11 @@
                 "default": "\"Auto\""
               }
             },
+            {
+              "name": "name",
+              "description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`",
+              "value": { "type": "string", "default": "\"BeforeSearch\"" }
+            },
             {
               "name": "subtitle-text",
               "description": "Defines the subtitle of the component.\n\n**Note:** Using this property, the default subtitle text of illustration will be overwritten.\n\n**Note:** Using `subtitle` slot, the default of this property will be overwritten.",
@@ -599,39 +617,34 @@
               "name": "title-text",
               "description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.",
               "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "accessible-name-ref",
-              "description": "Receives id(or many ids) of the elements that label the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "decorative",
-              "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.",
-              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
-              "name": "title",
-              "description": "Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten."
+              "name": "default",
+              "description": "Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`."
             },
             {
               "name": "subtitle",
               "description": "Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten."
             },
             {
-              "name": "default",
-              "description": "Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`."
+              "name": "title",
+              "description": "Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten."
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "name",
-                "description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`",
-                "value": { "type": "string" }
+                "name": "accessible-name-ref",
+                "description": "Receives id(or many ids) of the elements that label the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "decorative",
+                "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "design",
@@ -640,6 +653,11 @@
                   "type": "\"Auto\" | \"Base\" | \"Dot\" | \"Spot\" | \"Dialog\" | \"Scene\" | \"ExtraSmall\" | \"Small\" | \"Medium\" | \"Large\""
                 }
               },
+              {
+                "name": "name",
+                "description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`",
+                "value": { "type": "string" }
+              },
               {
                 "name": "subtitle-text",
                 "description": "Defines the subtitle of the component.\n\n**Note:** Using this property, the default subtitle text of illustration will be overwritten.\n\n**Note:** Using `subtitle` slot, the default of this property will be overwritten.",
@@ -649,16 +667,6 @@
                 "name": "title-text",
                 "description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.",
                 "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "accessible-name-ref",
-                "description": "Receives id(or many ids) of the elements that label the component.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "decorative",
-                "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.",
-                "value": { "type": "boolean" }
               }
             ],
             "events": []
@@ -666,14 +674,9 @@
         },
         {
           "name": "ui5-media-gallery",
-          "description": "### Overview\n\nThe `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,\nthe supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`\ncomponent.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\nis displayed in larger size.\n\nThe component is responsive by default and adjusts the position of the menu with respect to viewport size,\nbut the application is able to further customize the layout via the provided API.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\n\nWhen the thumbnails menu is focused the following keyboard\nshortcuts allow the user to navigate through the thumbnail items:\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- [Space], [Enter] - Selects an item\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when selection is changed by user interaction.\n- **overflow-click** - Fired when the thumbnails overflow button is clicked.\n- **display-area-click** - Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.\n\n### **Slots:**\n - **default** - Defines the component items.\n\n**Note:** Only one selected item is allowed.\n\n**Note:** Use the `ui5-media-gallery-item` component to define the desired items.",
+          "description": "### Overview\n\nThe `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,\nthe supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`\ncomponent.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\nis displayed in larger size.\n\nThe component is responsive by default and adjusts the position of the menu with respect to viewport size,\nbut the application is able to further customize the layout via the provided API.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\n\nWhen the thumbnails menu is focused the following keyboard\nshortcuts allow the user to navigate through the thumbnail items:\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- [Space], [Enter] - Selects an item\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`\n---\n\n\n### **Events:**\n - **display-area-click** - Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.\n- **overflow-click** - Fired when the thumbnails overflow button is clicked.\n- **selection-change** - Fired when selection is changed by user interaction.\n\n### **Slots:**\n - **default** - Defines the component items.\n\n**Note:** Only one selected item is allowed.\n\n**Note:** Use the `ui5-media-gallery-item` component to define the desired items.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "show-all-thumbnails",
-              "description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "interactive-display-area",
               "description": "If enabled, a `display-area-click` event is fired\nwhen the user clicks or taps on the display area.\n\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.",
@@ -699,6 +702,11 @@
                 "type": "\"Top\" | \"Bottom\"",
                 "default": "\"Bottom\""
               }
+            },
+            {
+              "name": "show-all-thumbnails",
+              "description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -709,25 +717,20 @@
           ],
           "events": [
             {
-              "name": "selection-change",
-              "description": "Fired when selection is changed by user interaction."
+              "name": "display-area-click",
+              "description": "Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item."
             },
             {
               "name": "overflow-click",
               "description": "Fired when the thumbnails overflow button is clicked."
             },
             {
-              "name": "display-area-click",
-              "description": "Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item."
+              "name": "selection-change",
+              "description": "Fired when selection is changed by user interaction."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "show-all-thumbnails",
-                "description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "interactive-display-area",
                 "description": "If enabled, a `display-area-click` event is fired\nwhen the user clicks or taps on the display area.\n\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.",
@@ -747,20 +750,25 @@
                 "name": "menu-vertical-align",
                 "description": "Determines the vertical alignment of the thumbnails menu\nvs. the central display area.",
                 "value": { "type": "\"Top\" | \"Bottom\"" }
+              },
+              {
+                "name": "show-all-thumbnails",
+                "description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
               {
-                "name": "selection-change",
-                "description": "Fired when selection is changed by user interaction."
+                "name": "display-area-click",
+                "description": "Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item."
               },
               {
                 "name": "overflow-click",
                 "description": "Fired when the thumbnails overflow button is clicked."
               },
               {
-                "name": "display-area-click",
-                "description": "Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item."
+                "name": "selection-change",
+                "description": "Fired when selection is changed by user interaction."
               }
             ]
           }
@@ -770,11 +778,6 @@
           "description": "### Overview\nThe `ui5-media-gallery-item` web component represents the items displayed in the\n`ui5-media-gallery` web component.\n\n**Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **thumbnail** - Defines the content of the thumbnail.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "selected",
-              "description": "Defines the selected state of the component.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "disabled",
               "description": "Defines whether the component is in disabled state.",
@@ -787,6 +790,11 @@
                 "type": "\"Square\" | \"Wide\"",
                 "default": "\"Square\""
               }
+            },
+            {
+              "name": "selected",
+              "description": "Defines the selected state of the component.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -802,11 +810,6 @@
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "selected",
-                "description": "Defines the selected state of the component.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "disabled",
                 "description": "Defines whether the component is in disabled state.",
@@ -816,6 +819,11 @@
                 "name": "layout",
                 "description": "Determines the layout of the item container.",
                 "value": { "type": "\"Square\" | \"Wide\"" }
+              },
+              {
+                "name": "selected",
+                "description": "Defines the selected state of the component.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": []
@@ -823,7 +831,7 @@
         },
         {
           "name": "ui5-navigation-layout",
-          "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\ndefault and can be displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n\n### **Methods:**\n - **isSideCollapsed(): _boolean_** - Gets whether the side navigation is collapsed.\n\n### **Slots:**\n - **header** - Defines the header.\n- **sideContent** - Defines the side content.\n- **default** - Defines the content.",
+          "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\ndefault and can be displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`\n---\n\n\n### **Methods:**\n - **isSideCollapsed(): _boolean_** - Gets whether the side navigation is collapsed.\n\n### **Slots:**\n - **default** - Defines the content.\n- **header** - Defines the header.\n- **sideContent** - Defines the side content.",
           "doc-url": "",
           "attributes": [
             {
@@ -836,19 +844,14 @@
             }
           ],
           "slots": [
+            { "name": "default", "description": "Defines the content." },
             { "name": "header", "description": "Defines the header." },
             {
               "name": "sideContent",
               "description": "Defines the side content."
-            },
-            { "name": "default", "description": "Defines the content." }
-          ],
-          "events": [
-            {
-              "name": "item-click",
-              "description": "Fired when an item is clicked."
             }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -857,12 +860,54 @@
                 "value": { "type": "\"Auto\" | \"Collapsed\" | \"Expanded\"" }
               }
             ],
-            "events": [
+            "events": []
+          }
+        },
+        {
+          "name": "ui5-navigation-menu",
+          "description": "### Overview\n\n`ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.\n\n### Usage\n\n`ui5-navigation-menu` contains `ui5-navigation-menu-item` components.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenu.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-navigation-menu-item` for the intended design.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the items of this component.\n\n**Note:** Use `ui5-navigation-menu-item` for the intended design."
+            }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
+        {
+          "name": "ui5-navigation-menu-item",
+          "description": "### Overview\n\n`ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### Usage\n\n`ui5-navigation-menu-item` represents a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,\nand each `ui5-navigation-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenuItem.js\";`\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "target",
+              "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "item-click",
-                "description": "Fired when an item is clicked."
+                "name": "href",
+                "description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "target",
+                "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**",
+                "value": { "type": "string | undefined" }
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -922,7 +967,7 @@
         },
         {
           "name": "ui5-li-notification-group",
-          "description": "### Overview\nThe `ui5-li-notification-group` is a special type of list item,\nthat unlike others can group items within self, usually `ui5-li-notification` items.\n\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`\n---\n\n\n### **Events:**\n - **toggle** - Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.\n- **load-more** - Fired when additional items are requested.\n\n### **Slots:**\n - **default** - Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.",
+          "description": "### Overview\nThe `ui5-li-notification-group` is a special type of list item,\nthat unlike others can group items within self, usually `ui5-li-notification` items.\n\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`\n---\n\n\n### **Events:**\n - **load-more** - Fired when additional items are requested.\n- **toggle** - Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.\n\n### **Slots:**\n - **default** - Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.",
           "doc-url": "",
           "attributes": [
             {
@@ -946,13 +991,13 @@
             }
           ],
           "events": [
-            {
-              "name": "toggle",
-              "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction."
-            },
             {
               "name": "load-more",
               "description": "Fired when additional items are requested."
+            },
+            {
+              "name": "toggle",
+              "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction."
             }
           ],
           "js": {
@@ -969,30 +1014,51 @@
               }
             ],
             "events": [
-              {
-                "name": "toggle",
-                "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction."
-              },
               {
                 "name": "load-more",
                 "description": "Fired when additional items are requested."
+              },
+              {
+                "name": "toggle",
+                "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction."
               }
             ]
           }
         },
+        {
+          "name": "ui5-notification-group-list",
+          "description": "Internal `ui5-li-notification-group-list` component,\nthat is used to support keyboard navigation of the notification group internal list.\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
+        {
+          "name": "ui5-notification-list-internal",
+          "description": "Internal `ui5-li-notification-list-list` component,\nthat is used to support keyboard navigation of the notification list internal list.\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "ui5-li-notification",
-          "description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the `Close` button is pressed.\n\n### **Slots:**\n - **avatar** - Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.\n- **menu** - Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n- **footnotes** - Defines the elements, displayed in the footer of the of the component.\n- **default** - Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\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 - **title-text** - Used to style the titleText of the notification list item",
+          "description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the `Close` button is pressed.\n\n### **Slots:**\n - **avatar** - Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.\n- **default** - Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\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- **footnotes** - Defines the elements, displayed in the footer of the of the component.\n- **menu** - Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n\n### **CSS Parts:**\n - **title-text** - Used to style the titleText of the notification list item",
           "doc-url": "",
           "attributes": [
             {
-              "name": "wrapping-type",
-              "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
+              "name": "importance",
+              "description": "Defines the `Important` label of the item.",
               "value": {
-                "type": "\"None\" | \"Normal\"",
-                "default": "\"None\""
+                "type": "\"Standard\" | \"Important\"",
+                "default": "\"Standard\""
               }
             },
+            {
+              "name": "show-close",
+              "description": "Defines if the `Close` button would be displayed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "state",
               "description": "Defines the status indicator of the item.",
@@ -1002,16 +1068,11 @@
               }
             },
             {
-              "name": "show-close",
-              "description": "Defines if the `Close` button would be displayed.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "importance",
-              "description": "Defines the `Important` label of the item.",
+              "name": "wrapping-type",
+              "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
               "value": {
-                "type": "\"Standard\" | \"Important\"",
-                "default": "\"Standard\""
+                "type": "\"None\" | \"Normal\"",
+                "default": "\"None\""
               }
             }
           ],
@@ -1021,16 +1082,16 @@
               "description": "Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`."
             },
             {
-              "name": "menu",
-              "description": "Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0."
+              "name": "default",
+              "description": "Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\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."
             },
             {
               "name": "footnotes",
               "description": "Defines the elements, displayed in the footer of the of the component."
             },
             {
-              "name": "default",
-              "description": "Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\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."
+              "name": "menu",
+              "description": "Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0."
             }
           ],
           "events": [
@@ -1042,9 +1103,14 @@
           "js": {
             "properties": [
               {
-                "name": "wrapping-type",
-                "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
-                "value": { "type": "\"None\" | \"Normal\"" }
+                "name": "importance",
+                "description": "Defines the `Important` label of the item.",
+                "value": { "type": "\"Standard\" | \"Important\"" }
+              },
+              {
+                "name": "show-close",
+                "description": "Defines if the `Close` button would be displayed.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "state",
@@ -1054,14 +1120,9 @@
                 }
               },
               {
-                "name": "show-close",
-                "description": "Defines if the `Close` button would be displayed.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "importance",
-                "description": "Defines the `Important` label of the item.",
-                "value": { "type": "\"Standard\" | \"Important\"" }
+                "name": "wrapping-type",
+                "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
+                "value": { "type": "\"None\" | \"Normal\"" }
               }
             ],
             "events": [
@@ -1074,7 +1135,7 @@
         },
         {
           "name": "ui5-page",
-          "description": "### Overview\n\nThe `ui5-page` is a container component that holds one whole screen of an application.\nThe page has three distinct areas that can hold content - a header, content area and a footer.\n### Structure\n#### Header\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n#### Content\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by setting `noScrolling` to `true`.\n#### Footer\nThe footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n\n**Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\nthat there is enough space for the `ui5-page` to be rendered.\n**Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Page.js\";`\n---\n\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n- **default** - Defines the content HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content section of the component",
+          "description": "### Overview\n\nThe `ui5-page` is a container component that holds one whole screen of an application.\nThe page has three distinct areas that can hold content - a header, content area and a footer.\n### Structure\n#### Header\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n#### Content\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by setting `noScrolling` to `true`.\n#### Footer\nThe footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n\n**Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\nthat there is enough space for the `ui5-page` to be rendered.\n**Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Page.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the content HTML Element.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content section of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -1085,11 +1146,6 @@
                 "default": "\"Solid\""
               }
             },
-            {
-              "name": "no-scrolling",
-              "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "fixed-footer",
               "description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.",
@@ -1099,13 +1155,14 @@
               "name": "hide-footer",
               "description": "Defines the footer visibility.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-scrolling",
+              "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            {
-              "name": "header",
-              "description": "Defines the header HTML Element."
-            },
             {
               "name": "default",
               "description": "Defines the content HTML Element."
@@ -1113,6 +1170,10 @@
             {
               "name": "footer",
               "description": "Defines the footer HTML Element."
+            },
+            {
+              "name": "header",
+              "description": "Defines the header HTML Element."
             }
           ],
           "events": [],
@@ -1123,11 +1184,6 @@
                 "description": "Defines the background color of the `ui5-page`.\n\n**Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.",
                 "value": { "type": "\"List\" | \"Solid\" | \"Transparent\"" }
               },
-              {
-                "name": "no-scrolling",
-                "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "fixed-footer",
                 "description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.",
@@ -1137,6 +1193,11 @@
                 "name": "hide-footer",
                 "description": "Defines the footer visibility.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "no-scrolling",
+                "description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": []
@@ -1162,8 +1223,8 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "title-text",
-              "description": "Defines the title of the component.",
+              "name": "icon",
+              "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n`<ui5-product-switch-item icon=\"palette\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
@@ -1171,11 +1232,6 @@
               "description": "Defines the subtitle of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
-            {
-              "name": "icon",
-              "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n`<ui5-product-switch-item icon=\"palette\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "target",
               "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.",
@@ -1185,6 +1241,11 @@
               "name": "target-src",
               "description": "Defines the component target URI. Supports standard hyperlink behavior.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "title-text",
+              "description": "Defines the title of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -1202,8 +1263,8 @@
           "js": {
             "properties": [
               {
-                "name": "title-text",
-                "description": "Defines the title of the component.",
+                "name": "icon",
+                "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n`<ui5-product-switch-item icon=\"palette\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
                 "value": { "type": "string | undefined" }
               },
               {
@@ -1211,11 +1272,6 @@
                 "description": "Defines the subtitle of the component.",
                 "value": { "type": "string | undefined" }
               },
-              {
-                "name": "icon",
-                "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n`<ui5-product-switch-item icon=\"palette\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "target",
                 "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.",
@@ -1225,6 +1281,11 @@
                 "name": "target-src",
                 "description": "Defines the component target URI. Supports standard hyperlink behavior.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "title-text",
+                "description": "Defines the title of the component.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -1237,9 +1298,24 @@
         },
         {
           "name": "ui5-search",
-          "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`\n---\n\n\n### **Events:**\n - **open** - Fired when the popup is opened.\n- **close** - Fired when the popup is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n- **scope-change** - Fired when the scope has changed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.\n\n### **Slots:**\n - **default** - Defines the Search suggestion items.\n- **action** - Defines the popup footer action button.\n- **illustration** - Defines the illustrated message to be shown in the popup.\n- **messageArea** - Defines the illustrated message to be shown in the popup.\n- **scopes** - Defines the component scope options.\n- **filterButton** - Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.",
+          "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the popup is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n- **open** - Fired when the popup is opened.\n- **scope-change** - Fired when the scope has changed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.\n\n### **Slots:**\n - **action** - Defines the popup footer action button.\n- **default** - Defines the Search suggestion items.\n- **filterButton** - Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.\n- **illustration** - Defines the illustrated message to be shown in the popup.\n- **messageArea** - Defines the illustrated message to be shown in the popup.\n- **scopes** - Defines the component scope options.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible ARIA description of the field.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "field-loading",
+              "description": "Indicates whether a loading indicator should be shown in the input field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "loading",
               "description": "Indicates whether a loading indicator should be shown in the popup.",
@@ -1256,9 +1332,14 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "field-loading",
-              "description": "Indicates whether a loading indicator should be shown in the input field.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "placeholder",
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "scope-value",
+              "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "show-clear-icon",
@@ -1269,36 +1350,20 @@
               "name": "value",
               "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
               "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "placeholder",
-              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "accessible-name",
-              "description": "Defines the accessible ARIA name of the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "accessible-description",
-              "description": "Defines the accessible ARIA description of the field.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "scope-value",
-              "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
-              "value": { "type": "string | undefined", "default": "\"\"" }
             }
           ],
           "slots": [
+            {
+              "name": "action",
+              "description": "Defines the popup footer action button."
+            },
             {
               "name": "default",
               "description": "Defines the Search suggestion items."
             },
             {
-              "name": "action",
-              "description": "Defines the popup footer action button."
+              "name": "filterButton",
+              "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive."
             },
             {
               "name": "illustration",
@@ -1311,17 +1376,9 @@
             {
               "name": "scopes",
               "description": "Defines the component scope options."
-            },
-            {
-              "name": "filterButton",
-              "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive."
             }
           ],
           "events": [
-            {
-              "name": "open",
-              "description": "Fired when the popup is opened."
-            },
             {
               "name": "close",
               "description": "Fired when the popup is closed."
@@ -1330,6 +1387,10 @@
               "name": "input",
               "description": "Fired when typing in input or clear icon is pressed."
             },
+            {
+              "name": "open",
+              "description": "Fired when the popup is opened."
+            },
             {
               "name": "scope-change",
               "description": "Fired when the scope has changed."
@@ -1342,34 +1403,34 @@
           "js": {
             "properties": [
               {
-                "name": "loading",
-                "description": "Indicates whether a loading indicator should be shown in the popup.",
-                "value": { "type": "boolean" }
+                "name": "accessible-description",
+                "description": "Defines the accessible ARIA description of the field.",
+                "value": { "type": "string | undefined" }
               },
               {
-                "name": "no-typeahead",
-                "description": "Defines whether the value will be autcompleted to match an item.",
-                "value": { "type": "boolean" }
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
               },
               {
-                "name": "open",
-                "description": "Indicates whether the items picker is open.",
+                "name": "field-loading",
+                "description": "Indicates whether a loading indicator should be shown in the input field.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "field-loading",
-                "description": "Indicates whether a loading indicator should be shown in the input field.",
+                "name": "loading",
+                "description": "Indicates whether a loading indicator should be shown in the popup.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "show-clear-icon",
-                "description": "Defines whether the clear icon of the search will be shown.",
+                "name": "no-typeahead",
+                "description": "Defines whether the value will be autcompleted to match an item.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "value",
-                "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
-                "value": { "type": "string" }
+                "name": "open",
+                "description": "Indicates whether the items picker is open.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "placeholder",
@@ -1377,26 +1438,22 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "accessible-name",
-                "description": "Defines the accessible ARIA name of the component.",
+                "name": "scope-value",
+                "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "accessible-description",
-                "description": "Defines the accessible ARIA description of the field.",
-                "value": { "type": "string | undefined" }
+                "name": "show-clear-icon",
+                "description": "Defines whether the clear icon of the search will be shown.",
+                "value": { "type": "boolean" }
               },
               {
-                "name": "scope-value",
-                "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
-                "value": { "type": "string | undefined" }
+                "name": "value",
+                "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
+                "value": { "type": "string" }
               }
             ],
             "events": [
-              {
-                "name": "open",
-                "description": "Fired when the popup is opened."
-              },
               {
                 "name": "close",
                 "description": "Fired when the popup is closed."
@@ -1405,6 +1462,10 @@
                 "name": "input",
                 "description": "Fired when typing in input or clear icon is pressed."
               },
+              {
+                "name": "open",
+                "description": "Fired when the popup is opened."
+              },
               {
                 "name": "scope-change",
                 "description": "Fired when the scope has changed."
@@ -1417,49 +1478,168 @@
           }
         },
         {
-          "name": "ui5-search-item",
-          "description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n---\n\n\n### **Events:**\n - **delete** - Fired when delete button is pressed.\n\n### **Slots:**\n - **image** - **Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.\n- **actions** - Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.",
+          "name": "ui5-search-field",
+          "description": "### Overview\n\nA `ui5-search-field` is an input field, used for user search.\n\nThe `ui5-search-field` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchField.js\";`\n---\n\n\n### **Events:**\n - **input** - Fired when typing in input or clear icon is pressed.\n- **scope-change** - Fired when the scope has changed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.\n\n### **Slots:**\n - **filterButton** - Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.\n- **scopes** - Defines the component scope options.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "text",
-              "description": "Defines the heading text of the search item.",
+              "name": "accessible-description",
+              "description": "Defines the accessible ARIA description of the field.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "description",
-              "description": "Defines the description that appears right under the item text, if available.",
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "icon",
-              "description": "Defines the icon name of the search item.\n**Note:** If provided, the image slot will be ignored.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "field-loading",
+              "description": "Indicates whether a loading indicator should be shown in the input field.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "selected",
-              "description": "Defines whether the search item is selected.",
+              "name": "placeholder",
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "scope-value",
+              "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "show-clear-icon",
+              "description": "Defines whether the clear icon of the search will be shown.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "value",
+              "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
+              "value": { "type": "string", "default": "\"\"" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "filterButton",
+              "description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive."
+            },
+            {
+              "name": "scopes",
+              "description": "Defines the component scope options."
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Fired when typing in input or clear icon is pressed."
+            },
+            {
+              "name": "scope-change",
+              "description": "Fired when the scope has changed."
+            },
+            {
+              "name": "search",
+              "description": "Fired when the user has triggered search with Enter key or Search Button press."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible ARIA description of the field.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "field-loading",
+                "description": "Indicates whether a loading indicator should be shown in the input field.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "placeholder",
+                "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "scope-value",
+                "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "show-clear-icon",
+                "description": "Defines whether the clear icon of the search will be shown.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "Fired when typing in input or clear icon is pressed."
+              },
+              {
+                "name": "scope-change",
+                "description": "Fired when the scope has changed."
+              },
+              {
+                "name": "search",
+                "description": "Fired when the user has triggered search with Enter key or Search Button press."
+              }
+            ]
+          }
+        },
+        {
+          "name": "ui5-search-item",
+          "description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n---\n\n\n### **Events:**\n - **delete** - Fired when delete button is pressed.\n\n### **Slots:**\n - **actions** - Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.\n- **image** - **Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.",
+          "doc-url": "",
+          "attributes": [
             {
               "name": "deletable",
               "description": "Defines whether the search item is deletable.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "description",
+              "description": "Defines the description that appears right under the item text, if available.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the icon name of the search item.\n**Note:** If provided, the image slot will be ignored.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "scope-name",
               "description": "Defines the scope of the search item",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "selected",
+              "description": "Defines whether the search item is selected.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "text",
+              "description": "Defines the heading text of the search item.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
-            {
-              "name": "image",
-              "description": "**Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS."
-            },
             {
               "name": "actions",
               "description": "Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements."
+            },
+            {
+              "name": "image",
+              "description": "**Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS."
             }
           ],
           "events": [
@@ -1471,9 +1651,9 @@
           "js": {
             "properties": [
               {
-                "name": "text",
-                "description": "Defines the heading text of the search item.",
-                "value": { "type": "string | undefined" }
+                "name": "deletable",
+                "description": "Defines whether the search item is deletable.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "description",
@@ -1486,18 +1666,18 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "selected",
-                "description": "Defines whether the search item is selected.",
-                "value": { "type": "boolean" }
+                "name": "scope-name",
+                "description": "Defines the scope of the search item",
+                "value": { "type": "string | undefined" }
               },
               {
-                "name": "deletable",
-                "description": "Defines whether the search item is deletable.",
+                "name": "selected",
+                "description": "Defines whether the search item is selected.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "scope-name",
-                "description": "Defines the scope of the search item",
+                "name": "text",
+                "description": "Defines the heading text of the search item.",
                 "value": { "type": "string | undefined" }
               }
             ],
@@ -1566,13 +1746,13 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "text",
-              "description": "Defines the text to be displayed.",
+              "name": "description",
+              "description": "Defines the description text to be displayed.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "description",
-              "description": "Defines the description text to be displayed.",
+              "name": "text",
+              "description": "Defines the text to be displayed.",
               "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
@@ -1580,13 +1760,13 @@
           "js": {
             "properties": [
               {
-                "name": "text",
-                "description": "Defines the text to be displayed.",
+                "name": "description",
+                "description": "Defines the description text to be displayed.",
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "description",
-                "description": "Defines the description text to be displayed.",
+                "name": "text",
+                "description": "Defines the text to be displayed.",
                 "value": { "type": "string | undefined" }
               }
             ],
@@ -1628,29 +1808,9 @@
         },
         {
           "name": "ui5-shellbar",
-          "description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\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`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`\n---\n\n\n### **Events:**\n - **notifications-click** - Fired, when the notification icon is activated.\n- **profile-click** - Fired, when the profile slot is present.\n- **product-switch-click** - Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **logo-click** - Fired, when the logo is activated.\n- **menu-item-click** - Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **search-button-click** - Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.\n- **search-field-toggle** - Fired, when the search field is expanded or collapsed.\n- **search-field-clear** - Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change.\n- **content-item-visibility-change** - Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.\n\n### **Methods:**\n - **closeOverflow(): _void_** - Closes the overflow popover.\n- **getSearchButtonDomRef(): _Promise<HTMLElement | null>_** - Returns the search button DOM reference.\n\n### **Slots:**\n - **startButton** - Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.\n- **branding** - Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.\n- **content** - Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.\n- **searchField** - Defines the `ui5-input`, that will be used as a search field.\n- **assistant** - Defines the assistant slot.\n- **default** - Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.\n- **profile** - You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.\n- **menuItems** - Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the  `<ui5-li></ui5-li>` and its ancestors.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-shellbar`",
+          "description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\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`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`\n---\n\n\n### **Events:**\n - **content-item-visibility-change** - Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.\n- **logo-click** - Fired, when the logo is activated.\n- **menu-item-click** - Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **notifications-click** - Fired, when the notification icon is activated.\n- **product-switch-click** - Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **profile-click** - Fired, when the profile slot is present.\n- **search-button-click** - Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.\n- **search-field-clear** - Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change.\n- **search-field-toggle** - Fired, when the search field is expanded or collapsed.\n\n### **Methods:**\n - **closeOverflow(): _void_** - Closes the overflow popover.\n- **getSearchButtonDomRef(): _Promise<HTMLElement | null>_** - Returns the search button DOM reference.\n\n### **Slots:**\n - **assistant** - Defines the assistant slot.\n- **branding** - Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.\n- **content** - Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.\n- **default** - Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.\n- **menuItems** - Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the  `<ui5-li></ui5-li>` and its ancestors.\n- **profile** - You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.\n- **searchField** - Defines the `ui5-input`, that will be used as a search field.\n- **startButton** - Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-shellbar`",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "notifications-count",
-              "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "show-notifications",
-              "description": "Defines, if the notification icon would be displayed.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "show-product-switch",
-              "description": "Defines, if the product switch icon would be displayed.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "show-search-field",
-              "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "accessibility-attributes",
               "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
@@ -1659,31 +1819,26 @@
                 "default": "{}"
               }
             },
-            {
-              "name": "hide-search-button",
-              "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "disable-search-collapse",
               "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "primary-title",
-              "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "secondary-title",
-              "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "hide-search-button",
+              "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "logo-dom-ref",
               "description": "Returns the `logo` DOM ref.",
               "value": { "type": "any", "default": "null" }
             },
+            {
+              "name": "notifications-count",
+              "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "notifications-dom-ref",
               "description": "Returns the `notifications` icon DOM ref.",
@@ -1695,20 +1850,45 @@
               "value": { "type": "any", "default": "null" }
             },
             {
-              "name": "profile-dom-ref",
-              "description": "Returns the `profile` icon DOM ref.",
-              "value": { "type": "any", "default": "null" }
+              "name": "primary-title",
+              "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "product-switch-dom-ref",
               "description": "Returns the `product-switch` icon DOM ref.",
               "value": { "type": "any", "default": "null" }
+            },
+            {
+              "name": "profile-dom-ref",
+              "description": "Returns the `profile` icon DOM ref.",
+              "value": { "type": "any", "default": "null" }
+            },
+            {
+              "name": "secondary-title",
+              "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "show-notifications",
+              "description": "Defines, if the notification icon would be displayed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-product-switch",
+              "description": "Defines, if the product switch icon would be displayed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-search-field",
+              "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
-              "name": "startButton",
-              "description": "Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling."
+              "name": "assistant",
+              "description": "Defines the assistant slot."
             },
             {
               "name": "branding",
@@ -1719,42 +1899,34 @@
               "description": "Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change."
             },
             {
-              "name": "searchField",
-              "description": "Defines the `ui5-input`, that will be used as a search field."
+              "name": "default",
+              "description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`."
             },
             {
-              "name": "assistant",
-              "description": "Defines the assistant slot."
+              "name": "logo",
+              "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo."
             },
             {
-              "name": "default",
-              "description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`."
+              "name": "menuItems",
+              "description": "Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the  `<ui5-li></ui5-li>` and its ancestors."
             },
             {
               "name": "profile",
               "description": "You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile."
             },
             {
-              "name": "logo",
-              "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo."
+              "name": "searchField",
+              "description": "Defines the `ui5-input`, that will be used as a search field."
             },
             {
-              "name": "menuItems",
-              "description": "Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the  `<ui5-li></ui5-li>` and its ancestors."
+              "name": "startButton",
+              "description": "Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling."
             }
           ],
           "events": [
             {
-              "name": "notifications-click",
-              "description": "Fired, when the notification icon is activated."
-            },
-            {
-              "name": "profile-click",
-              "description": "Fired, when the profile slot is present."
-            },
-            {
-              "name": "product-switch-click",
-              "description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
+              "name": "content-item-visibility-change",
+              "description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change."
             },
             {
               "name": "logo-click",
@@ -1765,74 +1937,57 @@
               "description": "Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
             },
             {
-              "name": "search-button-click",
-              "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`."
+              "name": "notifications-click",
+              "description": "Fired, when the notification icon is activated."
             },
             {
-              "name": "search-field-toggle",
-              "description": "Fired, when the search field is expanded or collapsed."
+              "name": "product-switch-click",
+              "description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
+            },
+            {
+              "name": "profile-click",
+              "description": "Fired, when the profile slot is present."
+            },
+            {
+              "name": "search-button-click",
+              "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`."
             },
             {
               "name": "search-field-clear",
               "description": "Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change."
             },
             {
-              "name": "content-item-visibility-change",
-              "description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change."
+              "name": "search-field-toggle",
+              "description": "Fired, when the search field is expanded or collapsed."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "notifications-count",
-                "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "show-notifications",
-                "description": "Defines, if the notification icon would be displayed.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "show-product-switch",
-                "description": "Defines, if the product switch icon would be displayed.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "show-search-field",
-                "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "accessibility-attributes",
                 "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
                 "value": { "type": "ShellBarAccessibilityAttributes" }
               },
-              {
-                "name": "hide-search-button",
-                "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "disable-search-collapse",
                 "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "primary-title",
-                "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "secondary-title",
-                "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
-                "value": { "type": "string | undefined" }
+                "name": "hide-search-button",
+                "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "logo-dom-ref",
                 "description": "Returns the `logo` DOM ref.",
                 "value": { "type": "any" }
               },
+              {
+                "name": "notifications-count",
+                "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "notifications-dom-ref",
                 "description": "Returns the `notifications` icon DOM ref.",
@@ -1844,28 +1999,45 @@
                 "value": { "type": "any" }
               },
               {
-                "name": "profile-dom-ref",
-                "description": "Returns the `profile` icon DOM ref.",
-                "value": { "type": "any" }
+                "name": "primary-title",
+                "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "product-switch-dom-ref",
                 "description": "Returns the `product-switch` icon DOM ref.",
                 "value": { "type": "any" }
-              }
-            ],
-            "events": [
+              },
               {
-                "name": "notifications-click",
-                "description": "Fired, when the notification icon is activated."
+                "name": "profile-dom-ref",
+                "description": "Returns the `profile` icon DOM ref.",
+                "value": { "type": "any" }
               },
               {
-                "name": "profile-click",
-                "description": "Fired, when the profile slot is present."
+                "name": "secondary-title",
+                "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
+                "value": { "type": "string | undefined" }
               },
               {
-                "name": "product-switch-click",
-                "description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
+                "name": "show-notifications",
+                "description": "Defines, if the notification icon would be displayed.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "show-product-switch",
+                "description": "Defines, if the product switch icon would be displayed.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "show-search-field",
+                "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": [
+              {
+                "name": "content-item-visibility-change",
+                "description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change."
               },
               {
                 "name": "logo-click",
@@ -1876,20 +2048,28 @@
                 "description": "Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
               },
               {
-                "name": "search-button-click",
-                "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`."
+                "name": "notifications-click",
+                "description": "Fired, when the notification icon is activated."
               },
               {
-                "name": "search-field-toggle",
-                "description": "Fired, when the search field is expanded or collapsed."
+                "name": "product-switch-click",
+                "description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
+              },
+              {
+                "name": "profile-click",
+                "description": "Fired, when the profile slot is present."
+              },
+              {
+                "name": "search-button-click",
+                "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`."
               },
               {
                 "name": "search-field-clear",
                 "description": "Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change."
               },
               {
-                "name": "content-item-visibility-change",
-                "description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change."
+                "name": "search-field-toggle",
+                "description": "Fired, when the search field is expanded or collapsed."
               }
             ]
           }
@@ -1899,6 +2079,11 @@
           "description": "### Overview\nThe `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the\n`ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property\nand the `logo` slot of `ui5-shellbar`.\n---\n\n\n### **Events:**\n - **click** - Fired, when the logo is activated.\n\n### **Slots:**\n - **default** - Defines the title for the ui5-shellbar-branding 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- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "href",
               "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.",
@@ -1908,11 +2093,6 @@
               "name": "target",
               "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**",
               "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "accessible-name",
-              "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.",
-              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -1933,6 +2113,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "href",
                 "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.",
@@ -1942,11 +2127,6 @@
                 "name": "target",
                 "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**",
                 "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "accessible-name",
-                "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.",
-                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -1963,27 +2143,27 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "icon",
-              "description": "Defines the item's icon.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "accessibility-attributes",
+              "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.",
+              "value": {
+                "type": "ShellBarItemAccessibilityAttributes",
+                "default": "{}"
+              }
             },
             {
-              "name": "text",
-              "description": "Defines the item text.",
+              "name": "count",
+              "description": "Defines the count displayed in badge.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "count",
-              "description": "Defines the count displayed in badge.",
+              "name": "icon",
+              "description": "Defines the item's icon.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "accessibility-attributes",
-              "description": "Defines accessibility attributes.",
-              "value": {
-                "type": "ShellBarItemAccessibilityAttributes",
-                "default": "{}"
-              }
+              "name": "text",
+              "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -1995,24 +2175,24 @@
           "js": {
             "properties": [
               {
-                "name": "icon",
-                "description": "Defines the item's icon.",
-                "value": { "type": "string | undefined" }
+                "name": "accessibility-attributes",
+                "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.",
+                "value": { "type": "ShellBarItemAccessibilityAttributes" }
               },
               {
-                "name": "text",
-                "description": "Defines the item text.",
+                "name": "count",
+                "description": "Defines the count displayed in badge.",
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "count",
-                "description": "Defines the count displayed in badge.",
+                "name": "icon",
+                "description": "Defines the item's icon.",
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "accessibility-attributes",
-                "description": "Defines accessibility attributes.",
-                "value": { "type": "ShellBarItemAccessibilityAttributes" }
+                "name": "text",
+                "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -2056,18 +2236,18 @@
         },
         {
           "name": "ui5-side-navigation",
-          "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selection has changed via user interaction.\n- **item-click** - Fired when an item is clicked.\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
+          "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **selection-change** - Fired when the selection has changed via user interaction.\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "collapsed",
-              "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "accessible-name",
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "collapsed",
+              "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -2085,36 +2265,36 @@
             }
           ],
           "events": [
-            {
-              "name": "selection-change",
-              "description": "Fired when the selection has changed via user interaction."
-            },
             {
               "name": "item-click",
               "description": "Fired when an item is clicked."
+            },
+            {
+              "name": "selection-change",
+              "description": "Fired when the selection has changed via user interaction."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "collapsed",
-                "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "accessible-name",
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "collapsed",
+                "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
-              {
-                "name": "selection-change",
-                "description": "Fired when the selection has changed via user interaction."
-              },
               {
                 "name": "item-click",
                 "description": "Fired when an item is clicked."
+              },
+              {
+                "name": "selection-change",
+                "description": "Fired when the selection has changed via user interaction."
               }
             ]
           }
@@ -2124,6 +2304,11 @@
           "description": "### Overview\n\nRepresents a group of navigation actions within `ui5-side-navigation`.\nThe `ui5-side-navigation-group` can only be used inside a `ui5-side-navigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines nested items by passing `ui5-side-navigation-item` to the default slot.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "disabled",
+              "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "expanded",
               "description": "Defines if the item is expanded",
@@ -2134,11 +2319,6 @@
               "description": "Defines the text of the item.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
-            {
-              "name": "disabled",
-              "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "tooltip",
               "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
@@ -2154,6 +2334,11 @@
           "events": [],
           "js": {
             "properties": [
+              {
+                "name": "disabled",
+                "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "expanded",
                 "description": "Defines if the item is expanded",
@@ -2164,11 +2349,6 @@
                 "description": "Defines the text of the item.",
                 "value": { "type": "string | undefined" }
               },
-              {
-                "name": "disabled",
-                "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "tooltip",
                 "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
@@ -2184,18 +2364,29 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "expanded",
-              "description": "Defines if the item is expanded",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
+              "value": {
+                "type": "SideNavigationItemAccessibilityAttributes",
+                "default": "{}"
+              }
             },
             {
-              "name": "icon",
-              "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\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).",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "design",
+              "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
+              "value": {
+                "type": "\"Default\" | \"Action\"",
+                "default": "\"Default\""
+              }
             },
             {
-              "name": "selected",
-              "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
+              "name": "disabled",
+              "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "expanded",
+              "description": "Defines if the item is expanded",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -2204,45 +2395,34 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "target",
-              "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
+              "name": "icon",
+              "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\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).",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "design",
-              "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
-              "value": {
-                "type": "\"Default\" | \"Action\"",
-                "default": "\"Default\""
-              }
-            },
-            {
-              "name": "unselectable",
-              "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
+              "name": "selected",
+              "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "accessibility-attributes",
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
-              "value": {
-                "type": "SideNavigationItemAccessibilityAttributes",
-                "default": "{}"
-              }
+              "name": "target",
+              "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "text",
               "description": "Defines the text of the item.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
-            {
-              "name": "disabled",
-              "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "tooltip",
               "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "unselectable",
+              "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -2260,18 +2440,23 @@
           "js": {
             "properties": [
               {
-                "name": "expanded",
-                "description": "Defines if the item is expanded",
-                "value": { "type": "boolean" }
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
+                "value": { "type": "SideNavigationItemAccessibilityAttributes" }
               },
               {
-                "name": "icon",
-                "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\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).",
-                "value": { "type": "string | undefined" }
+                "name": "design",
+                "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
+                "value": { "type": "\"Default\" | \"Action\"" }
               },
               {
-                "name": "selected",
-                "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
+                "name": "disabled",
+                "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "expanded",
+                "description": "Defines if the item is expanded",
                 "value": { "type": "boolean" }
               },
               {
@@ -2280,39 +2465,34 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "target",
-                "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
+                "name": "icon",
+                "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\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).",
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "design",
-                "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
-                "value": { "type": "\"Default\" | \"Action\"" }
-              },
-              {
-                "name": "unselectable",
-                "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
+                "name": "selected",
+                "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "accessibility-attributes",
-                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
-                "value": { "type": "SideNavigationItemAccessibilityAttributes" }
+                "name": "target",
+                "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "text",
                 "description": "Defines the text of the item.",
                 "value": { "type": "string | undefined" }
               },
-              {
-                "name": "disabled",
-                "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "tooltip",
                 "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "unselectable",
+                "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
@@ -2329,13 +2509,24 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "icon",
-              "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\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).",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
+              "value": {
+                "type": "SideNavigationItemAccessibilityAttributes",
+                "default": "{}"
+              }
             },
             {
-              "name": "selected",
-              "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
+              "name": "design",
+              "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
+              "value": {
+                "type": "\"Default\" | \"Action\"",
+                "default": "\"Default\""
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -2344,45 +2535,34 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "target",
-              "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
+              "name": "icon",
+              "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\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).",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "design",
-              "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
-              "value": {
-                "type": "\"Default\" | \"Action\"",
-                "default": "\"Default\""
-              }
-            },
-            {
-              "name": "unselectable",
-              "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
+              "name": "selected",
+              "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "accessibility-attributes",
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
-              "value": {
-                "type": "SideNavigationItemAccessibilityAttributes",
-                "default": "{}"
-              }
+              "name": "target",
+              "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "text",
               "description": "Defines the text of the item.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
-            {
-              "name": "disabled",
-              "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "tooltip",
               "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "unselectable",
+              "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [
@@ -2394,13 +2574,18 @@
           "js": {
             "properties": [
               {
-                "name": "icon",
-                "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\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).",
-                "value": { "type": "string | undefined" }
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
+                "value": { "type": "SideNavigationItemAccessibilityAttributes" }
               },
               {
-                "name": "selected",
-                "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
+                "name": "design",
+                "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
+                "value": { "type": "\"Default\" | \"Action\"" }
+              },
+              {
+                "name": "disabled",
+                "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
                 "value": { "type": "boolean" }
               },
               {
@@ -2409,39 +2594,34 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "target",
-                "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
+                "name": "icon",
+                "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\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).",
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "design",
-                "description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
-                "value": { "type": "\"Default\" | \"Action\"" }
-              },
-              {
-                "name": "unselectable",
-                "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
+                "name": "selected",
+                "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "accessibility-attributes",
-                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
-                "value": { "type": "SideNavigationItemAccessibilityAttributes" }
+                "name": "target",
+                "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "text",
                 "description": "Defines the text of the item.",
                 "value": { "type": "string | undefined" }
               },
-              {
-                "name": "disabled",
-                "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "tooltip",
                 "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "unselectable",
+                "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
@@ -2457,29 +2637,29 @@
           "description": "### Overview\n\nThe `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\nIt represents a single sort option that users can select to organize data in ascending or descending order.\n\n### Usage\n\nThe `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\nEach sort item represents a column or field by which data can be sorted.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "text",
-              "description": "Defines the text of the sort item.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "selected",
               "description": "Defines if the sort item is selected.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "text",
+              "description": "Defines the text of the sort item.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "text",
-                "description": "Defines the text of the sort item.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "selected",
                 "description": "Defines if the sort item is selected.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "text",
+                "description": "Defines the text of the sort item.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -2490,6 +2670,19 @@
           "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n---\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "growing",
+              "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.",
+              "value": {
+                "type": "\"Button\" | \"None\" | \"Scroll\"",
+                "default": "\"None\""
+              }
+            },
             {
               "name": "layout",
               "description": "Defines the items orientation.",
@@ -2498,11 +2691,6 @@
                 "default": "\"Vertical\""
               }
             },
-            {
-              "name": "accessible-name",
-              "description": "Defines the accessible ARIA name of the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "loading",
               "description": "Defines if the component should display a loading indicator over the Timeline.",
@@ -2512,14 +2700,6 @@
               "name": "loading-delay",
               "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
               "value": { "type": "number", "default": "1000" }
-            },
-            {
-              "name": "growing",
-              "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.",
-              "value": {
-                "type": "\"Button\" | \"None\" | \"Scroll\"",
-                "default": "\"None\""
-              }
             }
           ],
           "slots": [
@@ -2536,16 +2716,21 @@
           ],
           "js": {
             "properties": [
-              {
-                "name": "layout",
-                "description": "Defines the items orientation.",
-                "value": { "type": "\"Vertical\" | \"Horizontal\"" }
-              },
               {
                 "name": "accessible-name",
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "growing",
+                "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.",
+                "value": { "type": "\"Button\" | \"None\" | \"Scroll\"" }
+              },
+              {
+                "name": "layout",
+                "description": "Defines the items orientation.",
+                "value": { "type": "\"Vertical\" | \"Horizontal\"" }
+              },
               {
                 "name": "loading",
                 "description": "Defines if the component should display a loading indicator over the Timeline.",
@@ -2555,11 +2740,6 @@
                 "name": "loading-delay",
                 "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
                 "value": { "type": "number" }
-              },
-              {
-                "name": "growing",
-                "description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.",
-                "value": { "type": "\"Button\" | \"None\" | \"Scroll\"" }
               }
             ],
             "events": [
@@ -2575,15 +2755,15 @@
           "description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.\n---\n\n\n### **Events:**\n - **toggle** - Fired when the group item is expanded or collapsed.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline-group-item`.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "group-name",
-              "description": "Defines the text of the button that expands and collapses the group.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "collapsed",
               "description": "Determines if the group is collapsed or expanded.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "group-name",
+              "description": "Defines the text of the button that expands and collapses the group.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -2600,15 +2780,15 @@
           ],
           "js": {
             "properties": [
-              {
-                "name": "group-name",
-                "description": "Defines the text of the button that expands and collapses the group.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "collapsed",
                 "description": "Determines if the group is collapsed or expanded.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "group-name",
+                "description": "Defines the text of the button that expands and collapses the group.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -2640,9 +2820,12 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "title-text",
-              "description": "Defines the title text of the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "state",
+              "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.",
+              "value": {
+                "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
+                "default": "\"None\""
+              }
             },
             {
               "name": "subtitle-text",
@@ -2650,12 +2833,9 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "state",
-              "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.",
-              "value": {
-                "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
-                "default": "\"None\""
-              }
+              "name": "title-text",
+              "description": "Defines the title text of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -2688,9 +2868,11 @@
                 "value": { "type": "boolean" }
               },
               {
-                "name": "title-text",
-                "description": "Defines the title text of the component.",
-                "value": { "type": "string | undefined" }
+                "name": "state",
+                "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.",
+                "value": {
+                  "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
+                }
               },
               {
                 "name": "subtitle-text",
@@ -2698,11 +2880,9 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "state",
-                "description": "Defines the state of the icon displayed in the `ui5-timeline-item`.",
-                "value": {
-                  "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
-                }
+                "name": "title-text",
+                "description": "Defines the title text of the component.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -2719,21 +2899,18 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "selection-mode",
-              "description": "Defines the selection mode of the `ui5-upload-collection`.",
-              "value": {
-                "type": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\"",
-                "default": "\"None\""
-              }
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "no-data-description",
-              "description": "Allows you to set your own text for the 'No data' description.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "hide-drag-overlay",
+              "description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "no-data-text",
-              "description": "Allows you to set your own text for the 'No data' text.",
+              "name": "no-data-description",
+              "description": "Allows you to set your own text for the 'No data' description.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
@@ -2745,14 +2922,17 @@
               }
             },
             {
-              "name": "hide-drag-overlay",
-              "description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "no-data-text",
+              "description": "Allows you to set your own text for the 'No data' text.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "accessible-name",
-              "description": "Defines the accessible ARIA name of the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "selection-mode",
+              "description": "Defines the selection mode of the `ui5-upload-collection`.",
+              "value": {
+                "type": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -2778,20 +2958,18 @@
           "js": {
             "properties": [
               {
-                "name": "selection-mode",
-                "description": "Defines the selection mode of the `ui5-upload-collection`.",
-                "value": {
-                  "type": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\""
-                }
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
               },
               {
-                "name": "no-data-description",
-                "description": "Allows you to set your own text for the 'No data' description.",
-                "value": { "type": "string | undefined" }
+                "name": "hide-drag-overlay",
+                "description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.",
+                "value": { "type": "boolean" }
               },
               {
-                "name": "no-data-text",
-                "description": "Allows you to set your own text for the 'No data' text.",
+                "name": "no-data-description",
+                "description": "Allows you to set your own text for the 'No data' description.",
                 "value": { "type": "string | undefined" }
               },
               {
@@ -2802,14 +2980,16 @@
                 }
               },
               {
-                "name": "hide-drag-overlay",
-                "description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.",
-                "value": { "type": "boolean" }
+                "name": "no-data-text",
+                "description": "Allows you to set your own text for the 'No data' text.",
+                "value": { "type": "string | undefined" }
               },
               {
-                "name": "accessible-name",
-                "description": "Defines the accessible ARIA name of the component.",
-                "value": { "type": "string | undefined" }
+                "name": "selection-mode",
+                "description": "Defines the selection mode of the `ui5-upload-collection`.",
+                "value": {
+                  "type": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\""
+                }
               }
             ],
             "events": [
@@ -2826,9 +3006,14 @@
         },
         {
           "name": "ui5-upload-collection-item",
-          "description": "### Overview\nA component to be used within the `ui5-upload-collection`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";`\n---\n\n\n### **Events:**\n - **file-name-click** - Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`.\n- **rename** - Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`.\n- **terminate** - Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.\n- **retry** - Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.\n\n### **Slots:**\n - **default** - Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name.\n- **thumbnail** - A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.\n\n**Note:** Use `ui5-icon` or `img` for the intended design.",
+          "description": "### Overview\nA component to be used within the `ui5-upload-collection`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";`\n---\n\n\n### **Events:**\n - **file-name-click** - Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`.\n- **rename** - Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`.\n- **retry** - Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.\n- **terminate** - Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.\n\n### **Slots:**\n - **default** - Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name.\n- **thumbnail** - A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.\n\n**Note:** Use `ui5-icon` or `img` for the intended design.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "disable-delete-button",
+              "description": "Disables the delete button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "file",
               "description": "Holds an instance of `File` associated with this item.",
@@ -2844,11 +3029,6 @@
               "description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "disable-delete-button",
-              "description": "Disables the delete button.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "hide-delete-button",
               "description": "Hides the delete button.",
@@ -2897,17 +3077,22 @@
               "name": "rename",
               "description": "Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`."
             },
-            {
-              "name": "terminate",
-              "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`."
-            },
             {
               "name": "retry",
               "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`."
+            },
+            {
+              "name": "terminate",
+              "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`."
             }
           ],
           "js": {
             "properties": [
+              {
+                "name": "disable-delete-button",
+                "description": "Disables the delete button.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "file",
                 "description": "Holds an instance of `File` associated with this item.",
@@ -2923,11 +3108,6 @@
                 "description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "disable-delete-button",
-                "description": "Disables the delete button.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "hide-delete-button",
                 "description": "Hides the delete button.",
@@ -2965,20 +3145,20 @@
                 "name": "rename",
                 "description": "Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`."
               },
-              {
-                "name": "terminate",
-                "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`."
-              },
               {
                 "name": "retry",
                 "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`."
+              },
+              {
+                "name": "terminate",
+                "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`."
               }
             ]
           }
         },
         {
           "name": "ui5-user-menu",
-          "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n---\n\n\n### **Events:**\n - **avatar-click** - Fired when the account avatar is selected.\n- **manage-account-click** - Fired when the \"Manage Account\" button is selected.\n- **edit-accounts-click** - Fired when the \"Edit Accounts\" button is selected.\n- **change-account** - Fired when the account is switched to a different one.\n- **item-click** - Fired when a menu item is selected.\n- **open** - Fired when a user menu is open.\n- **close** - Fired when a user menu is close.\n- **sign-out-click** - Fired when the \"Sign Out\" button is selected.\n\n### **Slots:**\n - **default** - Defines the menu items.\n- **accounts** - Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.\n- **footer** - Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely.",
+          "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n---\n\n\n### **Events:**\n - **avatar-click** - Fired when the account avatar is selected.\n- **change-account** - Fired when the account is switched to a different one.\n- **close** - Fired when a user menu is close.\n- **edit-accounts-click** - Fired when the \"Edit Accounts\" button is selected.\n- **item-click** - Fired when a menu item is selected.\n- **manage-account-click** - Fired when the \"Manage Account\" button is selected.\n- **open** - Fired when a user menu is open.\n- **sign-out-click** - Fired when the \"Sign Out\" button is selected.\n\n### **Slots:**\n - **accounts** - Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.\n- **default** - Defines the menu items.\n- **footer** - Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely.",
           "doc-url": "",
           "attributes": [
             {
@@ -2995,32 +3175,32 @@
               }
             },
             {
-              "name": "show-manage-account",
-              "description": "Defines if the User Menu shows the Manage Account option.",
+              "name": "show-edit-accounts",
+              "description": "Defines if the User Menu shows the Edit Accounts option.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "show-other-accounts",
-              "description": "Defines if the User Menu shows the Other Accounts option.",
+              "name": "show-edit-button",
+              "description": "Defines if the User menu shows edit button.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "show-edit-accounts",
-              "description": "Defines if the User Menu shows the Edit Accounts option.",
+              "name": "show-manage-account",
+              "description": "Defines if the User Menu shows the Manage Account option.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "show-edit-button",
-              "description": "Defines if the User menu shows edit button.",
+              "name": "show-other-accounts",
+              "description": "Defines if the User Menu shows the Other Accounts option.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            { "name": "default", "description": "Defines the menu items." },
             {
               "name": "accounts",
               "description": "Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`."
             },
+            { "name": "default", "description": "Defines the menu items." },
             {
               "name": "footer",
               "description": "Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely."
@@ -3032,28 +3212,28 @@
               "description": "Fired when the account avatar is selected."
             },
             {
-              "name": "manage-account-click",
-              "description": "Fired when the \"Manage Account\" button is selected."
+              "name": "change-account",
+              "description": "Fired when the account is switched to a different one."
+            },
+            {
+              "name": "close",
+              "description": "Fired when a user menu is close."
             },
             {
               "name": "edit-accounts-click",
               "description": "Fired when the \"Edit Accounts\" button is selected."
             },
-            {
-              "name": "change-account",
-              "description": "Fired when the account is switched to a different one."
-            },
             {
               "name": "item-click",
               "description": "Fired when a menu item is selected."
             },
             {
-              "name": "open",
-              "description": "Fired when a user menu is open."
+              "name": "manage-account-click",
+              "description": "Fired when the \"Manage Account\" button is selected."
             },
             {
-              "name": "close",
-              "description": "Fired when a user menu is close."
+              "name": "open",
+              "description": "Fired when a user menu is open."
             },
             {
               "name": "sign-out-click",
@@ -3073,23 +3253,23 @@
                 "value": { "type": "string | HTMLElement | null | undefined" }
               },
               {
-                "name": "show-manage-account",
-                "description": "Defines if the User Menu shows the Manage Account option.",
+                "name": "show-edit-accounts",
+                "description": "Defines if the User Menu shows the Edit Accounts option.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "show-other-accounts",
-                "description": "Defines if the User Menu shows the Other Accounts option.",
+                "name": "show-edit-button",
+                "description": "Defines if the User menu shows edit button.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "show-edit-accounts",
-                "description": "Defines if the User Menu shows the Edit Accounts option.",
+                "name": "show-manage-account",
+                "description": "Defines if the User Menu shows the Manage Account option.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "show-edit-button",
-                "description": "Defines if the User menu shows edit button.",
+                "name": "show-other-accounts",
+                "description": "Defines if the User Menu shows the Other Accounts option.",
                 "value": { "type": "boolean" }
               }
             ],
@@ -3099,28 +3279,28 @@
                 "description": "Fired when the account avatar is selected."
               },
               {
-                "name": "manage-account-click",
-                "description": "Fired when the \"Manage Account\" button is selected."
+                "name": "change-account",
+                "description": "Fired when the account is switched to a different one."
               },
               {
-                "name": "edit-accounts-click",
-                "description": "Fired when the \"Edit Accounts\" button is selected."
+                "name": "close",
+                "description": "Fired when a user menu is close."
               },
               {
-                "name": "change-account",
-                "description": "Fired when the account is switched to a different one."
+                "name": "edit-accounts-click",
+                "description": "Fired when the \"Edit Accounts\" button is selected."
               },
               {
                 "name": "item-click",
                 "description": "Fired when a menu item is selected."
               },
               {
-                "name": "open",
-                "description": "Fired when a user menu is open."
+                "name": "manage-account-click",
+                "description": "Fired when the \"Manage Account\" button is selected."
               },
               {
-                "name": "close",
-                "description": "Fired when a user menu is close."
+                "name": "open",
+                "description": "Fired when a user menu is open."
               },
               {
                 "name": "sign-out-click",
@@ -3135,14 +3315,9 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "avatar-src",
-              "description": "Defines the avatar image url of the user.",
-              "value": { "type": "string | undefined", "default": "\"\"" }
-            },
-            {
-              "name": "avatar-initials",
-              "description": "Defines the avatar initials of the user.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "additional-info",
+              "description": "Defines additional information for the user.",
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "avatar-color-scheme",
@@ -3153,14 +3328,14 @@
               }
             },
             {
-              "name": "title-text",
-              "description": "Defines the title text of the user.",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "avatar-initials",
+              "description": "Defines the avatar initials of the user.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "subtitle-text",
-              "description": "Defines additional text of the user.",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "avatar-src",
+              "description": "Defines the avatar image url of the user.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "description",
@@ -3168,9 +3343,9 @@
               "value": { "type": "string", "default": "\"\"" }
             },
             {
-              "name": "additional-info",
-              "description": "Defines additional information for the user.",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "loading",
+              "description": "Indicates whether a loading indicator should be shown.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "selected",
@@ -3178,23 +3353,23 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "loading",
-              "description": "Indicates whether a loading indicator should be shown.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "subtitle-text",
+              "description": "Defines additional text of the user.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "title-text",
+              "description": "Defines the title text of the user.",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "avatar-src",
-                "description": "Defines the avatar image url of the user.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "avatar-initials",
-                "description": "Defines the avatar initials of the user.",
-                "value": { "type": "string | undefined" }
+                "name": "additional-info",
+                "description": "Defines additional information for the user.",
+                "value": { "type": "string" }
               },
               {
                 "name": "avatar-color-scheme",
@@ -3204,14 +3379,14 @@
                 }
               },
               {
-                "name": "title-text",
-                "description": "Defines the title text of the user.",
-                "value": { "type": "string" }
+                "name": "avatar-initials",
+                "description": "Defines the avatar initials of the user.",
+                "value": { "type": "string | undefined" }
               },
               {
-                "name": "subtitle-text",
-                "description": "Defines additional text of the user.",
-                "value": { "type": "string" }
+                "name": "avatar-src",
+                "description": "Defines the avatar image url of the user.",
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "description",
@@ -3219,9 +3394,9 @@
                 "value": { "type": "string" }
               },
               {
-                "name": "additional-info",
-                "description": "Defines additional information for the user.",
-                "value": { "type": "string" }
+                "name": "loading",
+                "description": "Indicates whether a loading indicator should be shown.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "selected",
@@ -3229,9 +3404,14 @@
                 "value": { "type": "boolean" }
               },
               {
-                "name": "loading",
-                "description": "Indicates whether a loading indicator should be shown.",
-                "value": { "type": "boolean" }
+                "name": "subtitle-text",
+                "description": "Defines additional text of the user.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "title-text",
+                "description": "Defines the title text of the user.",
+                "value": { "type": "string" }
               }
             ],
             "events": []
@@ -3265,24 +3445,24 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "show-manage-account",
-              "description": "Defines if the User Menu shows the `Manage Account` option.",
+              "name": "secondary",
+              "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "text",
-              "description": "Defines the title text of the user settings view.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "selected",
               "description": "Defines whether the view is selected. There can be just one selected view at a time.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "secondary",
-              "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
+              "name": "show-manage-account",
+              "description": "Defines if the User Menu shows the `Manage Account` option.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "text",
+              "description": "Defines the title text of the user settings view.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -3305,24 +3485,24 @@
           "js": {
             "properties": [
               {
-                "name": "show-manage-account",
-                "description": "Defines if the User Menu shows the `Manage Account` option.",
+                "name": "secondary",
+                "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "text",
-                "description": "Defines the title text of the user settings view.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "selected",
                 "description": "Defines whether the view is selected. There can be just one selected view at a time.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "secondary",
-                "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
+                "name": "show-manage-account",
+                "description": "Defines if the User Menu shows the `Manage Account` option.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "text",
+                "description": "Defines the title text of the user settings view.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -3339,13 +3519,13 @@
         },
         {
           "name": "ui5-user-settings-appearance-view",
-          "description": "### Overview\n\nThe `ui5-user-settings-appearance-view` represents a view displayed in the `ui5-user-settings-item`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when an item is selected.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n- **additionalContent** - Defines additional content displayed below the items list.",
+          "description": "### Overview\n\nThe `ui5-user-settings-appearance-view` represents a view displayed in the `ui5-user-settings-item`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when an item is selected.\n\n### **Slots:**\n - **additionalContent** - Defines additional content displayed below the items list.\n- **default** - Defines the items of the component.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "text",
-              "description": "Defines the title text of the user settings view.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "secondary",
+              "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "selected",
@@ -3353,19 +3533,19 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "secondary",
-              "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "text",
+              "description": "Defines the title text of the user settings view.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
-            {
-              "name": "default",
-              "description": "Defines the items of the component."
-            },
             {
               "name": "additionalContent",
               "description": "Defines additional content displayed below the items list."
+            },
+            {
+              "name": "default",
+              "description": "Defines the items of the component."
             }
           ],
           "events": [
@@ -3377,9 +3557,9 @@
           "js": {
             "properties": [
               {
-                "name": "text",
-                "description": "Defines the title text of the user settings view.",
-                "value": { "type": "string | undefined" }
+                "name": "secondary",
+                "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "selected",
@@ -3387,9 +3567,9 @@
                 "value": { "type": "boolean" }
               },
               {
-                "name": "secondary",
-                "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
-                "value": { "type": "boolean" }
+                "name": "text",
+                "description": "Defines the title text of the user settings view.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -3419,6 +3599,16 @@
           "description": "### Overview\n\nThe `ui5-user-settings-appearance-view-item` represents a theme/appearance option item\nwithin the `ui5-user-settings-appearance-view`.\n\nIt displays a theme with an avatar icon, text label, and can be selected.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "color-scheme",
+              "description": "Defines the color scheme of the avatar.",
+              "value": { "type": "string", "default": "\"Accent7\"" }
+            },
+            {
+              "name": "icon",
+              "description": "Defines the icon of the appearance item.",
+              "value": { "type": "string", "default": "\"product\"" }
+            },
             {
               "name": "item-key",
               "description": "Defines the unique identifier of the item.",
@@ -3428,39 +3618,29 @@
               "name": "text",
               "description": "Defines the text label displayed for the appearance item.",
               "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "icon",
-              "description": "Defines the icon of the appearance item.",
-              "value": { "type": "string", "default": "\"product\"" }
-            },
-            {
-              "name": "color-scheme",
-              "description": "Defines the color scheme of the avatar.",
-              "value": { "type": "string", "default": "\"Accent7\"" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "item-key",
-                "description": "Defines the unique identifier of the item.",
+                "name": "color-scheme",
+                "description": "Defines the color scheme of the avatar.",
                 "value": { "type": "string" }
               },
               {
-                "name": "text",
-                "description": "Defines the text label displayed for the appearance item.",
+                "name": "icon",
+                "description": "Defines the icon of the appearance item.",
                 "value": { "type": "string" }
               },
               {
-                "name": "icon",
-                "description": "Defines the icon of the appearance item.",
+                "name": "item-key",
+                "description": "Defines the unique identifier of the item.",
                 "value": { "type": "string" }
               },
               {
-                "name": "color-scheme",
-                "description": "Defines the color scheme of the avatar.",
+                "name": "text",
+                "description": "Defines the text label displayed for the appearance item.",
                 "value": { "type": "string" }
               }
             ],
@@ -3469,19 +3649,19 @@
         },
         {
           "name": "ui5-user-settings-dialog",
-          "description": "### Overview\n\nThe `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\nIt allows the user to easily view information and settings for an account.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when an item is selected.\n- **open** - Fired when a settings dialog is open.\n- **before-close** - Fired before the settings dialog is closed.\n- **close** - Fired when a settings dialog is closed.\n\n### **Slots:**\n - **default** - Defines the user settings items.\n\n**Note:**  If no setting item is set as `selected`, the first one will be selected.\n- **fixedItems** - Defines the fixed user settings items.",
+          "description": "### Overview\n\nThe `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\nIt allows the user to easily view information and settings for an account.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the settings dialog is closed.\n- **close** - Fired when a settings dialog is closed.\n- **open** - Fired when a settings dialog is open.\n- **selection-change** - Fired when an item is selected.\n\n### **Slots:**\n - **default** - Defines the user settings items.\n\n**Note:**  If no setting item is set as `selected`, the first one will be selected.\n- **fixedItems** - Defines the fixed user settings items.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "open",
-              "description": "Defines, if the User Settings Dialog is opened.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "header-text",
               "description": "Defines the headerText of the item.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "open",
+              "description": "Defines, if the User Settings Dialog is opened.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "show-search-field",
               "description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.",
@@ -3500,34 +3680,34 @@
           ],
           "events": [
             {
-              "name": "selection-change",
-              "description": "Fired when an item is selected."
+              "name": "before-close",
+              "description": "Fired before the settings dialog is closed."
             },
             {
-              "name": "open",
-              "description": "Fired when a settings dialog is open."
+              "name": "close",
+              "description": "Fired when a settings dialog is closed."
             },
             {
-              "name": "before-close",
-              "description": "Fired before the settings dialog is closed."
+              "name": "open",
+              "description": "Fired when a settings dialog is open."
             },
             {
-              "name": "close",
-              "description": "Fired when a settings dialog is closed."
+              "name": "selection-change",
+              "description": "Fired when an item is selected."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "open",
-                "description": "Defines, if the User Settings Dialog is opened.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "header-text",
                 "description": "Defines the headerText of the item.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "open",
+                "description": "Defines, if the User Settings Dialog is opened.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "show-search-field",
                 "description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.",
@@ -3535,14 +3715,6 @@
               }
             ],
             "events": [
-              {
-                "name": "selection-change",
-                "description": "Fired when an item is selected."
-              },
-              {
-                "name": "open",
-                "description": "Fired when a settings dialog is open."
-              },
               {
                 "name": "before-close",
                 "description": "Fired before the settings dialog is closed."
@@ -3550,6 +3722,14 @@
               {
                 "name": "close",
                 "description": "Fired when a settings dialog is closed."
+              },
+              {
+                "name": "open",
+                "description": "Fired when a settings dialog is open."
+              },
+              {
+                "name": "selection-change",
+                "description": "Fired when an item is selected."
               }
             ]
           }
@@ -3560,14 +3740,14 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "text",
-              "description": "Defines the text of the user settings item.",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "tooltip",
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "disabled",
+              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "header-text",
@@ -3575,14 +3755,9 @@
               "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
-              "name": "selected",
-              "description": "Shows item tab.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "icon",
+              "description": "Defines the icon of the component.",
+              "value": { "type": "string", "default": "\"globe\"" }
             },
             {
               "name": "loading",
@@ -3595,14 +3770,19 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "icon",
-              "description": "Defines the icon of the component.",
-              "value": { "type": "string", "default": "\"globe\"" }
+              "name": "selected",
+              "description": "Shows item tab.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "accessible-name",
-              "description": "Defines the accessible ARIA name of the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "text",
+              "description": "Defines the text of the user settings item.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "tooltip",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "slots": [
@@ -3624,14 +3804,14 @@
           "js": {
             "properties": [
               {
-                "name": "text",
-                "description": "Defines the text of the user settings item.",
-                "value": { "type": "string" }
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
               },
               {
-                "name": "tooltip",
-                "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.",
-                "value": { "type": "string" }
+                "name": "disabled",
+                "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "header-text",
@@ -3639,14 +3819,9 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "selected",
-                "description": "Shows item tab.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "disabled",
-                "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
-                "value": { "type": "boolean" }
+                "name": "icon",
+                "description": "Defines the icon of the component.",
+                "value": { "type": "string" }
               },
               {
                 "name": "loading",
@@ -3659,14 +3834,19 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "icon",
-                "description": "Defines the icon of the component.",
+                "name": "selected",
+                "description": "Shows item tab.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "text",
+                "description": "Defines the text of the user settings item.",
                 "value": { "type": "string" }
               },
               {
-                "name": "accessible-name",
-                "description": "Defines the accessible ARIA name of the component.",
-                "value": { "type": "string | undefined" }
+                "name": "tooltip",
+                "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.",
+                "value": { "type": "string" }
               }
             ],
             "events": [
@@ -3683,9 +3863,9 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "text",
-              "description": "Defines the title text of the user settings view.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "secondary",
+              "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "selected",
@@ -3693,9 +3873,9 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "secondary",
-              "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "text",
+              "description": "Defines the title text of the user settings view.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -3708,9 +3888,9 @@
           "js": {
             "properties": [
               {
-                "name": "text",
-                "description": "Defines the title text of the user settings view.",
-                "value": { "type": "string | undefined" }
+                "name": "secondary",
+                "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "selected",
@@ -3718,9 +3898,9 @@
                 "value": { "type": "boolean" }
               },
               {
-                "name": "secondary",
-                "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
-                "value": { "type": "boolean" }
+                "name": "text",
+                "description": "Defines the title text of the user settings view.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -3728,14 +3908,9 @@
         },
         {
           "name": "ui5-view-settings-dialog",
-          "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **confirm** - Fired when confirmation button is activated.\n- **cancel** - Fired when cancel button is activated.\n- **before-open** - Fired before the component is opened.\n- **open** - Fired after the dialog is opened.\n- **close** - Fired after the dialog is closed.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n- **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
+          "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "sort-descending",
-              "description": "Defines the initial sort order.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "group-descending",
               "description": "Defines the initial group order.",
@@ -3745,13 +3920,14 @@
               "name": "open",
               "description": "Indicates if the dialog is open.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "sort-descending",
+              "description": "Defines the initial sort order.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            {
-              "name": "sortItems",
-              "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`"
-            },
             {
               "name": "filterItems",
               "description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`"
@@ -3759,37 +3935,36 @@
             {
               "name": "groupItems",
               "description": "Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`"
+            },
+            {
+              "name": "sortItems",
+              "description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`"
             }
           ],
           "events": [
             {
-              "name": "confirm",
-              "description": "Fired when confirmation button is activated."
+              "name": "before-open",
+              "description": "Fired before the component is opened."
             },
             {
               "name": "cancel",
               "description": "Fired when cancel button is activated."
             },
             {
-              "name": "before-open",
-              "description": "Fired before the component is opened."
+              "name": "close",
+              "description": "Fired after the dialog is closed."
             },
             {
-              "name": "open",
-              "description": "Fired after the dialog is opened."
+              "name": "confirm",
+              "description": "Fired when confirmation button is activated."
             },
             {
-              "name": "close",
-              "description": "Fired after the dialog is closed."
+              "name": "open",
+              "description": "Fired after the dialog is opened."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "sort-descending",
-                "description": "Defines the initial sort order.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "group-descending",
                 "description": "Defines the initial group order.",
@@ -3799,28 +3974,33 @@
                 "name": "open",
                 "description": "Indicates if the dialog is open.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "sort-descending",
+                "description": "Defines the initial sort order.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
               {
-                "name": "confirm",
-                "description": "Fired when confirmation button is activated."
+                "name": "before-open",
+                "description": "Fired before the component is opened."
               },
               {
                 "name": "cancel",
                 "description": "Fired when cancel button is activated."
               },
               {
-                "name": "before-open",
-                "description": "Fired before the component is opened."
+                "name": "close",
+                "description": "Fired after the dialog is closed."
               },
               {
-                "name": "open",
-                "description": "Fired after the dialog is opened."
+                "name": "confirm",
+                "description": "Fired when confirmation button is activated."
               },
               {
-                "name": "close",
-                "description": "Fired after the dialog is closed."
+                "name": "open",
+                "description": "Fired after the dialog is opened."
               }
             ]
           }
@@ -3873,34 +4053,34 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "title-text",
-              "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "branching",
+              "description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "subtitle-text",
-              "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.",
-              "value": { "type": "string | undefined", "default": "undefined" }
+              "name": "disabled",
+              "description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "icon",
               "description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
-            {
-              "name": "disabled",
-              "description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "selected",
               "description": "Defines the step's `selected` state - the step that is currently active.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "branching",
-              "description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "subtitle-text",
+              "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "title-text",
+              "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -3910,38 +4090,46 @@
           "js": {
             "properties": [
               {
-                "name": "title-text",
-                "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.",
-                "value": { "type": "string | undefined" }
+                "name": "branching",
+                "description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.",
+                "value": { "type": "boolean" }
               },
               {
-                "name": "subtitle-text",
-                "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.",
-                "value": { "type": "string | undefined" }
+                "name": "disabled",
+                "description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "icon",
                 "description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
                 "value": { "type": "string | undefined" }
               },
-              {
-                "name": "disabled",
-                "description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "selected",
                 "description": "Defines the step's `selected` state - the step that is currently active.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "branching",
-                "description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.",
-                "value": { "type": "boolean" }
+                "name": "subtitle-text",
+                "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "title-text",
+                "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
           }
+        },
+        {
+          "name": "ui5-wizard-tab",
+          "description": "### Overview\nPrivate component, used internally by the `ui5-wizard`\nto represent a \"step\" in the navigation header of the `ui5-wizard`.\n\n### Usage\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/WizardTab.js\";` (imported with <ui5-wizard>)\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
         }
       ]
     },