diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json
index d1468e43161..e05127b9233 100644
--- a/.storybook/custom-element-manifests/fiori.json
+++ b/.storybook/custom-element-manifests/fiori.json
@@ -1907,6 +1907,26 @@
           "kind": "class",
           "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.",
           "name": "BarcodeScannerDialog",
+          "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.",
+              "_ui5since": "2.4.0",
+              "_ui5type": {
+                "text": "Array<HTMLElement>"
+              },
+              "_ui5privacy": "public"
+            },
+            {
+              "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.",
+              "_ui5since": "2.4.0",
+              "_ui5type": {
+                "text": "Array<HTMLElement>"
+              },
+              "_ui5privacy": "public"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1927,7 +1947,11 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the user closes the component."
+              "description": "Fired when the user closes the component.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.0.0"
             },
             {
               "name": "scan-success",
@@ -1943,6 +1967,9 @@
                 ]
               },
               "description": "Fires when the scan is completed successfuuly.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -1976,6 +2003,9 @@
                 ]
               },
               "description": "Fires when the scan fails with error.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -2149,7 +2179,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the pin header button is toggled."
+              "description": "Fired when the pin header button is toggled.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "title-toggle",
@@ -2157,7 +2190,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the expand/collapse area of the title is toggled."
+              "description": "Fired when the expand/collapse area of the title is toggled.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -2557,6 +2593,9 @@
                 ]
               },
               "description": "Fires when the current breakpoint has been changed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -3017,6 +3056,9 @@
                 ]
               },
               "description": "Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -3496,6 +3538,9 @@
                 ]
               },
               "description": "Fired when selection is changed by user interaction.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -3513,7 +3558,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the thumbnails overflow button is clicked."
+              "description": "Fired when the thumbnails overflow button is clicked.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "display-area-click",
@@ -3521,7 +3569,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "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."
+              "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.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -3733,6 +3784,101 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/NavigationLayout.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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 desktop and tablet devices, the side navigation remains visible and can\nbe expanded or collapsed using the `sideCollapsed` property. On phone devices, the side navigation\nis hidden by default but can be displayed using the same `sideCollapsed` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`",
+          "name": "NavigationLayout",
+          "slots": [
+            {
+              "name": "header",
+              "description": "Defines the header.",
+              "_ui5type": {
+                "text": "Array<HTMLElement>"
+              },
+              "_ui5privacy": "public"
+            },
+            {
+              "name": "sideContent",
+              "description": "Defines the side content.",
+              "_ui5type": {
+                "text": "Array<SideNavigation>",
+                "references": [
+                  {
+                    "name": "SideNavigation",
+                    "package": "@ui5/webcomponents-fiori",
+                    "module": "dist/SideNavigation.js"
+                  }
+                ]
+              },
+              "_ui5privacy": "public"
+            },
+            {
+              "name": "default",
+              "description": "Defines the content.",
+              "_ui5propertyName": "content",
+              "_ui5type": {
+                "text": "Array<HTMLElement>"
+              },
+              "_ui5privacy": "public"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "sideCollapsed",
+              "description": "Indicates whether the side navigation is collapsed.",
+              "default": "false",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Indicates whether the side navigation is collapsed.",
+              "name": "side-collapsed",
+              "default": "false",
+              "fieldName": "sideCollapsed",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "UI5Element",
+            "package": "@ui5/webcomponents-base",
+            "module": "dist/UI5Element.js"
+          },
+          "tagName": "ui5-navigation-layout",
+          "customElement": true,
+          "_ui5since": "2.4.0",
+          "_ui5privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavigationLayout",
+            "module": "dist/NavigationLayout.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ui5-navigation-layout",
+          "declaration": {
+            "name": "NavigationLayout",
+            "module": "dist/NavigationLayout.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/NotificationList.js",
@@ -3786,7 +3932,9 @@
                 ]
               },
               "description": "Fired when an item is clicked.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -3812,6 +3960,9 @@
                 ]
               },
               "description": "Fired when the `Close` button of any item is clicked.",
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -3837,6 +3988,9 @@
                 ]
               },
               "description": "Fired when an item is toggled.",
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -4010,7 +4164,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction."
+              "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "load-more",
@@ -4019,6 +4176,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when additional items are requested.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.2.0"
             }
           ],
@@ -4287,6 +4447,9 @@
                 ]
               },
               "description": "Fired when the `Close` button is pressed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -4728,7 +4891,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key."
+              "description": "Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -5093,7 +5259,9 @@
                 ]
               },
               "description": "Fired, when the notification icon is activated.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -5119,6 +5287,9 @@
                 ]
               },
               "description": "Fired, when the profile slot is present.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -5144,7 +5315,9 @@
                 ]
               },
               "description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -5170,6 +5343,9 @@
                 ]
               },
               "description": "Fired, when the logo is activated.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "0.10",
               "_ui5parameters": [
                 {
@@ -5196,6 +5372,9 @@
                 ]
               },
               "description": "Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.",
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5since": "0.10",
               "_ui5parameters": [
                 {
@@ -5222,7 +5401,9 @@
                 ]
               },
               "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.",
-              "_ui5allowPreventDefault": true
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -5421,7 +5602,9 @@
                 ]
               },
               "description": "Fired, when the item is pressed.",
-              "_ui5allowPreventDefault": true
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -5560,7 +5743,9 @@
                 ]
               },
               "description": "Fired when the selection has changed via user interaction",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -6044,6 +6229,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the component is activated either with a\nclick/tap or by using the [Enter] or [Space] keys.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "SideNavigationSelectableItemBase",
                 "module": "dist/SideNavigationSelectableItemBase.js"
@@ -6267,7 +6455,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the component is activated either with a\nclick/tap or by using the [Enter] or [Space] keys."
+              "description": "Fired when the component is activated either with a\nclick/tap or by using the [Enter] or [Space] keys.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -6592,6 +6783,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the component is activated either with a\nclick/tap or by using the [Enter] or [Space] keys.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "SideNavigationSelectableItemBase",
                 "module": "dist/SideNavigationSelectableItemBase.js"
@@ -6868,7 +7062,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the group item is expanded or collapsed."
+              "description": "Fired when the group item is expanded or collapsed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -7006,7 +7203,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set."
+              "description": "Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -7193,7 +7393,10 @@
               "type": {
                 "text": "Event"
               },
-              "description": "Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`."
+              "description": "Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "item-delete",
@@ -7209,6 +7412,9 @@
                 ]
               },
               "description": "Fired when the delete button of any item is pressed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -7234,6 +7440,9 @@
                 ]
               },
               "description": "Fired when selection is changed by user interaction\nin `Single` and `Multiple` modes.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -7557,7 +7766,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`."
+              "description": "Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "rename",
@@ -7565,7 +7777,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "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`."
+              "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`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "terminate",
@@ -7573,7 +7788,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`."
+              "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "retry",
@@ -7581,7 +7799,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`."
+              "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "detail-click",
@@ -7589,7 +7810,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the user clicks on the detail button when type is `Detail`."
+              "description": "Fired when the user clicks on the detail button when type is `Detail`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -7811,6 +8035,9 @@
                 ]
               },
               "description": "Fired when confirmation button is activated.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -7868,6 +8095,9 @@
                 ]
               },
               "description": "Fired when cancel button is activated.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -7917,7 +8147,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired before the component is opened. **This event does not bubble.**"
+              "description": "Fired before the component is opened.",
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true
             },
             {
               "name": "open",
@@ -7926,6 +8159,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after the dialog is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             },
             {
@@ -7935,6 +8171,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after the dialog is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             }
           ],
@@ -8059,6 +8298,9 @@
                 ]
               },
               "description": "Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json
index ecad50072b2..ba936ed7683 100644
--- a/.storybook/custom-element-manifests/main.json
+++ b/.storybook/custom-element-manifests/main.json
@@ -3221,7 +3221,7 @@
       "declarations": [
         {
           "kind": "enum",
-          "name": "EmptyIndicatorMode",
+          "name": "TextEmptyIndicatorMode",
           "description": "Empty Indicator Mode.",
           "_ui5privacy": "public",
           "members": [
@@ -3251,7 +3251,7 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "EmptyIndicatorMode",
+            "name": "TextEmptyIndicatorMode",
             "module": "dist/types/TextEmptyIndicatorMode.js"
           }
         }
@@ -4056,6 +4056,9 @@
                 ]
               },
               "description": "Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.11",
               "_ui5parameters": [
                 {
@@ -4083,6 +4086,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.13"
             }
           ],
@@ -4332,7 +4338,9 @@
                 ]
               },
               "description": "Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -4885,7 +4893,10 @@
               "type": {
                 "text": "Event"
               },
-              "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+              "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -5281,7 +5292,9 @@
                 ]
               },
               "description": "Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -6279,7 +6292,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n\n**Note:** The event would be fired only if the `interactive` property is set to true."
+              "description": "Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n\n**Note:** The event would be fired only if the `interactive` property is set to true.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -6579,6 +6595,9 @@
                 ]
               },
               "description": "Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.7",
               "_ui5parameters": [
                 {
@@ -6905,7 +6924,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the component checked state changes.",
-              "_ui5allowPreventDefault": true
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -7094,6 +7115,9 @@
                 ]
               },
               "description": "Fired when the user selects a color.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.15",
               "_ui5parameters": [
                 {
@@ -7331,6 +7355,9 @@
                 ]
               },
               "description": "Fired when the user selects a color.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -7349,6 +7376,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the `ui5-color-palette-popover` is closed due to user interaction.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.21.0"
             }
           ],
@@ -7476,7 +7506,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the the selected color is changed"
+              "description": "Fired when the the selected color is changed",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -7746,7 +7779,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the input operation has finished by pressing Enter, focusout or an item is selected."
+              "description": "Fired when the input operation has finished by pressing Enter, focusout or an item is selected.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "input",
@@ -7754,7 +7790,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed."
+              "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "selection-change",
@@ -7770,6 +7809,9 @@
                 ]
               },
               "description": "Fired when selection is changed by user interaction",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -8629,7 +8671,9 @@
                 ]
               },
               "description": "Fired when the input operation has finished by pressing Enter or on focusout.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -8663,7 +8707,9 @@
                 ]
               },
               "description": "Fired when the value of the component is changed at each key stroke.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -8697,7 +8743,9 @@
                 ]
               },
               "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -8716,6 +8764,30 @@
                   "description": "Indicator if the value is in correct format pattern and in valid range."
                 }
               ]
+            },
+            {
+              "name": "open",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after the value-help dialog of the component is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.4.0"
+            },
+            {
+              "name": "close",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after the value-help dialog of the component is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.4.0"
             }
           ],
           "attributes": [
@@ -9652,7 +9724,9 @@
                 ]
               },
               "description": "Fired when the input operation has finished by pressing Enter or on focusout.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -9690,7 +9764,9 @@
                 ]
               },
               "description": "Fired when the value of the component is changed at each key stroke.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -9728,7 +9804,9 @@
                 ]
               },
               "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -9751,6 +9829,38 @@
                 "name": "DatePicker",
                 "module": "dist/DatePicker.js"
               }
+            },
+            {
+              "name": "open",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after the value-help dialog of the component is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.4.0",
+              "inheritedFrom": {
+                "name": "DatePicker",
+                "module": "dist/DatePicker.js"
+              }
+            },
+            {
+              "name": "close",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after the value-help dialog of the component is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.4.0",
+              "inheritedFrom": {
+                "name": "DatePicker",
+                "module": "dist/DatePicker.js"
+              }
             }
           ],
           "slots": [
@@ -10423,7 +10533,9 @@
                 ]
               },
               "description": "Fired when the input operation has finished by pressing Enter or on focusout.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -10461,7 +10573,9 @@
                 ]
               },
               "description": "Fired when the value of the component is changed at each key stroke.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -10499,7 +10613,9 @@
                 ]
               },
               "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -10522,6 +10638,38 @@
                 "name": "DatePicker",
                 "module": "dist/DatePicker.js"
               }
+            },
+            {
+              "name": "open",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after the value-help dialog of the component is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.4.0",
+              "inheritedFrom": {
+                "name": "DatePicker",
+                "module": "dist/DatePicker.js"
+              }
+            },
+            {
+              "name": "close",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after the value-help dialog of the component is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.4.0",
+              "inheritedFrom": {
+                "name": "DatePicker",
+                "module": "dist/DatePicker.js"
+              }
             }
           ],
           "slots": [
@@ -10962,8 +11110,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**",
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -10975,7 +11125,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component is opened. **This event does not bubble.**",
+              "description": "Fired after the component is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -10994,8 +11147,10 @@
                   }
                 ]
               },
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**",
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -11017,7 +11172,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component is closed. **This event does not bubble.**",
+              "description": "Fired after the component is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -11216,6 +11374,9 @@
                 ]
               },
               "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -11241,6 +11402,9 @@
                 ]
               },
               "description": "Event is fired when the size of a file is above the `maxFileSize` property value.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.2.0",
               "_ui5parameters": [
                 {
@@ -11403,7 +11567,7 @@
         },
         {
           "kind": "class",
-          "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 2)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";",
+          "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";",
           "name": "Form",
           "cssParts": [
             {
@@ -11452,8 +11616,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "\"S1 M1 L2 XL2\"",
-              "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 2 columns by default (up to 6 columns  are recommended)",
+              "default": "\"S1 M1 L2 XL3\"",
+              "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
               "privacy": "public"
             },
             {
@@ -11496,9 +11660,9 @@
           ],
           "attributes": [
             {
-              "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 2 columns by default (up to 6 columns  are recommended)",
+              "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
               "name": "layout",
-              "default": "\"S1 M1 L2 XL2\"",
+              "default": "\"S1 M1 L2 XL3\"",
               "fieldName": "layout",
               "type": {
                 "text": "string"
@@ -12209,7 +12373,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the input operation has finished by pressing Enter or on focusout."
+              "description": "Fired when the input operation has finished by pressing Enter or on focusout.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "input",
@@ -12218,7 +12385,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.",
-              "_ui5allowPreventDefault": true
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true
             },
             {
               "name": "select",
@@ -12227,6 +12396,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when some text has been selected.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             },
             {
@@ -12243,6 +12415,9 @@
                 ]
               },
               "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0",
               "_ui5parameters": [
                 {
@@ -12262,6 +12437,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the suggestions picker is open.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             },
             {
@@ -12271,6 +12449,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the suggestions picker is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             }
           ],
@@ -12774,7 +12955,9 @@
                 ]
               },
               "description": "Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -13187,7 +13370,9 @@
                 ]
               },
               "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -13213,6 +13398,9 @@
                 ]
               },
               "description": "Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.8",
               "_ui5parameters": [
                 {
@@ -13239,6 +13427,9 @@
                 ]
               },
               "description": "Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.8",
               "_ui5parameters": [
                 {
@@ -13265,6 +13456,9 @@
                 ]
               },
               "description": "Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -13290,7 +13484,9 @@
                 ]
               },
               "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -13331,6 +13527,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.6"
             },
             {
@@ -13347,7 +13546,9 @@
                 ]
               },
               "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0",
               "_ui5parameters": [
                 {
@@ -13382,7 +13583,9 @@
                 ]
               },
               "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.",
-              "_ui5allowPreventDefault": true,
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -13680,7 +13883,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the user clicks on the detail button when type is `Detail`."
+              "description": "Fired when the user clicks on the detail button when type is `Detail`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -14097,6 +14303,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the user clicks on the detail button when type is `Detail`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "dist/ListItem.js"
@@ -14208,7 +14417,9 @@
                 ]
               },
               "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5since": "2.1.0",
               "_ui5parameters": [
                 {
@@ -14243,7 +14454,9 @@
                 ]
               },
               "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.",
-              "_ui5allowPreventDefault": true,
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.1.0",
               "_ui5parameters": [
                 {
@@ -14767,6 +14980,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the user clicks on the detail button when type is `Detail`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "dist/ListItem.js"
@@ -14897,7 +15113,9 @@
                 ]
               },
               "description": "Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.",
-              "_ui5allowPreventDefault": true,
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -14931,7 +15149,9 @@
                 ]
               },
               "description": "Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. **This event does not bubble.**\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.",
-              "_ui5allowPreventDefault": true,
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.10.0",
               "_ui5parameters": [
                 {
@@ -14952,6 +15172,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after the menu is opened. **This event does not bubble.**",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.10.0"
             },
             {
@@ -14968,7 +15191,9 @@
                 ]
               },
               "description": "Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.**",
-              "_ui5allowPreventDefault": true,
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.10.0",
               "_ui5parameters": [
                 {
@@ -14988,6 +15213,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after the menu is closed. **This event does not bubble.**",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.10.0"
             }
           ],
@@ -15471,6 +15699,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the user clicks on the detail button when type is `Detail`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "dist/ListItem.js"
@@ -15636,7 +15867,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the close button is pressed either with a\nclick/tap or by using the Enter or Space key."
+              "description": "Fired when the close button is pressed either with a\nclick/tap or by using the Enter or Space key.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -15967,7 +16201,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the input operation has finished by pressing Enter or on focusout."
+              "description": "Fired when the input operation has finished by pressing Enter or on focusout.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "input",
@@ -15975,7 +16212,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the value of the component changes at each keystroke or clear icon is pressed."
+              "description": "Fired when the value of the component changes at each keystroke or clear icon is pressed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "open",
@@ -15984,6 +16224,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the dropdown is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             },
             {
@@ -15993,6 +16236,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the dropdown is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             },
             {
@@ -16009,7 +16255,9 @@
                 ]
               },
               "description": "Fired when selection is changed by user interaction.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -16723,7 +16971,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used."
+              "description": "Fired when the value help icon is pressed\nand F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "token-delete",
@@ -16739,6 +16990,9 @@
                 ]
               },
               "description": "Fired when tokens are being deleted.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -16757,6 +17011,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the input operation has finished by pressing Enter or on focusout.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Input",
                 "module": "dist/Input.js"
@@ -16769,7 +17026,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Input",
                 "module": "dist/Input.js"
@@ -16782,6 +17041,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when some text has been selected.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0",
               "inheritedFrom": {
                 "name": "Input",
@@ -16802,6 +17064,9 @@
                 ]
               },
               "description": "Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0",
               "_ui5parameters": [
                 {
@@ -16825,6 +17090,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the suggestions picker is open.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0",
               "inheritedFrom": {
                 "name": "Input",
@@ -16838,6 +17106,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the suggestions picker is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0",
               "inheritedFrom": {
                 "name": "Input",
@@ -17559,7 +17830,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the component is expanded/collapsed by user interaction."
+              "description": "Fired when the component is expanded/collapsed by user interaction.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -18127,8 +18401,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**",
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -18140,7 +18416,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component is opened. **This event does not bubble.**",
+              "description": "Fired after the component is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -18159,8 +18438,10 @@
                   }
                 ]
               },
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**",
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -18182,7 +18463,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component is closed. **This event does not bubble.**",
+              "description": "Fired after the component is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -18333,8 +18617,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**",
-              "_ui5allowPreventDefault": true
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.",
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true
             },
             {
               "name": "open",
@@ -18342,7 +18628,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component is opened. **This event does not bubble.**"
+              "description": "Fired after the component is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "before-close",
@@ -18357,8 +18646,10 @@
                   }
                 ]
               },
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**",
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -18376,7 +18667,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component is closed. **This event does not bubble.**"
+              "description": "Fired after the component is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -18777,6 +19071,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the component checked state changes.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.15"
             }
           ],
@@ -19071,6 +19368,20 @@
                 "module": "dist/SliderBase.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "editableTooltip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "SliderBase",
+                "module": "dist/SliderBase.js"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -19211,6 +19522,19 @@
                 "module": "dist/SliderBase.js"
               }
             },
+            {
+              "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+              "name": "editable-tooltip",
+              "default": "false",
+              "fieldName": "editableTooltip",
+              "type": {
+                "text": "boolean"
+              },
+              "inheritedFrom": {
+                "name": "SliderBase",
+                "module": "dist/SliderBase.js"
+              }
+            },
             {
               "description": "Defines whether the slider is in disabled state.",
               "name": "disabled",
@@ -19255,6 +19579,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the value changes and the user has finished interacting with the slider.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "SliderBase",
                 "module": "dist/SliderBase.js"
@@ -19267,6 +19594,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "SliderBase",
                 "module": "dist/SliderBase.js"
@@ -19396,7 +19726,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "The event is fired when the value changes."
+              "description": "The event is fired when the value changes.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -20002,8 +20335,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**",
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -20015,7 +20350,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component is opened. **This event does not bubble.**",
+              "description": "Fired after the component is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -20034,8 +20372,10 @@
                   }
                 ]
               },
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**",
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -20057,7 +20397,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component is closed. **This event does not bubble.**",
+              "description": "Fired after the component is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Popup",
                 "module": "dist/Popup.js"
@@ -20209,6 +20552,9 @@
                 ]
               },
               "description": "Fired when the selected item changes.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -20473,6 +20819,12 @@
       "kind": "javascript-module",
       "path": "dist/Select.js",
       "declarations": [
+        {
+          "kind": "interface",
+          "name": "IOption",
+          "description": "Interface for components that may be slotted inside `ui5-select` as options",
+          "_ui5privacy": "public"
+        },
         {
           "kind": "class",
           "description": "### Overview\n\nThe `ui5-select` component is used to create a drop-down list.\n\n### Usage\n\nThere are two main usages of the `ui5-select>`.\n\n1. With Option (`ui5-option`) web component:\n\nThe available options of the Select are defined by using the Option component.\nThe Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.\n\n2. With OptionCustom (`ui5-option-custom`) web component.\n\nOptions with custom content are defined by using the OptionCustom component\nThe OptionCustom component comes with no predefined layout and it expects consumers to define it.\n\n### Keyboard Handling\nThe `ui5-select` provides advanced keyboard handling.\n\n- [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.\n- [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.\n- [Space], [Enter] - If the drop-down is opened - selects the focused option.\n- [Escape] - Closes the drop-down without changing the selection.\n- [Home] - Navigates to first option\n- [End] - Navigates to the last option\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Select\";`\n\n`import \"@ui5/webcomponents/dist/Option\";`\n`import \"@ui5/webcomponents/dist/OptionCustom\";`",
@@ -20648,7 +21000,9 @@
                 ]
               },
               "description": "Fired when the selected option changes.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -20681,6 +21035,9 @@
                 ]
               },
               "description": "Fired when the user navigates through the options, but the selection is not finalized,\nor when pressing the ESC key to revert the current selection.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.17.0",
               "_ui5parameters": [
                 {
@@ -20706,7 +21063,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component's dropdown menu opens."
+              "description": "Fired after the component's dropdown menu opens.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "close",
@@ -20714,7 +21074,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component's dropdown menu closes."
+              "description": "Fired after the component's dropdown menu closes.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -20964,6 +21327,20 @@
                 "module": "dist/SliderBase.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "editableTooltip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "SliderBase",
+                "module": "dist/SliderBase.js"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -21095,6 +21472,19 @@
                 "module": "dist/SliderBase.js"
               }
             },
+            {
+              "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+              "name": "editable-tooltip",
+              "default": "false",
+              "fieldName": "editableTooltip",
+              "type": {
+                "text": "boolean"
+              },
+              "inheritedFrom": {
+                "name": "SliderBase",
+                "module": "dist/SliderBase.js"
+              }
+            },
             {
               "description": "Defines whether the slider is in disabled state.",
               "name": "disabled",
@@ -21139,6 +21529,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the value changes and the user has finished interacting with the slider.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "SliderBase",
                 "module": "dist/SliderBase.js"
@@ -21151,6 +21544,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "SliderBase",
                 "module": "dist/SliderBase.js"
@@ -21258,6 +21654,16 @@
               "description": "Enables handle tooltip displaying the current value.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "editableTooltip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -21287,7 +21693,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the value changes and the user has finished interacting with the slider."
+              "description": "Fired when the value changes and the user has finished interacting with the slider.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "input",
@@ -21295,7 +21704,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging."
+              "description": "Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -21362,6 +21774,15 @@
                 "text": "boolean"
               }
             },
+            {
+              "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+              "name": "editable-tooltip",
+              "default": "false",
+              "fieldName": "editableTooltip",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "description": "Defines whether the slider is in disabled state.",
               "name": "disabled",
@@ -21575,7 +21996,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the user clicks on the default action."
+              "description": "Fired when the user clicks on the default action.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "arrow-click",
@@ -21583,7 +22007,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the user clicks on the arrow action."
+              "description": "Fired when the user clicks on the arrow action.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -21829,7 +22256,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the input operation has finished by pressing Enter or on focusout."
+              "description": "Fired when the input operation has finished by pressing Enter or on focusout.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "value-state-change",
@@ -21845,7 +22275,9 @@
                 ]
               },
               "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5since": "1.23.0",
               "_ui5parameters": [
                 {
@@ -22306,7 +22738,9 @@
                 ]
               },
               "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5since": "2.1.0",
               "_ui5parameters": [
                 {
@@ -22345,7 +22779,9 @@
                 ]
               },
               "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.",
-              "_ui5allowPreventDefault": true,
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.1.0",
               "_ui5parameters": [
                 {
@@ -22563,7 +22999,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the component checked state changes.",
-              "_ui5allowPreventDefault": true
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -23086,7 +23524,9 @@
                 ]
               },
               "description": "Fired when a tab is selected.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0",
               "_ui5parameters": [
                 {
@@ -23128,7 +23568,9 @@
                 ]
               },
               "description": "Fired when element is being moved over the tab container.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0",
               "_ui5parameters": [
                 {
@@ -23163,7 +23605,9 @@
                 ]
               },
               "description": "Fired when element is moved to the tab container.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.",
-              "_ui5allowPreventDefault": true,
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -23489,6 +23933,9 @@
                 ]
               },
               "description": "Fired when an interactive row is clicked.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -23615,7 +24062,7 @@
           "_ui5privacy": "public",
           "attributes": [
             {
-              "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+              "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
               "name": "horizontal-align",
               "default": "undefined",
               "fieldName": "horizontalAlign",
@@ -23642,7 +24089,7 @@
                   }
                 ]
               },
-              "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+              "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
               "default": "undefined",
               "privacy": "public",
               "inheritedFrom": {
@@ -23716,14 +24163,14 @@
                   }
                 ]
               },
-              "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+              "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
               "default": "undefined",
               "privacy": "public"
             }
           ],
           "attributes": [
             {
-              "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+              "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
               "name": "horizontal-align",
               "default": "undefined",
               "fieldName": "horizontalAlign",
@@ -23823,7 +24270,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the growing button is pressed or the user scrolls to the end of the table."
+              "description": "Fired when the growing button is pressed or the user scrolls to the end of the table.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -23948,7 +24398,7 @@
                   }
                 ]
               },
-              "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+              "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
               "default": "undefined",
               "privacy": "public",
               "inheritedFrom": {
@@ -23995,7 +24445,7 @@
               }
             },
             {
-              "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+              "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
               "name": "horizontal-align",
               "default": "undefined",
               "fieldName": "horizontalAlign",
@@ -24338,7 +24788,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when selection is changed by user interaction."
+              "description": "Fired when selection is changed by user interaction.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -24528,6 +24981,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.22.0"
             }
           ],
@@ -24651,10 +25107,10 @@
               "kind": "field",
               "name": "emptyIndicatorMode",
               "type": {
-                "text": "EmptyIndicatorMode",
+                "text": "TextEmptyIndicatorMode",
                 "references": [
                   {
-                    "name": "EmptyIndicatorMode",
+                    "name": "TextEmptyIndicatorMode",
                     "package": "@ui5/webcomponents",
                     "module": "dist/types/TextEmptyIndicatorMode.js"
                   }
@@ -24903,7 +25359,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the text has changed and the focus leaves the component."
+              "description": "Fired when the text has changed and the focus leaves the component.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "input",
@@ -24912,6 +25371,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the value of the component changes at each keystroke or when\nsomething is pasted.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.5"
             },
             {
@@ -24921,6 +25383,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when some text has been selected.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.23.0"
             },
             {
@@ -24930,6 +25395,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when textarea is scrolled.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.23.0"
             }
           ],
@@ -25304,6 +25772,9 @@
                 ]
               },
               "description": "Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -25337,6 +25808,9 @@
                 ]
               },
               "description": "Fired when the value of the `ui5-time-picker` is changed at each key stroke.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -25363,6 +25837,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after the value-help dialog of the component is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             },
             {
@@ -25372,6 +25849,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after the value-help dialog of the component is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             }
           ],
@@ -25770,6 +26250,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after the component is auto closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "2.0.0"
             }
           ],
@@ -26212,6 +26695,9 @@
                 "text": "Event"
               },
               "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "Button",
                 "module": "dist/Button.js"
@@ -26441,6 +26927,9 @@
                 ]
               },
               "description": "Fired when tokens are being deleted (delete icon, delete or backspace is pressed)",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -26465,7 +26954,10 @@
                   }
                 ]
               },
-              "description": "Fired when token selection is changed by user interaction"
+              "description": "Fired when token selection is changed by user interaction",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -26865,7 +27357,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+              "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -27237,7 +27732,9 @@
                 ]
               },
               "description": "Fired when the selected option changes.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -27255,7 +27752,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component's dropdown menu opens."
+              "description": "Fired after the component's dropdown menu opens.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             },
             {
               "name": "close",
@@ -27263,7 +27763,10 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired after the component's dropdown menu closes."
+              "description": "Fired after the component's dropdown menu closes.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true
             }
           ],
           "attributes": [
@@ -27818,7 +28321,9 @@
                 ]
               },
               "description": "Fired when a tree item is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event object to suppress the event, if needed.\nThis may be handy for example if you want to dynamically load tree items upon the user expanding a node.\nEven if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -27844,6 +28349,9 @@
                 ]
               },
               "description": "Fired when the mouse cursor enters the tree item borders.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.16",
               "_ui5parameters": [
                 {
@@ -27870,6 +28378,9 @@
                 ]
               },
               "description": "Fired when the mouse cursor leaves the tree item borders.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5since": "1.0.0-rc.16",
               "_ui5parameters": [
                 {
@@ -27896,7 +28407,9 @@
                 ]
               },
               "description": "Fired when a tree item is activated.",
+              "_ui5Cancelable": true,
               "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -27922,6 +28435,9 @@
                 ]
               },
               "description": "Fired when the Delete button of any tree item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -27947,6 +28463,9 @@
                 ]
               },
               "description": "Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "_ui5parameters": [
                 {
                   "type": {
@@ -28545,6 +29064,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the user clicks on the detail button when type is `Detail`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "dist/ListItem.js"
@@ -29010,6 +29532,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the user clicks on the detail button when type is `Detail`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "dist/ListItem.js"
@@ -29535,6 +30060,9 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the user clicks on the detail button when type is `Detail`.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "dist/ListItem.js"
diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
index 339f079f51f..29cd7947148 100644
--- a/.storybook/tsconfig.json
+++ b/.storybook/tsconfig.json
@@ -3,5 +3,5 @@
   "compilerOptions": {
     "allowJs": true
   },
-  "include": ["./**/*.js", "./**/*.tsx"]
+  "include": ["./**/*.js", "./**/*.tsx", "./**/*.ts"]
 }
diff --git a/.storybook/utils.ts b/.storybook/utils.ts
index e84dc4a816b..c5a6a49bc1a 100644
--- a/.storybook/utils.ts
+++ b/.storybook/utils.ts
@@ -60,7 +60,8 @@ const replaceSubComps = {
   ToolbarItem: ['ToolbarSeparator', 'ToolbarSpacer', 'ToolbarButton', 'ToolbarSelect', 'ToolbarSelectOption'],
   TreeItemBase: ['TreeItem', 'TreeItemCustom'],
   AvatarGroupItem: ['Avatar'],
-  TableFeature: ['TableGrowing', 'TableSelection']
+  TableFeature: ['TableGrowing', 'TableSelection'],
+  SideNavigationItemBase: ['SideNavigationItem', 'SideNavigationGroup', 'SideNavigationSubItem']
 };
 
 function findSubComponentsRecursively(moduleName: string, cem: any): string[] {
diff --git a/package.json b/package.json
index 335bc07c588..e2743845d38 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,9 @@
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "wrappers:main": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
     "wrappers:fiori": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
-    "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react/dist/internal/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components && eslint --ext .ts,.tsx --fix ./packages/compat/src/components/*/index.tsx",
-    "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && yarn run wrappers:compat && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --ext .ts,.tsx --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
+    "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react/dist/internal/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components",
+    "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
+    "create-webcomponents-wrapper-compat": "(cd packages/cli && tsc) && yarn run wrappers:compat && yarn run sb:prepare-cem && eslint --fix ./packages/compat/src/components/*/index.tsx",
     "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
     "postinstall": "husky && yarn setup",
     "create-cypress-commands-docs": "typedoc && rimraf temp/typedoc",
@@ -39,10 +40,10 @@
     "@storybook/react": "8.3.6",
     "@storybook/react-vite": "8.3.6",
     "@storybook/theming": "8.3.6",
-    "@ui5/webcomponents": "2.3.0",
-    "@ui5/webcomponents-compat": "2.3.0",
-    "@ui5/webcomponents-fiori": "2.3.0",
-    "@ui5/webcomponents-icons": "2.3.0",
+    "@ui5/webcomponents": "2.4.0",
+    "@ui5/webcomponents-compat": "2.4.0",
+    "@ui5/webcomponents-fiori": "2.4.0",
+    "@ui5/webcomponents-icons": "2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
@@ -64,7 +65,7 @@
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@types/use-sync-external-store": "^0.0.6",
-    "@ui5/webcomponents-tools": "2.3.0",
+    "@ui5/webcomponents-tools": "2.4.0",
     "@vitejs/plugin-react": "^4.2.0",
     "chromatic": "^11.0.0",
     "cssnano": "^7.0.0",
diff --git a/packages/base/package.json b/packages/base/package.json
index d480e00bebd..9d25957a630 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~2.3.0",
+    "@ui5/webcomponents-base": "~2.4.0",
     "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {
diff --git a/packages/charts/package.json b/packages/charts/package.json
index 0976a1806c8..deebb4da2b6 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -39,8 +39,8 @@
     "recharts": "2.13.3"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~2.3.0",
-    "@ui5/webcomponents-react-base": "~2.3.0",
+    "@ui5/webcomponents-react": "~2.4.0",
+    "@ui5/webcomponents-react-base": "~2.4.0",
     "react": "^18"
   },
   "publishConfig": {
diff --git a/packages/cli/src/util/recursiveManifestResolver.ts b/packages/cli/src/util/recursiveManifestResolver.ts
index 1c0570d8e52..b7710d491fe 100644
--- a/packages/cli/src/util/recursiveManifestResolver.ts
+++ b/packages/cli/src/util/recursiveManifestResolver.ts
@@ -24,7 +24,8 @@ const EXCLUDED_MEMBERS = new Set([
   'onEnterDOM',
   'onExitDOM',
   'onInvalidation',
-  'getStaticAreaItemDomRef'
+  'getStaticAreaItemDomRef',
+  'fireDecoratorEvent'
 ]);
 
 function mergeArraysWithoutDuplicates(currentValues: any[], newValue: any) {
diff --git a/packages/compat/package.json b/packages/compat/package.json
index 910029bdb63..78146dd14da 100644
--- a/packages/compat/package.json
+++ b/packages/compat/package.json
@@ -41,8 +41,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents-compat": "~2.3.0",
-    "@ui5/webcomponents-react": "~2.3.0",
+    "@ui5/webcomponents-compat": "~2.4.0",
+    "@ui5/webcomponents-react": "~2.4.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
diff --git a/packages/main/package.json b/packages/main/package.json
index d6d36018515..980d4afd01d 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -58,10 +58,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~2.3.0",
-    "@ui5/webcomponents-base": "~2.3.0",
-    "@ui5/webcomponents-fiori": "~2.3.0",
-    "@ui5/webcomponents-icons": "~2.3.0",
+    "@ui5/webcomponents": "~2.4.0",
+    "@ui5/webcomponents-base": "~2.4.0",
+    "@ui5/webcomponents-fiori": "~2.4.0",
+    "@ui5/webcomponents-icons": "~2.4.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
diff --git a/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx b/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx
index 1eaec90547a..57823af170b 100644
--- a/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx
+++ b/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx
@@ -6,7 +6,7 @@ import type {
   BarcodeScannerDialogScanSuccessEventDetail
 } from '@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
-import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js';
+import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js';
 
 interface BarcodeScannerDialogAttributes {
   /**
@@ -22,9 +22,49 @@ interface BarcodeScannerDialogDomRef extends Required<BarcodeScannerDialogAttrib
 
 interface BarcodeScannerDialogPropTypes
   extends BarcodeScannerDialogAttributes,
-    Omit<CommonProps, keyof BarcodeScannerDialogAttributes | 'onClose' | 'onScanError' | 'onScanSuccess'> {
+    Omit<
+      CommonProps,
+      keyof BarcodeScannerDialogAttributes | 'footer' | 'header' | 'onClose' | 'onScanError' | 'onScanSuccess'
+    > {
+  /**
+   * Defines the footer HTML Element.
+   *
+   * **Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.
+   * This means you need to include your own mechanism within the custom `footer` to close the dialog,
+   * such as a button with an event listener that closes the dialog.
+   *
+   * **Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,
+   * allowing users to close the dialog without any additional implementation.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="footer"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents-fiori**.
+   */
+  footer?: UI5WCSlotsNode;
+
+  /**
+   * Defines the header HTML Element.
+   *
+   * **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.
+   * `accessibleName` should be used.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="header"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents-fiori**.
+   */
+  header?: UI5WCSlotsNode;
   /**
    * Fired when the user closes the component.
+   *
+   * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**.
    */
   onClose?: (event: Ui5CustomEvent<BarcodeScannerDialogDomRef>) => void;
 
@@ -58,7 +98,7 @@ const BarcodeScannerDialog = withWebComponent<BarcodeScannerDialogPropTypes, Bar
   'ui5-barcode-scanner-dialog',
   [],
   ['open'],
-  [],
+  ['footer', 'header'],
   ['close', 'scan-error', 'scan-success']
 );
 
diff --git a/packages/main/src/webComponents/DatePicker/index.tsx b/packages/main/src/webComponents/DatePicker/index.tsx
index 967025df2ee..d720ce56298 100644
--- a/packages/main/src/webComponents/DatePicker/index.tsx
+++ b/packages/main/src/webComponents/DatePicker/index.tsx
@@ -166,7 +166,13 @@ interface DatePickerPropTypes
   extends DatePickerAttributes,
     Omit<
       CommonProps,
-      keyof DatePickerAttributes | 'valueStateMessage' | 'onChange' | 'onInput' | 'onValueStateChange'
+      | keyof DatePickerAttributes
+      | 'valueStateMessage'
+      | 'onChange'
+      | 'onClose'
+      | 'onInput'
+      | 'onOpen'
+      | 'onValueStateChange'
     > {
   /**
    * Defines the value state message that will be displayed as pop up under the component.
@@ -190,6 +196,13 @@ interface DatePickerPropTypes
    */
   onChange?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerChangeEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is closed.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onClose?: (event: Ui5CustomEvent<DatePickerDomRef>) => void;
+
   /**
    * Fired when the value of the component is changed at each key stroke.
    *
@@ -197,6 +210,13 @@ interface DatePickerPropTypes
    */
   onInput?: (event: Ui5CustomEvent<DatePickerDomRef, DatePickerInputEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is opened.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onOpen?: (event: Ui5CustomEvent<DatePickerDomRef>) => void;
+
   /**
    * Fired before the value state of the component is updated internally.
    * The event is preventable, meaning that if it's default action is
@@ -298,7 +318,7 @@ const DatePicker = withWebComponent<DatePickerPropTypes, DatePickerDomRef>(
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change']
+  ['change', 'close', 'input', 'open', 'value-state-change']
 );
 
 DatePicker.displayName = 'DatePicker';
diff --git a/packages/main/src/webComponents/DateRangePicker/index.tsx b/packages/main/src/webComponents/DateRangePicker/index.tsx
index 096217df963..09718f37082 100644
--- a/packages/main/src/webComponents/DateRangePicker/index.tsx
+++ b/packages/main/src/webComponents/DateRangePicker/index.tsx
@@ -188,7 +188,13 @@ interface DateRangePickerPropTypes
   extends DateRangePickerAttributes,
     Omit<
       CommonProps,
-      keyof DateRangePickerAttributes | 'valueStateMessage' | 'onChange' | 'onInput' | 'onValueStateChange'
+      | keyof DateRangePickerAttributes
+      | 'valueStateMessage'
+      | 'onChange'
+      | 'onClose'
+      | 'onInput'
+      | 'onOpen'
+      | 'onValueStateChange'
     > {
   /**
    * Defines the value state message that will be displayed as pop up under the component.
@@ -212,6 +218,13 @@ interface DateRangePickerPropTypes
    */
   onChange?: (event: Ui5CustomEvent<DateRangePickerDomRef, DatePickerChangeEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is closed.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onClose?: (event: Ui5CustomEvent<DateRangePickerDomRef>) => void;
+
   /**
    * Fired when the value of the component is changed at each key stroke.
    *
@@ -219,6 +232,13 @@ interface DateRangePickerPropTypes
    */
   onInput?: (event: Ui5CustomEvent<DateRangePickerDomRef, DatePickerInputEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is opened.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onOpen?: (event: Ui5CustomEvent<DateRangePickerDomRef>) => void;
+
   /**
    * Fired before the value state of the component is updated internally.
    * The event is preventable, meaning that if it's default action is
@@ -273,7 +293,7 @@ const DateRangePicker = withWebComponent<DateRangePickerPropTypes, DateRangePick
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change']
+  ['change', 'close', 'input', 'open', 'value-state-change']
 );
 
 DateRangePicker.displayName = 'DateRangePicker';
diff --git a/packages/main/src/webComponents/DateTimePicker/index.tsx b/packages/main/src/webComponents/DateTimePicker/index.tsx
index f131f169586..f527f110e4d 100644
--- a/packages/main/src/webComponents/DateTimePicker/index.tsx
+++ b/packages/main/src/webComponents/DateTimePicker/index.tsx
@@ -166,7 +166,13 @@ interface DateTimePickerPropTypes
   extends DateTimePickerAttributes,
     Omit<
       CommonProps,
-      keyof DateTimePickerAttributes | 'valueStateMessage' | 'onChange' | 'onInput' | 'onValueStateChange'
+      | keyof DateTimePickerAttributes
+      | 'valueStateMessage'
+      | 'onChange'
+      | 'onClose'
+      | 'onInput'
+      | 'onOpen'
+      | 'onValueStateChange'
     > {
   /**
    * Defines the value state message that will be displayed as pop up under the component.
@@ -190,6 +196,13 @@ interface DateTimePickerPropTypes
    */
   onChange?: (event: Ui5CustomEvent<DateTimePickerDomRef, DatePickerChangeEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is closed.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onClose?: (event: Ui5CustomEvent<DateTimePickerDomRef>) => void;
+
   /**
    * Fired when the value of the component is changed at each key stroke.
    *
@@ -197,6 +210,13 @@ interface DateTimePickerPropTypes
    */
   onInput?: (event: Ui5CustomEvent<DateTimePickerDomRef, DatePickerInputEventDetail>) => void;
 
+  /**
+   * Fired after the value-help dialog of the component is opened.
+   *
+   * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**.
+   */
+  onOpen?: (event: Ui5CustomEvent<DateTimePickerDomRef>) => void;
+
   /**
    * Fired before the value state of the component is updated internally.
    * The event is preventable, meaning that if it's default action is
@@ -280,7 +300,7 @@ const DateTimePicker = withWebComponent<DateTimePickerPropTypes, DateTimePickerD
   ],
   ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'],
   ['valueStateMessage'],
-  ['change', 'input', 'value-state-change']
+  ['change', 'close', 'input', 'open', 'value-state-change']
 );
 
 DateTimePicker.displayName = 'DateTimePicker';
diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx
index f602fadf1d8..3e9a808a492 100644
--- a/packages/main/src/webComponents/Dialog/index.tsx
+++ b/packages/main/src/webComponents/Dialog/index.tsx
@@ -171,26 +171,26 @@ interface DialogPropTypes
    */
   header?: UI5WCSlotsNode;
   /**
-   * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**
+   * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeClose?: (event: Ui5CustomEvent<DialogDomRef, PopupBeforeCloseEventDetail>) => void;
 
   /**
-   * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**
+   * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeOpen?: (event: Ui5CustomEvent<DialogDomRef>) => void;
 
   /**
-   * Fired after the component is closed. **This event does not bubble.**
+   * Fired after the component is closed.
    */
   onClose?: (event: Ui5CustomEvent<DialogDomRef>) => void;
 
   /**
-   * Fired after the component is opened. **This event does not bubble.**
+   * Fired after the component is opened.
    */
   onOpen?: (event: Ui5CustomEvent<DialogDomRef>) => void;
 }
diff --git a/packages/main/src/webComponents/Form/index.tsx b/packages/main/src/webComponents/Form/index.tsx
index 76e7c6d24e6..acacdb5323c 100644
--- a/packages/main/src/webComponents/Form/index.tsx
+++ b/packages/main/src/webComponents/Form/index.tsx
@@ -45,8 +45,8 @@ interface FormAttributes {
    * - `S` - 1 column by default (1 column is recommended)
    * - `M` - 1 column by default (up to 2 columns are recommended)
    * - `L` - 2 columns by default (up to 3 columns are recommended)
-   * - `XL` - 2 columns by default (up to 6 columns  are recommended)
-   * @default "S1 M1 L2 XL2"
+   * - `XL` - 3 columns by default (up to 6 columns  are recommended)
+   * @default "S1 M1 L2 XL3"
    */
   layout?: string;
 }
@@ -104,7 +104,7 @@ interface FormPropTypes extends FormAttributes, Omit<CommonProps, keyof FormAttr
  * - **S** (< 600px) – 1 column is recommended (default: 1)
  * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)
  * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)
- * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2)
+ * - **XL** (> 1439px) – up to 6 columns are recommended (default: 3)
  *
  * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
  *
diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx
index f0c0ceba050..76eaec23558 100644
--- a/packages/main/src/webComponents/List/index.tsx
+++ b/packages/main/src/webComponents/List/index.tsx
@@ -197,8 +197,6 @@ interface ListPropTypes
    * Fired when a movable list item is dropped onto a drop target.
    *
    * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
-   *
-   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onMove?: (event: Ui5CustomEvent<ListDomRef, ListMoveEventDetail>) => void;
 
diff --git a/packages/main/src/webComponents/ListItemGroup/index.tsx b/packages/main/src/webComponents/ListItemGroup/index.tsx
index c80da4f7001..6b0fe18e4fa 100644
--- a/packages/main/src/webComponents/ListItemGroup/index.tsx
+++ b/packages/main/src/webComponents/ListItemGroup/index.tsx
@@ -47,8 +47,6 @@ interface ListItemGroupPropTypes
    *
    * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
    *
-   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
-   *
    * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**.
    */
   onMove?: (event: Ui5CustomEvent<ListItemGroupDomRef, ListItemGroupMoveEventDetail>) => void;
diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx
index e2fbda22677..c4419a771e2 100644
--- a/packages/main/src/webComponents/Menu/index.tsx
+++ b/packages/main/src/webComponents/Menu/index.tsx
@@ -69,8 +69,6 @@ interface MenuPropTypes
   /**
    * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.**
    *
-   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
-   *
    * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**.
    */
   onBeforeClose?: (event: Ui5CustomEvent<MenuDomRef, MenuBeforeCloseEventDetail>) => void;
@@ -80,8 +78,6 @@ interface MenuPropTypes
    *
    * **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.
    *
-   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
-   *
    * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**.
    */
   onBeforeOpen?: (event: Ui5CustomEvent<MenuDomRef, MenuBeforeOpenEventDetail>) => void;
@@ -97,8 +93,6 @@ interface MenuPropTypes
    * Fired when an item is being clicked.
    *
    * **Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.
-   *
-   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onItemClick?: (event: Ui5CustomEvent<MenuDomRef, MenuItemClickEventDetail>) => void;
 
diff --git a/packages/main/src/webComponents/NavigationLayout/NavigationLayout.mdx b/packages/main/src/webComponents/NavigationLayout/NavigationLayout.mdx
new file mode 100644
index 00000000000..c89a136d77e
--- /dev/null
+++ b/packages/main/src/webComponents/NavigationLayout/NavigationLayout.mdx
@@ -0,0 +1,146 @@
+import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
+import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
+import * as ComponentStories from './NavigationLayout.stories';
+import { SideNavigation } from '../SideNavigation/index';
+import { SideNavigationItem } from '../SideNavigationItem/index';
+import { SideNavigationGroup } from '../SideNavigationGroup/index';
+import { SideNavigationSubItem } from '../SideNavigationSubItem/index';
+
+<Meta of={ComponentStories} />
+
+<DocsHeader />
+
+<br />
+
+## Example
+
+<Canvas of={ComponentStories.Default} />
+
+<details>
+<summary>Show static code</summary>
+
+```tsx
+function NavigationLayoutComponent(props) {
+  const [selectedContent, setSelectedContent] = useState('Home');
+  const [collapsed, setCollapsed] = useState(false);
+  const handleSelectionChange: SideNavigationPropTypes['onSelectionChange'] = (e) => {
+    setSelectedContent(e.detail.item.text);
+  };
+  useEffect(() => {
+    setCollapsed(props.sideCollapsed);
+  }, [props.sideCollapsed]);
+  return (
+    <div style={{ position: 'relative', height: '800px' }}>
+      <NavigationLayout
+        {...props}
+        sideCollapsed={collapsed}
+        header={
+          <ShellBar
+            startButton={
+              <Button
+                icon={menuIcon}
+                tooltip={`${collapsed ? 'Expand' : 'Collapse'} Side-Bar`}
+                onClick={() => {
+                  setCollapsed((prev) => !prev);
+                }}
+              />
+            }
+            primaryTitle="UI5 Web Components for React"
+            secondaryTitle="The Best Run SAP"
+          />
+        }
+        sideContent={
+          <SideNavigation slot="sideContent" onSelectionChange={handleSelectionChange}>
+            <SideNavigationItem text="Home" icon="home" />
+            <SideNavigationGroup text="Group 1" expanded>
+              <SideNavigationItem text="Item 1" icon="locate-me" expanded>
+                <SideNavigationSubItem text="Sub Item 1" />
+                <SideNavigationSubItem text="Sub Item 2" />
+              </SideNavigationItem>
+              <SideNavigationItem text="Item 2" icon="calendar" expanded>
+                <SideNavigationSubItem text="Sub Item 3" />
+                <SideNavigationSubItem text="Sub Item 4" />
+              </SideNavigationItem>
+              <SideNavigationItem text="Item 3" icon="activity-assigned-to-goal" expanded>
+                <SideNavigationSubItem text="Sub Item 5" />
+                <SideNavigationSubItem text="Sub Item 6" />
+              </SideNavigationItem>
+            </SideNavigationGroup>
+            <SideNavigationGroup text="Group 2" expanded>
+              <SideNavigationItem text="Item 4" icon="history" />
+              <SideNavigationItem text="Item 5" icon="source-code" />
+              <SideNavigationItem text="Item 6" icon="background" />
+            </SideNavigationGroup>
+            <SideNavigationItem
+              slot="fixedItems"
+              text="Legal"
+              href="https://www.sap.com/about/legal/impressum.html"
+              target="_blank"
+              icon="compare"
+            />
+            <SideNavigationItem
+              slot="fixedItems"
+              text="Privacy"
+              href="https://www.sap.com/about/legal/privacy.html"
+              target="_blank"
+              icon="locked"
+            />
+            <SideNavigationItem
+              slot="fixedItems"
+              text="Terms of Use"
+              href="https://www.sap.com/terms-of-use"
+              target="_blank"
+              icon="document-text"
+            />
+          </SideNavigation>
+        }
+      >
+        <div style={{ padding: '1rem' }}>
+          <div>
+            <Title>{selectedContent}</Title>
+            <br />
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </Text>
+          </div>
+        </div>
+      </NavigationLayout>
+    </div>
+  );
+}
+```
+
+</details>
+
+## Properties
+
+<ControlsWithNote of={ComponentStories.Default} />
+
+<Markdown>{SubcomponentsSection}</Markdown>
+
+## SideNavigation
+
+<Description of={SideNavigation} />
+<ArgTypesWithNote of={SideNavigation} />
+
+## SideNavigationItem
+
+<Description of={SideNavigationItem} />
+<ArgTypesWithNote of={SideNavigationItem} />
+
+## SideNavigationSubItem
+
+<Description of={SideNavigationSubItem} />
+<ArgTypesWithNote of={SideNavigationSubItem} />
+
+## SideNavigationGroup
+
+<Description of={SideNavigationGroup} />
+<ArgTypesWithNote of={SideNavigationGroup} />
+
+<Footer />
diff --git a/packages/main/src/webComponents/NavigationLayout/NavigationLayout.stories.tsx b/packages/main/src/webComponents/NavigationLayout/NavigationLayout.stories.tsx
new file mode 100644
index 00000000000..8601d71d99b
--- /dev/null
+++ b/packages/main/src/webComponents/NavigationLayout/NavigationLayout.stories.tsx
@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import menuIcon from '@ui5/webcomponents-icons/dist/menu.js';
+import '@ui5/webcomponents-icons/dist/home.js';
+import '@ui5/webcomponents-icons/dist/group.js';
+import '@ui5/webcomponents-icons/dist/locate-me.js';
+import '@ui5/webcomponents-icons/dist/calendar.js';
+import '@ui5/webcomponents-icons/dist/history.js';
+import '@ui5/webcomponents-icons/dist/source-code.js';
+import '@ui5/webcomponents-icons/dist/background.js';
+import '@ui5/webcomponents-icons/dist/activity-assigned-to-goal.js';
+import '@ui5/webcomponents-icons/dist/action-settings.js';
+import '@ui5/webcomponents-icons/dist/chain-link.js';
+import '@ui5/webcomponents-icons/dist/document-text.js';
+import '@ui5/webcomponents-icons/dist/compare.js';
+import '@ui5/webcomponents-icons/dist/locked.js';
+import { useEffect, useState } from 'react';
+import { Button } from '../Button/index.js';
+import { ShellBar } from '../ShellBar/index.js';
+import type { SideNavigationPropTypes } from '../SideNavigation/index.js';
+import { SideNavigation } from '../SideNavigation/index.js';
+import { SideNavigationGroup } from '../SideNavigationGroup/index.js';
+import { SideNavigationItem } from '../SideNavigationItem/index.js';
+import { SideNavigationSubItem } from '../SideNavigationSubItem/index.js';
+import { Text } from '../Text/index.js';
+import { Title } from '../Title/index.js';
+import { NavigationLayout } from './index.js';
+
+const meta = {
+  title: 'Layouts & Floorplans / NavigationLayout',
+  component: NavigationLayout,
+  argTypes: {
+    header: { control: { disable: true } },
+    sideContent: { control: { disable: true } },
+    children: { control: { disable: true } }
+  },
+  args: {},
+  tags: ['package:@ui5/webcomponents-fiori']
+} satisfies Meta<typeof NavigationLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [selectedContent, setSelectedContent] = useState('Home');
+    const [collapsed, setCollapsed] = useState(false);
+    const handleSelectionChange: SideNavigationPropTypes['onSelectionChange'] = (e) => {
+      setSelectedContent(e.detail.item.text);
+    };
+
+    useEffect(() => {
+      setCollapsed(args.sideCollapsed);
+    }, [args.sideCollapsed]);
+
+    return (
+      <div style={{ position: 'relative', height: '800px' }}>
+        <NavigationLayout
+          {...args}
+          sideCollapsed={collapsed}
+          header={
+            <ShellBar
+              startButton={
+                <Button
+                  icon={menuIcon}
+                  tooltip={`${collapsed ? 'Expand' : 'Collapse'} Side-Bar`}
+                  onClick={() => {
+                    setCollapsed((prev) => !prev);
+                  }}
+                />
+              }
+              primaryTitle="UI5 Web Components for React"
+              secondaryTitle="The Best Run SAP"
+            />
+          }
+          sideContent={
+            <SideNavigation slot="sideContent" onSelectionChange={handleSelectionChange}>
+              <SideNavigationItem text="Home" icon="home" />
+              <SideNavigationGroup text="Group 1" expanded>
+                <SideNavigationItem text="Item 1" icon="locate-me" expanded>
+                  <SideNavigationSubItem text="Sub Item 1" />
+                  <SideNavigationSubItem text="Sub Item 2" />
+                </SideNavigationItem>
+                <SideNavigationItem text="Item 2" icon="calendar" expanded>
+                  <SideNavigationSubItem text="Sub Item 3" />
+                  <SideNavigationSubItem text="Sub Item 4" />
+                </SideNavigationItem>
+                <SideNavigationItem text="Item 3" icon="activity-assigned-to-goal" expanded>
+                  <SideNavigationSubItem text="Sub Item 5" />
+                  <SideNavigationSubItem text="Sub Item 6" />
+                </SideNavigationItem>
+              </SideNavigationGroup>
+              <SideNavigationGroup text="Group 2" expanded>
+                <SideNavigationItem text="Item 4" icon="history" />
+                <SideNavigationItem text="Item 5" icon="source-code" />
+                <SideNavigationItem text="Item 6" icon="background" />
+              </SideNavigationGroup>
+
+              <SideNavigationItem
+                slot="fixedItems"
+                text="Legal"
+                href="https://www.sap.com/about/legal/impressum.html"
+                target="_blank"
+                icon="compare"
+              />
+              <SideNavigationItem
+                slot="fixedItems"
+                text="Privacy"
+                href="https://www.sap.com/about/legal/privacy.html"
+                target="_blank"
+                icon="locked"
+              />
+              <SideNavigationItem
+                slot="fixedItems"
+                text="Terms of Use"
+                href="https://www.sap.com/terms-of-use"
+                target="_blank"
+                icon="document-text"
+              />
+            </SideNavigation>
+          }
+        >
+          <div style={{ padding: '1rem' }}>
+            <div>
+              <Title>{selectedContent}</Title>
+              <br />
+              <Text>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
+              </Text>
+            </div>
+          </div>
+        </NavigationLayout>
+      </div>
+    );
+  }
+};
diff --git a/packages/main/src/webComponents/NavigationLayout/index.tsx b/packages/main/src/webComponents/NavigationLayout/index.tsx
new file mode 100644
index 00000000000..c83fd0fc6d6
--- /dev/null
+++ b/packages/main/src/webComponents/NavigationLayout/index.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import '@ui5/webcomponents-fiori/dist/NavigationLayout.js';
+import type { ReactNode } from 'react';
+import { withWebComponent } from '../../internal/withWebComponent.js';
+import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js';
+
+interface NavigationLayoutAttributes {
+  /**
+   * Indicates whether the side navigation is collapsed.
+   * @default false
+   */
+  sideCollapsed?: boolean;
+}
+
+interface NavigationLayoutDomRef extends Required<NavigationLayoutAttributes>, Ui5DomRef {}
+
+interface NavigationLayoutPropTypes
+  extends NavigationLayoutAttributes,
+    Omit<CommonProps, keyof NavigationLayoutAttributes | 'children' | 'header' | 'sideContent'> {
+  /**
+   * Defines the content.
+   */
+  children?: ReactNode | ReactNode[];
+
+  /**
+   * Defines the header.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="header"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   */
+  header?: UI5WCSlotsNode;
+
+  /**
+   * Defines the side content.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="sideContent"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   */
+  sideContent?: UI5WCSlotsNode;
+}
+
+/**
+ * The `NavigationLayout` is a container component that can be used to
+ * create a layout with a header, a side navigation and a content area.
+ *
+ * ### Usage
+ *
+ * Use the `NavigationLayout` to create whole screen of an application with vertical navigation.
+ *
+ * ### Responsive Behavior
+ *
+ * On desktop and tablet devices, the side navigation remains visible and can
+ * be expanded or collapsed using the `sideCollapsed` property. On phone devices, the side navigation
+ * is hidden by default but can be displayed using the same `sideCollapsed` property.
+ *
+ *
+ *
+ * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ *
+ * @since [2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of __@ui5/webcomponents-fiori__.
+ */
+const NavigationLayout = withWebComponent<NavigationLayoutPropTypes, NavigationLayoutDomRef>(
+  'ui5-navigation-layout',
+  [],
+  ['sideCollapsed'],
+  ['header', 'sideContent'],
+  []
+);
+
+NavigationLayout.displayName = 'NavigationLayout';
+
+export { NavigationLayout };
+export type { NavigationLayoutDomRef, NavigationLayoutPropTypes };
diff --git a/packages/main/src/webComponents/NotificationList/index.tsx b/packages/main/src/webComponents/NotificationList/index.tsx
index 69f17e96350..303c3b86e9b 100644
--- a/packages/main/src/webComponents/NotificationList/index.tsx
+++ b/packages/main/src/webComponents/NotificationList/index.tsx
@@ -36,11 +36,15 @@ interface NotificationListPropTypes
 
   /**
    * Fired when the `Close` button of any item is clicked.
+   *
+   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onItemClose?: (event: Ui5CustomEvent<NotificationListDomRef, NotificationItemCloseEventDetail>) => void;
 
   /**
    * Fired when an item is toggled.
+   *
+   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onItemToggle?: (event: Ui5CustomEvent<NotificationListDomRef, NotificationItemToggleEventDetail>) => void;
 }
diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx
index cff174663a4..4cf56d71335 100644
--- a/packages/main/src/webComponents/Popover/index.tsx
+++ b/packages/main/src/webComponents/Popover/index.tsx
@@ -172,26 +172,26 @@ interface PopoverPropTypes
    */
   header?: UI5WCSlotsNode;
   /**
-   * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**
+   * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeClose?: (event: Ui5CustomEvent<PopoverDomRef, PopupBeforeCloseEventDetail>) => void;
 
   /**
-   * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**
+   * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeOpen?: (event: Ui5CustomEvent<PopoverDomRef>) => void;
 
   /**
-   * Fired after the component is closed. **This event does not bubble.**
+   * Fired after the component is closed.
    */
   onClose?: (event: Ui5CustomEvent<PopoverDomRef>) => void;
 
   /**
-   * Fired after the component is opened. **This event does not bubble.**
+   * Fired after the component is opened.
    */
   onOpen?: (event: Ui5CustomEvent<PopoverDomRef>) => void;
 }
diff --git a/packages/main/src/webComponents/RangeSlider/index.tsx b/packages/main/src/webComponents/RangeSlider/index.tsx
index e516c720e47..20fed2abab7 100644
--- a/packages/main/src/webComponents/RangeSlider/index.tsx
+++ b/packages/main/src/webComponents/RangeSlider/index.tsx
@@ -19,6 +19,16 @@ interface RangeSliderAttributes {
    */
   disabled?: boolean;
 
+  /**
+   *
+   * Indicates whether input fields should be used as tooltips for the handles.
+   *
+   * **Note:** Setting this option to true will only work if showTooltip is set to true.
+   * **Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.
+   * @default false
+   */
+  editableTooltip?: boolean;
+
   /**
    * Defines end point of a selection - position of a second handle on the slider.
    * @default 100
@@ -149,7 +159,7 @@ interface RangeSliderPropTypes
 const RangeSlider = withWebComponent<RangeSliderPropTypes, RangeSliderDomRef>(
   'ui5-range-slider',
   ['accessibleName', 'endValue', 'labelInterval', 'max', 'min', 'name', 'startValue', 'step'],
-  ['disabled', 'showTickmarks', 'showTooltip'],
+  ['disabled', 'editableTooltip', 'showTickmarks', 'showTooltip'],
   [],
   ['change', 'input']
 );
diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx
index 5bbd44954da..06f6db80a31 100644
--- a/packages/main/src/webComponents/ResponsivePopover/index.tsx
+++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx
@@ -172,26 +172,26 @@ interface ResponsivePopoverPropTypes
    */
   header?: UI5WCSlotsNode;
   /**
-   * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**
+   * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeClose?: (event: Ui5CustomEvent<ResponsivePopoverDomRef, PopupBeforeCloseEventDetail>) => void;
 
   /**
-   * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**
+   * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.
    *
    * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeOpen?: (event: Ui5CustomEvent<ResponsivePopoverDomRef>) => void;
 
   /**
-   * Fired after the component is closed. **This event does not bubble.**
+   * Fired after the component is closed.
    */
   onClose?: (event: Ui5CustomEvent<ResponsivePopoverDomRef>) => void;
 
   /**
-   * Fired after the component is opened. **This event does not bubble.**
+   * Fired after the component is opened.
    */
   onOpen?: (event: Ui5CustomEvent<ResponsivePopoverDomRef>) => void;
 }
diff --git a/packages/main/src/webComponents/ShellBar/index.tsx b/packages/main/src/webComponents/ShellBar/index.tsx
index 4cec75e4928..757a65d20ec 100644
--- a/packages/main/src/webComponents/ShellBar/index.tsx
+++ b/packages/main/src/webComponents/ShellBar/index.tsx
@@ -239,6 +239,8 @@ interface ShellBarPropTypes
    * Fired, when a menu item is activated
    *
    * **Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.
+   *
+   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onMenuItemClick?: (event: Ui5CustomEvent<ShellBarDomRef, ShellBarMenuItemClickEventDetail>) => void;
 
diff --git a/packages/main/src/webComponents/Slider/index.tsx b/packages/main/src/webComponents/Slider/index.tsx
index f41a15f04dd..59833ee42bf 100644
--- a/packages/main/src/webComponents/Slider/index.tsx
+++ b/packages/main/src/webComponents/Slider/index.tsx
@@ -19,6 +19,16 @@ interface SliderAttributes {
    */
   disabled?: boolean;
 
+  /**
+   *
+   * Indicates whether input fields should be used as tooltips for the handles.
+   *
+   * **Note:** Setting this option to true will only work if showTooltip is set to true.
+   * **Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.
+   * @default false
+   */
+  editableTooltip?: boolean;
+
   /**
    * Displays a label with a value on every N-th step.
    *
@@ -141,7 +151,7 @@ interface SliderPropTypes extends SliderAttributes, Omit<CommonProps, keyof Slid
 const Slider = withWebComponent<SliderPropTypes, SliderDomRef>(
   'ui5-slider',
   ['accessibleName', 'labelInterval', 'max', 'min', 'name', 'step', 'value'],
-  ['disabled', 'showTickmarks', 'showTooltip'],
+  ['disabled', 'editableTooltip', 'showTickmarks', 'showTooltip'],
   [],
   ['change', 'input']
 );
diff --git a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx
index c4b3bb53c1a..838e63b05aa 100644
--- a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx
+++ b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx
@@ -47,8 +47,6 @@ interface SuggestionItemGroupPropTypes
    *
    * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
    *
-   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
-   *
    * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**.
    */
   onMove?: (event: Ui5CustomEvent<SuggestionItemGroupDomRef, ListItemGroupMoveEventDetail>) => void;
diff --git a/packages/main/src/webComponents/TabContainer/index.tsx b/packages/main/src/webComponents/TabContainer/index.tsx
index cb2ee5ca1e3..5f715fe3904 100644
--- a/packages/main/src/webComponents/TabContainer/index.tsx
+++ b/packages/main/src/webComponents/TabContainer/index.tsx
@@ -116,8 +116,6 @@ interface TabContainerPropTypes
    * Fired when element is moved to the tab container.
    *
    * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.
-   *
-   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onMove?: (event: Ui5CustomEvent<TabContainerDomRef, TabContainerMoveEventDetail>) => void;
 
diff --git a/packages/main/src/webComponents/TableCell/index.tsx b/packages/main/src/webComponents/TableCell/index.tsx
index db05f197aff..44c3fda0fb4 100644
--- a/packages/main/src/webComponents/TableCell/index.tsx
+++ b/packages/main/src/webComponents/TableCell/index.tsx
@@ -9,7 +9,7 @@ import type { CommonProps, Ui5DomRef } from '../../types/index.js';
 interface TableCellAttributes {
   /**
    * Determines the horizontal alignment of table cells.
-   * Note: All values valid for justify-content can be used not just the ones inside the enum.
+   * **Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.
    * @default undefined
    */
   horizontalAlign?: TableCellHorizontalAlign | undefined | keyof typeof TableCellHorizontalAlign;
diff --git a/packages/main/src/webComponents/TableHeaderCell/index.tsx b/packages/main/src/webComponents/TableHeaderCell/index.tsx
index 70bb7d38ee5..7bf2c7f0168 100644
--- a/packages/main/src/webComponents/TableHeaderCell/index.tsx
+++ b/packages/main/src/webComponents/TableHeaderCell/index.tsx
@@ -9,7 +9,7 @@ import type { CommonProps, Ui5DomRef } from '../../types/index.js';
 interface TableHeaderCellAttributes {
   /**
    * Determines the horizontal alignment of table cells.
-   * Note: All values valid for justify-content can be used not just the ones inside the enum.
+   * **Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.
    * @default undefined
    */
   horizontalAlign?: TableCellHorizontalAlign | undefined | keyof typeof TableCellHorizontalAlign;
diff --git a/packages/main/src/webComponents/Text/index.tsx b/packages/main/src/webComponents/Text/index.tsx
index 5e9693beec1..471e4e37a71 100644
--- a/packages/main/src/webComponents/Text/index.tsx
+++ b/packages/main/src/webComponents/Text/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import '@ui5/webcomponents/dist/Text.js';
-import type EmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js';
+import type TextEmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js';
 import type { ReactNode } from 'react';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 import type { CommonProps, Ui5DomRef } from '../../types/index.js';
@@ -13,7 +13,7 @@ interface TextAttributes {
    * **Note:** Available since [v2.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.2.0) of **@ui5/webcomponents**.
    * @default "Off"
    */
-  emptyIndicatorMode?: EmptyIndicatorMode | keyof typeof EmptyIndicatorMode;
+  emptyIndicatorMode?: TextEmptyIndicatorMode | keyof typeof TextEmptyIndicatorMode;
 
   /**
    * Defines the number of lines the text should wrap before it truncates.
diff --git a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx
index d0541f6dedf..f20486ef03b 100644
--- a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx
+++ b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx
@@ -78,7 +78,9 @@ interface ViewSettingsDialogPropTypes
    */
   sortItems?: UI5WCSlotsNode;
   /**
-   * Fired before the component is opened. **This event does not bubble.**
+   * Fired before the component is opened.
+   *
+   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
    */
   onBeforeOpen?: (event: Ui5CustomEvent<ViewSettingsDialogDomRef>) => void;
 
diff --git a/yarn.lock b/yarn.lock
index 9fea6e9d991..5253f4af3f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5902,25 +5902,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-base@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-base@npm:2.3.0"
+"@ui5/webcomponents-base@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-base@npm:2.4.0"
   dependencies:
     "@lit-labs/ssr-dom-shim": "npm:^1.1.2"
     lit-html: "npm:^2.0.1"
-  checksum: 10c0/fcc22d8594c38b01d97d1f5dd2107f436b63e3bc2df40807438fb2e3252d40f66887fb7e9394802e1294de4129f682d52df1b6570d10241d1a6eb93ab4bda9be
+  checksum: 10c0/0e329ea56273ef75eb2ac033a747525d498db35a3d8ed31d2d8ed4b5fc24f0f8167ec1a9de21dfddeeefc5cc5cbb4affc946ee34e481b1657b5db7f30f53b695
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-compat@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-compat@npm:2.3.0"
+"@ui5/webcomponents-compat@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-compat@npm:2.4.0"
   dependencies:
-    "@ui5/webcomponents": "npm:2.3.0"
-    "@ui5/webcomponents-base": "npm:2.3.0"
-    "@ui5/webcomponents-icons": "npm:2.3.0"
-    "@ui5/webcomponents-theming": "npm:2.3.0"
-  checksum: 10c0/1179215e765f9b9d794b0e461640140221cdd8de239c938aa4a474076bb8a5af6b1fd6b9e1f39149c7bc2761983dc2fed1b7a7614a87ec0eee521e09317d065a
+    "@ui5/webcomponents": "npm:2.4.0"
+    "@ui5/webcomponents-base": "npm:2.4.0"
+    "@ui5/webcomponents-icons": "npm:2.4.0"
+    "@ui5/webcomponents-theming": "npm:2.4.0"
+  checksum: 10c0/d7a9088f6d366bf41e395b5b5b2b957a31f5e4daf04e368fae5fa31714746ef703b3bf63bfa64235dde7e5d31160265c78d7add94ccb130147f4116004c55e23
   languageName: node
   linkType: hard
 
@@ -5932,53 +5932,53 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@ui5/webcomponents-fiori@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-fiori@npm:2.3.0"
+"@ui5/webcomponents-fiori@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-fiori@npm:2.4.0"
   dependencies:
-    "@ui5/webcomponents": "npm:2.3.0"
-    "@ui5/webcomponents-base": "npm:2.3.0"
-    "@ui5/webcomponents-icons": "npm:2.3.0"
-    "@ui5/webcomponents-theming": "npm:2.3.0"
+    "@ui5/webcomponents": "npm:2.4.0"
+    "@ui5/webcomponents-base": "npm:2.4.0"
+    "@ui5/webcomponents-icons": "npm:2.4.0"
+    "@ui5/webcomponents-theming": "npm:2.4.0"
     "@zxing/library": "npm:^0.17.1"
-  checksum: 10c0/40e42ff2ec8a60c681f0db05bbdf149b36a4ce50b9e9473eacda93f4d7be0f95a0fe9e75c77100ed85c7fa215a67ab58e7fbfb28da78275001818369f52abee5
+  checksum: 10c0/78f120f05033569b38e5bf811133e66e67438d36b7055736f41169edbde2a6b4ddaf346bbeaa3504bf39d4c72f092ad66a8e67e87d6ac02a19d5869ce6cae1e7
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-icons-business-suite@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-icons-business-suite@npm:2.3.0"
+"@ui5/webcomponents-icons-business-suite@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-icons-business-suite@npm:2.4.0"
   dependencies:
-    "@ui5/webcomponents-base": "npm:2.3.0"
-  checksum: 10c0/11a3839bc41f9d261b191ef7d0c188eb0f45b229c9e0f44b9d589c0a5dc85897ada7e2d1e6d0c7e48b3d89385fac0287f45a629867bdc9fb262bb1608b7da65d
+    "@ui5/webcomponents-base": "npm:2.4.0"
+  checksum: 10c0/bf9f048b420ad2ddb3720d48879c9da6e0694db4cfd37d72217846794f8f4ae57a9870a6afa9d52e5767482a22d5eae3e6c662a288ab333fd4a8778a6f26793e
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-icons-tnt@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-icons-tnt@npm:2.3.0"
+"@ui5/webcomponents-icons-tnt@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-icons-tnt@npm:2.4.0"
   dependencies:
-    "@ui5/webcomponents-base": "npm:2.3.0"
-  checksum: 10c0/d3a90b8b18763bedebab01e6b62f7b045771125049c69869443c2907c24158bfab7d0c819eec1fdfa8c2d62525ecb92f23b50fb916a79dfad3c88190f5b0694f
+    "@ui5/webcomponents-base": "npm:2.4.0"
+  checksum: 10c0/2a6a90f8d70c52f84f7f6da56c8541bc2560e752ec6e66701f9bf89ea88e41269545c7dc7943f2ed027e9cde8ceaff08de7a087efb2c70cca687f2784415c293
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-icons@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-icons@npm:2.3.0"
+"@ui5/webcomponents-icons@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-icons@npm:2.4.0"
   dependencies:
-    "@ui5/webcomponents-base": "npm:2.3.0"
-  checksum: 10c0/62c3184d03ad3d532a2c0d07581bac612727d1e0add1dc55df1c7cc4c015678f8cdc5163dce8d4f64d730a4b9f07da4759a40ad4902391f72ddb0caaf7617db0
+    "@ui5/webcomponents-base": "npm:2.4.0"
+  checksum: 10c0/97e83ceed885b032bf7687b8eea58789ff409f5e9029129f28797af13074c450e93f10f947b69aa76167e7ac4ffa8316f19d9feca4f7f17e8adca8099dd74ddf
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-localization@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-localization@npm:2.3.0"
+"@ui5/webcomponents-localization@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-localization@npm:2.4.0"
   dependencies:
     "@types/openui5": "npm:^1.113.0"
-    "@ui5/webcomponents-base": "npm:2.3.0"
-  checksum: 10c0/2f9606a2c4f43670bd7bc1a0400f1ef8316ede81d6e0ba898431d3f6d419495626d458e2c0980ed52dc5fea39c3da26d4f979b85e778f5324d06d05cd337e372
+    "@ui5/webcomponents-base": "npm:2.4.0"
+  checksum: 10c0/7f87fa4c66e6b6967c8b45a7ddbb9d3da7cb7122a8bce0a6da750f6540a00bd95a052cb3333490460b01e3989b6bc92a996d7381b788604ff3ab045a4e6a9f34
   languageName: node
   linkType: hard
 
@@ -5989,7 +5989,7 @@ __metadata:
     use-sync-external-store: "npm:1.2.2"
   peerDependencies:
     "@types/react": "*"
-    "@ui5/webcomponents-base": ~2.3.0
+    "@ui5/webcomponents-base": ~2.4.0
     react: ^18 || ^19
   peerDependenciesMeta:
     "@types/react":
@@ -6007,8 +6007,8 @@ __metadata:
     react-content-loader: "npm:7.0.2"
     recharts: "npm:2.13.3"
   peerDependencies:
-    "@ui5/webcomponents-react": ~2.3.0
-    "@ui5/webcomponents-react-base": ~2.3.0
+    "@ui5/webcomponents-react": ~2.4.0
+    "@ui5/webcomponents-react-base": ~2.4.0
     react: ^18
   languageName: unknown
   linkType: soft
@@ -6031,8 +6031,8 @@ __metadata:
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    "@ui5/webcomponents-compat": ~2.3.0
-    "@ui5/webcomponents-react": ~2.3.0
+    "@ui5/webcomponents-compat": ~2.4.0
+    "@ui5/webcomponents-react": ~2.4.0
     react: ^18 || ^19
     react-dom: ^18 || ^19
   peerDependenciesMeta:
@@ -6059,10 +6059,10 @@ __metadata:
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    "@ui5/webcomponents": ~2.3.0
-    "@ui5/webcomponents-base": ~2.3.0
-    "@ui5/webcomponents-fiori": ~2.3.0
-    "@ui5/webcomponents-icons": ~2.3.0
+    "@ui5/webcomponents": ~2.4.0
+    "@ui5/webcomponents-base": ~2.4.0
+    "@ui5/webcomponents-fiori": ~2.4.0
+    "@ui5/webcomponents-icons": ~2.4.0
     react: ^18 || ^19
     react-dom: ^18 || ^19
   peerDependenciesMeta:
@@ -6077,19 +6077,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@ui5/webcomponents-theming@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-theming@npm:2.3.0"
+"@ui5/webcomponents-theming@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-theming@npm:2.4.0"
   dependencies:
     "@sap-theming/theming-base-content": "npm:11.17.1"
-    "@ui5/webcomponents-base": "npm:2.3.0"
-  checksum: 10c0/7e66c87076401fb2cedc6063417c02f37c26a81f75bdc83762ec9be1e91657c364e50baedeb79d512a131a9b730e049d66e485e4f784597ec4eec109e82fc94b
+    "@ui5/webcomponents-base": "npm:2.4.0"
+  checksum: 10c0/15a1d3cb25a6e6e5287f77ca796a1d4ea8848551952e9b421af945bf345bde1a8a8ef0d19495af3355d6fd7a5cb40d0b922b7b1eb38e32fb173bb18e251dbc30
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-tools@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents-tools@npm:2.3.0"
+"@ui5/webcomponents-tools@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents-tools@npm:2.4.0"
   dependencies:
     "@custom-elements-manifest/analyzer": "npm:^0.8.4"
     "@typescript-eslint/eslint-plugin": "npm:^6.9.0"
@@ -6148,21 +6148,21 @@ __metadata:
   bin:
     wc-create-ui5-element: bin/create-ui5-element.js
     wc-dev: bin/dev.js
-  checksum: 10c0/e09e784379cbbb633f00f4581f1a4160cbc1a48f8b2356207046215d5e41b41f900ca8a04c5b8d46cc451e82da947affe77b034588bd52450a7eca981ad2a6a5
+  checksum: 10c0/65ee722e5f2245ad1b365eab91fae66dcaf31f2588e85fb07635b4394870ff70d0f74a1f07faa5501519f4a24a241b93680ddc66efcc28ff80bffbcc037de4be
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@ui5/webcomponents@npm:2.3.0"
+"@ui5/webcomponents@npm:2.4.0":
+  version: 2.4.0
+  resolution: "@ui5/webcomponents@npm:2.4.0"
   dependencies:
-    "@ui5/webcomponents-base": "npm:2.3.0"
-    "@ui5/webcomponents-icons": "npm:2.3.0"
-    "@ui5/webcomponents-icons-business-suite": "npm:2.3.0"
-    "@ui5/webcomponents-icons-tnt": "npm:2.3.0"
-    "@ui5/webcomponents-localization": "npm:2.3.0"
-    "@ui5/webcomponents-theming": "npm:2.3.0"
-  checksum: 10c0/9c1344c48a863b72f4a2b6794f9520392cde180d9e2dd90a5256036bd82e4c44feca1a08b1a361a57d36ea4a5b3191e2927b1f3d82c9d8c3e22ab69eeeb8b6dc
+    "@ui5/webcomponents-base": "npm:2.4.0"
+    "@ui5/webcomponents-icons": "npm:2.4.0"
+    "@ui5/webcomponents-icons-business-suite": "npm:2.4.0"
+    "@ui5/webcomponents-icons-tnt": "npm:2.4.0"
+    "@ui5/webcomponents-localization": "npm:2.4.0"
+    "@ui5/webcomponents-theming": "npm:2.4.0"
+  checksum: 10c0/204b047d5b32fb9f707c7d6d4e9c823c9a4a11da537e4e1cfc349e10661dede6717290a6f3a14da5752a5bf59529ae46097f2bc54a128ebb76229563fa4288aa
   languageName: node
   linkType: hard
 
@@ -21389,11 +21389,11 @@ __metadata:
     "@types/react": "npm:^18.3.4"
     "@types/react-dom": "npm:^18.3.0"
     "@types/use-sync-external-store": "npm:^0.0.6"
-    "@ui5/webcomponents": "npm:2.3.0"
-    "@ui5/webcomponents-compat": "npm:2.3.0"
-    "@ui5/webcomponents-fiori": "npm:2.3.0"
-    "@ui5/webcomponents-icons": "npm:2.3.0"
-    "@ui5/webcomponents-tools": "npm:2.3.0"
+    "@ui5/webcomponents": "npm:2.4.0"
+    "@ui5/webcomponents-compat": "npm:2.4.0"
+    "@ui5/webcomponents-fiori": "npm:2.4.0"
+    "@ui5/webcomponents-icons": "npm:2.4.0"
+    "@ui5/webcomponents-tools": "npm:2.4.0"
     "@vitejs/plugin-react": "npm:^4.2.0"
     chromatic: "npm:^11.0.0"
     cssnano: "npm:^7.0.0"