@sapui5/sap.suite.ui.commons 1.136.11 → 1.136.13

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

@@ -264,6 +264,25 @@
 	display: block;
 }
 
+.sapSuiteUiCommonsNetworkNodeActionButtonsVisible.sapSuiteUiCommonsNetworkGraphDivActionButtonsTop {
+	display: flex;
+	flex-direction: row;
+	gap: 4px;
+	width: auto;
+}
+
+.sapSuiteUiCommonsNetworkGraphDivActionButtonsTop {
+	top: -2.25rem;
+	right: 0;
+	width: auto;
+	display: none;
+}
+
+/* Remove vertical spacing for buttons in the top container */
+.sapSuiteUiCommonsNetworkGraphDivActionButtonsTop .sapSuiteUiCommonsNetworkGraphDivActionButtonBackground {
+	margin-bottom: 0;
+}
+
 .sapSuiteUiCommonsNetworkNodeActionButton {
 	font-size: @sapMFontLargeSize;
 	cursor: pointer;
@@ -332,7 +351,7 @@
 }
 
 .sapSuiteUiCommonsNetworkGraphDivInner {
-	border: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiNeutralElement;
+	outline: @sapUiElementBorderWidth @sapUiContentFocusStyle @sapUiNeutralElement;
 	background-color: @sapUiListBackground;
 	font-size: @sapMFontSmallSize;
 	position: relative;
@@ -344,32 +363,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 +409,8 @@
 	margin: auto;
 	display: flex;
 	pointer-events: all;
-
 	height: 100%;
 	width: 100%;
-
 	box-sizing: border-box;
 }
 
@@ -528,7 +545,7 @@
 
 .sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkBox.sapSuiteUiCommonsNetworkElementFocus {
 	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-	padding: 1px;
+	outline-offset: calc(@sapUiContentFocusWidth + .05rem);
 	border-radius: 8px;
 }
 
@@ -544,7 +561,7 @@
 
 .sapSuiteUiCommonsNetworkGraphDivNode.sapSuiteUiCommonsNetworkNodeCircle.sapSuiteUiCommonsNetworkElementFocus .sapSuiteUiCommonsNetworkGraphDivInnerWrapper {
 	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapContent_FocusColor;
-	padding: 1px;
+	outline-offset: calc(@sapUiContentFocusWidth + .05rem);
 	border-radius: 50%;
 }
 
@@ -575,14 +592,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 +607,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 +642,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 +662,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 +793,12 @@
 
 .sapSuiteUiCommonsNetworkGraphDivActionButtonsRight {
 	top: 0;
-	right: -32px;
+	right: -34px;
 }
 
 .sapSuiteUiCommonsNetworkGraphDivActionButtonsLeft {
 	top: 0;
-	left: -32px;
+	left: -34px;
 }
 
 .sapSuiteUiCommonsNetworkGraphDivActionButton {
@@ -880,8 +895,197 @@
 // auto-create border-color class with all different semantic colors
 .sapSuiteBorderSemanticColor(borderSemanticColor);
 
+// auto-create outline-color class with all different semantic colors
+.sapSuiteOutlineSemanticColor(outlineSemanticColor);
+
 // auto-create border-color class with all different semantic colors
 .sapSuiteStrokeSemanticColor(strokeSemanticColor);
 
 // auto-create border-color class with all different semantic colors
-.sapSuiteFillSemanticColor(fillSemanticColor);
+.sapSuiteFillSemanticColor(fillSemanticColor);
+
+/* ============================================= */
+/* Port Styles */
+/* ============================================= */
+.sapSuiteUiCommonsNetworkNodePort {
+    position: absolute;
+    width: 1.5rem; /* 24px including border */
+    height: 1.5rem; /* 24px including border */
+    background-color: transparent;
+    border: 0.125rem dashed @sapContent_DragAndDropActiveColor; /* 2px dashed */
+    border-radius: 50%;
+    cursor: default;
+    pointer-events: auto;
+    z-index: 10;
+    opacity: 1;
+    transition: all 0.2s ease;
+    box-sizing: border-box; /* Include border in width/height */
+}
+
+/* Position-specific styles for trigger ports */
+.sapSuiteUiLeftTriggerPort {
+    top: 50%;
+    left: -2rem;
+    transform: translateY(-50%);
+}
+
+.sapSuiteUiRightTriggerPort {
+    top: 50%;
+    right: -2rem;
+    transform: translateY(-50%);
+}
+
+.sapSuiteUiTopTriggerPort {
+    left: 50%;
+    top: -1rem;
+    transform: translateX(-50%);
+}
+
+.sapSuiteUiBottomTriggerPort {
+    left: 50%;
+    bottom: -1rem;
+    transform: translateX(-50%);
+}
+
+/* Position-specific styles for inlet ports */
+.sapSuiteUiLeftInletPort {
+    top: 50%;
+    left: -2rem;
+    transform: translateY(-50%);
+}
+
+.sapSuiteUiRightInletPort {
+    top: 50%;
+    right: -2rem;
+    transform: translateY(-50%);
+}
+
+.sapSuiteUiTopInletPort {
+    left: 50%;
+    top: -1rem;
+    transform: translateX(-50%);
+}
+
+.sapSuiteUiBottomInletPort {
+    left: 50%;
+    bottom: -1rem;
+    transform: translateX(-50%);
+}
+
+/* Position-specific styles for circle nodes (closer positioning) */
+.sapSuiteUiCommonsNetworkNodeCircle .sapSuiteUiLeftTriggerPort,
+.sapSuiteUiCommonsNetworkNodeCircle .sapSuiteUiLeftInletPort {
+    left: 1.25rem;
+}
+
+.sapSuiteUiCommonsNetworkNodeCircle .sapSuiteUiRightTriggerPort,
+.sapSuiteUiCommonsNetworkNodeCircle .sapSuiteUiRightInletPort {
+    right: 1.25rem;
+}
+
+.sapSuiteUiCommonsNetworkNodeCircle .sapSuiteUiTopTriggerPort,
+.sapSuiteUiCommonsNetworkNodeCircle .sapSuiteUiTopInletPort {
+    top: 1.25rem;
+}
+
+.sapSuiteUiCommonsNetworkNodeCircle .sapSuiteUiBottomTriggerPort,
+.sapSuiteUiCommonsNetworkNodeCircle .sapSuiteUiBottomInletPort {
+    bottom: 1.25rem;
+}
+
+.sapSuiteUiCommonsNetworkNodeTriggerPort {
+    background: @sapButton_Background;
+    border: 0.125rem dashed @sapContent_DragAndDropActiveColor; /* 2px dashed */
+    cursor: pointer;
+}
+/* Active/dragging state for trigger ports */
+.sapSuiteUiCommonsNetworkNodeTriggerPort.sapSuiteUiCommonsNetworkNodePortActive,
+.sapSuiteUiCommonsNetworkNodeTriggerPort:active,
+.sapSuiteUiCommonsNetworkNodeTriggerPort.sapSuiteUiCommonsNetworkNodePortDragging {
+    background-color: @sapButton_Emphasized_Background;
+    border: 0.125rem solid @sapContent_DragAndDropActiveColor; /* 2px solid when active */
+}
+.sapSuiteUiCommonsNetworkNodeTriggerPort:hover,
+.sapSuiteUiLeftTriggerPort:hover,
+.sapSuiteUiRightTriggerPort:hover,
+.sapSuiteUiTopTriggerPort:hover,
+.sapSuiteUiBottomTriggerPort:hover {
+    background-color: @sapContent_DragAndDropActiveColor;
+    border-color: @sapContent_DragAndDropActiveColor;
+}
+
+.sapSuiteUiCommonsNetworkNodePortFocused {
+    outline: 2px solid @sapUiContentFocusColor;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 1px @sapUiContentFocusColor;
+}
+
+.sapSuiteUiCommonsNetworkNodeTriggerPort.sapSuiteUiCommonsNetworkNodePortFocused {
+    background-color: @sapButton_Emphasized_Background;
+    border: 0.125rem solid @sapContent_DragAndDropActiveColor;
+}
+
+.sapSuiteUiCommonsNetworkNodeInletPort {
+    background: @sapButton_Background;
+    border: 0.125rem dashed @sapContent_DragAndDropActiveColor;
+}
+
+.sapSuiteUiCommonsNetworkNodeInletPort:hover,
+.sapSuiteUiLeftInletPort:hover,
+.sapSuiteUiRightInletPort:hover,
+.sapSuiteUiTopInletPort:hover,
+.sapSuiteUiBottomInletPort:hover {
+    opacity: 1;
+    background-color: @sapContent_DragAndDropActiveColor;
+    border: 0.125rem solid @sapContent_DragAndDropActiveColor; /* 2px solid on hover */
+}
+
+/* Active drop zone styling for inlet ports */
+.sapSuiteUiCommonsNetworkNodeInletPort.sapSuiteUiCommonsNetworkNodePortDropZone,
+.sapSuiteUiCommonsNetworkNodeInletPort.sapSuiteUiCommonsNetworkNodePortActive {
+    opacity: 1;
+    background-color: @sapButton_Emphasized_Background;
+    border: 0.125rem solid @sapContent_DragAndDropActiveColor; /* 2px solid when active drop zone */
+}
+
+.sapSuiteUiCommonsNetworkNodeGhostPort {
+    width: 1rem; /* 24px to match other ports */
+    height: 1rem; /* 24px to match other ports */
+    background-color: @sapContent_DragAndDropActiveColor;
+    border: 0.125rem dashed @sapContent_DragAndDropActiveColor; /* 2px dashed to match */
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 999;
+    opacity: 0.7;
+    box-sizing: border-box; /* Include border in width/height */
+}
+
+.sapSuiteUiCommonsNetworkNodeGhostLine {
+    position: absolute;
+    border-top: 0.0625rem dashed @sapUiContentForegroundBorderColor;
+    pointer-events: none;
+    z-index: 998;
+}
+
+.sapSuiteUiCommonsNetworkNodeGhostArrow {
+    width: 13px;
+    height: 19px;
+    pointer-events: none;
+    z-index: 999;
+    opacity: 0.8;
+    box-sizing: border-box;
+    
+    /* Create arrow shape using borders */
+    &:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 0;
+        height: 0;
+        border-left: 7px solid @sapContent_DragAndDropActiveColor;
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+    }
+}

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

@@ -308,6 +308,61 @@
     }
 }
 
+// Mixin to apply outline-color based on semantic color
+.sapSuiteOutlineSemanticColor(@classPrefix) {
+    &.@{classPrefix}None {
+      outline-color: @sapSuiteSemanticColorNoneBorder !important;
+    }
+    &.@{classPrefix}Neutral {
+      outline-color: @sapSuiteSemanticColorNeutralBorder !important;
+    }
+    &.@{classPrefix}Good {
+      outline-color: @sapSuiteSemanticColorGoodBorder !important;
+    }
+    &.@{classPrefix}Critical {
+      outline-color: @sapSuiteSemanticColorCriticalBorder !important;
+    }
+    &.@{classPrefix}Error {
+      outline-color: @sapSuiteSemanticColorErrorBorder !important;
+    }
+    &.@{classPrefix}Sequence1 {
+      outline-color: @sapSuiteSemanticColorSequence1Border !important;
+    }
+    &.@{classPrefix}Sequence2 {
+      outline-color: @sapSuiteSemanticColorSequence2Border !important;
+    }
+    &.@{classPrefix}Sequence3 {
+      outline-color: @sapSuiteSemanticColorSequence3Border !important;
+    }
+    &.@{classPrefix}Sequence4 {
+      outline-color: @sapSuiteSemanticColorSequence4Border !important;
+    }
+    &.@{classPrefix}Sequence5 {
+      outline-color: @sapSuiteSemanticColorSequence5Border !important;
+    }
+    &.@{classPrefix}Sequence6 {
+      outline-color: @sapSuiteSemanticColorSequence6Border !important;
+    }
+    &.@{classPrefix}Sequence7 {
+      outline-color: @sapSuiteSemanticColorSequence7Border !important;
+    }
+    &.@{classPrefix}Sequence8 {
+      outline-color: @sapSuiteSemanticColorSequence8Border !important;
+    }
+    &.@{classPrefix}Sequence9 {
+      outline-color: @sapSuiteSemanticColorSequence9Border !important;
+    }
+    &.@{classPrefix}Sequence10 {
+      outline-color: @sapSuiteSemanticColorSequence10Border !important;
+    }
+    &.@{classPrefix}Sequence11 {
+      outline-color: @sapSuiteSemanticColorSequence11Border !important;
+    }
+    &.@{classPrefix}Sequence12 {
+      outline-color: @sapSuiteSemanticColorSequence12Border !important;
+    }
+}
+
 // Mixin to apply stroke colors based on semantic color
 .sapSuiteStrokeSemanticColor(@classPrefix) {
     &.@{classPrefix}None {