@openui5/ts-types-esm 1.98.0 → 1.101.0

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

@@ -1,4 +1,4 @@
-// For Library Version: 1.98.0
+// For Library Version: 1.101.0
 
 declare module "sap/ui/webc/fiori/library" {
   /**
@@ -98,6 +98,16 @@ declare module "sap/ui/webc/fiori/library" {
      */
     TwoColumnsStartExpanded = "TwoColumnsStartExpanded",
   }
+  /**
+   * @SINCE 1.99.0
+   * @EXPERIMENTAL (since 1.99.0)
+   *
+   * Interface for components that may be slotted inside `ui5-page` as header and footer.
+   */
+  export interface IBar {
+    __implements__sap_ui_webc_fiori_IBar: boolean;
+  }
+
   /**
    * @SINCE 1.97.0
    * @EXPERIMENTAL (since 1.97.0)
@@ -126,41 +136,241 @@ declare module "sap/ui/webc/fiori/library" {
    */
   export 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",
+    /**
+     * "TntChartArea" illustration type.
+     */
+    TntChartArea = "TntChartArea",
+    /**
+     * "TntChartArea2" illustration type.
+     */
+    TntChartArea2 = "TntChartArea2",
+    /**
+     * "TntChartBar" illustration type.
+     */
+    TntChartBar = "TntChartBar",
+    /**
+     * "TntChartBPMNFlow" illustration type.
+     */
+    TntChartBPMNFlow = "TntChartBPMNFlow",
+    /**
+     * "TntChartBullet" illustration type.
+     */
+    TntChartBullet = "TntChartBullet",
+    /**
+     * "TntChartDoughnut" illustration type.
+     */
+    TntChartDoughnut = "TntChartDoughnut",
+    /**
+     * "TntChartFlow" illustration type.
+     */
+    TntChartFlow = "TntChartFlow",
+    /**
+     * "TntChartGantt" illustration type.
+     */
+    TntChartGantt = "TntChartGantt",
+    /**
+     * "TntChartOrg" illustration type.
+     */
+    TntChartOrg = "TntChartOrg",
+    /**
+     * "TntChartPie" illustration type.
+     */
+    TntChartPie = "TntChartPie",
     /**
      * "TntCodePlaceholder" illustration type.
      */
@@ -169,6 +379,10 @@ declare module "sap/ui/webc/fiori/library" {
      * "TntCompany" illustration type.
      */
     TntCompany = "TntCompany",
+    /**
+     * "TntComponents" illustration type.
+     */
+    TntComponents = "TntComponents",
     /**
      * "TntExternalLink" illustration type.
      */
@@ -205,6 +419,10 @@ declare module "sap/ui/webc/fiori/library" {
      * "TntRadar" illustration type.
      */
     TntRadar = "TntRadar",
+    /**
+     * "TntSecrets" illustration type.
+     */
+    TntSecrets = "TntSecrets",
     /**
      * "TntServices" illustration type.
      */
@@ -225,6 +443,22 @@ declare module "sap/ui/webc/fiori/library" {
      * "TntSuccessfulAuth" illustration type.
      */
     TntSuccessfulAuth = "TntSuccessfulAuth",
+    /**
+     * "TntSystems" illustration type.
+     */
+    TntSystems = "TntSystems",
+    /**
+     * "TntTeams" illustration type.
+     */
+    TntTeams = "TntTeams",
+    /**
+     * "TntTools" illustration type.
+     */
+    TntTools = "TntTools",
+    /**
+     * "TntUnableToLoad" illustration type.
+     */
+    TntUnableToLoad = "TntUnableToLoad",
     /**
      * "TntUnlock" illustration type.
      */
@@ -234,14 +468,36 @@ declare module "sap/ui/webc/fiori/library" {
      */
     TntUnsuccessfulAuth = "TntUnsuccessfulAuth",
     /**
-     * "UnableToLoad" illustration type.
+     * "TntUser2" illustration type.
+     */
+    TntUser2 = "TntUser2",
+    /**
+     * "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)
+   *
+   * Interface for components that can be slotted inside `ui5-media-gallery` as items.
+   */
+  export interface IMediaGalleryItem {
+    __implements__sap_ui_webc_fiori_IMediaGalleryItem: boolean;
   }
+
   /**
    * @SINCE 1.92.0
    * @EXPERIMENTAL (since 1.92.0)
@@ -342,6 +598,78 @@ declare module "sap/ui/webc/fiori/library" {
     __implements__sap_ui_webc_fiori_IWizardStep: boolean;
   }
 
+  /**
+   * @SINCE 1.99.0
+   * @EXPERIMENTAL (since 1.99.0)
+   *
+   * Defines the layout of the content displayed in the `ui5-media-gallery-item`.
+   */
+  export 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.
+   */
+  export 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.
+   */
+  export 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.
+   */
+  export 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
    * @EXPERIMENTAL (since 1.92.0)
@@ -362,6 +690,76 @@ declare module "sap/ui/webc/fiori/library" {
      */
     Transparent = "Transparent",
   }
+  /**
+   * @SINCE 1.99.0
+   * @EXPERIMENTAL (since 1.99.0)
+   *
+   * SideContent FallDown options.
+   */
+  export 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.
+   */
+  export 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.
+   */
+  export 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)
@@ -410,9 +808,9 @@ declare module "sap/ui/webc/fiori/Bar" {
     $WebComponentSettings,
   } from "sap/ui/webc/common/WebComponent";
 
-  import Control from "sap/ui/core/Control";
+  import { IBar, BarDesign } from "sap/ui/webc/fiori/library";
 
-  import { BarDesign } from "sap/ui/webc/fiori/library";
+  import Control from "sap/ui/core/Control";
 
   import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
 
@@ -446,8 +844,11 @@ declare module "sap/ui/webc/fiori/Bar" {
    * 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:
    */
-  export default class Bar extends WebComponent {
+  export default class Bar extends WebComponent implements IBar {
+    __implements__sap_ui_webc_fiori_IBar: boolean;
     /**
      * Constructor for a new `Bar`.
      *
@@ -505,22 +906,22 @@ declare module "sap/ui/webc/fiori/Bar" {
      */
     static getMetadata(): WebComponentMetadata;
     /**
-     * Adds some content to the aggregation {@link #getContent content}.
+     * Adds some endContent to the aggregation {@link #getEndContent endContent}.
      */
-    addContent(
+    addEndContent(
       /**
-       * The content to add; if empty, nothing is inserted
+       * The endContent to add; if empty, nothing is inserted
        */
-      oContent: Control
+      oEndContent: Control
     ): this;
     /**
-     * Adds some endContent to the aggregation {@link #getEndContent endContent}.
+     * Adds some middleContent to the aggregation {@link #getMiddleContent middleContent}.
      */
-    addEndContent(
+    addMiddleContent(
       /**
-       * The endContent to add; if empty, nothing is inserted
+       * The middleContent to add; if empty, nothing is inserted
        */
-      oEndContent: Control
+      oMiddleContent: Control
     ): this;
     /**
      * Adds some startContent to the aggregation {@link #getStartContent startContent}.
@@ -531,24 +932,18 @@ declare module "sap/ui/webc/fiori/Bar" {
        */
       oStartContent: Control
     ): this;
-    /**
-     * Destroys all the content in the aggregation {@link #getContent content}.
-     */
-    destroyContent(): this;
     /**
      * Destroys all the endContent in the aggregation {@link #getEndContent endContent}.
      */
     destroyEndContent(): this;
     /**
-     * Destroys all the startContent in the aggregation {@link #getStartContent startContent}.
+     * Destroys all the middleContent in the aggregation {@link #getMiddleContent middleContent}.
      */
-    destroyStartContent(): this;
+    destroyMiddleContent(): this;
     /**
-     * Gets content of aggregation {@link #getContent content}.
-     *
-     * Defines the content in the middle of the bar
+     * Destroys all the startContent in the aggregation {@link #getStartContent startContent}.
      */
-    getContent(): Control[];
+    destroyStartContent(): this;
     /**
      * Gets current value of property {@link #getDesign design}.
      *
@@ -571,6 +966,12 @@ declare module "sap/ui/webc/fiori/Bar" {
      * Defines the content at the end of the bar
      */
     getEndContent(): Control[];
+    /**
+     * Gets content of aggregation {@link #getMiddleContent middleContent}.
+     *
+     * Defines the content in the middle of the bar
+     */
+    getMiddleContent(): Control[];
     /**
      * Gets content of aggregation {@link #getStartContent startContent}.
      *
@@ -583,16 +984,6 @@ declare module "sap/ui/webc/fiori/Bar" {
      * Defines the width of the control
      */
     getWidth(): 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: Control
-    ): int;
     /**
      * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getEndContent endContent}. and
      * returns its index if found or -1 otherwise.
@@ -603,6 +994,16 @@ declare module "sap/ui/webc/fiori/Bar" {
        */
       oEndContent: Control
     ): int;
+    /**
+     * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getMiddleContent middleContent}.
+     * and returns its index if found or -1 otherwise.
+     */
+    indexOfMiddleContent(
+      /**
+       * The middleContent whose index is looked for
+       */
+      oMiddleContent: Control
+    ): int;
     /**
      * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getStartContent startContent}.
      * and returns its index if found or -1 otherwise.
@@ -614,31 +1015,31 @@ declare module "sap/ui/webc/fiori/Bar" {
       oStartContent: Control
     ): int;
     /**
-     * Inserts a content into the aggregation {@link #getContent content}.
+     * Inserts a endContent into the aggregation {@link #getEndContent endContent}.
      */
-    insertContent(
+    insertEndContent(
       /**
-       * The content to insert; if empty, nothing is inserted
+       * The endContent to insert; if empty, nothing is inserted
        */
-      oContent: Control,
+      oEndContent: 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
+       * The `0`-based index the endContent should be inserted at; for a negative value of `iIndex`, the endContent
+       * is inserted at position 0; for a value greater than the current size of the aggregation, the endContent
+       * is inserted at the last position
        */
       iIndex: int
     ): this;
     /**
-     * Inserts a endContent into the aggregation {@link #getEndContent endContent}.
+     * Inserts a middleContent into the aggregation {@link #getMiddleContent middleContent}.
      */
-    insertEndContent(
+    insertMiddleContent(
       /**
-       * The endContent to insert; if empty, nothing is inserted
+       * The middleContent to insert; if empty, nothing is inserted
        */
-      oEndContent: Control,
+      oMiddleContent: Control,
       /**
-       * The `0`-based index the endContent should be inserted at; for a negative value of `iIndex`, the endContent
-       * is inserted at position 0; for a value greater than the current size of the aggregation, the endContent
+       * The `0`-based index the middleContent should be inserted at; for a negative value of `iIndex`, the middleContent
+       * is inserted at position 0; for a value greater than the current size of the aggregation, the middleContent
        * is inserted at the last position
        */
       iIndex: int
@@ -659,17 +1060,17 @@ declare module "sap/ui/webc/fiori/Bar" {
       iIndex: int
     ): this;
     /**
-     * Removes all the controls from the aggregation {@link #getContent content}.
+     * Removes all the controls from the aggregation {@link #getEndContent endContent}.
      *
      * Additionally, it unregisters them from the hosting UIArea.
      */
-    removeAllContent(): Control[];
+    removeAllEndContent(): Control[];
     /**
-     * Removes all the controls from the aggregation {@link #getEndContent endContent}.
+     * Removes all the controls from the aggregation {@link #getMiddleContent middleContent}.
      *
      * Additionally, it unregisters them from the hosting UIArea.
      */
-    removeAllEndContent(): Control[];
+    removeAllMiddleContent(): Control[];
     /**
      * Removes all the controls from the aggregation {@link #getStartContent startContent}.
      *
@@ -677,22 +1078,22 @@ declare module "sap/ui/webc/fiori/Bar" {
      */
     removeAllStartContent(): Control[];
     /**
-     * Removes a content from the aggregation {@link #getContent content}.
+     * Removes a endContent from the aggregation {@link #getEndContent endContent}.
      */
-    removeContent(
+    removeEndContent(
       /**
-       * The content to remove or its index or id
+       * The endContent to remove or its index or id
        */
-      vContent: int | string | Control
+      vEndContent: int | string | Control
     ): Control;
     /**
-     * Removes a endContent from the aggregation {@link #getEndContent endContent}.
+     * Removes a middleContent from the aggregation {@link #getMiddleContent middleContent}.
      */
-    removeEndContent(
+    removeMiddleContent(
       /**
-       * The endContent to remove or its index or id
+       * The middleContent to remove or its index or id
        */
-      vEndContent: int | string | Control
+      vMiddleContent: int | string | Control
     ): Control;
     /**
      * Removes a startContent from the aggregation {@link #getStartContent startContent}.
@@ -737,7 +1138,7 @@ declare module "sap/ui/webc/fiori/Bar" {
       /**
        * New value for property `width`
        */
-      sWidth?: CSSSize
+      sWidth: CSSSize
     ): this;
   }
 
@@ -761,14 +1162,14 @@ declare module "sap/ui/webc/fiori/Bar" {
     width?: CSSSize | PropertyBindingInfo;
 
     /**
-     * Defines the content in the middle of the bar
+     * Defines the content at the end of the bar
      */
-    content?: Control[] | Control | AggregationBindingInfo;
+    endContent?: Control[] | Control | AggregationBindingInfo;
 
     /**
-     * Defines the content at the end of the bar
+     * Defines the content in the middle of the bar
      */
-    endContent?: Control[] | Control | AggregationBindingInfo;
+    middleContent?: Control[] | Control | AggregationBindingInfo;
 
     /**
      * Defines the content at the start of the bar
@@ -1033,33 +1434,92 @@ declare module "sap/ui/webc/fiori/BarcodeScannerDialog" {
   }
 }
 
-declare module "sap/ui/webc/fiori/FilterItem" {
+declare module "sap/ui/webc/fiori/DynamicSideContent" {
   import {
     default as WebComponent,
     $WebComponentSettings,
   } from "sap/ui/webc/common/WebComponent";
 
-  import { IFilterItem, IFilterItemOption } from "sap/ui/webc/fiori/library";
+  import Control from "sap/ui/core/Control";
+
+  import Event from "sap/ui/base/Event";
 
   import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
 
+  import {
+    SideContentFallDown,
+    SideContentPosition,
+    SideContentVisibility,
+  } from "sap/ui/webc/fiori/library";
+
   import {
     PropertyBindingInfo,
     AggregationBindingInfo,
   } from "sap/ui/base/ManagedObject";
 
   /**
-   * @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.
    */
-  export default class FilterItem extends WebComponent implements IFilterItem {
-    __implements__sap_ui_webc_fiori_IFilterItem: boolean;
+  export default class DynamicSideContent extends 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
@@ -1069,10 +1529,10 @@ declare module "sap/ui/webc/fiori/FilterItem" {
       /**
        * Initial settings for the new control
        */
-      mSettings?: $FilterItemSettings
+      mSettings?: $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
@@ -1086,12 +1546,12 @@ declare module "sap/ui/webc/fiori/FilterItem" {
       /**
        * Initial settings for the new control
        */
-      mSettings?: $FilterItemSettings
+      mSettings?: $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}.
      */
@@ -1103,7 +1563,7 @@ declare module "sap/ui/webc/fiori/FilterItem" {
       /**
        * Object literal with information about the class
        */
-      oClassInfo?: sap.ClassInfo<T, FilterItem>,
+      oClassInfo?: sap.ClassInfo<T, DynamicSideContent>,
       /**
        * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
        * used by this class
@@ -1111,298 +1571,1749 @@ declare module "sap/ui/webc/fiori/FilterItem" {
       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(): 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: IFilterItemOption
+      oContent: 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: 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(): 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: 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: IFilterItemOption,
+      fnFunction: (p1: 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
        */
-      iIndex: int
+      oListener?: object
     ): this;
     /**
-     * Removes all the controls from the aggregation {@link #getValues values}.
+     * Attaches event handler `fnFunction` to the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.DynamicSideContent`.
      *
-     * Additionally, it unregisters them from the hosting UIArea.
-     */
-    removeAllValues(): IFilterItemOption[];
-    /**
-     * Removes a value from the 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.
+     *
+     * Fires when the current breakpoint has been changed.
      */
-    removeValue(
+    attachLayoutChange(
       /**
-       * The value to remove or its index or id
+       * The function to be called when the event occurs
        */
-      vValue: int | string | IFilterItemOption
-    ): 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(
+      fnFunction: (p1: Event) => void,
       /**
-       * New value for property `text`
+       * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.DynamicSideContent`
+       * itself
        */
-      sText?: string
+      oListener?: object
     ): this;
-  }
-
-  export interface $FilterItemSettings extends $WebComponentSettings {
-    /**
-     * Defines the text of the component.
-     */
-    text?: string | PropertyBindingInfo;
-
     /**
-     * Defines the `values` list.
+     * Destroys all the content in the aggregation {@link #getContent content}.
      */
-    values?: IFilterItemOption[] | IFilterItemOption | AggregationBindingInfo;
-  }
-}
-
-declare module "sap/ui/webc/fiori/FilterItemOption" {
-  import {
-    default as WebComponent,
-    $WebComponentSettings,
-  } from "sap/ui/webc/common/WebComponent";
-
-  import { IFilterItemOption } from "sap/ui/webc/fiori/library";
-
-  import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
-
-  import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
-
-  /**
-   * @SINCE 1.97.0
-   * @EXPERIMENTAL (since 1.97.0)
-   *
-   * Overview:
-   *
-   * Usage:
-   */
-  export default class FilterItemOption
-    extends WebComponent
-    implements IFilterItemOption {
-    __implements__sap_ui_webc_fiori_IFilterItemOption: boolean;
+    destroyContent(): this;
     /**
-     * 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.
+     * Destroys all the sideContent in the aggregation {@link #getSideContent sideContent}.
      */
-    constructor(
-      /**
-       * Initial settings for the new control
-       */
-      mSettings?: $FilterItemOptionSettings
-    );
+    destroySideContent(): this;
     /**
-     * Constructor for a new `FilterItemOption`.
+     * Detaches event handler `fnFunction` from the {@link #event:layoutChange layoutChange} event of this `sap.ui.webc.fiori.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
-     * of the syntax of the settings object.
+     * The passed function and listener object must match the ones used for event registration.
      */
-    constructor(
+    detachLayoutChange(
       /**
-       * ID for the new control, generated automatically if no ID is given
+       * The function to be called, when the event occurs
        */
-      sId?: string,
+      fnFunction: (p1: Event) => void,
       /**
-       * Initial settings for the new control
+       * Context object on which the given function had to be called
        */
-      mSettings?: $FilterItemOptionSettings
-    );
-
+      oListener?: object
+    ): this;
     /**
-     * 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}.
+     * Fires event {@link #event:layoutChange layoutChange} to attached listeners.
      */
-    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, FilterItemOption>,
+    fireLayoutChange(
       /**
-       * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
-       * used by this class
+       * Parameters to pass along with the event
        */
-      FNMetaImpl?: Function
-    ): Function;
+      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;
     /**
-     * Returns a metadata object for class sap.ui.webc.fiori.FilterItemOption.
+     * Gets content of aggregation {@link #getContent content}.
+     *
+     * Defines the main content.
      */
-    static getMetadata(): WebComponentMetadata;
+    getContent(): 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(): 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():
+      | SideContentFallDown
+      | keyof typeof 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():
+      | SideContentPosition
+      | keyof typeof 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():
+      | SideContentVisibility
+      | keyof typeof 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: 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: Control
+    ): int;
+    /**
+     * Inserts a content into the aggregation {@link #getContent content}.
+     */
+    insertContent(
+      /**
+       * The content to insert; if empty, nothing is inserted
+       */
+      oContent: 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;
+    /**
+     * Inserts a sideContent into the aggregation {@link #getSideContent sideContent}.
+     */
+    insertSideContent(
+      /**
+       * The sideContent to insert; if empty, nothing is inserted
+       */
+      oSideContent: 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.
+     */
+    removeAllContent(): Control[];
+    /**
+     * Removes all the controls from the aggregation {@link #getSideContent sideContent}.
+     *
+     * Additionally, it unregisters them from the hosting UIArea.
+     */
+    removeAllSideContent(): Control[];
+    /**
+     * Removes a content from the aggregation {@link #getContent content}.
+     */
+    removeContent(
+      /**
+       * The content to remove or its index or id
+       */
+      vContent: int | string | Control
+    ): Control;
+    /**
+     * Removes a sideContent from the aggregation {@link #getSideContent sideContent}.
+     */
+    removeSideContent(
+      /**
+       * The sideContent to remove or its index or id
+       */
+      vSideContent: int | string | Control
+    ): Control;
+    /**
+     * Sets a new value for 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.
+     *
+     * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+     *
+     * Default value is `false`.
+     */
+    setEqualSplit(
+      /**
+       * New value for property `equalSplit`
+       */
+      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?:
+        | SideContentFallDown
+        | keyof typeof 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?:
+        | SideContentPosition
+        | keyof typeof 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?:
+        | SideContentVisibility
+        | keyof typeof SideContentVisibility
+    ): this;
+    /**
+     * Toggles visibility of main and side contents on S screen size (mobile device).
+     */
+    toggleContents(): void;
+  }
+
+  export interface $DynamicSideContentSettings extends $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 | PropertyBindingInfo;
+
+    /**
+     * Defines the visibility of the main content.
+     */
+    hideMainContent?: boolean | PropertyBindingInfo;
+
+    /**
+     * Defines the visibility of the side content.
+     */
+    hideSideContent?: boolean | PropertyBindingInfo;
+
+    /**
+     * Defines on which breakpoints the side content falls down below the main content.
+     *
+     *
+     *
+     *  **The available values are:**
+     *
+     *
+     * 	 - `BelowXL`
+     * 	 - `BelowL`
+     * 	 - `BelowM`
+     * 	 - `OnMinimumWidth`
+     */
+    sideContentFallDown?:
+      | (SideContentFallDown | keyof typeof SideContentFallDown)
+      | 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?:
+      | (SideContentPosition | keyof typeof SideContentPosition)
+      | PropertyBindingInfo;
+
+    /**
+     * Defines on which breakpoints the side content is visible.
+     *
+     *
+     *
+     *  **The available values are:**
+     *
+     *
+     * 	 - `AlwaysShow`
+     * 	 - `ShowAboveL`
+     * 	 - `ShowAboveM`
+     * 	 - `ShowAboveS`
+     * 	 - `NeverShow`
+     */
+    sideContentVisibility?:
+      | (SideContentVisibility | keyof typeof SideContentVisibility)
+      | PropertyBindingInfo;
+
+    /**
+     * Defines the main content.
+     */
+    content?: Control[] | Control | AggregationBindingInfo;
+
+    /**
+     * Defines the side content.
+     */
+    sideContent?: Control[] | Control | AggregationBindingInfo;
+
+    /**
+     * Fires when the current breakpoint has been changed.
+     */
+    layoutChange?: (oEvent: Event) => void;
+  }
+}
+
+declare module "sap/ui/webc/fiori/FilterItem" {
+  import {
+    default as WebComponent,
+    $WebComponentSettings,
+  } from "sap/ui/webc/common/WebComponent";
+
+  import { IFilterItem, IFilterItemOption } from "sap/ui/webc/fiori/library";
+
+  import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
+
+  import {
+    PropertyBindingInfo,
+    AggregationBindingInfo,
+  } from "sap/ui/base/ManagedObject";
+
+  /**
+   * @SINCE 1.97.0
+   * @EXPERIMENTAL (since 1.97.0)
+   *
+   * Overview:
+   *
+   * Usage:
+   */
+  export default class FilterItem extends WebComponent implements IFilterItem {
+    __implements__sap_ui_webc_fiori_IFilterItem: boolean;
+    /**
+     * 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
+     * of the syntax of the settings object.
+     */
+    constructor(
+      /**
+       * Initial settings for the new control
+       */
+      mSettings?: $FilterItemSettings
+    );
+    /**
+     * 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
+     * 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?: $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, 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(): WebComponentMetadata;
+    /**
+     * Adds some value to the aggregation {@link #getValues values}.
+     */
+    addValue(
+      /**
+       * The value to add; if empty, nothing is inserted
+       */
+      oValue: 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(): 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: IFilterItemOption
+    ): int;
+    /**
+     * Inserts a value into the aggregation {@link #getValues values}.
+     */
+    insertValue(
+      /**
+       * The value to insert; if empty, nothing is inserted
+       */
+      oValue: 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(): IFilterItemOption[];
+    /**
+     * Removes a value from the aggregation {@link #getValues values}.
+     */
+    removeValue(
+      /**
+       * The value to remove or its index or id
+       */
+      vValue: int | string | IFilterItemOption
+    ): 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;
+  }
+
+  export interface $FilterItemSettings extends $WebComponentSettings {
+    /**
+     * Defines the text of the component.
+     */
+    text?: string | PropertyBindingInfo;
+
+    /**
+     * Defines the `values` list.
+     */
+    values?: IFilterItemOption[] | IFilterItemOption | AggregationBindingInfo;
+  }
+}
+
+declare module "sap/ui/webc/fiori/FilterItemOption" {
+  import {
+    default as WebComponent,
+    $WebComponentSettings,
+  } from "sap/ui/webc/common/WebComponent";
+
+  import { IFilterItemOption } from "sap/ui/webc/fiori/library";
+
+  import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
+
+  import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+
+  /**
+   * @SINCE 1.97.0
+   * @EXPERIMENTAL (since 1.97.0)
+   *
+   * Overview:
+   *
+   * Usage:
+   */
+  export default class FilterItemOption
+    extends WebComponent
+    implements 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?: $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?: $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, 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(): WebComponentMetadata;
     /**
      * Gets current value of property {@link #getSelected selected}.
      *
-     * Defines whether the option is 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;
+  }
+
+  export interface $FilterItemOptionSettings extends $WebComponentSettings {
+    /**
+     * Defines whether the option is selected
+     */
+    selected?: boolean | PropertyBindingInfo;
+
+    /**
+     * Defines the text of the component.
+     */
+    text?: string | PropertyBindingInfo;
+  }
+}
+
+declare module "sap/ui/webc/fiori/FlexibleColumnLayout" {
+  import {
+    default as WebComponent,
+    $WebComponentSettings,
+  } from "sap/ui/webc/common/WebComponent";
+
+  import Event from "sap/ui/base/Event";
+
+  import Control from "sap/ui/core/Control";
+
+  import { CSSSize } from "sap/ui/core/library";
+
+  import { FCLLayout } from "sap/ui/webc/fiori/library";
+
+  import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
+
+  import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+
+  /**
+   * @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:
+   */
+  export default class FlexibleColumnLayout extends 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?: $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?: $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, 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(): 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: 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: 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: 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(): 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(): 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(): FCLLayout | keyof typeof FCLLayout;
+    /**
+     * Gets content of aggregation {@link #getMidColumn midColumn}.
+     *
+     * Defines the content in the middle column.
+     */
+    getMidColumn(): 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(): 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(): 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: 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: 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?: FCLLayout | keyof typeof FCLLayout
+    ): this;
+    /**
+     * Sets the aggregated {@link #getMidColumn midColumn}.
+     */
+    setMidColumn(
+      /**
+       * The midColumn to set
+       */
+      oMidColumn: Control
+    ): this;
+    /**
+     * Sets the aggregated {@link #getStartColumn startColumn}.
+     */
+    setStartColumn(
+      /**
+       * The startColumn to set
+       */
+      oStartColumn: 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: CSSSize
+    ): this;
+  }
+
+  export interface $FlexibleColumnLayoutSettings extends $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 | PropertyBindingInfo;
+
+    /**
+     * 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`
+     */
+    accessibilityTexts?: object | PropertyBindingInfo;
+
+    /**
+     * Defines the height of the control
+     */
+    height?: CSSSize | PropertyBindingInfo;
+
+    /**
+     * Defines the visibility of the arrows, used for expanding and shrinking the columns.
+     */
+    hideArrows?: boolean | PropertyBindingInfo;
+
+    /**
+     * 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.
+     */
+    layout?: (FCLLayout | keyof typeof FCLLayout) | PropertyBindingInfo;
+
+    /**
+     * Defines the width of the control
+     */
+    width?: CSSSize | PropertyBindingInfo;
+
+    /**
+     * Defines the content in the end column.
+     */
+    endColumn?: Control;
+
+    /**
+     * Defines the content in the middle column.
+     */
+    midColumn?: Control;
+
+    /**
+     * Defines the content in the start column.
+     */
+    startColumn?: Control;
+
+    /**
+     * Fired when the layout changes via user interaction by clicking the arrows or by changing the component
+     * size due to resizing.
+     */
+    layoutChange?: (oEvent: Event) => void;
+  }
+}
+
+declare module "sap/ui/webc/fiori/IllustratedMessage" {
+  import {
+    default as WebComponent,
+    $WebComponentSettings,
+  } from "sap/ui/webc/common/WebComponent";
+
+  import { IButton } from "sap/ui/webc/main/library";
+
+  import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
+
+  import { IllustrationMessageType } from "sap/ui/webc/fiori/library";
+
+  import Control from "sap/ui/core/Control";
+
+  import {
+    PropertyBindingInfo,
+    AggregationBindingInfo,
+  } from "sap/ui/base/ManagedObject";
+
+  /**
+   * @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`
+   */
+  export default class IllustratedMessage extends 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?: $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?: $IllustratedMessageSettings
+    );
+
+    /**
+     * 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}.
+     */
+    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, IllustratedMessage>,
+      /**
+       * 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.IllustratedMessage.
+     */
+    static getMetadata(): WebComponentMetadata;
+    /**
+     * Adds some action to the aggregation {@link #getActions actions}.
+     */
+    addAction(
+      /**
+       * The action to add; if empty, nothing is inserted
+       */
+      oAction: 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 the component actions.
+     */
+    getActions(): IButton[];
+    /**
+     * Gets current value of property {@link #getName name}.
+     *
+     * Default value is `BeforeSearch`.
+     */
+    getName(): IllustrationMessageType | keyof typeof IllustrationMessageType;
+    /**
+     * Gets content of aggregation {@link #getSubtitle subtitle}.
+     *
+     * 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(): 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 `false`.
+     * Default value is `empty string`.
      */
-    getSelected(): boolean;
+    getSubtitleText(): string;
     /**
-     * Gets current value of property {@link #getText text}.
+     * Gets current value of property {@link #getTitleText titleText}.
      *
-     * Defines the text of the component.
+     * Defines the title of the component.
+     *
+     *  **Note:** Using this property, the default title text of illustration will be overwritten.
      *
      * Default value is `empty string`.
      */
-    getText(): string;
+    getTitleText(): string;
     /**
-     * Sets a new value for property {@link #getSelected selected}.
+     * 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: IButton
+    ): int;
+    /**
+     * Inserts a action into the aggregation {@link #getActions actions}.
+     */
+    insertAction(
+      /**
+       * The action to insert; if empty, nothing is inserted
+       */
+      oAction: 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 | IButton
+    ): IButton;
+    /**
+     * Removes all the controls from the aggregation {@link #getActions actions}.
      *
-     * Defines whether the option is selected
+     * Additionally, it unregisters them from the hosting UIArea.
+     */
+    removeAllActions(): 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?: IllustrationMessageType | keyof typeof IllustrationMessageType
     ): this;
     /**
-     * Sets a new value for property {@link #getText text}.
+     * Sets the aggregated {@link #getSubtitle subtitle}.
+     */
+    setSubtitle(
+      /**
+       * The subtitle to set
+       */
+      oSubtitle: 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;
   }
 
-  export interface $FilterItemOptionSettings extends $WebComponentSettings {
+  export interface $IllustratedMessageSettings extends $WebComponentSettings {
+    name?:
+      | (IllustrationMessageType | keyof typeof IllustrationMessageType)
+      | PropertyBindingInfo;
+
     /**
-     * Defines whether the option is selected
+     * 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.
      */
-    selected?: boolean | PropertyBindingInfo;
+    subtitleText?: string | PropertyBindingInfo;
 
     /**
-     * Defines the text of the component.
+     * Defines the title of the component.
+     *
+     *  **Note:** Using this property, the default title text of illustration will be overwritten.
      */
-    text?: string | PropertyBindingInfo;
+    titleText?: string | PropertyBindingInfo;
+
+    /**
+     * Defines the component actions.
+     */
+    actions?: IButton[] | IButton | AggregationBindingInfo;
+
+    /**
+     * 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.
+     */
+    subtitle?: Control;
   }
 }
 
-declare module "sap/ui/webc/fiori/FlexibleColumnLayout" {
+declare module "sap/ui/webc/fiori/MediaGallery" {
   import {
     default as WebComponent,
     $WebComponentSettings,
   } from "sap/ui/webc/common/WebComponent";
 
-  import Event from "sap/ui/base/Event";
-
-  import { FCLLayout } from "sap/ui/webc/fiori/library";
-
-  import Control from "sap/ui/core/Control";
+  import {
+    IMediaGalleryItem,
+    MediaGalleryLayout,
+    MediaGalleryMenuHorizontalAlign,
+    MediaGalleryMenuVerticalAlign,
+  } from "sap/ui/webc/fiori/library";
 
-  import { CSSSize } from "sap/ui/core/library";
+  import Event from "sap/ui/base/Event";
 
   import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
 
-  import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+  import {
+    PropertyBindingInfo,
+    AggregationBindingInfo,
+  } from "sap/ui/base/ManagedObject";
 
   /**
-   * @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
    */
-  export default class FlexibleColumnLayout extends WebComponent {
+  export default class MediaGallery extends 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
@@ -1412,10 +3323,10 @@ declare module "sap/ui/webc/fiori/FlexibleColumnLayout" {
       /**
        * Initial settings for the new control
        */
-      mSettings?: $FlexibleColumnLayoutSettings
+      mSettings?: $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
@@ -1429,44 +3340,139 @@ declare module "sap/ui/webc/fiori/FlexibleColumnLayout" {
       /**
        * Initial settings for the new control
        */
-      mSettings?: $FlexibleColumnLayoutSettings
+      mSettings?: $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}.
+     */
+    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, MediaGallery>,
+      /**
+       * 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.MediaGallery.
+     */
+    static getMetadata(): WebComponentMetadata;
+    /**
+     * Adds some item to the aggregation {@link #getItems items}.
+     */
+    addItem(
+      /**
+       * The item to add; if empty, nothing is inserted
+       */
+      oItem: 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: 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: 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: 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.
      *
-     * `oClassInfo` might contain the same kind of information as described in {@link sap.ui.webc.common.WebComponent.extend}.
+     * Fired when the thumbnails overflow button is clicked.
      */
-    static extend<T extends Record<string, unknown>>(
-      /**
-       * Name of the class being created
-       */
-      sClassName: string,
+    attachOverflowClick(
       /**
-       * Object literal with information about the class
+       * The function to be called when the event occurs
        */
-      oClassInfo?: sap.ClassInfo<T, FlexibleColumnLayout>,
+      fnFunction: (p1: Event) => void,
       /**
-       * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
-       * used by this class
+       * Context object to call the event handler with. Defaults to this `sap.ui.webc.fiori.MediaGallery` itself
        */
-      FNMetaImpl?: Function
-    ): Function;
-    /**
-     * Returns a metadata object for class sap.ui.webc.fiori.FlexibleColumnLayout.
-     */
-    static getMetadata(): WebComponentMetadata;
+      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(
       /**
        * An application-specific payload object that will be passed to the event handler along with the event
        * object when firing the event
@@ -1477,49 +3483,72 @@ declare module "sap/ui/webc/fiori/FlexibleColumnLayout" {
        */
       fnFunction: (p1: 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: 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: 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: 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
        */
@@ -1530,393 +3559,372 @@ declare module "sap/ui/webc/fiori/FlexibleColumnLayout" {
       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?: FCLLayout | keyof typeof 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(): 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(): 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(): 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(): FCLLayout | keyof typeof FCLLayout;
+    getLayout(): MediaGalleryLayout | keyof typeof MediaGalleryLayout;
     /**
-     * Gets content of aggregation {@link #getMidColumn midColumn}.
+     * Gets current value of property {@link #getMenuHorizontalAlign menuHorizontalAlign}.
      *
-     * Defines the content in the middle column.
-     */
-    getMidColumn(): 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(): 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(): CSSSize;
+    getMenuHorizontalAlign():
+      | MediaGalleryMenuHorizontalAlign
+      | keyof typeof 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():
+      | MediaGalleryMenuVerticalAlign
+      | keyof typeof 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: 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: Control
+      oItem: 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(): 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?: CSSSize
-    ): this;
+      vItem: int | string | IMediaGalleryItem
+    ): 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.
+     * 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`
      *
      * 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?: FCLLayout | keyof typeof FCLLayout
+      sLayout?: MediaGalleryLayout | keyof typeof 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: Control
+      sMenuHorizontalAlign?:
+        | MediaGalleryMenuHorizontalAlign
+        | keyof typeof 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: Control
+      sMenuVerticalAlign?:
+        | MediaGalleryMenuVerticalAlign
+        | keyof typeof 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?: CSSSize
+      bShowAllThumbnails?: boolean
     ): this;
   }
 
-  export interface $FlexibleColumnLayoutSettings extends $WebComponentSettings {
+  export interface $MediaGallerySettings extends $WebComponentSettings {
     /**
-     * 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
+     * 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.
      */
-    accessibilityTexts?: object | PropertyBindingInfo;
+    interactiveDisplayArea?: boolean | PropertyBindingInfo;
 
     /**
-     * Defines the height of the control
+     * Determines the layout of the component.
+     *
+     *  Available options are:
+     * 	 - `Auto`
+     * 	 - `Vertical`
+     * 	 - `Horizontal`
      */
-    height?: CSSSize | PropertyBindingInfo;
+    layout?:
+      | (MediaGalleryLayout | keyof typeof MediaGalleryLayout)
+      | PropertyBindingInfo;
 
     /**
-     * Defines the visibility of the arrows, used for expanding and shrinking the columns.
-     */
-    hideArrows?: boolean | PropertyBindingInfo;
+     * Determines the horizontal alignment of the thumbnails menu vs. the central display area.
+     *
+     *  Available options are:
+     * 	 - `Left`
+     * 	 - `Right`
+     */
+    menuHorizontalAlign?:
+      | (
+          | MediaGalleryMenuHorizontalAlign
+          | keyof typeof MediaGalleryMenuHorizontalAlign
+        )
+      | PropertyBindingInfo;
 
     /**
-     * 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 vertical alignment of the thumbnails menu vs. the central display area.
      *
      *  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.
-     */
-    layout?: (FCLLayout | keyof typeof FCLLayout) | PropertyBindingInfo;
+     * 	 - `Top`
+     * 	 - `Bottom`
+     */
+    menuVerticalAlign?:
+      | (
+          | MediaGalleryMenuVerticalAlign
+          | keyof typeof MediaGalleryMenuVerticalAlign
+        )
+      | PropertyBindingInfo;
 
     /**
-     * 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.
      */
-    width?: CSSSize | PropertyBindingInfo;
+    showAllThumbnails?: boolean | PropertyBindingInfo;
 
     /**
-     * Defines the content in the end column.
+     * 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.
      */
-    endColumn?: Control;
+    items?: IMediaGalleryItem[] | IMediaGalleryItem | AggregationBindingInfo;
 
     /**
-     * Defines the content in the middle column.
+     * Fired when the display area is clicked.
+     *  The display area is the central area that contains the enlarged content of the currently selected item.
      */
-    midColumn?: Control;
+    displayAreaClick?: (oEvent: Event) => void;
 
     /**
-     * Defines the content in the start column.
+     * Fired when the thumbnails overflow button is clicked.
      */
-    startColumn?: Control;
+    overflowClick?: (oEvent: Event) => void;
 
     /**
-     * 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.
      */
-    layoutChange?: (oEvent: Event) => void;
+    selectionChange?: (oEvent: Event) => void;
   }
 }
 
-declare module "sap/ui/webc/fiori/IllustratedMessage" {
+declare module "sap/ui/webc/fiori/MediaGalleryItem" {
   import {
     default as WebComponent,
     $WebComponentSettings,
   } from "sap/ui/webc/common/WebComponent";
 
-  import { IButton } from "sap/ui/webc/main/library";
-
-  import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
-
-  import { IllustrationMessageType } from "sap/ui/webc/fiori/library";
+  import {
+    IMediaGalleryItem,
+    MediaGalleryItemLayout,
+  } from "sap/ui/webc/fiori/library";
 
   import Control from "sap/ui/core/Control";
 
-  import {
-    PropertyBindingInfo,
-    AggregationBindingInfo,
-  } from "sap/ui/base/ManagedObject";
+  import WebComponentMetadata from "sap/ui/webc/common/WebComponentMetadata";
+
+  import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
 
   /**
-   * @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
    */
-  export default class IllustratedMessage extends WebComponent {
+  export default class MediaGalleryItem
+    extends WebComponent
+    implements 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
@@ -1926,10 +3934,10 @@ declare module "sap/ui/webc/fiori/IllustratedMessage" {
       /**
        * Initial settings for the new control
        */
-      mSettings?: $IllustratedMessageSettings
+      mSettings?: $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
@@ -1943,11 +3951,11 @@ declare module "sap/ui/webc/fiori/IllustratedMessage" {
       /**
        * Initial settings for the new control
        */
-      mSettings?: $IllustratedMessageSettings
+      mSettings?: $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}.
@@ -1960,7 +3968,7 @@ declare module "sap/ui/webc/fiori/IllustratedMessage" {
       /**
        * Object literal with information about the class
        */
-      oClassInfo?: sap.ClassInfo<T, IllustratedMessage>,
+      oClassInfo?: sap.ClassInfo<T, MediaGalleryItem>,
       /**
        * Constructor function for the metadata object; if not given, it defaults to the metadata implementation
        * used by this class
@@ -1968,202 +3976,160 @@ declare module "sap/ui/webc/fiori/IllustratedMessage" {
       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(): WebComponentMetadata;
     /**
-     * Adds some action to the aggregation {@link #getActions actions}.
-     */
-    addAction(
-      /**
-       * The action to add; if empty, nothing is inserted
-       */
-      oAction: IButton
-    ): this;
-    /**
-     * Destroys all the actions in the aggregation {@link #getActions actions}.
-     */
-    destroyActions(): this;
-    /**
-     * Destroys the subtitle in the aggregation {@link #getSubtitle subtitle}.
+     * Destroys the content in the aggregation {@link #getContent content}.
      */
-    destroySubtitle(): this;
+    destroyContent(): this;
     /**
-     * Gets content of aggregation {@link #getActions actions}.
-     *
-     * Defines the component actions.
+     * Destroys the thumbnail in the aggregation {@link #getThumbnail thumbnail}.
      */
-    getActions(): 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(): IllustrationMessageType | keyof typeof IllustrationMessageType;
+    getContent(): Control;
     /**
-     * Gets content of aggregation {@link #getSubtitle subtitle}.
+     * Gets current value of property {@link #getEnabled enabled}.
      *
-     * Defines the subtitle of the component.
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
      *
-     *  **Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText`
-     * property will be overwritten.
+     * Default value is `true`.
      */
-    getSubtitle(): Control;
+    getEnabled(): 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(): MediaGalleryItemLayout | keyof typeof MediaGalleryItemLayout;
     /**
-     * Gets current value of property {@link #getTitleText titleText}.
-     *
-     * Defines the title of the component.
+     * Gets current value of property {@link #getSelected selected}.
      *
-     *  **Note:** Using this property, the default title text of illustration will be overwritten.
+     * Defines the selected state of the component.
      *
-     * Default value is `empty string`.
+     * Default value is `false`.
      */
-    getTitleText(): string;
+    getSelected(): boolean;
     /**
-     * Checks for the provided `sap.ui.webc.main.IButton` in the aggregation {@link #getActions actions}. and
-     * returns its index if found or -1 otherwise.
+     * Gets content of aggregation {@link #getThumbnail thumbnail}.
+     *
+     * Defines the content of the thumbnail.
      */
-    indexOfAction(
-      /**
-       * The action whose index is looked for
-       */
-      oAction: IButton
-    ): int;
+    getThumbnail(): Control;
     /**
-     * Inserts a action into the aggregation {@link #getActions actions}.
+     * Sets the aggregated {@link #getContent content}.
      */
-    insertAction(
-      /**
-       * The action to insert; if empty, nothing is inserted
-       */
-      oAction: IButton,
+    setContent(
       /**
-       * 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 content to set
        */
-      iIndex: int
+      oContent: Control
     ): this;
     /**
-     * Removes a action from the aggregation {@link #getActions actions}.
-     */
-    removeAction(
-      /**
-       * The action to remove or its index or id
-       */
-      vAction: int | string | IButton
-    ): IButton;
-    /**
-     * Removes all the controls from the aggregation {@link #getActions actions}.
+     * Sets a new value for property {@link #getEnabled enabled}.
      *
-     * Additionally, it unregisters them from the hosting UIArea.
-     */
-    removeAllActions(): IButton[];
-    /**
-     * Sets a new value for property {@link #getName name}.
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
      *
      * When called with a value of `null` or `undefined`, the default value of the property will be restored.
      *
-     * Default value is `BeforeSearch`.
-     */
-    setName(
-      /**
-       * New value for property `name`
-       */
-      sName?: IllustrationMessageType | keyof typeof IllustrationMessageType
-    ): this;
-    /**
-     * Sets the aggregated {@link #getSubtitle subtitle}.
+     * Default value is `true`.
      */
-    setSubtitle(
+    setEnabled(
       /**
-       * The subtitle to set
+       * New value for property `enabled`
        */
-      oSubtitle: Control
+      bEnabled?: boolean
     ): this;
     /**
-     * Sets a new value for property {@link #getSubtitleText subtitleText}.
-     *
-     * Defines the subtitle of the component.
+     * Sets a new value for 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`
      *
      * 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?: MediaGalleryItemLayout | keyof typeof 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;
+    /**
+     * Sets the aggregated {@link #getThumbnail thumbnail}.
+     */
+    setThumbnail(
+      /**
+       * The thumbnail to set
+       */
+      oThumbnail: Control
     ): this;
   }
 
-  export interface $IllustratedMessageSettings extends $WebComponentSettings {
-    name?:
-      | (IllustrationMessageType | keyof typeof IllustrationMessageType)
-      | PropertyBindingInfo;
+  export interface $MediaGalleryItemSettings extends $WebComponentSettings {
+    /**
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
+     */
+    enabled?: boolean | PropertyBindingInfo;
 
     /**
-     * Defines the subtitle of the component.
-     *
-     *  **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`
      */
-    subtitleText?: string | PropertyBindingInfo;
+    layout?:
+      | (MediaGalleryItemLayout | keyof typeof MediaGalleryItemLayout)
+      | PropertyBindingInfo;
 
     /**
-     * Defines the title of the component.
-     *
-     *  **Note:** Using this property, the default title text of illustration will be overwritten.
+     * Defines the selected state of the component.
      */
-    titleText?: string | PropertyBindingInfo;
+    selected?: boolean | PropertyBindingInfo;
 
     /**
-     * Defines the component actions.
+     * Defines the content of the component.
      */
-    actions?: IButton[] | IButton | AggregationBindingInfo;
+    content?: Control;
 
     /**
-     * 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.
+     * Defines the content of the thumbnail.
      */
-    subtitle?: Control;
+    thumbnail?: Control;
   }
 }
 
@@ -2266,15 +4232,14 @@ declare module "sap/ui/webc/fiori/NotificationAction" {
      */
     getDesign(): ButtonDesign | keyof typeof ButtonDesign;
     /**
-     * Gets current value of property {@link #getDisabled disabled}.
-     *
-     * Defines if the action is disabled.
+     * Gets current value of property {@link #getEnabled enabled}.
      *
-     *  **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
      *
-     * Default value is `false`.
+     * Default value is `true`.
      */
-    getDisabled(): boolean;
+    getEnabled(): boolean;
     /**
      * Gets current value of property {@link #getIcon icon}.
      *
@@ -2319,21 +4284,20 @@ declare module "sap/ui/webc/fiori/NotificationAction" {
       sDesign?: ButtonDesign | keyof typeof ButtonDesign
     ): this;
     /**
-     * Sets a new value for property {@link #getDisabled disabled}.
+     * Sets a new value for property {@link #getEnabled enabled}.
      *
-     * Defines if the action is disabled.
-     *
-     *  **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
      *
      * 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 `true`.
      */
-    setDisabled(
+    setEnabled(
       /**
-       * New value for property `disabled`
+       * New value for property `enabled`
        */
-      bDisabled?: boolean
+      bEnabled?: boolean
     ): this;
     /**
      * Sets a new value for property {@link #getIcon icon}.
@@ -2386,11 +4350,10 @@ declare module "sap/ui/webc/fiori/NotificationAction" {
     design?: (ButtonDesign | keyof typeof ButtonDesign) | PropertyBindingInfo;
 
     /**
-     * Defines if the action is disabled.
-     *
-     *  **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
      */
-    disabled?: boolean | PropertyBindingInfo;
+    enabled?: boolean | PropertyBindingInfo;
 
     /**
      * Defines the `icon` source URI.
@@ -3676,7 +5639,7 @@ declare module "sap/ui/webc/fiori/Page" {
 
   import Control from "sap/ui/core/Control";
 
-  import { PageBackgroundDesign } from "sap/ui/webc/fiori/library";
+  import { PageBackgroundDesign, IBar } from "sap/ui/webc/fiori/library";
 
   import { CSSSize } from "sap/ui/core/library";
 
@@ -3771,34 +5734,16 @@ declare module "sap/ui/webc/fiori/Page" {
        */
       oContent: Control
     ): this;
-    /**
-     * Adds some footer to the aggregation {@link #getFooter footer}.
-     */
-    addFooter(
-      /**
-       * The footer to add; if empty, nothing is inserted
-       */
-      oFooter: Control
-    ): this;
-    /**
-     * Adds some header to the aggregation {@link #getHeader header}.
-     */
-    addHeader(
-      /**
-       * The header to add; if empty, nothing is inserted
-       */
-      oHeader: 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;
     /**
@@ -3849,13 +5794,13 @@ declare module "sap/ui/webc/fiori/Page" {
      *
      * Defines the footer HTML Element.
      */
-    getFooter(): Control[];
+    getFooter(): IBar;
     /**
      * Gets content of aggregation {@link #getHeader header}.
      *
      * Defines the header HTML Element.
      */
-    getHeader(): Control[];
+    getHeader(): IBar;
     /**
      * Gets current value of property {@link #getHeight height}.
      *
@@ -3886,26 +5831,6 @@ declare module "sap/ui/webc/fiori/Page" {
        */
       oContent: 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: Control
-    ): int;
-    /**
-     * Checks for the provided `sap.ui.core.Control` in the aggregation {@link #getHeader header}. and returns
-     * its index if found or -1 otherwise.
-     */
-    indexOfHeader(
-      /**
-       * The header whose index is looked for
-       */
-      oHeader: Control
-    ): int;
     /**
      * Inserts a content into the aggregation {@link #getContent content}.
      */
@@ -3921,54 +5846,12 @@ declare module "sap/ui/webc/fiori/Page" {
        */
       iIndex: int
     ): this;
-    /**
-     * Inserts a footer into the aggregation {@link #getFooter footer}.
-     */
-    insertFooter(
-      /**
-       * The footer to insert; if empty, nothing is inserted
-       */
-      oFooter: 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: 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(): Control[];
-    /**
-     * Removes all the controls from the aggregation {@link #getFooter footer}.
-     *
-     * Additionally, it unregisters them from the hosting UIArea.
-     */
-    removeAllFooter(): Control[];
-    /**
-     * Removes all the controls from the aggregation {@link #getHeader header}.
-     *
-     * Additionally, it unregisters them from the hosting UIArea.
-     */
-    removeAllHeader(): Control[];
     /**
      * Removes a content from the aggregation {@link #getContent content}.
      */
@@ -3978,24 +5861,6 @@ declare module "sap/ui/webc/fiori/Page" {
        */
       vContent: int | string | Control
     ): Control;
-    /**
-     * Removes a footer from the aggregation {@link #getFooter footer}.
-     */
-    removeFooter(
-      /**
-       * The footer to remove or its index or id
-       */
-      vFooter: int | string | Control
-    ): Control;
-    /**
-     * Removes a header from the aggregation {@link #getHeader header}.
-     */
-    removeHeader(
-      /**
-       * The header to remove or its index or id
-       */
-      vHeader: int | string | Control
-    ): Control;
     /**
      * Sets a new value for property {@link #getBackgroundDesign backgroundDesign}.
      *
@@ -4054,6 +5919,24 @@ declare module "sap/ui/webc/fiori/Page" {
        */
       bFloatingFooter?: boolean
     ): this;
+    /**
+     * Sets the aggregated {@link #getFooter footer}.
+     */
+    setFooter(
+      /**
+       * The footer to set
+       */
+      oFooter: IBar
+    ): this;
+    /**
+     * Sets the aggregated {@link #getHeader header}.
+     */
+    setHeader(
+      /**
+       * The header to set
+       */
+      oHeader: IBar
+    ): this;
     /**
      * Sets a new value for property {@link #getHeight height}.
      *
@@ -4065,7 +5948,7 @@ declare module "sap/ui/webc/fiori/Page" {
       /**
        * New value for property `height`
        */
-      sHeight?: CSSSize
+      sHeight: CSSSize
     ): this;
     /**
      * Sets a new value for property {@link #getHideFooter hideFooter}.
@@ -4093,7 +5976,7 @@ declare module "sap/ui/webc/fiori/Page" {
       /**
        * New value for property `width`
        */
-      sWidth?: CSSSize
+      sWidth: CSSSize
     ): this;
   }
 
@@ -4149,12 +6032,12 @@ declare module "sap/ui/webc/fiori/Page" {
     /**
      * Defines the footer HTML Element.
      */
-    footer?: Control[] | Control | AggregationBindingInfo;
+    footer?: IBar;
 
     /**
      * Defines the header HTML Element.
      */
-    header?: Control[] | Control | AggregationBindingInfo;
+    header?: IBar;
   }
 }
 
@@ -4725,6 +6608,8 @@ declare module "sap/ui/webc/fiori/ShellBar" {
    * 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:
    */
   export default class ShellBar extends WebComponent {
     /**
@@ -4889,7 +6774,7 @@ declare module "sap/ui/webc/fiori/ShellBar" {
      * 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(
@@ -4913,7 +6798,7 @@ declare module "sap/ui/webc/fiori/ShellBar" {
      * 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(
@@ -4976,7 +6861,7 @@ declare module "sap/ui/webc/fiori/ShellBar" {
      * 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(
@@ -5001,7 +6886,7 @@ declare module "sap/ui/webc/fiori/ShellBar" {
      * 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(
@@ -5267,6 +7152,17 @@ declare module "sap/ui/webc/fiori/ShellBar" {
         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.
      */
@@ -5471,6 +7367,24 @@ declare module "sap/ui/webc/fiori/ShellBar" {
        */
       vMenuItem: int | string | IListItem
     ): 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}.
      */
@@ -5606,6 +7520,14 @@ declare module "sap/ui/webc/fiori/ShellBar" {
   }
 
   export interface $ShellBarSettings extends $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 | PropertyBindingInfo;
+
     /**
      * Defines the `notificationsCount`, displayed in the notification icon top-right corner.
      */
@@ -5693,7 +7615,7 @@ declare module "sap/ui/webc/fiori/ShellBar" {
     logoClick?: (oEvent: 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: Event) => void;
@@ -5704,7 +7626,7 @@ declare module "sap/ui/webc/fiori/ShellBar" {
     notificationsClick?: (oEvent: 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: Event) => void;
@@ -6000,6 +7922,8 @@ declare module "sap/ui/webc/fiori/SideNavigation" {
    * 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:
    */
   export default class SideNavigation extends WebComponent {
     /**
@@ -6158,6 +8082,9 @@ declare module "sap/ui/webc/fiori/SideNavigation" {
     ): this;
     /**
      * Fires event {@link #event:selectionChange selectionChange} to attached listeners.
+     *
+     * Listeners may prevent the default action of this event by calling the `preventDefault` method on the
+     * event object. The return value of this method indicates whether the default action should be executed.
      */
     fireSelectionChange(
       /**
@@ -6169,7 +8096,7 @@ declare module "sap/ui/webc/fiori/SideNavigation" {
          */
         item?: HTMLElement;
       }
-    ): this;
+    ): boolean;
     /**
      * Gets current value of property {@link #getCollapsed collapsed}.
      *
@@ -7137,6 +9064,12 @@ declare module "sap/ui/webc/fiori/Timeline" {
      * Destroys all the items in the aggregation {@link #getItems items}.
      */
     destroyItems(): this;
+    /**
+     * Gets current value of property {@link #getAccessibleName accessibleName}.
+     *
+     * Defines the accessible aria name of the component.
+     */
+    getAccessibleName(): string;
     /**
      * Gets current value of property {@link #getHeight height}.
      *
@@ -7209,6 +9142,19 @@ declare module "sap/ui/webc/fiori/Timeline" {
        */
       vItem: int | string | ITimelineItem
     ): ITimelineItem;
+    /**
+     * Sets a new value for property {@link #getAccessibleName accessibleName}.
+     *
+     * Defines the accessible aria name of the component.
+     *
+     * When called with a value of `null` or `undefined`, the default value of the property will be restored.
+     */
+    setAccessibleName(
+      /**
+       * New value for property `accessibleName`
+       */
+      sAccessibleName: string
+    ): this;
     /**
      * Sets a new value for property {@link #getHeight height}.
      *
@@ -7220,7 +9166,7 @@ declare module "sap/ui/webc/fiori/Timeline" {
       /**
        * New value for property `height`
        */
-      sHeight?: CSSSize
+      sHeight: CSSSize
     ): this;
     /**
      * Sets a new value for property {@link #getLayout layout}.
@@ -7254,11 +9200,16 @@ declare module "sap/ui/webc/fiori/Timeline" {
       /**
        * New value for property `width`
        */
-      sWidth?: CSSSize
+      sWidth: CSSSize
     ): this;
   }
 
   export interface $TimelineSettings extends $WebComponentSettings {
+    /**
+     * Defines the accessible aria name of the component.
+     */
+    accessibleName?: string | PropertyBindingInfo;
+
     /**
      * Defines the height of the control
      */
@@ -8023,7 +9974,7 @@ declare module "sap/ui/webc/fiori/UploadCollection" {
     /**
      * Gets current value of property {@link #getAccessibleName accessibleName}.
      *
-     * Sets the accessible aria name of the component.
+     * Defines the accessible aria name of the component.
      *
      * Default value is `empty string`.
      */
@@ -8183,7 +10134,7 @@ declare module "sap/ui/webc/fiori/UploadCollection" {
     /**
      * Sets a new value for property {@link #getAccessibleName accessibleName}.
      *
-     * Sets the accessible aria name of the component.
+     * Defines the accessible aria name of the component.
      *
      * When called with a value of `null` or `undefined`, the default value of the property will be restored.
      *
@@ -8206,7 +10157,7 @@ declare module "sap/ui/webc/fiori/UploadCollection" {
       /**
        * New value for property `height`
        */
-      sHeight?: CSSSize
+      sHeight: CSSSize
     ): this;
     /**
      * Sets a new value for property {@link #getHideDragOverlay hideDragOverlay}.
@@ -8291,13 +10242,13 @@ declare module "sap/ui/webc/fiori/UploadCollection" {
       /**
        * New value for property `width`
        */
-      sWidth?: CSSSize
+      sWidth: CSSSize
     ): this;
   }
 
   export interface $UploadCollectionSettings extends $WebComponentSettings {
     /**
-     * Sets the accessible aria name of the component.
+     * Defines the accessible aria name of the component.
      */
     accessibleName?: string | PropertyBindingInfo;
 
@@ -9368,6 +11319,18 @@ declare module "sap/ui/webc/fiori/ViewSettingsDialog" {
          * The currently selected `sap.ui.webc.fiori.SortItem` text attribute.
          */
         sortBy?: string;
+        /**
+         * The currently selected `sap.ui.webc.fiori.SortItem`.
+         */
+        sortByItem?: HTMLElement;
+        /**
+         * The selected sort order (true = descending, false = ascending).
+         */
+        sortDescending?: boolean;
+        /**
+         * The selected filters items.
+         */
+        filterItems?: any[];
       }
     ): this;
     /**
@@ -9386,6 +11349,18 @@ declare module "sap/ui/webc/fiori/ViewSettingsDialog" {
          * The currently selected `sap.ui.webc.fiori.SortItem` text attribute.
          */
         sortBy?: string;
+        /**
+         * The currently selected `sap.ui.webc.fiori.SortItem`.
+         */
+        sortByItem?: HTMLElement;
+        /**
+         * The selected sort order (true = descending, false = ascending).
+         */
+        sortDescending?: boolean;
+        /**
+         * The selected filters items.
+         */
+        filterItems?: any[];
       }
     ): this;
     /**
@@ -9567,6 +11542,16 @@ declare module "sap/ui/webc/fiori/Wizard" {
    * **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`.
    *
@@ -9821,7 +11806,7 @@ declare module "sap/ui/webc/fiori/Wizard" {
       /**
        * New value for property `height`
        */
-      sHeight?: CSSSize
+      sHeight: CSSSize
     ): this;
   }
 
@@ -9973,19 +11958,14 @@ declare module "sap/ui/webc/fiori/WizardStep" {
      */
     getContent(): Control[];
     /**
-     * Gets current value of property {@link #getDisabled disabled}.
-     *
-     * Defines if the step is `disabled`. When disabled the step is displayed, but the user can't select the
-     * step by clicking or navigate to it with scrolling.
-     *
+     * Gets current value of property {@link #getEnabled enabled}.
      *
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
      *
-     * **Note:** Step can't be `selected` and `disabled` at the same time. In this case the `selected` property
-     * would take precedence.
-     *
-     * Default value is `false`.
+     * Default value is `true`.
      */
-    getDisabled(): boolean;
+    getEnabled(): boolean;
     /**
      * Gets current value of property {@link #getIcon icon}.
      *
@@ -10101,25 +12081,20 @@ declare module "sap/ui/webc/fiori/WizardStep" {
       bBranching?: boolean
     ): this;
     /**
-     * Sets a new value for property {@link #getDisabled disabled}.
-     *
-     * Defines if the step is `disabled`. When disabled the step is displayed, but the user can't select the
-     * step by clicking or navigate to it with scrolling.
-     *
-     *
+     * Sets a new value for property {@link #getEnabled enabled}.
      *
-     * **Note:** Step can't be `selected` and `disabled` at the same time. In this case the `selected` property
-     * would take precedence.
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
      *
      * 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 `true`.
      */
-    setDisabled(
+    setEnabled(
       /**
-       * New value for property `disabled`
+       * New value for property `enabled`
        */
-      bDisabled?: boolean
+      bEnabled?: boolean
     ): this;
     /**
      * Sets a new value for property {@link #getIcon icon}.
@@ -10217,15 +12192,10 @@ declare module "sap/ui/webc/fiori/WizardStep" {
     branching?: boolean | PropertyBindingInfo;
 
     /**
-     * Defines if the step is `disabled`. When disabled the step is displayed, but the user can't select the
-     * step by clicking or navigate to it with scrolling.
-     *
-     *
-     *
-     * **Note:** Step can't be `selected` and `disabled` at the same time. In this case the `selected` property
-     * would take precedence.
+     * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in
+     * the tab chain.
      */
-    disabled?: boolean | PropertyBindingInfo;
+    enabled?: boolean | PropertyBindingInfo;
 
     /**
      * Defines the `icon` of the step.
@@ -10281,6 +12251,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;
@@ -10291,6 +12263,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;