@openui5/ts-types 1.98.0 → 1.99.0

package/types/sap.ui.webc.fiori.d.ts

@@ -1,4 +1,4 @@
-// For Library Version: 1.98.0
+// For Library Version: 1.99.0
 
 declare namespace sap {
   namespace ui {
@@ -10,6 +10,16 @@ declare namespace sap {
        * SAPUI5 library with controls based on UI5 Web Components
        */
       namespace fiori {
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * Interface for components that may be slotted inside `ui5-page` as header and footer.
+         */
+        interface IBar {
+          __implements__sap_ui_webc_fiori_IBar: boolean;
+        }
+
         /**
          * @SINCE 1.97.0
          * @EXPERIMENTAL (since 1.97.0)
@@ -30,6 +40,16 @@ declare namespace sap {
           __implements__sap_ui_webc_fiori_IFilterItemOption: boolean;
         }
 
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * Interface for components that can be slotted inside `ui5-media-gallery` as items.
+         */
+        interface IMediaGalleryItem {
+          __implements__sap_ui_webc_fiori_IMediaGalleryItem: boolean;
+        }
+
         /**
          * @SINCE 1.92.0
          * @EXPERIMENTAL (since 1.92.0)
@@ -192,6 +212,102 @@ declare namespace sap {
           scanSuccess?: (oEvent: sap.ui.base.Event) => void;
         }
 
+        interface $DynamicSideContentSettings
+          extends sap.ui.webc.common.$WebComponentSettings {
+          /**
+           * Defines whether the component is in equal split mode. In this mode, the side and the main content take
+           * 50:50 percent of the container on all screen sizes except for phone, where the main and side contents
+           * are switching visibility using the toggle method.
+           */
+          equalSplit?: boolean | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines the visibility of the main content.
+           */
+          hideMainContent?:
+            | boolean
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines the visibility of the side content.
+           */
+          hideSideContent?:
+            | boolean
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines on which breakpoints the side content falls down below the main content.
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `BelowXL`
+           * 	 - `BelowL`
+           * 	 - `BelowM`
+           * 	 - `OnMinimumWidth`
+           */
+          sideContentFallDown?:
+            | sap.ui.webc.fiori.SideContentFallDown
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines whether the side content is positioned before the main content (left side in LTR mode), or after
+           * the the main content (right side in LTR mode).
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `Start`
+           * 	 - `End`
+           */
+          sideContentPosition?:
+            | sap.ui.webc.fiori.SideContentPosition
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines on which breakpoints the side content is visible.
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `AlwaysShow`
+           * 	 - `ShowAboveL`
+           * 	 - `ShowAboveM`
+           * 	 - `ShowAboveS`
+           * 	 - `NeverShow`
+           */
+          sideContentVisibility?:
+            | sap.ui.webc.fiori.SideContentVisibility
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines the main content.
+           */
+          content?:
+            | sap.ui.core.Control[]
+            | sap.ui.core.Control
+            | sap.ui.base.ManagedObject.AggregationBindingInfo;
+
+          /**
+           * Defines the side content.
+           */
+          sideContent?:
+            | sap.ui.core.Control[]
+            | sap.ui.core.Control
+            | sap.ui.base.ManagedObject.AggregationBindingInfo;
+
+          /**
+           * Fires when the current breakpoint has been changed.
+           */
+          layoutChange?: (oEvent: sap.ui.base.Event) => void;
+        }
+
         interface $FilterItemSettings
           extends sap.ui.webc.common.$WebComponentSettings {
           /**
@@ -223,6 +339,19 @@ declare namespace sap {
 
         interface $FlexibleColumnLayoutSettings
           extends sap.ui.webc.common.$WebComponentSettings {
+          /**
+           * An object of strings that defines additional accessibility roles for further customization.
+           *
+           * It supports the following fields: - `startColumnRole`: the accessibility role for the `startColumn` -
+           * `startArrowContainerRole`: the accessibility role for the first arrow container (between the `begin`
+           * and `mid` columns) - `midColumnRole`: the accessibility role for the `midColumn` - `endArrowContainerRole`:
+           * the accessibility role for the second arrow container (between the `mid` and `end` columns) - `endColumnRole`:
+           * the accessibility role for the `endColumn`
+           */
+          accessibilityRoles?:
+            | object
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
           /**
            * An object of strings that defines several additional accessibility texts for even further customization.
            *
@@ -233,7 +362,9 @@ declare namespace sap {
            * the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the
            * right - `endArrowLeftText`: the text that the second arrow (between the `mid` and `end` columns) will
            * have when pointing to the left - `endArrowRightText`: the text that the second arrow (between the `mid`
-           * and `end` columns) will have when pointing to the right
+           * and `end` columns) will have when pointing to the right - `startArrowContainerAccessibleName`: the text
+           * that the first arrow container (between the `begin` and `mid` columns) will have as `aria-label` - `endArrowContainerAccessibleName`:
+           * the text that the second arrow container (between the `mid` and `end` columns) will have as `aria-label`
            */
           accessibilityTexts?:
             | object
@@ -343,6 +474,131 @@ declare namespace sap {
           subtitle?: sap.ui.core.Control;
         }
 
+        interface $MediaGallerySettings
+          extends sap.ui.webc.common.$WebComponentSettings {
+          /**
+           * If enabled, a `display-area-click` event is fired when the user clicks or taps on the display area.
+           *  The display area is the central area that contains the enlarged content of the currently selected item.
+           */
+          interactiveDisplayArea?:
+            | boolean
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Determines the layout of the component.
+           *
+           *  Available options are:
+           * 	 - `Auto`
+           * 	 - `Vertical`
+           * 	 - `Horizontal`
+           */
+          layout?:
+            | sap.ui.webc.fiori.MediaGalleryLayout
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Determines the horizontal alignment of the thumbnails menu vs. the central display area.
+           *
+           *  Available options are:
+           * 	 - `Left`
+           * 	 - `Right`
+           */
+          menuHorizontalAlign?:
+            | sap.ui.webc.fiori.MediaGalleryMenuHorizontalAlign
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Determines the vertical alignment of the thumbnails menu vs. the central display area.
+           *
+           *  Available options are:
+           * 	 - `Top`
+           * 	 - `Bottom`
+           */
+          menuVerticalAlign?:
+            | sap.ui.webc.fiori.MediaGalleryMenuVerticalAlign
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * If set to `true`, all thumbnails are rendered in a scrollable container. If `false`, only up to five
+           * thumbnails are rendered, followed by an overflow button that shows the count of the remaining thumbnails.
+           */
+          showAllThumbnails?:
+            | boolean
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines the component items.
+           *
+           *
+           *
+           *  **Note:** Only one selected item is allowed.
+           *
+           *
+           *
+           *  **Note:** Use the `sap.ui.webc.fiori.MediaGalleryItem` component to define the desired items.
+           */
+          items?:
+            | sap.ui.webc.fiori.IMediaGalleryItem[]
+            | sap.ui.webc.fiori.IMediaGalleryItem
+            | sap.ui.base.ManagedObject.AggregationBindingInfo;
+
+          /**
+           * Fired when the display area is clicked.
+           *  The display area is the central area that contains the enlarged content of the currently selected item.
+           */
+          displayAreaClick?: (oEvent: sap.ui.base.Event) => void;
+
+          /**
+           * Fired when the thumbnails overflow button is clicked.
+           */
+          overflowClick?: (oEvent: sap.ui.base.Event) => void;
+
+          /**
+           * Fired when selection is changed by user interaction.
+           */
+          selectionChange?: (oEvent: sap.ui.base.Event) => void;
+        }
+
+        interface $MediaGalleryItemSettings
+          extends sap.ui.webc.common.$WebComponentSettings {
+          /**
+           * Defines whether the component is in disabled state.
+           */
+          disabled?: boolean | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Determines the layout of the item container.
+           *
+           *  Available options are:
+           * 	 - `Square`
+           * 	 - `Wide`
+           */
+          layout?:
+            | sap.ui.webc.fiori.MediaGalleryItemLayout
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines the selected state of the component.
+           */
+          selected?: boolean | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
+          /**
+           * Defines the content of the component.
+           */
+          content?:
+            | sap.ui.core.Control[]
+            | sap.ui.core.Control
+            | sap.ui.base.ManagedObject.AggregationBindingInfo;
+
+          /**
+           * Defines the content of the thumbnail.
+           */
+          thumbnail?:
+            | sap.ui.core.Control[]
+            | sap.ui.core.Control
+            | sap.ui.base.ManagedObject.AggregationBindingInfo;
+        }
+
         interface $NotificationActionSettings
           extends sap.ui.webc.common.$WebComponentSettings {
           /**
@@ -618,18 +874,12 @@ declare namespace sap {
           /**
            * Defines the footer HTML Element.
            */
-          footer?:
-            | sap.ui.core.Control[]
-            | sap.ui.core.Control
-            | sap.ui.base.ManagedObject.AggregationBindingInfo;
+          footer?: sap.ui.webc.fiori.IBar;
 
           /**
            * Defines the header HTML Element.
            */
-          header?:
-            | sap.ui.core.Control[]
-            | sap.ui.core.Control
-            | sap.ui.base.ManagedObject.AggregationBindingInfo;
+          header?: sap.ui.webc.fiori.IBar;
         }
 
         interface $ProductSwitchSettings
@@ -694,6 +944,16 @@ declare namespace sap {
 
         interface $ShellBarSettings
           extends sap.ui.webc.common.$WebComponentSettings {
+          /**
+           * An object of strings that defines several additional accessibility texts for even further customization.
+           *
+           * It supports the following fields: - `profileButtonTitle`: defines the tooltip for the profile button
+           * - `logoTitle`: defines the tooltip for the logo
+           */
+          accessibilityTexts?:
+            | object
+            | sap.ui.base.ManagedObject.PropertyBindingInfo;
+
           /**
            * Defines the `notificationsCount`, displayed in the notification icon top-right corner.
            */
@@ -795,7 +1055,7 @@ declare namespace sap {
           logoClick?: (oEvent: sap.ui.base.Event) => void;
 
           /**
-           * Fired, when a menu item is activated **Note:** You can prevent closing of oveflow popover by calling
+           * Fired, when a menu item is activated **Note:** You can prevent closing of overflow popover by calling
            * `event.preventDefault()`.
            */
           menuItemClick?: (oEvent: sap.ui.base.Event) => void;
@@ -806,7 +1066,7 @@ declare namespace sap {
           notificationsClick?: (oEvent: sap.ui.base.Event) => void;
 
           /**
-           * Fired, when the product switch icon is activated. **Note:** You can prevent closing of oveflow popover
+           * Fired, when the product switch icon is activated. **Note:** You can prevent closing of overflow popover
            * by calling `event.preventDefault()`.
            */
           productSwitchClick?: (oEvent: sap.ui.base.Event) => void;
@@ -1415,8 +1675,13 @@ declare namespace sap {
          * allow developers to style elements inside the Shadow DOM.
          *  The `sap.ui.webc.fiori.Bar` exposes the following CSS Shadow Parts:
          * 	 - bar - Used to style the wrapper of the content of the component
+         *
+         * Keyboard Handling:
          */
-        class Bar extends sap.ui.webc.common.WebComponent {
+        class Bar
+          extends sap.ui.webc.common.WebComponent
+          implements sap.ui.webc.fiori.IBar {
+          __implements__sap_ui_webc_fiori_IBar: boolean;
           /**
            * Constructor for a new `Bar`.
            *
@@ -1945,19 +2210,68 @@ declare namespace sap {
           show(): void;
         }
         /**
-         * @SINCE 1.97.0
-         * @EXPERIMENTAL (since 1.97.0)
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
          *
          * Overview:
          *
+         * The DynamicSideContent (`sap.ui.webc.fiori.DynamicSideContent`) is a layout component that allows additional
+         * content to be displayed in a way that flexibly adapts to different screen sizes. The side content appears
+         * in a container next to or directly below the main content (it doesn't overlay). When the side content
+         * is triggered, the main content becomes narrower (if appearing side-by-side). The side content contains
+         * a separate scrollbar when appearing next to the main content.
+         *
          * Usage:
+         *
+         * When to use?
+         *
+         * Use this component if you want to display relevant information that is not critical for users to complete
+         * a task. Users should have access to all the key functions and critical information in the app even if
+         * they do not see the side content. This is important because on smaller screen sizes it may be difficult
+         * to display the side content in a way that is easily accessible for the user.
+         *
+         * When not to use?
+         *
+         * Don't use it if you want to display navigation or critical information that prevents users from completing
+         * a task when they have no access to the side content.
+         *
+         * Responsive Behavior:
+         *
+         * Screen width > 1440px
+         *
+         *
+         * 	 - Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px each).
+         * 	 - If the application defines a trigger, the side content can be hidden.
+         *
+         * Screen width <= 1440px and> 1024px
+         *
+         *
+         * 	 - Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of 320px each). If the side
+         * 			content width falls below 320 px, it automatically slides under the main content, unless the app development
+         * 			team specifies that it should disappear.
+         *
+         * Screen width <= 1024px and> 720px
+         *
+         *
+         * 	 - The side content ratio is fixed to 340px, and the main content takes the rest of the width. Only
+         * 			if the `sideContentFallDown` is set to `OnMinimumWidth` and screen width is <= 960px and> 720px the side
+         * 			content falls below the main content.
+         *
+         * Screen width <= 720px (for example on a mobile device)
+         * 	 - In this case, the side content automatically disappears from the screen (unless specified to stay
+         * 			under the content by setting of `sideContentVisibility` property to `AlwaysShow`) and can be triggered
+         * 			from a pre-set trigger (specified within the app). When the side content is triggered, it replaces the
+         * 			main content. We recommend that you always place the trigger for the side content in the same location,
+         * 			such as in the app footer.
+         *
+         * A special case allows switching the comparison mode between the main and side content. In this case,
+         * the screen is split into 50:50 percent for main vs. side content. The responsive behavior of the equal
+         * split is the same as in the standard view - the side content disappears on screen widths of less than
+         * 720 px and can only be viewed by triggering it.
          */
-        class FilterItem
-          extends sap.ui.webc.common.WebComponent
-          implements sap.ui.webc.fiori.IFilterItem {
-          __implements__sap_ui_webc_fiori_IFilterItem: boolean;
+        class DynamicSideContent extends sap.ui.webc.common.WebComponent {
           /**
-           * Constructor for a new `FilterItem`.
+           * Constructor for a new `DynamicSideContent`.
            *
            * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
            * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
@@ -1967,10 +2281,10 @@ declare namespace sap {
             /**
              * Initial settings for the new control
              */
-            mSettings?: sap.ui.webc.fiori.$FilterItemSettings
+            mSettings?: sap.ui.webc.fiori.$DynamicSideContentSettings
           );
           /**
-           * Constructor for a new `FilterItem`.
+           * Constructor for a new `DynamicSideContent`.
            *
            * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
            * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
@@ -1984,12 +2298,12 @@ declare namespace sap {
             /**
              * Initial settings for the new control
              */
-            mSettings?: sap.ui.webc.fiori.$FilterItemSettings
+            mSettings?: sap.ui.webc.fiori.$DynamicSideContentSettings
           );
 
           /**
-           * Creates a new subclass of class sap.ui.webc.fiori.FilterItem with name `sClassName` and enriches it with
-           * the information contained in `oClassInfo`.
+           * Creates a new subclass of class sap.ui.webc.fiori.DynamicSideContent with name `sClassName` and enriches
+           * it with the information contained in `oClassInfo`.
            *
            * `oClassInfo` might contain the same kind of information as described in {@link sap.ui.webc.common.WebComponent.extend}.
            */
@@ -2001,7 +2315,7 @@ declare namespace sap {
             /**
              * Object literal with information about the class
              */
-            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.FilterItem>,
+            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.DynamicSideContent>,
             /**
              * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
              * used by this class
@@ -2009,91 +2323,417 @@ declare namespace sap {
             FNMetaImpl?: Function
           ): Function;
           /**
-           * Returns a metadata object for class sap.ui.webc.fiori.FilterItem.
+           * Returns a metadata object for class sap.ui.webc.fiori.DynamicSideContent.
            */
           static getMetadata(): sap.ui.webc.common.WebComponentMetadata;
           /**
-           * Adds some value to the aggregation {@link #getValues values}.
+           * Adds some content to the aggregation {@link #getContent content}.
            */
-          addValue(
+          addContent(
             /**
-             * The value to add; if empty, nothing is inserted
+             * The content to add; if empty, nothing is inserted
              */
-            oValue: sap.ui.webc.fiori.IFilterItemOption
+            oContent: sap.ui.core.Control
           ): this;
           /**
-           * Destroys all the values in the aggregation {@link #getValues values}.
+           * Adds some sideContent to the aggregation {@link #getSideContent sideContent}.
            */
-          destroyValues(): this;
+          addSideContent(
+            /**
+             * The sideContent to add; if empty, nothing is inserted
+             */
+            oSideContent: sap.ui.core.Control
+          ): this;
           /**
-           * Gets current value of property {@link #getText text}.
-           *
-           * Defines the text of the component.
+           * Attaches event handler `fnFunction` to the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.DynamicSideContent`.
            *
-           * Default value is `empty string`.
-           */
-          getText(): string;
-          /**
-           * Gets content of aggregation {@link #getValues values}.
+           * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
+           * otherwise it will be bound to this `sap.ui.webc.fiori.DynamicSideContent` itself.
            *
-           * Defines the `values` list.
+           * Fires when the current breakpoint has been changed.
            */
-          getValues(): sap.ui.webc.fiori.IFilterItemOption[];
-          /**
-           * Checks for the provided `sap.ui.webc.fiori.IFilterItemOption` in the aggregation {@link #getValues values}.
-           * and returns its index if found or -1 otherwise.
-           */
-          indexOfValue(
+          attachLayoutChange(
             /**
-             * The value whose index is looked for
+             * An application-specific payload object that will be passed to the event handler along with the event
+             * object when firing the event
              */
-            oValue: sap.ui.webc.fiori.IFilterItemOption
-          ): int;
-          /**
-           * Inserts a value into the aggregation {@link #getValues values}.
-           */
-          insertValue(
+            oData: object,
             /**
-             * The value to insert; if empty, nothing is inserted
+             * The function to be called when the event occurs
              */
-            oValue: sap.ui.webc.fiori.IFilterItemOption,
+            fnFunction: (p1: sap.ui.base.Event) => void,
             /**
-             * The `0`-based index the value should be inserted at; for a negative value of `iIndex`, the value is inserted
-             * at position 0; for a value greater than the current size of the aggregation, the value is inserted at
-             * the last position
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.DynamicSideContent`
+             * itself
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Attaches event handler `fnFunction` to the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.DynamicSideContent`.
+           *
+           * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
+           * otherwise it will be bound to this `sap.ui.webc.fiori.DynamicSideContent` itself.
+           *
+           * Fires when the current breakpoint has been changed.
+           */
+          attachLayoutChange(
+            /**
+             * The function to be called when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.DynamicSideContent`
+             * itself
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Destroys all the content in the aggregation {@link #getContent content}.
+           */
+          destroyContent(): this;
+          /**
+           * Destroys all the sideContent in the aggregation {@link #getSideContent sideContent}.
+           */
+          destroySideContent(): this;
+          /**
+           * Detaches event handler `fnFunction` from the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.DynamicSideContent`.
+           *
+           * The passed function and listener object must match the ones used for event registration.
+           */
+          detachLayoutChange(
+            /**
+             * The function to be called, when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object on which the given function had to be called
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Fires event {@link #event:layoutChange layoutChange} to attached listeners.
+           */
+          fireLayoutChange(
+            /**
+             * Parameters to pass along with the event
+             */
+            mParameters?: {
+              /**
+               * the current breakpoint.
+               */
+              currentBreakpoint?: string;
+              /**
+               * the breakpoint that was active before change to current breakpoint.
+               */
+              previousBreakpoint?: string;
+              /**
+               * visibility of the main content.
+               */
+              mainContentVisible?: boolean;
+              /**
+               * visibility of the side content.
+               */
+              sideContentVisible?: boolean;
+            }
+          ): this;
+          /**
+           * Gets content of aggregation {@link #getContent content}.
+           *
+           * Defines the main content.
+           */
+          getContent(): sap.ui.core.Control[];
+          /**
+           * Gets current value of property {@link #getEqualSplit equalSplit}.
+           *
+           * Defines whether the component is in equal split mode. In this mode, the side and the main content take
+           * 50:50 percent of the container on all screen sizes except for phone, where the main and side contents
+           * are switching visibility using the toggle method.
+           *
+           * Default value is `false`.
+           */
+          getEqualSplit(): boolean;
+          /**
+           * Gets current value of property {@link #getHideMainContent hideMainContent}.
+           *
+           * Defines the visibility of the main content.
+           *
+           * Default value is `false`.
+           */
+          getHideMainContent(): boolean;
+          /**
+           * Gets current value of property {@link #getHideSideContent hideSideContent}.
+           *
+           * Defines the visibility of the side content.
+           *
+           * Default value is `false`.
+           */
+          getHideSideContent(): boolean;
+          /**
+           * Gets content of aggregation {@link #getSideContent sideContent}.
+           *
+           * Defines the side content.
+           */
+          getSideContent(): sap.ui.core.Control[];
+          /**
+           * Gets current value of property {@link #getSideContentFallDown sideContentFallDown}.
+           *
+           * Defines on which breakpoints the side content falls down below the main content.
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `BelowXL`
+           * 	 - `BelowL`
+           * 	 - `BelowM`
+           * 	 - `OnMinimumWidth`
+           *
+           * Default value is `OnMinimumWidth`.
+           */
+          getSideContentFallDown(): sap.ui.webc.fiori.SideContentFallDown;
+          /**
+           * Gets current value of property {@link #getSideContentPosition sideContentPosition}.
+           *
+           * Defines whether the side content is positioned before the main content (left side in LTR mode), or after
+           * the the main content (right side in LTR mode).
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `Start`
+           * 	 - `End`
+           *
+           * Default value is `End`.
+           */
+          getSideContentPosition(): sap.ui.webc.fiori.SideContentPosition;
+          /**
+           * Gets current value of property {@link #getSideContentVisibility sideContentVisibility}.
+           *
+           * Defines on which breakpoints the side content is visible.
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `AlwaysShow`
+           * 	 - `ShowAboveL`
+           * 	 - `ShowAboveM`
+           * 	 - `ShowAboveS`
+           * 	 - `NeverShow`
+           *
+           * Default value is `ShowAboveS`.
+           */
+          getSideContentVisibility(): sap.ui.webc.fiori.SideContentVisibility;
+          /**
+           * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getContent content}. and returns
+           * its index if found or -1 otherwise.
+           */
+          indexOfContent(
+            /**
+             * The content whose index is looked for
+             */
+            oContent: sap.ui.core.Control
+          ): int;
+          /**
+           * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getSideContent sideContent}.
+           * and returns its index if found or -1 otherwise.
+           */
+          indexOfSideContent(
+            /**
+             * The sideContent whose index is looked for
+             */
+            oSideContent: sap.ui.core.Control
+          ): int;
+          /**
+           * Inserts a content into the aggregation {@link #getContent content}.
+           */
+          insertContent(
+            /**
+             * The content to insert; if empty, nothing is inserted
+             */
+            oContent: sap.ui.core.Control,
+            /**
+             * The `0`-based index the content should be inserted at; for a negative value of `iIndex`, the content
+             * is inserted at position 0; for a value greater than the current size of the aggregation, the content
+             * is inserted at the last position
              */
             iIndex: int
           ): this;
           /**
-           * Removes all the controls from the aggregation {@link #getValues values}.
+           * Inserts a sideContent into the aggregation {@link #getSideContent sideContent}.
+           */
+          insertSideContent(
+            /**
+             * The sideContent to insert; if empty, nothing is inserted
+             */
+            oSideContent: sap.ui.core.Control,
+            /**
+             * The `0`-based index the sideContent should be inserted at; for a negative value of `iIndex`, the sideContent
+             * is inserted at position 0; for a value greater than the current size of the aggregation, the sideContent
+             * is inserted at the last position
+             */
+            iIndex: int
+          ): this;
+          /**
+           * Removes all the controls from the aggregation {@link #getContent content}.
            *
            * Additionally, it unregisters them from the hosting UIArea.
            */
-          removeAllValues(): sap.ui.webc.fiori.IFilterItemOption[];
+          removeAllContent(): sap.ui.core.Control[];
           /**
-           * Removes a value from the aggregation {@link #getValues values}.
+           * Removes all the controls from the aggregation {@link #getSideContent sideContent}.
+           *
+           * Additionally, it unregisters them from the hosting UIArea.
            */
-          removeValue(
+          removeAllSideContent(): sap.ui.core.Control[];
+          /**
+           * Removes a content from the aggregation {@link #getContent content}.
+           */
+          removeContent(
             /**
-             * The value to remove or its index or id
+             * The content to remove or its index or id
              */
-            vValue: int | string | sap.ui.webc.fiori.IFilterItemOption
-          ): sap.ui.webc.fiori.IFilterItemOption;
+            vContent: int | string | sap.ui.core.Control
+          ): sap.ui.core.Control;
           /**
-           * Sets a new value for property {@link #getText text}.
+           * Removes a sideContent from the aggregation {@link #getSideContent sideContent}.
+           */
+          removeSideContent(
+            /**
+             * The sideContent to remove or its index or id
+             */
+            vSideContent: int | string | sap.ui.core.Control
+          ): sap.ui.core.Control;
+          /**
+           * Sets a new value for property {@link #getEqualSplit equalSplit}.
            *
-           * Defines the text of the component.
+           * Defines whether the component is in equal split mode. In this mode, the side and the main content take
+           * 50:50 percent of the container on all screen sizes except for phone, where the main and side contents
+           * are switching visibility using the toggle method.
            *
            * When called with a value of `null` or `undefined`, the default value of the property will be restored.
            *
-           * Default value is `empty string`.
+           * Default value is `false`.
            */
-          setText(
+          setEqualSplit(
             /**
-             * New value for property `text`
+             * New value for property `equalSplit`
              */
-            sText?: string
+            bEqualSplit?: boolean
+          ): this;
+          /**
+           * Sets a new value for property {@link #getHideMainContent hideMainContent}.
+           *
+           * Defines the visibility of the main content.
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `false`.
+           */
+          setHideMainContent(
+            /**
+             * New value for property `hideMainContent`
+             */
+            bHideMainContent?: boolean
+          ): this;
+          /**
+           * Sets a new value for property {@link #getHideSideContent hideSideContent}.
+           *
+           * Defines the visibility of the side content.
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `false`.
+           */
+          setHideSideContent(
+            /**
+             * New value for property `hideSideContent`
+             */
+            bHideSideContent?: boolean
+          ): this;
+          /**
+           * Sets a new value for property {@link #getSideContentFallDown sideContentFallDown}.
+           *
+           * Defines on which breakpoints the side content falls down below the main content.
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `BelowXL`
+           * 	 - `BelowL`
+           * 	 - `BelowM`
+           * 	 - `OnMinimumWidth`
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `OnMinimumWidth`.
+           */
+          setSideContentFallDown(
+            /**
+             * New value for property `sideContentFallDown`
+             */
+            sSideContentFallDown?: sap.ui.webc.fiori.SideContentFallDown
+          ): this;
+          /**
+           * Sets a new value for property {@link #getSideContentPosition sideContentPosition}.
+           *
+           * Defines whether the side content is positioned before the main content (left side in LTR mode), or after
+           * the the main content (right side in LTR mode).
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `Start`
+           * 	 - `End`
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `End`.
+           */
+          setSideContentPosition(
+            /**
+             * New value for property `sideContentPosition`
+             */
+            sSideContentPosition?: sap.ui.webc.fiori.SideContentPosition
+          ): this;
+          /**
+           * Sets a new value for property {@link #getSideContentVisibility sideContentVisibility}.
+           *
+           * Defines on which breakpoints the side content is visible.
+           *
+           *
+           *
+           *  **The available values are:**
+           *
+           *
+           * 	 - `AlwaysShow`
+           * 	 - `ShowAboveL`
+           * 	 - `ShowAboveM`
+           * 	 - `ShowAboveS`
+           * 	 - `NeverShow`
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `ShowAboveS`.
+           */
+          setSideContentVisibility(
+            /**
+             * New value for property `sideContentVisibility`
+             */
+            sSideContentVisibility?: sap.ui.webc.fiori.SideContentVisibility
           ): this;
+          /**
+           * Toggles visibility of main and side contents on S screen size (mobile device).
+           */
+          toggleContents(): void;
         }
         /**
          * @SINCE 1.97.0
@@ -2103,12 +2743,12 @@ declare namespace sap {
          *
          * Usage:
          */
-        class FilterItemOption
+        class FilterItem
           extends sap.ui.webc.common.WebComponent
-          implements sap.ui.webc.fiori.IFilterItemOption {
-          __implements__sap_ui_webc_fiori_IFilterItemOption: boolean;
+          implements sap.ui.webc.fiori.IFilterItem {
+          __implements__sap_ui_webc_fiori_IFilterItem: boolean;
           /**
-           * Constructor for a new `FilterItemOption`.
+           * Constructor for a new `FilterItem`.
            *
            * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
            * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
@@ -2118,10 +2758,10 @@ declare namespace sap {
             /**
              * Initial settings for the new control
              */
-            mSettings?: sap.ui.webc.fiori.$FilterItemOptionSettings
+            mSettings?: sap.ui.webc.fiori.$FilterItemSettings
           );
           /**
-           * Constructor for a new `FilterItemOption`.
+           * Constructor for a new `FilterItem`.
            *
            * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
            * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
@@ -2135,11 +2775,753 @@ declare namespace sap {
             /**
              * Initial settings for the new control
              */
-            mSettings?: sap.ui.webc.fiori.$FilterItemOptionSettings
+            mSettings?: sap.ui.webc.fiori.$FilterItemSettings
+          );
+
+          /**
+           * Creates a new subclass of class sap.ui.webc.fiori.FilterItem with name `sClassName` and enriches it with
+           * the information contained in `oClassInfo`.
+           *
+           * `oClassInfo` might contain the same kind of information as described in {@link sap.ui.webc.common.WebComponent.extend}.
+           */
+          static extend<T extends Record<string, unknown>>(
+            /**
+             * Name of the class being created
+             */
+            sClassName: string,
+            /**
+             * Object literal with information about the class
+             */
+            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.FilterItem>,
+            /**
+             * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
+             * used by this class
+             */
+            FNMetaImpl?: Function
+          ): Function;
+          /**
+           * Returns a metadata object for class sap.ui.webc.fiori.FilterItem.
+           */
+          static getMetadata(): sap.ui.webc.common.WebComponentMetadata;
+          /**
+           * Adds some value to the aggregation {@link #getValues values}.
+           */
+          addValue(
+            /**
+             * The value to add; if empty, nothing is inserted
+             */
+            oValue: sap.ui.webc.fiori.IFilterItemOption
+          ): this;
+          /**
+           * Destroys all the values in the aggregation {@link #getValues values}.
+           */
+          destroyValues(): this;
+          /**
+           * Gets current value of property {@link #getText text}.
+           *
+           * Defines the text of the component.
+           *
+           * Default value is `empty string`.
+           */
+          getText(): string;
+          /**
+           * Gets content of aggregation {@link #getValues values}.
+           *
+           * Defines the `values` list.
+           */
+          getValues(): sap.ui.webc.fiori.IFilterItemOption[];
+          /**
+           * Checks for the provided `sap.ui.webc.fiori.IFilterItemOption` in the aggregation {@link #getValues values}.
+           * and returns its index if found or -1 otherwise.
+           */
+          indexOfValue(
+            /**
+             * The value whose index is looked for
+             */
+            oValue: sap.ui.webc.fiori.IFilterItemOption
+          ): int;
+          /**
+           * Inserts a value into the aggregation {@link #getValues values}.
+           */
+          insertValue(
+            /**
+             * The value to insert; if empty, nothing is inserted
+             */
+            oValue: sap.ui.webc.fiori.IFilterItemOption,
+            /**
+             * The `0`-based index the value should be inserted at; for a negative value of `iIndex`, the value is inserted
+             * at position 0; for a value greater than the current size of the aggregation, the value is inserted at
+             * the last position
+             */
+            iIndex: int
+          ): this;
+          /**
+           * Removes all the controls from the aggregation {@link #getValues values}.
+           *
+           * Additionally, it unregisters them from the hosting UIArea.
+           */
+          removeAllValues(): sap.ui.webc.fiori.IFilterItemOption[];
+          /**
+           * Removes a value from the aggregation {@link #getValues values}.
+           */
+          removeValue(
+            /**
+             * The value to remove or its index or id
+             */
+            vValue: int | string | sap.ui.webc.fiori.IFilterItemOption
+          ): sap.ui.webc.fiori.IFilterItemOption;
+          /**
+           * Sets a new value for property {@link #getText text}.
+           *
+           * Defines the text of the component.
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `empty string`.
+           */
+          setText(
+            /**
+             * New value for property `text`
+             */
+            sText?: string
+          ): this;
+        }
+        /**
+         * @SINCE 1.97.0
+         * @EXPERIMENTAL (since 1.97.0)
+         *
+         * Overview:
+         *
+         * Usage:
+         */
+        class FilterItemOption
+          extends sap.ui.webc.common.WebComponent
+          implements sap.ui.webc.fiori.IFilterItemOption {
+          __implements__sap_ui_webc_fiori_IFilterItemOption: boolean;
+          /**
+           * Constructor for a new `FilterItemOption`.
+           *
+           * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
+           * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
+           * of the syntax of the settings object.
+           */
+          constructor(
+            /**
+             * Initial settings for the new control
+             */
+            mSettings?: sap.ui.webc.fiori.$FilterItemOptionSettings
+          );
+          /**
+           * Constructor for a new `FilterItemOption`.
+           *
+           * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
+           * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
+           * of the syntax of the settings object.
+           */
+          constructor(
+            /**
+             * ID for the new control, generated automatically if no ID is given
+             */
+            sId?: string,
+            /**
+             * Initial settings for the new control
+             */
+            mSettings?: sap.ui.webc.fiori.$FilterItemOptionSettings
+          );
+
+          /**
+           * Creates a new subclass of class sap.ui.webc.fiori.FilterItemOption with name `sClassName` and enriches
+           * it with the information contained in `oClassInfo`.
+           *
+           * `oClassInfo` might contain the same kind of information as described in {@link sap.ui.webc.common.WebComponent.extend}.
+           */
+          static extend<T extends Record<string, unknown>>(
+            /**
+             * Name of the class being created
+             */
+            sClassName: string,
+            /**
+             * Object literal with information about the class
+             */
+            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.FilterItemOption>,
+            /**
+             * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
+             * used by this class
+             */
+            FNMetaImpl?: Function
+          ): Function;
+          /**
+           * Returns a metadata object for class sap.ui.webc.fiori.FilterItemOption.
+           */
+          static getMetadata(): sap.ui.webc.common.WebComponentMetadata;
+          /**
+           * Gets current value of property {@link #getSelected selected}.
+           *
+           * Defines whether the option is selected
+           *
+           * Default value is `false`.
+           */
+          getSelected(): boolean;
+          /**
+           * Gets current value of property {@link #getText text}.
+           *
+           * Defines the text of the component.
+           *
+           * Default value is `empty string`.
+           */
+          getText(): string;
+          /**
+           * Sets a new value for property {@link #getSelected selected}.
+           *
+           * Defines whether the option is selected
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `false`.
+           */
+          setSelected(
+            /**
+             * New value for property `selected`
+             */
+            bSelected?: boolean
+          ): this;
+          /**
+           * Sets a new value for property {@link #getText text}.
+           *
+           * Defines the text of the component.
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `empty string`.
+           */
+          setText(
+            /**
+             * New value for property `text`
+             */
+            sText?: string
+          ): this;
+        }
+        /**
+         * @SINCE 1.92.0
+         * @EXPERIMENTAL (since 1.92.0)
+         *
+         * Overview:
+         *
+         * The `FlexibleColumnLayout` implements the master-detail-detail paradigm by displaying up to three pages
+         * in separate columns. There are several possible layouts that can be changed either with the component
+         * API, or by pressing the arrows, displayed between the columns.
+         *
+         * Usage:
+         *
+         * Use this component for applications that need to display several logical levels of related information
+         * side by side (e.g. list of items, item, sub-item, etc.). The Component is flexible in a sense that the
+         * application can focus the user's attention on one particular column.
+         *
+         * Responsive Behavior:
+         *
+         * The `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout`
+         * property and the window size. The component would display 1 column for window size smaller than 599px,
+         * up to two columns between 599px and 1023px, and 3 columns for sizes bigger than 1023px.
+         *
+         *
+         *
+         *  Keyboard Handling:
+         */
+        class FlexibleColumnLayout extends sap.ui.webc.common.WebComponent {
+          /**
+           * Constructor for a new `FlexibleColumnLayout`.
+           *
+           * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
+           * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
+           * of the syntax of the settings object.
+           */
+          constructor(
+            /**
+             * Initial settings for the new control
+             */
+            mSettings?: sap.ui.webc.fiori.$FlexibleColumnLayoutSettings
+          );
+          /**
+           * Constructor for a new `FlexibleColumnLayout`.
+           *
+           * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
+           * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
+           * of the syntax of the settings object.
+           */
+          constructor(
+            /**
+             * ID for the new control, generated automatically if no ID is given
+             */
+            sId?: string,
+            /**
+             * Initial settings for the new control
+             */
+            mSettings?: sap.ui.webc.fiori.$FlexibleColumnLayoutSettings
+          );
+
+          /**
+           * Creates a new subclass of class sap.ui.webc.fiori.FlexibleColumnLayout with name `sClassName` and enriches
+           * it with the information contained in `oClassInfo`.
+           *
+           * `oClassInfo` might contain the same kind of information as described in {@link sap.ui.webc.common.WebComponent.extend}.
+           */
+          static extend<T extends Record<string, unknown>>(
+            /**
+             * Name of the class being created
+             */
+            sClassName: string,
+            /**
+             * Object literal with information about the class
+             */
+            oClassInfo?: sap.ClassInfo<
+              T,
+              sap.ui.webc.fiori.FlexibleColumnLayout
+            >,
+            /**
+             * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
+             * used by this class
+             */
+            FNMetaImpl?: Function
+          ): Function;
+          /**
+           * Returns a metadata object for class sap.ui.webc.fiori.FlexibleColumnLayout.
+           */
+          static getMetadata(): sap.ui.webc.common.WebComponentMetadata;
+          /**
+           * Attaches event handler `fnFunction` to the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.FlexibleColumnLayout`.
+           *
+           * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
+           * otherwise it will be bound to this `sap.ui.webc.fiori.FlexibleColumnLayout` itself.
+           *
+           * Fired when the layout changes via user interaction by clicking the arrows or by changing the component
+           * size due to resizing.
+           */
+          attachLayoutChange(
+            /**
+             * An application-specific payload object that will be passed to the event handler along with the event
+             * object when firing the event
+             */
+            oData: object,
+            /**
+             * The function to be called when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.FlexibleColumnLayout`
+             * itself
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Attaches event handler `fnFunction` to the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.FlexibleColumnLayout`.
+           *
+           * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
+           * otherwise it will be bound to this `sap.ui.webc.fiori.FlexibleColumnLayout` itself.
+           *
+           * Fired when the layout changes via user interaction by clicking the arrows or by changing the component
+           * size due to resizing.
+           */
+          attachLayoutChange(
+            /**
+             * The function to be called when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.FlexibleColumnLayout`
+             * itself
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Destroys the endColumn in the aggregation {@link #getEndColumn endColumn}.
+           */
+          destroyEndColumn(): this;
+          /**
+           * Destroys the midColumn in the aggregation {@link #getMidColumn midColumn}.
+           */
+          destroyMidColumn(): this;
+          /**
+           * Destroys the startColumn in the aggregation {@link #getStartColumn startColumn}.
+           */
+          destroyStartColumn(): this;
+          /**
+           * Detaches event handler `fnFunction` from the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.FlexibleColumnLayout`.
+           *
+           * The passed function and listener object must match the ones used for event registration.
+           */
+          detachLayoutChange(
+            /**
+             * The function to be called, when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object on which the given function had to be called
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Fires event {@link #event:layoutChange layoutChange} to attached listeners.
+           */
+          fireLayoutChange(
+            /**
+             * Parameters to pass along with the event
+             */
+            mParameters?: {
+              /**
+               * The current layout
+               */
+              layout?: FCLLayout;
+              /**
+               * The effective column layout, f.e [67%, 33%, 0]
+               */
+              columnLayout?: any[];
+              /**
+               * Indicates if the start column is currently visible
+               */
+              startColumnVisible?: boolean;
+              /**
+               * Indicates if the middle column is currently visible
+               */
+              midColumnVisible?: boolean;
+              /**
+               * Indicates if the end column is currently visible
+               */
+              endColumnVisible?: boolean;
+              /**
+               * Indicates if the layout is changed via the arrows
+               */
+              arrowsUsed?: boolean;
+              /**
+               * Indicates if the layout is changed via resizing
+               */
+              resize?: boolean;
+            }
+          ): this;
+          /**
+           * Gets current value of property {@link #getAccessibilityRoles accessibilityRoles}.
+           *
+           * An object of strings that defines additional accessibility roles for further customization.
+           *
+           * It supports the following fields: - `startColumnRole`: the accessibility role for the `startColumn` -
+           * `startArrowContainerRole`: the accessibility role for the first arrow container (between the `begin`
+           * and `mid` columns) - `midColumnRole`: the accessibility role for the `midColumn` - `endArrowContainerRole`:
+           * the accessibility role for the second arrow container (between the `mid` and `end` columns) - `endColumnRole`:
+           * the accessibility role for the `endColumn`
+           *
+           * Default value is `{}`.
+           */
+          getAccessibilityRoles(): object;
+          /**
+           * Gets current value of property {@link #getAccessibilityTexts accessibilityTexts}.
+           *
+           * An object of strings that defines several additional accessibility texts for even further customization.
+           *
+           * It supports the following fields: - `startColumnAccessibleName`: the accessibility name for the `startColumn`
+           * region - `midColumnAccessibleName`: the accessibility name for the `midColumn` region - `endColumnAccessibleName`:
+           * the accessibility name for the `endColumn` region - `startArrowLeftText`: the text that the first arrow
+           * (between the `begin` and `mid` columns) will have when pointing to the left - `startArrowRightText`:
+           * the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the
+           * right - `endArrowLeftText`: the text that the second arrow (between the `mid` and `end` columns) will
+           * have when pointing to the left - `endArrowRightText`: the text that the second arrow (between the `mid`
+           * and `end` columns) will have when pointing to the right - `startArrowContainerAccessibleName`: the text
+           * that the first arrow container (between the `begin` and `mid` columns) will have as `aria-label` - `endArrowContainerAccessibleName`:
+           * the text that the second arrow container (between the `mid` and `end` columns) will have as `aria-label`
+           *
+           * Default value is `{}`.
+           */
+          getAccessibilityTexts(): object;
+          /**
+           * Returns the current column layout, based on both the `layout` property and the screen size.
+           *
+           *  **For example:** ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc, where the numbers represents
+           * the width of the start, middle and end columns.
+           */
+          getColumnLayout(): void;
+          /**
+           * Gets content of aggregation {@link #getEndColumn endColumn}.
+           *
+           * Defines the content in the end column.
+           */
+          getEndColumn(): sap.ui.core.Control;
+          /**
+           * Returns if the `end` column is visible.
+           */
+          getEndColumnVisible(): void;
+          /**
+           * Gets current value of property {@link #getHeight height}.
+           *
+           * Defines the height of the control
+           */
+          getHeight(): sap.ui.core.CSSSize;
+          /**
+           * Gets current value of property {@link #getHideArrows hideArrows}.
+           *
+           * Defines the visibility of the arrows, used for expanding and shrinking the columns.
+           *
+           * Default value is `false`.
+           */
+          getHideArrows(): boolean;
+          /**
+           * Gets current value of property {@link #getLayout layout}.
+           *
+           * Defines the columns layout and their proportion.
+           *
+           *  **Note:** The layout also depends on the screen size - one column for screens smaller than 599px, two
+           * columns between 599px and 1023px and three columns for sizes bigger than 1023px.
+           *
+           *  Available options are:
+           * 	 - `OneColumn`
+           * 	 - `TwoColumnsStartExpanded`
+           * 	 - `TwoColumnsMidExpanded`
+           * 	 - `ThreeColumnsMidExpanded`
+           * 	 - `ThreeColumnsEndExpanded`
+           * 	 - `ThreeColumnsStartExpandedEndHidden`
+           * 	 - `ThreeColumnsMidExpandedEndHidden`
+           * 	 - `MidColumnFullScreen`
+           * 	 - `EndColumnFullScreen`
+           *
+           *  **For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns in
+           * 67%/33% proportion.
+           *
+           * Default value is `OneColumn`.
+           */
+          getLayout(): sap.ui.webc.fiori.FCLLayout;
+          /**
+           * Gets content of aggregation {@link #getMidColumn midColumn}.
+           *
+           * Defines the content in the middle column.
+           */
+          getMidColumn(): sap.ui.core.Control;
+          /**
+           * Returns if the `middle` column is visible.
+           */
+          getMidColumnVisible(): void;
+          /**
+           * Gets content of aggregation {@link #getStartColumn startColumn}.
+           *
+           * Defines the content in the start column.
+           */
+          getStartColumn(): sap.ui.core.Control;
+          /**
+           * Returns if the `start` column is visible.
+           */
+          getStartColumnVisible(): void;
+          /**
+           * Returns the number of currently visible columns.
+           */
+          getVisibleColumns(): void;
+          /**
+           * Gets current value of property {@link #getWidth width}.
+           *
+           * Defines the width of the control
+           */
+          getWidth(): sap.ui.core.CSSSize;
+          /**
+           * Sets a new value for property {@link #getAccessibilityRoles accessibilityRoles}.
+           *
+           * An object of strings that defines additional accessibility roles for further customization.
+           *
+           * It supports the following fields: - `startColumnRole`: the accessibility role for the `startColumn` -
+           * `startArrowContainerRole`: the accessibility role for the first arrow container (between the `begin`
+           * and `mid` columns) - `midColumnRole`: the accessibility role for the `midColumn` - `endArrowContainerRole`:
+           * the accessibility role for the second arrow container (between the `mid` and `end` columns) - `endColumnRole`:
+           * the accessibility role for the `endColumn`
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `{}`.
+           */
+          setAccessibilityRoles(
+            /**
+             * New value for property `accessibilityRoles`
+             */
+            oAccessibilityRoles?: object
+          ): this;
+          /**
+           * Sets a new value for property {@link #getAccessibilityTexts accessibilityTexts}.
+           *
+           * An object of strings that defines several additional accessibility texts for even further customization.
+           *
+           * It supports the following fields: - `startColumnAccessibleName`: the accessibility name for the `startColumn`
+           * region - `midColumnAccessibleName`: the accessibility name for the `midColumn` region - `endColumnAccessibleName`:
+           * the accessibility name for the `endColumn` region - `startArrowLeftText`: the text that the first arrow
+           * (between the `begin` and `mid` columns) will have when pointing to the left - `startArrowRightText`:
+           * the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the
+           * right - `endArrowLeftText`: the text that the second arrow (between the `mid` and `end` columns) will
+           * have when pointing to the left - `endArrowRightText`: the text that the second arrow (between the `mid`
+           * and `end` columns) will have when pointing to the right - `startArrowContainerAccessibleName`: the text
+           * that the first arrow container (between the `begin` and `mid` columns) will have as `aria-label` - `endArrowContainerAccessibleName`:
+           * the text that the second arrow container (between the `mid` and `end` columns) will have as `aria-label`
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `{}`.
+           */
+          setAccessibilityTexts(
+            /**
+             * New value for property `accessibilityTexts`
+             */
+            oAccessibilityTexts?: object
+          ): this;
+          /**
+           * Sets the aggregated {@link #getEndColumn endColumn}.
+           */
+          setEndColumn(
+            /**
+             * The endColumn to set
+             */
+            oEndColumn: sap.ui.core.Control
+          ): this;
+          /**
+           * Sets a new value for property {@link #getHeight height}.
+           *
+           * Defines the height of the control
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           */
+          setHeight(
+            /**
+             * New value for property `height`
+             */
+            sHeight?: sap.ui.core.CSSSize
+          ): this;
+          /**
+           * Sets a new value for property {@link #getHideArrows hideArrows}.
+           *
+           * Defines the visibility of the arrows, used for expanding and shrinking the columns.
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `false`.
+           */
+          setHideArrows(
+            /**
+             * New value for property `hideArrows`
+             */
+            bHideArrows?: boolean
+          ): this;
+          /**
+           * Sets a new value for property {@link #getLayout layout}.
+           *
+           * Defines the columns layout and their proportion.
+           *
+           *  **Note:** The layout also depends on the screen size - one column for screens smaller than 599px, two
+           * columns between 599px and 1023px and three columns for sizes bigger than 1023px.
+           *
+           *  Available options are:
+           * 	 - `OneColumn`
+           * 	 - `TwoColumnsStartExpanded`
+           * 	 - `TwoColumnsMidExpanded`
+           * 	 - `ThreeColumnsMidExpanded`
+           * 	 - `ThreeColumnsEndExpanded`
+           * 	 - `ThreeColumnsStartExpandedEndHidden`
+           * 	 - `ThreeColumnsMidExpandedEndHidden`
+           * 	 - `MidColumnFullScreen`
+           * 	 - `EndColumnFullScreen`
+           *
+           *  **For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns in
+           * 67%/33% proportion.
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `OneColumn`.
+           */
+          setLayout(
+            /**
+             * New value for property `layout`
+             */
+            sLayout?: sap.ui.webc.fiori.FCLLayout
+          ): this;
+          /**
+           * Sets the aggregated {@link #getMidColumn midColumn}.
+           */
+          setMidColumn(
+            /**
+             * The midColumn to set
+             */
+            oMidColumn: sap.ui.core.Control
+          ): this;
+          /**
+           * Sets the aggregated {@link #getStartColumn startColumn}.
+           */
+          setStartColumn(
+            /**
+             * The startColumn to set
+             */
+            oStartColumn: sap.ui.core.Control
+          ): this;
+          /**
+           * Sets a new value for property {@link #getWidth width}.
+           *
+           * Defines the width of the control
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           */
+          setWidth(
+            /**
+             * New value for property `width`
+             */
+            sWidth?: sap.ui.core.CSSSize
+          ): this;
+        }
+        /**
+         * @SINCE 1.95.0
+         * @EXPERIMENTAL (since 1.95.0)
+         *
+         * Overview: An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging
+         * illustration, and conversational tone to better communicate an empty or a success state than just show
+         * a message alone.
+         *
+         * Each illustration has default internationalised title and subtitle texts. Also they can be managed with
+         * `titleText` and `subtitleText` properties.
+         *
+         * Structure: The IllustratedMessage consists of the following elements, which are displayed below each
+         * other in the following order:
+         *
+         *
+         *
+         * 	 - Illustration
+         * 	 - Title
+         * 	 - Subtitle
+         * 	 - Actions
+         *
+         * Usage: `sap.ui.webc.fiori.IllustratedMessage` is meant to be used inside container component, for example
+         * a `sap.ui.webc.main.Card`, a `sap.ui.webc.main.Dialog` or a `sap.ui.webc.fiori.Page`
+         */
+        class IllustratedMessage extends sap.ui.webc.common.WebComponent {
+          /**
+           * Constructor for a new `IllustratedMessage`.
+           *
+           * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
+           * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
+           * of the syntax of the settings object.
+           */
+          constructor(
+            /**
+             * Initial settings for the new control
+             */
+            mSettings?: sap.ui.webc.fiori.$IllustratedMessageSettings
+          );
+          /**
+           * Constructor for a new `IllustratedMessage`.
+           *
+           * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
+           * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
+           * of the syntax of the settings object.
+           */
+          constructor(
+            /**
+             * ID for the new control, generated automatically if no ID is given
+             */
+            sId?: string,
+            /**
+             * Initial settings for the new control
+             */
+            mSettings?: sap.ui.webc.fiori.$IllustratedMessageSettings
           );
 
           /**
-           * Creates a new subclass of class sap.ui.webc.fiori.FilterItemOption with name `sClassName` and enriches
+           * Creates a new subclass of class sap.ui.webc.fiori.IllustratedMessage with name `sClassName` and enriches
            * it with the information contained in `oClassInfo`.
            *
            * `oClassInfo` might contain the same kind of information as described in {@link sap.ui.webc.common.WebComponent.extend}.
@@ -2152,7 +3534,7 @@ declare namespace sap {
             /**
              * Object literal with information about the class
              */
-            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.FilterItemOption>,
+            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.IllustratedMessage>,
             /**
              * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
              * used by this class
@@ -2160,89 +3542,196 @@ declare namespace sap {
             FNMetaImpl?: Function
           ): Function;
           /**
-           * Returns a metadata object for class sap.ui.webc.fiori.FilterItemOption.
+           * Returns a metadata object for class sap.ui.webc.fiori.IllustratedMessage.
            */
           static getMetadata(): sap.ui.webc.common.WebComponentMetadata;
           /**
-           * Gets current value of property {@link #getSelected selected}.
+           * Adds some action to the aggregation {@link #getActions actions}.
+           */
+          addAction(
+            /**
+             * The action to add; if empty, nothing is inserted
+             */
+            oAction: sap.ui.webc.main.IButton
+          ): this;
+          /**
+           * Destroys all the actions in the aggregation {@link #getActions actions}.
+           */
+          destroyActions(): this;
+          /**
+           * Destroys the subtitle in the aggregation {@link #getSubtitle subtitle}.
+           */
+          destroySubtitle(): this;
+          /**
+           * Gets content of aggregation {@link #getActions actions}.
            *
-           * Defines whether the option is selected
+           * Defines the component actions.
+           */
+          getActions(): sap.ui.webc.main.IButton[];
+          /**
+           * Gets current value of property {@link #getName name}.
            *
-           * Default value is `false`.
+           * Default value is `BeforeSearch`.
            */
-          getSelected(): boolean;
+          getName(): sap.ui.webc.fiori.IllustrationMessageType;
           /**
-           * Gets current value of property {@link #getText text}.
+           * Gets content of aggregation {@link #getSubtitle subtitle}.
            *
-           * Defines the text of the component.
+           * Defines the subtitle of the component.
+           *
+           *  **Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText`
+           * property will be overwritten.
+           */
+          getSubtitle(): sap.ui.core.Control;
+          /**
+           * Gets current value of property {@link #getSubtitleText subtitleText}.
+           *
+           * Defines the subtitle of the component.
+           *
+           *  **Note:** Using this property, the default subtitle text of illustration will be overwritten.
+           *
+           *  **Note:** Using `subtitle` slot, the default of this property will be overwritten.
            *
            * Default value is `empty string`.
            */
-          getText(): string;
+          getSubtitleText(): string;
           /**
-           * Sets a new value for property {@link #getSelected selected}.
+           * Gets current value of property {@link #getTitleText titleText}.
            *
-           * Defines whether the option is selected
+           * Defines the title of the component.
+           *
+           *  **Note:** Using this property, the default title text of illustration will be overwritten.
+           *
+           * Default value is `empty string`.
+           */
+          getTitleText(): string;
+          /**
+           * Checks for the provided `sap.ui.webc.main.IButton` in the aggregation {@link #getActions actions}. and
+           * returns its index if found or -1 otherwise.
+           */
+          indexOfAction(
+            /**
+             * The action whose index is looked for
+             */
+            oAction: sap.ui.webc.main.IButton
+          ): int;
+          /**
+           * Inserts a action into the aggregation {@link #getActions actions}.
+           */
+          insertAction(
+            /**
+             * The action to insert; if empty, nothing is inserted
+             */
+            oAction: sap.ui.webc.main.IButton,
+            /**
+             * The `0`-based index the action should be inserted at; for a negative value of `iIndex`, the action is
+             * inserted at position 0; for a value greater than the current size of the aggregation, the action is inserted
+             * at the last position
+             */
+            iIndex: int
+          ): this;
+          /**
+           * Removes a action from the aggregation {@link #getActions actions}.
+           */
+          removeAction(
+            /**
+             * The action to remove or its index or id
+             */
+            vAction: int | string | sap.ui.webc.main.IButton
+          ): sap.ui.webc.main.IButton;
+          /**
+           * Removes all the controls from the aggregation {@link #getActions actions}.
+           *
+           * Additionally, it unregisters them from the hosting UIArea.
+           */
+          removeAllActions(): sap.ui.webc.main.IButton[];
+          /**
+           * Sets a new value for property {@link #getName name}.
            *
            * When called with a value of `null` or `undefined`, the default value of the property will be restored.
            *
-           * Default value is `false`.
+           * Default value is `BeforeSearch`.
            */
-          setSelected(
+          setName(
             /**
-             * New value for property `selected`
+             * New value for property `name`
              */
-            bSelected?: boolean
+            sName?: sap.ui.webc.fiori.IllustrationMessageType
           ): this;
           /**
-           * Sets a new value for property {@link #getText text}.
+           * Sets the aggregated {@link #getSubtitle subtitle}.
+           */
+          setSubtitle(
+            /**
+             * The subtitle to set
+             */
+            oSubtitle: sap.ui.core.Control
+          ): this;
+          /**
+           * Sets a new value for property {@link #getSubtitleText subtitleText}.
            *
-           * Defines the text of the component.
+           * Defines the subtitle of the component.
+           *
+           *  **Note:** Using this property, the default subtitle text of illustration will be overwritten.
+           *
+           *  **Note:** Using `subtitle` slot, the default of this property will be overwritten.
            *
            * When called with a value of `null` or `undefined`, the default value of the property will be restored.
            *
            * Default value is `empty string`.
            */
-          setText(
+          setSubtitleText(
             /**
-             * New value for property `text`
+             * New value for property `subtitleText`
              */
-            sText?: string
+            sSubtitleText?: string
+          ): this;
+          /**
+           * Sets a new value for property {@link #getTitleText titleText}.
+           *
+           * Defines the title of the component.
+           *
+           *  **Note:** Using this property, the default title text of illustration will be overwritten.
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `empty string`.
+           */
+          setTitleText(
+            /**
+             * New value for property `titleText`
+             */
+            sTitleText?: string
           ): this;
         }
         /**
-         * @SINCE 1.92.0
-         * @EXPERIMENTAL (since 1.92.0)
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
          *
          * Overview:
          *
-         * The `FlexibleColumnLayout` implements the master-detail-detail paradigm by displaying up to three pages
-         * in separate columns. There are several possible layouts that can be changed either with the component
-         * API, or by pressing the arrows, displayed between the columns.
-         *
-         * Usage:
-         *
-         * Use this component for applications that need to display several logical levels of related information
-         * side by side (e.g. list of items, item, sub-item, etc.). The Component is flexible in a sense that the
-         * application can focus the user's attention on one particular column.
-         *
-         * Responsive Behavior:
-         *
-         * The `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout`
-         * property and the window size. The component would display 1 column for window size smaller than 599px,
-         * up to two columns between 599px and 1023px, and 3 columns for sizes bigger than 1023px.
+         * The `ui-media-gallery` component allows the user to browse through multimedia items. Currently, the supported
+         * items are images and videos. The items should be defined using the `sap.ui.webc.fiori.MediaGalleryItem`
+         * component.
          *
+         * The items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding
+         * item is displayed in larger size.
+         *  The component is responsive by default and adjusts the position of the menu with respect to viewport
+         * size, but the application is able to further customize the layout via the provided API.
          *
+         * Keyboard Handling: The `sap.ui.webc.fiori.MediaGallery` provides advanced keyboard handling.
+         *  When the thumbnails menu is focused the following keyboard shortcuts allow the user to navigate through
+         * the thumbnail items:
          *
-         *  Keyboard Handling:
          *
          *
-         * 	 - [SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated,
-         * 			it triggers the associated action (such as expand/collapse the column).
+         * 	 - [UP/DOWN] - Navigates up and down the items
+         * 	 - [HOME] - Navigates to first item
+         * 	 - [END] - Navigates to the last item [SPACE/ENTER] - Select an item
          */
-        class FlexibleColumnLayout extends sap.ui.webc.common.WebComponent {
+        class MediaGallery extends sap.ui.webc.common.WebComponent {
           /**
-           * Constructor for a new `FlexibleColumnLayout`.
+           * Constructor for a new `MediaGallery`.
            *
            * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
            * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
@@ -2252,10 +3741,10 @@ declare namespace sap {
             /**
              * Initial settings for the new control
              */
-            mSettings?: sap.ui.webc.fiori.$FlexibleColumnLayoutSettings
+            mSettings?: sap.ui.webc.fiori.$MediaGallerySettings
           );
           /**
-           * Constructor for a new `FlexibleColumnLayout`.
+           * Constructor for a new `MediaGallery`.
            *
            * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
            * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
@@ -2269,12 +3758,12 @@ declare namespace sap {
             /**
              * Initial settings for the new control
              */
-            mSettings?: sap.ui.webc.fiori.$FlexibleColumnLayoutSettings
+            mSettings?: sap.ui.webc.fiori.$MediaGallerySettings
           );
 
           /**
-           * Creates a new subclass of class sap.ui.webc.fiori.FlexibleColumnLayout with name `sClassName` and enriches
-           * it with the information contained in `oClassInfo`.
+           * Creates a new subclass of class sap.ui.webc.fiori.MediaGallery with name `sClassName` and enriches it
+           * with the information contained in `oClassInfo`.
            *
            * `oClassInfo` might contain the same kind of information as described in {@link sap.ui.webc.common.WebComponent.extend}.
            */
@@ -2286,10 +3775,7 @@ declare namespace sap {
             /**
              * Object literal with information about the class
              */
-            oClassInfo?: sap.ClassInfo<
-              T,
-              sap.ui.webc.fiori.FlexibleColumnLayout
-            >,
+            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.MediaGallery>,
             /**
              * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
              * used by this class
@@ -2297,19 +3783,114 @@ declare namespace sap {
             FNMetaImpl?: Function
           ): Function;
           /**
-           * Returns a metadata object for class sap.ui.webc.fiori.FlexibleColumnLayout.
+           * Returns a metadata object for class sap.ui.webc.fiori.MediaGallery.
            */
           static getMetadata(): sap.ui.webc.common.WebComponentMetadata;
           /**
-           * Attaches event handler `fnFunction` to the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.FlexibleColumnLayout`.
+           * Adds some item to the aggregation {@link #getItems items}.
+           */
+          addItem(
+            /**
+             * The item to add; if empty, nothing is inserted
+             */
+            oItem: sap.ui.webc.fiori.IMediaGalleryItem
+          ): this;
+          /**
+           * Attaches event handler `fnFunction` to the {@link #event:displayAreaClick displayAreaClick} event of
+           * this `sap.ui.webc.fiori.MediaGallery`.
+           *
+           * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
+           * otherwise it will be bound to this `sap.ui.webc.fiori.MediaGallery` itself.
+           *
+           * Fired when the display area is clicked.
+           *  The display area is the central area that contains the enlarged content of the currently selected item.
+           */
+          attachDisplayAreaClick(
+            /**
+             * An application-specific payload object that will be passed to the event handler along with the event
+             * object when firing the event
+             */
+            oData: object,
+            /**
+             * The function to be called when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.MediaGallery` itself
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Attaches event handler `fnFunction` to the {@link #event:displayAreaClick displayAreaClick} event of
+           * this `sap.ui.webc.fiori.MediaGallery`.
+           *
+           * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
+           * otherwise it will be bound to this `sap.ui.webc.fiori.MediaGallery` itself.
+           *
+           * Fired when the display area is clicked.
+           *  The display area is the central area that contains the enlarged content of the currently selected item.
+           */
+          attachDisplayAreaClick(
+            /**
+             * The function to be called when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.MediaGallery` itself
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Attaches event handler `fnFunction` to the {@link #event:overflowClick overflowClick} event of this `sap.ui.webc.fiori.MediaGallery`.
+           *
+           * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
+           * otherwise it will be bound to this `sap.ui.webc.fiori.MediaGallery` itself.
+           *
+           * Fired when the thumbnails overflow button is clicked.
+           */
+          attachOverflowClick(
+            /**
+             * An application-specific payload object that will be passed to the event handler along with the event
+             * object when firing the event
+             */
+            oData: object,
+            /**
+             * The function to be called when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.MediaGallery` itself
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Attaches event handler `fnFunction` to the {@link #event:overflowClick overflowClick} event of this `sap.ui.webc.fiori.MediaGallery`.
+           *
+           * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
+           * otherwise it will be bound to this `sap.ui.webc.fiori.MediaGallery` itself.
+           *
+           * Fired when the thumbnails overflow button is clicked.
+           */
+          attachOverflowClick(
+            /**
+             * The function to be called when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.MediaGallery` itself
+             */
+            oListener?: object
+          ): this;
+          /**
+           * Attaches event handler `fnFunction` to the {@link #event:selectionChange selectionChange} event of this
+           * `sap.ui.webc.fiori.MediaGallery`.
            *
            * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
-           * otherwise it will be bound to this `sap.ui.webc.fiori.FlexibleColumnLayout` itself.
+           * otherwise it will be bound to this `sap.ui.webc.fiori.MediaGallery` itself.
            *
-           * Fired when the layout changes via user interaction by clicking the arrows or by changing the component
-           * size due to resizing.
+           * Fired when selection is changed by user interaction.
            */
-          attachLayoutChange(
+          attachSelectionChange(
             /**
              * An application-specific payload object that will be passed to the event handler along with the event
              * object when firing the event
@@ -2320,49 +3901,72 @@ declare namespace sap {
              */
             fnFunction: (p1: sap.ui.base.Event) => void,
             /**
-             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.FlexibleColumnLayout`
-             * itself
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.MediaGallery` itself
              */
             oListener?: object
           ): this;
           /**
-           * Attaches event handler `fnFunction` to the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.FlexibleColumnLayout`.
+           * Attaches event handler `fnFunction` to the {@link #event:selectionChange selectionChange} event of this
+           * `sap.ui.webc.fiori.MediaGallery`.
            *
            * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
-           * otherwise it will be bound to this `sap.ui.webc.fiori.FlexibleColumnLayout` itself.
+           * otherwise it will be bound to this `sap.ui.webc.fiori.MediaGallery` itself.
            *
-           * Fired when the layout changes via user interaction by clicking the arrows or by changing the component
-           * size due to resizing.
+           * Fired when selection is changed by user interaction.
            */
-          attachLayoutChange(
+          attachSelectionChange(
             /**
              * The function to be called when the event occurs
              */
             fnFunction: (p1: sap.ui.base.Event) => void,
             /**
-             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.FlexibleColumnLayout`
-             * itself
+             * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.MediaGallery` itself
              */
             oListener?: object
           ): this;
           /**
-           * Destroys the endColumn in the aggregation {@link #getEndColumn endColumn}.
+           * Destroys all the items in the aggregation {@link #getItems items}.
            */
-          destroyEndColumn(): this;
+          destroyItems(): this;
           /**
-           * Destroys the midColumn in the aggregation {@link #getMidColumn midColumn}.
+           * Detaches event handler `fnFunction` from the {@link #event:displayAreaClick displayAreaClick} event of
+           * this `sap.ui.webc.fiori.MediaGallery`.
+           *
+           * The passed function and listener object must match the ones used for event registration.
            */
-          destroyMidColumn(): this;
+          detachDisplayAreaClick(
+            /**
+             * The function to be called, when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object on which the given function had to be called
+             */
+            oListener?: object
+          ): this;
           /**
-           * Destroys the startColumn in the aggregation {@link #getStartColumn startColumn}.
+           * Detaches event handler `fnFunction` from the {@link #event:overflowClick overflowClick} event of this
+           * `sap.ui.webc.fiori.MediaGallery`.
+           *
+           * The passed function and listener object must match the ones used for event registration.
            */
-          destroyStartColumn(): this;
+          detachOverflowClick(
+            /**
+             * The function to be called, when the event occurs
+             */
+            fnFunction: (p1: sap.ui.base.Event) => void,
+            /**
+             * Context object on which the given function had to be called
+             */
+            oListener?: object
+          ): this;
           /**
-           * Detaches event handler `fnFunction` from the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.FlexibleColumnLayout`.
+           * Detaches event handler `fnFunction` from the {@link #event:selectionChange selectionChange} event of
+           * this `sap.ui.webc.fiori.MediaGallery`.
            *
            * The passed function and listener object must match the ones used for event registration.
            */
-          detachLayoutChange(
+          detachSelectionChange(
             /**
              * The function to be called, when the event occurs
              */
@@ -2373,298 +3977,262 @@ declare namespace sap {
             oListener?: object
           ): this;
           /**
-           * Fires event {@link #event:layoutChange layoutChange} to attached listeners.
+           * Fires event {@link #event:displayAreaClick displayAreaClick} to attached listeners.
            */
-          fireLayoutChange(
+          fireDisplayAreaClick(
+            /**
+             * Parameters to pass along with the event
+             */
+            mParameters?: object
+          ): this;
+          /**
+           * Fires event {@link #event:overflowClick overflowClick} to attached listeners.
+           */
+          fireOverflowClick(
+            /**
+             * Parameters to pass along with the event
+             */
+            mParameters?: object
+          ): this;
+          /**
+           * Fires event {@link #event:selectionChange selectionChange} to attached listeners.
+           */
+          fireSelectionChange(
             /**
              * Parameters to pass along with the event
              */
             mParameters?: {
               /**
-               * The current layout
-               */
-              layout?: sap.ui.webc.fiori.FCLLayout;
-              /**
-               * The effective column layout, f.e [67%, 33%, 0]
-               */
-              columnLayout?: any[];
-              /**
-               * Indicates if the start column is currently visible
-               */
-              startColumnVisible?: boolean;
-              /**
-               * Indicates if the middle column is currently visible
-               */
-              midColumnVisible?: boolean;
-              /**
-               * Indicates if the end column is currently visible
-               */
-              endColumnVisible?: boolean;
-              /**
-               * Indicates if the layout is changed via the arrows
-               */
-              arrowsUsed?: boolean;
-              /**
-               * Indicates if the layout is changed via resizing
+               * the selected item.
                */
-              resize?: boolean;
+              item?: HTMLElement;
             }
           ): this;
           /**
-           * Gets current value of property {@link #getAccessibilityTexts accessibilityTexts}.
-           *
-           * An object of strings that defines several additional accessibility texts for even further customization.
+           * Gets current value of property {@link #getInteractiveDisplayArea interactiveDisplayArea}.
            *
-           * It supports the following fields: - `startColumnAccessibleName`: the accessibility name for the `startColumn`
-           * region - `midColumnAccessibleName`: the accessibility name for the `midColumn` region - `endColumnAccessibleName`:
-           * the accessibility name for the `endColumn` region - `startArrowLeftText`: the text that the first arrow
-           * (between the `begin` and `mid` columns) will have when pointing to the left - `startArrowRightText`:
-           * the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the
-           * right - `endArrowLeftText`: the text that the second arrow (between the `mid` and `end` columns) will
-           * have when pointing to the left - `endArrowRightText`: the text that the second arrow (between the `mid`
-           * and `end` columns) will have when pointing to the right
+           * If enabled, a `display-area-click` event is fired when the user clicks or taps on the display area.
+           *  The display area is the central area that contains the enlarged content of the currently selected item.
            *
-           * Default value is `{}`.
+           * Default value is `false`.
            */
-          getAccessibilityTexts(): object;
+          getInteractiveDisplayArea(): boolean;
           /**
-           * Returns the current column layout, based on both the `layout` property and the screen size.
+           * Gets content of aggregation {@link #getItems items}.
            *
-           *  **For example:** ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc, where the numbers represents
-           * the width of the start, middle and end columns.
-           */
-          getColumnLayout(): void;
-          /**
-           * Gets content of aggregation {@link #getEndColumn endColumn}.
+           * Defines the component items.
            *
-           * Defines the content in the end column.
-           */
-          getEndColumn(): sap.ui.core.Control;
-          /**
-           * Returns if the `end` column is visible.
-           */
-          getEndColumnVisible(): void;
-          /**
-           * Gets current value of property {@link #getHeight height}.
            *
-           * Defines the height of the control
-           */
-          getHeight(): sap.ui.core.CSSSize;
-          /**
-           * Gets current value of property {@link #getHideArrows hideArrows}.
            *
-           * Defines the visibility of the arrows, used for expanding and shrinking the columns.
+           *  **Note:** Only one selected item is allowed.
            *
-           * Default value is `false`.
+           *
+           *
+           *  **Note:** Use the `sap.ui.webc.fiori.MediaGalleryItem` component to define the desired items.
            */
-          getHideArrows(): boolean;
+          getItems(): sap.ui.webc.fiori.IMediaGalleryItem[];
           /**
            * Gets current value of property {@link #getLayout layout}.
            *
-           * Defines the columns layout and their proportion.
-           *
-           *  **Note:** The layout also depends on the screen size - one column for screens smaller than 599px, two
-           * columns between 599px and 1023px and three columns for sizes bigger than 1023px.
+           * Determines the layout of the component.
            *
            *  Available options are:
-           * 	 - `OneColumn`
-           * 	 - `TwoColumnsStartExpanded`
-           * 	 - `TwoColumnsMidExpanded`
-           * 	 - `ThreeColumnsMidExpanded`
-           * 	 - `ThreeColumnsEndExpanded`
-           * 	 - `ThreeColumnsStartExpandedEndHidden`
-           * 	 - `ThreeColumnsMidExpandedEndHidden`
-           * 	 - `MidColumnFullScreen`
-           * 	 - `EndColumnFullScreen`
-           *
-           *  **For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns in
-           * 67%/33% proportion.
+           * 	 - `Auto`
+           * 	 - `Vertical`
+           * 	 - `Horizontal`
            *
-           * Default value is `OneColumn`.
+           * Default value is `Auto`.
            */
-          getLayout(): sap.ui.webc.fiori.FCLLayout;
+          getLayout(): sap.ui.webc.fiori.MediaGalleryLayout;
           /**
-           * Gets content of aggregation {@link #getMidColumn midColumn}.
+           * Gets current value of property {@link #getMenuHorizontalAlign menuHorizontalAlign}.
            *
-           * Defines the content in the middle column.
-           */
-          getMidColumn(): sap.ui.core.Control;
-          /**
-           * Returns if the `middle` column is visible.
-           */
-          getMidColumnVisible(): void;
-          /**
-           * Gets content of aggregation {@link #getStartColumn startColumn}.
+           * Determines the horizontal alignment of the thumbnails menu vs. the central display area.
            *
-           * Defines the content in the start column.
-           */
-          getStartColumn(): sap.ui.core.Control;
-          /**
-           * Returns if the `start` column is visible.
-           */
-          getStartColumnVisible(): void;
-          /**
-           * Returns the number of currently visible columns.
-           */
-          getVisibleColumns(): void;
-          /**
-           * Gets current value of property {@link #getWidth width}.
+           *  Available options are:
+           * 	 - `Left`
+           * 	 - `Right`
            *
-           * Defines the width of the control
+           * Default value is `Left`.
            */
-          getWidth(): sap.ui.core.CSSSize;
+          getMenuHorizontalAlign(): sap.ui.webc.fiori.MediaGalleryMenuHorizontalAlign;
           /**
-           * Sets a new value for property {@link #getAccessibilityTexts accessibilityTexts}.
+           * Gets current value of property {@link #getMenuVerticalAlign menuVerticalAlign}.
            *
-           * An object of strings that defines several additional accessibility texts for even further customization.
+           * Determines the vertical alignment of the thumbnails menu vs. the central display area.
            *
-           * It supports the following fields: - `startColumnAccessibleName`: the accessibility name for the `startColumn`
-           * region - `midColumnAccessibleName`: the accessibility name for the `midColumn` region - `endColumnAccessibleName`:
-           * the accessibility name for the `endColumn` region - `startArrowLeftText`: the text that the first arrow
-           * (between the `begin` and `mid` columns) will have when pointing to the left - `startArrowRightText`:
-           * the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the
-           * right - `endArrowLeftText`: the text that the second arrow (between the `mid` and `end` columns) will
-           * have when pointing to the left - `endArrowRightText`: the text that the second arrow (between the `mid`
-           * and `end` columns) will have when pointing to the right
+           *  Available options are:
+           * 	 - `Top`
+           * 	 - `Bottom`
            *
-           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           * Default value is `Bottom`.
+           */
+          getMenuVerticalAlign(): sap.ui.webc.fiori.MediaGalleryMenuVerticalAlign;
+          /**
+           * Gets current value of property {@link #getShowAllThumbnails showAllThumbnails}.
            *
-           * Default value is `{}`.
+           * If set to `true`, all thumbnails are rendered in a scrollable container. If `false`, only up to five
+           * thumbnails are rendered, followed by an overflow button that shows the count of the remaining thumbnails.
+           *
+           * Default value is `false`.
            */
-          setAccessibilityTexts(
+          getShowAllThumbnails(): boolean;
+          /**
+           * Checks for the provided `sap.ui.webc.fiori.IMediaGalleryItem` in the aggregation {@link #getItems items}.
+           * and returns its index if found or -1 otherwise.
+           */
+          indexOfItem(
             /**
-             * New value for property `accessibilityTexts`
+             * The item whose index is looked for
              */
-            oAccessibilityTexts?: object
-          ): this;
+            oItem: sap.ui.webc.fiori.IMediaGalleryItem
+          ): int;
           /**
-           * Sets the aggregated {@link #getEndColumn endColumn}.
+           * Inserts a item into the aggregation {@link #getItems items}.
            */
-          setEndColumn(
+          insertItem(
             /**
-             * The endColumn to set
+             * The item to insert; if empty, nothing is inserted
              */
-            oEndColumn: sap.ui.core.Control
+            oItem: sap.ui.webc.fiori.IMediaGalleryItem,
+            /**
+             * The `0`-based index the item should be inserted at; for a negative value of `iIndex`, the item is inserted
+             * at position 0; for a value greater than the current size of the aggregation, the item is inserted at
+             * the last position
+             */
+            iIndex: int
           ): this;
           /**
-           * Sets a new value for property {@link #getHeight height}.
-           *
-           * Defines the height of the control
+           * Removes all the controls from the aggregation {@link #getItems items}.
            *
-           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           * Additionally, it unregisters them from the hosting UIArea.
            */
-          setHeight(
+          removeAllItems(): sap.ui.webc.fiori.IMediaGalleryItem[];
+          /**
+           * Removes a item from the aggregation {@link #getItems items}.
+           */
+          removeItem(
             /**
-             * New value for property `height`
+             * The item to remove or its index or id
              */
-            sHeight?: sap.ui.core.CSSSize
-          ): this;
+            vItem: int | string | sap.ui.webc.fiori.IMediaGalleryItem
+          ): sap.ui.webc.fiori.IMediaGalleryItem;
           /**
-           * Sets a new value for property {@link #getHideArrows hideArrows}.
+           * Sets a new value for property {@link #getInteractiveDisplayArea interactiveDisplayArea}.
            *
-           * Defines the visibility of the arrows, used for expanding and shrinking the columns.
+           * If enabled, a `display-area-click` event is fired when the user clicks or taps on the display area.
+           *  The display area is the central area that contains the enlarged content of the currently selected item.
            *
            * When called with a value of `null` or `undefined`, the default value of the property will be restored.
            *
            * Default value is `false`.
            */
-          setHideArrows(
+          setInteractiveDisplayArea(
             /**
-             * New value for property `hideArrows`
+             * New value for property `interactiveDisplayArea`
              */
-            bHideArrows?: boolean
+            bInteractiveDisplayArea?: boolean
           ): this;
           /**
            * Sets a new value for property {@link #getLayout layout}.
            *
-           * Defines the columns layout and their proportion.
-           *
-           *  **Note:** The layout also depends on the screen size - one column for screens smaller than 599px, two
-           * columns between 599px and 1023px and three columns for sizes bigger than 1023px.
-           *
-           *  Available options are:
-           * 	 - `OneColumn`
-           * 	 - `TwoColumnsStartExpanded`
-           * 	 - `TwoColumnsMidExpanded`
-           * 	 - `ThreeColumnsMidExpanded`
-           * 	 - `ThreeColumnsEndExpanded`
-           * 	 - `ThreeColumnsStartExpandedEndHidden`
-           * 	 - `ThreeColumnsMidExpandedEndHidden`
-           * 	 - `MidColumnFullScreen`
-           * 	 - `EndColumnFullScreen`
+           * Determines the layout of the component.
            *
-           *  **For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns in
-           * 67%/33% proportion.
+           *  Available options are:
+           * 	 - `Auto`
+           * 	 - `Vertical`
+           * 	 - `Horizontal`
            *
            * When called with a value of `null` or `undefined`, the default value of the property will be restored.
            *
-           * Default value is `OneColumn`.
+           * Default value is `Auto`.
            */
           setLayout(
             /**
              * New value for property `layout`
              */
-            sLayout?: sap.ui.webc.fiori.FCLLayout
+            sLayout?: sap.ui.webc.fiori.MediaGalleryLayout
           ): this;
           /**
-           * Sets the aggregated {@link #getMidColumn midColumn}.
+           * Sets a new value for property {@link #getMenuHorizontalAlign menuHorizontalAlign}.
+           *
+           * Determines the horizontal alignment of the thumbnails menu vs. the central display area.
+           *
+           *  Available options are:
+           * 	 - `Left`
+           * 	 - `Right`
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `Left`.
            */
-          setMidColumn(
+          setMenuHorizontalAlign(
             /**
-             * The midColumn to set
+             * New value for property `menuHorizontalAlign`
              */
-            oMidColumn: sap.ui.core.Control
+            sMenuHorizontalAlign?: sap.ui.webc.fiori.MediaGalleryMenuHorizontalAlign
           ): this;
           /**
-           * Sets the aggregated {@link #getStartColumn startColumn}.
+           * Sets a new value for property {@link #getMenuVerticalAlign menuVerticalAlign}.
+           *
+           * Determines the vertical alignment of the thumbnails menu vs. the central display area.
+           *
+           *  Available options are:
+           * 	 - `Top`
+           * 	 - `Bottom`
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `Bottom`.
            */
-          setStartColumn(
+          setMenuVerticalAlign(
             /**
-             * The startColumn to set
+             * New value for property `menuVerticalAlign`
              */
-            oStartColumn: sap.ui.core.Control
+            sMenuVerticalAlign?: sap.ui.webc.fiori.MediaGalleryMenuVerticalAlign
           ): this;
           /**
-           * Sets a new value for property {@link #getWidth width}.
+           * Sets a new value for property {@link #getShowAllThumbnails showAllThumbnails}.
            *
-           * Defines the width of the control
+           * If set to `true`, all thumbnails are rendered in a scrollable container. If `false`, only up to five
+           * thumbnails are rendered, followed by an overflow button that shows the count of the remaining thumbnails.
            *
            * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `false`.
            */
-          setWidth(
+          setShowAllThumbnails(
             /**
-             * New value for property `width`
+             * New value for property `showAllThumbnails`
              */
-            sWidth?: sap.ui.core.CSSSize
+            bShowAllThumbnails?: boolean
           ): this;
         }
         /**
-         * @SINCE 1.95.0
-         * @EXPERIMENTAL (since 1.95.0)
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
          *
-         * Overview: An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging
-         * illustration, and conversational tone to better communicate an empty or a success state than just show
-         * a message alone.
+         * Overview: The `sap.ui.webc.fiori.MediaGalleryItem` web component represents the items displayed in the
+         * `sap.ui.webc.fiori.MediaGallery` web component.
          *
-         * Each illustration has default internationalised title and subtitle texts. Also they can be managed with
-         * `titleText` and `subtitleText` properties.
+         *  **Note:** `sap.ui.webc.fiori.MediaGalleryItem` is not supported when used outside of `sap.ui.webc.fiori.MediaGallery`.
          *
-         * Structure: The IllustratedMessage consists of the following elements, which are displayed below each
-         * other in the following order:
          *
          *
          *
-         * 	 - Illustration
-         * 	 - Title
-         * 	 - Subtitle
-         * 	 - Actions
+         * Keyboard Handling: The `sap.ui.webc.fiori.MediaGallery` provides advanced keyboard handling. When focused,
+         * the user can use the following keyboard shortcuts in order to perform a navigation:
          *
-         * Usage: `sap.ui.webc.fiori.IllustratedMessage` is meant to be used inside container component, for example
-         * a `sap.ui.webc.main.Card`, a `sap.ui.webc.main.Dialog` or a `sap.ui.webc.fiori.Page`
+         *
+         *
+         * 	 - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
          */
-        class IllustratedMessage extends sap.ui.webc.common.WebComponent {
+        class MediaGalleryItem
+          extends sap.ui.webc.common.WebComponent
+          implements sap.ui.webc.fiori.IMediaGalleryItem {
+          __implements__sap_ui_webc_fiori_IMediaGalleryItem: boolean;
           /**
-           * Constructor for a new `IllustratedMessage`.
+           * Constructor for a new `MediaGalleryItem`.
            *
            * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
            * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
@@ -2674,10 +4242,10 @@ declare namespace sap {
             /**
              * Initial settings for the new control
              */
-            mSettings?: sap.ui.webc.fiori.$IllustratedMessageSettings
+            mSettings?: sap.ui.webc.fiori.$MediaGalleryItemSettings
           );
           /**
-           * Constructor for a new `IllustratedMessage`.
+           * Constructor for a new `MediaGalleryItem`.
            *
            * Accepts an object literal `mSettings` that defines initial property values, aggregated and associated
            * objects as well as event handlers. See {@link sap.ui.base.ManagedObject#constructor} for a general description
@@ -2691,11 +4259,11 @@ declare namespace sap {
             /**
              * Initial settings for the new control
              */
-            mSettings?: sap.ui.webc.fiori.$IllustratedMessageSettings
+            mSettings?: sap.ui.webc.fiori.$MediaGalleryItemSettings
           );
 
           /**
-           * Creates a new subclass of class sap.ui.webc.fiori.IllustratedMessage with name `sClassName` and enriches
+           * Creates a new subclass of class sap.ui.webc.fiori.MediaGalleryItem with name `sClassName` and enriches
            * it with the information contained in `oClassInfo`.
            *
            * `oClassInfo` might contain the same kind of information as described in {@link sap.ui.webc.common.WebComponent.extend}.
@@ -2708,7 +4276,7 @@ declare namespace sap {
             /**
              * Object literal with information about the class
              */
-            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.IllustratedMessage>,
+            oClassInfo?: sap.ClassInfo<T, sap.ui.webc.fiori.MediaGalleryItem>,
             /**
              * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
              * used by this class
@@ -2716,166 +4284,203 @@ declare namespace sap {
             FNMetaImpl?: Function
           ): Function;
           /**
-           * Returns a metadata object for class sap.ui.webc.fiori.IllustratedMessage.
+           * Returns a metadata object for class sap.ui.webc.fiori.MediaGalleryItem.
            */
           static getMetadata(): sap.ui.webc.common.WebComponentMetadata;
           /**
-           * Adds some action to the aggregation {@link #getActions actions}.
+           * Adds some content to the aggregation {@link #getContent content}.
            */
-          addAction(
+          addContent(
             /**
-             * The action to add; if empty, nothing is inserted
+             * The content to add; if empty, nothing is inserted
              */
-            oAction: sap.ui.webc.main.IButton
+            oContent: sap.ui.core.Control
           ): this;
           /**
-           * Destroys all the actions in the aggregation {@link #getActions actions}.
+           * Adds some thumbnail to the aggregation {@link #getThumbnail thumbnail}.
            */
-          destroyActions(): this;
+          addThumbnail(
+            /**
+             * The thumbnail to add; if empty, nothing is inserted
+             */
+            oThumbnail: sap.ui.core.Control
+          ): this;
           /**
-           * Destroys the subtitle in the aggregation {@link #getSubtitle subtitle}.
+           * Destroys all the content in the aggregation {@link #getContent content}.
            */
-          destroySubtitle(): this;
+          destroyContent(): this;
           /**
-           * Gets content of aggregation {@link #getActions actions}.
-           *
-           * Defines the component actions.
+           * Destroys all the thumbnail in the aggregation {@link #getThumbnail thumbnail}.
            */
-          getActions(): sap.ui.webc.main.IButton[];
+          destroyThumbnail(): this;
           /**
-           * Gets current value of property {@link #getName name}.
+           * Gets content of aggregation {@link #getContent content}.
            *
-           * Default value is `BeforeSearch`.
+           * Defines the content of the component.
            */
-          getName(): sap.ui.webc.fiori.IllustrationMessageType;
+          getContent(): sap.ui.core.Control[];
           /**
-           * Gets content of aggregation {@link #getSubtitle subtitle}.
+           * Gets current value of property {@link #getDisabled disabled}.
            *
-           * Defines the subtitle of the component.
+           * Defines whether the component is in disabled state.
            *
-           *  **Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText`
-           * property will be overwritten.
+           * Default value is `false`.
            */
-          getSubtitle(): sap.ui.core.Control;
+          getDisabled(): boolean;
           /**
-           * Gets current value of property {@link #getSubtitleText subtitleText}.
-           *
-           * Defines the subtitle of the component.
+           * Gets current value of property {@link #getLayout layout}.
            *
-           *  **Note:** Using this property, the default subtitle text of illustration will be overwritten.
+           * Determines the layout of the item container.
            *
-           *  **Note:** Using `subtitle` slot, the default of this property will be overwritten.
+           *  Available options are:
+           * 	 - `Square`
+           * 	 - `Wide`
            *
-           * Default value is `empty string`.
+           * Default value is `Square`.
            */
-          getSubtitleText(): string;
+          getLayout(): sap.ui.webc.fiori.MediaGalleryItemLayout;
           /**
-           * Gets current value of property {@link #getTitleText titleText}.
+           * Gets current value of property {@link #getSelected selected}.
            *
-           * Defines the title of the component.
+           * Defines the selected state of the component.
            *
-           *  **Note:** Using this property, the default title text of illustration will be overwritten.
+           * Default value is `false`.
+           */
+          getSelected(): boolean;
+          /**
+           * Gets content of aggregation {@link #getThumbnail thumbnail}.
            *
-           * Default value is `empty string`.
+           * Defines the content of the thumbnail.
            */
-          getTitleText(): string;
+          getThumbnail(): sap.ui.core.Control[];
           /**
-           * Checks for the provided `sap.ui.webc.main.IButton` in the aggregation {@link #getActions actions}. and
+           * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getContent content}. and returns
+           * its index if found or -1 otherwise.
+           */
+          indexOfContent(
+            /**
+             * The content whose index is looked for
+             */
+            oContent: sap.ui.core.Control
+          ): int;
+          /**
+           * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getThumbnail thumbnail}. and
            * returns its index if found or -1 otherwise.
            */
-          indexOfAction(
+          indexOfThumbnail(
             /**
-             * The action whose index is looked for
+             * The thumbnail whose index is looked for
              */
-            oAction: sap.ui.webc.main.IButton
+            oThumbnail: sap.ui.core.Control
           ): int;
           /**
-           * Inserts a action into the aggregation {@link #getActions actions}.
+           * Inserts a content into the aggregation {@link #getContent content}.
            */
-          insertAction(
+          insertContent(
             /**
-             * The action to insert; if empty, nothing is inserted
+             * The content to insert; if empty, nothing is inserted
              */
-            oAction: sap.ui.webc.main.IButton,
+            oContent: sap.ui.core.Control,
             /**
-             * The `0`-based index the action should be inserted at; for a negative value of `iIndex`, the action is
-             * inserted at position 0; for a value greater than the current size of the aggregation, the action is inserted
-             * at the last position
+             * The `0`-based index the content should be inserted at; for a negative value of `iIndex`, the content
+             * is inserted at position 0; for a value greater than the current size of the aggregation, the content
+             * is inserted at the last position
              */
             iIndex: int
           ): this;
           /**
-           * Removes a action from the aggregation {@link #getActions actions}.
+           * Inserts a thumbnail into the aggregation {@link #getThumbnail thumbnail}.
            */
-          removeAction(
+          insertThumbnail(
             /**
-             * The action to remove or its index or id
+             * The thumbnail to insert; if empty, nothing is inserted
              */
-            vAction: int | string | sap.ui.webc.main.IButton
-          ): sap.ui.webc.main.IButton;
+            oThumbnail: sap.ui.core.Control,
+            /**
+             * The `0`-based index the thumbnail should be inserted at; for a negative value of `iIndex`, the thumbnail
+             * is inserted at position 0; for a value greater than the current size of the aggregation, the thumbnail
+             * is inserted at the last position
+             */
+            iIndex: int
+          ): this;
           /**
-           * Removes all the controls from the aggregation {@link #getActions actions}.
+           * Removes all the controls from the aggregation {@link #getContent content}.
            *
            * Additionally, it unregisters them from the hosting UIArea.
            */
-          removeAllActions(): sap.ui.webc.main.IButton[];
+          removeAllContent(): sap.ui.core.Control[];
           /**
-           * Sets a new value for property {@link #getName name}.
-           *
-           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           * Removes all the controls from the aggregation {@link #getThumbnail thumbnail}.
            *
-           * Default value is `BeforeSearch`.
+           * Additionally, it unregisters them from the hosting UIArea.
            */
-          setName(
+          removeAllThumbnail(): sap.ui.core.Control[];
+          /**
+           * Removes a content from the aggregation {@link #getContent content}.
+           */
+          removeContent(
             /**
-             * New value for property `name`
+             * The content to remove or its index or id
              */
-            sName?: sap.ui.webc.fiori.IllustrationMessageType
-          ): this;
+            vContent: int | string | sap.ui.core.Control
+          ): sap.ui.core.Control;
           /**
-           * Sets the aggregated {@link #getSubtitle subtitle}.
+           * Removes a thumbnail from the aggregation {@link #getThumbnail thumbnail}.
            */
-          setSubtitle(
+          removeThumbnail(
             /**
-             * The subtitle to set
+             * The thumbnail to remove or its index or id
              */
-            oSubtitle: sap.ui.core.Control
-          ): this;
+            vThumbnail: int | string | sap.ui.core.Control
+          ): sap.ui.core.Control;
           /**
-           * Sets a new value for property {@link #getSubtitleText subtitleText}.
+           * Sets a new value for property {@link #getDisabled disabled}.
            *
-           * Defines the subtitle of the component.
+           * Defines whether the component is in disabled state.
            *
-           *  **Note:** Using this property, the default subtitle text of illustration will be overwritten.
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
            *
-           *  **Note:** Using `subtitle` slot, the default of this property will be overwritten.
+           * Default value is `false`.
+           */
+          setDisabled(
+            /**
+             * New value for property `disabled`
+             */
+            bDisabled?: boolean
+          ): this;
+          /**
+           * Sets a new value for property {@link #getLayout layout}.
+           *
+           * Determines the layout of the item container.
+           *
+           *  Available options are:
+           * 	 - `Square`
+           * 	 - `Wide`
            *
            * When called with a value of `null` or `undefined`, the default value of the property will be restored.
            *
-           * Default value is `empty string`.
+           * Default value is `Square`.
            */
-          setSubtitleText(
+          setLayout(
             /**
-             * New value for property `subtitleText`
+             * New value for property `layout`
              */
-            sSubtitleText?: string
+            sLayout?: sap.ui.webc.fiori.MediaGalleryItemLayout
           ): this;
           /**
-           * Sets a new value for property {@link #getTitleText titleText}.
-           *
-           * Defines the title of the component.
+           * Sets a new value for property {@link #getSelected selected}.
            *
-           *  **Note:** Using this property, the default title text of illustration will be overwritten.
+           * Defines the selected state of the component.
            *
            * When called with a value of `null` or `undefined`, the default value of the property will be restored.
            *
-           * Default value is `empty string`.
+           * Default value is `false`.
            */
-          setTitleText(
+          setSelected(
             /**
-             * New value for property `titleText`
+             * New value for property `selected`
              */
-            sTitleText?: string
+            bSelected?: boolean
           ): this;
         }
         /**
@@ -4200,34 +5805,16 @@ declare namespace sap {
              */
             oContent: sap.ui.core.Control
           ): this;
-          /**
-           * Adds some footer to the aggregation {@link #getFooter footer}.
-           */
-          addFooter(
-            /**
-             * The footer to add; if empty, nothing is inserted
-             */
-            oFooter: sap.ui.core.Control
-          ): this;
-          /**
-           * Adds some header to the aggregation {@link #getHeader header}.
-           */
-          addHeader(
-            /**
-             * The header to add; if empty, nothing is inserted
-             */
-            oHeader: sap.ui.core.Control
-          ): this;
           /**
            * Destroys all the content in the aggregation {@link #getContent content}.
            */
           destroyContent(): this;
           /**
-           * Destroys all the footer in the aggregation {@link #getFooter footer}.
+           * Destroys the footer in the aggregation {@link #getFooter footer}.
            */
           destroyFooter(): this;
           /**
-           * Destroys all the header in the aggregation {@link #getHeader header}.
+           * Destroys the header in the aggregation {@link #getHeader header}.
            */
           destroyHeader(): this;
           /**
@@ -4276,13 +5863,13 @@ declare namespace sap {
            *
            * Defines the footer HTML Element.
            */
-          getFooter(): sap.ui.core.Control[];
+          getFooter(): sap.ui.webc.fiori.IBar;
           /**
            * Gets content of aggregation {@link #getHeader header}.
            *
            * Defines the header HTML Element.
            */
-          getHeader(): sap.ui.core.Control[];
+          getHeader(): sap.ui.webc.fiori.IBar;
           /**
            * Gets current value of property {@link #getHeight height}.
            *
@@ -4300,38 +5887,18 @@ declare namespace sap {
           /**
            * Gets current value of property {@link #getWidth width}.
            *
-           * Defines the width of the control
-           */
-          getWidth(): sap.ui.core.CSSSize;
-          /**
-           * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getContent content}. and returns
-           * its index if found or -1 otherwise.
-           */
-          indexOfContent(
-            /**
-             * The content whose index is looked for
-             */
-            oContent: sap.ui.core.Control
-          ): int;
-          /**
-           * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getFooter footer}. and returns
-           * its index if found or -1 otherwise.
-           */
-          indexOfFooter(
-            /**
-             * The footer whose index is looked for
-             */
-            oFooter: sap.ui.core.Control
-          ): int;
+           * Defines the width of the control
+           */
+          getWidth(): sap.ui.core.CSSSize;
           /**
-           * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getHeader header}. and returns
+           * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getContent content}. and returns
            * its index if found or -1 otherwise.
            */
-          indexOfHeader(
+          indexOfContent(
             /**
-             * The header whose index is looked for
+             * The content whose index is looked for
              */
-            oHeader: sap.ui.core.Control
+            oContent: sap.ui.core.Control
           ): int;
           /**
            * Inserts a content into the aggregation {@link #getContent content}.
@@ -4348,54 +5915,12 @@ declare namespace sap {
              */
             iIndex: int
           ): this;
-          /**
-           * Inserts a footer into the aggregation {@link #getFooter footer}.
-           */
-          insertFooter(
-            /**
-             * The footer to insert; if empty, nothing is inserted
-             */
-            oFooter: sap.ui.core.Control,
-            /**
-             * The `0`-based index the footer should be inserted at; for a negative value of `iIndex`, the footer is
-             * inserted at position 0; for a value greater than the current size of the aggregation, the footer is inserted
-             * at the last position
-             */
-            iIndex: int
-          ): this;
-          /**
-           * Inserts a header into the aggregation {@link #getHeader header}.
-           */
-          insertHeader(
-            /**
-             * The header to insert; if empty, nothing is inserted
-             */
-            oHeader: sap.ui.core.Control,
-            /**
-             * The `0`-based index the header should be inserted at; for a negative value of `iIndex`, the header is
-             * inserted at position 0; for a value greater than the current size of the aggregation, the header is inserted
-             * at the last position
-             */
-            iIndex: int
-          ): this;
           /**
            * Removes all the controls from the aggregation {@link #getContent content}.
            *
            * Additionally, it unregisters them from the hosting UIArea.
            */
           removeAllContent(): sap.ui.core.Control[];
-          /**
-           * Removes all the controls from the aggregation {@link #getFooter footer}.
-           *
-           * Additionally, it unregisters them from the hosting UIArea.
-           */
-          removeAllFooter(): sap.ui.core.Control[];
-          /**
-           * Removes all the controls from the aggregation {@link #getHeader header}.
-           *
-           * Additionally, it unregisters them from the hosting UIArea.
-           */
-          removeAllHeader(): sap.ui.core.Control[];
           /**
            * Removes a content from the aggregation {@link #getContent content}.
            */
@@ -4405,24 +5930,6 @@ declare namespace sap {
              */
             vContent: int | string | sap.ui.core.Control
           ): sap.ui.core.Control;
-          /**
-           * Removes a footer from the aggregation {@link #getFooter footer}.
-           */
-          removeFooter(
-            /**
-             * The footer to remove or its index or id
-             */
-            vFooter: int | string | sap.ui.core.Control
-          ): sap.ui.core.Control;
-          /**
-           * Removes a header from the aggregation {@link #getHeader header}.
-           */
-          removeHeader(
-            /**
-             * The header to remove or its index or id
-             */
-            vHeader: int | string | sap.ui.core.Control
-          ): sap.ui.core.Control;
           /**
            * Sets a new value for property {@link #getBackgroundDesign backgroundDesign}.
            *
@@ -4479,6 +5986,24 @@ declare namespace sap {
              */
             bFloatingFooter?: boolean
           ): this;
+          /**
+           * Sets the aggregated {@link #getFooter footer}.
+           */
+          setFooter(
+            /**
+             * The footer to set
+             */
+            oFooter: sap.ui.webc.fiori.IBar
+          ): this;
+          /**
+           * Sets the aggregated {@link #getHeader header}.
+           */
+          setHeader(
+            /**
+             * The header to set
+             */
+            oHeader: sap.ui.webc.fiori.IBar
+          ): this;
           /**
            * Sets a new value for property {@link #getHeight height}.
            *
@@ -4979,6 +6504,8 @@ declare namespace sap {
          * allow developers to style elements inside the Shadow DOM.
          *  The `sap.ui.webc.fiori.ShellBar` exposes the following CSS Shadow Parts:
          * 	 - root - Used to style the outermost wrapper of the `sap.ui.webc.fiori.ShellBar`
+         *
+         * Keyboard Handling:
          */
         class ShellBar extends sap.ui.webc.common.WebComponent {
           /**
@@ -5143,7 +6670,7 @@ declare namespace sap {
            * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
            * otherwise it will be bound to this `sap.ui.webc.fiori.ShellBar` itself.
            *
-           * Fired, when a menu item is activated **Note:** You can prevent closing of oveflow popover by calling
+           * Fired, when a menu item is activated **Note:** You can prevent closing of overflow popover by calling
            * `event.preventDefault()`.
            */
           attachMenuItemClick(
@@ -5167,7 +6694,7 @@ declare namespace sap {
            * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
            * otherwise it will be bound to this `sap.ui.webc.fiori.ShellBar` itself.
            *
-           * Fired, when a menu item is activated **Note:** You can prevent closing of oveflow popover by calling
+           * Fired, when a menu item is activated **Note:** You can prevent closing of overflow popover by calling
            * `event.preventDefault()`.
            */
           attachMenuItemClick(
@@ -5230,7 +6757,7 @@ declare namespace sap {
            * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
            * otherwise it will be bound to this `sap.ui.webc.fiori.ShellBar` itself.
            *
-           * Fired, when the product switch icon is activated. **Note:** You can prevent closing of oveflow popover
+           * Fired, when the product switch icon is activated. **Note:** You can prevent closing of overflow popover
            * by calling `event.preventDefault()`.
            */
           attachProductSwitchClick(
@@ -5255,7 +6782,7 @@ declare namespace sap {
            * When called, the context of the event handler (its `this`) will be bound to `oListener` if specified,
            * otherwise it will be bound to this `sap.ui.webc.fiori.ShellBar` itself.
            *
-           * Fired, when the product switch icon is activated. **Note:** You can prevent closing of oveflow popover
+           * Fired, when the product switch icon is activated. **Note:** You can prevent closing of overflow popover
            * by calling `event.preventDefault()`.
            */
           attachProductSwitchClick(
@@ -5521,6 +7048,17 @@ declare namespace sap {
               targetRef?: HTMLElement;
             }
           ): this;
+          /**
+           * Gets current value of property {@link #getAccessibilityTexts accessibilityTexts}.
+           *
+           * An object of strings that defines several additional accessibility texts for even further customization.
+           *
+           * It supports the following fields: - `profileButtonTitle`: defines the tooltip for the profile button
+           * - `logoTitle`: defines the tooltip for the logo
+           *
+           * Default value is `{}`.
+           */
+          getAccessibilityTexts(): object;
           /**
            * Returns the `copilot` DOM ref.
            */
@@ -5725,6 +7263,24 @@ declare namespace sap {
              */
             vMenuItem: int | string | sap.ui.webc.main.IListItem
           ): sap.ui.webc.main.IListItem;
+          /**
+           * Sets a new value for property {@link #getAccessibilityTexts accessibilityTexts}.
+           *
+           * An object of strings that defines several additional accessibility texts for even further customization.
+           *
+           * It supports the following fields: - `profileButtonTitle`: defines the tooltip for the profile button
+           * - `logoTitle`: defines the tooltip for the logo
+           *
+           * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+           *
+           * Default value is `{}`.
+           */
+          setAccessibilityTexts(
+            /**
+             * New value for property `accessibilityTexts`
+             */
+            oAccessibilityTexts?: object
+          ): this;
           /**
            * Sets the aggregated {@link #getLogo logo}.
            */
@@ -6085,6 +7641,8 @@ declare namespace sap {
          * components to build your menu. The items can consist of text only or an icon with text. The use or non-use
          * of icons must be consistent for all items on one level. You must not combine entries with and without
          * icons on the same level. We strongly recommend that you do not use icons on the second level.
+         *
+         * Keyboard Handling:
          */
         class SideNavigation extends sap.ui.webc.common.WebComponent {
           /**
@@ -9090,6 +10648,16 @@ declare namespace sap {
          * **Note:** If no selected step is defined, the first step will be auto selected.
          *  **Note:** If multiple selected steps are defined, the last step will be selected.
          *
+         * Keyboard Handling: The user can navigate using the following keyboard shortcuts:
+         *
+         *
+         * Wizard Progress Navigation:
+         * 	 - [LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.
+         * 	 - [UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.
+         * 	 - [SPACE] or [ENTER], [RETURN] - Selects an active step
+         * 	 - [HOME] or [PAGE UP] - Focus goes to the first step
+         * 	 - [END] or [PAGE DOWN] - Focus goes to the last step
+         *
          * Content: The content occupies the main part of the page. It can hold any type of HTML elements. It's
          * defined by using the `sap.ui.webc.fiori.WizardStep` as slotted element within the `sap.ui.webc.fiori.Wizard`.
          *
@@ -9794,41 +11362,201 @@ declare namespace sap {
          */
         enum IllustrationMessageType {
           /**
-           * "BeforeSearch" illustration type.
+           * "Add Column" illustration type.
+           */
+          AddColumn = "AddColumn",
+          /**
+           * "Add People" illustration type.
+           */
+          AddPeople = "AddPeople",
+          /**
+           * "Balloon Sky" illustration type.
+           */
+          BalloonSky = "BalloonSky",
+          /**
+           * "Before Search" illustration type.
            */
           BeforeSearch = "BeforeSearch",
           /**
-           * "NoActivities" illustration type.
+           * "Connection" illustration type.
+           */
+          Connection = "Connection",
+          /**
+           * "Empty Calendar" illustration type.
+           */
+          EmptyCalendar = "EmptyCalendar",
+          /**
+           * "Empty List" illustration type.
+           */
+          EmptyList = "EmptyList",
+          /**
+           * "Empty Planning Calendar" illustration type.
+           */
+          EmptyPlanningCalendar = "EmptyPlanningCalendar",
+          /**
+           * "Error Screen" illustration type.
+           */
+          ErrorScreen = "ErrorScreen",
+          /**
+           * "Filter Table" illustration type.
+           */
+          FilterTable = "FilterTable",
+          /**
+           * "Group Table" illustration type.
+           */
+          GroupTable = "GroupTable",
+          /**
+           * "No Activities" illustration type.
            */
           NoActivities = "NoActivities",
           /**
-           * "NoData" illustration type.
+           * "No Data" illustration type.
            */
           NoData = "NoData",
           /**
-           * "NoEntries" illustration type.
+           * "No Entries" illustration type.
            */
           NoEntries = "NoEntries",
           /**
-           * "NoMail" illustration type.
+           * "No Filter Results" illustration type.
+           */
+          NoFilterResults = "NoFilterResults",
+          /**
+           * "No Email" illustration type.
            */
           NoMail = "NoMail",
           /**
-           * "NoNotifications" illustration type.
+           * "No Email v1" illustration type.
+           */
+          NoMail_v1 = "NoMail_v1",
+          /**
+           * "No Notifications" illustration type.
            */
           NoNotifications = "NoNotifications",
           /**
-           * "NoSavedItems" illustration type.
+           * "No Saved Items" illustration type.
            */
           NoSavedItems = "NoSavedItems",
           /**
-           * "NoSearchResults" illustration type.
+           * "No Saved Items v1" illustration type.
+           */
+          NoSavedItems_v1 = "NoSavedItems_v1",
+          /**
+           * "No Search Results" illustration type.
            */
           NoSearchResults = "NoSearchResults",
           /**
-           * "NoTasks" illustration type.
+           * "No Tasks" illustration type.
            */
           NoTasks = "NoTasks",
+          /**
+           * "No Tasks v1" illustration type.
+           */
+          NoTasks_v1 = "NoTasks_v1",
+          /**
+           * "Page Not Found" illustration type.
+           */
+          PageNotFound = "PageNotFound",
+          /**
+           * "Reload Screen" illustration type.
+           */
+          ReloadScreen = "ReloadScreen",
+          /**
+           * "Resize Column" illustration type.
+           */
+          ResizeColumn = "ResizeColumn",
+          /**
+           * "Search Earth" illustration type.
+           */
+          SearchEarth = "SearchEarth",
+          /**
+           * "Search Folder" illustration type.
+           */
+          SearchFolder = "SearchFolder",
+          /**
+           * "Simple Balloon" illustration type.
+           */
+          SimpleBalloon = "SimpleBalloon",
+          /**
+           * "Simple Bell" illustration type.
+           */
+          SimpleBell = "SimpleBell",
+          /**
+           * "Simple Calendar" illustration type.
+           */
+          SimpleCalendar = "SimpleCalendar",
+          /**
+           * "Simple CheckMark" illustration type.
+           */
+          SimpleCheckMark = "SimpleCheckMark",
+          /**
+           * "Simple Connection" illustration type.
+           */
+          SimpleConnection = "SimpleConnection",
+          /**
+           * "Simple Empty Doc" illustration type.
+           */
+          SimpleEmptyDoc = "SimpleEmptyDoc",
+          /**
+           * "Simple Empty List" illustration type.
+           */
+          SimpleEmptyList = "SimpleEmptyList",
+          /**
+           * "Simple Error" illustration type.
+           */
+          SimpleError = "SimpleError",
+          /**
+           * "Simple Magnifier" illustration type.
+           */
+          SimpleMagnifier = "SimpleMagnifier",
+          /**
+           * "Simple Mail" illustration type.
+           */
+          SimpleMail = "SimpleMail",
+          /**
+           * "Simple No Saved Items" illustration type.
+           */
+          SimpleNoSavedItems = "SimpleNoSavedItems",
+          /**
+           * "Simple Not Found Magnifier" illustration type.
+           */
+          SimpleNotFoundMagnifier = "SimpleNotFoundMagnifier",
+          /**
+           * "Simple Reload" illustration type.
+           */
+          SimpleReload = "SimpleReload",
+          /**
+           * "Simple Task" illustration type.
+           */
+          SimpleTask = "SimpleTask",
+          /**
+           * "Sleeping Bell" illustration type.
+           */
+          SleepingBell = "SleepingBell",
+          /**
+           * "Sort Column" illustration type.
+           */
+          SortColumn = "SortColumn",
+          /**
+           * "Success Balloon" illustration type.
+           */
+          SuccessBalloon = "SuccessBalloon",
+          /**
+           * "Success CheckMark" illustration type.
+           */
+          SuccessCheckMark = "SuccessCheckMark",
+          /**
+           * "Success HighFive" illustration type.
+           */
+          SuccessHighFive = "SuccessHighFive",
+          /**
+           * "Success Screen" illustration type.
+           */
+          SuccessScreen = "SuccessScreen",
+          /**
+           * "Tent" illustration type.
+           */
+          Tent = "Tent",
           /**
            * "TntCodePlaceholder" illustration type.
            */
@@ -9902,13 +11630,93 @@ declare namespace sap {
            */
           TntUnsuccessfulAuth = "TntUnsuccessfulAuth",
           /**
-           * "UnableToLoad" illustration type.
+           * "Unable To Load" illustration type.
            */
           UnableToLoad = "UnableToLoad",
           /**
-           * "UnableToUpload" illustration type.
+           * "Unable To Load Image" illustration type.
+           */
+          UnableToLoadImage = "UnableToLoadImage",
+          /**
+           * "Unable To Upload" illustration type.
            */
           UnableToUpload = "UnableToUpload",
+          /**
+           * "Upload Collection" illustration type.
+           */
+          UploadCollection = "UploadCollection",
+        }
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * Defines the layout of the content displayed in the `ui5-media-gallery-item`.
+         */
+        enum MediaGalleryItemLayout {
+          /**
+           * Recommended to use when the item contains an image.
+           *  When a thumbnail is selected, it makes the corresponding enlarged content appear in a square display
+           * area.
+           */
+          Square = "Square",
+          /**
+           * Recommended to use when the item contains video content.
+           *  When a thumbnail is selected, it makes the corresponding enlarged content appear in a wide display area
+           * (stretched to fill all of the available width) for optimal user experiance.
+           */
+          Wide = "Wide",
+        }
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * Defines the layout type of the thumbnails list of the `ui5-media-gallery` component.
+         */
+        enum MediaGalleryLayout {
+          /**
+           * The layout is determined automatically.
+           */
+          Auto = "Auto",
+          /**
+           * Displays the layout as a horizontal split between the thumbnails list and the selected image.
+           */
+          Horizontal = "Horizontal",
+          /**
+           * Displays the layout as a vertical split between the thumbnails list and the selected image.
+           */
+          Vertical = "Vertical",
+        }
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * Defines the horizontal alignment of the thumbnails menu of the `ui5-media-gallery` component.
+         */
+        enum MediaGalleryMenuHorizontalAlign {
+          /**
+           * Displays the menu on the left side of the target.
+           */
+          Left = "Left",
+          /**
+           * Displays the menu on the right side of the target.
+           */
+          Right = "Right",
+        }
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * Types for the vertical alignment of the thumbnails menu of the `ui5-media-gallery` component.
+         */
+        enum MediaGalleryMenuVerticalAlign {
+          /**
+           * Displays the menu at the bottom of the reference control.
+           */
+          Bottom = "Bottom",
+          /**
+           * Displays the menu at the top of the reference control.
+           */
+          Top = "Top",
         }
         /**
          * @SINCE 1.92.0
@@ -9930,6 +11738,76 @@ declare namespace sap {
            */
           Transparent = "Transparent",
         }
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * SideContent FallDown options.
+         */
+        enum SideContentFallDown {
+          /**
+           * Side content falls down on breakpoints below L
+           */
+          BelowL = "BelowL",
+          /**
+           * Side content falls down on breakpoints below M
+           */
+          BelowM = "BelowM",
+          /**
+           * Side content falls down on breakpoints below XL
+           */
+          BelowXL = "BelowXL",
+          /**
+           * Side content falls down on breakpoint M and the minimum width for the side content
+           */
+          OnMinimumWidth = "OnMinimumWidth",
+        }
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * Side Content position options.
+         */
+        enum SideContentPosition {
+          /**
+           * The side content is on the right side of the main container in left-to-right mode and on the left side
+           * in right-to-left mode.
+           */
+          End = "End",
+          /**
+           * The side content is on the left side of the main container in left-to-right mode and on the right side
+           * in right-to-left mode.
+           */
+          Start = "Start",
+        }
+        /**
+         * @SINCE 1.99.0
+         * @EXPERIMENTAL (since 1.99.0)
+         *
+         * Side Content visibility options.
+         */
+        enum SideContentVisibility {
+          /**
+           * Show the side content on any breakpoint
+           */
+          AlwaysShow = "AlwaysShow",
+          /**
+           * Don't show the side content on any breakpoints
+           */
+          NeverShow = "NeverShow",
+          /**
+           * Show the side content on XL breakpoint
+           */
+          ShowAboveL = "ShowAboveL",
+          /**
+           * Show the side content on L and XL breakpoints
+           */
+          ShowAboveM = "ShowAboveM",
+          /**
+           * Show the side content on M, L and XL breakpoints
+           */
+          ShowAboveS = "ShowAboveS",
+        }
         /**
          * @SINCE 1.92.0
          * @EXPERIMENTAL (since 1.92.0)
@@ -9979,6 +11857,8 @@ declare namespace sap {
 
     "sap/ui/webc/fiori/BarcodeScannerDialog": undefined;
 
+    "sap/ui/webc/fiori/DynamicSideContent": undefined;
+
     "sap/ui/webc/fiori/FilterItem": undefined;
 
     "sap/ui/webc/fiori/FilterItemOption": undefined;
@@ -9989,6 +11869,10 @@ declare namespace sap {
 
     "sap/ui/webc/fiori/library": undefined;
 
+    "sap/ui/webc/fiori/MediaGallery": undefined;
+
+    "sap/ui/webc/fiori/MediaGalleryItem": undefined;
+
     "sap/ui/webc/fiori/NotificationAction": undefined;
 
     "sap/ui/webc/fiori/NotificationListGroupItem": undefined;