@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/package-scripts.cjs

@@ -5,6 +5,10 @@ const options = {
 	portStep: 2,
 	noWatchTS: true,
 	dev: true,
+	internal: {
+		cypress_code_coverage: false,
+		cypress_acc_tests: false,
+	},
 };
 
 const scripts = getScripts(options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-4e88b8243",
+  "version": "0.0.0-50f1454ef",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -26,11 +26,15 @@
     "build": "wc-dev build",
     "bundle": "nps build.bundle",
     "test": "wc-dev test",
-    "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "test:suite-1": "wc-dev test-suite-1",
     "test:suite-2": "wc-dev test-suite-2",
     "test:cypress": "nps test-cy-ci",
+    "test:cypress:suite-1": "nps test-cy-ci-suite-1",
+    "test:cypress:suite-2": "nps test-cy-ci-suite-2",
     "test:cypress:open": "nps test-cy-open",
+    "test:cypress:single": "npx cypress run --component --browser chrome --spec",
+    "test:vitest": "yarn vitest run",
+    "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "tsc -b"
   },
@@ -50,16 +54,19 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-4e88b8243",
-    "@ui5/webcomponents-icons": "0.0.0-4e88b8243",
-    "@ui5/webcomponents-icons-business-suite": "0.0.0-4e88b8243",
-    "@ui5/webcomponents-icons-tnt": "0.0.0-4e88b8243",
-    "@ui5/webcomponents-localization": "0.0.0-4e88b8243",
-    "@ui5/webcomponents-theming": "0.0.0-4e88b8243"
+    "@ui5/webcomponents-base": "0.0.0-50f1454ef",
+    "@ui5/webcomponents-icons": "0.0.0-50f1454ef",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-50f1454ef",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-50f1454ef",
+    "@ui5/webcomponents-localization": "0.0.0-50f1454ef",
+    "@ui5/webcomponents-theming": "0.0.0-50f1454ef"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-4e88b8243",
-    "chromedriver": "^131.0.0",
-    "lit": "^2.0.0"
+    "@ui5/cypress-internal": "0.0.0",
+    "@ui5/webcomponents-tools": "0.0.0-50f1454ef",
+    "chromedriver": "^135.0.0",
+    "jsdom": "^26.0.0",
+    "lit": "^2.0.0",
+    "vitest": "^3.0.2"
   }
 }

package/src/AvatarGroupTemplate.tsx

@@ -19,6 +19,7 @@ export default function AvatarGroupTemplate(this: AvatarGroup) {
 				<slot onClick={this.onAvatarClick} onui5-click={this.onAvatarUI5Click}></slot>
 
 				{this._customOverflowButton ?
+					// @ts-expect-error
 					<slot onClick={this.onOverflowButtonClick} name="overflowButton"></slot>
 					:
 					<Button

package/src/AvatarTemplate.tsx

@@ -18,7 +18,7 @@ export default function AvatarTemplate(this: Avatar) {
 				<slot></slot>
 				:
 				<>
-					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon}></Icon> }
+					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon> }
 
 					{ this.initials &&
 					<>

package/src/BarTemplate.tsx

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

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -1,3 +1,4 @@
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import type Breadcrumbs from "./Breadcrumbs.js";
 import Button from "./Button.js";
 import List from "./List.js";
@@ -5,6 +6,10 @@ import ListItemStandard from "./ListItemStandard.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 
 export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
+	const itemsToDisplay = isPhone()
+		? this._mobilePopoverItems
+		: this._overflowItemsData;
+
 	return (
 		<ResponsivePopover
 			class="ui5-breadcrumbs-popover"
@@ -21,7 +26,7 @@ export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
 				separators="None"
 				onSelectionChange={this._onOverflowListItemSelect}
 			>
-				{this._overflowItemsData.map(item =>
+				{itemsToDisplay.map(item =>
 					<ListItemStandard
 						id={`${item._id}-li`}
 						accessibleName={item.accessibleName}

package/src/BusyIndicatorTemplate.tsx

@@ -30,6 +30,7 @@ export default function BusyIndicatorTemplate(this: BusyIndicator) {
 				<span
 					data-ui5-focus-redirect
 					tabindex={0}
+					role="none"
 					onFocusIn={this._redirectFocus}
 				></span>
 			)}

package/src/ButtonBadgeTemplate.tsx

@@ -0,0 +1,6 @@
+import type ButtonBadge from "./ButtonBadge.js";
+import Tag from "./Tag.js";
+
+export default function ButtonTemplate(this: ButtonBadge) {
+	return <Tag design="Critical" hide-state-icon>{this.effectiveText}</Tag>;
+}

package/src/ButtonTemplate.tsx

@@ -11,7 +11,12 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 	return (<>
 		<button
 			type="button"
-			class="ui5-button-root"
+			class={{
+				"ui5-button-root": true,
+				"ui5-button-badge-placement-end": this.badge[0]?.design === "InlineText",
+				"ui5-button-badge-placement-end-top": this.badge[0]?.design === "OverlayText",
+				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot",
+			}}
 			disabled={this.disabled}
 			data-sap-focus-ref
 			aria-pressed={injectedProps?.ariaPressed}
@@ -31,7 +36,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			aria-controls={this.accessibilityAttributes.controls}
 			aria-haspopup={this._hasPopup}
 			aria-label={this.ariaLabelText}
-			aria-describedby={this.ariaDescribedbyText}
 			aria-description={this.ariaDescriptionText}
 			title={this.buttonTitle}
 			part="button"
@@ -43,7 +47,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 					name={this.icon}
 					mode="Decorative"
 					part="icon"
-					showTooltip={this.showIconTooltip}
 				/>
 			}
 
@@ -62,8 +65,8 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				/>
 			}
 
-			{this.hasButtonType &&
-				<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{this.buttonTypeText}</span>
+			{this.shouldRenderBadge &&
+				<slot name="badge"/>
 			}
 		</button>
 	</>);

package/src/CalendarHeaderTemplate.tsx

@@ -53,6 +53,18 @@ export default function CalendarTemplate(this: Calendar) {
 						<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 ui5-calheader-yearrange-btn-disabled"
+					hidden={this._isHeaderYearRangeButtonHidden}
+					tabindex={-1}
+				>
+					<span>{this._headerYearRangeButtonText}</span>
+					{this.hasSecondaryCalendarType &&
+						<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
+					}
+				</div>
 			</div>
 
 			<div

package/src/CardHeaderTemplate.tsx

@@ -12,8 +12,6 @@ export default function CardHeaderTemplate(this: CardHeader) {
 				"ui5-card-header-ff": isFirefox(),
 			}}
 			part="root"
-			role="group"
-			aria-roledescription={this.ariaRoleDescription}
 			onClick={this._click}
 			onKeyDown={this._keydown}
 			onKeyUp={this._keyup}
@@ -21,6 +19,7 @@ export default function CardHeaderTemplate(this: CardHeader) {
 			<div
 				class="ui5-card-header-focusable-element"
 				aria-labelledby={this.ariaLabelledBy}
+				aria-roledescription={this.ariaRoleDescription}
 				role={this.ariaRoleFocusableElement}
 				data-sap-focus-ref
 				tabindex={0}

package/src/CarouselTemplate.tsx

@@ -11,8 +11,9 @@ export default function CarouselTemplate(this: Carousel) {
 				[`ui5-carousel-background-${this._backgroundDesign}`]: true,
 			}}
 			tabindex={0}
-			role="listbox"
+			role="list"
 			aria-label={this.ariaLabelTxt}
+			aria-roledescription={this._roleDescription}
 			aria-activedescendant={this.ariaActiveDescendant}
 			onFocusIn={this._onfocusin}
 			onKeyDown={this._onkeydown}
@@ -30,7 +31,7 @@ export default function CarouselTemplate(this: Carousel) {
 							}}
 							style={{ width: `${this._itemWidth || 0}px` }}
 							part="item"
-							role="option"
+							role="listitem"
 							aria-posinset={itemInfo.posinset}
 							aria-setsize={itemInfo.setsize}
 							aria-selected = {itemInfo.selected}

package/src/ColorPaletteItemTemplate.tsx

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

package/src/ColorPaletteTemplate.tsx

@@ -40,7 +40,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 					)}
 				</div>
 
-				{this._showMoreColors &&
+				{this.showMoreColors &&
 					<div class="ui5-cp-more-colors-wrapper">
 						<div class="ui5-cp-separator"></div>
 						<Button
@@ -66,7 +66,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 				}
 			</div>
 
-			{ this._effectiveShowMoreColors && this.moreColorsFeature?.template.call(this) }
+			{ this.showMoreColors && this.showMoreColorsTemplate?.call(this) }
 		</>
 	);
 }

package/src/ColorPickerTemplate.tsx

@@ -2,6 +2,7 @@ import type ColorPicker from "./ColorPicker.js";
 import Label from "./Label.js";
 import Slider from "./Slider.js";
 import Input from "./Input.js";
+import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
@@ -46,7 +47,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 						value={this._alpha}
 						accessibleName={this.alphaSliderLabel}
 						showTooltip={true}
-						onInput={this._handleAlphaInputFromSlider}
+						onInput={this._handleAlphaInput}
 					/>
 				}
 			</div>
@@ -57,7 +58,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<span class="ui5-color-picker-color">
 						<div
 							class="ui5-color-picker-color-inner"
-							style={{ "background-color": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})` }}
+							style={{ "background-color": this._colorValue.toRGBString() }}
 						></div>
 					</span>
 				</div>
@@ -66,7 +67,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<Label>Hex</Label>
 					<Input
 						class="ui5-color-picker-hex-input"
-						value={this.hex}
+						value={this.HEX}
 						onKeyDown={this._onkeydown}
 						accessibleName={this.hexInputLabel}
 						onChange={this._handleHEXChange}
@@ -77,50 +78,49 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 
 			{this._isDefaultPickerMode &&
 				<div
-					class="ui5-color-picker-rgb-wrapper"
-					onui5-change={this._handleRGBInputsChange}
+					class="ui5-color-channel-inputs-wrapper"
+					onui5-change={this._handleColorInputChange}
 				>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="red"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.redInputLabel}
-							value={String(this._value.r)}
-						/>
-						<Label>R</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="green"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.greenInputLabel}
-							value={String(this._value.g)}
-						/>
-						<Label>G</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="blue"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.blueInputLabel}
-							value={String(this._value.b)}
-						/>
-						<Label>B</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
+					{this.colorChannelInputs.map(input =>
+						<><div class="ui5-color-channel">
+							<Input
+								id={input.id}
+								class="ui5-color-channel-input"
+								disabled={this.inputsDisabled}
+								accessibleName={input.accessibleName}
+								value={String(input.value)} />
+							<Label>{input.label}</Label>
+						</div>
+						<div class="ui5-color-channel-percentage-label">
+							{input.showPercentSymbol &&
+								<Label>%</Label>
+							}
+						</div></>
+					)}
+
+					<div class="ui5-color-channel">
 						<Input
 							id="alpha"
 							disabled={this.inputsDisabled}
-							class="ui5-color-picker-rgb-input"
+							class="ui5-color-channel-input"
 							value={String(this._alpha)}
 							accessibleName={this.alphaInputLabel}
 							onChange={this._handleAlphaChange}
+							onInput={this._handleAlphaInput}
 						/>
 						<Label>A</Label>
 					</div>
+
+					<div>
+						<Button
+							class="ui5-color-channel-toggle"
+							id="toggle-picker-mode"
+							icon="expand"
+							design="Transparent"
+							tooltip={this.toggleModeTooltip}
+							onClick={this._togglePickerMode}
+						/>
+					</div>
 				</div>
 			}
 		</section>

package/src/ComboBoxItemGroupTemplate.tsx

@@ -1,8 +1,8 @@
-import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
+import ListBoxItemGroupTemplate from "./ListBoxItemGroupTemplate.js";
 import type ComboBoxItemGroup from "./ComboBoxItemGroup.js";
 
 export default function ComboBoxItemGroupTemplate(this: ComboBoxItemGroup) {
-	return [ListItemGroupTemplate.call(this, { items })];
+	return [ListBoxItemGroupTemplate.call(this, { items })];
 }
 
 function items(this: ComboBoxItemGroup) {

package/src/DatePickerInputTemplate.tsx

@@ -1,6 +1,6 @@
 import type DatePicker from "./DatePicker.js";
+import DateTimeInput from "./DateTimeInput.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
 
 export default function DatePickerInputTemplate(this: DatePicker) {
 	return (
@@ -10,7 +10,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				width: "100%",
 			}}
 		>
-			<Input
+			<DateTimeInput
 				data-sap-focus-ref
 				id={`${this._id}-inner`}
 				class="ui5-date-picker-input"
@@ -22,13 +22,14 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				readonly={this.readonly}
 				valueState={this.valueState}
 				_inputAccInfo={this.accInfo}
+				_shouldOpenValueStatePopover={!this.open}
 				onChange={this._onInputChange}
 				onInput={this._onInputInput}
 				onSubmit={this._onInputSubmit}
 				onKeyDown={this._onkeydown}
 			>
 
-				{this.valueStateMessage.length > 0 &&
+				{!this.open && this.valueStateMessage.length > 0 &&
 					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
 				}
 
@@ -48,7 +49,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 						onClick={this._togglePicker}
 					/>
 				}
-			</Input>
+			</DateTimeInput>
 		</div>
 	);
 }

package/src/DatePickerPopoverTemplate.tsx

@@ -1,9 +1,16 @@
 import type DatePicker from "./DatePicker.js";
 import Button from "./Button.js";
 import Calendar from "./Calendar.js";
+import Icon from "./Icon.js";
 import CalendarDate from "./CalendarDate.js";
 import ResponsivePopover from "./ResponsivePopover.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
 
 type TemplateHook = () => void;
 
@@ -15,6 +22,7 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 	return (
 		<ResponsivePopover
 			id={`${this._id}-responsive-popover`}
+			class="ui5-date-picker-popover"
 			opener={this}
 			open={this.open}
 			allowTargetOverlap
@@ -30,6 +38,8 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 		>
 			{ this.showHeader && header.call(this) }
 
+			{ valueStateTextHeader.call(this) }
+
 			{ content.call(this) }
 
 			{ this.showFooter && footer.call(this) }
@@ -77,4 +87,45 @@ function defaultContent(this: DatePicker) {
 	);
 }
 
+function valueStateMessage(this: DatePicker) {
+	return (
+		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
+	);
+}
+
+function valueStateTextHeader(this: DatePicker) {
+	if (!this.hasValueStateText) {
+		return;
+	}
+
+	return (
+		<div
+			slot={!isPhone() ? "header" : undefined}
+			class={{
+				"ui5-popover-header": true,
+				"ui5-valuestatemessage-header": true,
+				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
+				"ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+			}}
+		>
+			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
+			{ valueStateMessage.call(this) }
+		</div>
+	);
+}
+
+function valueStateMessageInputIcon(this: DatePicker) {
+	const iconPerValueState = {
+		Negative: error,
+		Critical: alert,
+		Positive: sysEnter2,
+		Information: information,
+	};
+
+	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+}
+
 function defaultFooter() {}

package/src/DateTimePickerTemplate.tsx

@@ -12,14 +12,14 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { header, content, footer }),
+		DatePickerPopoverTemplate.call(this, { content, footer }),
 	];
 }
 
-function header(this: DateTimePicker) {
+function content(this: DateTimePicker) {
 	return (
 		<>
-			{ this.phone &&
+			{ this._phoneView &&
 				<div class="ui5-dt-picker-header">
 					<SegmentedButton class="ui5-dt-picker-toggle-button" onSelectionChange={this._dateTimeSwitchChange}>
 						<SegmentedButtonItem data-ui5-key="Date" selected={this.showDateView}>{this.btnDateLabel}</SegmentedButtonItem>
@@ -27,57 +27,54 @@ function header(this: DateTimePicker) {
 					</SegmentedButton>
 				</div>
 			}
-		</>
-	);
-}
-
-function content(this: DateTimePicker) {
-	return (
-		<div class={{
-			"ui5-dt-picker-content": true,
-			"ui5-dt-picker-content--phone": this.phone,
-		}}>
-			<Calendar
-				class={{
-					"ui5-dt-cal": true,
-					"ui5-dt-cal--hidden": this.phone && this.showTimeView,
-					"ui5-dt-time--hidden": this.phone && this.showDateView,
-				}}
-				id={`${this._id}-calendar`}
-				primaryCalendarType={this._primaryCalendarType}
-				secondaryCalendarType={this.secondaryCalendarType}
-				formatPattern={this._formatPattern}
-				selectionMode={this._calendarSelectionMode}
-				minDate={this.minDate}
-				maxDate={this.maxDate}
-				calendarWeekNumbering={this.calendarWeekNumbering}
-				onSelectionChange={this.onSelectedDatesChange}
-				onShowMonthView={this.onHeaderShowMonthPress}
-				onShowYearView={this.onHeaderShowYearPress}
-				hideWeekNumbers={this.hideWeekNumbers}
-				_currentPicker={this._calendarCurrentPicker}
-			>
-				{this._calendarSelectedDates.map(date =>
-					<CalendarDate value={date} />
-				)}
-			</Calendar>
 
-			{ !this.phone && <span class="ui5-dt-picker-separator"></span> }
-
-			{ this.showTimeView &&
-				<TimeSelectionClocks
-					id={`${this._id}-time-sel`}
+			<div class={{
+				"ui5-dt-picker-content": true,
+				"ui5-dt-picker-content--phone": this._phoneView,
+			}}>
+				<Calendar
 					class={{
-						"ui5-dt-time": true,
-						...this.classes.dateTimeView,
+						"ui5-dt-cal": true,
+						"ui5-dt-cal--hidden": this._phoneView && this.showTimeView,
+						"ui5-dt-time--hidden": this._phoneView && this.showDateView,
 					}}
+					id={`${this._id}-calendar`}
+					primaryCalendarType={this._primaryCalendarType}
+					secondaryCalendarType={this.secondaryCalendarType}
 					formatPattern={this._formatPattern}
-					value={this._timeSelectionValue}
-					onChange={this.onTimeSelectionChange}
-					_calendarType={this._primaryCalendarType}
-				/>
-			}
-		</div>
+					selectionMode={this._calendarSelectionMode}
+					minDate={this.minDate}
+					maxDate={this.maxDate}
+					calendarWeekNumbering={this.calendarWeekNumbering}
+					onSelectionChange={this.onSelectedDatesChange}
+					onShowMonthView={this.onHeaderShowMonthPress}
+					onShowYearView={this.onHeaderShowYearPress}
+					hideWeekNumbers={this.hideWeekNumbers}
+					_currentPicker={this._calendarCurrentPicker}
+				>
+					{this._calendarSelectedDates.map(date =>
+						<CalendarDate value={date} />
+					)}
+				</Calendar>
+
+				{ !this._phoneView && <span class="ui5-dt-picker-separator"></span> }
+
+				{ this.showTimeView &&
+					<TimeSelectionClocks
+						id={`${this._id}-time-sel`}
+						class={{
+							"ui5-dt-time": true,
+							"ui5-dt-cal--hidden": this._phoneView && this.showTimeView,
+							"ui5-dt-time--hidden": this._phoneView && this.showDateView,
+						}}
+						formatPattern={this._formatPattern}
+						value={this._timeSelectionValue}
+						onChange={this.onTimeSelectionChange}
+						_calendarType={this._primaryCalendarType}
+					/>
+				}
+			</div>
+		</>
 	);
 }
 
@@ -87,7 +84,7 @@ function footer(this: DateTimePicker) {
 			slot="footer"
 			class={{
 				"ui5-dt-picker-footer": true,
-				"ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView)
+				"ui5-dt-picker-footer-time-hidden": (this._phoneView && this.showTimeView) || (this._phoneView && this.showDateView)
 			}}>
 			<Button
 				id="ok"

package/src/DayPickerTemplate.tsx

@@ -42,6 +42,7 @@ export default function DayPickerTemplate(this: DayPicker) {
 										data-sap-focus-ref={day.focusRef ? "true" : undefined}
 										data-sap-timestamp={day.timestamp}
 										role="gridcell"
+										title={day.tooltip}
 										aria-selected={day.ariaSelected}
 										aria-label={day.ariaLabel}
 										aria-disabled={day.ariaDisabled}

package/src/DialogTemplate.tsx

@@ -13,7 +13,7 @@ export default function DialogTemplate(this: Dialog) {
 
 function beforeContent(this: Dialog) {
 	return (<>
-		{this._displayHeader &&
+		{!!this._displayHeader &&
 			<header>
 				<div
 					class="ui5-popup-header-root"