@sapui5/sap.suite.ui.commons 1.142.0 → 1.143.0

package/src/sap/suite/ui/commons/networkgraph/Node.js

@@ -34,7 +34,8 @@ sap.ui.define([
 	var HEADER_SIZE = 32,
 		TITLE_OFFSET = 5,
 		MIN_WIDTH = 160,
-		MAX_ACTION_BUTTONS = 4;
+		MAX_ACTION_BUTTONS = 4,
+		ACTION_BUTTONS_OFFSET = -34;
 
 	var Size = {
 		Circle: {
@@ -104,6 +105,9 @@ sap.ui.define([
 	/**
 	 * Constructor for a new Node.
 	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
 	 * @class
 	 * Holds information about one node. When changing the size of the node after the graph is rendered, you have to manually
 	 * invalidate the graph, which causes the layout algorithm to be applied again.
@@ -750,7 +754,8 @@ sap.ui.define([
 			// this may put nodes to the edge of the parent which makes calculation of div maxWidth impossible
 			top: !this._bMainRender && this.getY() ? (this.getY() + "px") : "",
 			left: !this._bMainRender && this.getX() ? (this.getX() + "px") : "",
-			"min-width": MIN_WIDTH + "px"
+			"min-width": MIN_WIDTH + "px",
+			"outline-offset": parseFloat(this._getStatusValue(ElementBase.ColorType.BorderWidth)) + .7 + "px"
 		}, oAttributes, mOptions.renderManager);
 
 		this.renderContent(mOptions);
@@ -801,7 +806,7 @@ sap.ui.define([
 				"border-color": ElementBase.ColorType.Background
 			}, false);
 
-			let {style: sBorderColor, class: sBorderClass} = this._getStatusStyle({
+			let { style: sBorderColor, class: sBorderClass } = this._getStatusStyle({
 				"border-color": ElementBase.ColorType.Border,
 				"background-color": this.getSelected() ? ElementBase.ColorType.SelectedBackground : "",
 				"border-width": ElementBase.ColorType.BorderWidth,
@@ -849,10 +854,10 @@ sap.ui.define([
 		} else {
 			var oWidth = this._getCorrectWidth();
 			let {style: sBStyle, class: sBClass} = this._getStatusStyle({
-				"border-color": ElementBase.ColorType.Border,
+				"outline-color": ElementBase.ColorType.Border,
 				"background-color": this.getSelected() ? ElementBase.ColorType.SelectedBackground : "",
-				"border-width": ElementBase.ColorType.BorderWidth,
-				"border-style": ElementBase.ColorType.BorderStyle
+				"outline-width": ElementBase.ColorType.BorderWidth,
+				"outline-style": ElementBase.ColorType.BorderStyle
 			});
 			var sMainStyle = this._convertToStyle({
 				width: oWidth.width,
@@ -2860,10 +2865,17 @@ sap.ui.define([
 		mOptions = mOptions || {};
 		var sRightId = this._getElementId(mOptions.idSufix) + "-rightdivbuttons",
 			sLeftId = this._getElementId(mOptions.idSufix) + "-leftdivbuttons",
+			bIsRtl = this.getParent()._bIsRtl,
+			fBorderWidth = parseFloat(this._getStatusValue(ElementBase.ColorType.BorderWidth)) || 0,
+			sOffsetPosition = (ACTION_BUTTONS_OFFSET - fBorderWidth) + "px",
 			oRm = mOptions.renderManager;
 
 		oRm.openStart("div").attr("id", sLeftId).class("sapSuiteUiCommonsNetworkGraphDivActionButtons").class("sapSuiteUiCommonsNetworkGraphDivActionButtonsLeft").openEnd().close("div");
-		oRm.openStart("div").attr("id", sRightId).class("sapSuiteUiCommonsNetworkGraphDivActionButtons").class("sapSuiteUiCommonsNetworkGraphDivActionButtonsRight").openEnd().close("div");
+		oRm.openStart("div").attr("id", sRightId).class("sapSuiteUiCommonsNetworkGraphDivActionButtons").class("sapSuiteUiCommonsNetworkGraphDivActionButtonsRight");
+		if (fBorderWidth) {
+			oRm.style(bIsRtl ? "left" : "right", sOffsetPosition);
+		}
+		oRm.openEnd().close("div");
 	};
 
 	/**

package/src/sap/suite/ui/commons/networkgraph/SvgBase.js

@@ -21,6 +21,9 @@ sap.ui.define([
 	/**
 	 * Constructor for a new ElementBase.
 	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
 	 * @class
 	 * SvgBase class
 	 *

package/src/sap/suite/ui/commons/networkgraph/Tooltip.js

@@ -49,6 +49,9 @@ sap.ui.define([
 	/**
 	 * Constructor for a new Tooltip.
 	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
 	 * @class
 	 * Holds information about a tooltip.
 	 *

package/src/sap/suite/ui/commons/networkgraph/layout/LayoutAlgorithm.js

@@ -285,7 +285,7 @@ sap.ui.define([
 		});
 	};
 
-	LayoutAlgorithm.prototype._shiftGraph = function (fX, fY, bSkipGroups) {
+	LayoutAlgorithm.prototype._shiftGraph = function (fX, fY, bSkipGroups, oCurrentGroup) {
 		var oGraph = this.getParent();
 		if (!bSkipGroups) {
 			oGraph.getGroups().forEach(function (oGroup) {
@@ -293,13 +293,25 @@ sap.ui.define([
 				oGroup.setY(oGroup.getY() + fY);
 			});
 		}
-		oGraph.getNodes().forEach(function (oNode) {
-			oNode.setX(oNode.getX() + fX);
-			oNode.setY(oNode.getY() + fY);
-			oNode.aLines.forEach(function (oLine) {
-				oLine._shift({x: fX, y: fY});
+		if (oCurrentGroup) {
+			oGraph.getNodes().forEach(function (oNode) {
+				if (oNode.getGroup() === oCurrentGroup.getKey()) {
+					oNode.setX(oNode.getX() + fX);
+					oNode.setY(oNode.getY() + fY);
+					oNode.aLines.forEach(function (oLine) {
+						oLine._shift({x: fX, y: fY});
+					});
+				}
 			});
-		});
+		} else {
+			oGraph.getNodes().forEach(function (oNode) {
+				oNode.setX(oNode.getX() + fX);
+				oNode.setY(oNode.getY() + fY);
+				oNode.aLines.forEach(function (oLine) {
+					oLine._shift({x: fX, y: fY});
+				});
+			});
+		}
 	};
 
 	LayoutAlgorithm.prototype._getGraphBoundingBox = function () {

package/src/sap/suite/ui/commons/networkgraph/layout/SwimLaneChainLayout.js

@@ -855,7 +855,7 @@ sap.ui.define([
 		if (this.bVertLane) {
 			this.oGraph.getGroups().forEach(function (oGroup) {
 				oGroup._iHeight += GROUP_HEADER_SIZE;
-				this._shiftGraph(0, 4, true);
+				this._shiftGraph(0, 4, true, oGroup);
 			}.bind(this));
 		} else {
 			this._shiftGraph(GROUP_HEADER_SIZE / 2, 0, true);

package/src/sap/suite/ui/commons/networkgraph/util/Dijkstra.js

@@ -10,6 +10,7 @@ sap.ui.define([], function() {
 
 	/**
 	 * Constructor for a new Dijkstra's algorithm. The constructor computes the shortest paths to all nodes in the network graph from given
+	 *
 	 * starting point node.
 	 * @param {sap.suite.ui.commons.networkgraph.Graph} oGraph Graph to compute the paths in.
 	 * @param {sap.suite.ui.commons.networkgraph.Node} oSourceNode Node that serves as the starting point for computing the paths.

package/src/sap/suite/ui/commons/statusindicator/Circle.js

@@ -30,7 +30,7 @@ sap.ui.define([
 		 * @extends sap.suite.ui.commons.statusindicator.SimpleShape
 		 *
 		 * @author SAP SE
-		 * @version 1.142.0
+		 * @version 1.143.0
 		 * @since 1.50
 		 *
 		 * @constructor

package/src/sap/suite/ui/commons/statusindicator/CustomShape.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * @extends sap.suite.ui.commons.statusindicator.Shape
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/DiscreteThreshold.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/FillingOption.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/LibraryShape.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.suite.ui.commons.statusindicator.CustomShape
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.60.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/Path.js

@@ -29,7 +29,7 @@ sap.ui.define([
 		 * @extends sap.suite.ui.commons.statusindicator.SimpleShape
 		 *
 		 * @author SAP SE
-		 * @version 1.142.0
+		 * @version 1.143.0
 		 * @since 1.50
 		 *
 		 * @constructor

package/src/sap/suite/ui/commons/statusindicator/PropertyThreshold.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/Rectangle.js

@@ -29,7 +29,7 @@ sap.ui.define(
 		 * @extends sap.suite.ui.commons.statusindicator.SimpleShape
 		 *
 		 * @author SAP SE
-		 * @version 1.142.0
+		 * @version 1.143.0
 		 * @since 1.50
 		 *
 		 * @constructor

package/src/sap/suite/ui/commons/statusindicator/Shape.js

@@ -42,7 +42,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/ShapeGroup.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/SimpleShape.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.suite.ui.commons.statusindicator.Shape
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/statusindicator/StatusIndicator.js

@@ -49,7 +49,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.50
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/taccount/TAccount.js

@@ -56,7 +56,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.58.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/taccount/TAccountGroup.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.58.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/taccount/TAccountItem.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.58.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/taccount/TAccountItemProperty.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.58.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/taccount/TAccountPanel.js

@@ -65,7 +65,7 @@ sap.ui.define([
 	 * @extends sap.m.Panel
 	 *
 	 * @author SAP SE
-	 * @version 1.142.0
+	 * @version 1.143.0
 	 * @since 1.58.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/themes/base/CalculationBuilderItem.less

@@ -231,9 +231,17 @@
 
 .sapCalculationBuilderItemExpandButtonFocus {
 	position: absolute;
-	height: 22px;
-	width: 22px;
-	left: 3px;
+	height: 1.375rem;
+	width: 1.375rem;
+	left: 0.188rem;
+	box-sizing: border-box;
+}
+
+.sapUiSizeCozy .sapCalculationBuilderItemExpandButtonFocus {
+	position: absolute;
+	height: 2.25rem;
+	width: 2rem;
+	left: 0.188rem;
 	box-sizing: border-box;
 }
 

package/src/sap/suite/ui/commons/themes/base/MicroProcessFlow.less

@@ -85,28 +85,31 @@
 
 .sapSuiteUiCommonsMicroProcessFlowItemInformation {
   	border-color: @sapInformationBorderColor;
-  	background-color: @sapButton_Information_Background;
+  	background-color: @sapInformationBackground;
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemNone {
-	border-color: @sapChart_Sequence_Neutral_BorderColor;
-    background-color: @sapChart_Sequence_Neutral_Plus3;
+	border-color: @sapNeutralBorderColor;
+    background-color: @sapNeutralBackground;
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemError .sapSuiteUiCommonsMicroProcessFlowItemIcon{
-	color: @sapButton_Negative_TextColor
+	color: @sapContent_ContrastTextColor;
+	text-shadow: @sapContent_ContrastTextShadow; 
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemInformation .sapSuiteUiCommonsMicroProcessFlowItemIcon {
-	color: @sapButton_Information_TextColor
+	color: @sapInformativeTextColor;
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemWarning .sapSuiteUiCommonsMicroProcessFlowItemIcon {
-	color: @sapButton_Critical_TextColor;
+	color: @sapContent_ContrastTextColor;
+	text-shadow: @sapContent_ContrastTextShadow;
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemSuccess .sapSuiteUiCommonsMicroProcessFlowItemIcon {
-	color: @sapButton_Success_TextColor;
+	color: @sapContent_ContrastTextColor;
+	text-shadow: @sapContent_ContrastTextShadow;
 }
 
 .sapSuiteUiCommonsMicroProcessFlowItemNone .sapSuiteUiCommonsMicroProcessFlowItemIcon {

package/src/sap/suite/ui/commons/themes/base/NetworkGroup.less

@@ -27,6 +27,11 @@
 	border-left-style: solid;
 }
 
+.sapSuiteUiCommonsNetworkGraphRightLeft.sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane:first-of-type {
+	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-left-style: dashed;
+}
+
 .sapSuiteUiCommonsNetworkGroup:not(.sapSuiteUiCommonsNetworkGroupSwimLane) {
 	-webkit-box-shadow: @sapUiContentShadow2;
 	-moz-box-shadow: @sapUiContentShadow2;
@@ -42,7 +47,16 @@
 }
 
 .sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane:last-of-type {
-	border-right: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiListBorderColor;
+	border-right: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+}
+
+.sapSuiteUiCommonsNetworkGraphRightLeft.sapSuiteUiCommonsNetworkGroup.sapSuiteUiCommonsNetworkGroupSwimLane:last-of-type {
+	border-left: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	border-right: none;
+}
+
+.sapSuiteUiCommonsNetworkGraphRightLeft .sapSuiteUiCommonsNetworkGroupHeader {
+    margin-right: 0.0625rem;
 }
 
 .sapSuiteUiCommonsNetworkGroupHeader {

package/src/sap/suite/ui/commons/themes/base/NetworkNode.less

@@ -332,7 +332,7 @@
 }
 
 .sapSuiteUiCommonsNetworkGraphDivInner {
-	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiNeutralElement;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiNeutralElement;
 	background-color: @sapUiListBackground;
 	font-size: @sapMFontSmallSize;
 	position: relative;
@@ -344,32 +344,32 @@
 }
 
 .sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkGraphDivInner {
-	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapSuccessBorderColor;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapSuccessBorderColor;
 	background-color: @sapSuccessBackground;
 	color: @sapContent_IconColor;
 }
 
 .sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkGraphDivInner {
-    border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapWarningBorderColor;
-    background-color: @sapWarningBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapWarningBorderColor;
+	background-color: @sapWarningBackground;
 	color: @sapContent_IconColor;
 }
 
 .sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkGraphDivInner {
-    border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapInformationBorderColor;
-    background-color: @sapInformationBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapInformationBorderColor;
+	background-color: @sapInformationBackground;
 	color: @sapContent_IconColor;
 }
 
 .sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkGraphDivInner {
-    border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapErrorBorderColor;
-    background-color: @sapErrorBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapErrorBorderColor;
+	background-color: @sapErrorBackground;
 	color: @sapContent_IconColor;
 }
 
 .sapSuiteUiCommonsNetworkElementNeutral .sapSuiteUiCommonsNetworkGraphDivInner {
-    border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
-    background-color: @sapNeutralBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	background-color: @sapNeutralBackground;
 	color: @sapContent_IconColor;
 }
 
@@ -390,10 +390,8 @@
 	margin: auto;
 	display: flex;
 	pointer-events: all;
-
 	height: 100%;
 	width: 100%;
-
 	box-sizing: border-box;
 }
 
@@ -528,7 +526,7 @@
 
 .sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkBox.sapSuiteUiCommonsNetworkElementFocus {
 	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-	padding: 1px;
+	outline-offset: calc(@sapUiContentFocusWidth + .05rem);
 	border-radius: 8px;
 }
 
@@ -544,7 +542,7 @@
 
 .sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkNodeCircle.sapSuiteUiCommonsNetworkElementFocus .sapSuiteUiCommonsNetworkGraphDivInnerWrapper {
 	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapContent_FocusColor;
-	padding: 1px;
+	outline-offset: calc(@sapUiContentFocusWidth + .05rem);
 	border-radius: 50%;
 }
 
@@ -575,14 +573,14 @@
 
 .sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkGraphDivInner {
 	color: @sapContent_IconColor;
-	border-width: @sapUiButtonSelectedTokenBorderWidth;
+	outline-width: @sapUiButtonSelectedTokenBorderWidth;
 	background-color: @sapUiListSelectionBackgroundColor;
 	border-radius: 8px;
 }
 
 .sapSuiteUiCommonsNetworkNodeCircle.sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkGraphDivInner {
 	color: @sapContent_IconColor;
-	border-width: @sapUiButtonSelectedTokenBorderWidth;
+	outline-width: @sapUiButtonSelectedTokenBorderWidth;
 	background-color: @sapUiListSelectionBackgroundColor;
 	border-radius: 50%;
 }
@@ -590,27 +588,27 @@
 .sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkElementHighlight.sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkGraphDivInner {
 	color: @sapTextColor;
 	background-color: @sapUiListHoverSelectionBackground;
-	border-width: @sapUiButtonSelectedTokenBorderWidth;
+	outline-width: @sapUiButtonSelectedTokenBorderWidth;
 	border-radius: 8px;
 }
 
 .sapSuiteUiCommonsNetworkNodeCircle.sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkElementHighlight.sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkGraphDivInner {
 	color: @sapTextColor;
 	background-color: @sapUiListHoverSelectionBackground;
-	border-width: @sapUiButtonSelectedTokenBorderWidth;
+	outline-width: @sapUiButtonSelectedTokenBorderWidth;
 	border-radius: 50%;
 }
 
 .sapSuiteUiCommonsNetworkGraphDivActionButtonBackground.sapSuiteUiCommonsNetworkElementFocus {
 	border-radius: 50%;
-    padding: 1px;
-    position: initial;
-    display: inline-flex;
-    border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	position: initial;
+	display: inline-flex;
+	outline-offset: .1rem;
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 }
 
 .sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkGraphDivInner {
-	border-width: @sapUiButtonSelectedTokenBorderWidth;
+	outline-width: @sapUiButtonSelectedTokenBorderWidth;
 	background-color: @sapUiListHoverBackground;
 }
 
@@ -625,13 +623,10 @@
 	position: absolute;
 	left: -10px;
 	top: -10px;
-
 	background-color: @sapUiListBackground;
 	border-radius: 50%;
 	color: @sapUiBaseText;
-
-	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiContentForegroundBorderColor;
-
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiContentForegroundBorderColor;
 	pointer-events: all;
 }
 
@@ -648,46 +643,47 @@
 }
 
 .sapSuiteUiCommonsNetworkElementHighlight .sapSuiteUiCommonsNetworkGraphDivHeader.sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-	border-width: @sapUiButtonSelectedTokenBorderWidth;
+	outline-width: @sapUiButtonSelectedTokenBorderWidth;
 }
 
 .sapSuiteUiCommonsNetworkGraphDivHeader .sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-    background-color: @sapNeutralBackground;
-    border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	background-color: @sapNeutralBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
 }
+
 .sapSuiteUiCommonsNetworkElementWarning .sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-    background-color: @sapWarningBackground;
-    border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapWarningBorderColor;
+	background-color: @sapWarningBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapWarningBorderColor;
 }
 
 .sapSuiteUiCommonsNetworkElementError .sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-    border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapErrorBorderColor;
-    background-color: @sapErrorBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapErrorBorderColor;
+	background-color: @sapErrorBackground;
 }
 
 .sapSuiteUiCommonsNetworkElementSuccess .sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-    border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapSuccessBorderColor;
-    background-color: @sapSuccessBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapSuccessBorderColor;
+	background-color: @sapSuccessBackground;
 }
 
 .sapSuiteUiCommonsNetworkElementInformation .sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-    border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapInformationBorderColor;
-    background-color: @sapInformationBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapInformationBorderColor;
+	background-color: @sapInformationBackground;
 }
 
 .sapSuiteUiCommonsNetworkElementNeutral .sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-    border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
-    background-color: @sapNeutralBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	background-color: @sapNeutralBackground;
 }
 
 .sapSuiteUiCommonsNetworkNodeCustomStatus .sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-    border-bottom: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
-    background-color: @sapNeutralBackground;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapNeutralBorderColor;
+	background-color: @sapNeutralBackground;
 }
 
 .sapSuiteUiCommonsNetworkElementSelected .sapSuiteUiCommonsNetworkGraphDivHeaderColor {
-    border-bottom-width: @sapUiButtonSelectedTokenBorderWidth;
-    background-color: @sapList_SelectionBackgroundColor;
+	outline-width: @sapUiButtonSelectedTokenBorderWidth;
+	background-color: @sapList_SelectionBackgroundColor;
 }
 
 .sapSuiteUiCommonsNetworkDivCircleWrapper {
@@ -778,12 +774,12 @@
 
 .sapSuiteUiCommonsNetworkGraphDivActionButtonsRight {
 	top: 0;
-	right: -32px;
+	right: -34px;
 }
 
 .sapSuiteUiCommonsNetworkGraphDivActionButtonsLeft {
 	top: 0;
-	left: -32px;
+	left: -34px;
 }
 
 .sapSuiteUiCommonsNetworkGraphDivActionButton {

package/src/sap/suite/ui/commons/themes/sap_fiori_3/MicroProcessFlow.less

@@ -0,0 +1,7 @@
+.sapSuiteUiCommonsMicroProcessFlowItemInformation:hover {
+	background-color: @sapButton_Hover_Background;
+	border-color: @sapInformationBorderColor;
+	.sapSuiteUiCommonsMicroProcessFlowItemIcon {
+		color: @sapButton_Hover_TextColor;
+	}
+}

package/src/sap/suite/ui/commons/themes/sap_fiori_3/library.source.less

@@ -14,3 +14,4 @@
 @import "ProcessFlowConnectionLabel.less";
 @import "ProcessFlowLaneHeader.less";
 @import "ProcessFlowNode.less";
+@import "MicroProcessFlow.less";