@openui5/sap.ui.rta 1.143.1 → 1.145.0

package/src/sap/ui/rta/plugin/iframe/AddIFrameDialogController.js

@@ -1,32 +1,34 @@
 /*!
  * 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([
+	"sap/base/util/Deferred",
 	"sap/base/Log",
 	"sap/m/Token",
 	"sap/ui/core/mvc/Controller",
 	"sap/ui/core/Element",
 	"sap/ui/core/Lib",
 	"sap/ui/core/library",
-	"sap/ui/rta/util/validateText",
 	"sap/ui/fl/util/IFrame",
 	"sap/ui/model/Filter",
 	"sap/ui/model/FilterOperator",
-	"sap/ui/rta/plugin/iframe/urlCleaner"
+	"sap/ui/rta/plugin/iframe/urlCleaner",
+	"sap/ui/rta/util/validateText"
 ], function(
+	Deferred,
 	Log,
 	Token,
 	Controller,
 	Element,
 	Lib,
 	coreLibrary,
-	validateText,
 	IFrame,
 	Filter,
 	FilterOperator,
-	urlCleaner
+	urlCleaner,
+	validateText
 ) {
 	"use strict";
 
@@ -72,13 +74,7 @@ sap.ui.define([
 		},
 
 		onBeforeOpen() {
-			if (this._buildPreviewURL()) {
-				// If a URL is set initially (updateIframe), validate it
-				this.onValidateUrl();
-			} else {
-				// Disable the save button but don't show an error message
-				this._checkIfAllFieldsValid(false);
-			}
+			this._oJSONModel.setProperty("/initialFrameUrl/value", this._oJSONModel.getProperty("/frameUrl/value"));
 			// Configure the MultiInput field
 			// This syntax is the suggested way by the UI5 documentation to trigger a submit on the input field on focus loss
 			const oMultiInput = Element.getElementById("sapUiRtaAddIFrameDialog_AddAdditionalParametersInput");
@@ -86,6 +82,7 @@ sap.ui.define([
 		},
 
 		onSwitchChange() {
+			this._checkIfAllFieldsValid(true);
 			this._oJSONModel.setProperty("/settingsUpdate/value", true);
 		},
 
@@ -110,6 +107,7 @@ sap.ui.define([
 
 			this._oJSONModel.setProperty("/advancedSettings/value/additionalSandboxParameters", aSandboxParameters);
 			this._oJSONModel.setProperty("/settingsUpdate/value", true);
+			this._checkIfAllFieldsValid(true);
 		},
 
 		/**
@@ -134,8 +132,8 @@ sap.ui.define([
 		/**
 		 * Event handler for save button
 		 */
-		onSavePress() {
-			const sUrl = this._buildPreviewURL();
+		async onSavePress() {
+			const sUrl = await this._buildPreviewURL();
 			if (isValidUrl(sUrl).result && this._areAllTextFieldsValid() && this._areAllValueStateNones()) {
 				this._close(this._buildReturnedSettings());
 			} else {
@@ -146,9 +144,9 @@ sap.ui.define([
 		/**
 		 * Event handler for Show Preview button
 		 */
-		onPreviewPress() {
+		async onPreviewPress() {
 			const sReturnedURL = this._buildReturnedURL();
-			const sURL = this._buildPreviewURL();
+			const sURL = await this._buildPreviewURL();
 
 			if (!isValidUrl(sURL).result) {
 				return;
@@ -210,6 +208,7 @@ sap.ui.define([
 			// Extract "/frameWidth" or "/frameHeight" from the binding path (e.g. /frameWidth/value)
 			const sPropertyName = sPropertyPath.replace(/\/value$/, "");
 			setNewPreviewSize.call(this, sPropertyName);
+			this._checkIfAllFieldsValid(true);
 		},
 
 		/**
@@ -224,6 +223,7 @@ sap.ui.define([
 			// Extract "/frameWidth" or "/frameHeight" from the binding path (e.g. /frameWidthUnit/value)
 			const sPropertyName = sPropertyPath.replace(/Unit\/value$/, "");
 			setNewPreviewSize.call(this, sPropertyName);
+			this._checkIfAllFieldsValid(true);
 		},
 
 		/**
@@ -232,16 +232,34 @@ sap.ui.define([
 		 * @private
 		 */
 		_buildPreviewURL() {
+			const oValidationPromise = new Deferred();
 			const sUrl = this._buildReturnedURL();
 			const oResolver = Element.getElementById("sapUiRtaAddIFrameDialog_PreviewLinkResolver");
 			try {
+				// Whenever a URL contains a binding string, all old bindings are cleaned up
+				// and a new binding is created for the text property
+				// However this doesn't happen if there was a binding previously and the new url
+				// value is a plain string, which can then lead to problems with two-way bindings
+				// where the new plain value would leak back into the model
+				// In this case the old binding has to be cleaned up explicitly
+				oResolver.unbindProperty("text");
+
 				oResolver.applySettings({
 					text: sUrl
 				});
+				const oBinding = oResolver.getBinding("text");
+				if (oBinding?.isA("sap.ui.model.odata.v4.ODataPropertyBinding")) {
+					// V4 bindings are asynchronous, so we need to wait for the change event
+					oBinding.attachEventOnce("change", () => {
+						oValidationPromise.resolve(oResolver.getText());
+					});
+				} else {
+					oValidationPromise.resolve(oResolver.getText());
+				}
 			} catch (err) {
 				return undefined;
 			}
-			return oResolver.getText();
+			return oValidationPromise.promise;
 		},
 
 		/**
@@ -281,6 +299,12 @@ sap.ui.define([
 			return urlCleaner(this._oJSONModel.getProperty("/frameUrl/value"));
 		},
 
+		/**
+		 * Triggers the validation of all fields and updates the "areAllFieldsValid" property in the model
+		 * This property is also used to enable/disable the Save button, hence the check must be called after every update on the dialog
+		 *
+		 * @param {boolean} bExternalValidationSuccess - Whether external validation was successful
+		 */
 		_checkIfAllFieldsValid(bExternalValidationSuccess) {
 			const bAllFieldsValid = (
 				bExternalValidationSuccess
@@ -291,8 +315,8 @@ sap.ui.define([
 			this._oJSONModel.setProperty("/areAllFieldsValid", bAllFieldsValid);
 		},
 
-		onValidateUrl() {
-			const sUrl = this._buildPreviewURL();
+		async onValidateUrl() {
+			const sUrl = await this._buildPreviewURL();
 			const { result: bResult, error: sError } = isValidUrl(sUrl);
 			if (bResult) {
 				this._oJSONModel.setProperty("/frameUrlError/value", "");

package/src/sap/ui/rta/plugin/iframe/urlCleaner.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/ui/rta/plugin/rename/Rename.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.
  */
 
@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.rta.plugin.Plugin
 	 *
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.145.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/plugin/rename/RenameDialog.js

@@ -1,7 +1,7 @@
 
 /*!
  * 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([
@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @class Constructor for a new sap.ui.rta.plugin.rename.RenameDialog.
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.143.1
+	 * @version 1.145.0
 	 * @constructor
 	 * @since 1.136
 	 * @private

package/src/sap/ui/rta/service/Action.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([
 	 * @name sap.ui.rta.service.Action
 	 * @author SAP SE
 	 * @since 1.58
-	 * @version 1.143.1
+	 * @version 1.145.0
 	 * @private
 	 * @ui5-restricted
 	 *

package/src/sap/ui/rta/service/ControllerExtension.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.
  */
 
@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.ControllerExtension
 	 * @author SAP SE
 	 * @since 1.58
-	 * @version 1.143.1
+	 * @version 1.145.0
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/Outline.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.
  */
 
@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.Outline
 	 * @author SAP SE
 	 * @since 1.56
-	 * @version 1.143.1
+	 * @version 1.145.0
 	 * @private
 	 * @ui5-restricted
 	 */
@@ -184,12 +184,12 @@ sap.ui.define([
 			};
 		};
 
-		oOutline._enrichExtensionPointData = function(oData, oOverlay) {
+		oOutline._enrichExtensionPointData = function(oData, oOverlay, bIsPartOfTemplate) {
 			var bIsDesignMode = DesignTime.isDesignModeEnabled();
 			if (!bIsDesignMode) {
 				return undefined;
 			}
-			if (oData.type === "aggregation") {
+			if (oData.type === "aggregation" && !bIsPartOfTemplate) {
 				var aExtensionPoints = this._getExtensionPoints(oData)
 				.sort(function(mExtensionPointA, mExtensionPointB) {
 					return mExtensionPointB.index - mExtensionPointA.index;
@@ -259,9 +259,10 @@ sap.ui.define([
 		 * @param {int} [iDepth] - Level of children to traverse
 		 * @param {sap.ui.dt.Overlay} [oParentOverlay] - Parent overlay (if present) for the passed overlay
 		 * @param {object} [mTemplateData] - Propagates template data to the aggregation template clones
+		 * @param {boolean} [bNestedInTemplate] - Whether the overlay is nested inside a template
 		 * @returns {OutlineObject} Outline model data
 		 */
-		oOutline._getChildrenNodes = function(oOverlay, iDepth, oParentOverlay, mTemplateData) {
+		oOutline._getChildrenNodes = function(oOverlay, iDepth, oParentOverlay, mTemplateData, bNestedInTemplate) {
 			var bValidDepth = DtUtil.isInteger(iDepth);
 			var mAggregationTemplates = {};
 
@@ -295,11 +296,18 @@ sap.ui.define([
 				// decrement depth for children nodes
 				iDepth = bValidDepth ? iDepth - 1 : iDepth;
 
+				const bIsPartOfTemplate = bNestedInTemplate || oData.type === "aggregationBindingTemplate";
 				var mInnerTemplateData = {};
 				oData.elements = aChildren
 				.map(function(oChildOverlay) {
 					var mNextTemplateData = getTemplateData(oChildOverlay, mTemplateData, mInnerTemplateData);
-					var oNextData = this._getChildrenNodes(oChildOverlay, iDepth, oChildOverlay.getParent(), mNextTemplateData);
+					const oNextData = this._getChildrenNodes(
+						oChildOverlay,
+						iDepth,
+						oChildOverlay.getParent(),
+						mNextTemplateData,
+						bIsPartOfTemplate
+					);
 					if (oNextData.type === "aggregationBindingTemplate") {
 						var sAggregationName = mAggregationTemplates[oChildOverlay.getId()];
 						mInnerTemplateData[sAggregationName] = merge({}, oNextData);
@@ -311,7 +319,7 @@ sap.ui.define([
 				});
 
 				// get extension point information if available
-				this._enrichExtensionPointData(oData, oOverlay);
+				this._enrichExtensionPointData(oData, oOverlay, bIsPartOfTemplate);
 			}
 
 			return cleanupData(oData);

package/src/sap/ui/rta/service/Property.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.
  */
 
@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.Property
 	 * @author SAP SE
 	 * @since 1.58
-	 * @version 1.143.1
+	 * @version 1.145.0
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/Receiver.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/ui/rta/service/Selection.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.
  */
 
@@ -14,7 +14,7 @@ sap.ui.define(function() {
 	 * @name sap.ui.rta.service.Selection
 	 * @author SAP SE
 	 * @since 1.58
-	 * @version 1.143.1
+	 * @version 1.145.0
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/SupportTools.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.
  */
 
@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @name sap.ui.rta.service.SupportTools
 	 * @author SAP SE
 	 * @since 1.106
-	 * @version 1.143.1
+	 * @version 1.145.0
 	 * @private
 	 * @ui5-restricted
 	 */

package/src/sap/ui/rta/service/index.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/ui/rta/themes/base/AddIFrame.less

@@ -1,103 +1,80 @@
-/******************************************************************
-	Style of the RTA Add IFrame Dialog  - base Theme
-*******************************************************************/
-@_sap_ui_rta_AddIFrame_BorderColor: @sapUiGroupContentBorderColor; //#000;
-@_sap_ui_rta_AddIFrame_PreviewBackgroundColor: @sapUiContentImagePlaceholderBackground; //#fff
-@_sap_ui_rta_AddIFrame_PreviewTextColor: @sapUiContentForegroundTextColor; //#000
+/* ===================================== */
+/* CSS for control sap.ui.rta/AddIFrame  */
+/* Base theme                            */
+/* ===================================== */
+
+@_sap_ui_rta_AddIFrame_BorderColor: var(--sapGroup_ContentBorderColor); /* #000 */
+@_sap_ui_rta_AddIFrame_PreviewBackgroundColor: var(--sapContent_ImagePlaceholderBackground); /* #fff */
+@_sap_ui_rta_AddIFrame_PreviewTextColor: var(--sapContent_ForegroundTextColor); /* #000 */
 
 .sapUiRtaMode {
+
 	.sapUiRtaAddIFrameDialog {
+
 		.sapMBarPH.sapMBarContainer {
 			justify-content: center
 		}
 
-		&.sapMDialog > header .sapMDialogTitleGroup {
-			&:focus::after {
-				content: none;
-			}
-		}
-
 		.sapUiRtaAddIFrameDialogVlWrapper {
+
 			.sapUiRtaAddIFrameDialogContainer {
-				padding: 0 1rem 0 1rem;
+				padding: 0 var(--sapContent_Space_Small);
 			}
 
 			.sapUiRtaAddIFrameDialogShowParametersButton {
-				margin-top: 1.3rem;
+				position: relative;
+				top: 1.375rem;
 			}
 
 			.sapUiRtaAddIFrameDialogHideParametersButton {
-				margin-top: -@sapUiMarginTiny;
+				margin-top: ~"calc(-1 * var(--sapContent_Space_Small))";
 			}
 
 			.sapUiRtaAddIFrameParametersHeader {
-				margin-bottom: -@sapUiMarginTiny;
-			}
-
-			.sapUiRtaAddIFrameDialogSizeVBox {
-				margin-top: -@sapUiMarginSmall;
-			}
-
-			.sapUiRtaAddIFrameDialogSizeGrid {
-				.sapUiFormResGridMain {
-					padding: 0;
+				margin-bottom: ~"calc(-1 * var(--sapContent_Space_Tiny))";
+				.sapUiRtaAddIFrameDialogParametersLabel {
+					// avoid label beeing too long
+					max-width: 20.5rem;
 				}
 			}
 
-			.sapUiRtaAddIFrameDialogPercentGrid {
-				padding: 0.25rem 0 0 0;
-				margin: 0 1rem;
-				border-bottom: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
-
-				> div {
-					margin-bottom: 0.25rem;
-				}
-
-				.sapUiRtaAddIFrameDialogPercentText {
-					float: right;
-
-					&.sapUiRtaAddIFrameDialogPercentText-invisible {
-						visibility: hidden;
-					}
-				}
+			.sapUiRtaAddIFrameDialogSizeVBox {
+				margin-top: ~"calc(-1 * var(--sapContent_Space_Small))";
 			}
 
 			.sapUiRtaAddIFrameDialogEditGrid {
-				margin-top: 1rem;
+				margin-top: var(--sapContent_Space_Small);
 
 				.sapUiRtaAddIFrameDialogParameters {
+
 					.sapMScrollCont {
-						border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
+						border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; /* 1px */
 					}
 				}
 
 				.sapUiRtaAddIFrameDialogEditUrl {
+
 					.sapMTextArea {
 						margin-bottom: 0;
-
-						.sapMTextAreaInner {
-							border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
-						}
 					}
 				}
 			}
 
-			.sapUiRtaAddIFrameDialogUrlWarningGrid {
-				padding-left: 1.625rem;
+			.sapUiRtaAddIFrameDialogUrlWarningVBox {
+				width: 96%;
 			}
 
 			.sapUiRtaAddIFrameDialogAdvancedSettingsGrid {
+
 				.sapUiRtaAddIFrameDialogAdvancedSettingsPanel {
 					margin: 0 !important;
 
-					.sapMPanelContent {
-						padding: 0.5rem 1rem 0.5rem 1rem;
+					.sapMPanelWrappingDivTb {
+						border-radius: 0;
 					}
-
 					.sapUiRtaAddIFrameDialogAdvancedSettingsToolbar {
 						height: 2rem !important;
 						padding-right: 0;
-						margin-left: 2.75rem;
 
 						.sapUiRtaAddIFrameDialogAdvancedSettingsTitle {
 							font-size: 0.875rem;
@@ -108,34 +85,27 @@
 
 			.sapUiRtaAddIFrameDialogPreviewGrid {
 				padding: 0;
-				margin: 0 1rem 1rem;
+				margin: 0 var(--sapContent_Space_Small) var(--sapContent_Space_Small);
 				background: @_sap_ui_rta_AddIFrame_PreviewBackgroundColor;
-				border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
+				border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; /* 1px */
 				overflow: auto;
 				height: 230px;
-
-				> div {
-					margin-bottom: 0;
-					height: 9.75rem;
-				}
 			}
 		}
 	}
 }
 
 .sapUiRtaMode.sapUiSizeCozy {
+
 	.sapUiRtaAddIFrameDialog {
-		.sapUiRtaAddIFrameDialogVlWrapper {
-			.sapUiRtaAddIFrameDialogAdvancedSettingsGrid {
-				.sapUiRtaAddIFrameDialogAdvancedSettingsPanel {
-					.sapUiRtaAddIFrameDialogAdvancedSettingsToolbar {
-						height: 2.625rem !important;
 
-						.sapUiRtaAddIFrameDialogAdvancedSettingsTitle {
-							margin-left: 0.25rem;
-						}
-					}
-				}
+		.sapUiRtaAddIFrameDialogVlWrapper {
+			.sapUiRtaAddIFrameDialogHideParametersButton {
+				position: relative;
+				top: -0.3125rem;
+			}
+			.sapUiRtaAddIFrameParametersHeader {
+				margin-bottom: var(--sapContent_Space_Small);
 			}
 		}
 	}

package/src/sap/ui/rta/themes/base/ChangeVisualization.less

@@ -1,33 +1,33 @@
-/******************************************************************
-	Style of the RTA Change Visualization - base theme
-*******************************************************************/
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium: @sapUiChartPaletteSequentialHue1Dark1; //#1b57a7
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark: @sapUiChartPaletteSequentialHue11Dark2; //#0e4186
-@_sap_ui_rta_ChangeVisualization_OverlayBoxShadow: @sapUiUx3ToolPopupShadow; //0px 6px 12px 0px fade(black, 30);
-@_sap_ui_rta_ChangeVisualization_OverlayOutlineColor: @sapUiSelected; //#8fb5ff
+/* =============================================== */
+/* CSS for control sap.ui.rta/ChangeVisualization  */
+/* Base theme                                      */
+/* =============================================== */
+
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium: @sapUiChartPaletteSequentialHue1Dark1; /* #1b57a7 */
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark: @sapUiChartPaletteSequentialHue11Dark2; /* #0e4186 */
+@_sap_ui_rta_ChangeVisualization_OverlayOutlineColor: var(--sapSelectedColor); /* #8fb5ff */
 
 .sapUiRtaChangeIndicator {
 	height: 0.8rem;
 	width: 0.8rem;
 	position: relative;
 	border-radius: 50%;
-	margin-top: 0.25rem;
-	margin-left: 0.25rem;
 	transition: width 0.3s, height 0.3s, box-shadow 0.3s;
 	cursor: pointer;
 	background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium;
 	opacity: 0.75;
+	top: 0.25rem;
+	left: 0.25rem;
 
 	&.sapUiRtaChangeIndicatorVerticallyCentered {
 		top: 50%;
 		transform: translateY(-50%);
-		margin-top: 0;
 	}
 
 	&.sapUiRtaHover {
 		height: 0.9rem;
 		width: 0.9rem;
-		box-shadow: 0 0 0.25rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
+		box-shadow: var(--sapContent_Shadow2);
 	}
 }
 
@@ -36,24 +36,24 @@
 	&.sapUiRtaChangeIndicatorHovered {
 		cursor: pointer !important;
 
-		&:after {
-			content: " ";
+		&::after {
+			content: '';
 			transition: box-shadow .25s;
-			box-shadow: @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
-			outline: 0.0625rem solid @_sap_ui_rta_ChangeVisualization_OverlayOutlineColor; //1px
-			outline-offset: -0.0625rem; //1px
+			box-shadow: var(--sapContent_Shadow2);
+			outline: 0.0625rem solid @_sap_ui_rta_ChangeVisualization_OverlayOutlineColor !important; /* 1px */
+			outline-offset: -0.0625rem; /* 1px */
 		}
 	}
 
 	&.sapUiRtaChangeIndicatorDependent {
 		position: absolute;
-		box-shadow: inset 0 0 0 0.1875rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
+		box-shadow: inset 0 0 0 0.1875rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, var(--sapContent_Shadow2);
 		background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 25%);
 		animation: fadeOut linear 1.5s;
 		animation-fill-mode: forwards;
 		@keyframes fadeOut {
 			66% {
-				box-shadow: inset 0 0 0 0.1875rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
+				box-shadow: inset 0 0 0 0.1875rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, var(--sapContent_Shadow2);
 				background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 25%);
 			}
 			100% {
@@ -65,9 +65,11 @@
 }
 
 .sapUiRtaMode {
+
 	.sapMPopover {
+
 		.sapUiRtaChangesList {
-			// Visualize Changes: gray out items with no changes
+			/* Visualize Changes: gray out items with no changes */
 			li.sapMLIBTypeInactive {
 				opacity: 0.5;
 			}
@@ -75,8 +77,9 @@
 	}
 }
 
-//do not show focus border in the popover
+/* do not show focus border in the popover */
 .sapUiRtaChangeVisualizationPopover {
+
 	.sapMLIBFocusable:focus {
 		outline: none;
 	}