@ui5/webcomponents 1.2.6 → 1.4.0

package/dist/api.json

@@ -667,7 +667,7 @@
           "name": "status",
           "visibility": "public",
           "type": "string",
-          "description": "Defines the status text. <br><br> <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed, you can either have <code>action</code>, or <code>status</code>.",
+          "description": "Defines the status text.",
           "defaultValue": "\"\""
         },
         {
@@ -690,7 +690,7 @@
           "name": "action",
           "visibility": "public",
           "type": "HTMLElement[]",
-          "description": "Defines an action, displayed in the right most part of the header. <br><br> <b>Note:</b> If set, the <code>status</code> text will not be displayed, you can either have <code>action</code>, or <code>status</code>."
+          "description": "Defines an action, displayed in the right most part of the header."
         },
         {
           "name": "avatar",
@@ -879,6 +879,14 @@
           "description": "Defines whether the component is read-only. <br><br> <b>Note:</b> A red-only component is not editable, but still provides visual feedback upon user interaction.",
           "defaultValue": "false"
         },
+        {
+          "name": "required",
+          "visibility": "public",
+          "since": "1.3.0",
+          "type": "boolean",
+          "description": "Defines whether the component is required.",
+          "defaultValue": "false"
+        },
         {
           "name": "text",
           "visibility": "public",
@@ -2037,7 +2045,7 @@
       "visibility": "public",
       "extends": "sap.ui.webcomponents.base.UI5Element",
       "implements": [ "sap.ui.webcomponents.main.IIcon" ],
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-icon</code> component represents an SVG icon. There are two main scenarios how the <code>ui5-icon</code> component is used: as a purely decorative element; or as a visually appealing clickable area in the form of an icon button. <br><br> A large set of built-in icons is available and they can be used by setting the <code>name</code> property on the <code>ui5-icon</code>. But before using an icon, you need to import the desired icon. <br>\n\nFor the standard icon collection, you have to import an icon from the <code>@ui5/webcomponents-icons</code> package: <br> <code>import \"@ui5/webcomponents-icons/dist/employee.js\";</code> <br>\n\nFor the SAP Fiori Tools icon collection (supported since 1.0.0-rc.10), you have to import an icon from the <code>@ui5/webcomponents-icons-tnt</code> package: <br> <code>import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";</code>\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<ul> <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li> <li>[SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the ui5-icon without triggering the click event.</li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Icon.js\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-icon</code> component represents an SVG icon. There are two main scenarios how the <code>ui5-icon</code> component is used: as a purely decorative element, <br> or as an interactive element that can be focused and clicked.\n\n<h3>Usage</h3>\n\n1. <b>Get familiar with the icons collections.</b> <br> Before displaying an icon, you need to explore the icons collections to find and import the desired icon. <br> Currently there are 3 icons collection, available as 3 npm packages: <br>\n\n<ul> <li> <ui5-link target=\"_blank\" href=\"https://www.npmjs.com/package/@ui5/webcomponents-icons\" class=\"api-table-content-cell-link\">@ui5/webcomponents-icons</ui5-link> represents the \"SAP-icons\" collection and includes the following <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons\" class=\"api-table-content-cell-link\">icons</ui5-link>. </li> <li> <ui5-link target=\"_blank\" href=\"https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt\" class=\"api-table-content-cell-link\">@ui5/webcomponents-icons-tnt</ui5-link> represents the \"tnt\" collection and includes the following <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT\" class=\"api-table-content-cell-link\">icons</ui5-link>. </li> <li> <ui5-link target=\"_blank\" href=\"https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite\" class=\"api-table-content-cell-link\">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the \"business-suite\" collection and includes the following <ui5-link target=\"_blank\" href=\"https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols\" class=\"api-table-content-cell-link\">icons</ui5-link>. </li> </ul>\n\n2. <b>After exploring the icons collections, add one or more of the packages as dependencies to your project.</b> <br> <code>npm i @ui5/webcomponents-icons</code><br> <code>npm i @ui5/webcomponents-icons-tnt</code><br> <code>npm i @ui5/webcomponents-icons-business-suite</code> <br><br>\n\n3. <b>Then, import the desired icon</b>. <br> <code>import \"@ui5/{package_name}/dist/{icon_name}.js\";</code> <br><br>\n\n<b>For Example</b>: <br>\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the <code>@ui5/webcomponents-icons</code> package: <br> <code>import \"@ui5/webcomponents-icons/dist/employee.js\";</code> <br><br>\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the <code>@ui5/webcomponents-icons-tnt</code> package: <br> <code>import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";</code> <br><br>\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the <code>@ui5/webcomponents-icons-business-suite</code> package: <br> <code>import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";</code> <br><br>\n\n4. <b>Display the icon using the <code>ui5-icon</code> web component.</b><br> Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)<br> and the icon name to the <code>name</code> property. <br><br>\n\n<code>&lt;ui5-icon name=\"employee\">&lt;/ui5-icon></code><br> <code>&lt;ui5-icon name=\"tnt/antenna\">&lt;/ui5-icon></code><br> <code>&lt;ui5-icon name=\"business-suite/ab-testing\">&lt;/ui5-icon></code>\n\n<h3>Keyboard Handling</h3>\n\n<ul> <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li> <li>[SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the ui5-icon without triggering the click event.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Icon.js\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -2067,7 +2075,7 @@
           "name": "name",
           "visibility": "public",
           "type": "string",
-          "description": "Defines the unique identifier (icon name) of the component. <br>\n\nTo browse all available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>. <br>\n\nExample: <br> <code>name='add'</code>, <code>name='delete'</code>, <code>name='employee'</code>. <br><br>\n\n<b>Note:</b> To use the SAP Fiori Tools icons, you need to set the <code>tnt</code> prefix in front of the icon's name. <br>\n\nExample: <br> <code>name='tnt/antenna'</code>, <code>name='tnt/actor'</code>, <code>name='tnt/api'</code>.",
+          "description": "Defines the unique identifier (icon name) of the component. <br>\n\nTo browse all available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">SAP Icons</ui5-link>, <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT\" class=\"api-table-content-cell-link\">SAP Fiori Tools</ui5-link> and <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">SAP Business Suite</ui5-link> collections. <br>\n\nExample: <br> <code>name='add'</code>, <code>name='delete'</code>, <code>name='employee'</code>. <br><br>\n\n<b>Note:</b> To use the SAP Fiori Tools icons, you need to set the <code>tnt</code> prefix in front of the icon's name. <br>\n\nExample: <br> <code>name='tnt/antenna'</code>, <code>name='tnt/actor'</code>, <code>name='tnt/api'</code>. <br><br>\n\n<b>Note:</b> To use the SAP Business Suite icons, you need to set the <code>business-suite</code> prefix in front of the icon's name. <br>\n\nExample: <br> <code>name='business-suite/3d'</code>, <code>name='business-suite/1x2-grid-layout'</code>, <code>name='business-suite/4x4-grid-layout'</code>.",
           "defaultValue": "\"\""
         },
         {
@@ -2120,6 +2128,16 @@
       "visibility": "public",
       "description": "Interface for components that may be slotted inside a <code>ui5-list</code> as items"
     },
+    {
+      "kind": "interface",
+      "name": "sap.ui.webcomponents.main.IMenuItem",
+      "basename": "IMenuItem",
+      "resource": "Interfaces.js",
+      "module": "Interfaces",
+      "static": true,
+      "visibility": "public",
+      "description": "Interface for components that may be slotted inside <code>ui5-menu</code> as items"
+    },
     {
       "kind": "interface",
       "name": "sap.ui.webcomponents.main.IMultiComboBoxItem",
@@ -2178,7 +2196,7 @@
           "visibility": "public",
           "since": "1.0.0-rc.5",
           "type": "Integer",
-          "description": "Sets the maximum number of characters available in the input field."
+          "description": "Sets the maximum number of characters available in the input field. <br><br> <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored."
         },
         {
           "name": "name",
@@ -2193,6 +2211,14 @@
           "type": "undefined",
           "description": "Returns a reference to the native input element"
         },
+        {
+          "name": "noTypeahead",
+          "visibility": "public",
+          "since": "1.4.0",
+          "type": "boolean",
+          "description": "Defines whether the value will be autcompleted to match an item",
+          "defaultValue": "false"
+        },
         {
           "name": "placeholder",
           "visibility": "public",
@@ -2341,6 +2367,12 @@
           "visibility": "protected",
           "description": "Returns the caret position inside the native input"
         },
+        {
+          "name": "openPicker",
+          "visibility": "public",
+          "since": "1.3.0",
+          "description": "Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open."
+        },
         {
           "name": "setCaretPosition",
           "visibility": "protected",
@@ -2708,7 +2740,7 @@
               "description": "the item about to be closed."
             }
           ],
-          "description": "Fired when the <code>Close</code> button of any item is clicked <br><br> <b>Note:</b> This event is applicable to <code>ui5-li-notification</code> items only, not to be confused with <code>item-delete</code>."
+          "description": "Fired when the <code>Close</code> button of any item is clicked <br><br> <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items), not to be confused with <code>item-delete</code>."
         },
         {
           "name": "item-delete",
@@ -2721,7 +2753,7 @@
           "visibility": "public",
           "since": "1.0.0-rc.8",
           "parameters": [ { "name": "item", "type": "HTMLElement", "description": "the toggled item." } ],
-          "description": "Fired when the <code>Toggle</code> button of any item is clicked. <br><br> <b>Note:</b> This event is applicable to <code>ui5-li-notification-group</code> items only."
+          "description": "Fired when the <code>Toggle</code> button of any item is clicked. <br><br> <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items)."
         },
         {
           "name": "load-more",
@@ -2748,6 +2780,11 @@
         }
       ],
       "methods": [
+        {
+          "name": "focusFirstItem",
+          "visibility": "protected",
+          "description": "Focuses the first list item and sets its tabindex to \"0\" via the ItemNavigation"
+        },
         {
           "name": "focusItem",
           "visibility": "protected",
@@ -2816,6 +2853,128 @@
       ],
       "slots": []
     },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.main.Menu",
+      "basename": "Menu",
+      "tagname": "ui5-menu",
+      "appenddocs": "MenuItem",
+      "resource": "Menu.js",
+      "module": "Menu",
+      "static": true,
+      "visibility": "public",
+      "since": "1.3.0",
+      "extends": "UI5Element",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<code>ui5-menu</code> component represents a hierarchical menu structure.\n\n<h3>Usage</h3>\n\n<code>ui5-menu</code> contains <code>ui5-menu-item</code> components. An arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n<h3>Keyboard Handling</h3>\n\nThe <code>ui5-menu</code> provides advanced keyboard handling. The user can use the following keyboard shortcuts in order to navigate trough the tree: <ul> <li><code>Arrow Up</code> / <code>Arrow Down</code> - Navigates up and down the menu items that are currently visible.</li> <li><code>Arrow Right</code>, <code>Space</code> or <code>Enter</code> - Opens a sub-menu if there are menu items nested in the currently clicked menu item.</li> <li><code>Arrow Left</code> or <code>Escape</code> - Closes the currently opened sub-menu.</li> </ul> Note: if the text ditrection is set to Right-to-left (RTL), <code>Arrow Right</code> and <code>Arrow Left</code> functionality is swapped. <br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/Menu.js\";</code>",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "headerText",
+          "visibility": "public",
+          "type": "string",
+          "description": "Defines the header text of the menu (displayed on mobile).",
+          "defaultValue": "\"\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "propertyName": "items",
+          "visibility": "public",
+          "type": "sap.ui.webcomponents.main.IMenuItem[]",
+          "description": "Defines the items of this component."
+        }
+      ],
+      "events": [
+        {
+          "name": "item-click",
+          "visibility": "public",
+          "parameters": [
+            {
+              "name": "item",
+              "type": "object",
+              "description": "The currently clicked menu item."
+            },
+            {
+              "name": "text",
+              "type": "string",
+              "description": "The text of the currently clicked menu item."
+            }
+          ],
+          "description": "Fired when an item is being clicked."
+        }
+      ],
+      "methods": [
+        { "name": "close", "visibility": "public", "description": "Closes the Menu." },
+        {
+          "name": "showAt",
+          "visibility": "public",
+          "parameters": [
+            {
+              "name": "opener",
+              "type": "HTMLElement",
+              "optional": false,
+              "description": "the element that the popover is shown at"
+            }
+          ],
+          "description": "Shows the Menu near the opener element."
+        }
+      ]
+    },
+    {
+      "kind": "class",
+      "name": "sap.ui.webcomponents.main.MenuItem",
+      "basename": "MenuItem",
+      "tagname": "ui5-menu-item",
+      "resource": "MenuItem.js",
+      "module": "MenuItem",
+      "static": true,
+      "visibility": "public",
+      "since": "1.3.0",
+      "extends": "UI5Element",
+      "implements": [ "sap.ui.webcomponents.main.IMenuItem" ],
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<code>ui5-menu-item</code> is the item to use inside a <code>ui5-menu</code>. An arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n<h3>Usage</h3>\n\n<code>ui5-menu-item</code> is an abstract element, representing a node in a <code>ui5-menu</code>. The menu itself is rendered as a list, and each <code>ui5-menu-item</code> is represented by a list item (<code>ui5-li</code>) in that list. Therefore, you should only use <code>ui5-menu-item</code> directly in your apps. The <code>ui5-li</code> list item is internal for the list, and not intended for public use.\n\nFor the <code>ui5-menu-item</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/MenuItem.js\";</code>",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "disabled",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "Defines whether <code>ui5-menu-item</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-menu-item</code> is noninteractive.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "icon",
+          "visibility": "public",
+          "type": "string",
+          "description": "Defines the icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options. <br><br> <b>* Example:</b> See all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.",
+          "defaultValue": "\"\""
+        },
+        {
+          "name": "startsSection",
+          "visibility": "public",
+          "type": "boolean",
+          "description": "Defines whether a visual separator should be rendered before the item.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "text",
+          "visibility": "public",
+          "type": "String",
+          "description": "Defines the text of the tree item.",
+          "defaultValue": "\"\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "propertyName": "items",
+          "visibility": "public",
+          "type": "sap.ui.webcomponents.main.IMenuItem[]",
+          "description": "Defines the items of this component."
+        }
+      ]
+    },
     {
       "kind": "class",
       "name": "sap.ui.webcomponents.main.MessageStrip",
@@ -2948,6 +3107,21 @@
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>ui5-multi-combobox</code> consists of the following elements: <ul> <li> Tokenizer - a list of tokens with selected options. <li> Input field - displays the selected option/s as token/s. Users can type to filter the list. <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-multi-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-multi-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys. <br>\n\n<h4>Tokens</h4> <ul> <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li> <li> Delete - deletes the token and focuses the previous token. </li> <li> Backspace - deletes the token and focus the next token. </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-multi-combobox</code> exposes the following CSS Shadow Parts: <ul> <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
+        {
+          "name": "accessibleName",
+          "visibility": "public",
+          "since": "1.4.0",
+          "type": "string",
+          "description": "Defines the accessible aria name of the component."
+        },
+        {
+          "name": "accessibleNameRef",
+          "visibility": "public",
+          "since": "1.4.0",
+          "type": "string",
+          "description": "Receives id(or many ids) of the elements that label the component.",
+          "defaultValue": "\"\""
+        },
         {
           "name": "allowCustomValues",
           "visibility": "public",
@@ -3154,6 +3328,13 @@
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.",
       "constructor": { "visibility": "public" },
       "properties": [
+        {
+          "name": "additionalText",
+          "visibility": "public",
+          "since": "1.3.0",
+          "type": "string",
+          "description": "Defines the additional text displayed at the end of the option element."
+        },
         {
           "name": "disabled",
           "visibility": "public",
@@ -3201,7 +3382,7 @@
       "static": true,
       "visibility": "public",
       "extends": "sap.ui.webcomponents.base.UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-panel</code> component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen.\n\n<h3>Guidelines:</h3> <ul> <li>Nesting two or more panels is not recommended.</li> <li>Do not stack too many panels on one page.</li> </ul>\n\n<h3>Structure</h3> The panel's header area consists of a title bar with a header text or custom header. <br> The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br> The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements. <br> The content area can contain an arbitrary set of controls. <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n<h3>Responsive Behavior</h3> <ul> <li>If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.</li> <li>If the panel has a fixed height, it will take up the space even if the panel is collapsed.</li> <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>), an arrow icon (pointing to the right) appears in front of the header.</li> <li>When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.</li> <li>When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.</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-panel</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style the wrapper of the content</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/dist/Panel\";</code>",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-panel</code> component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen.\n\n<h3>Guidelines:</h3> <ul> <li>Nesting two or more panels is not recommended.</li> <li>Do not stack too many panels on one page.</li> </ul>\n\n<h3>Structure</h3> The panel's header area consists of a title bar with a header text or custom header. <br> The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br> The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements. <br> The content area can contain an arbitrary set of controls. <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n<h3>Responsive Behavior</h3> <ul> <li>If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.</li> <li>If the panel has a fixed height, it will take up the space even if the panel is collapsed.</li> <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>), an arrow icon (pointing to the right) appears in front of the header.</li> <li>When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.</li> <li>When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.</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-panel</code> exposes the following CSS Shadow Parts: <ul> <li>header - Used to style the wrapper of the header</li> <li>content - Used to style the wrapper of the content</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/dist/Panel\";</code>",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -3705,7 +3886,7 @@
           "name": "valueState",
           "visibility": "public",
           "type": "ValueState",
-          "description": "Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> </ul>",
+          "description": "Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>",
           "defaultValue": "\"None\""
         },
         {
@@ -4091,6 +4272,13 @@
       "description": "<h3 class=\"comment-api-title\">Overview</h3>",
       "constructor": { "visibility": "public" },
       "properties": [
+        {
+          "name": "accessibleName",
+          "visibility": "public",
+          "since": "1.4.0",
+          "type": "string",
+          "description": "Defines the accessible aria name of the component."
+        },
         {
           "name": "disabled",
           "visibility": "public",
@@ -4618,14 +4806,14 @@
           "visibility": "public",
           "since": "1.2.0",
           "type": "string",
-          "description": "Sets the accessible aria name of the component."
+          "description": "Sets the accessible aria name of the component.\n\n<b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>. Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set."
         },
         {
           "name": "accessibleNameRef",
           "visibility": "public",
           "since": "1.1.0",
           "type": "string",
-          "description": "Receives id(or many ids) of the elements that label the component.",
+          "description": "Receives id(or many ids) of the elements that label the component.\n\n<b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>. Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.",
           "defaultValue": "\"\""
         },
         {
@@ -4735,7 +4923,14 @@
           "name": "default",
           "visibility": "public",
           "type": "Node[]",
-          "description": "Defines the tab content."
+          "description": "Holds the content associated with this tab."
+        },
+        {
+          "name": "subTabs",
+          "propertyName": "subTabs",
+          "visibility": "public",
+          "type": "sap.ui.webcomponents.main.ITab[]",
+          "description": "Defines hierarchies with nested sub tabs. <br><br> <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design."
         }
       ],
       "methods": [
@@ -4758,7 +4953,7 @@
       "static": true,
       "visibility": "public",
       "extends": "sap.ui.webcomponents.base.UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</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-tabcontainer</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style 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/dist/TabContainer\";</code> <br> <code>import \"@ui5/webcomponents/dist/Tab\";</code> (for <code>ui5-tab</code>) <br> <code>import \"@ui5/webcomponents/dist/TabSeparator\";</code> (for <code>ui5-tab-separator</code>)",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a line</li> </ul>\n\n<h3>Hierarchies</h3> Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations to indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split to allow the user to display the content or alternatively to expand / collapse the list of sub tabs.\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-tabcontainer</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style 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/dist/TabContainer\";</code> <br> <code>import \"@ui5/webcomponents/dist/Tab\";</code> (for <code>ui5-tab</code>) <br> <code>import \"@ui5/webcomponents/dist/TabSeparator\";</code> (for <code>ui5-tab-separator</code>)",
       "constructor": { "visibility": "public" },
       "properties": [
         {
@@ -4855,9 +5050,24 @@
       "static": true,
       "visibility": "public",
       "extends": "sap.ui.webcomponents.base.UI5Element",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table</code> component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data. <br><br> To render the <code>Table</code> properly, the order of the <code>columns</code> should match with the order of the item <code>cells</code> in the <code>rows</code>. <br><br> Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.\n\n<h3>Selection</h3> To benefit from the selection mechanism of <code>ui5-table</code> component, you can use the available selection modes: <code>SingleSelect</code> and <code>MultiSelect</code>. <br> In additition to the used mode, you can also specify the <code>ui5-table-row</code> type choosing between <code>Active</code> or <code>Inactive</code>. <br><br> In <code>SingleSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row via mouse or by pressing the <code>Space</code> or <code>Enter</code> keys. <br> In <code>MultiSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row by pressing the <code>Space</code> key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header. <br><br> <b>Note:</b> Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.\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> Furthermore, you can interact with <code>ui5-table</code> via the following keys. <br>\n\n<ul> <li>[F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.</li> <li>[CTRL]+[A] - Selects all items, if MultiSelect mode is enabled.</li> <li>[HOME]/[END] - Focuses the first/last item.</li> <li>[PAGEUP]/[PAGEDOWN] - Moves focus up/down by page size (20 items by default).</li> <li>[ALT]+[DOWN]/[UP] - Switches focus between header, last focused item, and More button (if applies) in either direction.</li> <li>[SHIFT]+[DOWN]/[UP] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).</li> <li>[SHIFT]+[HOME]/[END] - Range selection to the first/last item of the List.</li> <li>[CTRL]+[HOME]/[END] - Same behavior as HOME & END.</li> * </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Table.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/TableColumn.js\";</code> (for <code>ui5-table-column</code>) <br> <code>import \"@ui5/webcomponents/dist/TableRow.js\";</code> (for <code>ui5-table-row</code>) <br> <code>import \"@ui5/webcomponents/dist/TableCell.js\";</code> (for <code>ui5-table-cell</code>)",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table</code> component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data. <br><br> To render the <code>Table</code> properly, the order of the <code>columns</code> should match with the order of the item <code>cells</code> in the <code>rows</code>. <br><br> Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.\n\n<h3>Selection</h3> To benefit from the selection mechanism of <code>ui5-table</code> component, you can use the available selection modes: <code>SingleSelect</code> and <code>MultiSelect</code>. <br> In additition to the used mode, you can also specify the <code>ui5-table-row</code> type choosing between <code>Active</code> or <code>Inactive</code>. <br><br> In <code>SingleSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row via mouse or by pressing the <code>Space</code> or <code>Enter</code> keys. <br> In <code>MultiSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row by pressing the <code>Space</code> key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header. <br><br> <b>Note:</b> Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.\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> Furthermore, you can interact with <code>ui5-table</code> via the following keys. <br>\n\n<ul> <li>[F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.</li> <li>[CTRL]+[A] - Selects all items, if MultiSelect mode is enabled.</li> <li>[HOME]/[END] - Focuses the first/last item.</li> <li>[PAGEUP]/[PAGEDOWN] - Moves focus up/down by page size (20 items by default).</li> <li>[ALT]+[DOWN]/[UP] - Switches focus between header, last focused item, and More button (if applies) in either direction.</li> <li>[SHIFT]+[DOWN]/[UP] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).</li> <li>[SHIFT]+[HOME]/[END] - Range selection to the first/last item of the List.</li> <li>[CTRL]+[HOME]/[END] - Same behavior as HOME & END.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Table.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/TableColumn.js\";</code> (for <code>ui5-table-column</code>) <br> <code>import \"@ui5/webcomponents/dist/TableRow.js\";</code> (for <code>ui5-table-row</code>) <br> <code>import \"@ui5/webcomponents/dist/TableCell.js\";</code> (for <code>ui5-table-cell</code>)",
       "constructor": { "visibility": "public" },
       "properties": [
+        {
+          "name": "accessibleName",
+          "visibility": "public",
+          "since": "1.3.0",
+          "type": "string",
+          "description": "Defines the accessible aria name of the component."
+        },
+        {
+          "name": "accessibleNameRef",
+          "visibility": "public",
+          "since": "1.3.0",
+          "type": "string",
+          "description": "Receives id(or many ids) of the elements that label the component.",
+          "defaultValue": "\"\""
+        },
         {
           "name": "busy",
           "visibility": "public",
@@ -6422,8 +6632,29 @@
       "module": "types/ListGrowingMode",
       "static": true,
       "visibility": "public",
-      "description": "Defines the growing mode, used in the <code>ui5-List</code>.",
-      "constructor": { "visibility": "public" }
+      "description": "Defines the growing mode, used in the <code>ui5-list</code>.",
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "Button",
+          "visibility": "public",
+          "type": "Button",
+          "description": "Component's <code>load-more</code> is fired upon pressing a \"More\" button. at the bottom."
+        },
+        {
+          "name": "None",
+          "visibility": "public",
+          "type": "None",
+          "description": "Component's growing is not enabled."
+        },
+        {
+          "name": "Scroll",
+          "visibility": "public",
+          "type": "Scroll",
+          "description": "Component's <code>load-more</code> is fired upon scroll."
+        }
+      ],
+      "slots": []
     },
     {
       "kind": "class",
@@ -6862,7 +7093,28 @@
       "static": true,
       "visibility": "public",
       "description": "Defines the growing mode, used in the <code>ui5-table</code>.",
-      "constructor": { "visibility": "public" }
+      "constructor": { "visibility": "public" },
+      "properties": [
+        {
+          "name": "Button",
+          "visibility": "public",
+          "type": "Button",
+          "description": "Component's <code>load-more</code> is fired upon pressing a \"More\" button. at the bottom."
+        },
+        {
+          "name": "None",
+          "visibility": "public",
+          "type": "None",
+          "description": "Component's growing is not enabled."
+        },
+        {
+          "name": "Scroll",
+          "visibility": "public",
+          "type": "Scroll",
+          "description": "Component's <code>load-more</code> is fired upon scroll."
+        }
+      ],
+      "slots": []
     },
     {
       "kind": "class",

package/dist/css/themes/Avatar.css

@@ -1 +1 @@
-:host(:not([hidden])){display:inline-block;box-sizing:border-box}:host(:not([hidden]).ui5_hovered){opacity:.7}:host([focused]){outline:var(--_ui5_avatar_outline);outline-offset:var(--_ui5_avatar_focus_offset)}:host([interactive]){cursor:pointer}:host{height:3rem;width:3rem;border-radius:50%;border:var(--ui5-avatar-initials-border);outline:none;color:var(--ui5-avatar-initials-color)}:host([shape=Square]),:host([shape=Square]) ::slotted(*){border-radius:.25rem}:host([shape=Square]) .ui5-avatar-root{border-radius:inherit}:host([shape=Square]) .ui5-avatar-img{border-radius:inherit}:host([_size=XS]),:host([size=XS]){height:2rem;width:2rem;min-height:2rem;min-width:2rem;font-size:var(--_ui5_avatar_fontsize_XS)}:host([_size=S]),:host([size=S]){min-height:3rem;min-width:3rem;font-size:var(--_ui5_avatar_fontsize_S)}:host([_size=M]),:host([size=M]){min-height:4rem;min-width:4rem;font-size:var(--_ui5_avatar_fontsize_M)}:host([_size=L]),:host([size=L]){min-height:5rem;min-width:5rem;font-size:var(--_ui5_avatar_fontsize_L)}:host([_size=XL]),:host([size=XL]){min-height:7rem;min-width:7rem;font-size:var(--_ui5_avatar_fontsize_XL)}:host .ui5-avatar-icon{height:1.5rem;width:1.5rem;color:inherit}:host([_size=XS]) .ui5-avatar-icon,:host([size=XS]) .ui5-avatar-icon{height:1rem;width:1rem}:host([_size=S]) .ui5-avatar-icon,:host([size=S]) .ui5-avatar-icon{height:1.5rem;width:1.5rem}:host([_size=M]) .ui5-avatar-icon,:host([size=M]) .ui5-avatar-icon{height:2rem;width:2rem}:host([_size=L]) .ui5-avatar-icon,:host([size=L]) .ui5-avatar-icon{height:2.5rem;width:2.5rem}:host([_size=XL]) .ui5-avatar-icon,:host([size=XL]) .ui5-avatar-icon{height:3rem;width:3rem}::slotted(*){border-radius:50%;width:100%;height:100%}:host(:not([_has-image])),:host(:not([color-scheme])),:host([_color-scheme=Accent6]),:host([color-scheme=Accent6]){background-color:var(--ui5-avatar-accent6);color:var(--ui5-avatar-accent6-color)}:host([_color-scheme=Accent1]),:host([color-scheme=Accent1]){background-color:var(--ui5-avatar-accent1);color:var(--ui5-avatar-accent1-color)}:host([_color-scheme=Accent2]),:host([color-scheme=Accent2]){background-color:var(--ui5-avatar-accent2);color:var(--ui5-avatar-accent2-color)}:host([_color-scheme=Accent3]),:host([color-scheme=Accent3]){background-color:var(--ui5-avatar-accent3);color:var(--ui5-avatar-accent3-color)}:host([_color-scheme=Accent4]),:host([color-scheme=Accent4]){background-color:var(--ui5-avatar-accent4);color:var(--ui5-avatar-accent4-color)}:host([_color-scheme=Accent5]),:host([color-scheme=Accent5]){background-color:var(--ui5-avatar-accent5);color:var(--ui5-avatar-accent5-color)}:host([_color-scheme=Accent7]),:host([color-scheme=Accent7]){background-color:var(--ui5-avatar-accent7);color:var(--ui5-avatar-accent7-color)}:host([_color-scheme=Accent8]),:host([color-scheme=Accent8]){background-color:var(--ui5-avatar-accent8);color:var(--ui5-avatar-accent8-color)}:host([_color-scheme=Accent9]),:host([color-scheme=Accent9]){background-color:var(--ui5-avatar-accent9);color:var(--ui5-avatar-accent9-color)}:host([_color-scheme=Accent10]),:host([color-scheme=Accent10]){background-color:var(--ui5-avatar-accent10);color:var(--ui5-avatar-accent10-color)}:host([_color-scheme=Placeholder]),:host([color-scheme=Placeholder]){background-color:var(--ui5-avatar-placeholder);color:var(--ui5-avatar-placeholder-color)}:host([_has-image]){background-color:transparent;vertical-align:middle}:host([image-fit-type=Contain]) .ui5-avatar-img{background-size:contain}.ui5-avatar-root{display:flex;align-items:center;justify-content:center;outline:none}.ui5-avatar-img,.ui5-avatar-root{height:100%;width:100%;border-radius:50%}.ui5-avatar-img{background-repeat:no-repeat;background-position:50%;background-size:cover}.ui5-avatar-initials{color:inherit}::slotted(*){pointer-events:none}
+:host(:not([hidden])){display:inline-block;box-sizing:border-box}:host(:not([hidden]).ui5_hovered){opacity:.7}:host([focused]){outline:var(--_ui5_avatar_outline);outline-offset:var(--_ui5_avatar_focus_offset)}:host([interactive]){cursor:pointer}:host{height:3rem;width:3rem;border-radius:50%;border:var(--ui5-avatar-initials-border);outline:none;color:var(--ui5-avatar-initials-color)}.ui5-avatar-root{display:flex;align-items:center;justify-content:center;outline:none;height:100%;width:100%}:host([_size=XS]),:host([size=XS]){height:2rem;width:2rem;min-height:2rem;min-width:2rem;font-size:var(--_ui5_avatar_fontsize_XS)}:host([_size=S]),:host([size=S]){min-height:3rem;min-width:3rem;font-size:var(--_ui5_avatar_fontsize_S)}:host([_size=M]),:host([size=M]){min-height:4rem;min-width:4rem;font-size:var(--_ui5_avatar_fontsize_M)}:host([_size=L]),:host([size=L]){min-height:5rem;min-width:5rem;font-size:var(--_ui5_avatar_fontsize_L)}:host([_size=XL]),:host([size=XL]){min-height:7rem;min-width:7rem;font-size:var(--_ui5_avatar_fontsize_XL)}:host .ui5-avatar-icon{height:var(--_ui5_avatar_fontsize_S);width:var(--_ui5_avatar_fontsize_S);color:inherit}:host([_size=XS]) .ui5-avatar-icon,:host([size=XS]) .ui5-avatar-icon{height:var(--_ui5_avatar_icon_XS);width:var(--_ui5_avatar_icon_XS)}:host([_size=S]) .ui5-avatar-icon,:host([size=S]) .ui5-avatar-icon{height:var(--_ui5_avatar_icon_S);width:var(--_ui5_avatar_icon_S)}:host([_size=M]) .ui5-avatar-icon,:host([size=M]) .ui5-avatar-icon{height:var(--_ui5_avatar_icon_M);width:var(--_ui5_avatar_icon_M)}:host([_size=L]) .ui5-avatar-icon,:host([size=L]) .ui5-avatar-icon{height:var(--_ui5_avatar_icon_L);width:var(--_ui5_avatar_icon_L)}:host([_size=XL]) .ui5-avatar-icon,:host([size=XL]) .ui5-avatar-icon{height:var(--_ui5_avatar_icon_XL);width:var(--_ui5_avatar_icon_XL)}::slotted(*){border-radius:50%;width:100%;height:100%;pointer-events:none}:host([shape=Square]),:host([shape=Square]) ::slotted(*){border-radius:var(--ui5-avatar-border-radius)}:host(:not([_has-image])),:host(:not([color-scheme])),:host([_color-scheme=Accent6]),:host([color-scheme=Accent6]){background-color:var(--ui5-avatar-accent6);color:var(--ui5-avatar-accent6-color);border-color:var(--ui5-avatar-accent6-border-color)}:host([_color-scheme=Accent1]),:host([color-scheme=Accent1]){background-color:var(--ui5-avatar-accent1);color:var(--ui5-avatar-accent1-color);border-color:var(--ui5-avatar-accent1-border-color)}:host([_color-scheme=Accent2]),:host([color-scheme=Accent2]){background-color:var(--ui5-avatar-accent2);color:var(--ui5-avatar-accent2-color);border-color:var(--ui5-avatar-accent2-border-color)}:host([_color-scheme=Accent3]),:host([color-scheme=Accent3]){background-color:var(--ui5-avatar-accent3);color:var(--ui5-avatar-accent3-color);border-color:var(--ui5-avatar-accent3-border-color)}:host([_color-scheme=Accent4]),:host([color-scheme=Accent4]){background-color:var(--ui5-avatar-accent4);color:var(--ui5-avatar-accent4-color);border-color:var(--ui5-avatar-accent4-border-color)}:host([_color-scheme=Accent5]),:host([color-scheme=Accent5]){background-color:var(--ui5-avatar-accent5);color:var(--ui5-avatar-accent5-color);border-color:var(--ui5-avatar-accent5-border-color)}:host([_color-scheme=Accent7]),:host([color-scheme=Accent7]){background-color:var(--ui5-avatar-accent7);color:var(--ui5-avatar-accent7-color);border-color:var(--ui5-avatar-accent7-border-color)}:host([_color-scheme=Accent8]),:host([color-scheme=Accent8]){background-color:var(--ui5-avatar-accent8);color:var(--ui5-avatar-accent8-color);border-color:var(--ui5-avatar-accent8-border-color)}:host([_color-scheme=Accent9]),:host([color-scheme=Accent9]){background-color:var(--ui5-avatar-accent9);color:var(--ui5-avatar-accent9-color);border-color:var(--ui5-avatar-accent9-border-color)}:host([_color-scheme=Accent10]),:host([color-scheme=Accent10]){background-color:var(--ui5-avatar-accent10);color:var(--ui5-avatar-accent10-color);border-color:var(--ui5-avatar-accent10-border-color)}:host([_color-scheme=Placeholder]),:host([color-scheme=Placeholder]){background-color:var(--ui5-avatar-placeholder);color:var(--ui5-avatar-placeholder-color);border-color:var(--ui5-avatar-placeholder-border-color)}:host([_has-image]){background-color:transparent;vertical-align:middle}.ui5-avatar-initials{color:inherit}

package/dist/css/themes/AvatarGroup.css

@@ -1 +1 @@
-:host{-webkit-tap-highlight-color:rgba(0,0,0,0)}:host(:not([hidden])){display:block}.ui5-avatar-group-items:focus{outline:none}:host([type=Group]) .ui5-avatar-group-items:focus{outline:var(--_ui5_avatar_outline);outline-offset:var(--_ui5_avatar_focus_offset)}.ui5-avatar-group-root{display:flex}.ui5-avatar-group-items{white-space:nowrap;position:relative;display:inline-flex}:host([type=Group]) .ui5-avatar-group-items{cursor:pointer}:host([type=Group]) ::slotted([ui5-avatar]),:host([type=Group]) ::slotted([ui5-button]){pointer-events:none}.ui5-avatar-group-overflow-btn:not([hidden]),::slotted([ui5-button]:not([hidden])){--_ui5_button_base_padding:0;border-radius:50%;display:inline-flex;text-overflow:clip}.ui5-avatar-group-overflow-btn[focused],::slotted([ui5-button][focused]){outline:var(--_ui5_button_outline);outline-offset:var(--_ui5_avatar_group_overflow_button_focus_offset)}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs{height:2rem;width:2rem;min-width:2rem;font-size:.75rem}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-s,::slotted([ui5-button]){height:3rem;width:3rem;min-width:3rem;font-size:1.125rem}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-m{height:4rem;width:4rem;min-width:4rem;font-size:1.625rem}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-l{height:5rem;width:5rem;min-width:5rem;font-size:2rem}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xl{height:7rem;width:7rem;min-width:7rem;font-size:2.75rem}
+:host{-webkit-tap-highlight-color:rgba(0,0,0,0)}:host(:not([hidden])){display:block}.ui5-avatar-group-items:focus{outline:none}:host([type=Group]) .ui5-avatar-group-items:focus{outline:var(--_ui5_avatar_outline);outline-offset:var(--_ui5_avatar_focus_offset);border-radius:var(--_ui5_avatar_group_focus_border_radius)}.ui5-avatar-group-root{display:flex}.ui5-avatar-group-items{white-space:nowrap;position:relative;display:inline-flex}:host([type=Group]) .ui5-avatar-group-items{cursor:pointer}:host([type=Group]) ::slotted([ui5-avatar]),:host([type=Group]) ::slotted([ui5-button]){pointer-events:none}.ui5-avatar-group-overflow-btn:not([hidden]),::slotted([ui5-button]:not([hidden])){--_ui5_button_base_padding:0;border-radius:50%;display:inline-flex;text-overflow:clip}.ui5-avatar-group-overflow-btn[focused],::slotted([ui5-button][focused]){outline:var(--_ui5_avatar_outline);outline-offset:var(--_ui5_avatar_focus_offset)}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs{height:2rem;width:2rem;min-width:2rem;font-size:.75rem}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-s,::slotted([ui5-button]){height:3rem;width:3rem;min-width:3rem;font-size:1.125rem}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-m{height:4rem;width:4rem;min-width:4rem;font-size:1.625rem}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-l{height:5rem;width:5rem;min-width:5rem;font-size:2rem}.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xl{height:7rem;width:7rem;min-width:7rem;font-size:2.75rem}

package/dist/css/themes/Badge.css

@@ -1 +1 @@
-.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host(:not([hidden])){display:inline-block;height:var(--_ui5-badge-height);min-width:1.125em;max-width:100%;padding:0 .3125em;color:var(--sapAccentColor1);background:var(--sapLegendBackgroundColor1);border:var(--_ui5-badge-border);border-inline-start:var(--_ui5-badge-left-border);border-radius:var(--_ui5-badge-border-radius);box-sizing:border-box;font-family:"72override",var(--sapFontFamily);font-weight:var(--_ui5-badge-font-weight);text-align:center;letter-spacing:.0125em;transition:all .2s ease-in-out}:host(:not([color-scheme]):hover),:host([color-scheme]:hover){cursor:var(--_ui5-badge-cursor)}.ui5-badge-root{display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;pointer-events:var(--_ui5_badge_pointer_events)}.ui5-badge-text{width:100%;overflow:hidden;white-space:nowrap;font-weight:inherit;text-overflow:ellipsis;line-height:1;text-transform:var(--_ui5-badge-text-transform);letter-spacing:inherit;font-size:var(--ui5-badge-font-size)}:host(:hover) .ui5-badge-text{cursor:var(--_ui5-badge-cursor)}:host([_icon-only]){padding:0 .1875em}::slotted([ui5-icon]){width:.75em;height:.75em;min-width:.75em;min-height:.75em;color:inherit}[ui5-badge] [ui5-icon][slot=icon]{display:flex}:host([_has-icon]) .ui5-badge-text{padding-left:.125em}:host([_has-icon]) .ui5-badge-root[dir=rtl] .ui5-badge-text{padding-left:0;padding-right:.125em}:host([color-scheme="1"]){background-color:var(--ui5-badge-color-scheme-1-background);border-color:var(--ui5-badge-color-scheme-1-border);color:var(--ui5-badge-color-scheme-1-color)}:host([color-scheme="1"]:hover){background-color:var(--ui5-badge-color-scheme-1-hover-background);box-shadow:var(--ui5-badge-color-scheme-1-shadow)}:host([active][color-scheme="1"]:hover){box-shadow:var(--ui5-badge-color-scheme-1-active-shadow);color:var(--ui5-badge-color-scheme-1-active-color)}:host([color-scheme="2"]){background-color:var(--ui5-badge-color-scheme-2-background);border-color:var(--ui5-badge-color-scheme-2-border);color:var(--ui5-badge-color-scheme-2-color)}:host([color-scheme="2"]:hover){background-color:var(--ui5-badge-color-scheme-2-hover-background);box-shadow:var(--ui5-badge-color-scheme-2-shadow)}:host([active][color-scheme="2"]:hover){box-shadow:var(--ui5-badge-color-scheme-2-active-shadow);color:var(--ui5-badge-color-scheme-2-active-color)}:host([color-scheme="3"]){background-color:var(--ui5-badge-color-scheme-3-background);border-color:var(--ui5-badge-color-scheme-3-border);color:var(--ui5-badge-color-scheme-3-color)}:host([color-scheme="3"]:hover){background-color:var(--ui5-badge-color-scheme-3-hover-background);box-shadow:var(--ui5-badge-color-scheme-3-shadow)}:host([active][color-scheme="3"]:hover){box-shadow:var(--ui5-badge-color-scheme-3-active-shadow);color:var(--ui5-badge-color-scheme-3-active-color)}:host([color-scheme="4"]){background-color:var(--ui5-badge-color-scheme-4-background);border-color:var(--ui5-badge-color-scheme-4-border);color:var(--ui5-badge-color-scheme-4-color)}:host([color-scheme="4"]:hover){background-color:var(--ui5-badge-color-scheme-4-hover-background);box-shadow:var(--ui5-badge-color-scheme-4-shadow)}:host([active][color-scheme="4"]:hover){box-shadow:var(--ui5-badge-color-scheme-4-active-shadow);color:var(--ui5-badge-color-scheme-4-active-color)}:host([color-scheme="5"]){background-color:var(--ui5-badge-color-scheme-5-background);border-color:var(--ui5-badge-color-scheme-5-border);color:var(--ui5-badge-color-scheme-5-color)}:host([color-scheme="5"]:hover){background-color:var(--ui5-badge-color-scheme-5-hover-background);box-shadow:var(--ui5-badge-color-scheme-5-shadow)}:host([active][color-scheme="5"]:hover){box-shadow:var(--ui5-badge-color-scheme-5-active-shadow);color:var(--ui5-badge-color-scheme-5-active-color)}:host([color-scheme="6"]){background-color:var(--ui5-badge-color-scheme-6-background);border-color:var(--ui5-badge-color-scheme-6-border);color:var(--ui5-badge-color-scheme-6-color)}:host([color-scheme="6"]:hover){background-color:var(--ui5-badge-color-scheme-6-hover-background);box-shadow:var(--ui5-badge-color-scheme-6-shadow)}:host([active][color-scheme="6"]:hover){box-shadow:var(--ui5-badge-color-scheme-6-active-shadow);color:var(--ui5-badge-color-scheme-6-active-color)}:host([color-scheme="7"]){background-color:var(--ui5-badge-color-scheme-7-background);border-color:var(--ui5-badge-color-scheme-7-border);color:var(--ui5-badge-color-scheme-7-color)}:host([color-scheme="7"]:hover){background-color:var(--ui5-badge-color-scheme-7-hover-background);box-shadow:var(--ui5-badge-color-scheme-7-shadow)}:host([active][color-scheme="7"]:hover){box-shadow:var(--ui5-badge-color-scheme-7-active-shadow);color:var(--ui5-badge-color-scheme-7-active-color)}:host([color-scheme="8"]){background-color:var(--ui5-badge-color-scheme-8-background);border-color:var(--ui5-badge-color-scheme-8-border);color:var(--ui5-badge-color-scheme-8-color)}:host([color-scheme="8"]:hover){background-color:var(--ui5-badge-color-scheme-8-hover-background);box-shadow:var(--ui5-badge-color-scheme-8-shadow)}:host([active][color-scheme="8"]:hover){box-shadow:var(--ui5-badge-color-scheme-8-active-shadow);color:var(--ui5-badge-color-scheme-8-active-color)}:host([color-scheme="9"]){background-color:var(--ui5-badge-color-scheme-9-background);border-color:var(--ui5-badge-color-scheme-9-border);color:var(--ui5-badge-color-scheme-9-color)}:host([color-scheme="9"]:hover){background-color:var(--ui5-badge-color-scheme-9-hover-background);box-shadow:var(--ui5-badge-color-scheme-9-shadow)}:host([active][color-scheme="9"]:hover){box-shadow:var(--ui5-badge-color-scheme-9-active-shadow);color:var(--ui5-badge-color-scheme-9-active-color)}:host([color-scheme="10"]){background-color:var(--ui5-badge-color-scheme-10-background);border-color:var(--ui5-badge-color-scheme-10-border);color:var(--ui5-badge-color-scheme-10-color)}:host([color-scheme="10"]:hover){background-color:var(--ui5-badge-color-scheme-10-hover-background);box-shadow:var(--ui5-badge-color-scheme-10-shadow)}:host([active][color-scheme="10"]:hover){box-shadow:var(--ui5-badge-color-scheme-10-active-shadow);color:var(--ui5-badge-color-scheme-10-active-color)}
+.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host(:not([hidden])){display:inline-block;height:1rem;min-width:1.125em;max-width:100%;padding:0 .3125em;color:var(--sapAccentColor1);background:var(--sapLegendBackgroundColor1);border:.0625em solid;border-radius:.5rem;box-sizing:border-box;font-family:"72override",var(--sapFontFamily);font-weight:700;text-align:center;letter-spacing:.0125em}:host(:not([color-scheme]):hover),:host([color-scheme]:hover){cursor:var(--_ui5-badge-cursor)}.ui5-badge-root{display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;pointer-events:none}.ui5-badge-text{width:100%;overflow:hidden;white-space:nowrap;font-weight:inherit;text-overflow:ellipsis;line-height:1;text-transform:uppercase;letter-spacing:inherit;font-size:.75em}:host(:hover) .ui5-badge-text{cursor:var(--_ui5-badge-cursor)}:host([_icon-only]){padding:0 .1875em}::slotted([ui5-icon]){width:.75em;height:.75em;min-width:.75em;min-height:.75em;color:inherit}[ui5-badge] [ui5-icon][slot=icon]{display:flex}:host([_has-icon]) .ui5-badge-text{padding-inline-start:.125rem}:host([color-scheme="1"]){background-color:var(--ui5-badge-color-scheme-1-background);border-color:var(--ui5-badge-color-scheme-1-border);color:var(--ui5-badge-color-scheme-1-color)}:host([color-scheme="2"]){background-color:var(--ui5-badge-color-scheme-2-background);border-color:var(--ui5-badge-color-scheme-2-border);color:var(--ui5-badge-color-scheme-2-color)}:host([color-scheme="3"]){background-color:var(--ui5-badge-color-scheme-3-background);border-color:var(--ui5-badge-color-scheme-3-border);color:var(--ui5-badge-color-scheme-3-color)}:host([color-scheme="4"]){background-color:var(--ui5-badge-color-scheme-4-background);border-color:var(--ui5-badge-color-scheme-4-border);color:var(--ui5-badge-color-scheme-4-color)}:host([color-scheme="5"]){background-color:var(--ui5-badge-color-scheme-5-background);border-color:var(--ui5-badge-color-scheme-5-border);color:var(--ui5-badge-color-scheme-5-color)}:host([color-scheme="6"]){background-color:var(--ui5-badge-color-scheme-6-background);border-color:var(--ui5-badge-color-scheme-6-border);color:var(--ui5-badge-color-scheme-6-color)}:host([color-scheme="7"]){background-color:var(--ui5-badge-color-scheme-7-background);border-color:var(--ui5-badge-color-scheme-7-border);color:var(--ui5-badge-color-scheme-7-color)}:host([color-scheme="8"]){background-color:var(--ui5-badge-color-scheme-8-background);border-color:var(--ui5-badge-color-scheme-8-border);color:var(--ui5-badge-color-scheme-8-color)}:host([color-scheme="9"]){background-color:var(--ui5-badge-color-scheme-9-background);border-color:var(--ui5-badge-color-scheme-9-border);color:var(--ui5-badge-color-scheme-9-color)}:host([color-scheme="10"]){background-color:var(--ui5-badge-color-scheme-10-background);border-color:var(--ui5-badge-color-scheme-10-border);color:var(--ui5-badge-color-scheme-10-color)}

package/dist/css/themes/Breadcrumbs.css

@@ -1 +1 @@
-.ui5-breadcrumbs-root{white-space:nowrap;outline:none;margin:0 0 .5rem 0}.ui5-breadcrumbs-root>ol{margin:0;padding:0;list-style-type:none;display:-webkit-box;display:-webkit-flex;display:flex}.ui5-breadcrumbs-root>ol>li{display:inline}.ui5-breadcrumbs-current-location{min-width:1%;-webkit-flex:1;-webkit-box-flex:1;flex:1 1 auto}.ui5-breadcrumbs-current-location>span:focus{outline-offset:-1px;outline:1px dotted var(--sapContent_FocusColor)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden]{display:none}.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]{width:var(--sapFontSize);height:var(--sapFontSize);padding-left:.675rem;vertical-align:text-top;color:var(--sapLinkColor)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]:before{content:"...";vertical-align:middle;position:absolute;left:0;bottom:0}.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]:after,.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]:after{content:"";position:absolute;border-bottom:.0625rem solid;top:0;left:0;bottom:1px;right:0}li:not(.ui5-breadcrumbs-current-location):after{content:"/";padding:0 .25rem;cursor:auto;color:var(--sapContent_LabelColor);display:inline-block;font-family:"72override",var(--sapFontFamily);font-size:var(--sapFontSize)}.ui5-breadcrumbs-popover-footer{display:flex;justify-content:flex-end;width:100%}:host([separator-style=BackSlash]) li:not(.ui5-breadcrumbs-current-location):after{content:"\\"}:host([separator-style=DoubleBackSlash]) li:not(.ui5-breadcrumbs-current-location):after{content:"\\\\"}:host([separator-style=DoubleGreaterThan]) li:not(.ui5-breadcrumbs-current-location):after{content:">>"}:host([separator-style=DoubleSlash]) li:not(.ui5-breadcrumbs-current-location):after{content:"//"}:host([separator-style=GreaterThan]) li:not(.ui5-breadcrumbs-current-location):after{content:">"}
+.ui5-breadcrumbs-root{white-space:nowrap;outline:none;margin:0 0 .5rem 0}.ui5-breadcrumbs-root>ol{margin:0;padding:0;list-style-type:none;display:-webkit-box;display:-webkit-flex;display:flex}.ui5-breadcrumbs-root>ol>li{display:inline}.ui5-breadcrumbs-current-location{min-width:1%;-webkit-flex:1;-webkit-box-flex:1;flex:1 1 auto}.ui5-breadcrumbs-current-location>span:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:var(--_ui5_breadcrumbs_current_location_focus_border_radius)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden]{display:none}.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]{width:var(--sapFontSize);height:var(--sapFontSize);padding-left:.675rem;vertical-align:text-top;color:var(--sapLinkColor)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]{color:var(--_ui5_link_focus_color)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]:before{content:"...";vertical-align:middle;position:absolute;left:0;bottom:0}.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]:after,.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]:after{content:"";position:absolute;border-bottom:.0625rem solid;top:0;left:0;bottom:1px;right:0}li:not(.ui5-breadcrumbs-current-location):after{content:"/";padding:0 .25rem;cursor:auto;color:var(--sapContent_LabelColor);display:inline-block;font-family:"72override",var(--sapFontFamily);font-size:var(--sapFontSize)}.ui5-breadcrumbs-popover-footer{display:flex;justify-content:flex-end;width:100%}:host([separator-style=BackSlash]) li:not(.ui5-breadcrumbs-current-location):after{content:"\\"}:host([separator-style=DoubleBackSlash]) li:not(.ui5-breadcrumbs-current-location):after{content:"\\\\"}:host([separator-style=DoubleGreaterThan]) li:not(.ui5-breadcrumbs-current-location):after{content:">>"}:host([separator-style=DoubleSlash]) li:not(.ui5-breadcrumbs-current-location):after{content:"//"}:host([separator-style=GreaterThan]) li:not(.ui5-breadcrumbs-current-location):after{content:">"}

package/dist/css/themes/BreadcrumbsPopover.css

@@ -1 +1 @@
-.ui5-breadcrumbs-popover-footer{display:flex;justify-content:flex-end;width:100%;padding-right:.5rem}
+.ui5-breadcrumbs-popover::part(content){padding:0}.ui5-breadcrumbs-popover-footer{display:flex;justify-content:flex-end;width:100%;padding-right:.5rem}