@openui5/themelib_sap_horizon 1.119.1 → 1.120.1

package/THIRDPARTY.txt

@@ -179,7 +179,7 @@ License: Apache-2.0
 License Text: https://github.com/SAP/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: 41
+Component: Unicode Common Locale Data Repository, version: 43
 Copyright: 1991-2014 Unicode, Inc.
 License: Unicode-DFS-2015
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Unicode-DFS-2015.txt
@@ -334,7 +334,7 @@ License: ISC
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/ISC.txt
 Contained in: src/sap.ui.core/src/sap/ui/core/cache/LRUPersistentCache.js
 
-Component: Time Zone Database, version: 2022a
+Component: Time Zone Database, version: 2023c
 Copyright: Arthur David Olson, Paul Eggert and other contributors
 License: LicenseRef-tzdata-PublicDomain
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/LicenseRef-tzdata-PublicDomain.txt
@@ -416,7 +416,7 @@ Contained in: src/sap.ui.integration/test/sap/ui/integration/demokit/cardExplore
 
 Library: sap.ui.webc.common:
 
-Component: UI5 Web Components, version: 1.5.0
+Component: UI5 Web Components, version: 1.18.0
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
@@ -436,13 +436,13 @@ Contained in: src/sap.ui.webc.common/src/sap/ui/webc/common/thirdparty/lit-html/
 
 Library: sap.ui.webc.fiori:
 
-Component: UI5 Web Components, version: 1.5.0
+Component: UI5 Web Components, version: 1.18.0
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: src/sap.ui.webc.fiori/src/sap/ui/webc/fiori/thirdparty/*.*
 
-Component: ZXing, version: 0.19.1
+Component: ZXing, version: 0.17.1
 Copyright: 2005 Sun Microsystems, Inc.; 2010-2014 University of Manchester; 2010-2015 Stian Soiland-Reyes; 2015 Peter Hull
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
@@ -451,7 +451,7 @@ Contained in: src/sap.ui.webc.fiori/src/sap/ui/webc/fiori/lib/zxing.js
 
 Library: sap.ui.webc.main:
 
-Component: UI5 Web Components, version: 1.5.0
+Component: UI5 Web Components, version: 1.18.0
 Copyright: SAP
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/themelib_sap_horizon",
-  "version": "1.119.1",
+  "version": "1.120.1",
   "description": "OpenUI5 Theme Library sap_horizon",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,22 +14,22 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "devDependencies": {
-    "@openui5/sap.f": "1.119.1",
-    "@openui5/sap.m": "1.119.1",
-    "@openui5/sap.tnt": "1.119.1",
-    "@openui5/sap.ui.codeeditor": "1.119.1",
-    "@openui5/sap.ui.commons": "1.119.1",
-    "@openui5/sap.ui.core": "1.119.1",
-    "@openui5/sap.ui.dt": "1.119.1",
-    "@openui5/sap.ui.fl": "1.119.1",
-    "@openui5/sap.ui.mdc": "1.119.1",
-    "@openui5/sap.ui.integration": "1.119.1",
-    "@openui5/sap.ui.layout": "1.119.1",
-    "@openui5/sap.ui.rta": "1.119.1",
-    "@openui5/sap.ui.suite": "1.119.1",
-    "@openui5/sap.ui.table": "1.119.1",
-    "@openui5/sap.ui.unified": "1.119.1",
-    "@openui5/sap.ui.ux3": "1.119.1",
-    "@openui5/sap.uxap": "1.119.1"
+    "@openui5/sap.f": "1.120.1",
+    "@openui5/sap.m": "1.120.1",
+    "@openui5/sap.tnt": "1.120.1",
+    "@openui5/sap.ui.codeeditor": "1.120.1",
+    "@openui5/sap.ui.commons": "1.120.1",
+    "@openui5/sap.ui.core": "1.120.1",
+    "@openui5/sap.ui.dt": "1.120.1",
+    "@openui5/sap.ui.fl": "1.120.1",
+    "@openui5/sap.ui.mdc": "1.120.1",
+    "@openui5/sap.ui.integration": "1.120.1",
+    "@openui5/sap.ui.layout": "1.120.1",
+    "@openui5/sap.ui.rta": "1.120.1",
+    "@openui5/sap.ui.suite": "1.120.1",
+    "@openui5/sap.ui.table": "1.120.1",
+    "@openui5/sap.ui.unified": "1.120.1",
+    "@openui5/sap.ui.ux3": "1.120.1",
+    "@openui5/sap.uxap": "1.120.1"
   }
 }

package/src/sap/f/themes/sap_horizon/AvatarGroup.less

@@ -35,7 +35,8 @@
 				.sapFAvatar {
 					background-color: @sapUiButtonActiveBackground;
 
-					.sapFAvatarInitialsHolder {
+					.sapFAvatarInitialsHolder,
+					&.sapFAvatarIcon {
 						color: @sapUiButtonActiveTextColor;
 					}
 				}
@@ -66,7 +67,8 @@
 					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
 					background-color: @sapUiButtonActiveBackground;
 
-					.sapFAvatarInitialsHolder {
+					.sapFAvatarInitialsHolder,
+					&.sapFAvatarIcon {
 						color: @sapUiButtonActiveTextColor;
 					}
 				}

package/src/sap/f/themes/sap_horizon/FlexibleColumnLayout.less

@@ -3,6 +3,8 @@
 /* Horizon theme                               */
 /* =========================================== */
 
+@_sap_f_FCL_SeparatorButtonColor: @sapUiButtonLiteTextColor;
+
 .sapFFCL {
 	&.sapFFCLBackgroundDesignSolid {
 		background: @sapUiContentForegroundColor;

package/src/sap/f/themes/sap_horizon/ShellBar.less

@@ -97,14 +97,20 @@
 		font-size: @sapMFontHeader5Size;
 		font-weight: bold;
 
-		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
+		.sapMBtn:not(:hover) .sapMBtnInner.sapMBtnTransparent::after,
+		.sapMBtnTransparent {
+			color: @sapUiShellTextColor;
+		}
+
+		.sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
 			background: @sapUiShellHoverBackground;
 			box-shadow: @sapUiContentInteractionShadow;
 			border-color: @sapUiButtonLiteBorderColor;
+			color: @sapUiShellActiveTextColor;
 		}
 
-		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed.sapMBtnActive {
-			background: @sapUiShellActiveBackground;
+		.sapMBtn:hover > .sapMBtnHoverable.sapMBtnActive {
+			background: @sapUiShellHoverBackground;
 			color: @sapUiShellActiveTextColor;
 			border-color: @sapUiButtonLiteActiveBorderColor;
 		}
@@ -507,7 +513,7 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelB
 
 		// sap.m.Button
 		.sapFShellBarItem.sapMBtn,
-		.sapFShellBarItem .sapMBtn,
+		.sapFShellBarItem:not(.sapFSHMegaMenu ) .sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem.sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem .sapMBtn {
 			.sapMBtnInner::after,

package/src/sap/f/themes/sap_horizon_dark/FlexibleColumnLayout.less

@@ -3,6 +3,8 @@
 /* Evening Horizon theme                       */
 /* =========================================== */
 
+@_sap_f_FCL_SeparatorButtonColor: @sapUiButtonLiteTextColor;
+
 .sapFFCL {
 	&.sapFFCLBackgroundDesignSolid {
 		background: @sapUiContentForegroundColor;

package/src/sap/f/themes/sap_horizon_dark/ShellBar.less

@@ -96,14 +96,20 @@
 		font-size: @sapMFontHeader5Size;
 		font-weight: bold;
 
-		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
+		.sapMBtn:not(:hover) .sapMBtnInner.sapMBtnTransparent::after,
+		.sapMBtnTransparent {
+			color: @sapUiShellTextColor;
+		}
+
+		.sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
 			background: @sapUiShellHoverBackground;
 			box-shadow: @sapUiContentInteractionShadow;
 			border-color: @sapUiButtonLiteBorderColor;
+			color: @sapUiShellActiveTextColor;
 		}
 
-		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed.sapMBtnActive {
-			background: @sapUiShellActiveBackground;
+		.sapMBtn:hover > .sapMBtnHoverable.sapMBtnActive {
+			background: @sapUiShellHoverBackground;
 			color: @sapUiShellActiveTextColor;
 			border-color: @sapUiButtonLiteActiveBorderColor;
 		}
@@ -504,7 +510,7 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelB
 
 		// sap.m.Button
 		.sapFShellBarItem.sapMBtn,
-		.sapFShellBarItem .sapMBtn,
+		.sapFShellBarItem:not(.sapFSHMegaMenu ) .sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem.sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem .sapMBtn {
 			.sapMBtnInner::after,

package/src/sap/m/themes/sap_horizon/Avatar.less

@@ -22,10 +22,10 @@
 }
 
 .sapFAvatarFocusable.sapMAvatarPressed {
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+	box-shadow: 0px 0px 0px @sapUiButtonBorderWidth @sapUiButtonSelectedBorderColor;
 
 	&:hover {
-		box-shadow: 0px 0px 0px 0.125rem @sapUiButtonSelectedHoverBorderColor;
+		box-shadow: 0px 0px 0px @sapUiButtonBorderWidth @sapUiButtonSelectedHoverBorderColor;
 	}
 }
 

package/src/sap/m/themes/sap_horizon/Breadcrumbs.less

@@ -44,7 +44,8 @@
 		&:hover {
 			.sapMSltIcon {
 				background-color: @sapUiContentFocusColor;
-				border-bottom: @sapUiContentFocusColor 0.0625rem solid;
+				text-decoration: underline;
+				color: @sapUiContentContrastTextColor;
 			}
 
 			.sapMSltIcon:before {

package/src/sap/m/themes/sap_horizon/Button.less

@@ -159,6 +159,19 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable
 	border-color:    @sapUiContentFocusColor;
 }
 
+// Value State Message buttons
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnCritical.sapMBtnActive {
+	border-color: @sapUiButtonCriticalBorderColor;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnNegative.sapMBtnActive {
+	border-color: @sapUiButtonNegativeBorderColor;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnSuccess.sapMBtnActive {
+	border-color: @sapButton_Success_BorderColor;
+}
+
 html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
 	content: "";
 	position: absolute;
@@ -173,10 +186,9 @@ html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before
 }
 
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnNeutral.sapMFocusable:not(.sapMBadgeIndicator):before {
+html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before,
+html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before,
+html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before {
 	border: 0.125rem solid @sapUiContentContrastFocusColor;
 }
 

package/src/sap/m/themes/sap_horizon/CheckBox.less

@@ -159,6 +159,21 @@
 	border-radius: 0.5rem;
 }
 
+/* In Form Checkbox needs to be left aligned to bi in line with other controls (as Form itself has a padding) */
+.sapUiForm {
+	.sapMCbBg {
+		left: 0;
+	}
+
+	.sapMCb {
+		padding-left: 2.0625rem; // to have right gap between checkbox and label
+	}
+
+	.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
+		left: -0.25rem; /* more is not possible as this would cut off the focus border */
+	}
+}
+
 .sapUiSizeCompact {
 	.sapMCb {
 		height: 2rem;
@@ -196,4 +211,19 @@
 		top: 0.5625rem;
 		left: 0.5625rem;
 	}
-}
+
+	/* In Form Checkbox needs to be left aligned to bi in line with other controls (as Form itself has a padding) */
+	.sapUiForm {
+		.sapMCbBg {
+			left: 0;
+		}
+
+		.sapMCb {
+			padding-left: 1.5rem; // to have right gap between checkbox and label
+		}
+
+		.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
+			left: -0.1875rem;
+		}
+	}
+}

package/src/sap/m/themes/sap_horizon/MenuButton.less

@@ -17,6 +17,10 @@
 	}
 }
 
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
+	line-height: 2.125rem;
+}
+
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner:not(.sapMBtnText) {
 	padding-left: 0rem;
 }
@@ -56,12 +60,8 @@
 }
 
 .sapMMenuBtnSplit .sapMSB:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
-	padding-right: 0.4375rem;
-	padding-left: 0.4375rem;
-
 	.sapMBtnContent {
 		position: relative;
-		top: -1px;
 		left: 0;
 	}
 }
@@ -71,4 +71,22 @@
 		padding-right: 0.3125rem;
 		padding-left: 0.3125rem;
 	}
+	.sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnIcon,
+	.sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnContent {
+		position: relative;
+		top: 0;
+		left: 0;
+	}
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnNegative.sapMBtnActive::after {
+	color: @sapUiButtonNegativeActiveTextColor;
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnCritical.sapMBtnActive::after {
+	color: @sapUiButtonCriticalActiveTextColor;
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnSuccess.sapMBtnActive::after {
+	color: @sapUiButtonSuccessActiveTextColor;
 }

package/src/sap/m/themes/sap_horizon/ObjectStatus.less

@@ -387,4 +387,28 @@ html.sap-desktop .sapMObjStatusActive.sapMObjStatusInverted {
 	background-color: @sapUiIndication8ActiveBackground;
 	border-color: @sapUiIndication8ActiveBorderColor;
 	color: @sapUiIndication8ActiveTextColor;
+}
+
+/*  Second set of inverted indication colors regular state */
+.sapMObjStatusInverted.sapMObjStatusIndication11 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication11 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication12 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication12 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication13 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication13 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication14 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication14 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication15 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication15 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication16 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication16 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication17 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication17 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication18 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication18 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication19 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication19 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication20 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication20 .sapMObjStatusIcon {
+	text-shadow: @sapUiContentTextShadow;
 }

package/src/sap/m/themes/sap_horizon/ProgressIndicator.less

@@ -29,6 +29,10 @@
 	}
 }
 
+.sapMPIValueMax .sapMPIBarRemaining {
+	display: flex;
+}
+
 .sapMPIBarRemaining {
 	position: absolute;
     width: ~'calc(100% - 1.25rem)';

package/src/sap/m/themes/sap_horizon/RangeSlider.less

@@ -11,15 +11,14 @@
 .sapMRangeSlider.sapMSlider .sapMSliderInner {
 	&:not(.sapMSliderInnerDisabled).sapMSliderProgress:hover ~ .sapMSliderHandle,
 	.sapMSliderHandle:hover  {
-		border: 1px @sapContent_FocusStyle @sapUiSliderHoverHandleBorderColor;
+		border: 0.0625rem @sapContent_FocusStyle @sapUiSliderHoverHandleBorderColor;
 		background: @sapUiSliderHoverRangeHandleBackground;
-		box-shadow: @sapUiContentSelectedShadow;
 	}
 
 	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
 		&:not(:focus) {
 			background: transparent;
-			border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+			border: 0.125rem solid @sapUiContentFocusColor;
 			outline: none;
 			box-shadow: none;
 			top: -0.625rem;
@@ -28,7 +27,7 @@
 
 	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
 		background: @sapUiSliderActiveRangeHandleBackground;
-		border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+		border: 0.125rem solid @sapUiContentFocusColor;
 		outline: none;
 		box-shadow: none;
 		top: -0.625rem;
@@ -36,7 +35,6 @@
 
 	.sapMSliderHandle {
 		background: @sapUiSliderRangeHandleBackground;
-		box-shadow: @sapUiContentSelectedShadow;
 		top: -0.625rem;
 	}
 
@@ -68,7 +66,7 @@
 	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
 		&:not(:focus) {
 			background: transparent;
-			border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+			border: @sapUiContentFocusWidth solid @sapUiContentFocusColor;
 			outline: none;
 			box-shadow: none;
 			top: -0.5rem;
@@ -85,7 +83,7 @@
 
 	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
 		background: @sapUiSliderActiveRangeHandleBackground;
-		border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+		border: 0.125rem solid @sapUiContentFocusColor;
 		outline: none;
 		box-shadow: none;
 		top: -0.5rem;

package/src/sap/m/themes/sap_horizon/SearchField.less

@@ -17,6 +17,7 @@
 @_sap_m_SearchField_FocusOffset: 0;
 @_sap_m_SearchField_FocusBorderRadius: inherit;
 @_sap_m_SearchField_PlaceholderFontStyle: italic;
+@_sap_m_SearchField_ActiveBackgroundStyle: @sapUiFieldBackgroundStyle;
 
 .sapMSFF {
 	border-radius: @sapUiFieldBorderCornerRadius;
@@ -27,10 +28,6 @@
 }
 
 .sapMSFB {
-	// don't overlap the bottom line
-	margin-bottom: 1px;
-	height: ~"calc(100% - 1px)";
-
 	border-radius: @sapUiFieldBorderCornerRadius;
 	color: @sapUiFieldTextColor;
 
@@ -44,6 +41,7 @@
 
 	&:hover {
 		box-shadow: @sapUiFieldHoverShadow;
+		background: @sapUiFieldBackgroundStyle;
 		background-color: @sapUiFieldHoverBackground;
 	}
 

package/src/sap/m/themes/sap_horizon/SegmentedButton.less

@@ -18,13 +18,15 @@
 			text-align: center;
 			text-shadow: none;
 			color: @sapUiButtonTextColor;
-			border-top: 1px solid transparent;
+			border-top: 1px solid @sapUiButtonBorderColor;
 			border-left: 1px solid transparent;
-			border-bottom: 1px solid transparent;
+			border-bottom: 1px solid @sapUiButtonBorderColor;
 			border-right: 1px solid transparent;
-			background-color: @sapUiButtonBackground;
+			background-color: transparent;
 			margin-left: 1px;
 			margin-right: 1px;
+			margin-top: -1px;
+			margin-bottom: -1px;
 		}
 		&:not(.sapMSegBBtnMixed) .sapMImg {
 			padding-left: 0.5625rem;
@@ -46,7 +48,8 @@
 .sapMSegBBtn:first-child .sapMSegBBtnInner {
 	border-top-left-radius: @sapUiButtonBorderCornerRadius;
 	border-bottom-left-radius: @sapUiButtonBorderCornerRadius;
-	margin-left: 0;
+	border-left: 1px solid @sapUiButtonBorderColor;
+	margin-left: -1px;
 }
 
 .sapMSegBBtn:first-child .sapMSegBBtnInnerWrapper {
@@ -55,16 +58,17 @@
 	border-left: 1px solid @sapUiButtonBorderColor;
 }
 
-.sapMSegBBtn:last-child .sapMSegBBtnInnerWrapper {
+.sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInnerWrapper {
 	border-top-right-radius: @sapUiButtonBorderCornerRadius;
 	border-bottom-right-radius: @sapUiButtonBorderCornerRadius;
 	border-right: 1px solid @sapUiButtonBorderColor;
 }
 
-.sapMSegBBtn:last-child .sapMSegBBtnInner{
+.sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInner{
 	border-top-right-radius: @sapUiButtonBorderCornerRadius;
 	border-bottom-right-radius: @sapUiButtonBorderCornerRadius;
-	margin-right: 0;
+	border-right: 1px solid @sapUiButtonBorderColor;
+	margin-right: -1px;
 }
 
 html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
@@ -74,7 +78,7 @@ html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
 }
 
 html.sap-desktop .sapMSegBBtnFocusable.sapMSegBBtnSel:hover .sapMSegBBtnInner {
-	border-color: @sapUiButtonBorderColor;
+	border-color: @sapUiButtonSelectedBorderColor;
 }
 
 html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
@@ -82,23 +86,122 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 }
 
 /* Custom focus outline: */
+html.sap-desktop {
+	.sapMSegBBtn:first-child.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
+		content: "";
+		position: absolute;
+		box-sizing: border-box;
+		left: 0.125rem;
+		top: 0.375rem;
+		right: 0.2rem;
+		bottom: 0.375rem;
+		pointer-events: none;
+		border: 0.125rem solid @sapUiContentFocusColor;
+		border-radius: 0.375rem;
+	}
+	.sapUiSizeCompact .sapMSegBBtn:first-child.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after,
+	&.sapUiSizeCompact .sapMSegBBtn:first-child.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
+		top: 0.3rem;
+		bottom: 0.3rem;
+	}
+}
+
+/* Custom focus outline: */
+html.sap-desktop {
+	.sapMSegBBtn.sapMSegBtnLastVisibleButton.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
+		content: "";
+		position: absolute;
+		box-sizing: border-box;
+		left: 0.2rem;
+		top: 0.375rem;
+		right: 0.125rem;
+		bottom: 0.375rem;
+		pointer-events: none;
+		border: 0.125rem solid @sapUiContentFocusColor;
+		border-radius: 0.375rem;
+	}
+	.sapUiSizeCompact .sapMSegBBtn.sapMSegBtnLastVisibleButton.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after,
+	&.sapUiSizeCompact .sapMSegBBtn.sapMSegBtnLastVisibleButton.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
+		top: 0.3rem;
+		bottom: 0.3rem;
+	}
+}
+
 html.sap-desktop {
 	.sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
 		content: "";
 		position: absolute;
 		box-sizing: border-box;
 		left: 0.2rem;
-		top: 0.45rem;
+		top: 0.375rem;
 		right: 0.2rem;
-		bottom: 0.45rem;
+		bottom: 0.375rem;
 		pointer-events: none;
 		border: 0.125rem solid @sapUiContentFocusColor;
 		border-radius: 0.375rem;
 	}
 	.sapUiSizeCompact .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after,
 	&.sapUiSizeCompact .sapMSegBBtnFocusable:focus .sapMSegBBtnInner:after {
-		top: 0.4rem;
-		bottom: 0.4rem;
+		top: 0.3rem;
+		bottom: 0.3rem;
+	}
+}
+
+.sapMSegB.sapMSegBIcons {
+	.sapMSegBBtn.sapMSegBtnLastVisibleButton:not(.sapMSegBBtnMixed) .sapMSegBBtnInner {
+		margin-right: -1px;
+	}
+}
+
+.sapMSegB.sapMSegBIcons {
+	.sapMSegBBtn.sapMSegBtnLastVisibleButton:not(.sapMSegBBtnMixed) .sapMSegBBtnInner {
+		margin-right: -1px;
+	}
+}
+
+/* Custom focus outline: */
+html.sap-desktop {
+	.sapMSegB.sapMSegBIcons {
+		.sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBtnLastVisibleButton):focus .sapMSegBBtnInner:after {
+			content: "";
+			position: absolute;
+			box-sizing: border-box;
+			left: 0.2rem;
+			top: 0.375rem;
+			right: 0.15rem;
+			bottom: 0.375rem;
+			pointer-events: none;
+			border: 0.125rem solid @sapUiContentFocusColor;
+			border-radius: 0.375rem;
+		}
+	}
+	.sapUiSizeCompact .sapMSegB.sapMSegBIcons .sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBtnLastVisibleButton):focus .sapMSegBBtnInner:after,
+	&.sapUiSizeCompact .sapMSegB.sapMSegBIcons .sapMSegBBtn.sapMSegBBtnFocusable:not(.sapMSegBtnLastVisibleButton):focus .sapMSegBBtnInner:after {
+		top: 0.3rem;
+		bottom: 0.3rem;
+	}
+}
+
+/* Custom focus outline: */
+html.sap-desktop {
+	.sapMSegB.sapMSegBIcons {
+		.sapMSegBBtn.sapMSegBBtnFocusable:first-child:focus .sapMSegBBtnInner:after {
+			content: "";
+			position: absolute;
+			box-sizing: border-box;
+			left: 0.15rem;
+			top: 0.375rem;
+			right: 0.15rem;
+			bottom: 0.375rem;
+			pointer-events: none;
+			border: 0.125rem solid @sapUiContentFocusColor;
+			border-radius: 0.375rem;
+		}
+		.sapUiSizeCompact .sapMSegBBtn.sapMSegBBtnFocusable:first-child:focus .sapMSegBBtnInner:after,
+		&.sapUiSizeCompact .sapMSegBBtn.sapMSegBBtnFocusable:first-child:focus .sapMSegBBtnInner:after {
+			top: 0.3rem;
+			bottom: 0.3rem;
+		}
 	}
 }
 
@@ -147,7 +250,7 @@ html.sap-desktop {
 
 .sapMSegBBtn.sapMSegBBtnSel:hover {
 	.sapMSegBBtnInner {
-		border-color: @sapUiButtonSelectedHoverBorderColor;
+		border-color: @sapUiButtonSelectedBorderColor;
 	}
 }
 
@@ -226,7 +329,7 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
 		border-bottom-left-radius: 0.5rem;
 	}
 
-	.sapMSegBBtn:last-child .sapMSegBBtnInner {
+	.sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInner {
 		border-top-right-radius: 0.5rem;
 		border-bottom-right-radius: 0.5rem;
 	}