@openui5/sap.ui.unified 1.152.0 → 1.153.0

package/THIRDPARTY.txt

@@ -39,7 +39,7 @@ Contained in: src/sap.f/src/sap/f/thirdparty/**
 
 Library: sap.m:
 
-Component: purify.js, version: 3.4.1
+Component: purify.js, version: 3.4.14
 Copyright: Mario Heiderich
 License: Apache-2.0
 License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.unified",
-  "version": "1.152.0",
+  "version": "1.153.0",
   "description": "OpenUI5 UI Library sap.ui.unified",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,6 +14,6 @@
     "url": "https://github.com/UI5/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.152.0"
+    "@openui5/sap.ui.core": "1.153.0"
   }
 }

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

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.152.0</version>
+  <version>1.153.0</version>
 
   <documentation>Unified controls intended for both, mobile and desktop scenarios</documentation>
 

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

@@ -80,7 +80,7 @@ sap.ui.define([
 	 * Basic Calendar.
 	 * This calendar is used for DatePickers
 	 * @extends sap.ui.core.Control
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -48,7 +48,7 @@ sap.ui.define([
 	 *
 	 * Applications could inherit from this element to add own fields.
 	 * @extends sap.ui.unified.DateTypeRange
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -64,7 +64,7 @@ sap.ui.define([
 	 * @class
 	 * <code>CalendarDateInterval</code> only visualizes the dates in a one-line interval and allows the selection of a single day.
 	 * @extends sap.ui.unified.Calendar
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -57,7 +57,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -21,7 +21,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 	 * @class
 	 * Item to be displayed in a CalendarLegend.
 	 * @extends sap.ui.core.Element
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -65,7 +65,7 @@ sap.ui.define([
 	 * <b>Note:</b> UI5Date or JavaScript Date objects are used to set and return the months, mark them as selected or as a special type.
 	 * But the date part of the Date object is not used. If a Date object is returned the date will be set to the 1st of the corresponding month.
 	 * @extends sap.ui.core.Control
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -57,7 +57,7 @@ sap.ui.define([
 		 * Navigation via year picker switches to the corresponding year and the same month as before the navigation.
 		 *
 		 * @extends sap.ui.unified.CalendarDateInterval
-		 * @version 1.152.0
+		 * @version 1.153.0
 		 *
 		 * @constructor
 		 * @private

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

@@ -84,7 +84,7 @@ sap.ui.define([
 	 * @class
 	 * A calendar row with a header and appointments. The Appointments will be placed in the defined interval.
 	 * @extends sap.ui.core.Control
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public
@@ -529,6 +529,7 @@ sap.ui.define([
 		if (jQuery(oEvent.target).hasClass("sapUiCalendarApp")) {
 			// focus on appointment
 			_focusAppointment.call(this, oEvent.target.id);
+			oEvent.target.classList.toggle("sapUiCalItemFocusFromTouch", !!this._bFocusFromTouch);
 		} else {
 			// check if inside appointment
 			var aVisibleAppointments = this._getVisibleAppointments();
@@ -565,6 +566,16 @@ sap.ui.define([
 
 	};
 
+	CalendarRow.prototype.ontouchstart = function(oEvent) {
+		if (oEvent.target.closest(".sapUiCalendarApp")) {
+			this._bFocusFromTouch = true;
+		}
+	};
+
+	CalendarRow.prototype.onkeydown = function(oEvent) {
+		this._bFocusFromTouch = false;
+	};
+
 	CalendarRow.prototype.onsapleft = function(oEvent) {
 
 		if (jQuery(oEvent.target).hasClass("sapUiCalendarApp")) {

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

@@ -78,7 +78,7 @@ sap.ui.define([
 	 * @class
 	 * Calendar with granularity of time items displayed in one line.
 	 * @extends sap.ui.core.Control
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -39,7 +39,7 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarUtils', 'sap/ui/unified/calendar
 		 * its start date to the first date of the same week as the date the user chose.
 		 *
 		 * @extends sap.ui.unified.CalendarDateInterval
-		 * @version 1.152.0
+		 * @version 1.153.0
 		 *
 		 * @constructor
 		 * @private

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

@@ -72,7 +72,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -49,7 +49,7 @@ sap.ui.define([
 		 * A thin wrapper over {@link sap.ui.unified.ColorPicker} allowing the latter to be used in a popover.
 		 *
 		 * @extends sap.ui.core.Control
-		 * @version 1.152.0
+		 * @version 1.153.0
 		 *
 		 * @constructor
 		 * @public

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

@@ -78,10 +78,6 @@ sap.ui.define(['./ColorPickerDisplayMode', "sap/ui/Device", "sap/ui/core/Lib"],
 	ColorPickerRenderer.renderSliders = function(oRm, oControl) {
 		oRm.openStart("div");
 		oRm.class("sapUiCPSlidersWrapper");
-		oRm.accessibilityState({
-			role: "group",
-			label: oRb.getText("COLORPICKER_SLIDERS_GROUP_LABEL")
-		});
 		oRm.openEnd();
 		oRm.renderControl(oControl.getAggregation("_oSlider"));
 		oRm.renderControl(oControl.getAggregation("_oAlphaSlider"));

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

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -58,7 +58,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.152.0
+		 * @version 1.153.0
 		 *
 		 * @constructor
 		 * @public

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

@@ -14,7 +14,7 @@ sap.ui.define(["sap/m/library", "sap/ui/core/Lib"],
 	/**
 	 * Currency renderer.
 	 *
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 * @namespace
 	 */
 	var CurrencyRenderer = {

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

@@ -20,7 +20,7 @@ sap.ui.define(['sap/ui/core/Element', './library', 'sap/ui/unified/calendar/Cale
 	 * @class
 	 * Date range for use in DatePicker
 	 * @extends sap.ui.core.Element
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -34,7 +34,7 @@ function(
 	 * @class
 	 * Date range with calendar day type information. Used to visualize special days in the Calendar.
 	 * @extends sap.ui.unified.DateRange
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -27,6 +27,7 @@ sap.ui.define([
 	"sap/ui/events/KeyCodes",
 	"sap/base/Log",
 	"sap/base/security/encodeXML",
+	"sap/ui/base/ManagedObject",
 	"sap/ui/thirdparty/jquery",
 	// jQuery Plugin "addAriaDescribedBy"
 	"sap/ui/dom/jquery/Aria"
@@ -52,6 +53,7 @@ sap.ui.define([
 	KeyCodes,
 	Log,
 	encodeXML,
+	ManagedObject,
 	jQuery
 ) {
 
@@ -79,7 +81,7 @@ sap.ui.define([
 	 * @implements sap.ui.core.IFormContent, sap.ui.unified.IProcessableBlobs
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public
@@ -901,8 +903,8 @@ sap.ui.define([
 		// Add new tokens for selected files
 		this._selectedFileNames.forEach((fileName) => {
 			oTokenizer.addToken(new Token({
-				text: fileName,
-				tooltip: fileName,
+				text: ManagedObject.escapeSettingsValue(fileName),
+				tooltip: ManagedObject.escapeSettingsValue(fileName),
 				selected: false
 			}));
 		});

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

@@ -22,7 +22,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -20,7 +20,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.152.0
+		 * @version 1.153.0
 		 *
 		 * @constructor
 		 * @since 1.52

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

@@ -70,7 +70,7 @@ sap.ui.define([
 	 * @implements sap.ui.core.IContextMenu
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 * @since 1.21.0
 	 *
 	 * @constructor

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

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * @implements sap.ui.unified.IMenuItem
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 * @since 1.21.0
 	 *
 	 * @constructor

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

@@ -23,7 +23,7 @@ sap.ui.define(['sap/ui/core/Element', './library', 'sap/ui/core/IconPool', 'sap/
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 * @since 1.21.0
 	 *
 	 * @constructor

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

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @implements sap.ui.unified.IMenuItem
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 * @since 1.127.0
 	 *
 	 * @constructor

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

@@ -15,7 +15,7 @@ sap.ui.define(["sap/ui/core/ControlBehavior"],
 	 * Menu renderer.
 	 * @author SAP - TD Core UI&AM UI Infra
 	 *
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 * @namespace
 	 */
 	var MenuRenderer = {

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

@@ -53,7 +53,7 @@ sap.ui.define([
 	 * @implements sap.ui.unified.IMenuItem
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 * @since 1.21.0
 	 *
 	 * @constructor
@@ -206,6 +206,30 @@ sap.ui.define([
 	};
 
 
+	MenuTextFieldItem.prototype.onsapprevious = function(oEvent){
+		if (oEvent.key !== "ArrowLeft") {
+			return;
+		}
+		if (this._checkCursorPosForNav(false)) {
+			this.getParent().onsapprevious(oEvent);
+		} else {
+			oEvent.stopPropagation();
+		}
+	};
+
+
+	MenuTextFieldItem.prototype.onsapnext = function(oEvent){
+		if (oEvent.key !== "ArrowRight") {
+			return;
+		}
+		if (this._checkCursorPosForNav(true)) {
+			this.getParent().onsapnext(oEvent);
+		} else {
+			oEvent.stopPropagation();
+		}
+	};
+
+
 	MenuTextFieldItem.prototype.onsaphome = function(oEvent){
 		if (this._checkCursorPosForNav(false)) {
 			this.getParent().onsaphome(oEvent);
@@ -252,7 +276,7 @@ sap.ui.define([
 	MenuTextFieldItem.prototype.onkeydown = function(oEvent){
 		//like sapenter but on keyup -> see Menu.prototype.onkeyup
 		if (!PseudoEvents.events.sapenter.fnCheck(oEvent) && oEvent.key !== "Enter") {
-			if (oEvent.key === "Home" || oEvent.key === "End") {
+			if (oEvent.key === "Home" || oEvent.key === "End" || oEvent.key === " ") {
 				oEvent.stopPropagation();
 			}
 

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

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @extends sap.ui.unified.RecurrenceRule
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @private

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

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @class
 	 * NonWorkingPeriod
 	 * @extends sap.ui.core.Element
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -42,7 +42,7 @@ sap.ui.define([
 	 * </pre>
 	 *
 	 * @extends sap.ui.core.Element
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -36,7 +36,7 @@ sap.ui.define([
 	 *
 	 * Applications could inherit from this element to add own fields.
 	 * @extends sap.ui.unified.CalendarAppointment
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -34,7 +34,7 @@ sap.ui.define([
 	 *
 	 * Applications can inherit from this element to add own fields.
 	 * @extends sap.ui.unified.NonWorkingPeriod
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -25,7 +25,7 @@ sap.ui.define(['./ShellHeader', './ShellLayout', './library', './ShellRenderer']
 	 * @extends sap.ui.unified.ShellLayout
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -56,7 +56,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -46,7 +46,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @class
 	 * Time range for use in <code>NonWorkingPeriod</code>
 	 * @extends sap.ui.core.Element
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * with <code>recurrenceType</code> set to <code>Weekly</code> is provided.
 	 *
 	 * @extends sap.ui.unified.RecurrenceRule
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @private

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

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * with <code>recurrenceType</code> set to <code>Yearly</code> is provided.
 	 *
 	 * @extends sap.ui.unified.MonthlyRecurrenceRule
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @private

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

@@ -39,7 +39,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.unified.calendar.Month
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -27,7 +27,7 @@ sap.ui.define([
 	 *
 	 * <b>Note:</b> This is used inside the calendar. Not for standalone usage
 	 * @extends sap.ui.core.Control
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * This control serves for picking an item from a grid with items which are relative periods in Plannig Calendar.
 	 * This is used inside the sap.m.PlanningCalendar relative views. Not for stand alone usage.
 	 * @extends sap.ui.core.Control
-	 * @version 1.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @private

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.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public
@@ -2237,12 +2237,7 @@ sap.ui.define([
 			this._sLastTargetId = oDomRef.id;
 			this._selectedWithMouse = true;
 		}
-
-		if (this._bFocusFromTouch) {
-			oDomRef.classList.add("sapUiCalItemFocusFromTouch");
-		} else {
-			oDomRef.classList.remove("sapUiCalItemFocusFromTouch");
-		}
+		oDomRef.classList.toggle("sapUiCalItemFocusFromTouch", !!this._bFocusFromTouch);
 
 		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.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public

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.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public
@@ -280,6 +280,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");
+			}
+		}
+
 	};
 
 	MonthsRow.prototype.onsapfocusleave = function(oEvent){
@@ -1008,6 +1016,8 @@ sap.ui.define([
 		if (this.getIntervalSelection()) {
 			this._selectedWithMouse = false;
 		}
+
+		this._bFocusFromTouch = false;
 	};
 
 	MonthsRow.prototype.onsapselect = function(oEvent){
@@ -1030,6 +1040,12 @@ sap.ui.define([
 
 	};
 
+	MonthsRow.prototype.ontouchstart = function(oEvent){
+		if (oEvent.target.closest(".sapUiCalItem")) {
+			this._bFocusFromTouch = true;
+		}
+	};
+
 	MonthsRow.prototype.onsappageupmodifiers = function(oEvent){
 
 		// not handled by ItemNavigation
@@ -1203,6 +1219,7 @@ sap.ui.define([
 		this.setDate(oFocusedDate.toLocalJSDate());
 
 		this.fireFocus({date: oFocusedDate.toLocalJSDate(), notVisible: false});
+		aDomRefs[iIndex].classList.toggle("sapUiCalItemFocusFromTouch", !!this._bFocusFromTouch);
 
 		if (oEvent.type == "mousedown") {
 			// as no click event is fired in some cases, e.g. if DOM changed select the month on mousedown

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.152.0
+	 * @version 1.153.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.152.0
+	 * @version 1.153.0
 	 *
 	 * @constructor
 	 * @public
@@ -236,6 +236,24 @@ sap.ui.define([
 
 		_initItemNavigation.call(this);
 
+		if (this._bFocusFromTouch) {
+			const iFocusedIndex = this._oItemNavigation.getFocusedIndex();
+			const oDomRef = this._oItemNavigation.getItemDomRefs()[iFocusedIndex];
+			if (oDomRef) {
+				oDomRef.classList.add("sapUiCalItemFocusFromTouch");
+			}
+		}
+
+	};
+
+	TimesRow.prototype.ontouchstart = function(oEvent) {
+		if (oEvent.target.closest(".sapUiCalItem")) {
+			this._bFocusFromTouch = true;
+		}
+	};
+
+	TimesRow.prototype.onkeydown = function(oEvent) {
+		this._bFocusFromTouch = false;
 	};
 
 	TimesRow.prototype.onsapfocusleave = function(oEvent){
@@ -1081,6 +1099,9 @@ sap.ui.define([
 
 		this.fireFocus({date: CalendarUtils._createLocalDate(oFocusedDate, true), notVisible: false});
 
+		var oDomRef = aDomRefs[iIndex];
+		oDomRef.classList.toggle("sapUiCalItemFocusFromTouch", !!this._bFocusFromTouch);
+
 		if (oEvent.type == "mousedown") {
 			// as no click event is fired in some cases, e.g. if DOM changed select the month on mousedown
 			_handleMousedown.call(this, oEvent, oFocusedDate, iIndex);

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.152.0
+	 * @version 1.153.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.152.0
+	 * @version 1.153.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.152.0
+	 * @version 1.153.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.152.0
+	 * @version 1.153.0
 	 * @since 1.28
 	 * @public
 	 */
 	var thisLib = Library.init({
 		name : "sap.ui.unified",
 		apiVersion: 2,
-		version: "1.152.0",
+		version: "1.153.0",
 		dependencies : ["sap.ui.core"],
 		designtime: "sap/ui/unified/designtime/library.designtime",
 		types: [

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

@@ -189,6 +189,7 @@ html.sap-desktop .sapUiCalCancel:active {
 }
 
 html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
+.sapUiCalHead button.sapUiCalDsbl:focus-visible,
 .sapUiCalHead button.sapUiCalDsbl:hover,
 .sapUiCalHead button.sapUiCalDsbl:active {
 	background-color: var(--sapButton_Lite_Background);

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

@@ -243,7 +243,8 @@ Use it only if there's one appointment per day for a row that doesn't have inter
 }
 
 html.sap-desktop .sapUiCalendarApp:hover:not(:active),
-html.sap-desktop .sapUiCalendarApp:focus:not(:active) > .sapUiCalendarAppCont {
+html.sap-desktop .sapUiCalendarApp:focus:not(:active) > .sapUiCalendarAppCont,
+.sapUiCalendarApp:not(.sapUiCalItemFocusFromTouch):focus-visible:not(:active) > .sapUiCalendarAppCont {
 	background-color: var(--sapList_Hover_Background);
 }
 
@@ -257,7 +258,8 @@ html.sap-desktop .sapUiCalendarApp:hover:not(:active) > .sapUiCalendarAppCont {
 }
 
 html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active),
-html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active) > .sapUiCalendarAppCont {
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active) > .sapUiCalendarAppCont,
+.sapUiCalendarApp.sapUiCalendarAppSel:not(.sapUiCalItemFocusFromTouch):focus-visible:not(:active) > .sapUiCalendarAppCont {
 	background-color: darken(@sapUiSelected, 10);
 }
 

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

@@ -470,7 +470,9 @@
 	/* style the '%' symbols */
 	.sapUiCPPercentSymbol {
 		font-size: 0.75rem;
-		line-height: 3rem; /* vertical alignment of the '%' symbol */
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		width: 0.9375rem;
 		padding-left: 1px;
 	}

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

@@ -21,7 +21,8 @@
 }
 
 /* as outlines can't have different offsets on one side (no left border) and don't work in IE just use a inner border */
-html.sap-desktop .sapUiCalendarApp:focus > .sapUiCalendarAppCont:after{
+html.sap-desktop .sapUiCalendarApp:focus > .sapUiCalendarAppCont:after,
+.sapUiCalendarApp:focus-visible > .sapUiCalendarAppCont:after{
 	position: absolute;
 	top: 0;
 	left: 0;