@openui5/sap.f 1.108.2 → 1.110.0

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

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

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

@@ -1,11 +1,14 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-sap.ui.define(['./Accessibility'],
-	function (Accessibility) {
+sap.ui.define([
+	'sap/base/security/encodeXML',
+	'./Accessibility'
+],
+	function (encodeXML, Accessibility) {
 		"use strict";
 
 		/**
@@ -13,19 +16,21 @@ sap.ui.define(['./Accessibility'],
 		 * @namespace
 		 */
 		var CoPilotRenderer = {
-			apiVersion: 1 // @todo-semantic-rendering replace write calls below
+			apiVersion: 2
 		};
 
 		CoPilotRenderer.render = function (oRm, oControl) {
 			var oAcc = new Accessibility(),
 				oAttributes = oAcc.getCoPilotAttributes(),
-				sTooltip = oControl.getTooltip();
+				sTooltip = oControl.getTooltip_AsString(),
+				sAltAttr = "";
 
 			oRm.openStart("div", oControl);
 			oRm.attr("tabindex", "0");
 
 			if (sTooltip) {
 				oRm.attr("title", sTooltip);
+				sAltAttr = ' alt="' + encodeXML(sTooltip) + '"';
 			}
 
 			oRm.accessibilityState({
@@ -37,9 +42,9 @@ sap.ui.define(['./Accessibility'],
 			oRm.openEnd();
 
 			if (oControl.getAnimation()) {
-				oRm.write('<svg focusable="false" alt="' + sTooltip + '" role="presentation" version="1.1" width="48" height="48" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="grad1" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity7" offset="0%"/><stop class="color2 opacity7" offset="80%"/></linearGradient><linearGradient id="grad2" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity36" offset="0%"/><stop class="color2 opacity36" offset="80%"/></linearGradient><linearGradient id="grad3" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity2" offset="0%"/><stop class="color2 opacity2" offset="80%"/></linearGradient><mask id="innerCircle"><circle cx="0" cy="0" r="120" fill="white" /><circle cx="0" cy="0" r="76" fill="black" /></mask>' + '<path id="path" d="M 102 0 C 102 17.85 86.87 29.53 77.94 44.99 C 69.01 60.46 66.46 79.4 51 88.33 C 35.53 97.26 17.85 90 5.51000e-15 90 C -17.85 90 -35.53 97.26 -50.99 88.33 C -66.46 79.4 -69.01 60.46 -77.94 45 C -86.87 29.53 -102 17.85 -102 1.24000e-14 C -102 -17.85 -86.87 -29.53 -77.94 -44.99 C -69.01 -60.46 -66.46 -79.4 -51 -88.33 C -35.53 -97.26 -17.85 -89.99 -1.65000e-14 -90 C 17.85 -90 35.53 -97.26 50.99 -88.33 C 66.46 -79.4 69.01 -60.46 77.94 -45 C 86.87 -29.53 102 -17.85 102 0 Z M 97.27 0 C 98.58 17.55 94.29 34.2 84.09 48.54 C 74.21 62.42 58.47 67.23 43.57 75.46 C 28.94 83.54 16.64 93.54 5.81000e-15 95 C -17.27 96.5 -33.78 93.13 -48.19 83.47 C -62.26 74.04 -68.01 58.82 -76.14 43.96 C -84.09 29.4 -92 16.48 -93.8 1.14000e-14 C -95.7 -17.53 -94.76 -34.35 -86.34 -49.84 C -77.83 -65.5 -64.53 -76.31 -48.31 -83.67 C -32.81 -90.7 -17 -88.78 -1.63000e-14 -89 C 17.21 -89.21 34.09 -93.47 49 -84.87 C 63.91 -76.28 68.61 -59.49 77.12 -44.53 C 85.58 -29.66 95.99 -17.05 97.27 0 Z" dur="30s" repeatCount="indefinite"/><animateTransform attributeName="transform" type="scale" values="1;1.05;1.05;1.02;1" dur="0.15s" begin="click_area.mousedown" repeatCount="1" additive="sum"/></path></defs><g mask="url(#innerCircle)"><g fill="url(#grad3)" transform="rotate(54)"><use xlink:href="#path"><animateTransform id="animate1" attributeName="transform" type="rotate" from="54" to="416" dur="15s" repeatCount="indefinite"/></use></g><g fill="url(#grad2)" transform="rotate(74)"><use xlink:href="#path" /></g><g fill="url(#grad1)" transform="rotate(90)"><use xlink:href="#path"><animateTransform id="animate2" attributeName="transform" type="rotate" from="90" to="450" dur="30s" repeatCount="indefinite"/></use></g></g><circle cx="0" cy="0" r="76" fill="transparent" id="click_area"/>');
+				oRm.unsafeHtml('<svg focusable="false"' + sAltAttr + ' role="presentation" version="1.1" width="48" height="48" viewBox="-150 -150 300 300"><defs><linearGradient id="grad1" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity7" offset="0%"/><stop class="color2 opacity7" offset="80%"/></linearGradient><linearGradient id="grad2" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity36" offset="0%"/><stop class="color2 opacity36" offset="80%"/></linearGradient><linearGradient id="grad3" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity2" offset="0%"/><stop class="color2 opacity2" offset="80%"/></linearGradient><mask id="innerCircle"><circle cx="0" cy="0" r="120" fill="white" /><circle cx="0" cy="0" r="76" fill="black" /></mask><path id="path" d="M 102 0 C 102 17.85 86.87 29.53 77.94 44.99 C 69.01 60.46 66.46 79.4 51 88.33 C 35.53 97.26 17.85 90 5.51000e-15 90 C -17.85 90 -35.53 97.26 -50.99 88.33 C -66.46 79.4 -69.01 60.46 -77.94 45 C -86.87 29.53 -102 17.85 -102 1.24000e-14 C -102 -17.85 -86.87 -29.53 -77.94 -44.99 C -69.01 -60.46 -66.46 -79.4 -51 -88.33 C -35.53 -97.26 -17.85 -89.99 -1.65000e-14 -90 C 17.85 -90 35.53 -97.26 50.99 -88.33 C 66.46 -79.4 69.01 -60.46 77.94 -45 C 86.87 -29.53 102 -17.85 102 0 Z M 97.27 0 C 98.58 17.55 94.29 34.2 84.09 48.54 C 74.21 62.42 58.47 67.23 43.57 75.46 C 28.94 83.54 16.64 93.54 5.81000e-15 95 C -17.27 96.5 -33.78 93.13 -48.19 83.47 C -62.26 74.04 -68.01 58.82 -76.14 43.96 C -84.09 29.4 -92 16.48 -93.8 1.14000e-14 C -95.7 -17.53 -94.76 -34.35 -86.34 -49.84 C -77.83 -65.5 -64.53 -76.31 -48.31 -83.67 C -32.81 -90.7 -17 -88.78 -1.63000e-14 -89 C 17.21 -89.21 34.09 -93.47 49 -84.87 C 63.91 -76.28 68.61 -59.49 77.12 -44.53 C 85.58 -29.66 95.99 -17.05 97.27 0 Z" dur="30s" repeatCount="indefinite"><animateTransform attributeName="transform" type="scale" values="1;1.05;1.05;1.02;1" dur="0.15s" begin="click_area.mousedown" repeatCount="1" additive="sum"/></path></defs><g mask="url(#innerCircle)"><g fill="url(#grad3)" transform="rotate(54)"><use href="#path"><animateTransform id="animate1" attributeName="transform" type="rotate" from="54" to="416" dur="15s" repeatCount="indefinite"/></use></g><g fill="url(#grad2)" transform="rotate(74)"><use href="#path" /></g><g fill="url(#grad1)" transform="rotate(90)"><use href="#path"><animateTransform id="animate2" attributeName="transform" type="rotate" from="90" to="450" dur="30s" repeatCount="indefinite"/></use></g></g><circle cx="0" cy="0" r="76" fill="transparent" id="click_area"/></svg>');
 			} else {
-				oRm.write('<svg focusable="false" alt="' + sTooltip + '" role="presentation" version="1.1" width="48" height="48" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="grad1" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity7" offset="0%"/><stop class="color2 opacity7" offset="80%"/></linearGradient><linearGradient id="grad2" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity36" offset="0%"/><stop class="color2 opacity36" offset="80%"/></linearGradient><linearGradient id="grad3" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity2" offset="0%"/><stop class="color2 opacity2" offset="80%"/></linearGradient><mask id="innerCircle"><circle cx="0" cy="0" r="120" fill="white" /><circle cx="0" cy="0" r="76" fill="black" /></mask><path id="path" d="M 98.1584 0 C 98.3156 17.3952 89.0511 31.3348 79.5494 45.9279 C 70.339 60.0814 60.6163 71.2177 46.1724 79.9729 C 31.4266 88.9178 17.2493 94.3909 5.77261e-15 94.2739 C -17.1547 94.1581 -30.8225 87.6907 -45.7979 79.3244 C -61.0143 70.8266 -73.5583 62.554 -83.0507 47.9493 C -92.6677 33.1579 -98.4872 17.5705 -97.1793 1.19010e-14 C -95.9465 -16.9777 -84.488 -29.0862 -76.1351 -43.9566 C -67.6795 -59.0155 -63.8629 -76.1085 -49.262 -85.3243 C -34.502 -94.6464 -17.4328 -93.0037 -1.69174e-14 -92.0939 C 16.8967 -91.214 31.8608 -89.0341 46.4198 -80.4014 C 60.872 -71.8326 69.6003 -59.5351 78.6792 -45.4254 C 88.0511 -30.9104 98.015 -17.2766 98.1584 0 Z"/></defs><g mask="url(#innerCircle)"><g fill="url(#grad3)" transform="rotate(54)"><use xlink:href="#path"/></g><g fill="url(#grad2)" transform="rotate(74)"><use xlink:href="#path" /></g><g fill="url(#grad1)" transform="rotate(90)"><use xlink:href="#path"/></g></g><circle cx="0" cy="0" r="76" fill="transparent" id="click_area"/>');
+				oRm.unsafeHtml('<svg focusable="false"' + sAltAttr + ' role="presentation" version="1.1" width="48" height="48" viewBox="-150 -150 300 300"><defs><linearGradient id="grad1" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity7" offset="0%"/><stop class="color2 opacity7" offset="80%"/></linearGradient><linearGradient id="grad2" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity36" offset="0%"/><stop class="color2 opacity36" offset="80%"/></linearGradient><linearGradient id="grad3" x1="0%" x2="100%" y1="100%" y2="0%"><stop class="color1 opacity2" offset="0%"/><stop class="color2 opacity2" offset="80%"/></linearGradient><mask id="innerCircle"><circle cx="0" cy="0" r="120" fill="white" /><circle cx="0" cy="0" r="76" fill="black" /></mask><path id="path" d="M 98.1584 0 C 98.3156 17.3952 89.0511 31.3348 79.5494 45.9279 C 70.339 60.0814 60.6163 71.2177 46.1724 79.9729 C 31.4266 88.9178 17.2493 94.3909 5.77261e-15 94.2739 C -17.1547 94.1581 -30.8225 87.6907 -45.7979 79.3244 C -61.0143 70.8266 -73.5583 62.554 -83.0507 47.9493 C -92.6677 33.1579 -98.4872 17.5705 -97.1793 1.19010e-14 C -95.9465 -16.9777 -84.488 -29.0862 -76.1351 -43.9566 C -67.6795 -59.0155 -63.8629 -76.1085 -49.262 -85.3243 C -34.502 -94.6464 -17.4328 -93.0037 -1.69174e-14 -92.0939 C 16.8967 -91.214 31.8608 -89.0341 46.4198 -80.4014 C 60.872 -71.8326 69.6003 -59.5351 78.6792 -45.4254 C 88.0511 -30.9104 98.015 -17.2766 98.1584 0 Z"/></defs><g mask="url(#innerCircle)"><g fill="url(#grad3)" transform="rotate(54)"><use href="#path"/></g><g fill="url(#grad2)" transform="rotate(74)"><use href="#path" /></g><g fill="url(#grad1)" transform="rotate(90)"><use href="#path"/></g></g><circle cx="0" cy="0" r="76" fill="transparent" id="click_area"/></svg>');
 			}
 
 			oRm.close("div");

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 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.108.2
+	 * @version 1.110.0
 	 *
 	 * @constructor
 	 * @private

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

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 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-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 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-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 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-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 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.108.2
+		 * @version 1.110.0
 		 *
 		 * @constructor
 		 * @private

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

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

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

@@ -257,6 +257,7 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 	}
 }
 
+// Reflection: Overwritten styles
 .sapFDynamicPageTitleMainHeading,
 .sapFDynamicPageTitleMainContent,
 .sapFDynamicPageTitleMainActions {
@@ -296,6 +297,7 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 	left: 50%;
 	padding: 0;
 
+	// Reflection: Overwritten styles
 	.sapMBtnInner {
 		position: absolute !important;
 		border-radius: 0.1875rem;
@@ -327,6 +329,7 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 	.sapFDynamicPageHeaderPinButton {
 		bottom: -0.875rem;
 
+		// Reflection: Overwritten styles
 		.sapMBtnInner.sapMBtnIconFirst:not(.sapMBtnBack) {
 			padding-left: 0;
 			padding-right: 0;
@@ -406,4 +409,4 @@ To be used in Comparison pattern scenario. */
 
 .sapUiComparisonContainer .sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper .sapUiComparisonContent  {
 	margin-right: -1rem;
-}
+}

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

@@ -70,7 +70,7 @@
 	position: relative;
 	overflow: visible;
 
-
+	// Reflection: styles overwritten
 	.sapMBtnInner {
 		width: 1.5rem;
 		height: 1.5rem;

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

@@ -91,6 +91,10 @@
 	}
 }
 
+.sapFGridList > .sapMListUl.sapMGrowingList {
+	border-radius: @sapUiTileBorderCornerRadius;
+}
+
 .sapFGridList > .sapMListUl > .sapUiBlockLayerTabbable {
 	// There are "span" helpers, which purpose is to block navigation into the blocked controls content.
 	// If the focus reaches the span before the blocked/busy control it is forwarded to the one after the control.

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

@@ -94,6 +94,8 @@
 	.sapFShellBarCopilot + .sapFShellBarItem {
 		margin-left: 0;
 	}
+
+	// Reflection: styles overwritten
 	.sapMBtn .sapMBtnInner {
 		.sapFAvatar {
 			vertical-align: middle;
@@ -132,6 +134,8 @@
 		vertical-align: middle;
 		font-weight: bold;
 		overflow: hidden;
+
+		// Reflection: styles overwritten
 		.sapMBtnInner > img {
 			width: auto !important;
 			max-width: none !important;
@@ -351,6 +355,8 @@
 				max-width: 100%;
 			}
 		}
+
+		// Reflection: styles overwritten
 		.sapMBtnInner {
 			&.sapMBtnIconFirst:not(.sapMBtnText),
 			&.sapMBadgeTopRight.sapMBadge.sapMBtnIconFirst:not(.sapMBtnText){

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

@@ -3,7 +3,6 @@
 /* Base theme                      */
 /* =============================== */
 
-
 /***** Desktop *****/
 
 // Cozy
@@ -11,13 +10,109 @@
 	height: 100%;
 	display: flex;
 	margin: 0;
+	touch-action: none;
 
+	// Main content
 	.sapFSPMain {
 		flex: 1 1;
 		padding: 0.5rem;
 		overflow: hidden auto;
 	}
 
+	// Splitter
+	.sapFSPSplitterBar {
+		cursor: col-resize;
+		width: 1rem;
+		height: 100%;
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		border-left: none;
+		border-right: none;
+		vertical-align: top;
+		color: @sapUiHighlight;
+		position: absolute;
+		left: -1rem;
+
+		&:focus {
+			outline: none;
+		}
+
+		&:focus::after {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		}
+
+		.sapFSPSplitterBarDecorationBefore {
+			width: 1rem;
+			height: 4rem;
+			background-image: linear-gradient(to top, @sapUiGroupContentBorderColor, fade(@sapUiGroupContentBorderColor, 0));
+			background-size: 0.0625rem 100%;
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+
+		.sapFSPSplitterBarDecorationAfter {
+			width: 1rem;
+			height: 4rem;
+			height: 4rem;
+			background-image: linear-gradient(to bottom, @sapUiGroupContentBorderColor, fade(@sapUiGroupContentBorderColor, 0));
+			background-size: 0.0625rem 100%;
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+
+		.sapFSPSplitterBarGrip {
+			cursor: col-resize;
+			width: 1.5rem;
+			height: 2rem;
+			line-height: 2rem;
+			position: relative;
+			z-index: 1;
+
+			.sapFSPSplitterBarGripIcon {
+				cursor: col-resize;
+				line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth;
+				box-sizing: border-box;
+				height: 1.625rem;
+				width: 1.5rem;
+				margin-top: 3px;
+				border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
+				border-radius: @sapUiButtonBorderCornerRadius;
+				background: @sapUiButtonLiteBackground;
+			}
+		}
+
+		&:hover {
+			.sapFSPSplitterBarDecorationBefore,
+			.sapFSPSplitterBarDecorationAfter {
+				flex-grow: 1;
+				transition: all 0.1s ease-in;
+			}
+
+			.sapFSPSplitterBarGripIcon {
+				background: @sapUiButtonLiteBackground;
+				border-color: @sapUiButtonLiteBorderColor;
+			}
+		}
+
+		&.sapFSPSplitterActive {
+			.sapFSPSplitterBarDecorationBefore,
+			.sapFSPSplitterBarDecorationAfter {
+				flex-grow: 1;
+				background-image: linear-gradient(to left, @sapUiHighlight, @sapUiHighlight);
+			}
+		}
+	}
+
+	// Side panel
 	.sapFSPSide {
 		position: relative;
 		display: flex;
@@ -32,7 +127,6 @@
 		.sapFSPSideInner {
 			box-sizing: border-box;
 			position: absolute;
-			overflow: hidden;
 			top: 0;
 			right: 0;
 			height: 100%;
@@ -44,7 +138,7 @@
 			box-shadow: 0 0 1rem fade(@sapUiContentShadowColor, 10);
 			background-color: @sapUiGroupContentBackground;
 			min-width: 4.25rem;
-			width: 4.25rem;
+			width: 100%;
 
 			.sapFSPExpanded {
 				width: 100%;
@@ -57,6 +151,7 @@
 				width: auto;
 				overflow: hidden;
 				padding: 0.5rem 0 0.5rem 1rem;
+				z-index: 1;
 
 				.sapFSPSideContentHeader {
 					height: 2.25rem;
@@ -96,6 +191,12 @@
 		}
 
 		.sapFSPActionBar {
+			height: 100%;
+			min-width: 4.25rem;
+			width: 4.25rem;
+		}
+
+		.sapFSPActionBarList {
 			margin: 0;
 			padding: 0;
 			display: flex;
@@ -225,15 +326,35 @@
 	}
 
 	&.sapFSPActionBarExpanded {
-		.sapFSPSide {
-			.sapFSPSideContent {
-				flex-grow: 0;
-			}
-			.sapFSPActionBar {
+		&:not(.sapFSPSideContentExpanded) .sapFSPSide {
+			width: 20rem;
+		}
+
+		.sapFSPActionBar {
+			max-width: 20rem;
+			width: 100%;
+			flex-shrink: 0;
+
+			.sapFSPActionBarList {
 				flex-grow: 0;
 				width: 100%;
 			}
 		}
+
+		&.sapFSPSideContentExpanded {
+			.sapFSPSide:not(.sapFSPSplitView) {
+				.sapFSPSideContent {
+					display: none;
+				}
+
+				.sapFSPActionBar {
+					min-width: 100%;
+					width: 100%;
+					border-left-width: 0;
+				}
+			}
+		}
+
 	}
 
 	&:not(.sapFSPSingleItem) .sapFSPSideContent {
@@ -241,16 +362,29 @@
 	}
 
 	&.sapFSPSingleItem {
-		&.sapFSPSideContentExpanded	.sapFSPExpandCollapse {
-			display: none;
+		&.sapFSPSideContentExpanded	{
+			.sapFSPExpandCollapse,
+			.sapFSPActionBar {
+				display: none;
+			}
 		}
+
 		.sapFSPExpanded {
 			display: none;
 		}
 	}
+
+	.sapFSPMinWidth,
+	.sapFSPMaxWidth {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 0;
+		overflow: hidden;
+	}
 }
 
-.sapFSP.sapFSPSingleItem.sapFSPSideContentExpanded .sapFSPSide .sapFSPActionBar {
+.sapFSP.sapFSPSingleItem.sapFSPSideContentExpanded .sapFSPSide .sapFSPActionBarList {
 	width: 0;
 	padding: 0;
 	margin: 0;
@@ -284,10 +418,15 @@
 
 			.sapFSPSideInner {
 				min-width: 4rem;
-				width: 4rem;
+				width: 100%;
+
+				.sapFSPActionBar {
+					min-width: 4rem;
+					width: 4rem;
+				}
 			}
 
-			.sapFSPActionBar {
+			.sapFSPActionBarList {
 				.sapFSPItem {
 					height: 2.375rem;
 					padding: 0.1875rem 1rem;
@@ -315,6 +454,12 @@
 			}
 		}
 
+		&.sapFSPActionBarExpanded {
+			.sapFSPSideInner .sapFSPActionBar {
+				width: 20rem;
+				max-width: 20rem;
+			}
+		}
 	}
 }
 
@@ -355,7 +500,14 @@ html.sap-phone {
 				border: none;
 				border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
 
-				.sapFSPActionBarWrapper {
+				.sapFSPActionBar {
+					position: relative;
+					height: auto;
+					min-width: 100%;
+					width: 100%;
+				}
+
+				.sapFSPActionBarListWrapper {
 					overflow: auto hidden;
 					height: 6.125rem;
 					box-sizing: border-box;
@@ -387,7 +539,7 @@ html.sap-phone {
 					}
 				}
 
-				.sapFSPActionBar {
+				.sapFSPActionBarList {
 					display: flex;
 					align-items: center;
 					flex-direction: row;
@@ -454,11 +606,19 @@ html.sap-phone {
 			justify-content: center;
 		}
 
-		&.sapFSPActionBarExpanded .sapFSPSide {
-			flex: 0 0 6.125rem;
+		&.sapFSPActionBarExpanded {
+			&.sapFSPSideContentExpanded .sapFSPSide:not(.sapFSPSplitView) .sapFSPSideContent {
+				display: flex;
+			}
+
+			.sapFSPSide {
+				flex: 0 0 6.125rem;
+				max-width: initial;
+				width: initial;
 
-			.sapFSPSideInner .sapFSPSideContent {
-				flex-grow: 1;
+				.sapFSPSideInner .sapFSPSideContent {
+					flex-grow: 1;
+				}
 			}
 		}
 
@@ -472,13 +632,13 @@ html.sap-phone {
 					height: 100%;
 					width: 100%;
 
-					.sapFSPActionBarWrapper {
+					.sapFSPActionBarListWrapper {
 						height: inherit;
 						width: 100%;
 						display: flex;
 						border: none;
 
-						.sapFSPActionBar {
+						.sapFSPActionBarList {
 							height: inherit;
 
 							.sapFSPItem {
@@ -525,7 +685,7 @@ html.sap-phone {
 				}
 			}
 
-			&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarWrapper {
+			&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
 				height: 0;
 				overflow: hidden;
 				border: none;
@@ -550,13 +710,13 @@ html.sap-phone {
 				width: 100%;
 				border: none;
 
-				.sapFSPActionBarWrapper {
+				.sapFSPActionBarListWrapper {
 					border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
 				}
 			}
 		}
 
-		&:not(.sapFSPActionBarExpanded):not(.sapFSPSingleItem) .sapFSPSide .sapFSPSideInner .sapFSPActionBarWrapper {
+		&:not(.sapFSPActionBarExpanded):not(.sapFSPSingleItem) .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
 			height: 4.125rem;
 			width: 100%;
 		}
@@ -569,7 +729,7 @@ html.sap-phone {
 				flex: 0 0 3.75rem;
 
 				.sapFSPSideInner {
-					.sapFSPActionBarWrapper {
+					.sapFSPActionBarListWrapper {
 						height: 5.5rem;
 					}
 
@@ -578,7 +738,7 @@ html.sap-phone {
 						height: 1.625rem;
 					}
 
-					.sapFSPActionBar {
+					.sapFSPActionBarList {
 						height: 5.5rem;
 
 						.sapFSPItem {
@@ -619,14 +779,14 @@ html.sap-phone {
 				}
 			}
 
-			&:not(.sapFSPActionBarExpanded) .sapFSPSide .sapFSPSideInner .sapFSPActionBarWrapper {
+			&:not(.sapFSPActionBarExpanded) .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
 				height: 3.75rem;
 			}
 
 			&.sapFSPSingleItem {
 				.sapFSPSide {
 					.sapFSPSideInner {
-						.sapFSPActionBarWrapper .sapFSPActionBar .sapFSPItem .sapUiIcon {
+						.sapFSPActionBarListWrapper .sapFSPActionBarList .sapFSPItem .sapUiIcon {
 							width: 2rem;
 						}
 
@@ -635,7 +795,7 @@ html.sap-phone {
 						}
 					}
 				}
-				&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarWrapper {
+				&.sapFSPSideContentExpanded .sapFSPSide .sapFSPSideInner .sapFSPActionBarListWrapper {
 					height: 0;
 					overflow: hidden;
 				}

package/src/sap/f/themes/base/library.source.less

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

package/src/sap/f/themes/sap_hcb/library.source.less

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