@openui5/sap.m 1.115.1 → 1.117.0

package/src/sap/m/table/columnmenu/Menu.js

@@ -80,7 +80,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickAction.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.QuickActionBase
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickActionBase.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.Entry
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickActionItem.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.Entry
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickGroup.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.QuickActionBase
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickGroupItem.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.QuickActionItem
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickSort.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.QuickActionBase
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickSortItem.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.QuickActionItem
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickTotal.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.QuickActionBase
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

package/src/sap/m/table/columnmenu/QuickTotalItem.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.m.table.columnmenu.QuickActionItem
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.117.0
 	 *
 	 * @public
 	 * @since 1.110

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

@@ -8,6 +8,7 @@
 @_sap_m_Avatar_Font_Size_M: 2rem;
 @_sap_m_Avatar_Font_Size_S: 1.5rem;
 @_sap_m_Avatar_Font_Size_XS: 1rem;
+@_sap_m_Avatar_Hover_Box_Shadow_Offset: 0px 0px 0px 0.0625rem;
 
 .sapFAvatar {
 	display: inline-block;
@@ -18,6 +19,10 @@
 	&.sapFAvatarBorder {
 		border: 0.0625rem solid @sapGroup_ContentBorderColor;
 	}
+
+	&.sapMAvatarDisabled {
+		opacity: @sapUiContentDisabledOpacity;
+	}
 }
 
 // Define a loop and go trough 10 color sets
@@ -34,11 +39,16 @@
 .generateColor (@accentIndex) {
 	@css-selector: ~"sapFAvatarColorAccent@{accentIndex}"; // Create the css selector string
 	@color-param: ~"sapUiAccent@{accentIndex}"; // Build the color param which is a sapUiAccent
+	@border-param: ~"sapAvatar_@{accentIndex}_TextColor"; // Build the border param
 
 	// Build the real CSS selector.
 	// The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;}
 	.@{css-selector} {
 		background-color: @@color-param;
+
+		&:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+			box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @@border-param;
+		}
 	}
 }
 
@@ -66,14 +76,26 @@
 	&>.sapFAvatarInitialsHolder {
 		color: @sapUiContentIconColor;
 	}
+
+	&:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+		box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapUiContentIconColor;
+	}
 }
 
 .sapFAvatarColorTileIcon {
 	background-color: @sapUiTileIconColor;
+
+	&:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+		box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapUiTileIconColor;
+	}
 }
 
 .sapFAvatarColorPlaceholder {
 	background-color: @sapUiContentImagePlaceholderBackground;
+
+	&:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+		box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapUiContentImagePlaceholderForegroundColor;
+	}
 }
 
 .sapFAvatarInitialsHolder {
@@ -92,6 +114,10 @@
 	.sapFAvatarTypeIcon, .sapFAvatarInitialsHolder {
 		display: none;
 	}
+
+	&:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+		box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapAvatar_10_TextColor;
+	}
 }
 
 .sapFAvatarImageHolder {
@@ -177,18 +203,31 @@
 	}
 }
 
-.sapFAvatarFocusable:focus {
-	outline: 0.0625rem dotted @sapUiContentFocusColor;
+.sapFAvatarFocusable.sapMAvatarPressed {
+	background-color: @sapUiButtonSelectedBackground;
+	color: @sapUiButtonSelectedTextColor;
+	outline-offset: 0.0625rem;
+
+	&:hover {
+		background-color: @sapUiButtonSelectedHoverBackground;
+		outline-color: @sapUiButtonSelectedHoverBorderColor;
+	}
+
 	.sapUiRespGrid & {
 		z-index: 100;
 	}
+}
+
+.sapFAvatarFocusable:focus {
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: 0.0625rem;
 
-    &.sapFAvatarSquare {
-        outline-offset: 0.0625rem;
-    }
+	.sapUiRespGrid & {
+		z-index: 100;
+	}
 }
 
-html:not(.sap-desktop) .sapFAvatarFocusable:focus {
+html:not(.sap-desktop) .sapFAvatarFocusable.sapMAvatarPressed {
 	outline: none;
 }
 
@@ -241,6 +280,38 @@ html:not(.sap-desktop) .sapFAvatarFocusable:focus {
 	}
 }
 
+.sapFAvatarWarning .sapFAvatarBadgeIcon {
+	background-color: @sapWarningBackground;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapWarningBorderColor;
+	>.sapUiIcon {
+		color: @sapCriticalTextColor;
+	}
+}
+
+.sapFAvatarError .sapFAvatarBadgeIcon {
+	background-color: @sapErrorBackground;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapErrorBorderColor;
+	>.sapUiIcon {
+		color: @sapNegativeTextColor;
+	}
+}
+
+.sapFAvatarInformation .sapFAvatarBadgeIcon {
+	background-color: @sapInformationBackground;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapInformationBorderColor;
+	>.sapUiIcon {
+		color: @sapInformativeTextColor;
+	}
+}
+
+.sapFAvatarSuccess .sapFAvatarBadgeIcon {
+	background-color: @sapSuccessBackground;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapSuccessBorderColor;
+	>.sapUiIcon {
+		color: @sapPositiveTextColor;
+	}
+}
+
 .sapFAvatarBadgeIcon {
 	display: inline-block;
 	box-sizing: border-box;
@@ -256,7 +327,7 @@ html:not(.sap-desktop) .sapFAvatarFocusable:focus {
 	text-align: center;
 
 	background-color: @sapButton_Emphasized_Background;
-	border: 0.0625rem solid @sapButton_Emphasized_BorderColor;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapButton_Emphasized_BorderColor;
 
 	>.sapUiIcon {
 		vertical-align: middle;

package/src/sap/m/themes/base/Carousel.less

@@ -514,12 +514,19 @@ html[data-sap-ui-animation='off'] .sapMCrsl .sapMCrslInner {
 	background: @sapUiBaseBG;
 }
 
+// Arrows over content
 .sapMCrsl .sapMCrslHud.sapMCrslLeftmost .sapMCrslArrow.sapMCrslPrev,
 .sapMCrsl .sapMCrslHud.sapMCrslRightmost .sapMCrslArrow.sapMCrslNext {
 	opacity: 0;
 	display: none;
 }
 
+// Arrows in the Page Indicator area
+.sapMCrsl .sapMCrslArrow.sapMCrslLeftmost.sapMCrslPrev,
+.sapMCrsl .sapMCrslArrow.sapMCrslRightmost.sapMCrslNext {
+	opacity: 0;
+}
+
 .sapMCrslHud .sapMCrslPrev {
 	left: @_sap_m_Carousel_PrevAndNextPosition;
 }

package/src/sap/m/themes/base/CellSelector.less

@@ -1,116 +1,61 @@
-@_sap_m_plugins_CellSelector_ListSelectedColor: darken(@sapList_SelectionBackgroundColor, 2);
-
-@_sap_m_plugins_CellSelector_ListBackgroundColor_red: red(@_sap_m_plugins_CellSelector_ListSelectedColor);
-@_sap_m_plugins_CellSelector_ListBackgroundColor_green: green(@_sap_m_plugins_CellSelector_ListSelectedColor);
-@_sap_m_plugins_CellSelector_ListBackgroundColor_blue: blue(@_sap_m_plugins_CellSelector_ListSelectedColor);
-
-// Color Calculation: Base Color for Background is sapList_SelectionBackgroundColor. Calculated mathing color with alpha channel 0.2 with formula: color = (wanted_color - 255 + 255 * opacity) / opacity
-@_sap_m_plugins_CellSelector_Opacity: 0.3;
-@_sap_m_plugins_CellSelector_SelectionBackgroundColor_red: ((@_sap_m_plugins_CellSelector_ListBackgroundColor_red - 255 + 255 * @_sap_m_plugins_CellSelector_Opacity) / @_sap_m_plugins_CellSelector_Opacity);
-@_sap_m_plugins_CellSelector_SelectionBackgroundColor_green: ((@_sap_m_plugins_CellSelector_ListBackgroundColor_green - 255 + 255 * @_sap_m_plugins_CellSelector_Opacity) / @_sap_m_plugins_CellSelector_Opacity);
-@_sap_m_plugins_CellSelector_SelectionBackgroundColor_blue: ((@_sap_m_plugins_CellSelector_ListBackgroundColor_blue - 255 + 255 * @_sap_m_plugins_CellSelector_Opacity) / @_sap_m_plugins_CellSelector_Opacity);
-
-.colorMixin(@red; @green; @blue) when (@red > 0) and (@green > 0) and (@blue > 0) {
-	// If the calculated colors are above value 0, apply them
-	background-color: rgba(@_sap_m_plugins_CellSelector_SelectionBackgroundColor_red, @_sap_m_plugins_CellSelector_SelectionBackgroundColor_green, @_sap_m_plugins_CellSelector_SelectionBackgroundColor_blue, @_sap_m_plugins_CellSelector_Opacity);
-}
-
-.colorMixin(@red; @green; @blue) when (@red < 0), (@green < 0), (@blue < 0) {
-	// If any of the calculated colors are below 0, there is no equivalent color with an alpha channel of 0.3, apply the normal colors and give them an alpha value of 0.5 (fallback solution)
-	background-color: rgba(@_sap_m_plugins_CellSelector_ListBackgroundColor_red, @_sap_m_plugins_CellSelector_ListBackgroundColor_green, @_sap_m_plugins_CellSelector_ListBackgroundColor_blue, 0.5);
-}
-
-.sapMPluginsCellSelectorCanvas {
-	.colorMixin(@_sap_m_plugins_CellSelector_SelectionBackgroundColor_red; @_sap_m_plugins_CellSelector_SelectionBackgroundColor_green; @_sap_m_plugins_CellSelector_SelectionBackgroundColor_blue);
-	display: none;
+.sapMPluginsCellSelectorRsz {
 	position: absolute;
-	pointer-events: none;
-	border: 0.125rem solid @sapList_SelectionBorderColor;
-	box-sizing: border-box;
 	z-index: 7;
+	box-sizing: border-box;
 
-	.sapMPluginsCellSelectorEdgeWrapper {
-		position: absolute;
-		z-index: 10;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-clip: content-box;
-		width: 10px;
-		height: 10px;
-		pointer-events: all;
-	}
-	
-	.sapMPluginsCellSelectorEdgeWrapper:hover {
-		visibility: visible;
-		cursor: crosshair;
-		background: @sapList_SelectionBorderColor;
-		z-index: 10;
-	}
-
-	.sapMPluginsCellSelectorBorderLine {
-		position: absolute;
-		pointer-events: all;
-		z-index: 8;
-		height: 10px;
-		width: 10px;
-	}
-	
-	.sapMPluginsEdgeNE {
-		top: 0;
-		right: 0;
-		margin-top: -5px;
-		margin-right: -5px;
-	}
-	
-	.sapMPluginsEdgeNW {
-		top: 0;
-		left: 0;
-		margin-top: -5px;
-		margin-left: -5px;
-	}
-	
-	.sapMPluginsEdgeSE {
-		bottom: 0;
-		right: 0;
-		margin-bottom: -5px;
-		margin-right: -5px;
-	}
-	
-	.sapMPluginsEdgeSW {
-		bottom: 0;
-		left: 0;
-		margin-bottom: -5px;
-		margin-left: -5px;
-	}
-	
-	.sapMPluginsBorderN {
-		cursor: row-resize;
-		top: 0;
-		left: 0;
-		margin-top: -5px;
-	}
-	
-	.sapMPluginsBorderE {
+	&.sapMPluginsVerticalBorder {
+		width: 7px;
+		margin-left: -3.5px;
 		cursor: col-resize;
-		top: 0;
-		right: 0;
-		margin-right: -5px;
 	}
-	
-	.sapMPluginsBorderS {
+
+	&.sapMPluginsHorizontalBorder {
+		height: 7px;
+		margin-top: -3.5px;
 		cursor: row-resize;
-		bottom: 0;
-		left: 0;
-		margin-bottom: -5px;
 	}
-	
-	.sapMPluginsBorderW {
-		cursor: col-resize;
-		top: 0;
-		left: 0;
+
+	&.sapMPluginsEdge {
+		height: 10px !important;
+		width: 10px !important;
+		margin-top: -5px;
 		margin-left: -5px;
+
+		&.sapMPluginsNESW {
+			cursor: nesw-resize;
+		}
+
+		&.sapMPluginsNWSE {
+			cursor: nwse-resize;
+		}
 	}
-	
 }
 
+.sapMPluginsCellSelectorRsz:hover {
+	background-color: @sapList_HighlightColor;
+	opacity: 0.5;
+}
+
+.sapMPluginsCellSelectorRszActive {
+	opacity: 1 !important;
+}
+
+.sapMPluginsCellSelectorSelected {
+	background-color: @sapList_SelectionBackgroundColor;
+}
+
+.sapMPluginsCellSelectorTop {
+	border-top: 0.0625rem @sapList_SelectionBorderColor solid !important;
+}
+
+.sapMPluginsCellSelectorRight {
+	border-right: 0.0625rem @sapList_SelectionBorderColor solid !important;
+}
+
+.sapMPluginsCellSelectorBottom {
+	border-bottom: 0.0625rem @sapList_SelectionBorderColor solid !important;
+}
+
+.sapMPluginsCellSelectorLeft {
+	border-left: 0.0625rem @sapList_SelectionBorderColor solid !important;
+}

package/src/sap/m/themes/base/IconTabBar.less

@@ -1252,7 +1252,7 @@ html.sap-desktop {
 }
 
 .sapMITH.sapMITBTextOnly .sapMITBFilterWithItems:not(.sapMITHUnselectable) .sapMITBContentArrow {
-	margin-right: -2rem;
+	margin-right: -2.3125rem;
 }
 
 .sapMITH .sapMITBContentArrow {

package/src/sap/m/themes/base/Link.less

@@ -14,25 +14,31 @@
 	font-family: @sapUiFontFamily;
 	font-size: @sapMFontMediumSize;
 	cursor: pointer;
-}
 
-.sapMLnk:visited {
-	color: @sapUiLinkVisitedColor;
-}
+	&:visited {
+		color: @sapUiLinkVisitedColor;
+	}
 
-.sapMLnk:active:not(.sapMLnkDsbl):not(.sapMLnkSubtle),
-.sapMLnk:focus:not(.sapMLnkDsbl):not(.sapMLnkSubtle) {
-	color: @sapUiLinkActiveColor;
+	&:not(.sapMLnkDsbl) {
+		&:active {
+			color: @sapUiLinkActiveColor;
+			text-decoration: @sapUiLinkActiveTextDecoration;
+		}
+	}
 }
 
-html.sap-desktop .sapMLnk:hover:not(:focus):not(.sapMLnkDsbl):not(.sapMLnkSubtle) {
-	color: @sapUiLinkHoverColor;
-	text-decoration: @sapUiLinkHoverTextDecoration;
-}
+html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
+	&:focus {
+		outline: 1px dotted @sapUiContentFocusColor;
+		outline-offset: -1px;
+		text-decoration: underline;
+	}
+
+	&:hover:not(:active):not(:focus) {
+		color: @sapUiLinkHoverColor;
+		text-decoration: @sapUiLinkHoverTextDecoration;
+	}
 
-.sapMLnk:active:not(.sapMLnkDsbl):not(.sapMLnkSubtle),
-html.sap-desktop .sapMLnk:active:hover:not(.sapMLnkDsbl):not(.sapMLnkSubtle) {
-	text-decoration: @sapUiLinkActiveTextDecoration;
 }
 
 .sapUiInverted-CTX .sapUiLnk {
@@ -74,16 +80,6 @@ html.sap-desktop .sapMLnk:active:hover:not(.sapMLnkDsbl):not(.sapMLnkSubtle) {
 	vertical-align: top;
 }
 
-/* Global focus offset */
-html.sap-desktop .sapMLnk:focus:not(.sapMLnkDsbl) {
-	outline: 1px dotted @sapUiContentFocusColor;
-	outline-offset: -1px;
-}
-
-html.sap-desktop .sapMLnk:focus:not(:active):not(.sapMLnkDsbl) {
-	text-decoration: underline;
-}
-
 /* Link focus offset and visualization in sap.ui.table.* tables */
 html.sap-desktop .sapUiSizeCondensed .sapUiTableCell .sapMLnk:focus:not(.sapMLnkDsbl) {
 	outline-offset: -2px;

package/src/sap/m/themes/base/MessageStrip.less

@@ -14,7 +14,7 @@
 	min-height: 2rem;
 
 	&[data-sap-ui-ms-closable='true'] > .sapMMsgStripMessage {
-		margin-right: 1rem;
+		margin-right: 1.25rem;
 	}
 }
 

package/src/sap/m/themes/base/NumericContent.less

@@ -168,6 +168,10 @@ html[dir=rtl] .sapMNCValue {
 	grid-row: 1;
 }
 
+.sapMListTblSubRowCell .sapMNCValue {
+	display: contents;
+}
+
 .sapMNCValue.Neutral,
 .sapMNCIndScale.Neutral,
 .sapMNCScale.Neutral {

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

@@ -331,7 +331,6 @@
 
 	}
 	.sapMObjStatusText {
-		line-height: inherit;
 		vertical-align: middle;
 	}
 	.sapMObjStatusText,
@@ -358,7 +357,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
-	display: block;
+	display: flex;
 }
 
 .sapUiForm .sapMObjStatusIcon,

package/src/sap/m/themes/base/Panel.less

@@ -10,6 +10,13 @@
 	position: relative;
 }
 
+.sapMPanel.sapMPanelHasStickyHeader{
+	display: flex;
+	flex-direction: column;
+	overflow: initial;
+	position: static;
+}
+
 .sapMPanelHdr {
 	box-sizing: border-box;
 	white-space: nowrap;
@@ -52,6 +59,13 @@
 	height: 2rem;
 }
 
+.sapMPanelStickyHeadingDiv {
+	position: sticky;
+	top: 0;
+	z-index: 4; /* The z-index of the Table sticky header is 3, so we need bigger one to make the Panel header on top*/
+	background-color: @sapUiBaseBG;
+}
+
 .sapMPanelContent {
 	padding: 0.625rem 1rem 1.375rem 1rem;
 	box-sizing: border-box;

package/src/sap/m/themes/base/PlanningCalendarHeader.less

@@ -1,7 +1,8 @@
 @_sap_m_PlanningCalendarHeader_Background: @sapUiListBackground;
 
 .sapMPCHead .sapMPCHeadActionsToolbar,
-.sapMPCHead .sapMPCHeadNavToolbar{
+.sapMPCHead .sapMPCHeadNavToolbar,
+.sapMPCHead .sapMTB.sapMTB-Transparent-CTX{
 	padding-left: 1rem;
 	background-color: @_sap_m_PlanningCalendarHeader_Background;
 }

package/src/sap/m/themes/base/RadioButton.less

@@ -3,6 +3,8 @@
 /* Base theme                         */
 /* ================================== */
 
+@_sap_m_Radio_Button_Read_Only_fill: @sapUiContentNonInteractiveIconColor;
+
 .sapMRb {
 	height: 3rem;
 	float: left;
@@ -139,7 +141,7 @@
 	}
 
 	&.sapMRbSel .sapMRbBInn {
-		fill: @sapUiContentNonInteractiveIconColor;
+		fill: @_sap_m_Radio_Button_Read_Only_fill;
 		stroke: none;
 	}
 }

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

@@ -4,7 +4,6 @@
 /* ================================== */
 
 @_sap_m_SearchField_Height: 3rem;
-@_sap_m_SearchField_FormHeight: 2.5rem;
 @_sap_m_SearchField_ButtonSize: 2.375rem;
 @_sap_m_SearchField_ButtonFontSize: 1.125rem;
 @_sap_m_SearchField_CompactButtonLineHeight: 1.5rem;
@@ -86,7 +85,8 @@ input.sapMSFI[type="search"]:focus {
 .sapMSFF {
 	display: flex;
 	box-sizing: border-box;
-	height: @_sap_m_SearchField_FormHeight;
+	height: @sapUiElementHeight;
+	box-shadow: @sapUiFieldShadow;
 	border: @_sap_m_SearchField_Border;
 	background: @sapUiFieldBackgroundStyle;
 	background-color: @sapUiFieldBackground;
@@ -108,6 +108,11 @@ input.sapMSFI[type="search"]:focus {
 
 :not(.sapMSFDisabled) > .sapMSFF:hover {
 	border-color: @sapUiFieldHoverBorderColor;
+	box-shadow: @sapUiFieldHoverShadow;
+}
+
+:not(.sapMSFDisabled) > .sapMSFF:active {
+	background: @sapUiFieldFocusBackground;
 }
 
 .sapMSFI {
@@ -203,6 +208,11 @@ input.sapMSFI[type="search"]:focus {
 	display: none;
 }
 
+/* Suggestion Item Description */
+.sapMSFSItemDescr {
+	padding-inline-start: 0.5rem;
+}
+
 /* Compact size */
 .sapUiSizeCompact {
 
@@ -213,7 +223,7 @@ input.sapMSFI[type="search"]:focus {
 	}
 
 	.sapMSFF {
-		height: 1.625rem;
+		height: @sapUiElementCompactHeight;
 		padding-left: @_sap_m_SearchField_Compact_FormPaddingLeft;
 	}