@openui5/sap.tnt 1.143.1 → 1.144.0

package/THIRDPARTY.txt

@@ -202,7 +202,7 @@ License: Apache-2.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: src/sap.ui.core/src/sap/ui/thirdparty/caja-html-sanitizer.js
 
-Component: Unicode Common Locale Data Repository, version: 46.1.0
+Component: Unicode Common Locale Data Repository, version: 48.0.0
 Copyright: 1991-2024 Unicode, Inc.
 License: LicenseRef-Unicode-3.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/LicenseRef-Unicode-3.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.tnt",
-  "version": "1.143.1",
+  "version": "1.144.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/UI5/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.m": "1.143.1",
-    "@openui5/sap.ui.core": "1.143.1"
+    "@openui5/sap.m": "1.144.0",
+    "@openui5/sap.ui.core": "1.144.0"
   }
 }

package/src/sap/tnt/.library

@@ -4,9 +4,9 @@
   <name>sap.tnt</name>
   <vendor>SAP SE</vendor>
   <copyright>OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.143.1</version>
+  <version>1.144.0</version>
 
   <documentation>SAPUI5 library with responsive controls.</documentation>
 

package/src/sap/tnt/IllustratedMessageType.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/InfoLabel.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -48,7 +48,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/InfoLabelRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/NavigationList.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -57,7 +57,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/NavigationListGroup.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.tnt.NavigationListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/NavigationListItem.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -59,7 +59,7 @@ sap.ui.define([
 	 * @extends sap.tnt.NavigationListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/NavigationListItemBase.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -29,7 +29,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Item
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/NavigationListMenuItem.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -38,13 +38,13 @@ sap.ui.define([
 	 * @extends sap.ui.unified.MenuItem
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @private
 	 * @alias sap.tnt.NavigationListMenuItem
 	 */
-	var NavigationListMenuItem = MenuItem.extend("sap.tnt.NavigationListMenuItem", /** @lends sap.ui.unified.MenuItem.prototype */ { metadata : {
+	var NavigationListMenuItem = MenuItem.extend("sap.tnt.NavigationListMenuItem", /** @lends sap.tnt.NavigationListMenuItem.prototype */ { metadata : {
 
 		library : "sap.tnt",
 		properties : {

package/src/sap/tnt/NavigationListMenuItemRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/NavigationListRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/SideNavigation.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/SideNavigationRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/ToolHeader.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -122,7 +122,7 @@ sap.ui.define([
 	* @extends sap.m.OverflowToolbar
 	*
 	* @author SAP SE
-	* @version 1.143.1
+	* @version 1.144.0
 	*
 	* @constructor
 	* @public

package/src/sap/tnt/ToolHeaderRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/ToolHeaderUtilitySeparator.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/ToolPage.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -22,6 +22,9 @@ sap.ui.define([
 			 ToolPageRenderer) {
 	"use strict";
 
+	var TP_RANGE_SET = "TPRangeSet";
+	Device.media.initRangeSet(TP_RANGE_SET, [600], "px", ["S", "M"], true);
+
 	// shortcut for sap.m.PageBackgroundDesign
 	var PageBackgroundDesign = mLibrary.PageBackgroundDesign;
 
@@ -41,7 +44,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 *
 	 * @constructor
 	 * @public
@@ -55,6 +58,8 @@ sap.ui.define([
 				/**
 				 * Indicates if the side menu is expanded.
 				 * Overrides the <code>expanded</code> property of the <code>sideContent</code> aggregation.
+				 * **Note:** By default, on small screens, the side content is collapsed to provide more space for the main content.
+				 *  On larger screens, it is expanded. This behavior can be overridden by setting this property.
 				 */
 				sideExpanded: {type: "boolean", group: "Misc", defaultValue: true},
 
@@ -123,9 +128,9 @@ sap.ui.define([
 	};
 
 	ToolPage.prototype.onAfterRendering = function () {
-		this._ResizeHandler = ResizeHandler.register(this.getDomRef(), this._mediaQueryHandler.bind(this));
+		this._resizeHandler = ResizeHandler.register(this.getDomRef(), this._resize.bind(this));
 
-		this._updateLastMediaQuery();
+		this._updateLayoutSettings();
 	};
 
 	/**
@@ -147,13 +152,12 @@ sap.ui.define([
 		this.setProperty("sideExpanded", bSideExpanded, true);
 
 		var oSideContent = this.getSideContent();
-		if (oSideContent) {
-			var bNewState = Device.system.phone ? true : bSideExpanded;
-			oSideContent.setExpanded(bNewState);
-		} else {
+		if (!oSideContent) {
 			return this;
 		}
 
+		oSideContent.setExpanded(bSideExpanded);
+
 		var oDomRef = this.getDomRef();
 		if (!oDomRef) {
 			return this;
@@ -172,9 +176,9 @@ sap.ui.define([
 	 * @private
 	 */
 	ToolPage.prototype._deregisterControl = function () {
-		if (this._ResizeHandler) {
-			ResizeHandler.deregister(this._ResizeHandler);
-			this._ResizeHandler = null;
+		if (this._resizeHandler) {
+			ResizeHandler.deregister(this._resizeHandler);
+			this._resizeHandler = null;
 		}
 	};
 
@@ -182,71 +186,36 @@ sap.ui.define([
 	 * Handles the change of the screen size.
 	 * @private
 	 */
-	ToolPage.prototype._mediaQueryHandler = function () {
-		var oSideContent = this.getSideContent();
-
-		if (oSideContent === null) {
-			return;
-		}
+	ToolPage.prototype._resize = function () {
+		this._updateLayoutSettings();
+	};
 
-		this._currentMediaQuery = this._getDeviceAsString();
+	ToolPage.prototype._updateLayoutSettings = function () {
+		const oMediaRange = this._getMediaRange();
+		const sClassName = "sapTntToolPage-Layout" + oMediaRange.name;
 
-		if (this._getLastMediaQuery() === this._currentMediaQuery) {
+		if (this._sCurrentLayoutClassName === sClassName) {
 			return;
 		}
 
-		switch (this._currentMediaQuery) {
-			case "Combi":
-				this.setSideExpanded(true);
-				break;
-			case "Tablet":
-				this.setSideExpanded(false);
-				break;
-			case "Phone":
-				this.setSideExpanded(false);
-				oSideContent.setExpanded(true);
-				break;
-			default:
-				this.setSideExpanded(true);
+		if (this._sCurrentLayoutClassName) {
+			this.removeStyleClass(this._sCurrentLayoutClassName);
 		}
 
-		this._updateLastMediaQuery();
-	};
+		this.setSideExpanded(this.isPropertyInitial("sideExpanded") ? !this._isLayoutS() : this.getSideExpanded());
 
-	/**
-	 * Returns the last media query.
-	 * @returns {undefined|string}
-	 * @private
-	 */
-	ToolPage.prototype._getLastMediaQuery = function () {
-		return this._lastMediaQuery;
-	};
 
-	/**
-	 * Sets the last media query.
-	 * @returns {ToolPage}
-	 * @private
-	 */
-	ToolPage.prototype._updateLastMediaQuery = function () {
-		this._lastMediaQuery = this._getDeviceAsString();
+		this.addStyleClass(sClassName);
 
-		return this;
+		this._sCurrentLayoutClassName = sClassName;
 	};
 
-	ToolPage.prototype._getDeviceAsString = function () {
-		if (Device.system.combi) {
-			return "Combi";
-		}
-
-		if (Device.system.phone) {
-			return "Phone";
-		}
-
-		if (Device.system.tablet) {
-			return "Tablet";
-		}
+	ToolPage.prototype._getMediaRange = function () {
+		return Device.media.getCurrentRange(TP_RANGE_SET, window.innerWidth);
+	};
 
-		return "Desktop";
+	ToolPage.prototype._isLayoutS = function () {
+		return this._getMediaRange().name === "S";
 	};
 
 	ToolPage.prototype._onContentChange = function(oChanges) {
@@ -265,4 +234,4 @@ sap.ui.define([
 	};
 
 	return ToolPage;
-});
+});

package/src/sap/tnt/ToolPageRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -31,6 +31,10 @@ sap.ui.define([
 			oRM.class("sapTntToolPageWithSideContent");
 		}
 
+		if (window.innerWidth < 600) {
+			oRM.class("sapTntToolPage-LayoutS");
+		}
+
 		oRM.openEnd();
 
 		this.renderHeader(oRM, oControl);
@@ -86,7 +90,7 @@ sap.ui.define([
 	ToolPageRenderer.renderContent = function (oRM, oControl) {
 		oRM.openStart("div").class("sapTntToolPageContentWrapper");
 
-		if (!Device.system.desktop || !oControl.getSideExpanded()) {
+		if (window.innerWidth < 600 || !oControl.getSideExpanded()) {
 			oRM.class("sapTntToolPageAsideCollapsed");
 		}
 
@@ -113,10 +117,6 @@ sap.ui.define([
 				oSideContent.setExpanded(bSideExpanded);
 			}
 
-			if (!Device.system.desktop) {
-				oControl.setSideExpanded(false);
-			}
-
 			// The render of the aggregation should be after the above statement,
 			// due to class manipulations inside the aggregation.
 			oRM.renderControl(oSideContent);

package/src/sap/tnt/designtime/NavigationList.designtime.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/designtime/NavigationListGroup.designtime.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/designtime/NavigationListItem.designtime.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/designtime/library.designtime.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/flexibility/NavigationList.flexibility.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/flexibility/NavigationListGroup.flexibility.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/flexibility/NavigationListItem.flexibility.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/tnt/library.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -22,14 +22,14 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.tnt
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.144.0
 	 * @since 1.36
 	 * @public
 	 */
 	var thisLib = Library.init({
 		apiVersion: 2,
 		name : "sap.tnt",
-		version: "1.143.1",
+		version: "1.144.0",
 		dependencies : ["sap.ui.core", "sap.m"],
 		designtime: "sap/tnt/designtime/library.designtime",
 		types: [

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

@@ -1,15 +1,15 @@
-/* ================================= */
-/* CSS for control sap.tnt/InfoLabel */
-/* Base theme                        */
-/* ================================= */
+/* ================================== */
+/* CSS for control sap.tnt/InfoLabel  */
+/* Base theme                         */
+/* ================================== */
 
 @_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: @sapMFontSmallSize;
+@_sap_tnt_InfoLabel_FontFamily: var(--sapFontFamily);
+@_sap_tnt_InfoLabel_FontSize: var(--sapFontSmallSize);
 @_sap_tnt_InfoLabel_DisplayFontSize: @_sap_tnt_InfoLabel_FontSize;
 @_sap_tnt_InfoLabel_DisplayFontSizeIcon: @_sap_tnt_InfoLabel_FontSize;
 @_sap_tnt_InfoLabel_Padding: 0 0.3125rem;
@@ -18,16 +18,17 @@
 @_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: @sapUiBaseText;
-@_sap_tnt_InfoLabel_DisplayModeColor: @sapUiContentContrastTextColor;
+@_sap_tnt_InfoLabel_DisplayModeBackground: var(--sapTextColor);
+@_sap_tnt_InfoLabel_DisplayModeColor: var(--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
-   ========================================================================== */
+/* ========================================================================== */
+/*   Root element                                                             */
+/* ========================================================================== */
+
 .sapTntInfoLabel {
 	box-sizing: border-box;
 	padding: @_sap_tnt_InfoLabel_Padding;
@@ -53,13 +54,14 @@
 	}
 }
 
-.sapTntInfoLabelRenderModeNarrow { // Recommended for numeric labels (Numeric Mode)
-	padding: @_sap_tnt_InfoLabel_NarrowPadding
+.sapTntInfoLabelRenderModeNarrow { /* Recommended for numeric labels (Numeric Mode) */
+	padding: @_sap_tnt_InfoLabel_NarrowPadding;
 }
 
-/* ==========================================================================
-   InfoLabel Display Only
-   ========================================================================== */
+/* ========================================================================== */
+/* InfoLabel Display Only                                                     */
+/* ========================================================================== */
+
 .sapTntInfoLabel.sapTntInfoLabelDisplayOnly {
 	border: @_sap_tnt_InfoLabel_DisplayModeBorder;
 	background: @_sap_tnt_InfoLabel_DisplayModeBackground;
@@ -74,16 +76,17 @@
 	}
 }
 
-/* ==========================================================================
-   InfoLabel No Text
-   ========================================================================== */
-   .sapTntInfoLabel.sapTntInfoLabelNoText {
+/* ========================================================================== */
+/* InfoLabel No Text                                                          */
+/* ========================================================================== */
+
+.sapTntInfoLabel.sapTntInfoLabelNoText {
 	padding: 0 0.1875rem;
-   }
+}
 
-   /* ==========================================================================
-   InfoLabel With Icon
-   ========================================================================== */
+/* ========================================================================== */
+/* InfoLabel With Icon                                                        */
+/* ========================================================================== */
 
 .sapTntInfoLabel.sapTntInfoLabelWithIcon {
 
@@ -107,7 +110,8 @@
 	}
 
 	&.sapTntInfoLabelDisplayOnly .sapTntInfoLabelInner {
-		.sapUiIcon:not(.sapMBtnIcon) { // needs this to override Form styles
+
+		.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;
@@ -115,23 +119,25 @@
 	}
 }
 
-/* ==========================================================================
-   Empty InfoLabel
-   ========================================================================== */
+/* ========================================================================== */
+/* Empty InfoLabel                                                            */
+/* ========================================================================== */
 
-// It is recommended for the empty InfoLabel to be circle
+/* It is recommended for the empty InfoLabel to be circle */
 .sapTntInfoLabel.sapTntInfoLabelNoText:not(.sapTntInfoLabelWithIcon) {
+
 	&:not(.sapTntInfoLabelDisplayOnly) {
 		padding: @_sap_tnt_InfoLabel_PaddingWhenEmpty;
 	}
+
 	&.sapTntInfoLabelDisplayOnly {
 		padding: 0 @_sap_tnt_InfoLabel_LineHeightDisplayOnly/2;
 	}
 };
 
-/* ==========================================================================
-   InfoLabel in Form
-   ========================================================================== */
+/* ========================================================================== */
+/* InfoLabel in Form                                                          */
+/* ========================================================================== */
 
 .sapUiFormEdit .sapTntInfoLabel:not(.sapTntInfoLabelDisplayOnly) {
 	margin-top: 0.875rem;
@@ -142,11 +148,10 @@
 	margin-top: 0.5rem;
 }
 
-
-/* ==========================================================================
-   InfoLabel in Table
-   ========================================================================== */
+/* ========================================================================== */
+/* InfoLabel in Table                                                         */
+/* ========================================================================== */
 
 .sapMListTbl .sapTntInfoLabel.sapTntInfoLabelWithIcon .sapUiIcon:not(.sapMLIBImgNav):not(.sapMBtnIcon) {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }

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

@@ -123,7 +123,7 @@
 	height: @_sap_tnt_NavigationList_ItemHeight;
 	box-sizing: border-box;
 	cursor: pointer;
-	background-color: var(--sapUiListBackground);
+	background-color: var(--sapList_Background);
 	border-radius: @_sap_tnt_NavigationList_ItemBorderRadius;
 
 	/* borders are drawn using a pseudo element. */

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

@@ -7,22 +7,20 @@
 @_sap_tnt_SideNavigation_CollapsedWidth: 3rem;
 @_sap_tnt_SideNavigation_NavigationSeparatorMargin: 0.25rem 0.875rem 0.25rem 0.875rem;
 @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed: 0.25rem 0.5rem 0.25rem 0.5rem;
-@_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor: @sapUiGroupContentBorderColor;
+@_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor: var(--sapGroup_ContentBorderColor);
 @_sap_tnt_SideNavigation_NavigationSeparatorRadius: unset;
 @_sap_tnt_SideNavigation_NavigationSeparatorHeight: 1px;
-@_sap_tnt_SideNavigation_TriangleColor: @sapUiContentIconColor;
-@_sap_tnt_SideNavigation_BorderRight: 1px solid @sapUiGroupContentBorderColor;
-@_sap_tnt_SideNavigation_PhoneBorderRadius: 0;
+@_sap_tnt_SideNavigation_TriangleColor: var(--sapContent_IconColor);
+@_sap_tnt_SideNavigation_BorderRight: 1px solid var(--sapGroup_ContentBorderColor);
 @_sap_tnt_SideNavigation_BoxShadow: none;
 @_sap_tnt_SideNavigation_TriangleDisplay: block;
-@_sap_tnt_SideNavigation_PhoneWidth: @_sap_tnt_SideNavigation_Width;
 
 .sapTntSideNavigation {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
 	min-height: 0;
-	background: @sapUiListBackground;
+	background: var(--sapList_Background);
 	border-right: @_sap_tnt_SideNavigation_BorderRight;
 	min-width: @_sap_tnt_SideNavigation_Width;
 	box-shadow: @_sap_tnt_SideNavigation_BoxShadow;
@@ -41,18 +39,10 @@ html[data-sap-ui-animation='off'] .sapTntSideNavigation {
 	transition: none;
 }
 
-html.sap-phone,
-html.sap-tablet:not(html.sap-combi) {
-	.sapTntSideNavigation {
-		border-radius: @_sap_tnt_SideNavigation_PhoneBorderRadius;
-	}
+.sapTntToolPage-LayoutS .sapTntSideNavigation {
+	width: ~"100% !important";
 }
 
-html.sap-phone {
-	.sapTntSideNavigation {
-		width: @_sap_tnt_SideNavigation_PhoneWidth;
-	}
-}
 
 .sapTntSideNavigation.sapTntSideNavigationNotExpandedWidth {
 	min-width: @_sap_tnt_SideNavigation_CollapsedWidth;
@@ -67,7 +57,7 @@ html.sap-phone {
 
 	.sapTntNLINotExpandedTriangle:not(.sapTntNLIDisabled):after {
 		display: @_sap_tnt_SideNavigation_TriangleDisplay;
-		content: "";
+		content: '';
 		width: 0;
 		height: 0;
 		border-left: 0.375rem solid transparent;
@@ -107,11 +97,11 @@ html.sap-phone {
 	position: relative;
 }
 
-/*  Compact size
-   ========================================================================== */
-
+/* Compact size */
 .sapUiSizeCompact {
+
 	.sapTntSideNavigationNotExpanded {
+
 		.sapTntSideNavigationSeparator {
 			margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
 		}

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

@@ -5,7 +5,7 @@
 
 @_sap_tnt_ToolHeader_Height: 3rem;
 @_sap_tnt_ToolHeader_AvatarBackground: lighten(saturate(spin(@sapUiAccent6, 348), 36), 28);
-@_sap_tnt_ToolHeader_AvatarColor: @sapUiBaseText;
+@_sap_tnt_ToolHeader_AvatarColor: var(--sapTextColor);
 @_sap_tnt_ToolHeader_BorderColor: contrast(@sapUiShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapUiContentContrastTextThreshold);
 @_sap_tnt_ToolHeader_ArrowHeight: 0.1875rem;
 @_sap_tnt_ToolHeader_ArrowMargin: 0;
@@ -17,13 +17,13 @@
 	height: @_sap_tnt_ToolHeader_Height;
 }
 
-// ==========================================================================
-// sap.m.IconTabHeader overriding
-// ==========================================================================
+/* ========================================================================== */
+/* sap.m.IconTabHeader overriding                                             */
+/* ========================================================================== */
 
 .sapMIBar.sapTntToolHeader .sapMBarChild.sapMITH {
 	flex: 1;
-	min-width: 0; // fixes Chrome flex issue
+	min-width: 0; /* fixes Chrome flex issue */
 }
 
 .sapMIBar.sapTntToolHeader:not(.sapUshellShellToolHeader) .sapMBarChild.sapMITH {
@@ -37,7 +37,8 @@
 		padding-bottom: 0;
 
 		.sapMITBFilter .sapMITBText + .sapMITBContentArrow  {
-			&:after {
+
+			&::after {
 				border-radius: 0.125rem;
 				box-shadow: none;
 				margin-bottom: @_sap_tnt_ToolHeader_ArrowMarginBottom;
@@ -48,8 +49,9 @@
 }
 
 .sapMITBFilterPopover.sapMITBFilterPopoverInToolHeader {
+
 	.sapUiIcon {
-		color: @sapUiContentNonInteractiveIconColor;
+		color: var(--sapContent_NonInteractiveIconColor);
 	}
 }
 
@@ -57,24 +59,25 @@
 	margin: @_sap_tnt_ToolHeader_ArrowMargin;
 }
 
-// ==========================================================================
-// sap.m.MenuButton overriding
-// ==========================================================================
+/* ========================================================================== */
+/* sap.m.MenuButton overriding                                                */
+/* ========================================================================== */
 
 .sapTntToolHeader {
+
 	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnEmphasized.sapMBtnInner::after {
 		content: '\e287';
 	}
 }
 
-/* ------------------------------------------------ */
-/* Shell overrides                        */
-/* ------------------------------------------------ */
+/* ================================================ */
+/* Shell overrides                                  */
+/* ================================================ */
 
 .sapTntToolHeader.sapMTB.sapUshellShellToolHeader {
-	background-color: @sapUiShellNavigationBackground;
+	background-color: var(--sapShell_Navigation_Background);
 	height: 2.75rem;
-	box-shadow: @sapUiShellShadow;
+	box-shadow: var(--sapShell_Shadow);
 	border: none;
 	z-index: 1;
 	position: relative;

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

@@ -8,15 +8,13 @@
 /* ========================================================================== */
 
 @_sap_tnt_ToolPage_AnimationDuration : 0.3s;
-@_sap_tnt_ToolPage_Background: darken(@sapUiBaseBG, 4);
+@_sap_tnt_ToolPage_Background: var(--sapBackgroundColor);
 @_sap_tnt_ToolPage_ContentBackgroundStandard: none;
 @_sap_tnt_ToolPage_ContentBackgroundSolid: none;
 @_sap_tnt_ToolPage_ContentBackgroundTransparent: none;
 @_sap_tnt_ToolPage_ContentBackgroundList: none;
-@_sap_tnt_ToolPage_AsideCollapsedPhoneTransform: -100%;
-@_sap_tnt_ToolPage_AsideCollapsedPhoneTransformRtl: 100%;
-@_sap_tnt_ToolPage_AsidePhoneTop: 0;
-@_sap_tnt_ToolPage_AsidePhoneWidth: auto;
+@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransform: -100%;
+@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransformRtl: 100%;
 @_sap_tnt_ToolHeader_Shadow: none;
 
 /* ========================================================================== */
@@ -78,24 +76,25 @@ html:not([data-sap-ui-animation='off']) .sapTntToolPageAside {
   transition: transform @_sap_tnt_ToolPage_AnimationDuration;
 }
 
-html.sap-phone {
-
+.sapTntToolPage-LayoutS {
   .sapTntToolPageAside {
     z-index: 2;
     position: absolute;
     left: 0;
     bottom: 0;
-    top: @_sap_tnt_ToolPage_AsidePhoneTop;
-    width:  @_sap_tnt_ToolPage_AsidePhoneWidth;
+    top: 0;
+    width: 100%;
   }
 
   .sapTntToolPageAsideCollapsed {
     .sapTntToolPageAside {
-      transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedPhoneTransform);
+      transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransform);
     }
   }
 }
 
+
+
 /* ========================================================================== */
 /* Main container                                                             */
 /* ========================================================================== */
@@ -147,11 +146,9 @@ html.sap-phone {
 /* ========================================================================== */
 
 html[dir=rtl] {
-  &.sap-phone {
-    .sapTntToolPageAsideCollapsed {
-      .sapTntToolPageAside {
-        transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedPhoneTransformRtl);
-      }
+  .sapTntToolPage-LayoutS .sapTntToolPageAsideCollapsed {
+    .sapTntToolPageAside {
+      transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedLayoutSTransformRtl);
     }
   }
 }

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */