@ui5/webcomponents 1.2.2 → 1.3.0

package/dist/TimeSelection.js

@@ -7,6 +7,7 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
 import {
 	isLeft,
@@ -136,6 +137,10 @@ const metadata = {
 			type: String,
 			defaultValue: "hours",
 		},
+
+		_calendarType: {
+			type: CalendarType,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.TimeSelection.prototype */ {
 		/**
@@ -435,10 +440,12 @@ class TimeSelection extends UI5Element {
 		let dateFormat;
 		if (this._isPattern) {
 			dateFormat = DateFormat.getInstance({
+				calendarType: this._calendarType,
 				pattern: this._formatPattern,
 			});
 		} else {
 			dateFormat = DateFormat.getInstance({
+				calendarType: this._calendarType,
 				style: this._formatPattern,
 			});
 		}

package/dist/Token.js

@@ -5,6 +5,7 @@ import {
 	isBackSpace,
 	isSpace,
 	isDelete,
+	isSpaceCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/sys-cancel.js";
@@ -186,7 +187,7 @@ class Token extends UI5Element {
 			});
 		}
 
-		if (isSpace(event)) {
+		if (isSpace(event) || isSpaceCtrl(event)) {
 			event.preventDefault();
 
 			this._handleSelect();

package/dist/Tokenizer.js

@@ -7,8 +7,14 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	isSpace,
+	isSpaceCtrl,
+	isSpaceShift,
 	isLeftCtrl,
 	isRightCtrl,
+	isUpCtrl,
+	isDownCtrl,
+	isUpShift,
+	isDownShift,
 	isLeftShift,
 	isRightShift,
 	isLeftShiftCtrl,
@@ -271,7 +277,11 @@ class Tokenizer extends UI5Element {
 	}
 
 	_onkeydown(event) {
-		if (isSpace(event)) {
+		if (isSpaceShift(event)) {
+			event.preventDefault();
+		}
+
+		if (isSpace(event) || isSpaceCtrl(event)) {
 			event.preventDefault();
 
 			return this._handleTokenSelection(event, false);
@@ -285,24 +295,19 @@ class Tokenizer extends UI5Element {
 			this._handleEndShift(event);
 		}
 
-		this._handleItemNavigation(event, this.tokens);
+		this._handleItemNavigation(event, this._tokens);
 	}
 
 	_handleItemNavigation(event, tokens) {
 		const isCtrl = !!(event.metaKey || event.ctrlKey);
-		if (isLeftCtrl(event) || isRightCtrl(event)) {
-			event.preventDefault();
-			return this._handleArrowCtrl(event.target, tokens, isRightCtrl(event));
-		}
 
-		if (isLeftCtrl(event)) {
-			event.preventDefault();
-			return this._handleArrowCtrl(event.target, tokens, false);
+		if (isLeftCtrl(event) || isRightCtrl(event) || isDownCtrl(event) || isUpCtrl(event)) {
+			return this._handleArrowCtrl(event, event.target, tokens, isRightCtrl(event) || isDownCtrl(event));
 		}
 
-		if (isLeftShift(event) || isRightShift(event) || isLeftShiftCtrl(event) || isRightShiftCtrl(event)) {
+		if (isLeftShift(event) || isRightShift(event) || isUpShift(event) || isDownShift(event) || isLeftShiftCtrl(event) || isRightShiftCtrl(event)) {
 			event.preventDefault();
-			return this._handleArrowShift(event.target, tokens, (isRightShift(event) || isRightShiftCtrl(event)));
+			return this._handleArrowShift(event.target, tokens, (isRightShift(event) || isRightShiftCtrl(event) || isDownShift(event)));
 		}
 
 		if (isHome(event) || isEnd(event) || isHomeCtrl(event) || isEndCtrl(event)) {
@@ -369,25 +374,30 @@ class Tokenizer extends UI5Element {
 		return nextIndex;
 	}
 
-	_handleArrowCtrl(focusedToken, tokens, backwards) {
+	_handleArrowCtrl(event, focusedToken, tokens, backwards) {
 		const nextIndex = this._calcNextTokenIndex(focusedToken, tokens, backwards);
+
+		event.preventDefault();
+
 		if (nextIndex === -1) {
 			return;
 		}
 
-		tokens[nextIndex].focus();
+		setTimeout(() => tokens[nextIndex].focus(), 0);
 		this._itemNav.setCurrentItem(tokens[nextIndex]);
 	}
 
 	_handleArrowShift(focusedToken, tokens, backwards) {
-		const nextIndex = this._calcNextTokenIndex(focusedToken, tokens, backwards);
-		if (nextIndex === -1) {
+		const focusedTokenIndex = tokens.indexOf(focusedToken);
+		const nextIndex = backwards ? (focusedTokenIndex + 1) : (focusedTokenIndex - 1);
+
+		if (nextIndex === -1 || nextIndex === tokens.length) {
 			return;
 		}
 
 		focusedToken.selected = true;
 		tokens[nextIndex].selected = true;
-		tokens[nextIndex].focus();
+		setTimeout(() => tokens[nextIndex].focus(), 0);
 		this._itemNav.setCurrentItem(tokens[nextIndex]);
 	}
 

package/dist/WheelSlider.js

@@ -342,6 +342,13 @@ class WheelSlider extends UI5Element {
 		return index;
 	}
 
+	/**
+	 *
+	 * @param {event} e Wheel Event
+	 * @private
+	 *
+	 * The listener for this event can't be passive as it calls preventDefault()
+	 */
 	_handleWheel(e) {
 		if (!e) {
 			return;

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",
@@ -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",
@@ -2341,6 +2359,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",
@@ -2748,6 +2772,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 +2845,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.MenuItem[]",
+          "description": "Defines the items of this component."
+        }
+      ]
+    },
     {
       "kind": "class",
       "name": "sap.ui.webcomponents.main.MessageStrip",
@@ -3154,6 +3305,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",
@@ -3705,7 +3863,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\""
         },
         {
@@ -4735,7 +4893,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 +4923,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 +5020,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 +6602,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 +7063,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/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: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-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="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)}

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}

package/dist/css/themes/Button.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}:host{min-width:var(--_ui5_button_base_min_width);height:var(--_ui5_button_base_height);line-height:normal;font-family:var(--_ui5_button_fontFamily);font-size:var(--sapFontSize);text-shadow:var(--_ui5_button_text_shadow);border-radius:var(--_ui5_button_border_radius);border-width:.0625rem;cursor:pointer;background-color:var(--sapButton_Background);border:1px solid var(--sapButton_BorderColor);color:var(--sapButton_TextColor);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([has-icon]) button[dir=rtl].ui5-button-root .ui5-button-text{margin-right:var(--_ui5_button_base_icon_margin);margin-left:0}:host([has-icon][icon-end]) button[dir=rtl].ui5-button-root .ui5-button-icon{margin-right:var(--_ui5_button_base_icon_margin);margin-left:0}.ui5-button-root{min-width:inherit;cursor:inherit;height:100%;width:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;outline:none;padding:0 var(--_ui5_button_base_padding);position:relative;background:transparent;border:none;color:inherit;text-shadow:inherit;font:inherit;white-space:inherit;overflow:inherit;text-overflow:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:not([active]):not([non-interactive]):not([_is-touch]):hover),:host(:not([hidden]).ui5_hovered){background:var(--sapButton_Hover_Background);box-shadow:var(--sapContent_Interaction_Shadow)}.ui5-button-icon{color:inherit;flex-shrink:0}:host([icon-end]) .ui5-button-root{flex-direction:row-reverse}:host([icon-end]) .ui5-button-icon{margin-left:var(--_ui5_button_base_icon_margin)}:host([icon-only]) .ui5-button-root{min-width:auto;padding:0}:host([icon-only]) .ui5-button-text{display:none}.ui5-button-text{outline:none;position:relative;white-space:inherit;overflow:inherit;text-overflow:inherit}:host([has-icon]:not([icon-end])) .ui5-button-text{margin-left:var(--_ui5_button_base_icon_margin)}:host([has-icon][icon-end]) .ui5-button-text{margin-left:0}:host([disabled]){opacity:.5;pointer-events:none}:host([focused]){outline:var(--_ui5_button_outline);outline-offset:var(--_ui5_button_outline_offset)}:host([design=Emphasized][focused]){outline:var(--_ui5_button_emphasized_outline)}.ui5-button-root::-moz-focus-inner{border:0}bdi{display:block;white-space:inherit;overflow:inherit;text-overflow:inherit}:host([ui5-button][active]:not([disabled]):not([non-interactive])){background-image:none;background-color:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([ui5-button]:not([design=Emphasized])[active]:not([_is-touch])){outline-color:var(--_ui5_button_focus_outline_focus_color)}:host([design=Positive]){background-color:var(--sapButton_Accept_Background);border-color:var(--sapButton_Accept_BorderColor);color:var(--sapButton_Accept_TextColor);text-shadow:var(--_ui5_button_text_shadow)}:host([design=Positive]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Positive]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Accept_Hover_Background);border-color:var(--sapButton_Accept_Hover_BorderColor);box-shadow:var(--sapContent_Positive_Shadow)}:host([ui5-button][design=Positive][active]:not([non-interactive])){background-color:var(--sapButton_Accept_Active_Background);border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_Active_TextColor);text-shadow:none}:host([design=Positive][focused]:not([_is-touch])){outline-color:var(--_ui5_button_positive_border_focus_hover_color);border-color:var(--_ui5_button_positive_focus_border_color)}:host([design=Positive][active][focused]){outline-color:var(--_ui5_button_focus_outline_focus_color)}:host([design=Negative]){background-color:var(--sapButton_Reject_Background);border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor);text-shadow:var(--_ui5_button_text_shadow)}:host([design=Negative]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Negative]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Reject_Hover_Background);border-color:var(--sapButton_Reject_Hover_BorderColor);box-shadow:var(--sapContent_Negative_Shadow)}:host([design=Negative][focused]){border-color:var(--_ui5_button_negative_focus_border_color);outline-color:var(--_ui5_button_positive_border_focus_hover_color)}:host([ui5-button][design=Negative][active]:not([non-interactive])){background-color:var(--sapButton_Reject_Active_Background);border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_Active_TextColor);text-shadow:none}:host([design=Negative][active][focused]){outline-color:var(--_ui5_button_focus_outline_focus_color)}:host([design=Attention]){background-color:var(--sapButton_Attention_Background);border-color:var(--sapButton_Attention_BorderColor);color:var(--sapButton_Attention_TextColor);text-shadow:var(--_ui5_button_text_shadow)}:host([design=Attention]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Attention]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Attention_Hover_Background);border-color:var(--sapButton_Attention_Hover_BorderColor);color:var(--sapButton_Attention_Hover_TextColor);box-shadow:var(--sapContent_Critical_Shadow)}:host([ui5-button][design=Attention][active]:not([non-interactive])){background-color:var(--sapButton_Attention_Active_Background);border-color:var(--sapButton_Attention_Active_BorderColor);color:var(--sapButton_Attention_Active_TextColor);text-shadow:none}:host([design=Attention][focused]:not([_is-touch])){outline-color:var(--_ui5_button_positive_border_focus_hover_color);border-color:var(--_ui5_button_attention_focus_border_color)}:host([design=Attention][active][focused]){outline-color:var(--_ui5_button_focus_outline_focus_color)}:host([design=Emphasized]){background-color:var(--sapButton_Emphasized_Background);border-color:var(--sapButton_Emphasized_BorderColor);color:var(--sapButton_Emphasized_TextColor);text-shadow:0 0 .125rem var(--sapButton_Emphasized_TextShadow);font-weight:var(--_ui5_button_emphasized_font_weight)}:host([design=Emphasized]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Emphasized]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Emphasized_Hover_Background);border-color:var(--sapButton_Emphasized_Hover_BorderColor);box-shadow:var(--sapContent_Informative_Shadow)}:host([ui5-button][design=Empasized][active]:not([non-interactive])){background-color:var(--sapButton_Emphasized_Active_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Emphasized_Active_TextColor);text-shadow:none}:host([design=Emphasized][focused]) .ui5-button-root:after{content:"";position:absolute;box-sizing:border-box;left:.0625rem;top:.0625rem;right:.0625rem;bottom:.0625rem;border:var(--_ui5_button_emphasized_focused_border);pointer-events:none;border-radius:var(--_ui5_button_emphasized_focused_border_radius)}:host([design=Transparent]){background-color:var(--sapButton_Lite_Background);color:var(--sapButton_Lite_TextColor);text-shadow:var(--_ui5_button_text_shadow);border-color:var(--sapButton_Lite_BorderColor)}:host([design=Transparent]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--_ui5_button_transparent_hover)}:host([design=Transparent]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered){background-color:var(--_ui5_button_transparent_hover);border-color:var(--sapButton_Lite_Hover_BorderColor);box-shadow:var(--sapContent_Critical_Shadow)}:host([ui5-button][design=Transparent][active]:not([non-interactive])){background-color:var(--sapButton_Active_Background);color:var(--sapButton_Active_TextColor);text-shadow:none}:host([design=Transparent]:not([active]):not([_is-touch]):hover){border-color:var(--sapButton_Lite_Hover_BorderColor)}
+.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}:host{min-width:var(--_ui5_button_base_min_width);height:var(--_ui5_button_base_height);line-height:normal;font-family:var(--_ui5_button_fontFamily);font-size:var(--sapFontSize);text-shadow:var(--_ui5_button_text_shadow);border-radius:var(--_ui5_button_border_radius);cursor:pointer;background-color:var(--sapButton_Background);border:var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);color:var(--sapButton_TextColor);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui5-button-root{min-width:inherit;cursor:inherit;height:100%;width:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;outline:none;padding:0 var(--_ui5_button_base_padding);position:relative;background:transparent;border:none;color:inherit;text-shadow:inherit;font:inherit;white-space:inherit;overflow:inherit;text-overflow:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:not([active]):not([non-interactive]):not([_is-touch]):hover),:host(:not([hidden]).ui5_hovered){background:var(--sapButton_Hover_Background);box-shadow:var(--sapContent_Interaction_Shadow);border:1px solid var(--sapButton_Hover_BorderColor);color:var(--sapButton_Hover_TextColor)}.ui5-button-icon{color:inherit;flex-shrink:0}:host([icon-end]) .ui5-button-root{flex-direction:row-reverse}:host([icon-end]) .ui5-button-icon{margin-inline-start:var(--_ui5_button_base_icon_margin)}:host([icon-only]) .ui5-button-root{min-width:auto;padding:0}:host([icon-only]) .ui5-button-text{display:none}.ui5-button-text{outline:none;position:relative;white-space:inherit;overflow:inherit;text-overflow:inherit}:host([has-icon]:not([icon-end])) .ui5-button-text{margin-inline-start:var(--_ui5_button_base_icon_margin)}:host([has-icon][icon-end]) .ui5-button-text{margin-inline-start:0}:host([disabled]){opacity:var(--sapContent_DisabledOpacity);pointer-events:none}:host([focused]) .ui5-button-root:after{content:"";position:absolute;box-sizing:border-box;left:.0625rem;top:.0625rem;right:.0625rem;bottom:.0625rem;border:var(--_ui5_button_focused_border);pointer-events:none;border-radius:var(--_ui5_button_focused_border_radius)}:host([design=Emphasized][focused]) .ui5-button-root:after{border-color:var(--_ui5_button_emphasized_focused_border_color)}:host([design=Emphasized][focused]) .ui5-button-root:before{content:"";position:absolute;box-sizing:border-box;left:.0625rem;top:.0625rem;right:.0625rem;bottom:.0625rem;border:var(--_ui5_button_emphasized_focused_border_before);pointer-events:none;border-radius:var(--_ui5_button_focused_border_radius)}.ui5-button-root::-moz-focus-inner{border:0}bdi{display:block;white-space:inherit;overflow:inherit;text-overflow:inherit}:host([ui5-button][active]:not([disabled]):not([non-interactive])){background-image:none;background-color:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_Active_TextColor)}:host([design=Positive]){background-color:var(--sapButton_Accept_Background);border-color:var(--sapButton_Accept_BorderColor);color:var(--sapButton_Accept_TextColor)}:host([design=Positive]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Positive]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Accept_Hover_Background);border-color:var(--sapButton_Accept_Hover_BorderColor);box-shadow:var(--sapContent_Positive_Shadow);color:var(--sapButton_Accept_Hover_TextColor)}:host([ui5-button][design=Positive][active]:not([non-interactive])){background-color:var(--sapButton_Accept_Active_Background);border-color:var(--sapButton_Accept_Active_BorderColor);color:var(--sapButton_Accept_Active_TextColor)}:host([design=Negative]){background-color:var(--sapButton_Reject_Background);border-color:var(--sapButton_Reject_BorderColor);color:var(--sapButton_Reject_TextColor)}:host([design=Negative]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Negative]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Reject_Hover_Background);border-color:var(--sapButton_Reject_Hover_BorderColor);box-shadow:var(--sapContent_Negative_Shadow);color:var(--sapButton_Reject_Hover_TextColor)}:host([ui5-button][design=Negative][active]:not([non-interactive])){background-color:var(--sapButton_Reject_Active_Background);border-color:var(--sapButton_Reject_Active_BorderColor);color:var(--sapButton_Reject_Active_TextColor)}:host([design=Attention]){background-color:var(--sapButton_Attention_Background);border-color:var(--sapButton_Attention_BorderColor);color:var(--sapButton_Attention_TextColor)}:host([design=Attention]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Attention]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Attention_Hover_Background);border-color:var(--sapButton_Attention_Hover_BorderColor);color:var(--sapButton_Attention_Hover_TextColor);box-shadow:var(--sapContent_Critical_Shadow)}:host([ui5-button][design=Attention][active]:not([non-interactive])){background-color:var(--sapButton_Attention_Active_Background);border-color:var(--sapButton_Attention_Active_BorderColor);color:var(--sapButton_Attention_Active_TextColor)}:host([design=Emphasized]){background-color:var(--sapButton_Emphasized_Background);border-color:var(--sapButton_Emphasized_BorderColor);border-width:var(--_ui5_button_emphasized_border_width);color:var(--sapButton_Emphasized_TextColor);font-weight:var(--_ui5_button_emphasized_font_weight)}:host([design=Emphasized]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Emphasized]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Emphasized_Hover_Background);border-color:var(--sapButton_Emphasized_Hover_BorderColor);border-width:var(--_ui5_button_emphasized_border_width);color:var(--sapButton_Emphasized_Hover_TextColor);box-shadow:none}:host([ui5-button][design=Empasized][active]:not([non-interactive])){background-color:var(--sapButton_Emphasized_Active_Background);border-color:var(--sapButton_Emphasized_Active_BorderColor);color:var(--sapButton_Emphasized_Active_TextColor)}:host([design=Emphasized][focused]) .ui5-button-root:after{border-color:var(--sapContent_ContrastFocusColor);outline:none}:host([design=Transparent]){background-color:var(--sapButton_Lite_Background);color:var(--sapButton_Lite_TextColor);border-color:var(--sapButton_Lite_BorderColor)}:host([design=Transparent]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered),:host([design=Transparent]:not([active]):not([non-interactive]):not([_is-touch]):hover){background-color:var(--sapButton_Lite_Hover_Background);border-color:var(--sapButton_Lite_Hover_BorderColor);box-shadow:var(--sapContent_Interaction_Shadow);color:var(--sapButton_Lite_Hover_TextColor)}:host([ui5-button][design=Transparent][active]:not([non-interactive])){background-color:var(--sapButton_Lite_Active_Background);border-color:var(--sapButton_Lite_Active_BorderColor);color:var(--sapButton_Active_TextColor)}:host([pressed][focused]) .ui5-button-root:after,:host([ui5-segmented-button-item][active][focused]) .ui5-button-root:after{border-color:var(--_ui5_button_pressed_focused_border_color);outline:none}:host([ui5-segmented-button-item][focused]:not(:last-child)) .ui5-button-root:after{border-top-right-radius:var(--_ui5_button_focused_inner_border_radius);border-bottom-right-radius:var(--_ui5_button_focused_inner_border_radius)}:host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after{border-top-left-radius:var(--_ui5_button_focused_inner_border_radius);border-bottom-left-radius:var(--_ui5_button_focused_inner_border_radius)}

package/dist/css/themes/CalendarHeader.css

@@ -1 +1 @@
-:host{display:block;width:100%;height:100%}.ui5-calheader-root{display:flex;height:100%;padding:var(--_ui5_calendar_header_padding);box-sizing:border-box}.ui5-calheader-arrowbtn{display:flex;justify-content:center;align-items:center;width:var(--_ui5_calendar_header_arrow_button_width);background-color:var(--sapButton_Lite_Background);color:var(--sapButton_TextColor);cursor:pointer;overflow:hidden;white-space:nowrap;padding:0;font-size:var(--sapFontSize)}.ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled,.ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:active,.ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:focus,.ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover{pointer-events:none;opacity:.4;outline:none;background-color:var(--sapButton_Lite_Background);color:var(--sapButton_TextColor)}[hidden].ui5-calheader-arrowbtn.ui5-calheader-middlebtn{display:none}.ui5-calheader-arrowbtn:focus{outline:none}.ui5-calheader-arrowbtn:hover{background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Hover_TextColor);box-shadow:var(--_ui5_calendar_header_arrow_button_box_shadow)}.ui5-calheader-arrowbtn:active{background-color:var(--sapButton_Active_Background);color:var(--sapButton_Active_TextColor)}.ui5-calheader-arrowbtn,.ui5-calheader-middlebtn{border:var(--_ui5_calendar_header_arrow_button_border);border-radius:var(--_ui5_calendar_header_arrow_button_border_radius);display:flex;background-color:var(--_ui5_calendar_header_button_background_color)}.ui5-calheader-middlebtn{flex-direction:column;align-items:center;justify-content:center}.ui5-calheader-btn-sectext{color:var(--sapNeutralElementColor);font-size:.625rem}.ui5-calheader-arrowicon{color:currentColor;pointer-events:none}.ui5-calheader-midcontainer{display:flex;justify-content:space-around;flex:1 1 auto;padding:0 .5rem}.ui5-calheader-midcontainer .ui5-calheader-middlebtn:first-child{margin-right:.5rem}.ui5-calheader-middlebtn{font-family:"72override",var(--sapFontFamily);width:var(--_ui5_calendar_header_middle_button_width);flex:var(--_ui5_calendar_header_middle_button_flex);position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui5-calheader-middlebtn:focus{border:var(--_ui5_calendar_header_middle_button_focus_border);border-radius:var(--_ui5_calendar_header_middle_button_focus_border_radius);outline:var(--_ui5_calendar_header_middle_button_focus_outline);outline-offset:-.125rem;background:var(--_ui5_calendar_header_middle_button_focus_background)}.ui5-calheader-middlebtn:focus:active{outline:var(--_ui5_calendar_header_middle_button_focus_active_outline);outline-offset:-.0625rem;background:var(--_ui5_calendar_header_middle_button_focus_active_background)}.ui5-calheader-middlebtn:focus:after{content:"";display:var(--_ui5_calendar_header_middle_button_focus_after_display);width:var(--_ui5_calendar_header_middle_button_focus_after_width);height:var(--_ui5_calendar_header_middle_button_focus_after_height);border:var(--_ui5_calendar_header_middle_button_focus_after_border);position:absolute;top:var(--_ui5_calendar_header_middle_button_focus_after_top_offset);left:var(--_ui5_calendar_header_middle_button_focus_after_left_offset)}.ui5-calheader-middlebtn:focus:active:after{border-color:var(--sapContent_ContrastFocusColor)}[dir=rtl] .ui5-calheader-root-midcontainer .ui5-calheader-middlebtn:first-child{margin-left:.5rem;margin-right:0}
+:host{display:block;width:100%;height:100%}.ui5-calheader-root{display:flex;height:100%;padding:var(--_ui5_calendar_header_padding);box-sizing:border-box}.ui5-calheader-arrowbtn{display:flex;justify-content:center;align-items:center;width:var(--_ui5_calendar_header_arrow_button_width);background-color:var(--sapButton_Lite_Background);color:var(--sapButton_TextColor);cursor:pointer;overflow:hidden;white-space:nowrap;padding:0;font-size:var(--sapFontSize)}.ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled,.ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:active,.ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:focus,.ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover{pointer-events:none;opacity:.4;outline:none;background-color:var(--sapButton_Lite_Background);color:var(--sapButton_TextColor)}[hidden].ui5-calheader-arrowbtn.ui5-calheader-middlebtn{display:none}.ui5-calheader-arrowbtn:focus{outline:none}.ui5-calheader-arrowbtn:hover{background-color:var(--sapButton_Hover_Background);color:var(--sapButton_Hover_TextColor);box-shadow:var(--_ui5_calendar_header_arrow_button_box_shadow)}.ui5-calheader-arrowbtn:active{background-color:var(--sapButton_Active_Background);color:var(--sapButton_Active_TextColor)}.ui5-calheader-arrowbtn,.ui5-calheader-middlebtn{border:var(--_ui5_calendar_header_arrow_button_border);border-radius:var(--_ui5_calendar_header_arrow_button_border_radius);display:flex;background-color:var(--_ui5_calendar_header_button_background_color)}.ui5-calheader-middlebtn{flex-direction:column;align-items:center;justify-content:center}.ui5-calheader-btn-sectext{color:var(--sapNeutralElementColor);font-size:.625rem}.ui5-calheader-arrowicon{color:currentColor;pointer-events:none}.ui5-calheader-midcontainer{display:flex;justify-content:space-around;flex:1 1 auto;padding:0 .5rem}.ui5-calheader-midcontainer .ui5-calheader-middlebtn:first-child{margin-inline-end:.5rem}.ui5-calheader-middlebtn{font-family:"72override",var(--sapFontFamily);width:var(--_ui5_calendar_header_middle_button_width);flex:var(--_ui5_calendar_header_middle_button_flex);position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui5-calheader-middlebtn:focus{border:var(--_ui5_calendar_header_middle_button_focus_border);border-radius:var(--_ui5_calendar_header_middle_button_focus_border_radius);outline:var(--_ui5_calendar_header_middle_button_focus_outline);outline-offset:-.125rem;background:var(--_ui5_calendar_header_middle_button_focus_background)}.ui5-calheader-middlebtn:focus:active{outline:var(--_ui5_calendar_header_middle_button_focus_active_outline);outline-offset:-.0625rem;background:var(--_ui5_calendar_header_middle_button_focus_active_background)}.ui5-calheader-middlebtn:focus:after{content:"";display:var(--_ui5_calendar_header_middle_button_focus_after_display);width:var(--_ui5_calendar_header_middle_button_focus_after_width);height:var(--_ui5_calendar_header_middle_button_focus_after_height);border:var(--_ui5_calendar_header_middle_button_focus_after_border);position:absolute;top:var(--_ui5_calendar_header_middle_button_focus_after_top_offset);left:var(--_ui5_calendar_header_middle_button_focus_after_left_offset)}.ui5-calheader-middlebtn:focus:active:after{border-color:var(--sapContent_ContrastFocusColor)}