@openui5/sap.m 1.125.0 → 1.126.0

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

@@ -18,7 +18,7 @@
     text-decoration: none;
     .sapMGTHdrContent {
         padding: 0;
-        height: 3rem;
+        height: 3.25rem;
         overflow: hidden;
         margin-bottom: 0.75rem;
         .sapMText{
@@ -32,7 +32,8 @@
             display: flex;
             flex-direction: column;
             height: 100%;
-            justify-content: space-between;
+            justify-content: center;
+            gap: 0.25rem;
             .sapMGTTitle {
                 line-height: 1.2;
                 font-size: 0.875rem;
@@ -56,7 +57,7 @@
     }
     .sapMGTActionModeContainer {
         position: absolute;
-        bottom: 0.9em;
+        bottom: 0.25em;
         right: 1rem;
     }
     .sapMGTContent {
@@ -181,7 +182,7 @@
         align-items: center;
         gap: 0.5rem;
         height: 3.25rem;
-        margin-bottom: 1rem;
+        margin-bottom: 0.75rem;
         .sapMGTHdrIconImage.Neutral {
             color:  @sapUiNeutralText;
         }
@@ -210,6 +211,24 @@
         }
         .sapMATIconFrame {
             flex-shrink: 0;
+
+            &.sapMGTIconFrameBadge{
+                align-self: start;
+
+                .sapFAvatarBadgeIconActiveArea {
+                    height: 3rem;
+                    width: 3rem;
+
+                    .sapFAvatarBadgeIcon {
+                        height: 1.125rem;
+                        width: 1.125rem;
+
+                        .sapUiIcon {
+                            font-size: 0.75rem;
+                        }
+                    }
+                }
+            }
         }
     }
 }

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

@@ -8,7 +8,7 @@
      .sapMTilePriorityValue {
          font-size: 0.875rem;
          font-weight: 400;
-         margin-bottom: 0.75rem;
+         margin-bottom: 1rem;
          &.High {
              color: @sapNegativeTextColor;
              }

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

@@ -278,7 +278,7 @@ html.sap-tablet .sapMFeedListItem .sapMLnk:focus {
 
 /* Allow image outline(-left) to be rendered completely */
 .sapMFeedListShowSeparatorsAll .sapMFeedListItem {
-	padding-left: 0.0625rem;
+	padding-left: 1rem;
 }
 
 .sapMFeedListItemTitleDiv.sapMLIB {

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

@@ -2720,6 +2720,15 @@ html.sap-desktop .sapMGT.sapMGTTwoByHalf.sapMGTIconMode.HighContrastTile:not(.sa
 	.sapMGTBadgeBackgroundColorInformationBackgroundColor {
 		background-color: @sapInformationBackground;
 	}
+	.sapMGTBadgeBackgroundColorNeutralElementColor {
+		background-color: @sapNeutralElementColor;
+	}
+	.sapMGTBadgeBackgroundColorNeutralBackgroundColor {
+		background-color: @sapNeutralBackground;
+	}
+	.sapMGTBadgeBackgroundColorNeutralBorderColor {
+		background-color: @sapNeutralBorderColor;
+	}
 
 	.sapMGTBadgeColorIndication1 {
 		color: @sapUiIndication1;
@@ -2769,6 +2778,15 @@ html.sap-desktop .sapMGT.sapMGTTwoByHalf.sapMGTIconMode.HighContrastTile:not(.sa
 	.sapMGTBadgeColorInformationBackgroundColor {
 		color: @sapInformationBackground
 	}
+	.sapMGTBadgeColorNeutralElementColor {
+		color: @sapNeutralElementColor
+	}
+	.sapMGTBadgeColorNeutralBackgroundColor {
+		color: @sapNeutralBackground
+	}
+	.sapMGTBadgeColorNeutralBorderColor {
+		color: @sapNeutralBorderColor
+	}
 
 	.sapMGTBadgeBorderColorIndication1 {
 		border-color: @sapUiIndication1;
@@ -2818,6 +2836,15 @@ html.sap-desktop .sapMGT.sapMGTTwoByHalf.sapMGTIconMode.HighContrastTile:not(.sa
 	.sapMGTBadgeBorderColorInformationBackgroundColor {
 		border-color: @sapInformationBackground
 	}
+	.sapMGTBadgeBorderColorNeutralElementColor {
+		border-color: @sapNeutralElementColor
+	}
+	.sapMGTBadgeBorderColorNeutralBackgroundColor {
+		border-color: @sapNeutralBackground
+	}
+	.sapMGTBadgeBorderColorNeutralBorderColor {
+		border-color: @sapNeutralBorderColor
+	}
 
 	.sapMGTBadge {
 		.sapMGTBadgeOverlay {
@@ -2869,6 +2896,15 @@ html.sap-desktop .sapMGT.sapMGTTwoByHalf.sapMGTIconMode.HighContrastTile:not(.sa
 			&.sapMGTBadgeBackgroundColorInformationBackgroundColor {
 				background-color: @sapInformationBackground;
 			}
+			&.sapMGTBadgeBackgroundColorNeutralElementColor {
+				background-color: @sapNeutralElementColor;
+			}
+			&.sapMGTBadgeBackgroundColorNeutralBackgroundColor {
+				background-color: @sapNeutralBackground;
+			}
+			&.sapMGTBadgeBackgroundColorNeutralBorderColor {
+				background-color: @sapNeutralBorderColor;
+			}
 		}
 	}
 }

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

@@ -72,6 +72,10 @@
 	padding: 0 1rem;
 }
 
+.sapMGHLI > .sapMGHLICell > .sapMLIBContent:first-child {
+	margin: 0;
+}
+
 /* group headers should have background color grey so that they are distinguishable from ListItems */
 .sapMListTbl .sapMGHLI.sapMLIB:not(.sapMLIBActive):not(.sapMLIBSelected):not(:hover),
 .sapMListTbl .sapMGHLI.sapMLIB.sapMLIBTypeInactive {

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

@@ -277,7 +277,6 @@ html.sap-phone .sapMListInsetBG > .sapMListSwp {
 .sapMSticky > .sapMListHdr,
 .sapMSticky > .sapMListInfoTBarContainer {
 	position: sticky;
-	position: -webkit-sticky;
 }
 
 /* sticky headerToolbar/headerText background when transparent */
@@ -311,6 +310,20 @@ html.sap-phone .sapMListInsetBG > .sapMListSwp {
 	top: @sapUiElementLineHeight;
 }
 
+/* handle transparent background on rounded corners to not show underlaying elements on scrolling */
+._sap_m_ListBase_Rounded_HeaderToolbarMixin() {
+	.sapMSticky:has(> .sapMListHdr)::before {
+		position: sticky;
+		content: "";
+		display: block;
+		background: @sapUiGroupContentBackground;
+		height: @sapUiElementBorderCornerRadius;
+		margin-bottom: -@sapUiElementBorderCornerRadius; /* prevent new empty space above sticky element */
+		top: 0;
+		z-index: 3;
+	}
+}
+
 /* Compact size */
 .sapUiSizeCompact .sapMListNoData {
 	min-height: 2rem;

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

@@ -18,10 +18,19 @@
 	display: flex;
 
 	> .sapMRbBLabel:not(.sapMLabelNoText) {
-		padding-right: 0.125rem;
+		padding-right: 0.125rem; // if this is changed, please change in RadioButtonGroup too for usage in Form
 	}
 }
 
+.sapMRb  .sapMLabel.sapMRbBLabel {
+	align-items: center;
+	display: inline-flex;
+}
+
+.sapMRb.sapMRbWrapped {
+	height: auto;
+}
+
 .sapMILI-CTX .sapMRb {
 	float: right;
 }
@@ -101,6 +110,13 @@
 	pointer-events: none;
 }
 
+.sapMRbHasLabel.sapMRb.sapMRbWrapped:focus:before {
+	bottom: 0.375rem;
+	top: 0.375rem;
+	left: 0.375rem;
+	right: 0;
+}
+
 .sapMRbB .sapMRbBInn {
 	transform: translate(0.675rem, 0.675rem);
 	stroke: transparent;
@@ -176,6 +192,9 @@
 	.sapMRb {
 		height: 2rem;
 	}
+	.sapMRb.sapMRbWrapped {
+		height: auto;
+	}
 
 	.sapMRbSvg {
 		height: 1rem;
@@ -216,10 +235,23 @@
 		height: 2rem;
 	}
 
+	.sapMRb> .sapMRbBLabel.sapMLabelWrapped {
+		line-height: normal;
+		height: auto;
+		padding-block: 0.5rem;
+		padding-inline-end: 1px;
+	}
+
 	.sapMRbHasLabel.sapMRb:focus:before {
 		right: 0;
 	}
 
+	.sapMRbHasLabel.sapMRb.sapMRbWrapped:focus:before {
+		bottom: 0;
+		top: 0.25rem;
+		left: 0.25rem;
+	}
+
 	/* Right to left */
 	.sapMRbG[dir=rtl] .sapMRbHasLabel.sapMRb:focus:before  {
 		left: 0;
@@ -289,4 +321,17 @@ html[dir="rtl"] {
 		line-height: 1.5rem;
 		height: 1.5rem;
 	}
+
+	.sapMRb> .sapMRbBLabel.sapMLabelWrapped {
+		line-height: normal;
+		height: auto;
+	}
 }
+
+.sapMRb> .sapMRbBLabel.sapMLabelWrapped {
+	line-height: normal;
+	display: flex;
+	height: auto;
+	padding-block: 0.75rem;
+	padding-inline-end: 1px;
+}

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

@@ -56,7 +56,6 @@
 .sapMRbG .sapMRbBLabel {
 	margin-left: 0;
 	padding-left: @_sap_m_RadioButtonGroup_PaddingLeftLabel;
-	display: inline-block;
 }
 
 .sapMRbG .sapMRbHasLabel .sapMRbBOut {
@@ -80,11 +79,15 @@
 			padding-left: @_sap_m_RadioButtonGroup_PaddingLeftLabel_Form;
 		}
 
-		.sapMRbGCol{
+		.sapMRbBLabel:not(.sapMLabelNoText) {
+			padding-right: 0.125rem;
+		}
+
+		> .sapMRbGCol{
 			padding-left: 0.5rem; // to align to spaced between Form cells
 		}
 
-		.sapMRbGCol:first-child{
+		> .sapMRbGCol:first-child{
 			padding-left: 0;
 		}
 	}

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

@@ -119,9 +119,9 @@ html.sap-desktop .sapMSPCMonthDay.sapMSPCMonthDayToday:focus .sapMSPCMonthNowMar
 	right: 0;
 	padding-right: 0.125rem;
 	text-align: end;
-
 	height: 2.125rem;
 	line-height: 2.125rem;
+	pointer-events: auto;
 }
 
 .sapMSPCMonthGrid .sapMSinglePCPlaceholder {

package/src/sap/m/themes/sap_hcb/base_AbstractContainer.less

@@ -0,0 +1,31 @@
+.sapUiMAbstractContainerContent {
+
+}
+
+//Change background color for the container control
+.sapUiMAbstractContainerContent .sapMITB {
+    padding-top: 1.75rem;
+}
+
+//Remove padding to align the ITB with the rest of the p13n related controls (left aligned)
+.sapUiMAbstractContainerContent .sapMITH {
+    padding: 0
+}
+
+.sapUiMAbstractContainerContent .wrapperDefaultList .sapMLIB{
+    padding: 1.5rem;
+}
+
+.sapMAbstractContainer .sapMPage {
+	display: flex;
+	flex-direction: column;
+
+	&>section {
+		position: relative;
+		top: 0 !important; // we need to overwrite the top argument for a section when using the AbstractContainer, otherwise top is overriden by other styles
+	}
+
+	>footer:not(.sapUiHidden) {
+		position: relative;
+	}
+}

package/src/sap/m/themes/sap_hcb/base_ActionListItem.less

@@ -0,0 +1,66 @@
+/* ===================================== */
+/* CSS for control sap.m/ActionListItem  */
+/* Base theme                            */
+/* ===================================== */
+
+.sapMALI {
+	display: -webkit-box;
+	display: flex;
+	height: 2.75rem;
+}
+
+.sapMALIText {
+	-webkit-box-flex: 1;
+	flex: auto;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 3rem;
+	display: block;
+	text-align: center;
+	color: @sapUiButtonTextColor;
+}
+
+.sapMALI > .sapMLIBContent {
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-pack: center;
+	justify-content: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.sapMALI .sapMLIBUnread,
+.sapMALI .sapMLIBSelectS,
+.sapMALI .sapMLIBSelectM,
+.sapMALI .sapMLIBSelectD {
+	display: none;
+}
+
+/*The active indicator of the list is not specific enough to overwrite this style*/
+.sapMList .sapMLIB.sapMALI:not(.sapMLIBActive) {
+	background: @sapUiButtonActionSelectBackground;
+	border-color: @sapUiButtonActionSelectBorderColor;
+}
+
+html.sap-desktop .sapMList .sapMLIB.sapMALI:not(.sapMLIBActive) {
+	background: @sapUiButtonActionSelectBackground;
+	border-color: @sapUiButtonActionSelectBorderColor;
+}
+
+html.sap-desktop .sapMList .sapMLIB.sapMALI:hover:not(.sapMLIBActive) > .sapMLIBContent {
+	background: @sapUiButtonLiteActionSelectHoverBackground;
+}
+
+/* Compact size */
+.sapUiSizeCompact .sapMALI {
+	height: 2rem;
+}
+
+.sapUiSizeCompact .sapMALI > .sapMLIBContent {
+	line-height: 2rem;
+}
+
+.sapUiSizeCompact .sapMALIText {
+	font-size: @sapMFontMediumSize;
+}

package/src/sap/m/themes/sap_hcb/base_ActionSelect.less

@@ -0,0 +1,27 @@
+/* =================================== */
+/* CSS for control sap.m/ActionSelect  */
+/* Base theme                          */
+/* =================================== */
+
+/* ----------------------------- */
+/* button                        */
+/* ----------------------------- */
+
+.sapMActionSelectPicker .sapMBtn {
+	display: block;
+	width: 100%;
+	height: 2.5rem;
+	padding: 0;
+	border-top-width: 0;
+	border-bottom-width: 1px;
+	text-shadow: @sapUiContentTextShadow;
+}
+
+.sapMActionSelectPicker .sapMBtnInner {
+	border: 1px solid @sapUiListBorderColor;
+	overflow: hidden;
+}
+
+.sapMActionSelectPicker .sapMSelectListItemBaseSelected.sapMActionSelectItemWithoutFocus {
+	outline: none;
+}

package/src/sap/m/themes/sap_hcb/base_ActionSheet.less

@@ -0,0 +1,122 @@
+/* ================================== */
+/* CSS for control sap.m/ActionSheet  */
+/* Base theme                         */
+/* ================================== */
+
+/* Buffer width for the scroll bar */
+@_sap_m_Popover_Scroll_Width_Buffer: 20px;
+
+.sapMActionSheetDialog.sapMDialog {
+	top: auto !important; // We need to overwrite the inline top style
+	bottom: 0;
+	width: 100%;
+	max-width: 20rem;
+	border-radius: 0.25rem 0.25rem 0 0;
+
+	&.sapMDialogPhone {
+		overflow: visible;
+	}
+}
+
+.sapMActionSheet:focus{
+	outline: none;
+}
+
+.sapMActionSheetDialog .sapMDialogScroll {
+	display: block;
+}
+
+.sapMActionSheetButton > .sapMBtnInner {
+	text-align: start;
+}
+
+.sapMActionSheetButton.sapMBtn:not(.sapMActionSheetCancelButton) > .sapMBtnInner {
+	justify-content: flex-start;
+}
+
+.sapMActionSheetDialogWithTitle .sapMBarMiddle .sapMBarPH {
+	// The left/right padding should be 1rem, but there is already 0.25rem right/left padding from the Dialog title
+	padding: 0 0.75rem 0.5rem;
+	justify-content: flex-start;
+}
+
+/* ====== BEGIN ====== */
+/*Style for ActionSheet shown as a dialog sliding in from bottom*/
+/* ====== ====== ===== */
+
+.sapMDialog.sapMActionSheetDialog {
+	background-color: transparent;
+	box-shadow: none;
+	border: none;
+}
+
+.sapMDialog.sapMActionSheetDialog > section {
+	background-color: @sapUiGroupContentBackground;
+	border-radius: 0.25rem 0.25rem 0 0;
+}
+
+.sapMActionSheetDialog .sapMActionSheetButton {
+	width: 100%;
+}
+
+.sapMActionSheetDialog .sapMActionSheetButton.sapMActionSheetCancelButton > .sapMBtnInner {
+	text-align: center;
+}
+
+.sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
+	color: contrast(fade(@sapUiBlockLayerBackground, 60), @sapUiGroupTitleTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
+	font-size: @sapMFontMediumSize;
+}
+
+.sapMDialog.sapMActionSheetDialog > .sapMDialogSection {
+	box-shadow: @sapUiShadowLevel1;
+}
+
+.sapMDialog.sapMActionSheetDialog > section {
+	padding: 0.25rem 0.5rem;
+}
+
+.sapMDialog.sapMActionSheetDialog.sapMDialogPhone .sapMIBar.sapMHeader-CTX {
+	background: transparent;
+	box-shadow: none;
+}
+
+/* ====== BEGIN ====== */
+/*Style for ActionSheet shown as a Popover*/
+/* ====== ====== ===== */
+.sapMActionSheetPopover.sapMPopover {
+	box-shadow: @sapUiShadowLevel1;
+}
+
+.sapMActionSheetPopover .sapMActionSheetButton {
+	display: block;
+	width: 100%;
+}
+
+.sapUiSizeCompact {
+	.sapMActionSheetPopover.sapMPopover {
+		.sapMPopoverCont {
+			padding: 0.1875rem 0.375rem;
+			max-height: calc(~"100% - 0.375rem");
+		}
+
+		.sapMActionSheet .sapMActionSheetButton .sapMBtnInner.sapMBtnIconFirst {
+			padding-left: 0.4375rem;
+    		padding-right: 0.4375rem;
+		}
+	}
+}
+
+.sapMActionSheetPopover.sapMPopover {
+	.sapMPopoverCont {
+		padding: 0.25rem 0.5rem;
+		max-height: calc(~"100% - 0.5rem");
+	}
+	&.sapMPopoverVerticalScrollIncluded .sapMPopoverCont {
+		padding: 0.25rem calc(~'0.5rem + ' @_sap_m_Popover_Scroll_Width_Buffer) 0.25rem 0.5rem;
+	}
+}
+
+/* ====== END ====== */
+/*Style for ActionSheet shown as a Popover*/
+/* ====== ====== ===== */