@ui5/webcomponents 2.21.0-rc.4 → 2.22.0-rc.0

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/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
 

package/src/themes/Breadcrumbs.css

@@ -51,7 +51,7 @@
     width: var(--sapFontSize);
     height: var(--sapFontSize);
     padding-left: .675rem;
-    vertical-align: text-top;
+    vertical-align: middle;
     color: var(--sapLinkColor);
 }
 
@@ -61,10 +61,11 @@
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
     content: "...";
-    vertical-align: middle;
     position: absolute;
     left: 0;
-    bottom: 0;
+    top: 0.1rem;
+    line-height: 1rem;
+    vertical-align: middle;
 }
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link]::part(root),
@@ -78,11 +79,11 @@
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
     content: "";
     position: absolute;
-    border-bottom: 0.0625rem solid;
-    top: 0;
+    height: 0.0725rem;
+    background-color: currentColor;
     left: 0;
-    bottom: 1px;
     right: 0;
+    bottom: 0.3475rem;
 }
 
 .ui5-breadcrumbs-popover {

package/src/themes/Calendar.css

@@ -17,8 +17,152 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    position: relative;
+}
+
+.ui5-dt-cal--multiple.ui5-cal-root {
+    width: var(--_ui5_calendar_multiple_width);
+	height: var(--_ui5_calendar_multiple_months_height);
+}
+
+.ui5-dt-cal--portrait.ui5-dt-cal--multiple {
+	height: calc(2 * var(--_ui5_calendar_height));
 }
 
 .ui5-cal-root .ui5-cal-content {
     padding: 0 var(--_ui5_calendar_left_right_padding) var(--_ui5_calendar_top_bottom_padding);
+}
+
+.ui5-cal-root .ui5-cal-content-multiple {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    flex-wrap: nowrap;
+    overflow: visible;
+}
+
+.ui5-cal-multiple-months-wrapper, .ui5-cal-multiple-months-header-wrapper {
+    display: flex;
+    gap: var(--_ui5_calendar_multiple_gap);
+    flex-wrap: nowrap;
+    flex-direction: var(--_ui5_calendar_multiple_layout);
+}
+
+.ui5-cal-multiple-months-header-wrapper {
+	width: 100%;
+}
+
+.ui5-cal-month-container, .ui5-cal-month-header-container {
+    display: flex;
+    flex-direction: column;
+	flex: 1;
+}
+
+.ui5-cal-root .ui5-calheader.ui5-calheader-multiple {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: var(--_ui5_calendar_header_height);
+    padding: var(--_ui5_calendar_header_padding);
+    box-sizing: border-box;
+}
+
+.ui5-calheader-multiple .ui5-calheader-midcontainer {
+    display: flex;
+    gap: var(--_ui5_calendar_header_midcontainer_gap);
+    flex: 1;
+    justify-content: center;
+    padding: 0;
+    height: 100%;
+}
+
+.ui5-calheader-multiple .ui5-calheader-arrowbtn {
+    flex-shrink: var(--_ui5_calendar_header_arrow_button_flex_shrink);
+    height: 100%;
+}
+
+.ui5-calheader-spacer {
+    width: var(--_ui5_calendar_header_arrow_button_width);
+    flex-shrink: 0;
+}
+
+.ui5-cal-daypicker-wrapper {
+    position: relative;
+}
+
+.ui5-cal-daypicker-overlay {
+    background-color: var(--sapBlockLayer_Background);
+    opacity: var(--sapBlockLayer_Opacity);
+    top: calc(var(--_ui5_calendar_header_height) + var(--_ui5_calendar_top_bottom_padding));
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    outline: 0 none;
+    z-index: 11;
+    pointer-events: all;
+    display: none;
+}
+
+.ui5-cal-content-multiple:has(~ .ui5-cal-overlay-container:not(.ui5-cal-overlay-hidden)) .ui5-cal-daypicker-overlay {
+    display: block;
+}
+
+.ui5-cal-overlay-container {
+  position: absolute;
+  width: var(--_ui5_calendar_overlay_width);
+  left: 50%;
+  top: var(--_ui5_calendar_overlay_top);
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 13;
+  pointer-events: all;
+  background: var(--sapGroup_ContentBackground);
+  border-radius: var(--_ui5_popup_border_radius);
+  min-height: 2rem;
+  box-sizing: border-box;
+}
+
+
+.ui5-cal-overlay-container [ui5-monthpicker]::part(month-picker-root),
+.ui5-cal-overlay-container [ui5-yearpicker]::part(year-picker-root),
+.ui5-cal-overlay-container [ui5-yearrangepicker]::part(year-range-picker-root) {
+	padding: 0.5rem;
+}
+
+.ui5-cal-overlay-hidden {
+  display: none;
+}
+
+.ui5-calheader-default-multiple, .ui5-calheader-default-multiple .ui5-calheader-root {
+	width: 100%;
+}
+
+.ui5-calheader-multiple .ui5-calheader-middlebtn {
+	flex:none;
+}
+
+.ui5-cal-root.ui5-dt-cal--portrait .ui5-cal-content-multiple {
+    gap: 0;
+}
+
+.ui5-cal-root.ui5-dt-cal--portrait .ui5-cal-multiple-months-wrapper {
+    flex-direction: column;
+    gap: var(--_ui5_calendar_multiple_gap);
+}
+
+.ui5-dt-cal--portrait.ui5-cal-root:has(.ui5-cal-content-multiple) {
+    width: var(--_ui5_calendar_width);
+}
+
+.ui5-dt-cal--portrait .ui5-cal-content-multiple > * {
+    width: 100%;
+    min-width: auto;
+    max-width: 100%;
+}
+
+.ui5-dt-cal--portrait .ui5-cal-overlay-container {
+	width: 100%;
 }

package/src/themes/DatePickerPopover.css

@@ -1,5 +1,6 @@
 .ui5-date-picker-popover {
-	width: var(--_ui5_calendar_width);
+	width: auto;
+	min-width: var(--_ui5_calendar_width);
 	.ui5-popover-header {
 		width: 100%;
 	}
@@ -13,7 +14,7 @@
 }
 
 [ui5-calendar] {
-	width: 100%;
+	width: auto;
 	display: flex;
 	justify-content: center;
 }

package/src/themes/Popup.css

@@ -9,4 +9,8 @@
 
 :host(:focus-visible) {
     outline: none;
+}
+
+:host(.ui5-popup-opening) {
+    opacity: 0.1;
 }

package/src/themes/ResponsivePopoverCommon.css

@@ -190,7 +190,8 @@
 	width: 100%;
 }
 
-.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn {
+.ui5-responsive-popover-footer .ui5-responsive-popover-close-btn, 
+.ui5-responsive-popover-footer .ui5-responsive-popover-footer-btn {
 	margin-left: 0.5rem;
 }
 
@@ -199,3 +200,7 @@
 	right: 1rem;
 }
 
+.ui5-responsive-popover-footer .ui5-responsive-popover-footer-btn {
+	width: 4.5rem;
+}
+

package/src/themes/base/CalendarHeader-parameters.css

@@ -16,4 +16,13 @@
 	--_ui5_calendar_header_middle_button_focus_active_outline: none;
 	--_ui5_calendar_header_middle_button_focus_active_background: var(--sapButton_Active_Background);
 	--_ui5_calendar_header_middle_button_focus_after_border: 1px dotted var(--sapContent_FocusColor);
+	--_ui5_calendar_header_midcontainer_gap: 0.5rem;
+	--_ui5_calendar_header_arrow_button_flex_shrink: 0;
+}
+
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_calendar_header_midcontainer_gap: 0;
+		--_ui5_calendar_header_arrow_button_flex_shrink: 1;
+	}
 }

package/src/themes/base/TextArea-parameters.css

@@ -23,7 +23,7 @@
 	--_ui5_textarea_value_state_focus_offset: 1px;
 	--_ui5_textarea_focus_outline_color: var(--sapContent_FocusColor);
 	--_ui5_textarea_min_height: 2.25rem;
-	--_ui5_textarea_wrapper_padding: 0;
+	--_ui5_textarea_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_success_wrapper_padding: 0;
 	--_ui5_textarea_warning_error_wrapper_padding: 0;
 	--_ui5_textarea_information_wrapper_padding: 0;

package/src/themes/base/sizes-parameters.css

@@ -7,6 +7,11 @@
 	--_ui5_calendar_header_height: 3rem;
 	--_ui5_calendar_header_arrow_button_width: 2.5rem;
 	--_ui5_calendar_header_padding: 0.25rem 0;
+	--_ui5_calendar_multiple_layout: row;
+	--_ui5_calendar_multiple_gap: 1rem;
+	--_ui5_calendar_multiple_width: calc((var(--_ui5_calendar_width) * 2) + (var(--_ui5_calendar_left_right_padding) * 2));
+	--_ui5_calendar_overlay_top: 57%;
+	--_ui5_calendar_overlay_width: 16rem;
 
 	--_ui5_checkbox_root_side_padding: .6875rem;
 	--_ui5_checkbox_icon_size: 1rem;
@@ -26,6 +31,7 @@
 	--_ui5_daypicker_item_now_selected_two_calendar_focus_secondary_text_padding_block: 0 0.5rem;
 	--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: 0;
 	--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
+	--_ui5_calendar_multiple_months_height: var(--_ui5_calendar_height);
 
 	/* CalendarLegend */
 	--_ui5-calendar-legend-item-root-focus-offset: -0.125rem;
@@ -177,6 +183,12 @@
 		--_ui5_calendar_header_height: 2rem;
 		--_ui5_calendar_header_arrow_button_width: 2rem;
 		--_ui5_calendar_header_padding: 0;
+		--_ui5_calendar_multiple_layout: column;
+		--_ui5_calendar_multiple_gap: 0.5rem;
+		--_ui5_calendar_multiple_width: var(--_ui5_calendar_width);
+		--_ui5_calendar_overlay_top: 54%;
+		--_ui5_calendar_overlay_width: 100%;
+		--_ui5_calendar_multiple_months_height: calc(2 * var(--_ui5_calendar_height));
 
 		/* Calendar Legend */
 		--_ui5-calendar-legend-root-padding: 0.5rem;

package/src/themes/sap_horizon/TextArea-parameters.css

@@ -16,7 +16,6 @@
 	--_ui5_textarea_readonly_focus_offset: 1px;
 	--_ui5_textarea_focus_outline_color: var(--sapField_Active_BorderColor);
 	--_ui5_textarea_value_state_focus_offset: 1px;
-	--_ui5_textarea_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_success_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_warning_error_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
 	--_ui5_textarea_information_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;

package/src/themes/sap_horizon_dark/TextArea-parameters.css

@@ -16,7 +16,6 @@
 	--_ui5_textarea_readonly_focus_offset: 1px;
 	--_ui5_textarea_focus_outline_color: var(--sapField_Active_BorderColor);
 	--_ui5_textarea_value_state_focus_offset: 1px;
-	--_ui5_textarea_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_success_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_warning_error_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
 	--_ui5_textarea_information_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;

package/src/themes/sap_horizon_hcb/parameters-bundle.css

@@ -43,6 +43,7 @@
 @import "./SplitButton-parameters.css";
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "../base/Text-parameters.css";
 @import "./TextArea-parameters.css";