@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/package-scripts.cjs

@@ -5,6 +5,8 @@ const options = {
 	portStep: 2,
 	noWatchTS: true,
 	dev: true,
+	standalone: false,
+	cssVariablesTarget: "host",
 	internal: {
 		cypress_code_coverage: false,
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-47cc17a26",
+  "version": "0.0.0-49bade48d",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -21,7 +21,9 @@
     "start": "wc-dev start",
     "watch": "wc-dev watch",
     "generate": "wc-dev generate",
-    "generateAPI": "wc-dev generateAPI",
+    "generateCEM": "wc-dev generateAPI.generateCEM",
+    "mergeCEM": "wc-dev generateAPI.mergeCEM",
+    "validateCEM": "wc-dev generateAPI.validateCEM",
     "build": "wc-dev build",
     "bundle": "wc-dev build.bundle",
     "test": "yarn test:cypress",
@@ -52,24 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-47cc17a26",
-    "@ui5/webcomponents-icons": "0.0.0-47cc17a26",
-    "@ui5/webcomponents-icons-business-suite": "0.0.0-47cc17a26",
-    "@ui5/webcomponents-icons-tnt": "0.0.0-47cc17a26",
-    "@ui5/webcomponents-localization": "0.0.0-47cc17a26",
-    "@ui5/webcomponents-theming": "0.0.0-47cc17a26"
+    "@ui5/webcomponents-base": "0.0.0-49bade48d",
+    "@ui5/webcomponents-icons": "0.0.0-49bade48d",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-49bade48d",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-49bade48d",
+    "@ui5/webcomponents-localization": "0.0.0-49bade48d",
+    "@ui5/webcomponents-theming": "0.0.0-49bade48d"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "0.0.0-47cc17a26",
-    "chokidar-cli": "^3.0.0",
-    "cypress": "^15.3.0",
-    "eslint": "^7.22.0",
+    "@ui5/webcomponents-tools": "0.0.0-49bade48d",
+    "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "508f3ea3c324a85782038c46078fadda70785fb2"
+  "gitHead": "11a0183fb2973739e3549bcbc83bc249dd503784"
 }

package/src/AvatarBadgeTemplate.tsx

@@ -0,0 +1,17 @@
+import type AvatarBadge from "./AvatarBadge.js";
+import Icon from "./Icon.js";
+
+export default function AvatarBadgeTemplate(this: AvatarBadge) {
+	return (
+		<>
+			{!this.invalid && (
+				<Icon
+					name={this.icon}
+					class="ui5-avatar-badge-icon"
+					title={this.effectiveTooltip}
+					mode="Image"
+				></Icon>
+			)}
+		</>
+	);
+}

package/src/AvatarGroupTemplate.tsx

@@ -6,7 +6,14 @@ export default function AvatarGroupTemplate(this: AvatarGroup) {
 	return (
 		<div class="ui5-avatar-group-root">
 			<div
-				class="ui5-avatar-group-items"
+				class={{
+					"ui5-avatar-group-items": true,
+					"ui5-avatar-group-items-xs": this.firstAvatarSize === AvatarSize.XS,
+					"ui5-avatar-group-items-s": this.firstAvatarSize === AvatarSize.S,
+					"ui5-avatar-group-items-m": this.firstAvatarSize === AvatarSize.M,
+					"ui5-avatar-group-items-l": this.firstAvatarSize === AvatarSize.L,
+					"ui5-avatar-group-items-xl": this.firstAvatarSize === AvatarSize.XL,
+				}}
 				role={this._role}
 				tabindex={this._groupTabIndex}
 				aria-label={this._ariaLabelText}

package/src/AvatarTemplate.tsx

@@ -8,6 +8,7 @@ export default function AvatarTemplate(this: Avatar) {
 			tabindex={this.tabindex}
 			data-sap-focus-ref
 			role={this._role}
+			aria-hidden={this.effectiveAriaHidden}
 			aria-haspopup={this._ariaHasPopup}
 			aria-label={this.accessibleNameText}
 			onKeyUp={this._onkeyup}

package/src/BarTemplate.tsx

@@ -4,7 +4,7 @@ export default function BarTemplate(this: Bar) {
 	return (
 		<div
 			class="ui5-bar-root"
-			aria-label={this.accInfo.role && this.accInfo.label}
+			aria-label={this.accInfo.label}
 			role={this.accInfo.role}
 			part="bar"
 		>

package/src/BreadcrumbsTemplate.tsx

@@ -52,7 +52,6 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
 					<li class="ui5-breadcrumbs-current-location" onClick={this._onLabelPress}>
 						<span
 							id={`${this._id}-labelWrapper`}
-							role="link"
 							aria-current="page"
 							aria-label={this._currentLocationAccName}
 						>

package/src/CalendarHeaderTemplate.tsx

@@ -4,86 +4,157 @@ 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}
+			onKeyDown={this.onPrevButtonKeyDown}
+			onKeyUp={this.onPrevButtonKeyUp}
+			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}
+				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={{
@@ -93,8 +164,22 @@ export default function CalendarTemplate(this: Calendar) {
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
+				onKeyDown={this.onNextButtonKeyDown}
+				onKeyUp={this.onNextButtonKeyUp}
+				tabindex={this._nextButtonDisabled ? -1 : 0}
+				title={this.accInfo.tooltipNextButton}
+				aria-label={this.accInfo.ariaLabelNextButton}
+				aria-description={this.accInfo.ariaLabelNextButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutNextButton}
 			>
 				<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,19 +7,153 @@ 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 id={`${this._id}-content`} class="ui5-cal-content">
+				{!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>
+
+				{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}
 						specialCalendarDates={this._specialCalendarDates}
+						disabledDates={this._disabledDates}
 						_hidden={this._isDayPickerHidden}
 						primaryCalendarType={this._primaryCalendarType}
 						secondaryCalendarType={this._secondaryCalendarType}
@@ -27,77 +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 class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
-					{ CalendarHeaderTemplate.call(this) }
-				</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"
+		/>
+	);
 }