@ui5/webcomponents 2.21.0 → 2.22.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.21.0",
+  "version": "2.22.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.21.0",
-    "@ui5/webcomponents-icons": "2.21.0",
-    "@ui5/webcomponents-icons-business-suite": "2.21.0",
-    "@ui5/webcomponents-icons-tnt": "2.21.0",
-    "@ui5/webcomponents-localization": "2.21.0",
-    "@ui5/webcomponents-theming": "2.21.0"
+    "@ui5/webcomponents-base": "2.22.0-rc.1",
+    "@ui5/webcomponents-icons": "2.22.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.1",
+    "@ui5/webcomponents-localization": "2.22.0-rc.1",
+    "@ui5/webcomponents-theming": "2.22.0-rc.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.21.0",
+    "@ui5/webcomponents-tools": "2.22.0-rc.1",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "a0d9146d9d08f171cabe6d826f104897261a139b"
+  "gitHead": "00afa74564cad7075396a487d66411ed6564e747"
 }

package/src/CalendarHeaderTemplate.tsx

@@ -4,91 +4,155 @@ import Icon from "./Icon.js";
 import slimArowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 
-export default function CalendarTemplate(this: Calendar) {
+interface CalendarHeaderOptions {
+	headerText?: {
+		monthText: string;
+		yearText: string;
+		secondMonthText?: string;
+		secondYearText?: string;
+	};
+	isFirst?: boolean;
+	isLast?: boolean;
+	isMultiple?: boolean;
+}
+
+export default function CalendarHeaderTemplate(this: Calendar, options?: CalendarHeaderOptions) {
+	const headerText = options?.headerText;
+	const isFirst = options?.isFirst ?? true;
+	const isLast = options?.isLast ?? true;
+	const isMultiple = options?.isMultiple ?? false;
+
+	const monthText = headerText?.monthText ?? this._headerMonthButtonText;
+	const yearText = headerText?.yearText ?? this._headerYearButtonText;
+	const secondMonthText = headerText?.secondMonthText ?? this.secondMonthButtonText;
+	const secondYearText = headerText?.secondYearText ?? this._headerYearButtonTextSecType;
+
 	return (
-		<div class="ui5-calheader-root">
+		<div class={isMultiple ? "ui5-calheader ui5-calheader-multiple" : "ui5-calheader-root"}>
+			{renderPrevButton.call(this, isFirst, isMultiple)}
+			{renderMiddleButtons.call(this, {
+				monthText: monthText || "",
+				yearText: yearText || "",
+				secondMonthText: secondMonthText || "",
+				secondYearText: secondYearText || "",
+			})}
+			{renderNextButton.call(this, isFirst, isLast, isMultiple)}
+		</div>
+	);
+}
+
+function renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean) {
+	if (!isFirst && isMultiple) {
+		return <div class="ui5-calheader-spacer"></div>;
+	}
+
+	return (
+		<div
+			data-ui5-cal-header-btn-prev
+			class={{
+				"ui5-calheader-arrowbtn": true,
+				"ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
+			}}
+			part="calendar-header-arrow-button"
+			role="button"
+			onMouseDown={this.onPrevButtonClick}
+			tabindex={this._previousButtonDisabled ? -1 : 0}
+			title={this.accInfo.tooltipPrevButton}
+			aria-label={this.accInfo.ariaLabelPrevButton}
+			aria-description={this.accInfo.ariaLabelPrevButton}
+			aria-keyshortcuts={this.accInfo.keyShortcutPrevButton}
+		>
+			<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
+		</div>
+	);
+}
+
+function renderMiddleButtons(
+	this: Calendar,
+	headerText: {
+		monthText: string;
+		yearText: string;
+		secondMonthText?: string;
+		secondYearText?: string;
+	}
+) {
+	return (
+		<div class="ui5-calheader-midcontainer">
 			<div
-				data-ui5-cal-header-btn-prev
-				class={{
-					"ui5-calheader-arrowbtn": true,
-					"ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
-				}}
-				part="calendar-header-arrow-button"
+				data-ui5-cal-header-btn-month
+				class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+				part="calendar-header-middle-button"
+				hidden={this._isHeaderMonthButtonHidden}
+				tabindex={0}
 				role="button"
-				onMouseDown={this.onPrevButtonClick}
-				tabindex={this._previousButtonDisabled ? -1 : 0}
-				title={this.accInfo.tooltipPrevButton}
-				aria-label={this.accInfo.ariaLabelPrevButton}
-				aria-description={this.accInfo.ariaLabelPrevButton}
-				aria-keyshortcuts={this.accInfo.keyShortcutPrevButton}
+				aria-label={this.accInfo.ariaLabelMonthButton}
+				aria-description={this.accInfo.ariaLabelMonthButton}
+				title={this.accInfo.tooltipMonthButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutMonthButton}
+				onClick={this.onHeaderMonthButtonPress}
+				onKeyDown={this.onMonthButtonKeyDown}
+				onKeyUp={this.onMonthButtonKeyUp}
 			>
-				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
+				<span>{headerText.monthText}</span>
+				{this.hasSecondaryCalendarType && headerText.secondMonthText &&
+					<span class="ui5-calheader-btn-sectext">{headerText.secondMonthText}</span>
+				}
 			</div>
 
-			<div class="ui5-calheader-midcontainer">
-				<div
-					data-ui5-cal-header-btn-month
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
-					part="calendar-header-middle-button"
-					hidden={this._isHeaderMonthButtonHidden}
-					tabindex={0}
-					role="button"
-					aria-label={this.accInfo.ariaLabelMonthButton}
-					aria-description={this.accInfo.ariaLabelMonthButton}
-					title={this.accInfo.tooltipMonthButton}
-					aria-keyshortcuts={this.accInfo.keyShortcutMonthButton}
-					onClick={this.onHeaderMonthButtonPress}
-					onKeyDown={this.onMonthButtonKeyDown}
-					onKeyUp={this.onMonthButtonKeyUp}
-				>
-					<span>{this._headerMonthButtonText}</span>
-					{this.hasSecondaryCalendarType &&
-						<span class="ui5-calheader-btn-sectext">{this.secondMonthButtonText}</span>
-					}
-				</div>
+			<div
+				data-ui5-cal-header-btn-year
+				class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+				part="calendar-header-middle-button"
+				hidden={this._isHeaderYearButtonHidden}
+				tabindex={0}
+				role="button"
+				aria-label={this.accInfo.ariaLabelYearButton}
+				aria-description={this.accInfo.ariaLabelYearButton}
+				onClick={this.onHeaderYearButtonPress}
+				onKeyDown={this.onYearButtonKeyDown}
+				onKeyUp={this.onYearButtonKeyUp}
+				title={this.accInfo.tooltipYearButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutYearButton}
+			>
+				<span>{headerText.yearText}</span>
+				{this.hasSecondaryCalendarType && headerText.secondYearText &&
+					<span class="ui5-calheader-btn-sectext">{headerText.secondYearText}</span>
+				}
+			</div>
 
-				<div
-					data-ui5-cal-header-btn-year
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
-					part="calendar-header-middle-button"
-					hidden={this._isHeaderYearButtonHidden}
-					tabindex={0}
-					role="button"
-					aria-label={this.accInfo.ariaLabelYearButton}
-					aria-description={this.accInfo.ariaLabelYearButton}
-					onClick={this.onHeaderYearButtonPress}
-					onKeyDown={this.onYearButtonKeyDown}
-					onKeyUp={this.onYearButtonKeyUp}
-					title={this.accInfo.tooltipYearButton}
-					aria-keyshortcuts={this.accInfo.keyShortcutYearButton}
-				>
-					<span>{this._headerYearButtonText}</span>
-					{this.hasSecondaryCalendarType &&
-						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
-					}
-				</div>
-				<div
-					data-ui5-cal-header-btn-year-range
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
-					part="calendar-header-middle-button"
-					hidden={this._isHeaderYearRangeButtonHidden}
-					tabindex={0}
-					role="button"
-					aria-label={this.accInfo.ariaLabelYearRangeButton}
-					aria-description={this.accInfo.ariaLabelYearRangeButton}
-					title={this.accInfo.tooltipYearRangeButton}
-					aria-keyshortcuts={this.accInfo.keyShortcutYearRangeButton}
-					onClick={this.onHeaderYearRangeButtonPress}
-					onKeyDown={this.onYearRangeButtonKeyDown}
-					onKeyUp={this.onYearRangeButtonKeyUp}
-				>
-					<span>{this._headerYearRangeButtonText}</span>
-					{this.hasSecondaryCalendarType &&
-						<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
-					}
-				</div>
+			<div
+				data-ui5-cal-header-btn-year-range
+				class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+				part="calendar-header-middle-button"
+				hidden={this._isHeaderYearRangeButtonHidden}
+				tabindex={0}
+				role="button"
+				aria-label={this.accInfo.ariaLabelYearRangeButton}
+				aria-description={this.accInfo.ariaLabelYearRangeButton}
+				title={this.accInfo.tooltipYearRangeButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutYearRangeButton}
+				onClick={this.onHeaderYearRangeButtonPress}
+				onKeyDown={this.onYearRangeButtonKeyDown}
+				onKeyUp={this.onYearRangeButtonKeyUp}
+			>
+				<span>{this._headerYearRangeButtonText}</span>
+				{this.hasSecondaryCalendarType &&
+					<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
+				}
 			</div>
+		</div>
+	);
+}
 
+function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isMultiple: boolean) {
+	// In portrait or compact mode, show next button only on first calendar
+	// In landscape mode, show next button only on last calendar
+	const isVertical = this._portraitView || this._isCompactMode;
+	const shouldShowNextButton = !isMultiple || (isVertical ? isFirst : isLast);
+	const shouldShowSpacer = isMultiple && (isVertical ? isLast : !isLast);
+
+	if (shouldShowNextButton) {
+		return (
 			<div
 				data-ui5-cal-header-btn-next
 				class={{
@@ -106,5 +170,12 @@ export default function CalendarTemplate(this: Calendar) {
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
 			</div>
-		</div>);
+		);
+	}
+
+	if (shouldShowSpacer) {
+		return <div class="ui5-calheader-spacer"></div>;
+	}
+
+	return null;
 }

package/src/CalendarTemplate.tsx

@@ -7,18 +7,148 @@ import CalendarHeaderTemplate from "./CalendarHeaderTemplate.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 
 export default function CalendarTemplate(this: Calendar) {
+	const showMultipleMonths = this._monthsToShow > 1 && !this._isDayPickerHidden;
+	const shouldRenderSeparateHeaders = this._isDefaultHeaderModeInMultipleMonths && !this._portraitView && !this._isCompactMode;
+	const shouldRenderInlineHeaders = this._isDefaultHeaderModeInMultipleMonths && (this._portraitView || this._isCompactMode);
+
 	return (
 		<>
 			<div
-				class="ui5-cal-root"
+				class={{
+					"ui5-cal-root": true,
+					"ui5-dt-cal--mobile": this._phoneView,
+					"ui5-dt-cal--portrait": this._portraitView,
+					"ui5-dt-cal--multiple": showMultipleMonths,
+				}}
 				onKeyDown={this._onkeydown}
 			>
-				<div class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
-					{ CalendarHeaderTemplate.call(this) }
+				{!showMultipleMonths && (
+					<div class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
+						{ CalendarHeaderTemplate.call(this) }
+					</div>
+				)}
+				<div id={`${this._id}-content`} class={{
+					"ui5-cal-content": true,
+					"ui5-cal-content-multiple": showMultipleMonths,
+				}}>
+					{showMultipleMonths ? (
+						<>
+							{/* When pickers are active, show standard calendar header */}
+							{this._shouldShowOnePickerHeaderButtonInMultipleMonths && (
+								<div class="ui5-calheader ui5-calheader-multiple ui5-calheader-default-multiple" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
+									{ CalendarHeaderTemplate.call(this) }
+								</div>
+							)}
+
+							<div class="ui5-cal-daypicker-overlay"></div>
+
+							{/* Render headers in separate loop when in horizontal layout (cozy mode, not portrait, not compact) */}
+							{shouldRenderSeparateHeaders && (
+								<div class="ui5-cal-multiple-months-header-wrapper">
+									{renderMonthHeaders.call(this)}
+								</div>
+							)}
+
+							{/* Render day pickers (with inline headers in vertical layout) */}
+							<div class="ui5-cal-multiple-months-wrapper">
+								{renderMonthPickers.call(this, shouldRenderInlineHeaders)}
+							</div>
+						</>
+					) : (
+						<>
+							<DayPicker
+								id={`${this._id}-daypicker`}
+								hidden={this._isDayPickerHidden}
+								formatPattern={this._formatPattern}
+								selectedDates={this._selectedDatesTimestamps}
+								specialCalendarDates={this._specialCalendarDates}
+								disabledDates={this._disabledDates}
+								_hidden={this._isDayPickerHidden}
+								primaryCalendarType={this._primaryCalendarType}
+								secondaryCalendarType={this._secondaryCalendarType}
+								selectionMode={this.selectionMode}
+								minDate={this.minDate}
+								maxDate={this.maxDate}
+								calendarWeekNumbering={this.calendarWeekNumbering}
+								timestamp={this._timestamp}
+								hideWeekNumbers={this.hideWeekNumbers}
+								onChange={this.onSelectedDatesChange}
+								onNavigate={this.onNavigate}
+								exportparts="day-cell, day-cell-selected, day-cell-selected-between"
+							/>
+							{renderMonthPicker.call(this)}
+							{renderYearPicker.call(this)}
+							{renderYearRangePicker.call(this)}
+						</>
+					)}
 				</div>
-				<div id={`${this._id}-content`} class="ui5-cal-content">
+
+				{showMultipleMonths && (
+					<div class={{
+						"ui5-cal-overlay-container": true,
+						"ui5-cal-overlay-hidden": this._isMonthPickerHidden && this._isYearPickerHidden && this._isYearRangePickerHidden,
+					}}>
+						{renderMonthPicker.call(this)}
+						{renderYearPicker.call(this)}
+						{renderYearRangePicker.call(this)}
+					</div>
+				)}
+			</div>
+
+			<div
+				onui5-calendar-legend-selection-change={this._onCalendarLegendSelectionChange}
+				onui5-calendar-legend-focus-out={this._onLegendFocusOut}
+			>
+				<slot name="calendarLegend"></slot>
+			</div>
+		</>);
+}
+
+/**
+ * Renders month headers in a separate loop (horizontal layout)
+ */
+function renderMonthHeaders(this: Calendar) {
+	return Array.from({ length: this._monthsToShow }, (_, index) => {
+		const monthTimestamp = this._getMonthTimestamp(index);
+		const isFirst = index === 0;
+		const isLast = index === this._monthsToShow - 1;
+
+		return (
+			<div key={`calendar-month-header-${index}`} class="ui5-cal-month-header-container">
+				{CalendarHeaderTemplate.call(this, {
+					headerText: this._getHeaderTextForMonth(monthTimestamp),
+					isFirst,
+					isLast,
+					isMultiple: true,
+				})}
+			</div>
+		);
+	});
+}
+
+/**
+ * Renders month pickers (with optional inline headers for vertical layout)
+ */
+function renderMonthPickers(this: Calendar, shouldRenderInlineHeaders: boolean) {
+	return Array.from({ length: this._monthsToShow }, (_, index) => {
+		const monthTimestamp = this._getMonthTimestamp(index);
+		const isFirst = index === 0;
+		const isLast = index === this._monthsToShow - 1;
+
+		return (
+			<div key={`calendar-month-picker-${index}`} class="ui5-cal-month-container">
+				{/* Render header inline when in vertical layout (portrait OR compact) */}
+				{shouldRenderInlineHeaders &&
+					CalendarHeaderTemplate.call(this, {
+						headerText: this._getHeaderTextForMonth(monthTimestamp),
+						isFirst,
+						isLast,
+						isMultiple: true,
+					})
+				}
+				<div class="ui5-cal-daypicker-wrapper">
 					<DayPicker
-						id={`${this._id}-daypicker`}
+						id={`${this._id}-daypicker-${index}`}
 						hidden={this._isDayPickerHidden}
 						formatPattern={this._formatPattern}
 						selectedDates={this._selectedDatesTimestamps}
@@ -31,73 +161,80 @@ export default function CalendarTemplate(this: Calendar) {
 						minDate={this.minDate}
 						maxDate={this.maxDate}
 						calendarWeekNumbering={this.calendarWeekNumbering}
-						timestamp={this._timestamp}
+						timestamp={monthTimestamp}
 						hideWeekNumbers={this.hideWeekNumbers}
 						onChange={this.onSelectedDatesChange}
 						onNavigate={this.onNavigate}
 						exportparts="day-cell, day-cell-selected, day-cell-selected-between"
-					/>
-
-					<MonthPicker
-						id={`${this._id}-MP`}
-						hidden={this._isMonthPickerHidden}
-						formatPattern={this._formatPattern}
-						selectedDates={this._selectedDatesTimestamps}
-						_hidden={this._isMonthPickerHidden}
-						primaryCalendarType={this._primaryCalendarType}
-						secondaryCalendarType={this._secondaryCalendarType}
-						selectionMode={this.selectionMode}
-						minDate={this.minDate}
-						maxDate={this.maxDate}
-						timestamp={this._timestamp}
-						onChange={this.onSelectedMonthChange}
-						onNavigate={this.onNavigate}
-						exportparts="month-cell, month-cell-selected, month-cell-selected-between, month-picker-root"
-					/>
-
-					<YearPicker
-						id={`${this._id}-YP`}
-						hidden={this._isYearPickerHidden}
-						formatPattern={this._formatPattern}
-						selectedDates={this._selectedDatesTimestamps}
-						_hidden={this._isYearPickerHidden}
-						primaryCalendarType={this._primaryCalendarType}
-						secondaryCalendarType={this._secondaryCalendarType}
-						selectionMode={this.selectionMode}
-						minDate={this.minDate}
-						maxDate={this.maxDate}
-						timestamp={this._timestamp}
-						_currentYearRange = {this._currentYearRange}
-						onChange={this.onSelectedYearChange}
-						onNavigate={this.onNavigate}
-						exportparts="year-cell, year-cell-selected, year-cell-selected-between, year-picker-root"
-					/>
-
-					<YearRangePicker
-						id={`${this._id}-YRP`}
-						hidden={this._isYearRangePickerHidden}
-						formatPattern={this._formatPattern}
-						selectedDates={this._selectedDatesTimestamps}
-						_showRangeSelection={this.selectionMode === CalendarSelectionMode.Range}
-						_hidden={this._isYearRangePickerHidden}
-						primaryCalendarType={this._primaryCalendarType}
-						secondaryCalendarType={this._secondaryCalendarType}
-						minDate={this.minDate}
-						maxDate={this.maxDate}
-						timestamp={this._timestamp}
-						_currentYearRange = {this._currentYearRange}
-						onChange={this.onSelectedYearRangeChange}
-						onNavigate={this.onNavigate}
-						exportparts="year-range-cell, year-range-cell-selected, year-range-cell-selected-between, year-range-picker-root"
+						inert={this._inert}
 					/>
 				</div>
 			</div>
+		);
+	});
+}
 
-			<div
-				onui5-calendar-legend-selection-change={this._onCalendarLegendSelectionChange}
-				onui5-calendar-legend-focus-out={this._onLegendFocusOut}
-			>
-				<slot name="calendarLegend"></slot>
-			</div>
-		</>);
+function renderMonthPicker(this: Calendar) {
+	return (
+		<MonthPicker
+			id={`${this._id}-MP`}
+			hidden={this._isMonthPickerHidden}
+			formatPattern={this._formatPattern}
+			selectedDates={this._selectedDatesTimestamps}
+			_hidden={this._isMonthPickerHidden}
+			primaryCalendarType={this._primaryCalendarType}
+			secondaryCalendarType={this._secondaryCalendarType}
+			selectionMode={this.selectionMode}
+			minDate={this.minDate}
+			maxDate={this.maxDate}
+			timestamp={this._timestamp}
+			onChange={this.onSelectedMonthChange}
+			onNavigate={this.onNavigate}
+			exportparts="month-cell, month-cell-selected, month-cell-selected-between, month-picker-root"
+		/>
+	);
+}
+
+function renderYearPicker(this: Calendar) {
+	return (
+		<YearPicker
+			id={`${this._id}-YP`}
+			hidden={this._isYearPickerHidden}
+			formatPattern={this._formatPattern}
+			selectedDates={this._selectedDatesTimestamps}
+			_hidden={this._isYearPickerHidden}
+			primaryCalendarType={this._primaryCalendarType}
+			secondaryCalendarType={this._secondaryCalendarType}
+			selectionMode={this.selectionMode}
+			minDate={this.minDate}
+			maxDate={this.maxDate}
+			timestamp={this._timestamp}
+			_currentYearRange = {this._currentYearRange}
+			onChange={this.onSelectedYearChange}
+			onNavigate={this.onNavigate}
+			exportparts="year-cell, year-cell-selected, year-cell-selected-between, year-picker-root"
+		/>
+	);
+}
+
+function renderYearRangePicker(this: Calendar) {
+	return (
+		<YearRangePicker
+			id={`${this._id}-YRP`}
+			hidden={this._isYearRangePickerHidden}
+			formatPattern={this._formatPattern}
+			selectedDates={this._selectedDatesTimestamps}
+			_showRangeSelection={this.selectionMode === CalendarSelectionMode.Range}
+			_hidden={this._isYearRangePickerHidden}
+			primaryCalendarType={this._primaryCalendarType}
+			secondaryCalendarType={this._secondaryCalendarType}
+			minDate={this.minDate}
+			maxDate={this.maxDate}
+			timestamp={this._timestamp}
+			_currentYearRange = {this._currentYearRange}
+			onChange={this.onSelectedYearRangeChange}
+			onNavigate={this.onNavigate}
+			exportparts="year-range-cell, year-range-cell-selected, year-range-cell-selected-between, year-range-picker-root"
+		/>
+	);
 }

package/src/ColorPaletteItemTemplate.tsx

@@ -6,9 +6,9 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 			class="ui5-cp-item"
 			tabindex={parseInt(this.forcedTabIndex)}
 			role="button"
-			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
+			aria-label={this.getLabelText}
 			aria-pressed={this.selected}
-			title={`${this.colorLabel} - ${this.index}: ${this.value}`}
+			title={this.getLabelText}
 		></div>
 	);
 }

package/src/DateRangePickerTemplate.tsx

@@ -4,11 +4,12 @@ import type DateRangePicker from "./DateRangePicker.js";
 
 import DatePickerInputTemplate from "./DatePickerInputTemplate.js";
 import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+import Button from "./Button.js";
 
 export default function DateRangePickerTemplate(this: DateRangePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content, initialFocus: this.initialFocusId }),
+		DatePickerPopoverTemplate.call(this, { content, initialFocus: this.initialFocusId, footer: this._isPhone ? footer : undefined }),
 	];
 }
 
@@ -29,8 +30,35 @@ function content(this: DateRangePicker) {
 			hideWeekNumbers={this.hideWeekNumbers}
 			_currentPicker={this._calendarCurrentPicker}
 			_pickersMode={this._calendarPickersMode}
+			_showTwoMonths={this.showTwoMonths}
 		>
 			<CalendarDateRange startValue={this.startValue} endValue={this.endValue} />
 		</Calendar>
 	);
 }
+
+function footer(this: DateRangePicker) {
+	return (
+		<div
+			slot="footer"
+			class="ui5-dt-picker-footer">
+			<Button
+				id="ok"
+				class="ui5-dt-picker-action"
+				design="Emphasized"
+				disabled={this._submitDisabled}
+				onClick={this._submitClick}
+			>
+				{this._okButtonText}
+			</Button>
+			<Button
+				id="cancel"
+				class="ui5-dt-picker-action"
+				design="Transparent"
+				onClick={this._cancelClick}
+			>
+				{this._cancelButtonText}
+			</Button>
+		</div>
+	);
+}

package/src/SliderTemplate.tsx

@@ -20,7 +20,6 @@ const handle = (slider: Slider) => {
 				min={slider.min}
 				max={slider.max}
 				tabIndex={slider.disabled ? -1 : 0}
-				disabled={slider.disabled}
 				aria-orientation="horizontal"
 				part="handle"
 				exportparts="icon: handle-icon"

package/src/i18n/messagebundle.properties

@@ -706,6 +706,12 @@ CALENDAR_HEADER_YEAR_BUTTON = Year {0}
 #XACT: ARIA label for year range button in the Calendar Header
 CALENDAR_HEADER_YEAR_RANGE_BUTTON = Year range from {0} to {1}
 
+#XACT: text that is used in the daterange calendar footer cancel button in mobile devices
+CALENDAR_FOOTER_CANCEL_BUTTON = Cancel
+
+#XACT: text that is used in the daterange calendar footer ok button in mobile devices
+CALENDAR_FOOTER_OK_BUTTON = OK
+
 #XACT: Keyboard shortcut for month button in the Calendar Header
 CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT = F4