@openui5/sap.tnt 1.118.0 → 1.119.0

package/THIRDPARTY.txt

@@ -401,7 +401,7 @@ License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
 Contained in: src/sap.ui.integration/src/sap/ui/integration/thirdparty/adaptive-expressions.js
 
-Component: Markdown-it, version: 12.2.0
+Component: Markdown-it, version: 12.3.2
 Copyright: 2014 Vitaly Puzrin, Alex Kocharin
 License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
@@ -466,7 +466,7 @@ License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: lib/jsdoc/ui5/plugin.js
 
-Component: SAP Theming Base Content, version: 11.4.2
+Component: SAP Theming Base Content, version: 11.6.8
 Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.tnt",
-  "version": "1.118.0",
+  "version": "1.119.0",
   "description": "OpenUI5 UI Library sap.tnt",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,7 +14,7 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.m": "1.118.0",
-    "@openui5/sap.ui.core": "1.118.0"
+    "@openui5/sap.m": "1.119.0",
+    "@openui5/sap.ui.core": "1.119.0"
   }
 }

package/src/sap/tnt/.library

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.118.0</version>
+  <version>1.119.0</version>
 
   <documentation>SAPUI5 library with responsive controls.</documentation>
 

package/src/sap/tnt/InfoLabel.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 *
 	 * <h3>Overview</h3>
 	 *
-	 * The control visualizes text information without user interaction. The text inside the control is always in upper case. It can have smaller or larger side paddings which can be specified by the <code>renderMode</code> property.
+	 * The control visualizes text information without user interaction.
 	 * The  text-background color pair can be changed by setting a number between 1 and 10 that corresponds to the 10 predefined color combinations of the <code>colorScheme</code> property.
 	 * The control is designed to be vertically aligned with UI5 Input and Button control families.
 	 * When using <code>InfoLabel</code> in non-editable <code>Forms</code>, <code>Tables</code>, etc., set <code>displayOnly=true</code> for best visual results.
@@ -40,14 +40,14 @@ sap.ui.define([
 	 * <ul>
 	 * <li>If the text is longer than the width of the control, it doesn’t wrap. Instead, it’s represented as ellipsis. </li>
 	 * <li>When truncated, the full text in the control is not visible. Therefore, it’s recommended to make more space for longer items to be fully displayed.</li>
-	 * <li>Colors are not semantic and have no visual representation in sap_belize_hcb and sap_belize_hcw themes.</li>
+	 * <li>Colors are not semantic and have no visual representation in sap_belize_hcb, sap_belize_hcw, sap_fiori_3_hcb and sap_fiori_3_hcw themes.</li>
 	 * <li>The control shows plain text only, formatting is not visualized.</li>
 	 * </ul>
 	 *
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.118.0
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @public
@@ -68,13 +68,14 @@ sap.ui.define([
 				/**
 				 * Specifies the type of the <code>InfoLabel</code> paddings - loose or narrow.
 				 * <b>Note:</b> By default the padding is loose. It is recommended to use narrow (smaller) paddings for numeric texts.
+				 * <b>Note:</b> In Horizon theme there is only one mode and setting this property will not have effect.
 				 */
 				renderMode: { type: "sap.tnt.RenderMode", defaultValue: RenderMode.Loose, group: "Appearance" },
 				/**
 				 * Specifies the fill and text color of the control. Accepts a number between 1 and 10 as a value.
 				 * You can choose from 10 predefined background and text color combinations.
 				 * The color schemes are non-semantic, you can select them according to your own preferences.
-				 * <b>Note:</b> ColorScheme 10 is available only in Fiori 3 theme.
+				 * <b>Note:</b> ColorScheme 10 is available only in Fiori 3 and Horizon themes.
 				 * The default <code>colorScheme</code> is 7.
 				 */
 				colorScheme: { type: "int", group: "Misc", defaultValue: 7 },

package/src/sap/tnt/NavigationList.js

@@ -53,7 +53,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.118.0
+		 * @version 1.119.0
 		 *
 		 * @constructor
 		 * @public
@@ -273,11 +273,14 @@ sap.ui.define([
 		};
 
 		NavigationList.prototype._overflowPress = function (event) {
-			var menu = this._createOverflowMenu();
-			menu.openBy(event.getSource(), false, Popup.Dock.EndCenter);
+			var opener = event.getSource();
+			opener.getDomRef().querySelector(".sapTntNavLIItem").classList.add("sapTntNavLIActive");
+
+			var menu = this._createOverflowMenu(opener);
+			menu.openBy(opener, false, Popup.Dock.EndCenter);
 		};
 
-		NavigationList.prototype._createOverflowMenu = function () {
+		NavigationList.prototype._createOverflowMenu = function (opener) {
 			var menu = new Menu({
 				items: this._createNavigationMenuItems(),
 				itemSelected: function (event) {
@@ -296,7 +299,10 @@ sap.ui.define([
 
 					menu.close();
 					menu.destroy();
-				}.bind(this)
+				}.bind(this),
+				closed: function () {
+					opener.getDomRef().querySelector(".sapTntNavLIItem").classList.remove("sapTntNavLIActive");
+				}
 			});
 
 			menu.addStyleClass("sapTntNavLIMenu");

package/src/sap/tnt/NavigationListItem.js

@@ -32,7 +32,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 		 * @extends sap.ui.core.Item
 		 *
 		 * @author SAP SE
-		 * @version 1.118.0
+		 * @version 1.119.0
 		 *
 		 * @constructor
 		 * @public
@@ -630,12 +630,13 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 			this._renderIcon(rm);
 
+			this._renderText(rm);
+
 			if (control.getExpanded()) {
 				var expandIconControl = this._getExpandIconControl();
 				expandIconControl.setVisible(expanderVisible);
 				expandIconControl.setSrc(this.getExpanded() ? NavigationListItem.collapseIcon : NavigationListItem.expandIcon);
 				expandIconControl.setTooltip(this._getExpandIconTooltip(!this.getExpanded()));
-				this._renderText(rm);
 				rm.icon(NavigationListItem.selectionIndicatorIcon, ["sapTntNavLISelectionIndicator"]);
 				rm.renderControl(expandIconControl);
 			}
@@ -912,13 +913,12 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 				$this.attr('aria-selected', true);
 			} else {
-
 				$this.attr('aria-checked', true);
 
 				$this = $this.find('.sapTntNavLIGroup');
 
 				if (this.getParent().isA("sap.tnt.NavigationListItem")) {
-					this.getParent().$().find('.sapTntNavLIGroup').addClass('sapTntNavLIItemSelected');
+					this.getParent().$().find('.sapTntNavLIGroup').addClass('sapTntNavLIItemSelected sapTntNavLIItemNoHoverEffect');
 				}
 				navList._closePopover();
 			}
@@ -980,6 +980,15 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 			}
 		};
 
+		NavigationListItem.prototype.onfocusout = function() {
+			var groupItem = this.getDomRef() && this.getDomRef().querySelector(".sapTntNavLIGroup");
+			if (groupItem) {
+				groupItem.classList.remove("sapTntNavLIItemNoHoverEffect");
+			}
+		};
+
+		NavigationListItem.prototype.onmouseover = NavigationListItem.prototype.onfocusout;
+
 		NavigationListItem.prototype.onmousedown = function(event) {
 			// prevent focusin event to be fired on <a> element
 			// ItemNavigation will take care for focusing the <li> element

package/src/sap/tnt/SideNavigation.js

@@ -38,7 +38,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.118.0
+		 * @version 1.119.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/tnt/ToolHeader.js

@@ -123,7 +123,7 @@ sap.ui.define([
 	* @implements sap.tnt.IToolHeader
 	*
 	* @author SAP SE
-	* @version 1.118.0
+	* @version 1.119.0
 	*
 	* @constructor
 	* @public

package/src/sap/tnt/ToolHeaderUtilitySeparator.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.118.0
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/ToolPage.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.118.0
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/library.js

@@ -17,13 +17,13 @@ sap.ui.define(["sap/ui/core/library", "sap/m/library"],
 	 * @namespace
 	 * @alias sap.tnt
 	 * @author SAP SE
-	 * @version 1.118.0
+	 * @version 1.119.0
 	 * @since 1.36
 	 * @public
 	 */
 	var thisLib = sap.ui.getCore().initLibrary({
 		name : "sap.tnt",
-		version: "1.118.0",
+		version: "1.119.0",
 		dependencies : ["sap.ui.core", "sap.m"],
 		designtime: "sap/tnt/designtime/library.designtime",
 		types: [

package/src/sap/tnt/messagebundle_fi.properties

@@ -14,7 +14,7 @@ NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_MENUBAR=Navigointiluettelon valikkopalkki
 
 NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE=Navigointiluettelopuu
 
-NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE_ITEM=Navigointiluettelopuun elementti
+NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE_ITEM=Navigointiluettelopuun elementti\u00DF
 
 NAVIGATION_LIST_DIALOG_TITLE=Navigointi
 

package/src/sap/tnt/themes/base/InfoLabel.less

@@ -6,31 +6,45 @@
 @_sap_tnt_InfoLabel_NarrowPadding: 0 0.1875rem;
 @_sap_tnt_InfoLabel_LineHeight: normal;
 @_sap_tnt_InfoLabel_LineHeightDisplayOnly: 1rem;
+@_sap_tnt_InfoLabel_Height: 1rem;
 @_sap_tnt_InfoLabel_HeightWithoutBorders: 0.875rem;
+@_sap_tnt_InfoLabel_FontFamily: @sapUiFontFamily;
+@_sap_tnt_InfoLabel_FontSize: @sapFontSmallSize;
+@_sap_tnt_InfoLabel_DisplayFontSize: @_sap_tnt_InfoLabel_FontSize;
+@_sap_tnt_InfoLabel_DisplayFontSizeIcon: @_sap_tnt_InfoLabel_FontSize;
+@_sap_tnt_InfoLabel_Padding: 0 0.3125rem;
+@_sap_tnt_InfoLabel_DisplayPadding: @_sap_tnt_InfoLabel_Padding;
+@_sap_tnt_InfoLabel_IconMargin: 0.125rem;
+@_sap_tnt_InfoLabel_DisplayIconMargin: 0.1875rem;
 @_sap_tnt_InfoLabel_PaddingWhenEmpty: 0 @_sap_tnt_InfoLabel_HeightWithoutBorders/2;
 @_sap_tnt_InfoLabel_DisplayModeBorder: none;
 @_sap_tnt_InfoLabel_DisplayModeBackground: @sapTextColor;
 @_sap_tnt_InfoLabel_DisplayModeColor: @sapContent_ContrastTextColor;
+@_sap_tnt_InfoLabel_BorderRadius: 0.5rem;
+@_sap_tnt_InfoLabel_DisplayBorderRadius: @_sap_tnt_InfoLabel_BorderRadius;
+@_sap_tnt_InfoLabel_Text: uppercase;
+@_sap_tnt_InfoLabel_LetterSpacing: 0.0125rem;
 
 /* ==========================================================================
    Root element
    ========================================================================== */
 .sapTntInfoLabel {
 	box-sizing: border-box;
-	padding: 0 0.3125rem;
+	padding: @_sap_tnt_InfoLabel_Padding;
 	text-align: center;
-	border-radius: 0.5rem;
-	height: 1rem;
+	border-radius: @_sap_tnt_InfoLabel_BorderRadius;
+	height: @_sap_tnt_InfoLabel_Height;
 	display: inline-block;
 	max-width: 100%;
 	line-height: @_sap_tnt_InfoLabel_LineHeight;
 
 	.sapTntInfoLabelInner {
-		font-size: @sapFontSmallSize;
+		font-size: @_sap_tnt_InfoLabel_FontSize;
 		font-weight: bold;
+		font-family: @_sap_tnt_InfoLabel_FontFamily;
 		vertical-align: top;
-		letter-spacing: 0.0125rem;
-		text-transform: uppercase;
+		letter-spacing: @_sap_tnt_InfoLabel_LetterSpacing;
+		text-transform: @_sap_tnt_InfoLabel_Text;
 		display: inline-block;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -49,10 +63,14 @@
 .sapTntInfoLabel.sapTntInfoLabelDisplayOnly {
 	border: @_sap_tnt_InfoLabel_DisplayModeBorder;
 	background: @_sap_tnt_InfoLabel_DisplayModeBackground;
+	height: 1rem;
+	border-radius: @_sap_tnt_InfoLabel_DisplayBorderRadius;
+	padding: @_sap_tnt_InfoLabel_DisplayPadding;
 
 	.sapTntInfoLabelInner {
 		color: @_sap_tnt_InfoLabel_DisplayModeColor;
 		line-height: @_sap_tnt_InfoLabel_LineHeightDisplayOnly;
+		font-size: @_sap_tnt_InfoLabel_DisplayFontSize;
 	}
 }
 
@@ -74,22 +92,25 @@
 	}
 
 	.sapUiIcon {
-		padding-right: 0.125rem;
+		padding-right: @_sap_tnt_InfoLabel_IconMargin;
 		line-height: @_sap_tnt_InfoLabel_HeightWithoutBorders;
 		vertical-align: top;
+		font-size: @_sap_tnt_InfoLabel_FontSize;
 	}
 
 	&.sapTntInfoLabelNoText {
 		padding: @_sap_tnt_InfoLabel_NarrowPadding;
 
-		.sapUiIcon {
-			padding-right: 0;
+		.sapTntInfoLabelInner .sapUiIcon {
+			padding-right: 0 !important;
 		}
 	}
 
-	&.sapTntInfoLabelDisplayOnly {
-		.sapUiIcon {
+	&.sapTntInfoLabelDisplayOnly .sapTntInfoLabelInner {
+		.sapUiIcon:not(.sapMBtnIcon) { // needs this to override Form styles
 			line-height: @_sap_tnt_InfoLabel_LineHeightDisplayOnly;
+			padding-right: @_sap_tnt_InfoLabel_DisplayIconMargin;
+			font-size: @_sap_tnt_InfoLabel_DisplayFontSizeIcon;
 		}
 	}
 }

package/src/sap/tnt/themes/base/NavigationList.less

@@ -14,6 +14,7 @@
 @_sap_tnt_NavigationList_ItemBorderStyleColor: none;
 @_sap_tnt_NavigationList_ItemBorderWidth: 0;
 @_sap_tnt_NavigationList_ItemHeight: 3rem;
+@_sap_tnt_NavigationList_ItemHeightCompact: 2rem;
 @_sap_tnt_NavigationList_LastItemBorderStyleColor: none;
 @_sap_tnt_NavigationList_ItemBorderRadius: 0;
 @_sap_tnt_NavigationList_ItemBottomMargin: 0;
@@ -27,12 +28,12 @@
 @_sap_tnt_NavigationList_SelectedItemBorderColor: @sapUiListSelectionBorderColor;
 @_sap_tnt_NavigationList_SelectedBorderStyleColor: solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
 @_sap_tnt_NavigationList_SelectedBorderWidth: 0 0 0.0625rem 0;
+@_sap_tnt_NavigationList_SelectedAndFocusedBorderStyleColor: @_sap_tnt_NavigationList_SelectedBorderStyleColor;
 @_sap_tnt_NavigationList_Collapsed_SelectedItemBorderStyleColor: solid @_sap_tnt_NavigationList_SelectedItemBorderColor;
 @_sap_tnt_NavigationList_Collapsed_SelectedGroupBorderColor: @_sap_tnt_NavigationList_SelectedItemBorderColor;
 @_sap_tnt_NavigationList_Collapsed_GroupBorderWidth: @sapUiListBorderColor;
 @_sap_tnt_NavigationList_GroupExpandedBorderWidth: @_sap_tnt_NavigationList_GroupBorderWidth;
 @_sap_tnt_NavigationList_GroupIconWidth: @_sap_tnt_NavigationList_CollapsedWidth;
-@_sap_tnt_NavigationList_GroupBottomBorderColor: @sapUiListBorderColor;
 @_sap_tnt_NavigationList_GroupTextWeight: unset;
 @_sap_tnt_NavigationList_GroupBottomMarginInPopup: 0;
 @_sap_tnt_NavigationList_Padding: 0;
@@ -46,6 +47,12 @@
 @_sap_tnt_NavigationList_PopupTitleTextSize: @sapMFontMediumSize;
 @_sap_tnt_NavigationList_PopupTitleLineHeight: normal;
 @_sap_tnt_NavigationList_SelectionIndicatorDisplay: none;
+@_sap_tnt_NavigationList_Collapsed_HoverOrFocusItemPadding: 0;
+@_sap_tnt_NavigationList_Collapsed_HoverOrFocusItemPaddingCompact: 0;
+@_sap_tnt_NavigationList_Collapsed_HoverOrFocusTextDisplay: none;
+@_sap_tnt_NavigationList_Collapsed_HoverOrFocusItemZIndex: 0;
+@_sap_tnt_NavigationList_Collapsed_HoverOrFocusItemPosition: relative;
+@_sap_tnt_NavigationList_Collapsed_ItemHoverBoxShadow: @_sap_tnt_SideNavigation_BoxShadow;
 
 .sapTntNavLI {
 	margin: 0;
@@ -56,7 +63,7 @@
 }
 
 .sapTntNavLI.sapTntNavLICollapsed {
-	overflow: visible hidden;
+	overflow: visible;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
@@ -74,8 +81,11 @@
 	list-style: none;
 }
 
+.sapTntNavLI.sapTntNavLICollapsed li {
+	min-height: @_sap_tnt_NavigationList_ItemHeight + @_sap_tnt_NavigationList_ItemBottomMargin;
+}
+
 .sapTntNavLIItem {
-	width: 100%;
 	height: @_sap_tnt_NavigationList_ItemHeight;
 	box-sizing: border-box;
 	cursor: pointer;
@@ -147,6 +157,14 @@
 	}
 }
 
+.sapTntNavLI li:focus .sapTntNavLIItem:not(.sapTntNavLIItemDisabled).sapTntNavLIItemSelected,
+.sapTntNavLI .sapTntNavLIItem:not(.sapTntNavLIItemDisabled).sapTntNavLIItemSelected:focus {
+	&::before {
+		border: @_sap_tnt_NavigationList_SelectedAndFocusedBorderStyleColor;
+	}
+}
+
+
 .sapTntNavLIGroupItem {
 	&::before {
 		border: @_sap_tnt_NavigationList_ItemBorderStyleColor;
@@ -265,6 +283,32 @@
 	font-weight: @_sap_tnt_NavigationList_GroupTextWeight;
 }
 
+.sapTntNavLICollapsed {
+
+	.sapTntNavLIText {
+		display: none;
+	}
+
+	.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):not(.sapTntNavLIActive):hover,
+	&.sapTntNavLI li:focus .sapTntNavLIItem,
+	.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):not(.sapTntNavLIActive):focus {
+
+		&:not(.sapTntNavLIItemNoHoverEffect) {
+			position: @_sap_tnt_NavigationList_Collapsed_HoverOrFocusItemPosition;
+			padding: @_sap_tnt_NavigationList_Collapsed_HoverOrFocusItemPadding;
+			z-index: @_sap_tnt_NavigationList_Collapsed_HoverOrFocusItemZIndex;
+
+			.sapTntNavLIText {
+				display: @_sap_tnt_NavigationList_Collapsed_HoverOrFocusTextDisplay;
+			}
+		}
+	}
+
+	.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):not(.sapTntNavLIActive):hover {
+		box-shadow: @_sap_tnt_NavigationList_Collapsed_ItemHoverBoxShadow;
+	}
+}
+
 .sapTntNavLIItem:not(.sapTntNavLIItemDisabled):hover {
 	background-color: @sapUiListHoverBackground;
 }
@@ -290,8 +334,7 @@
 }
 
 .sapTntNavLISelectionIndicator {
-	display: @_sap_tnt_NavigationList_SelectionIndicatorDisplay;
-	opacity: 0;
+	display: none;
 	font-size: 0.5rem;
 	color: @sapUiListSelectionBorderColor;
 }
@@ -303,7 +346,7 @@
 	background-color: @sapUiListSelectionBackgroundColor;
 
 	.sapTntNavLISelectionIndicator {
-		opacity: 1;
+		display: @_sap_tnt_NavigationList_SelectionIndicatorDisplay;
 	}
 }
 
@@ -407,6 +450,55 @@
 		padding: 0.5rem;
 	}
 
+	// parent menu
+	&:not(.sapUiSubmenu) .sapUiMnuLst .sapUiMnuItm  {
+		font-weight: @_sap_tnt_NavigationList_GroupTextWeight;
+
+		.sapUiMnuItmIco {
+			position: relative !important;
+			width: auto;
+			padding-inline: 0 0.5rem;
+
+			.sapUiIcon {
+				color: @_sap_tnt_NavigationList_IconColor;
+				display: block;
+				width: 1rem;
+				height: 1rem;
+			}
+		}
+
+		.sapUiMnuItmSbMnu {
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 0.75rem;
+			height: 100%;
+			padding-inline-start: 0.5rem;
+
+			.sapUiIconMirrorInRTL::after {
+				content: "\e1ed";
+				font-size: 0.75rem;
+				color: @_sap_tnt_NavigationList_IconColor;
+			}
+		}
+
+		.sapUiMnuItmR {
+			display: none;
+		}
+
+		&.sapUiMnuItmSubMnuOpen,
+		&.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov {
+			&::before {
+				position: absolute;
+				content: "";
+				inset: 0;
+				border: @_sap_tnt_NavigationList_SelectedBorderStyleColor;
+				border-width: @_sap_tnt_NavigationList_SelectedBorderWidth;
+			}
+		}
+	}
+
 	.sapUiMnuLst {
 		li.sapUiMnuItm {
 			display: flex;
@@ -442,55 +534,6 @@
 				border-width: @_sap_tnt_NavigationList_ItemBorderWidth;
 			}
 		}
-
-		// parent menu
-		&:not(.sapUiMnuNoSbMnu) .sapUiMnuItm {
-			font-weight: @_sap_tnt_NavigationList_GroupTextWeight;
-
-			.sapUiMnuItmIco {
-				position: relative;
-				width: auto;
-				padding-inline: 0 0.5rem;
-
-				.sapUiIcon {
-					color: @_sap_tnt_NavigationList_IconColor;
-					display: block;
-					width: 1rem;
-					height: 1rem;
-				}
-			}
-
-			.sapUiMnuItmSbMnu {
-				position: relative;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 0.75rem;
-				height: 100%;
-				padding-inline-start: 0.5rem;
-
-				.sapUiIconMirrorInRTL::after {
-					content: "\e1ed";
-					font-size: 0.75rem;
-					color: @_sap_tnt_NavigationList_IconColor;
-				}
-			}
-
-			.sapUiMnuItmR {
-				display: none;
-			}
-
-			&.sapUiMnuItmSubMnuOpen,
-			&.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov {
-				&::before {
-					position: absolute;
-					content: "";
-					inset: 0;
-					border: @_sap_tnt_NavigationList_SelectedBorderStyleColor;
-					border-width: @_sap_tnt_NavigationList_SelectedBorderWidth;
-				}
-			}
-		}
 	}
 }
 
@@ -501,9 +544,13 @@
 		padding: @_sap_tnt_NavigationList_PaddingCompact;
 	}
 
+	.sapTntNavLI.sapTntNavLICollapsed li {
+		min-height: @_sap_tnt_NavigationList_ItemHeightCompact + @_sap_tnt_NavigationList_ItemBottomMarginCompact;
+	}
+
 	.sapTntNavLIMenu.sapUiMnu li.sapUiMnuItm,
 	.sapTntNavLIItem {
-		height: 2rem;
+		height: @_sap_tnt_NavigationList_ItemHeightCompact;
 	}
 
 	.sapTntNavLIPopup .sapTntNavLIGroupItem .sapMText {
@@ -524,7 +571,7 @@
 
 	.sapTntNavLIPopup span.sapTntNavLIGroupIcon {
 		width: 0.5rem;
-	  	min-width: 0.5rem;
+		min-width: 0.5rem;
 	}
 
 	// NavigationList with icons
@@ -540,4 +587,12 @@
 			margin-bottom: @_sap_tnt_NavigationList_ItemBottomMarginCompact;
 		}
 	}
+
+	.sapTntNavLICollapsed {
+		.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):not(.sapTntNavLIActive):hover,
+		&.sapTntNavLI li:focus .sapTntNavLIItem,
+		.sapTntNavLIItem:not(.sapTntNavLIItemDisabled):not(.sapTntNavLIActive):focus {
+			padding: @_sap_tnt_NavigationList_Collapsed_HoverOrFocusItemPaddingCompact;
+		}
+	}
 }

package/src/sap/tnt/themes/base/SideNavigation.less

@@ -18,13 +18,11 @@
 @_sap_tnt_SideNavigation_TriangleDisplay: block;
 
 .sapTntSideNavigation {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: @sapUiListBackground;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	background: @sapUiListBackground;
 	border-right: @_sap_tnt_SideNavigation_BorderRight;
 	box-shadow: @_sap_tnt_SideNavigation_BoxShadow;
 	border-radius: @_sap_tnt_SideNavigation_BorderRadius;
@@ -43,9 +41,7 @@ html.sap-tablet:not(html.sap-combi) {
 }
 
 .sapTntSideNavigationNotExpanded {
-	.sapTntNavLIText, .sapTntNavLIExpandIcon  {
-		display: none;
-	}
+
 	.sapTntSideNavigationSeparator {
 		margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
 	}
@@ -69,7 +65,6 @@ html.sap-tablet:not(html.sap-combi) {
 	flex: 1;
 	min-height: 0;
 	position: relative;
-	overflow: hidden;
 	box-sizing: border-box;
 	outline: none;
 }
@@ -90,7 +85,11 @@ html.sap-tablet:not(html.sap-combi) {
 }
 
 .sapTntSideNavigationFixed {
-  position: relative;
+	position: relative;
+}
+
+html.sap-desktop:not(.sapUiNativeScrollbars) .sapTntSideNavigation ::-webkit-scrollbar {
+	border-radius: @_sap_tnt_SideNavigation_BorderRadius;
 }
 
 /*  Compact size

package/src/sap/tnt/themes/base/ToolPage.less

@@ -44,14 +44,6 @@
   background: @_sap_tnt_ToolPage_Background;
 }
 
-/* ==========================================================================
-   Header
-   ========================================================================== */
-
-.sapTntToolPageHeaderWrapper {
-  z-index: 2; // bring header above content wrapper to draw drop shadow over the content
-}
-
 /* ==========================================================================
    Content wrapper
    ========================================================================== */
@@ -71,6 +63,9 @@
 
   will-change: transform;
   margin: @_sap_tnt_ToolPage_AsideMargins;
+}
+
+.sapTntToolPageAsideCollapsed .sapTntToolPageAside {
   z-index: 2;
 }
 
@@ -101,11 +96,11 @@ html.sap-phone {
   }
 
   .sapTntToolPageAside {
+    z-index: 2;
     position: absolute;
     left: 0;
     bottom: 0;
     top: 0;
-    z-index: 4;
 
     margin: @_sap_tnt_ToolPage_AsideMarginsPhone;
   }
@@ -131,7 +126,6 @@ html.sap-phone {
   flex: 1;
   min-width: 0; // fixes flex chrome issue
   overflow: hidden;
-  z-index: 3;
 
   will-change: transform;
   margin: @_sap_tnt_ToolPage_ContentMargins;
@@ -140,6 +134,10 @@ html.sap-phone {
   background: @_sap_tnt_ToolPage_ContentBackgroundStandard;
 }
 
+.sapTntToolPageAsideCollapsed .sapTntToolPageMain {
+  z-index: 1;
+}
+
 .sapTntToolPageMain.sapTntToolPageMainBackground-Solid {
   background: @_sap_tnt_ToolPage_ContentBackgroundSolid;
 }

package/src/sap/tnt/themes/base/library.source.less

@@ -7,8 +7,8 @@
 @import "../../../../sap/ui/core/themes/base/base.less";
 @import "../../../../sap/ui/core/themes/base/global.less";
 
-@import "NavigationList.less";
 @import "ToolHeader.less";
 @import "SideNavigation.less";
+@import "NavigationList.less"; // keep this order, it reuses variable @_sap_tnt_SideNavigation_BoxShadow defined in SideNavigation.less
 @import "ToolPage.less";
 @import "InfoLabel.less";