@openui5/sap.f 1.135.0 → 1.136.1

package/src/sap/f/semantic/TitleMainAction.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -19,7 +19,7 @@ sap.ui.define(["./MainAction"], function(MainAction) {
 	* @extends sap.f.semantic.MainAction
 	*
 	* @author SAP SE
-	* @version 1.135.0
+	* @version 1.136.1
 	*
 	* @constructor
 	* @public

package/src/sap/f/shellBar/Accessibility.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([

package/src/sap/f/shellBar/AdditionalContentSupport.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -22,7 +22,7 @@ sap.ui.define([
 
 		/**
 		 * @author SAP SE
-		 * @version 1.135.0
+		 * @version 1.136.1
 		 *
 		 * @private
 		 * @since 1.64

package/src/sap/f/shellBar/CoPilot.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.135.0
+	 * @version 1.136.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/shellBar/CoPilotRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/f/shellBar/ControlSpacer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -23,7 +23,7 @@ sap.ui.define(['sap/ui/core/Control', 'sap/f/shellBar/ControlSpacerRenderer'],
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.135.0
+	 * @version 1.136.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/shellBar/ControlSpacerRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/f/shellBar/Factory.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([

package/src/sap/f/shellBar/ResponsiveHandler.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([

package/src/sap/f/shellBar/Search.js

@@ -1,7 +1,7 @@
 
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -36,7 +36,7 @@ sap.ui.define(['sap/ui/core/Control',
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.135.0
+		 * @version 1.136.1
 		 *
 		 * @constructor
 		 * @private

package/src/sap/f/shellBar/SearchRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

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

@@ -1,12 +1,13 @@
-/* ============================= */
+/* ================================== */
 /* CSS for control sap.f/AvatarGroup  */
-/* Base theme                    */
-/* ============================= */
+/* Base theme                         */
+/* ================================== */
+
 .sapFAvatarGroup {
 	width: 100%;
 	overflow: hidden;
 	padding: 0.0625rem;
-	margin: 0px;
+	margin: 0;
 	display: inline-block;
 	white-space: nowrap;
 	max-width: 100%;
@@ -135,7 +136,9 @@
 }
 
 .sapFAvatarGroupGroup {
+
 	.sapFAvatarGroupItem:not(:last-child) {
+
 		&.sapFAvatarGroupItemXS {
 			margin-right: -0.5rem;
 		}

package/src/sap/f/themes/base/CardBadge.less

@@ -13,7 +13,7 @@
 	max-width: 95%; /* long text will not go outside the card */
 }
 
-.sapUiIntCard .sapFCardBadgePlaceholder .sapMObjStatus:not(.sapMObjStatusShowCustomIcon) {
+.sapUiIntCard .sapFCardBadgePlaceholder .sapMObjStatus {
 
 	.sapMObjStatusIcon {
 		display: initial;

package/src/sap/f/themes/base/CardHeaders.less

@@ -188,6 +188,17 @@
 	}
 }
 
+.sapFCardHeaderInfoSection {
+	padding: 0.5rem 1rem 0.25rem 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.sapFCardHeaderInfoSection:not(:has(+ .sapFCardNumericHeaderNumericPart))  {
+	padding-block-end: 1rem;
+}
+
 .sapFCardHeader.sapFCardNumericHeader {
 
 	.sapFCardNumericHeaderNumericPart {

package/src/sap/f/themes/base/DynamicPageTitle.less

@@ -2,6 +2,7 @@
 /* CSS for control sap.f/DynamicPageTitle  */
 /* Base theme                              */
 /* ======================================= */
+
 .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle,
 .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
 	box-shadow: @sapUiShadowHeader;
@@ -25,11 +26,9 @@
 	min-height: 3rem;
 	padding: 0.5rem 2rem 0.5rem 3rem;
 	display: flex;
-	display: -webkit-flex;
 	flex-direction: column;
-	-webkit-flex-direction: column;
 	box-sizing: border-box;
-	background: @sapUiObjectHeaderBackground;
+	background: var(--sapObjectHeader_Background);
 
 	.sapFDynamicPageToggleHeaderIndicator.sapUiHidden {
 		display: none;
@@ -41,6 +40,7 @@
 	}
 
 	.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
+
 		.sapFDynamicPageTitleMainContent .sapMTB {
 			padding-left: 0.5rem;
 			padding-right: 0.5rem;
@@ -52,8 +52,9 @@
 	}
 
 	html.sap-desktop & {
+
 		&.sapFDynamicPageTitleFocus {
-			outline: 0.0625rem dotted @sapUiContentFocusColor;
+			outline: 0.0625rem dotted var(--sapContent_FocusColor);
 			outline-offset: -0.0625rem;
 		}
 	}
@@ -64,37 +65,30 @@
 
 	.sapFDynamicPageTitleTop {
 		display: flex;
-		display: -webkit-flex;
 		align-items: center;
-		-webkit-align-items: center;
-
 		justify-content: space-between;
-		-webkit-justify-content: space-between;
 
-		&> .sapFDynamicPageTitleTopLeft {
+		& > .sapFDynamicPageTitleTopLeft {
 			min-height: 1rem;
 			width: 75%;
 
-			&> :first-child {
+			& > :first-child {
 				margin: 0;
 			}
 		}
 
-		&> .sapFDynamicPageTitleTopRight {
+		& > .sapFDynamicPageTitleTopRight {
 			width: 25%;
 			display: flex;
-			display: -webkit-flex;
 			align-items: center;
-			-webkit-align-items: center;
 			justify-content: flex-end;
-			-webkit-justify-content: flex-end;
 		}
 
 		&.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
 			width: 100%;
 		}
 
-		&.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight{
+		&.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
 			width: 100%;
 		}
 	}
@@ -102,29 +96,23 @@
 	.sapFDynamicPageTitleMain {
 		position: relative;
 		display: flex;
-		display: -webkit-flex;
 		align-items: flex-start;
-		-webkit-align-items: flex-start;
 		flex-direction: row;
-		-webkit-flex-direction: row;
 		box-sizing: border-box;
 
 		&.sapUiHidden {
 			position: absolute;
 		}
 
-		&> .sapFDynamicPageTitleMainNavigationArea,
-		&> .sapFDynamicPageTitleMainNavigationArea > .sapFDynamicPageTitleMainNavigationAreaInner{
+		& > .sapFDynamicPageTitleMainNavigationArea,
+		& > .sapFDynamicPageTitleMainNavigationArea > .sapFDynamicPageTitleMainNavigationAreaInner {
 			display: flex;
-			display: -webkit-flex;
 			align-items: center;
-			-webkit-align-items: center;
 		}
 	}
 
 	.sapFDynamicPageTitleActionsBar.sapMTB {
 		justify-content: flex-end;
-		-webkit-justify-content: flex-end;
 		overflow: visible;
 	}
 }
@@ -137,76 +125,43 @@
 	margin-left: 0;
 }
 
-/* TODO remove after the end of support for Internet Explorer */
-html[data-sap-ui-browser^="ie"].sap-desktop,
-html[data-sap-ui-browser^="ed"].sap-desktop {
-	.sapFDynamicPageTitleMain {
-		height: 100%; /* fixes IE flexbox item centering issue BCP: 1680351222 */
-	}
-}
+/* Firefox fix due to focus cut out from top and left */
+html[data-sap-ui-browser^='ff'].sap-desktop {
 
-/* IE and Edge ignores outline-offset. Use an overlay: */
-/* TODO remove after the end of support for Internet Explorer */
-html[data-sap-ui-browser^="ie"].sap-desktop,
-html[data-sap-ui-browser^="ed"].sap-desktop {
 	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
 		outline: none;
 		position: relative;
 	}
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
-		content: " ";
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0;
-		top: 0;
-		border: 0.0625rem dashed @sapUiContentFocusColor;
-		pointer-events: none;
-	}
-}
 
-/* Firefox fix due to focus cut out from top and left */
-html[data-sap-ui-browser^="ff"].sap-desktop {
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
-		outline: none;
-		position: relative;
-	}
-	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
-		content: " ";
+	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus::before {
+		content: '';
 		box-sizing: border-box;
 		width: 100%;
 		height: 100%;
 		position: absolute;
 		left: 0;
 		top: 0;
-		border: 0.0625rem dotted @sapUiContentFocusColor;
+		border: 0.0625rem dotted var(--sapContent_FocusColor);
 		pointer-events: none;
 	}
 }
 
-/* ========== */
-/* Title Main */
-/* ========== */
+/* =========== */
+/* Title Main  */
+/* =========== */
 
 /* Heading area */
 .sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
 	display: flex;
-	display: -webkit-flex;
 	align-items: flex-start;
-	-webkit-align-items: flex-start;
 	flex-grow: 1;
-	width: 100%; // to make Edge work
+	width: 100%; /* to make Edge work */
 
 	.sapFDynamicPageTitleMainHeading {
 		display: flex;
-		display: -webkit-flex;
 		align-items: flex-start;
-		-webkit-align-items: flex-start;
 		flex-direction: column;
-		-webkit-flex-direction: column;
 		justify-content: space-between;
-		-webkit-justify-content: space-between;
 		min-width: 0;
 
 		.sapFDynamicPageTitleMainHeadingInner,
@@ -220,17 +175,17 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 		.sapFDynamicPageTitleMainHeadingInner {
 			min-width: 1px;
 			max-width: 100%;
-			color: @sapUiGroupTitleTextColor;
+			color: var(--sapGroup_TitleTextColor);
 			margin-top: 0.1875rem;
 
 			/* Override Title styles, required by VD */
 			.sapMTitle {
-				font-size: @sapMFontHeader3Size;
+				font-size: var(--sapFontHeader3Size);
 			}
 		}
 
 		.sapFDynamicPageTitleMainHeadingSnappedExpandContent {
-			color: @sapUiContentLabelColor;
+			color: var(--sapContent_LabelColor);
 			font-size: @sapMFontMediumSize;
 		}
 
@@ -262,8 +217,8 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 
 	.sapFDynamicPageTitleActionsBar .sapMLabel.sapMLabelMaxWidth,
 	.sapFDynamicPageTitleActionsBar .sapMLnk.sapMLnkMaxWidth {
-		// overwriting the existing max-width constraint of sapMLabel and sapMLnk
-		// because in this context the label/link parent should instead adjust its flex-basis with respect to its content width
+		/* overwriting the existing max-width constraint of sapMLabel and sapMLnk
+		because in this context the label/link parent should instead adjust its flex-basis with respect to its content width */
 		max-width: none;
 	}
   }
@@ -279,8 +234,8 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 /* Tablet Size */
 .sapFDynamicPage-Std-Tablet {
 
-	// Needed because on some high-end phones in landscape mode,
-	// the width of the viewport is bigger than 600 (Tablet breakpoint).
+	/* Needed because on some high-end phones in landscape mode,
+	the width of the viewport is bigger than 600 (Tablet breakpoint). */
 	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
 		padding: 0 0.25rem 0 2rem;
 		min-height: 2rem;
@@ -333,7 +288,9 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 .sapFDynamicPage-Std-Phone {
 
 	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
+
 		.sapFDynamicPageTitleMain {
+
 			.sapFDynamicPageTitleMainContent {
 				padding-bottom: 0;
 			}
@@ -370,4 +327,4 @@ html[data-sap-ui-browser^="ff"].sap-desktop {
 			width: 100%;
 		}
 	}
-}
+}

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

@@ -3,18 +3,18 @@
 /* Base theme                                  */
 /* =========================================== */
 
-// synced with FlexibleColumnLayout.COLUMN_SEPARATOR_WIDTH
+/* synced with FlexibleColumnLayout.COLUMN_SEPARATOR_WIDTH */
 @_sap_f_FCL_SeparatorWidth: 1rem;
-@_sap_f_FCL_SeparatorActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
-@_sap_f_FCL_SeparatorDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
+@_sap_f_FCL_SeparatorActiveDecorationColors: var(--sapHighlightColor), var(--sapHighlightColor);
+@_sap_f_FCL_SeparatorDecorationColors: var(--sapHighlightColor), fade(@sapUiHighlight, 0);
 @_sap_f_FCL_SeparatorBorder: none;
-@_sap_f_FCL_SeparatorHoverIconBorderColor: @sapUiButtonLiteBorderColor;
-@_sap_f_FCL_SeparatorHoverIconBackground: @sapUiButtonLiteBackground;
-@_sap_f_FCL_SeparatorButtonColor: @sapUiContentIconColor;
+@_sap_f_FCL_SeparatorHoverIconBorderColor: var(--sapButton_Lite_BorderColor);
+@_sap_f_FCL_SeparatorHoverIconBackground: var(--sapButton_Lite_Background);
+@_sap_f_FCL_SeparatorButtonColor: var(--sapContent_IconColor);
 
 .sapFFCL {
+
 	&, &.sapMNavItem:not(.sapMNavItemHidden) {
-		display: -webkit-flex;
 		display: flex;
 		width: 100%;
 		height: 100%;
@@ -31,7 +31,7 @@
 		visibility: hidden;
 		box-sizing: border-box;
 
-		// When there is content in a panel, it needs min-width
+		/* When there is content in a panel, it needs min-width */
 		&.sapFFCLColumnActive {
 			visibility: visible;
 		}
@@ -71,9 +71,8 @@
 	color: @_sap_f_FCL_SeparatorButtonColor;
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
-	-moz-user-select: none;
 	user-select: none;
-	background-color: @sapUiShellBackground;
+	background-color: var(--sapShell_Background);
 	box-sizing: border-box;
 }
 
@@ -87,9 +86,11 @@
 }
 
 .sapFFCL.sapFFLActiveResize {
+
 	.sapFFCLOverlay {
 		display: block;
 	}
+
 	.sapFFCLColumnContent {
 		pointer-events: none;
 	}
@@ -147,22 +148,23 @@
 		height: 2rem;
 		line-height: 2rem;
 		position: relative;
-		z-index: 3; // the separator grip must be above the separator so its all area to be clickable/interactive
+		z-index: 3; /* the separator grip must be above the separator so its all area to be clickable/interactive */
 
 		.sapFFCLColumnSeparatorGripIcon {
 			cursor: col-resize;
-			line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth; // center the icon vertically
+			line-height: ~"calc(1.625rem - var(--sapButton_BorderWidth) - var(--sapButton_BorderWidth))"; /* center the icon vertically */
 			box-sizing: border-box;
 			height: 1.625rem;
 			width: 1.5rem;
 			margin-top: 3px;
-			border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
-			border-radius: @sapUiButtonBorderCornerRadius;
-			background: @sapUiButtonLiteBackground;
+			border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+			border-radius: var(--sapButton_BorderCornerRadius);
+			background: var(--sapButton_Lite_Background);
 		}
 	}
 
 	&:hover {
+
 		.sapFFCLColumnSeparatorDecorationBefore,
 		.sapFFCLColumnSeparatorDecorationAfter {
 			flex-grow: 1;
@@ -177,7 +179,7 @@
 }
 
 
-// focus outline
+/* focus outline */
 .sapFFCL > .sapFFCLColumnSeparator,
 .sapFFCL > .sapFFCLOverlay > .sapFFCLOverlaySeparator {
 	position: relative;
@@ -187,24 +189,24 @@
 	}
 
 	&:focus::after {
-		content: "";
+		content: '';
 		display: block;
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	}
 }
 
 
 .sapFFCLNavigationButton,
 .sapUiSizeCompact & .sapFFCLNavigationButton {
-	// Button hit area size
+	/* Button hit area size */
 	width: 1.5rem;
 	height: 1.5rem;
-	padding: 0; // Vertical button hit area must be the same size as its visible area
+	padding: 0; /* Vertical button hit area must be the same size as its visible area */
 	transition: all 0.1s ease-in;
 	margin-left: -0.25rem;
 	margin-right: -0.25rem;
@@ -214,7 +216,7 @@
 	overflow: visible;
 	cursor: col-resize;
 
-	// Reflection: styles overwritten
+	/* Reflection: styles overwritten */
 	.sapMBtnInner {
 		width: 1.5rem;
 		height: 1.5rem;
@@ -228,20 +230,20 @@
 			margin-right: 0;
 		}
 	}
-	&:before {
-		background-image: linear-gradient(to top, @sapUiHighlight, fade(@sapUiHighlight, 0));
+	&::before {
+		background-image: linear-gradient(to top, var(--sapHighlightColor), fade(@sapUiHighlight, 0));
 		background-position-y: -0.3125rem;
 		bottom: 100%;
 	}
 
-	&:after {
-		background-image: linear-gradient(to bottom, @sapUiHighlight,  fade(@sapUiHighlight, 0));
+	&::after {
+		background-image: linear-gradient(to bottom, var(--sapHighlightColor),  fade(@sapUiHighlight, 0));
 		background-position-y: 0.3125rem;
 		top: 100%;
 	}
 
-	&:after,
-	&:before {
+	&::after,
+	&::before {
 		content: '';
 		position: absolute;
 		left: 0;
@@ -253,14 +255,14 @@
 		background-position-x: calc(50% - 0.03125rem);
 	}
 	&:hover{
-			&:after,
-			&:before {
+			&::after,
+			&::before {
 				height: 7rem;
 			}
 	}
 }
 
-// In order to have reveal effect, columns should overlap each other
+/* In order to have reveal effect, columns should overlap each other */
 .sapFFCLColumnBegin {
 	z-index: 3;
 	flex-shrink: 0;
@@ -280,11 +282,11 @@
 }
 
 html[data-sap-ui-animation='on'] {
+
 	.sapFFCL {
+
 		.sapFFCLColumn.sapFFCLAnimatedColumn {
 			transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
-			-webkit-transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
 		}
 	}
-}
-
+}