@openui5/sap.ui.unified 1.150.0 → 1.152.0

package/src/sap/ui/unified/calendar/Month.js

@@ -78,7 +78,7 @@ sap.ui.define([
 	 * If used inside the calendar the properties and aggregation are directly taken from the parent
 	 * (To not duplicate and sync DateRanges and so on...)
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 *
 	 * @constructor
 	 * @public
@@ -155,6 +155,15 @@ sap.ui.define([
 			 */
 			showWeekNumbers : {type : "boolean", group : "Appearance", defaultValue : true},
 
+			/**
+			 * Determines whether the header of the week numbers column is displayed.
+			 * The column header text is translated according to the active language.
+			 *
+			 * <b>Note:</b> Takes effect only when <code>showWeekNumbers</code> is set to <code>true</code>.
+			 * @since 1.151
+			 */
+			showWeekNumbersHeader : {type : "boolean", group : "Appearance", defaultValue : false},
+
 			/**
 			 * The value of this property is set trough the sap.ui.unified.Calendar control,
 			 * in order for the current sap.ui.unified.calendar.Month control to know which
@@ -326,6 +335,30 @@ sap.ui.define([
 		return "";
 	};
 
+	/**
+	 * Returns the text to display in the week numbers column header.
+	 * Returns an empty string when the header should not be shown.
+	 * @returns {string} The week numbers column header text, or empty string
+	 * @private
+	 */
+	Month.prototype._getWeekNumbersHeaderText = function() {
+		if (!this.getShowWeekNumbersHeader()) {
+			return "";
+		}
+
+		// Locales where the calendar week abbreviation (sap-calendarWeek narrow) is too long
+		// to fit in the week number column header cell — verified manually.
+		// These fall back to the "week" narrow display name from CLDR (week-narrow.displayName).
+		const _oLongCWLocales = new Set(["ar", "ar-EG", "ar-SA", "he", "vi", "zh-CN", "zh-HK", "zh-TW"]),
+			oLocaleData = this._getLocaleData();
+
+		if (_oLongCWLocales.has(this._getLocale())) {
+			return oLocaleData.getDisplayName("week", "narrow");
+		}
+
+		return oLocaleData.getCalendarWeek("narrow").replace("{0}", "").trim();
+	};
+
 	Month.prototype.exit = function(){
 
 		if (this._oItemNavigation) {
@@ -364,6 +397,14 @@ sap.ui.define([
 
 		// check if day names are too big -> use smaller ones
 		_checkNamesLength.call(this);
+
+		if (this._bFocusFromTouch) {
+			const iFocusedIndex = this._oItemNavigation.getFocusedIndex();
+			const oDomRef = this._oItemNavigation.getItemDomRefs()[iFocusedIndex];
+			if (oDomRef) {
+				oDomRef.classList.add("sapUiCalItemFocusFromTouch");
+			}
+		}
 	};
 
 	Month.prototype.onmouseover = function(oEvent) {
@@ -971,10 +1012,10 @@ sap.ui.define([
 			// collects non working day with the first occurrence of one of the types01..types20
 			if ((oTimeStamp === oStartTimeStamp && !oEndDate) || (oTimeStamp >= oStartTimeStamp && oTimeStamp <= oEndTimeStamp)) {
 				if (!bNonWorkingType && !oType) {
-					oType = {type: oRange.getType(), secondaryType: oRange.getSecondaryType(), tooltip: oRange.getTooltip_AsString(), color: oRange.getColor(), customData: oRange.getCustomData()};
+					oType = Month.prototype._createDateTypeObject.call(this, oRange, true);
 					aTypes.push(oType);
 				} else if (bNonWorkingType && !oTypeNW) {
-						oTypeNW = {type: oRange.getType(), secondaryType: oRange.getSecondaryType(), tooltip: oRange.getTooltip_AsString(), customData: oRange.getCustomData()};
+						oTypeNW = Month.prototype._createDateTypeObject.call(this, oRange, false);
 						aTypes.push(oTypeNW);
 				}
 				if (oType && oTypeNW) {
@@ -987,6 +1028,28 @@ sap.ui.define([
 
 	};
 
+	/*
+	 * Creates a date type object from a given date range.
+	 * @param {sap.ui.unified.DateRange} oRange the date range
+	 * @param {boolean} bSetColor whether to include the color property
+	 * @returns {object} the date type object
+	 * @private
+	 */
+	Month.prototype._createDateTypeObject = function(oRange, bSetColor) {
+		const oTypeObject = {
+			type: oRange.getType(),
+			secondaryType: oRange.getSecondaryType(),
+			tooltip: oRange.getTooltip_AsString(),
+			customData: oRange.getCustomData(),
+			ariaHasPopup: oRange.getAriaHasPopup(),
+			bAriaHasPopupExplicit: !oRange.isPropertyInitial("ariaHasPopup")
+		};
+		if (bSetColor) {
+			oTypeObject.color = oRange.getColor();
+		}
+		return oTypeObject;
+	};
+
 	/*
 	 * Checks if a given date is enabled
 	 * aside from the disabledDates aggregation the min. and max. dates are also checked
@@ -1084,6 +1147,10 @@ sap.ui.define([
 			clientY: oEvent.clientY
 		};
 
+		if (oEvent.target.closest(".sapUiCalItem")) {
+			this._bFocusFromTouch = true;
+		}
+
 		// handle only mouse down on a week number
 		if (oEvent.button
 			|| Device.support.touch
@@ -1102,6 +1169,12 @@ sap.ui.define([
 		this._handleWeekSelection(oFirstDayOfWeekCalendarDate, bFocusStartDate);
 	};
 
+	Month.prototype.ontouchstart = function(oEvent) {
+		if (oEvent.target.closest(".sapUiCalItem")) {
+			this._bFocusFromTouch = true;
+		}
+	};
+
 	Month.prototype.onmouseup = function(oEvent){
 		// BCP: 1980116734
 		// on a combi device right mouse button resulted in a selection (both a week or a single day)
@@ -1188,6 +1261,7 @@ sap.ui.define([
 		if (oEvent.which === KeyCodes.SPACE){
 			this.bSpaceButtonPressed = true;
 		}
+		this._bFocusFromTouch = false;
 	};
 	Month.prototype.onkeyup = function(oEvent){
 		if (oEvent.which === KeyCodes.SPACE){
@@ -2164,6 +2238,12 @@ sap.ui.define([
 			this._selectedWithMouse = true;
 		}
 
+		if (this._bFocusFromTouch) {
+			oDomRef.classList.add("sapUiCalItemFocusFromTouch");
+		} else {
+			oDomRef.classList.remove("sapUiCalItemFocusFromTouch");
+		}
+
 		if (bFireFocus) {
 			this.fireFocus({date: oFocusedDate.toLocalJSDate(), otherMonth: bOtherMonth});
 		}

package/src/sap/ui/unified/calendar/MonthPicker.js

@@ -57,7 +57,7 @@ sap.ui.define([
 	 * renders a MonthPicker with ItemNavigation
 	 * This is used inside the calendar. Not for stand alone usage
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/MonthRenderer.js

@@ -17,7 +17,8 @@ sap.ui.define([
 	'sap/ui/core/InvisibleText',
 	'sap/ui/core/date/UI5Date',
 	"sap/ui/core/date/CalendarUtils",
-	"sap/ui/core/Locale"
+	"sap/ui/core/Locale",
+	"sap/ui/core/library"
 ],
 	function(
 		CalendarType,
@@ -32,13 +33,17 @@ sap.ui.define([
 		InvisibleText,
 		UI5Date,
 		CalendarDateUtils,
-		Locale
+		Locale,
+		coreLibrary
 	) {
 	"use strict";
 
 
 	// shortcut for sap.ui.unified.CalendarDayType
-	var CalendarDayType = library.CalendarDayType;
+	const CalendarDayType = library.CalendarDayType;
+
+	// shortcut for sap.ui.core.aria.HasPopup
+	const AriaHasPopup = coreLibrary.aria.HasPopup;
 
 
 
@@ -197,10 +202,10 @@ sap.ui.define([
 
 	MonthRenderer.renderDayNames = function(oRm, oMonth, oLocaleData, iStartDay, iDays, bDayNumberAsId, sWidth){
 
-		var iFirstDayOfWeek = oMonth._getFirstDayOfWeek();
-		var sId = oMonth.getId();
-		var sDayId = "";
-		var sCalendarType = oMonth.getPrimaryCalendarType();
+		var iFirstDayOfWeek = oMonth._getFirstDayOfWeek(),
+			sId = oMonth.getId(),
+			sCalendarType = oMonth.getPrimaryCalendarType(),
+			sDayId = "";
 
 		var aWeekDays = [];
 		if (oMonth._bLongWeekDays || !oMonth._bNamesLengthChecked) {
@@ -211,7 +216,7 @@ sap.ui.define([
 		var aWeekDaysWide = oLocaleData.getDaysStandAlone("wide", sCalendarType);
 
 		if (oMonth.getShowWeekNumbers() && sCalendarType !== CalendarType.Islamic) { // on Islamic primary calendar week numbers are not shown, do not add dummy cell
-			this.renderDummyCell(oRm, "sapUiCalWH", true, "columnheader");
+			this.renderDummyCell(oRm, "sapUiCalWH", true, oMonth._getWeekNumbersHeaderText(), "columnheader");
 		}
 
 		for ( var i = 0; i < iDays; i++) {
@@ -308,7 +313,7 @@ sap.ui.define([
 
 		if (iLength === 28) {
 			// there are only 4 full weeks (28 days), add one hidden 'day' div in order to open space for 5-th week
-			this.renderDummyCell(oRm, "sapUiCalItem", false, "");
+			this.renderDummyCell(oRm, "sapUiCalItem", false, "", "");
 		}
 	};
 
@@ -316,22 +321,35 @@ sap.ui.define([
 	 * Generates empty 'day' div that adds space for one more week in the calendar, in case of 4 full weeks only (28 days)
 	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
 	 * @param {string} sClassName css class that will be added to the dummy element styles
-	 * @param {boolean} bVisible if set to true the dummy element will be visible
+	 * @param {boolean} bShowColumn if set to true the dummy element will be visible
+	 * @param {string} sCellText text to render inside the dummy element; if empty, no text span is rendered
 	 * @param {string} sRole aria role attribute
 	 * @private
 	 */
-	MonthRenderer.renderDummyCell = function(oRm, sClassName, bVisible, sRole) {
+	MonthRenderer.renderDummyCell = function(oRm, sClassName, bShowColumn, sCellText, sRole) {
+		var sFullText = Library.getResourceBundleFor("sap.ui.unified").getText("CALENDAR_WEEK");
 		oRm.openStart("div");
 		oRm.class(sClassName);
 		oRm.class("sapUiCalDummy");
-		oRm.style("visibility", bVisible ? "visible" : "hidden");
+		oRm.style("visibility", bShowColumn ? "visible" : "hidden");
 		oRm.attr("role", sRole);
+		if (sCellText) {
+			oRm.attr("title", sFullText);
+		}
 		oRm.openEnd();
 
+		if (sCellText) {
+			oRm.openStart("span");
+			oRm.attr("aria-hidden", "true");
+			oRm.openEnd();
+			oRm.text(sCellText);
+			oRm.close("span");
+		}
+
 		oRm.openStart("span");
 		oRm.class("sapUiPseudoInvisibleText");
 		oRm.openEnd();
-		oRm.text(Library.getResourceBundleFor("sap.ui.unified").getText("CALENDAR_WEEK"));
+		oRm.text(sFullText);
 		oRm.close("span");
 
 		oRm.close('div');
@@ -443,6 +461,15 @@ sap.ui.define([
 		var bEnabled = oMonth._checkDateEnabled(oDay);
 		var bShouldBeMarkedAsSpecialDate = oMonth._isSpecialDateMarkerEnabled(oDay);
 
+		// Determine effective aria-haspopup from per-date value on matched DateTypeRange entries.
+		let sHasPopup = AriaHasPopup.None;
+		for (let i = 0; i < aDayTypes.length; i++) {
+			if (aDayTypes[i].bAriaHasPopupExplicit) {
+				sHasPopup = aDayTypes[i].ariaHasPopup;
+				break;
+			}
+		}
+
 		const sFirstSpecialDateType = aDayTypes.length > 0 && aDayTypes[0].type;
 		const sSecondaryDateType = aDayTypes.length > 0 && aDayTypes[0].secondaryType;
 		const bIsWeekend = oHelper.aNonWorkingDays && oHelper.aNonWorkingDays instanceof Array
@@ -581,6 +608,10 @@ sap.ui.define([
 			CalendarLegendRenderer.addCalendarTypeAccInfo(mAccProps, sAriaType, oLegend);
 		}
 
+		if (sHasPopup !== AriaHasPopup.None) {
+			mAccProps["haspopup"] = sHasPopup.toLowerCase();
+		}
+
 		if (aDayTypes[0] && aDayTypes[0].customData?.length && bShouldBeMarkedAsSpecialDate) {
 			//render customData
 			aDayTypes[0].customData.forEach((customData) => {
@@ -593,7 +624,8 @@ sap.ui.define([
 		oRm.accessibilityState(null, mAccProps);
 		oRm.openEnd(); // div element
 
-		if (aDayTypes[0] && bShouldBeMarkedAsSpecialDate){ //if there's a special date inside current month, render it
+		if (aDayTypes[0] && bShouldBeMarkedAsSpecialDate
+				&& (aDayTypes[0].type !== CalendarDayType.None || aDayTypes[0].color)) { //if there's a special date inside current month, render it
 			oRm.openStart("div");
 			oRm.class("sapUiCalSpecialDate");
 			const sColor = aDayTypes[0].color?.toLowerCase();

package/src/sap/ui/unified/calendar/MonthsRow.js

@@ -70,7 +70,7 @@ sap.ui.define([
 	 * The MontsRow works with UI5Date or JavaScript Date objects, but only the month and the year are used to display and interact.
 	 * As representation for a month, the 1st of the month will always be returned in the API.
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/OneMonthDatesRow.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * Other usages are not supported.
 	 *
 	 * @extends sap.ui.unified.calendar.DatesRow
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/TimesRow.js

@@ -69,7 +69,7 @@ sap.ui.define([
 	 *
 	 * The TimesRow works with UI5Date or JavaScript Date objects.
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/WeeksRow.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * The WeeksRow works with UI5Date or JavaScript Date objects for its API, but internally uses CalendarDate objects for calculations.
 	 *
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/YearPicker.js

@@ -61,7 +61,7 @@ sap.ui.define([
 	 * As in all date-time controls, all pubic JS Date objects that are given (e.g. <code>setDate()</code>) or read
 	 * (e.g. <code>getFirstRenderedDate</code>) with values which are considered as date objects in browser(local) timezone.
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/YearRangePicker.js

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * @extends sap.ui.unified.calendar.YearPicker
 	 *
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/library.js

@@ -32,14 +32,14 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.unified
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.152.0
 	 * @since 1.28
 	 * @public
 	 */
 	var thisLib = Library.init({
 		name : "sap.ui.unified",
 		apiVersion: 2,
-		version: "1.150.0",
+		version: "1.152.0",
 		dependencies : ["sap.ui.core"],
 		designtime: "sap/ui/unified/designtime/library.designtime",
 		types: [

package/src/sap/ui/unified/themes/base/Calendar.less

@@ -151,14 +151,18 @@
 }
 
 /* no default (browser) outline, if device needs focus visualization its defined later */
-.sapUiCalHead button:focus,
-.sapUiCalCancel:focus {
+html.sap-desktop .sapUiCalHead button:focus,
+html.sap-desktop .sapUiCalCancel:focus,
+.sapUiCalHead button:focus-visible,
+.sapUiCalCancel:focus-visible {
 	outline: none;
 }
 
 /* hover and focus makes only sense on desktops. On mobile devices it's not needed */
 html.sap-desktop .sapUiCalHead button:focus,
-html.sap-desktop .sapUiCalCancel:focus {
+html.sap-desktop .sapUiCalCancel:focus,
+.sapUiCalHead button:focus-visible,
+.sapUiCalCancel:focus-visible {
 	background-color: var(--sapButton_Hover_Background);
 	color: var(--sapButton_Hover_TextColor);
 }
@@ -498,7 +502,7 @@ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
 	.sapUiCalItem {
 		line-height: 1.875rem;
 
-		&:focus {
+		&:focus-visible {
 			line-height: 1.75rem;
 		}
 
@@ -510,6 +514,13 @@ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
 	}
 }
 
+html.sap-desktop .sapUiCalMonthPicker.sapUiCalMonthSecType .sapUiCalItem:focus,
+html.sap-desktop .sapUiCalYearPicker.sapUiCalMonthSecType .sapUiCalItem:focus,
+.sapUiCalMonthPicker.sapUiCalMonthSecType .sapUiCalItem:focus-visible,
+.sapUiCalYearPicker.sapUiCalMonthSecType .sapUiCalItem:focus-visible {
+	line-height: 1.75rem;
+}
+
 .sapUiSizeCozy {
 
 	.sapUiCal:not(.sapUiCalDateInt) {
@@ -547,7 +558,7 @@ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
 	.sapUiCalItem {
 		line-height: 1rem;
 
-		&:focus {
+		&:focus-visible {
 			line-height: 0.875rem;
 
 			.sapUiCalItemSecText {
@@ -557,6 +568,17 @@ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
 	}
 }
 
+html.sap-desktop .sapUiSizeCompact .sapUiCalMonthPicker.sapUiCalMonthSecType .sapUiCalItem:focus,
+html.sap-desktop .sapUiSizeCompact .sapUiCalYearPicker.sapUiCalMonthSecType .sapUiCalItem:focus,
+.sapUiSizeCompact .sapUiCalMonthPicker.sapUiCalMonthSecType .sapUiCalItem:focus-visible,
+.sapUiSizeCompact .sapUiCalYearPicker.sapUiCalMonthSecType .sapUiCalItem:focus-visible {
+	line-height: 0.875rem;
+
+	.sapUiCalItemSecText {
+		line-height: 0.875rem;
+	}
+}
+
 /* Day, Month and YearPicker on popup */
 .sapUiCalMonthView[data-sap-ui-popup],
 .sapUiCalMonthPicker[data-sap-ui-popup],
@@ -766,7 +788,14 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
 	box-sizing: border-box;
 }
 
-.sapUiCalMonthSecType .sapUiCalItem:focus > .sapUiCalItemSecText {
+.sapUiCalItem:focus-visible {
+    outline-width: none;
+    outline-style: none;
+    outline-color: none;
+}
+
+html.sap-desktop .sapUiCalMonthSecType .sapUiCalItem:focus > .sapUiCalItemSecText,
+.sapUiCalMonthSecType .sapUiCalItem:focus-visible > .sapUiCalItemSecText {
 	line-height: 0.75rem;
 }
 
@@ -1012,6 +1041,10 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
 	height: 2rem;
 }
 
+.sapUiSizeCompact .sapUiCalWH {
+	overflow: visible;
+}
+
 .sapUiSizeCompact .sapUiCal:not(.sapUiCalInt) {
 
 	.sapUiCalContent {

package/src/sap/ui/unified/themes/base/ColorPicker.less

@@ -170,7 +170,6 @@
 	border-color: var(--sapField_BorderColor);
 	position: relative;
 	cursor: crosshair;
-	display: inline-block;
 	width: 105px;
 	height: 105px;
 	background-color: none;
@@ -371,7 +370,7 @@
 		padding: 10px 0;
 
 		.sapMSliderInner {
-			height: 1.625rem;
+			height: 1.5rem;
 			border: 1px solid var(--sapContent_ForegroundBorderColor);
 			border-radius: 0;
 			box-sizing: border-box;
@@ -386,7 +385,7 @@
 		/* slider handle */
 		.sapMSliderHandle {
 			width: 0.9375rem;
-			height: 1.875rem;
+			height: 1.75rem;
 			box-shadow: inset 0 0 0 0.125rem var(--sapContent_ContrastShadowColor);
 			top: -0.45rem;
 			/* to center the handle at the both ends */
@@ -681,6 +680,129 @@
 			border-bottom: none;
 		}
 	}
+
+	&.sapUiCPHighZoom {
+		.sapUiColorPicker-ColorPickerBox {
+			float: none;
+			width: 100%;
+			max-width: 100%;
+			height: auto;
+			display: block;
+			box-sizing: border-box;
+
+			&::after {
+				padding-bottom: 100%;
+			}
+		}
+
+		.sapUiCPSlidersPhone {
+			width: 100%;
+			box-sizing: border-box;
+		}
+
+		.sapUiColorPicker-ColorPickerSlider,
+		.sapUiColorPicker-ColorPickerAlphaSlider {
+			width: 100%;
+		}
+
+		.sapMDialogScrollCont.sapMDialogStretchContent {
+			overflow: hidden;
+		}
+	}
+}
+
+.sapUiColorPicker-Simplified.sapUnifiedColorPicker.sapUiCPHighZoom {
+	box-sizing: border-box;
+	width: 100%;
+	max-width: 100%;
+	min-width: 0;
+	overflow: hidden;
+	padding: 1rem;
+
+	.sapUiColorPicker-ColorPickerBox {
+		float: none;
+		width: 100%;
+		max-width: 100%;
+		margin: 0 auto 0.5rem auto;
+		height: auto;
+		display: block;
+		box-sizing: border-box;
+
+		&::after {
+			padding-bottom: 100%;
+		}
+	}
+
+	.sapUiColorPicker-ColorPickerSlider {
+		width: 100%;
+		max-width: 100%;
+		box-sizing: border-box;
+		margin: 0.5rem auto 0 auto;
+		height: 2.25rem;
+	}
+
+	.sapUiCPHexRow {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: 0.5rem;
+		width: 100%;
+	}
+
+	.sapUiCPComparisonWrapper {
+		flex: 0 0 3.375rem;
+		width: 3.375rem;
+		box-sizing: border-box;
+		height: 2.25rem;
+		border: 1px solid var(--sapContent_ForegroundBorderColor);
+	}
+
+	.sapUiColorPicker-ColorPickerHexField {
+		box-sizing: border-box;
+		margin-top: 0;
+	}
+
+	.sapUiColorPicker-ColorPickerHexField.sapMInputBase {
+		width: 100%;
+	}
+
+	.sapUiCPHexWrapper {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 0;
+		min-width: 0;
+		height: auto;
+		box-sizing: border-box;
+		line-height: 1.25rem;
+		margin-bottom: 0;
+	}
+
+	.sapUiCPHexText {
+		display: block;
+		text-align: center;
+		width: 100%;
+	}
+
+	.sapUiColorPicker-ColorPickerOldColor.sapUiColorPicker-ColorPickerOldColor,
+	.sapUiColorPicker-ColorPickerNewColor.sapUiColorPicker-ColorPickerNewColor {
+		width: 50%;
+		height: 2.25rem;
+		border: 0;
+		border-bottom: 1px solid var(--sapContent_ForegroundBorderColor);
+	}
+}
+
+.sapMDialog.sapMResponsivePopover .sapUiColorPicker-Simplified.sapUnifiedColorPicker.sapUiCPHighZoom {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.sapMPopover.sapMResponsivePopover .sapUiColorPicker-Simplified.sapUnifiedColorPicker.sapUiCPHighZoom {
+	padding-top: 1rem;
+}
+
+.sapMResponsivePopover:has(.sapUiColorPicker-Simplified.sapUnifiedColorPicker.sapUiCPHighZoom) .sapMPopoverScroll {
+	overflow: hidden;
 }
 
 /* unified Large */

package/src/sap/ui/unified/themes/base/FileUploader.less

@@ -435,4 +435,9 @@ html[data-sap-ui-browser^='cr'] .sapUiFupInputMask > input {
 .sapUiFup.sapUiFupButtonOnly.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:has(.sapMBtnEmphasized):not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper):hover {
 	background-color: var(--sapButton_Emphasized_Hover_Background);
 	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
+}
+
+/* Override default width of the FileUploader when it is used inside a Bar/Toolbar/OverflowToolbar */
+.sapMIBar .sapUiFup:not(.sapUiFupButtonOnly) {
+	width: 12rem;
 }

package/src/sap/ui/unified/themes/base/ShellHeader.less

@@ -140,7 +140,7 @@
 	font-size: @_sap_ui_unified_ShellHeader_HeaderBarHeight / 2;
 	margin: @_sap_ui_unified_ShellHeader_ButtonOuterSpace - @_sap_ui_unified_ShellHeader_ButtonOutlineWidth;
 	margin-top: @_sap_ui_unified_ShellHeader_ButtonOuterSpace;
-	color: var(--sapTextColor);
+	color: var(--sapButton_IconColor);
 	border-radius: @_sap_ui_unified_ShellHeader_ButtonBorderRadius;
 	border: @_sap_ui_unified_ShellHeader_ButtonOutlineWidth solid transparent;
 	box-sizing: border-box;
@@ -180,11 +180,6 @@
 	border-right: @_sap_ui_unified_ShellHeader_ButtonSeparatorWidth solid var(--sapToolbar_SeparatorColor);
 }
 
-.sapUiUfdShellHeadItm > span,
-.sapUiUfdShellHeadUsrItm {
-	color: var(--sapButton_IconColor);
-}
-
 html.sapUiMedia-Std-Desktop .sapUiUfdShellHeadItm:hover > span,
 html.sapUiMedia-Std-Desktop .sapUiUfdShellHeadUsrItm:hover > * {
 	background-color: var(--sapButton_Hover_Background);
@@ -300,7 +295,7 @@ html.sapUiMedia-Std-Desktop .sapUiUfdShellHeadItm.sapUiUfdShellHeadItmSel:hover
 	display: inline-block;
 	vertical-align: top;
 	height: 100%;
-	color: var(--sapButton_TextColor);
+	color: var(--sapButton_IconColor);
 }
 
 .sapUiUfdShellHeadUsrItm > * {

package/src/sap/ui/unified/themes/sap_hcb/Calendar.less

@@ -14,7 +14,8 @@
 	border-radius: 0.375rem;
 }
 
-.sapUiCalHeadB:focus{
+html.sap-desktop .sapUiCalHeadB:focus,
+.sapUiCalHeadB:focus-visible {
 	border-radius: 0;
 }