@ui5/webcomponents-fiori 1.0.2 → 1.1.0

package/dist/api.json

@@ -13,7 +13,7 @@
       "visibility": "public",
       "since": "1.0.0-rc.11",
       "extends": "UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3> The Bar is a container which is primarily used to hold titles, buttons and input elements and its design and functionality is the basis for page headers and footers. The component consists of three areas to hold its content - startContent slot, default slot and endContent slot. It has the capability to center content, such as a title, while having other components on the left and right side.\n\n<h3>Usage</h3> With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter. <br> <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n<h3>Responsive Behavior</h3> The default slot will be centered in the available space between the startContent and the endContent areas, therefore it might not always be centered in the entire bar.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-bar</code> exposes the following CSS Shadow Parts: <ul> <li>bar - Used to style the wrapper of the content of the component</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/Bar.js\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3> The Bar is a container which is primarily used to hold titles, buttons and input elements and its design and functionality is the basis for page headers and footers. The component consists of three areas to hold its content - startContent slot, default slot and endContent slot. It has the capability to center content, such as a title, while having other components on the left and right side.\n\n<h3>Usage</h3> With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter. <br> <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n<h3>Responsive Behavior</h3> The default slot will be centered in the available space between the startContent and the endContent areas, therefore it might not always be centered in the entire bar.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-bar</code> exposes the following CSS Shadow Parts: <ul> <li>bar - Used to style the wrapper of the content of the component</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/Bar.js\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -92,6 +92,115 @@
         }
       ]
     },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.DynamicSideContent",
+      "basename": "DynamicSideContent",
+      "tagname": "ui5-dynamic-side-content",
+      "resource": "DynamicSideContent.js",
+      "module": "DynamicSideContent",
+      "static": true,
+      "visibility": "public",
+      "since": "1.1.0",
+      "extends": "UI5Element",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe DynamicSideContent (<code>ui5-dynamic-side-content</code>) 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.\n\n<h3>Usage</h3>\n\n<i>When to use?</i>\n\nUse 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.\n\n<i>When not to use?</i>\n\nDon'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.\n\n<h3>Responsive Behavior</h3>\n\nScreen width > 1440px\n\n<ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px each).</li> <li>If the application defines a trigger, the side content can be hidden.</li></ul>\n\nScreen width <= 1440px and > 1024px\n\n<ul><li>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.</li></ul>\n\nScreen width <= 1024px and > 720px\n\n<ul><li>The side content ratio is fixed to 340px, and the main content takes the rest of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code> and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>\n\nScreen width <= 720px (for example on a mobile device)\n\n<ul><li>In this case, the side content automatically disappears from the screen (unless specified to stay under the content by setting of <code>sideContentVisibility</code> property to <code>AlwaysShow</code>) 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.</li></ul>\n\nA 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.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/DynamicSideContent\";</code>",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "equalSplit",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "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.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hideMainContent",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "Defines the visibility of the main content.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hideSideContent",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "Defines the visibility of the side content.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "sideContentFallDown",
+          "visibility": "public",
+          "type": "SideContentFallDown",
+          "description": "Defines on which breakpoints the side content falls down below the main content.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>BelowXL</code></li> <li><code>BelowL</code></li> <li><code>BelowM</code></li> <li><code>OnMinimumWidth</code></li> </ul>",
+          "defaultValue": "\"OnMinimumWidth\""
+        },
+        {
+          "name": "sideContentPosition",
+          "visibility": "public",
+          "type": "SideContentPosition",
+          "description": "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).\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Start</code></li> <li><code>End</code></li> </ul>",
+          "defaultValue": "\"End\""
+        },
+        {
+          "name": "sideContentVisibility",
+          "visibility": "public",
+          "type": "SideContentVisibility",
+          "description": "Defines on which breakpoints the side content is visible.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>AlwaysShow</code></li> <li><code>ShowAboveL</code></li> <li><code>ShowAboveM</code></li> <li><code>ShowAboveS</code></li> <li><code>NeverShow</code></li> </ul>",
+          "defaultValue": "\"ShowAboveS\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "visibility": "public",
+          "type": "HTMLElement[]",
+          "description": "Defines the main content."
+        },
+        {
+          "name": "sideContent",
+          "visibility": "public",
+          "type": "HTMLElement[]",
+          "description": "Defines the side content."
+        }
+      ],
+      "events": [
+        {
+          "name": "layout-change",
+          "visibility": "public",
+          "parameters": [
+            {
+              "name": "currentBreakpoint",
+              "type": "String",
+              "description": "the current breakpoint."
+            },
+            {
+              "name": "previousBreakpoint",
+              "type": "String",
+              "description": "the breakpoint that was active before change to current breakpoint."
+            },
+            {
+              "name": "mainContentVisible",
+              "type": "Boolean",
+              "description": "visibility of the main content."
+            },
+            {
+              "name": "sideContentVisible",
+              "type": "Boolean",
+              "description": "visibility of the side content."
+            }
+          ],
+          "description": "Fires when the current breakpoint has been changed."
+        }
+      ],
+      "methods": [
+        {
+          "name": "toggleContents",
+          "visibility": "public",
+          "returnValue": { "type": "String" },
+          "description": "Toggles visibility of main and side contents on S screen size (mobile device)."
+        }
+      ]
+    },
     {
       "kind": "class",
       "name": "sap.ui.webcomponents.fiori.FilterItem",
@@ -168,7 +277,7 @@
       "visibility": "public",
       "since": "1.0.0-rc.8",
       "extends": "UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>FlexibleColumnLayout</code> 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.\n\n<h3>Usage</h3>\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.). The Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n<h3>Responsive Behavior</h3>\n\nThe <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> 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.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<ul> <li>[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).</li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>FlexibleColumnLayout</code> 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.\n\n<h3>Usage</h3>\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.). The Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n<h3>Responsive Behavior</h3>\n\nThe <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> 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.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<h4>Basic Navigation</h4> <ul> <li>[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).</li> <li>This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code></li> </ul>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -177,12 +286,19 @@
           "type": "Object",
           "description": "Allows the user to replace the whole layouts configuration"
         },
+        {
+          "name": "accessibilityRoles",
+          "visibility": "public",
+          "since": "1.1.0",
+          "type": "object",
+          "description": "An object of strings that defines additional accessibility roles for further customization.\n\nIt supports the following fields: - <code>startColumnRole</code>: the accessibility role for the <code>startColumn</code> - <code>startArrowContainerRole</code>: the accessibility role for the first arrow container (between the <code>begin</code> and <code>mid</code> columns) - <code>midColumnRole</code>: the accessibility role for the <code>midColumn</code> - <code>endArrowContainerRole</code>: the accessibility role for the second arrow container (between the <code>mid</code> and <code>end</code> columns) - <code>endColumnRole</code>: the accessibility role for the <code>endColumn</code>"
+        },
         {
           "name": "accessibilityTexts",
           "visibility": "public",
           "since": "1.0.0-rc.11",
           "type": "object",
-          "description": "An object of strings that defines several additional accessibility texts for even further customization.\n\nIt supports the following fields: - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right"
+          "description": "An object of strings that defines several additional accessibility texts for even further customization.\n\nIt supports the following fields: - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right - <code>startArrowContainerAccessibleName</code>: the text that the first arrow container (between the <code>begin</code> and <code>mid</code> columns) will have as <code>aria-label</code> - <code>endArrowContainerAccessibleName</code>: the text that the second arrow container (between the <code>mid</code> and <code>end</code> columns) will have as <code>aria-label</code>"
         },
         {
           "name": "columnLayout",
@@ -339,7 +455,7 @@
           "name": "name",
           "visibility": "public",
           "type": "IllustrationMessageType",
-          "description": "Defines the illustration name that will be displayed in the component. <br><br> Available illustrations are: <ul> <li><code>BeforeSearch</code></li> <li><code>NoActivities</code></li> <li><code>NoData</code></li> <li><code>NoEntries</code></li> <li><code>NoMail</code></li> <li><code>NoNotifications</code></li> <li><code>NoSavedItems</code></li> <li><code>NoSearchResults</code></li> <li><code>NoTasks</code></li> <li><code>UnableToLoad</code></li> <li><code>UnableToUpload</code></li> <li><code>TntCompany</code></li> <li><code>TntExternalLink</code></li> <li><code>TntFaceID</code></li> <li><code>TntFingerprint</code></li> <li><code>TntLock</code></li> <li><code>TntMission</code></li> <li><code>TntNoApplications</code></li> <li><code>TntNoFlows</code></li> <li><code>TntNoUsers</code></li> <li><code>TntRadar</code></li> <li><code>TntServices</code></li> <li><code>TntSessionExpired</code></li> <li><code>TntSessionExpiring</code></li> <li><code>TntSuccess</code></li> <li><code>TntSuccessfulAuth</code></li> <li><code>TntUnlock</code></li> <li><code>TntUnsuccessfulAuth</code></li> </ul> <br><br> <b>Note:</b> By default the <code>BeforeSearch</code> illustration is loaded. <br> When using an illustration type, other than the default, it should be loaded in addition: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";</code> <br><br> <b>Note:</b> TNT illustrations cointain <code>Tnt</code> prefix in their name. You can import them removing the <code>Tnt</code> prefix like this: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";</code>",
+          "description": "Defines the illustration name that will be displayed in the component. <br><br> Available illustrations are: <ul> <li><code>BeforeSearch</code></li> <li><code>NoActivities</code></li> <li><code>NoData</code></li> <li><code>NoMail</code></li> <li><code>NoMail_v1</code></li> <li><code>NoEntries</code></li> <li><code>NoNotifications</code></li> <li><code>NoSavedItems</code></li> <li><code>NoSavedItems_v1</code></li> <li><code>NoSearchResults</code></li> <li><code>NoTasks</code></li> <li><code>NoTasks_v1</code></li> <li><code>UnableToLoad</code></li> <li><code>UnableToLoadImage</code></li> <li><code>UnableToUpload</code></li> <li><code>AddColumn</code></li> <li><code>AddPeople</code></li> <li><code>BalloonSky</code></li> <li><code>Connection</code></li> <li><code>EmptyCalendar</code></li> <li><code>EmptyList</code></li> <li><code>EmptyPlanningCalendar</code></li> <li><code>ErrorScreen</code></li> <li><code>FilterTable</code></li> <li><code>GroupTable</code></li> <li><code>NoFilterResults</code></li> <li><code>PageNotFound</code></li> <li><code>ReloadScreen</code></li> <li><code>ResizeColumn</code></li> <li><code>SearchEarth</code></li> <li><code>SearchFolder</code></li> <li><code>SimpleBalloon</code></li> <li><code>SimpleBell</code></li> <li><code>SimpleCalendar</code></li> <li><code>SimpleCheckMark</code></li> <li><code>SimpleConnection</code></li> <li><code>SimpleEmptyDoc</code></li> <li><code>SimpleEmptyList</code></li> <li><code>SimpleError</code></li> <li><code>SimpleMagnifier</code></li> <li><code>SimpleMail</code></li> <li><code>SimpleNoSavedItems</code></li> <li><code>SimpleNotFoundMagnifier</code></li> <li><code>SimpleReload</code></li> <li><code>SimpleTask</code></li> <li><code>SleepingBell</code></li> <li><code>SortColumn</code></li> <li><code>SuccessBalloon</code></li> <li><code>SuccessCheckMark</code></li> <li><code>SuccessHighFive</code></li> <li><code>SuccessScreen</code></li> <li><code>Tent</code></li> <li><code>UploadCollection</code></li> <li><code>TntCompany</code></li> <li><code>TntExternalLink</code></li> <li><code>TntFaceID</code></li> <li><code>TntFingerprint</code></li> <li><code>TntLock</code></li> <li><code>TntMission</code></li> <li><code>TntNoApplications</code></li> <li><code>TntNoFlows</code></li> <li><code>TntNoUsers</code></li> <li><code>TntRadar</code></li> <li><code>TntServices</code></li> <li><code>TntSessionExpired</code></li> <li><code>TntSessionExpiring</code></li> <li><code>TntSuccess</code></li> <li><code>TntSuccessfulAuth</code></li> <li><code>TntUnlock</code></li> <li><code>TntUnsuccessfulAuth</code></li> </ul> <br><br> <b>Note:</b> By default the <code>BeforeSearch</code> illustration is loaded. <br> When using an illustration type, other than the default, it should be loaded in addition: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";</code> <br><br> <b>Note:</b> TNT illustrations cointain <code>Tnt</code> prefix in their name. You can import them removing the <code>Tnt</code> prefix like this: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";</code>",
           "defaultValue": "\"BeforeSearch\""
         },
         {
@@ -375,6 +491,16 @@
         }
       ]
     },
+    {
+      "kind": "interface",
+      "name": "sap.ui.webcomponents.fiori.IMediaGalleryItem",
+      "basename": "IMediaGalleryItem",
+      "resource": "Interfaces.js",
+      "module": "Interfaces",
+      "static": true,
+      "visibility": "public",
+      "description": "Interface for components that can be slotted inside <code>ui5-media-gallery</code> as items."
+    },
     {
       "kind": "interface",
       "name": "sap.ui.webcomponents.fiori.INotificationAction",
@@ -475,6 +601,136 @@
       "visibility": "public",
       "description": "Interface for components that may be slotted inside <code>ui5-wizard</code> as wizard steps"
     },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.MediaGallery",
+      "basename": "MediaGallery",
+      "tagname": "ui5-media-gallery",
+      "resource": "MediaGallery.js",
+      "module": "MediaGallery",
+      "static": true,
+      "visibility": "public",
+      "since": "1.1.0",
+      "extends": "UI5Element",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui-media-gallery</code> component allows the user to browse through multimedia items. Currently, the supported items are images and videos. The items should be defined using the <code>ui5-media-gallery-item</code> component.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item is displayed in larger size. <br> 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.\n\n<h3>Keyboard Handling</h3> The <code>ui5-media-gallery</code> provides advanced keyboard handling. <br> When the thumbnails menu is focused the following keyboard shortcuts allow the user to navigate through the thumbnail items: <br>\n\n<ul> <li>[UP/DOWN] - Navigates up and down the items</li> <li>[HOME] - Navigates to first item</li> <li>[END] - Navigates to the last item</li> <li>[SPACE/ENTER] - Select an item </ul> <br>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/MediaGallery\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem\";</code>",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "interactiveDisplayArea",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "If enabled, a <code>display-area-click</code> event is fired when the user clicks or taps on the display area. <br> The display area is the central area that contains the enlarged content of the currently selected item.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "layout",
+          "visibility": "public",
+          "type": "MediaGalleryLayout",
+          "description": "Determines the layout of the component. <br><br> Available options are: <ul> <li><code>Auto</code></li> <li><code>Vertical</code></li> <li><code>Horizontal</code></li> </ul>",
+          "defaultValue": "\"Auto\""
+        },
+        {
+          "name": "menuHorizontalAlign",
+          "visibility": "public",
+          "type": "MediaGalleryMenuHorizontalAlign",
+          "description": "Determines the horizontal alignment of the thumbnails menu vs. the central display area. <br><br> Available options are: <ul> <li><code>Left</code></li> <li><code>Right</code></li> </ul>",
+          "defaultValue": "\"Left\""
+        },
+        {
+          "name": "menuVerticalAlign",
+          "visibility": "public",
+          "type": "MediaGalleryMenuVerticalAlign",
+          "description": "Determines the vertical alignment of the thumbnails menu vs. the central display area. <br><br> Available options are: <ul> <li><code>Top</code></li> <li><code>Bottom</code></li> </ul>",
+          "defaultValue": "\"Bottom\""
+        },
+        {
+          "name": "showAllThumbnails",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "If set to <code>true</code>, all thumbnails are rendered in a scrollable container. If <code>false</code>, only up to five thumbnails are rendered, followed by an overflow button that shows the count of the remaining thumbnails.",
+          "defaultValue": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "propertyName": "items",
+          "visibility": "public",
+          "type": "sap.ui.webcomponents.fiori.IMediaGalleryItem[]",
+          "description": "Defines the component items.\n\n<br><br> <b>Note:</b> Only one selected item is allowed.\n\n<br><br> <b>Note:</b> Use the <code>ui5-media-gallery-item</code> component to define the desired items."
+        }
+      ],
+      "events": [
+        {
+          "name": "display-area-click",
+          "visibility": "public",
+          "description": "Fired when the display area is clicked.<br> The display area is the central area that contains the enlarged content of the currently selected item."
+        },
+        {
+          "name": "overflow-click",
+          "visibility": "public",
+          "description": "Fired when the thumbnails overflow button is clicked."
+        },
+        {
+          "name": "selection-change",
+          "visibility": "public",
+          "parameters": [ { "name": "item", "type": "HTMLElement", "description": "the selected item." } ],
+          "description": "Fired when selection is changed by user interaction."
+        }
+      ]
+    },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.MediaGalleryItem",
+      "basename": "MediaGalleryItem",
+      "tagname": "ui5-media-gallery-item",
+      "resource": "MediaGalleryItem.js",
+      "module": "MediaGalleryItem",
+      "static": true,
+      "visibility": "public",
+      "since": "1.1.0",
+      "extends": "sap.ui.webcomponents.base.UI5Element",
+      "implements": [ "sap.ui.webcomponents.fiori.IMediaGalleryItem" ],
+      "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-media-gallery-item</code> web component represents the items displayed in the <code>ui5-media-gallery</code> web component. <br><br> <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>. <br><br>\n\n<h3>Keyboard Handling</h3> The <code>ui5-media-gallery</code> provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation: <br> <ul> <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";</code>",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "disabled",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "Defines whether the component is in disabled state.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "layout",
+          "visibility": "public",
+          "type": "MediaGalleryItemLayout",
+          "description": "Determines the layout of the item container. <br><br> Available options are: <ul> <li><code>Square</code></li> <li><code>Wide</code></li> </ul>",
+          "defaultValue": "\"Square\""
+        },
+        {
+          "name": "selected",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "Defines the selected state of the component.",
+          "defaultValue": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "visibility": "public",
+          "type": "HTMLElement[]",
+          "description": "Defines the content of the component."
+        },
+        {
+          "name": "thumbnail",
+          "visibility": "public",
+          "type": "HTMLElement[]",
+          "description": "Defines the content of the thumbnail."
+        }
+      ]
+    },
     {
       "kind": "class",
       "name": "sap.ui.webcomponents.fiori.NotificationAction",
@@ -859,9 +1115,16 @@
       "visibility": "public",
       "since": "0.8.0",
       "extends": "sap.ui.webcomponents.base.UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-shellbar</code> is meant to serve as an application header and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on. <br><br>\n\n<h3>Stable DOM Refs</h3>\n\nYou can use the following stable DOM refs for the <code>ui5-shellbar</code>: <ul> <li>logo</li> <li>copilot</li> <li>notifications</li> <li>overflow</li> <li>profile</li> <li>product-switch</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts: <ul> <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ShellBar\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-shellbar</code> is meant to serve as an application header and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on. <br><br>\n\n<h3>Stable DOM Refs</h3>\n\nYou can use the following stable DOM refs for the <code>ui5-shellbar</code>: <ul> <li>logo</li> <li>copilot</li> <li>notifications</li> <li>overflow</li> <li>profile</li> <li>product-switch</li> </ul>\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts: <ul> <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ShellBar\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
+        {
+          "name": "accessibilityTexts",
+          "visibility": "public",
+          "since": "1.1.0",
+          "type": "object",
+          "description": "An object of strings that defines several additional accessibility texts for even further customization.\n\nIt supports the following fields: - <code>profileButtonTitle</code>: defines the tooltip for the profile button - <code>logoTitle</code>: defines the tooltip for the logo"
+        },
         {
           "name": "copilotDomRef",
           "readonly": "true",
@@ -1149,7 +1412,7 @@
       "visibility": "public",
       "since": "1.0.0-rc.8",
       "extends": "UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>SideNavigation</code> is used as a standard menu in applications. It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned). <ul> <li>The header is meant for displaying user related information - profile data, avatar, etc.</li> <li>The main navigation section is related to the user’s current work context</li> <li>The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on). </li> </ul>\n\n<h3>Usage</h3>\n\nUse the available <code>ui5-side-navigation-item</code> and <code>ui5-side-navigation-sub-item</code> 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.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";</code> (for <code>ui5-side-navigation-item</code>) <br> <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";</code> (for <code>ui5-side-navigation-sub-item</code>)",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>SideNavigation</code> is used as a standard menu in applications. It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned). <ul> <li>The header is meant for displaying user related information - profile data, avatar, etc.</li> <li>The main navigation section is related to the user’s current work context</li> <li>The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on). </li> </ul>\n\n<h3>Usage</h3>\n\nUse the available <code>ui5-side-navigation-item</code> and <code>ui5-side-navigation-sub-item</code> 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.\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";</code> (for <code>ui5-side-navigation-item</code>) <br> <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";</code> (for <code>ui5-side-navigation-sub-item</code>)",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -1540,59 +1803,299 @@
       "description": "Different illustration types of Illustrated Message.",
       "constructor": { "visibility": "public" },
       "properties": [
+        {
+          "name": "AddColumn",
+          "visibility": "public",
+          "type": "AddColumn",
+          "description": "\"Add Column\" illustration type."
+        },
+        {
+          "name": "AddPeople",
+          "visibility": "public",
+          "type": "AddPeople",
+          "description": "\"Add People\" illustration type."
+        },
+        {
+          "name": "BalloonSky",
+          "visibility": "public",
+          "type": "BalloonSky",
+          "description": "\"Balloon Sky\" illustration type."
+        },
         {
           "name": "BeforeSearch",
           "visibility": "public",
           "type": "BeforeSearch",
-          "description": "\"BeforeSearch\" illustration type."
+          "description": "\"Before Search\" illustration type."
+        },
+        {
+          "name": "Connection",
+          "visibility": "public",
+          "type": "Connection",
+          "description": "\"Connection\" illustration type."
+        },
+        {
+          "name": "EmptyCalendar",
+          "visibility": "public",
+          "type": "EmptyCalendar",
+          "description": "\"Empty Calendar\" illustration type."
+        },
+        {
+          "name": "EmptyList",
+          "visibility": "public",
+          "type": "EmptyList",
+          "description": "\"Empty List\" illustration type."
+        },
+        {
+          "name": "EmptyPlanningCalendar",
+          "visibility": "public",
+          "type": "EmptyPlanningCalendar",
+          "description": "\"Empty Planning Calendar\" illustration type."
+        },
+        {
+          "name": "ErrorScreen",
+          "visibility": "public",
+          "type": "ErrorScreen",
+          "description": "\"Error Screen\" illustration type."
+        },
+        {
+          "name": "FilterTable",
+          "visibility": "public",
+          "type": "FilterTable",
+          "description": "\"Filter Table\" illustration type."
+        },
+        {
+          "name": "GroupTable",
+          "visibility": "public",
+          "type": "GroupTable",
+          "description": "\"Group Table\" illustration type."
         },
         {
           "name": "NoActivities",
           "visibility": "public",
           "type": "NoActivities",
-          "description": "\"NoActivities\" illustration type."
+          "description": "\"No Activities\" illustration type."
         },
         {
           "name": "NoData",
           "visibility": "public",
           "type": "NoData",
-          "description": "\"NoData\" illustration type."
+          "description": "\"No Data\" illustration type."
         },
         {
           "name": "NoEntries",
           "visibility": "public",
           "type": "NoEntries",
-          "description": "\"NoEntries\" illustration type."
+          "description": "\"No Entries\" illustration type."
+        },
+        {
+          "name": "NoFilterResults",
+          "visibility": "public",
+          "type": "NoFilterResults",
+          "description": "\"No Filter Results\" illustration type."
         },
         {
           "name": "NoMail",
           "visibility": "public",
           "type": "NoMail",
-          "description": "\"NoMail\" illustration type."
+          "description": "\"No Email\" illustration type."
+        },
+        {
+          "name": "NoMail_v1",
+          "visibility": "public",
+          "type": "NoMail_v1",
+          "description": "\"No Email v1\" illustration type."
         },
         {
           "name": "NoNotifications",
           "visibility": "public",
           "type": "NoNotifications",
-          "description": "\"NoNotifications\" illustration type."
+          "description": "\"No Notifications\" illustration type."
         },
         {
           "name": "NoSavedItems",
           "visibility": "public",
           "type": "NoSavedItems",
-          "description": "\"NoSavedItems\" illustration type."
+          "description": "\"No Saved Items\" illustration type."
+        },
+        {
+          "name": "NoSavedItems_v1",
+          "visibility": "public",
+          "type": "NoSavedItems_v1",
+          "description": "\"No Saved Items v1\" illustration type."
         },
         {
           "name": "NoSearchResults",
           "visibility": "public",
           "type": "NoSearchResults",
-          "description": "\"NoSearchResults\" illustration type."
+          "description": "\"No Search Results\" illustration type."
         },
         {
           "name": "NoTasks",
           "visibility": "public",
           "type": "NoTasks",
-          "description": "\"NoTasks\" illustration type."
+          "description": "\"No Tasks\" illustration type."
+        },
+        {
+          "name": "NoTasks_v1",
+          "visibility": "public",
+          "type": "NoTasks_v1",
+          "description": "\"No Tasks v1\" illustration type."
+        },
+        {
+          "name": "PageNotFound",
+          "visibility": "public",
+          "type": "PageNotFound",
+          "description": "\"Page Not Found\" illustration type."
+        },
+        {
+          "name": "ReloadScreen",
+          "visibility": "public",
+          "type": "ReloadScreen",
+          "description": "\"Reload Screen\" illustration type."
+        },
+        {
+          "name": "ResizeColumn",
+          "visibility": "public",
+          "type": "ResizeColumn",
+          "description": "\"Resize Column\" illustration type."
+        },
+        {
+          "name": "SearchEarth",
+          "visibility": "public",
+          "type": "SearchEarth",
+          "description": "\"Search Earth\" illustration type."
+        },
+        {
+          "name": "SearchFolder",
+          "visibility": "public",
+          "type": "SearchFolder",
+          "description": "\"Search Folder\" illustration type."
+        },
+        {
+          "name": "SimpleBalloon",
+          "visibility": "public",
+          "type": "SimpleBalloon",
+          "description": "\"Simple Balloon\" illustration type."
+        },
+        {
+          "name": "SimpleBell",
+          "visibility": "public",
+          "type": "SimpleBell",
+          "description": "\"Simple Bell\" illustration type."
+        },
+        {
+          "name": "SimpleCalendar",
+          "visibility": "public",
+          "type": "SimpleCalendar",
+          "description": "\"Simple Calendar\" illustration type."
+        },
+        {
+          "name": "SimpleCheckMark",
+          "visibility": "public",
+          "type": "SimpleCheckMark",
+          "description": "\"Simple CheckMark\" illustration type."
+        },
+        {
+          "name": "SimpleConnection",
+          "visibility": "public",
+          "type": "SimpleConnection",
+          "description": "\"Simple Connection\" illustration type."
+        },
+        {
+          "name": "SimpleEmptyDoc",
+          "visibility": "public",
+          "type": "SimpleEmptyDoc",
+          "description": "\"Simple Empty Doc\" illustration type."
+        },
+        {
+          "name": "SimpleEmptyList",
+          "visibility": "public",
+          "type": "SimpleEmptyList",
+          "description": "\"Simple Empty List\" illustration type."
+        },
+        {
+          "name": "SimpleError",
+          "visibility": "public",
+          "type": "SimpleError",
+          "description": "\"Simple Error\" illustration type."
+        },
+        {
+          "name": "SimpleMagnifier",
+          "visibility": "public",
+          "type": "SimpleMagnifier",
+          "description": "\"Simple Magnifier\" illustration type."
+        },
+        {
+          "name": "SimpleMail",
+          "visibility": "public",
+          "type": "SimpleMail",
+          "description": "\"Simple Mail\" illustration type."
+        },
+        {
+          "name": "SimpleNoSavedItems",
+          "visibility": "public",
+          "type": "SimpleNoSavedItems",
+          "description": "\"Simple No Saved Items\" illustration type."
+        },
+        {
+          "name": "SimpleNotFoundMagnifier",
+          "visibility": "public",
+          "type": "SimpleNotFoundMagnifier",
+          "description": "\"Simple Not Found Magnifier\" illustration type."
+        },
+        {
+          "name": "SimpleReload",
+          "visibility": "public",
+          "type": "SimpleReload",
+          "description": "\"Simple Reload\" illustration type."
+        },
+        {
+          "name": "SimpleTask",
+          "visibility": "public",
+          "type": "SimpleTask",
+          "description": "\"Simple Task\" illustration type."
+        },
+        {
+          "name": "SleepingBell",
+          "visibility": "public",
+          "type": "SleepingBell",
+          "description": "\"Sleeping Bell\" illustration type."
+        },
+        {
+          "name": "SortColumn",
+          "visibility": "public",
+          "type": "SortColumn",
+          "description": "\"Sort Column\" illustration type."
+        },
+        {
+          "name": "SuccessBalloon",
+          "visibility": "public",
+          "type": "SuccessBalloon",
+          "description": "\"Success Balloon\" illustration type."
+        },
+        {
+          "name": "SuccessCheckMark",
+          "visibility": "public",
+          "type": "SuccessCheckMark",
+          "description": "\"Success CheckMark\" illustration type."
+        },
+        {
+          "name": "SuccessHighFive",
+          "visibility": "public",
+          "type": "SuccessHighFive",
+          "description": "\"Success HighFive\" illustration type."
+        },
+        {
+          "name": "SuccessScreen",
+          "visibility": "public",
+          "type": "SuccessScreen",
+          "description": "\"Success Screen\" illustration type."
+        },
+        {
+          "name": "Tent",
+          "visibility": "public",
+          "type": "Tent",
+          "description": "\"Tent\" illustration type."
         },
         {
           "name": "TntCodePlaceholder",
@@ -1706,13 +2209,135 @@
           "name": "UnableToLoad",
           "visibility": "public",
           "type": "UnableToLoad",
-          "description": "\"UnableToLoad\" illustration type."
+          "description": "\"Unable To Load\" illustration type."
+        },
+        {
+          "name": "UnableToLoadImage",
+          "visibility": "public",
+          "type": "UnableToLoadImage",
+          "description": "\"Unable To Load Image\" illustration type."
         },
         {
           "name": "UnableToUpload",
           "visibility": "public",
           "type": "UnableToUpload",
-          "description": "\"UnableToUpload\" illustration type."
+          "description": "\"Unable To Upload\" illustration type."
+        },
+        {
+          "name": "UploadCollection",
+          "visibility": "public",
+          "type": "UploadCollection",
+          "description": "\"Upload Collection\" illustration type."
+        }
+      ],
+      "slots": []
+    },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.types.MediaGalleryItemLayout",
+      "basename": "MediaGalleryItemLayout",
+      "resource": "types/MediaGalleryItemLayout.js",
+      "module": "types/MediaGalleryItemLayout",
+      "static": true,
+      "visibility": "public",
+      "description": "Defines the layout of the content displayed in the <code>ui5-media-gallery-item</code>.",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "Square",
+          "visibility": "public",
+          "type": "Square",
+          "description": "Recommended to use when the item contains an image.<br> When a thumbnail is selected, it makes the corresponding enlarged content appear in a square display area."
+        },
+        {
+          "name": "Wide",
+          "visibility": "public",
+          "type": "Wide",
+          "description": "Recommended to use when the item contains video content.<br> 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."
+        }
+      ],
+      "slots": []
+    },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.types.MediaGalleryLayout",
+      "basename": "MediaGalleryLayout",
+      "resource": "types/MediaGalleryLayout.js",
+      "module": "types/MediaGalleryLayout",
+      "static": true,
+      "visibility": "public",
+      "description": "Defines the layout type of the thumbnails list of the <code>ui5-media-gallery</code> component.",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "Auto",
+          "visibility": "public",
+          "type": "Left",
+          "description": "The layout is determined automatically."
+        },
+        {
+          "name": "Horizontal",
+          "visibility": "public",
+          "type": "Right",
+          "description": "Displays the layout as a horizontal split between the thumbnails list and the selected image."
+        },
+        {
+          "name": "Vertical",
+          "visibility": "public",
+          "type": "Left",
+          "description": "Displays the layout as a vertical split between the thumbnails list and the selected image."
+        }
+      ],
+      "slots": []
+    },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.types.MediaGalleryMenuHorizontalAlign",
+      "basename": "MediaGalleryMenuHorizontalAlign",
+      "resource": "types/MediaGalleryMenuHorizontalAlign.js",
+      "module": "types/MediaGalleryMenuHorizontalAlign",
+      "static": true,
+      "visibility": "public",
+      "description": "Defines the horizontal alignment of the thumbnails menu of the <code>ui5-media-gallery</code> component.",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "Left",
+          "visibility": "public",
+          "type": "Left",
+          "description": "Displays the menu on the left side of the target."
+        },
+        {
+          "name": "Right",
+          "visibility": "public",
+          "type": "Right",
+          "description": "Displays the menu on the right side of the target."
+        }
+      ],
+      "slots": []
+    },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.types.MediaGalleryMenuVerticalAlign",
+      "basename": "MediaGalleryMenuVerticalAlign",
+      "resource": "types/MediaGalleryMenuVerticalAlign.js",
+      "module": "types/MediaGalleryMenuVerticalAlign",
+      "static": true,
+      "visibility": "public",
+      "description": "Types for the vertical alignment of the thumbnails menu of the <code>ui5-media-gallery</code> component.",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "Bottom",
+          "visibility": "public",
+          "type": "Bottom",
+          "description": "Displays the menu at the bottom of the reference control."
+        },
+        {
+          "name": "Top",
+          "visibility": "public",
+          "type": "Top",
+          "description": "Displays the menu at the top of the reference control."
         }
       ],
       "slots": []
@@ -1748,6 +2373,114 @@
       ],
       "slots": []
     },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.types.SideContentFallDown",
+      "basename": "SideContentFallDown",
+      "resource": "types/SideContentFallDown.js",
+      "module": "types/SideContentFallDown",
+      "static": true,
+      "visibility": "public",
+      "description": "SideContent FallDown options.",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "BelowL",
+          "visibility": "public",
+          "type": "BelowL",
+          "description": "Side content falls down on breakpoints below L"
+        },
+        {
+          "name": "BelowM",
+          "visibility": "public",
+          "type": "BelowM",
+          "description": "Side content falls down on breakpoints below M"
+        },
+        {
+          "name": "BelowXL",
+          "visibility": "public",
+          "type": "BelowXL",
+          "description": "Side content falls down on breakpoints below XL"
+        },
+        {
+          "name": "OnMinimumWidth",
+          "visibility": "public",
+          "type": "OnMinimumWidth",
+          "description": "Side content falls down on breakpoint M and the minimum width for the side content"
+        }
+      ],
+      "slots": []
+    },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.types.SideContentPosition",
+      "basename": "SideContentPosition",
+      "resource": "types/SideContentPosition.js",
+      "module": "types/SideContentPosition",
+      "static": true,
+      "visibility": "public",
+      "description": "Side Content position options.",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "End",
+          "visibility": "public",
+          "type": "End",
+          "description": "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."
+        },
+        {
+          "name": "Start",
+          "visibility": "public",
+          "type": "Start",
+          "description": "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."
+        }
+      ],
+      "slots": []
+    },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.fiori.types.SideContentVisibility",
+      "basename": "SideContentVisibility",
+      "resource": "types/SideContentVisibility.js",
+      "module": "types/SideContentVisibility",
+      "static": true,
+      "visibility": "public",
+      "description": "Side Content visibility options.",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "AlwaysShow",
+          "visibility": "public",
+          "type": "AlwaysShow",
+          "description": "Show the side content on any breakpoint"
+        },
+        {
+          "name": "NeverShow",
+          "visibility": "public",
+          "type": "NeverShow",
+          "description": "Don't show the side content on any breakpoints"
+        },
+        {
+          "name": "ShowAboveL",
+          "visibility": "public",
+          "type": "ShowAboveL",
+          "description": "Show the side content on XL breakpoint"
+        },
+        {
+          "name": "ShowAboveM",
+          "visibility": "public",
+          "type": "ShowAboveM",
+          "description": "Show the side content on L and XL breakpoints"
+        },
+        {
+          "name": "ShowAboveS",
+          "visibility": "public",
+          "type": "ShowAboveS",
+          "description": "Show the side content on M, L and XL breakpoints"
+        }
+      ],
+      "slots": []
+    },
     {
       "kind": "class",
       "name": "sap.ui.webcomponents.fiori.types.TimelineLayout",
@@ -2038,7 +2771,7 @@
       "visibility": "public",
       "since": "1.0.0-rc.16",
       "extends": "UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-view-settings-dialog</code> component helps the user to sort data within a list or a table. It consists of several lists like <code>Sort order</code> which is built-in and <code>Sort By</code> and <code>Filter By</code> lists, for which you must be provide items(<code>ui5-sort-item</code> & <code>ui5-filter-item</code> respectively) These options can be used to create sorters for a table.\n\nThe <code>ui5-view-settings-dialog</code> interrupts the current application processing as it is the only focused UI element and the main screen is dimmed/blocked. The <code>ui5-view-settings-dialog</code> is modal, which means that user action is required before returning to the parent window is possible.\n\n<h3>Structure</h3> A <code>ui5-view-settings-dialog</code> consists of a header, content, and a footer for action buttons. The <code>ui5-view-settings-dialog</code> is usually displayed at the center of the screen.\n\n<h3>Responsive Behavior</h3> <code>ui5-view-settings-dialog</code> stretches on full screen on phones.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ViewSettingsDialog\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-view-settings-dialog</code> component helps the user to sort data within a list or a table. It consists of several lists like <code>Sort order</code> which is built-in and <code>Sort By</code> and <code>Filter By</code> lists, for which you must be provide items(<code>ui5-sort-item</code> & <code>ui5-filter-item</code> respectively) These options can be used to create sorters for a table.\n\nThe <code>ui5-view-settings-dialog</code> interrupts the current application processing as it is the only focused UI element and the main screen is dimmed/blocked. The <code>ui5-view-settings-dialog</code> is modal, which means that user action is required before returning to the parent window is possible.\n\n<h3>Structure</h3> A <code>ui5-view-settings-dialog</code> consists of a header, content, and a footer for action buttons. The <code>ui5-view-settings-dialog</code> is usually displayed at the center of the screen.\n\n<h3>Responsive Behavior</h3> <code>ui5-view-settings-dialog</code> stretches on full screen on phones.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -2115,7 +2848,7 @@
       "visibility": "public",
       "since": "1.0.0-rc.10",
       "extends": "UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-wizard</code> helps users to complete a complex task by dividing it into sections and guiding them through it. It has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n<h3>Structure</h3> <h4>Navigation area</h4> The top most area of the <code>ui5-wizard</code> is occupied by the navigation area. It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps. <ul> <li> Steps can have different visual representations - numbers or icons. <li> Steps might have labels for better readability - titleText and subTitleText.</li> <li> Steps are defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.</li> </ul>\n\n<b>Note:</b> If no selected step is defined, the first step will be auto selected. <br> <b>Note:</b> If multiple selected steps are defined, the last step will be selected.\n\n<h4>Content</h4> The content occupies the main part of the page. It can hold any type of HTML elements. It's defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.\n\n<h3>Scrolling</h3> The component handles user scrolling by selecting the closest step, based on the current scroll position and scrolls to particular place, when the user clicks on the step within the navigation area. <br><br>\n\n<b>Important:</b> In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height. The component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page. <br><br> <b>For example:</b> <br><br> <code>&lt;ui5-dialog style=\"height: 80%\"&gt;<br></code> <code>&#9;&lt;ui5-wizard&gt;&lt;/ui5-wizard&gt;<br></code> <code>&lt;/ui5-dialog&gt;</code>\n\n<h4>Moving to next step</h4> The <code>ui5-wizard-step</code> provides the necessary API and it's up to the user of the component to use it to move to the next step. You have to set its <code>selected</code> property (and remove the <code>disabled</code> one if set) to <code>true</code>. The <code>ui5-wizard</code> will automatically scroll to the content of the newly selected step. <br><br>\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area. You can place a button, or any other type of element to trigger step change, inside the <code>ui5-wizard-step</code>, and show/hide it when certain fields are filled or user defined criteria is met.\n\n<h3>Usage</h3> <h4>When to use:</h4> When the user has to accomplish a long or unfamiliar task.\n\n<h4>When not to use:</h4> When the task has less than 3 steps.\n\n<h3>Responsive Behavior</h3> On small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap. Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/Wizard.js\";</code> (includes <ui5-wizard-step>)",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-wizard</code> helps users to complete a complex task by dividing it into sections and guiding them through it. It has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n<h3>Structure</h3> <h4>Navigation area</h4> The top most area of the <code>ui5-wizard</code> is occupied by the navigation area. It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps. <ul> <li> Steps can have different visual representations - numbers or icons. <li> Steps might have labels for better readability - titleText and subTitleText.</li> <li> Steps are defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.</li> </ul>\n\n<b>Note:</b> If no selected step is defined, the first step will be auto selected. <br> <b>Note:</b> If multiple selected steps are defined, the last step will be selected.\n\n<h3>Keyboard Handling</h3> The user can navigate using the following keyboard shortcuts: <br>\n\n<h4>Wizard Progress Navigation</h4> <ul> <li>[LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.</li> <li>[UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.</li> <li>[SPACE] or [ENTER], [RETURN] - Selects an active step</li> <li>[HOME] or [PAGE UP] - Focus goes to the first step</li> <li>[END] or [PAGE DOWN] - Focus goes to the last step</li> </ul>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n\n<h4>Content</h4> The content occupies the main part of the page. It can hold any type of HTML elements. It's defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.\n\n<h3>Scrolling</h3> The component handles user scrolling by selecting the closest step, based on the current scroll position and scrolls to particular place, when the user clicks on the step within the navigation area. <br><br>\n\n<b>Important:</b> In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height. The component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page. <br><br> <b>For example:</b> <br><br> <code>&lt;ui5-dialog style=\"height: 80%\"&gt;<br></code> <code>&#9;&lt;ui5-wizard&gt;&lt;/ui5-wizard&gt;<br></code> <code>&lt;/ui5-dialog&gt;</code>\n\n<h4>Moving to next step</h4> The <code>ui5-wizard-step</code> provides the necessary API and it's up to the user of the component to use it to move to the next step. You have to set its <code>selected</code> property (and remove the <code>disabled</code> one if set) to <code>true</code>. The <code>ui5-wizard</code> will automatically scroll to the content of the newly selected step. <br><br>\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area. You can place a button, or any other type of element to trigger step change, inside the <code>ui5-wizard-step</code>, and show/hide it when certain fields are filled or user defined criteria is met.\n\n<h3>Usage</h3> <h4>When to use:</h4> When the user has to accomplish a long or unfamiliar task.\n\n<h4>When not to use:</h4> When the task has less than 3 steps.\n\n<h3>Responsive Behavior</h3> On small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap. Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/Wizard.js\";</code> (includes <ui5-wizard-step>)",
       "constructor": { "visibility": "public" },
       "properties": [],
       "slots": [