@openui5/sap.m 1.107.1 → 1.108.0

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

@@ -14,7 +14,6 @@
     box-sizing: border-box;
     user-select: none;
     vertical-align: top;
-    cursor: pointer;
     .sapMGTHdrContent {
         padding: 0;
         height: 3rem;
@@ -22,13 +21,17 @@
         .sapMText{
             font-size: 1rem;
             font-weight: 700;
-            color: @sapTile_TitleTextColor;
+            color: @sapTile_TitleTextColor !important;
             line-height: 1.5rem;
             cursor: pointer;
         }
     }
 }
 
+.sapMAT.sapMATHideActionButton {
+    height: 19.625rem;
+ }
+
 .sapMAT:hover {
     background-color: @sapTile_Hover_Background;
     box-shadow:  @sapContent_Shadow2;
@@ -44,6 +47,11 @@
     outline: none;
 }
 
+.sapMAT.sapMATAutoPointer {
+    .sapMText {
+        cursor: auto !important;
+    }
+}
 // ToDo card Styles
 
 .sapMAT.sapMToDoCard {
@@ -52,6 +60,7 @@
         margin-bottom: 0.75rem;
     }
     .sapMATC {
+    height: 14.375rem;
      overflow: hidden;
      .sapMTilePriorityValue {
          font-size: 0.875rem;
@@ -73,7 +82,7 @@
      .sapMContainer {
              display: flex;
              flex-direction: column;
-             gap: 0.875rem;
+             gap: 1rem;
          .sapMElementWrapper {
              display: flex;
              flex-direction: column;
@@ -106,17 +115,23 @@
     }
     .sapMATActionModeContainer {
      position: absolute;
-     bottom: 1rem;
+     bottom: 0.9rem;
      right: 1rem;
     }
+    &.sapMATHideActionButton {
+        .sapMATActionModeContainer {
+            display: none;
+        }
+    }
  }
 
- .sapMAT.sapMToDoCard:focus {
+ .sapMAT:focus {
     .sapMATFocusDiv{
         position: absolute;
         border: 2px solid @sapContent_FocusColor;
         border-radius:  1rem;
         inset: 0px;
+        pointer-events: none;
     }
  }
 
@@ -124,6 +139,7 @@
 
 .sapMAT.sapMATSituationCard{
     border-radius: 1.25rem;
+    overflow: hidden;
     .sapMGTHdrContent {
         display: flex;
         flex-direction: row;
@@ -167,25 +183,29 @@
             height: inherit;
             .sapMTileCntContent{
                 margin-top: 0;
-                height: fit-content;
                 padding: 0;
                 .sapMFT{
+                    height: inherit;
                     span{
                         color: @sapTextColor;
-                        white-space: pre-wrap;
+                        white-space: initial;
+                        word-break: break-all;
                         display: -webkit-box;
-                        -webkit-line-clamp: 3;
+                        -webkit-line-clamp: 16;
                         -webkit-box-orient: vertical;
-                        height: 3rem;
+                        height: fit-content;
                         line-height: 1rem;
                         overflow: hidden;
                         text-overflow: ellipsis;
                         font-weight: 400;
                         font-size: 0.875rem;
                         margin-bottom: 0.75rem;
+                        max-height: 16rem;
                     }
                     p + span {
                         margin-bottom: 1rem;
+                        -webkit-line-clamp: 14;
+                        max-height: 14rem;
                     }
                     p {
                         white-space: nowrap;
@@ -202,6 +222,8 @@
                     }
                     p:not(.sapMbrPresent) {
                         margin-bottom: 0.75rem;
+                        white-space: initial;
+                        word-break: break-all;
                     }
                 }
             }
@@ -212,6 +234,21 @@
             }
         }
     }
+    &.sapMATHideActionButton {
+        .sapMTileCntContent {
+            .sapMFT {
+                span {
+                    -webkit-line-clamp: 14 !important;
+                }
+                p + span {
+                    -webkit-line-clamp: 12 !important;
+                }
+            }
+        }
+        .sapMGTActionModeContainer {
+            display: none;
+        }
+    }
 }
 
 .sapMAT.sapMATSituationCard:focus {
@@ -220,6 +257,10 @@
         border: 2px solid @sapContent_FocusColor;
         border-radius:  1.25rem;
         inset: 0px;
+        pointer-events: none;
+    }
+    .sapMATFocusDiv{
+        border-radius:  1.25rem;
     }
  }
 
@@ -236,4 +277,20 @@
             flex-grow: 0;
         }
     }
-}
+}
+
+.sapMAT.sapMATStateLoading.sapMATHideActionButton {
+    .sapMGTContentShimmerPlaceholderItem {
+        height: 17.5rem;
+        justify-content: space-evenly;
+        padding: 0px;
+        .sapMGTContentShimmerPlaceholderRows {
+                .sapMGTContentShimmerPlaceholderItemHeader,.sapMGTContentShimmerPlaceholderItemText {
+                    margin-top: 0;
+                }
+                .sapMGTContentShimmerPlaceholderItemText {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }

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

@@ -0,0 +1,38 @@
+.sapMBtn .sapMBtnAdditionalTextContent .sapMBtnText {
+    flex-direction: column;
+    font-size: 0.875rem;
+}
+
+.sapMBtnAdditionalTextContent .sapMBtnContentAddText:not(.sapMBtnActive) {
+    width: 100%;
+    float: left;
+    color: @sapUiContentLabelColor;
+    font-size: @sapMFontSmallSize;
+}
+
+ .sapMBtn:hover > .sapMBtnAdditionalTextContent.sapMBtnTransparent.sapMBtnHoverable:not(.sapMBtnActive):not(.sapMToggleBtnPressed) .sapMBtnContentAddText {
+    color: @sapUiContentLabelColor;
+}
+
+.sapMBtnAdditionalTextContent .sapMBtnContent {
+    line-height: 1.125rem;
+}
+
+:not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive .sapMBtnContentAddText {
+	background-image: none;
+	background-color: @sapUiButtonActiveBackground;
+	border-color:     @sapUiButtonActiveBorderColor;
+	color:            @sapUiButtonActiveTextColor;
+	text-shadow:      none;
+}
+
+.sapMBtnAdditionalTextContent .sapMBtnContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: normal;
+}
+
+.sapUiSizeCompact .sapMBtnAdditionalTextContent .sapMBtnContent {
+    line-height: 0.8125rem;
+}

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

@@ -55,6 +55,10 @@
 	}
 }
 
+.sapFAvatarHiddenIcon {
+	display: none;
+}
+
 .sapFAvatarColorTransparent {
 	background-color: transparent;
 

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

@@ -34,34 +34,35 @@
 	min-width: @_sap_m_Carousel_MinWidth;
 }
 
-.sapMCrsl:focus {
+.sapMCrslItem:focus {
+	position: relative;
+}
+
+.sapMCrslItem:focus,
+.sapMCrslNoDataItem:focus {
 	outline: none;
 
-	&:before,
-	&:after {
+	&::before,
+	&::after {
 		position: absolute;
 		content: " ";
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		z-index: 2;
 		pointer-events: none;
+		z-index: 2;
 	}
 
 	&::before {
 		border: @_sap_m_Carousel_ContrastFocusBorder;
 	}
+
 	&::after {
 		border: @_sap_m_Carousel_FocusBorder;
 	}
 }
 
-//show the left and right arrows when the carousel is focused
-.sapMCrsl:focus .sapMCrslHud .sapMCrslArrow {
-	opacity: 0.3;
-}
-
 .sapMCrsl.sapMCrslLeft {
 	text-align: left;
 }
@@ -272,23 +273,54 @@ html[data-sap-ui-animation='off'] .sapMCrslInner {
 	border: 1px solid @_sap_m_Carousel_BulletInactiveBorderColor;
 }
 
-// 2rem indicator height + 1px border
-.sapMCrslTopOffset .sapMCrslItem {
-	padding-top: calc(~"2rem + 1px");
-}
+// Page indicator at the top
+.sapMCrslTopOffset {
+	.sapMCrslItem {
+		padding-top: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
+	
+		&:focus {
+			&::before,
+			&::after {
+				top: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
+			}
+		}
+	}
 
-// 3.5rem indicator height + 1px border
-.sapMCrslTopOffset.sapMCrslTopArrowsOffset .sapMCrslItem
-{
-	padding-top: calc(~"3.5rem + 1px");
+	&.sapMCrslTopArrowsOffset .sapMCrslItem {
+		padding-top: calc(~"3.5rem + 1px");
+	
+		&:focus {
+			&::before,
+			&::after {
+				top: calc(~"3.5rem + 1px");
+			}
+		}
+	}
 }
 
-.sapMCrslBottomOffset .sapMCrslItem {
-	padding-bottom: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
-}
+// Page indicator at the bottom
+.sapMCrslBottomOffset {
+	.sapMCrslItem {
+		padding-bottom: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
+	
+		&:focus {
+			&::before,
+			&::after {
+				bottom: calc(@_sap_m_Carousel_ControlsNoArrowsHeight ~"+" 1px);
+			}
+		}
+	}
 
-.sapMCrslBottomOffset.sapMCrslBottomArrowsOffset .sapMCrslItem {
-  padding-bottom: calc(~"3.5rem + 1px");
+	&.sapMCrslBottomArrowsOffset .sapMCrslItem {
+		padding-bottom: calc(~"3.5rem + 1px");
+	
+		&:focus {
+			&::before,
+			&::after {
+				bottom: calc(~"3.5rem + 1px");
+			}
+		}
+	}
 }
 
 .sapMCrslControlsContainer {
@@ -502,14 +534,6 @@ html[data-sap-ui-animation='off'] {
 
 /* extra bits */
 
-/* captions */
-.sapMCrslCaption {
-	margin: 0;
-	padding: 0.625rem;
-	height: auto;
-	text-align: center;
-}
-
 .sapMCrslControls.sapMCrslControlsTop,
 .sapMCrslControlsNoArrows.sapMCrslControlsTop {
 	background: @sapUiPageFooterBackground;
@@ -530,9 +554,12 @@ html[data-sap-ui-animation='off'] {
 	overflow: hidden;
 }
 
-.sapMCrsl:hover .sapMCrslHud .sapMCrslArrow {
-	opacity: 1;
-	display: block;
+.sapMCrsl:hover,
+.sapMCrslShowArrows {
+	.sapMCrslHud .sapMCrslArrow {
+		opacity: 1;
+		display: block;
+	}
 }
 
 html.sap-desktop {
@@ -566,4 +593,8 @@ html.sap-desktop {
 .sapMCrslPrev .sapUiIcon:focus,
 .sapMCrslNext .sapUiIcon:focus {
 	outline: none;
+}
+
+.sapMCrslDummyArea {
+	position: fixed;
 }

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

@@ -11,6 +11,10 @@
 	.sapMTCMenuContainerWrapper {
 		height: 100%;
 		overflow: hidden;
+
+		.sapUiRespGrid {
+			width: auto;
+		}
 	}
 }
 
@@ -38,8 +42,4 @@
 		align-self: center;
 		text-align: end;
 	}
-}
-
-.sapMPopover .sapUiRespGrid {
-	width: auto !important;
 }

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

@@ -387,7 +387,7 @@ html.sap-desktop .sapMDialog {
 		top: 0;
 	}
 
-	& > .sapMDialogTitle:focus {
+	& > .sapMDialogTitle .sapMDialogTitleGroup:focus {
 		outline: none;
 
 		&::after {

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

@@ -1881,46 +1881,112 @@ html[data-sap-ui-browser*='ff'] {
 	}
 }
 
-@media (min-width:320px) and (max-width:599px){
-    .sapMGT.sapMGTOneByOne {
-        width: 9rem;
-        height: 9rem;
+@media (min-width:320px) and (max-width:600px){
+		.sapMGT.sapMGTOneByOne {
+			width: 12.875rem;
+			height: 7.8125rem;
+			.sapMGTSubHdrTxt {
+				.sapMTextMaxLine {
+					-webkit-line-clamp: 1 !important;
+				}
+			}
+		}
 		.sapMBtnBase.sapMGTMoreIcon{
 			.sapMBtnIcon{
 				bottom: 0.7rem;
 			}
 		}
-    }
-}
+	}
+
 @media (min-width:600px) {
-    .sapMGT.sapMGTOneByOne {
-        width: 7rem;
-        height: 7rem;
+	.sapMGT.sapMGTOneByOne {
+		width: 11.875rem;
+		height: 8rem;
 		.sapMBtnBase.sapMGTMoreIcon{
 			.sapMBtnIcon{
 				bottom: 0.3rem;
 			}
 		}
-    }
+	}
 }
 .sapMGT.sapMGTOneByOne {
-    border-radius: @sapTile_BorderCornerRadius;
-    border: none;
+	border-radius: @sapTile_BorderCornerRadius;
+	border: none;
+	.sapMGTIconWrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 0.5rem;
+		.sapMGTHdrContent {
+			padding: 0 0.5rem;
+			display: flex;
+			flex-direction: column;
+			height: fit-content;
+			align-items: center;
+			.sapMGTHdrTxt {
+				max-height: 2.74rem;
+				height: 2rem;
+				display: flex;
+				align-items: end;
+				line-height: 1rem;
+				word-break: break-word;
+			}
+		}
+	}
+	.sapMGTSubHdrTxt {
+		margin: 0 0.5rem 0 0.5rem;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		white-space: initial;
+		.sapMText {
+			font-weight: 400;
+			color: @sapUiContentContrastTextColor;
+			white-space: initial;
+			text-align: center !important;
+		}
+	}
 }
 
-.sapMGTHdrContent.sapMGTOneByOne {
-    height: 3.625rem;
-	padding-top: 0;
-	display: flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
+.sapMGT.sapMGTOneByOne.sapMGTNoSubHeader {
+	.sapMGTIconWrapper {
+		.sapMGTHdrContent {
+			&::marker {
+				color: transparent;
+			}
+			height: 2rem;
+			position: relative;
+			display: list-item;
+			line-height: 0.6;
+			.sapMGTHdrTxt {
+				height: inherit;
+				max-height: none;
+				overflow: visible;
+				justify-content: center;
+			}
+		}
+	}
+}
+
+.sapMGT.sapMGTOneByOne.sapMGTNoSubHeader.sapMTileSmallPhone {
+	.sapMGTIconWrapper {
+		.sapMGTHdrContent {
+			overflow: initial;
+			.sapMGTHdrTxt {
+				.sapMTextMaxLine {
+					-webkit-line-clamp: 3 !important;
+				}
+			}
+		}
+	}
 }
 
 .sapMGTHdrContent.sapMGTOneByOne > .sapMGTHdrTxt > .sapMText{
 	font-size: 0.875rem;
 	color: @sapUiContentContrastTextColor;
-    text-align: center !important;
+	text-align: center !important;
+	white-space: initial;
+	font-weight: 700;
 }
 
 .sapMGTArticleMode {
@@ -2109,7 +2175,7 @@ html[data-sap-ui-browser*='ff'] {
 		padding: 0 0.5rem;
 	}
 	.sapMGTHdrTxt > .sapMText {
-		text-shadow: @sapUiContentContrastTextShadow;
+		text-shadow: none;
 	}
 	.sapMGTOneByOneIconLoaded {
 		margin-top: -1rem;
@@ -2173,6 +2239,9 @@ html[data-sap-ui-browser*='ff'] {
 	align-items: flex-end;
 	padding-top: 1rem;
 	justify-content: center;
+	.sapUiIcon {
+		font-size: 1.25rem !important;
+	}
 }
 
 .sapMGTTwoByHalfIcon {
@@ -2207,22 +2276,44 @@ html[data-sap-ui-browser*='ff'] {
 	.sapMGTHdrContent {
 		height:auto;
 		overflow: auto;
-		justify-content: start;
-		padding: 1rem 0.5rem 1rem 0;
+		padding-right: 0;
 	}
 }
 
 .sapMGTOneByOne.sapMGTIconMode.sapMTileSmallPhone,
 .sapMGTOneByOne.sapMGTIconMode.sapMTResponsiveIconMode {
-	width: 9rem;
+	width: 14.5rem;
+	height: 5.375rem;
 	display: flex;
-	align-items: center;
-	.sapMGTOneByOneIcon{
-		padding: 0;
-		margin: 0 0.75rem 0 1rem;
+	flex-direction: column;
+	.sapMGTIconWrapper {
+		margin: 1rem 0.5rem 0.5rem 0.5rem;
+		align-items: center;
+		flex-direction: row;
+		gap: 0;
+		.sapMGTOneByOneIcon{
+			padding: 0;
+		}
+		.sapMGTHdrTxt{
+			align-items: center;
+			.sapMText {
+				text-align: left !important;
+			}
+		}
 	}
-	.sapMGTHdrContent .sapMText {
-		text-align: left !important;
+	.sapMGTSubHdrTxt {
+		padding: 0 0.5rem;
+		margin: 0;
+		flex-direction: row;
+		align-items: flex-start;
+		.sapMText {
+			font-weight: 400;
+			white-space: initial;
+			text-align: left !important;
+			.sapMTextMaxLine {
+				-webkit-line-clamp: 1 !important;
+			}
+		}
 	}
 }
 

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

@@ -10,13 +10,19 @@
 	padding: 1rem;
 	box-sizing: border-box;
 
+	.sapMIllustratedMessageMainContent {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		min-height: 0;
+	}
+
 	figcaption {
 		margin: inherit;
 	}
 
 	.sapMTitle {
 		display: block;
-		font-size: @sapMFontHeader5Size;
 	}
 
 	.sapMIllustratedMessageDescription {
@@ -42,6 +48,42 @@
 		}
 	}
 
+	&.sapMIllustratedMessage-Dot {
+		padding: 0.5rem;
+
+		.sapMIllustratedMessageMainContent {
+			display: inline-flex;
+			justify-content: center;
+			flex-direction: row;
+		}
+
+		figcaption {
+			max-width: 18rem;
+		}
+
+		.sapMIllustration {
+			flex-shrink: 0;
+			width: 2.813rem;
+			height: 2.813rem;
+			margin: 0.5rem 0;
+		}
+
+		.sapMTitle {
+			margin-top: 0.5rem;
+			margin-bottom: 0.25rem;
+		}
+
+		.sapMIllustratedMessageDescription {
+			margin-bottom: 0.5rem;
+		}
+
+		.sapMIllustratedMessageAdditionalContent {
+			margin-top: 0.25rem;
+			margin-bottom: 0.5rem;
+		}
+	}
+
+
 	&.sapMIllustratedMessage-Spot {
 		figcaption {
 			max-width: 16.25rem;

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

@@ -4,6 +4,7 @@
 /* ============================ */
 
 @_sap_m_Label_AsteriskWidth: 6px;
+@_sap_m_Label_ColonWidth: 4px;
 
 .sapMLabel {
 	color: @sapUiContentLabelColor;
@@ -32,6 +33,10 @@
 	max-width: calc(~"100% - 0.125rem - @{_sap_m_Label_AsteriskWidth}");
 }
 
+.sapMLabel.sapMLabelRequired.sapMLabelShowColon:not(.sapMLabelWrapped) .sapMLabelTextWrapper {
+	max-width: calc(~"100% - 0.125rem - @{_sap_m_Label_AsteriskWidth} - @{_sap_m_Label_ColonWidth}");
+}
+
 .sapMLabelBold,
 .sapMLabel.sapMLabelBold {
 	font-weight: bold;