@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/package-scripts.cjs

@@ -0,0 +1,18 @@
+const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js");
+
+const options = {
+	port: 8080,
+	portStep: 2,
+	noWatchTS: true,
+	dev: true,
+	internal: {
+		cypress_code_coverage: false,
+		cypress_acc_tests: false,
+	},
+};
+
+const scripts = getScripts(options);
+
+module.exports = {
+	scripts
+};

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-e7dd012d7",
+  "version": "0.0.0-ebd9a4db3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
   },
+  "type": "module",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
+  "customElements": "./dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -16,13 +18,35 @@
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
+    "lint:scope": "nps scope.lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "serve": "wc-dev serve",
+    "generate": "nps generate",
+    "generateAPI": "nps generateAPI",
     "build": "wc-dev build",
+    "bundle": "nps build.bundle",
     "test": "wc-dev test",
+    "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": "npm run build"
+    "prepublishOnly": "tsc -b"
+  },
+  "exports": {
+    "./.port": "./.port",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.esm.js": "./bundle.esm.js",
+    "./bundle.common.js": "./bundle.common.js",
+    "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
+    "./*": "./dist/*"
   },
   "repository": {
     "type": "git",
@@ -30,13 +54,19 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-e7dd012d7",
-    "@ui5/webcomponents-icons": "0.0.0-e7dd012d7",
-    "@ui5/webcomponents-localization": "0.0.0-e7dd012d7",
-    "@ui5/webcomponents-theme-base": "0.0.0-e7dd012d7"
+    "@ui5/webcomponents-base": "0.0.0-ebd9a4db3",
+    "@ui5/webcomponents-icons": "0.0.0-ebd9a4db3",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-ebd9a4db3",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-ebd9a4db3",
+    "@ui5/webcomponents-localization": "0.0.0-ebd9a4db3",
+    "@ui5/webcomponents-theming": "0.0.0-ebd9a4db3"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-e7dd012d7",
-    "chromedriver": "latest"
+    "@ui5/cypress-internal": "0.0.0",
+    "@ui5/webcomponents-tools": "0.0.0-ebd9a4db3",
+    "chromedriver": "^135.0.0",
+    "jsdom": "^26.0.0",
+    "lit": "^2.0.0",
+    "vitest": "^3.0.2"
   }
 }

package/src/AvatarGroupTemplate.tsx

@@ -0,0 +1,46 @@
+import type AvatarGroup from "./AvatarGroup.js";
+import Button from "./Button.js";
+import AvatarSize from "./types/AvatarSize.js";
+
+export default function AvatarGroupTemplate(this: AvatarGroup) {
+	return (
+		<div class="ui5-avatar-group-root">
+			<div
+				class="ui5-avatar-group-items"
+				role={this._role}
+				tabindex={this._groupTabIndex}
+				aria-label={this._ariaLabelText}
+				aria-haspopup={this._containerAriaHasPopup}
+				onClick={this._onClick}
+				onKeyUp={this._onkeyup}
+				onKeyDown={this._onkeydown}
+				onFocusIn={this._onfocusin}
+			>
+				<slot onClick={this.onAvatarClick} onui5-click={this.onAvatarUI5Click}></slot>
+
+				{this._customOverflowButton ?
+					// @ts-expect-error
+					<slot onClick={this.onOverflowButtonClick} name="overflowButton"></slot>
+					:
+					<Button
+						onClick={this.onOverflowButtonClick}
+						accessibilityAttributes={this._overflowButtonAccAttributes}
+						accessibleName={this._overflowButtonAriaLabelText}
+						hidden={this._overflowBtnHidden}
+						nonInteractive={this._isGroup}
+						class={{
+							"ui5-avatar-group-overflow-btn": true,
+							"ui5-avatar-group-overflow-btn-xs": this.firstAvatarSize === AvatarSize.XS,
+							"ui5-avatar-group-overflow-btn-s": this.firstAvatarSize === AvatarSize.S,
+							"ui5-avatar-group-overflow-btn-m": this.firstAvatarSize === AvatarSize.M,
+							"ui5-avatar-group-overflow-btn-l": this.firstAvatarSize === AvatarSize.L,
+							"ui5-avatar-group-overflow-btn-xl": this.firstAvatarSize === AvatarSize.XL,
+						}}
+					>
+						{this._overflowButtonText}
+					</Button>
+				}
+			</div>
+		</div>
+	);
+}

package/src/AvatarTemplate.tsx

@@ -0,0 +1,38 @@
+import type Avatar from "./Avatar.js";
+import Icon from "./Icon.js";
+
+export default function AvatarTemplate(this: Avatar) {
+	return (
+		<div
+			class="ui5-avatar-root"
+			tabindex={this.tabindex}
+			data-sap-focus-ref
+			role={this._role}
+			aria-haspopup={this._ariaHasPopup}
+			aria-label={this.accessibleNameText}
+			onKeyUp={this._onkeyup}
+			onKeyDown={this._onkeydown}
+			onClick={this._onclick}
+		>
+			{this.hasImage ?
+				<slot></slot>
+				:
+				<>
+					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon> }
+
+					{ this.initials &&
+					<>
+						<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{this.validInitials}</span>
+						<Icon
+							name={this.fallbackIcon}
+							class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+						></Icon>
+					</>
+					}
+				</>
+			}
+
+			<slot name="badge"></slot>
+		</div>
+	);
+}

package/src/BarTemplate.tsx

@@ -0,0 +1,21 @@
+import type Bar from "./Bar.js";
+
+export default function BarTemplate(this: Bar) {
+	return (
+		<div
+			class="ui5-bar-root"
+			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">
+				<slot name="startContent"></slot>
+			</div>
+			<div class="ui5-bar-content-container ui5-bar-midcontent-container" part="midContent">
+				<slot></slot>
+			</div>
+			<div class="ui5-bar-content-container ui5-bar-endcontent-container" part="endContent">
+				<slot name="endContent"></slot>
+			</div>
+		</div>);
+}

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -0,0 +1,48 @@
+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";
+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"
+			hideArrow={true}
+			_hideHeader={true}
+			contentOnlyOnDesktop={true}
+			placement="Bottom"
+			horizontalAlign="Start"
+			accessibleName={this._accessibleNamePopover}
+			onKeyDown={this._onkeydown}
+		>
+			<List
+				selectionMode="Single"
+				separators="None"
+				onSelectionChange={this._onOverflowListItemSelect}
+			>
+				{itemsToDisplay.map(item =>
+					<ListItemStandard
+						id={`${item._id}-li`}
+						accessibleName={item.accessibleName}
+						data-ui5-stable={item.stableDomRef}
+					>
+						{item.textContent}
+					</ListItemStandard>
+				)}
+			</List>
+
+			<div slot="footer" class="ui5-breadcrumbs-popover-footer">
+				<Button
+					design="Transparent"
+					onClick={this._closeRespPopover}
+				>{this._cancelButtonText}</Button>
+			</div>
+		</ResponsivePopover>
+	);
+}

package/src/BreadcrumbsTemplate.tsx

@@ -0,0 +1,71 @@
+import type Breadcrumbs from "./Breadcrumbs.js";
+import BreadcrumbsPopoverTemplate from "./BreadcrumbsPopoverTemplate.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import Icon from "./Icon.js";
+import Link from "./Link.js";
+import Label from "./Label.js";
+
+export default function BreadcrumbsTemplate(this: Breadcrumbs) {
+	return (
+		<>
+			<nav class="ui5-breadcrumbs-root" aria-label={this._accessibleNameText}>
+				<ol
+					onFocusIn={this._onfocusin}
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}>
+
+					<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" hidden={this._isOverflowEmpty}>
+						<Link
+							wrappingType="None"
+							accessibleRole="Button"
+							accessibleName={this._dropdownArrowAccessibleNameText}
+							accessibilityAttributes={this.linkAccessibilityAttributes}
+							onClick={this._openRespPopover}
+						>
+							<Icon name={slimArrowDown} title={this._dropdownArrowAccessibleNameText}/>
+						</Link>
+					</li>
+
+					{this._linksData.map(linkData =>
+						<li id={`${linkData._id}-link-wrapper`} class="ui5-breadcrumbs-link-wrapper">
+							<Link
+								id={`${linkData._id}-link`}
+								href={linkData.href}
+								target={linkData.target}
+								design={linkData._linkDesign}
+								accessibleName={linkData._accessibleNameText}
+								accessibilityAttributes={linkData.accessibilityAttributes}
+								data-ui5-stable={linkData.stableDomRef}
+								wrappingType="None"
+								onClick={this._onLinkPress}
+							>
+								{linkData.innerText}
+							</Link>
+
+							{linkData._needsSeparator &&
+							<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
+							}
+						</li>
+					)}
+
+					{!this._endsWithCurrentLinkItem && this._endsWithCurrentLocation &&
+					<li class="ui5-breadcrumbs-current-location" onClick={this._onLabelPress}>
+						<span
+							id={`${this._id}-labelWrapper`}
+							role="link"
+							aria-current="page"
+							aria-label={this._currentLocationAccName}
+						>
+							<Label>
+								{this._currentLocationText}
+							</Label>
+						</span>
+					</li>
+					}
+				</ol>
+			</nav>
+
+			{ BreadcrumbsPopoverTemplate.call(this) }
+		</>
+	);
+}

package/src/BusyIndicatorTemplate.tsx

@@ -0,0 +1,52 @@
+import type BusyIndicator from "./BusyIndicator.js";
+import Label from "./Label.js";
+
+export default function BusyIndicatorTemplate(this: BusyIndicator) {
+	return (
+		<div class="ui5-busy-indicator-root">
+			{this._isBusy && (
+				<div
+					class="ui5-busy-indicator-busy-area"
+					title={this.ariaTitle}
+					tabindex={0}
+					role="progressbar"
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuetext="Busy"
+					aria-labelledby={this.labelId}
+					data-sap-focus-ref
+				>
+					{this.textPosition.top && BusyIndicatorBusyText.call(this)}
+					<div class="ui5-busy-indicator-circles-wrapper">
+						<div class="ui5-busy-indicator-circle circle-animation-0"></div>
+						<div class="ui5-busy-indicator-circle circle-animation-1"></div>
+						<div class="ui5-busy-indicator-circle circle-animation-2"></div>
+					</div>
+					{this.textPosition.bottom && BusyIndicatorBusyText.call(this)}
+				</div>
+			)}
+			<slot></slot>
+			{this._isBusy && (
+				<span
+					data-ui5-focus-redirect
+					tabindex={0}
+					role="none"
+					onFocusIn={this._redirectFocus}
+				></span>
+			)}
+		</div>
+	);
+}
+
+function BusyIndicatorBusyText(this: BusyIndicator) {
+	return (<>
+		{this.text && (
+			<Label
+				id={`${this._id}-label`}
+				class="ui5-busy-indicator-text"
+			>
+				{this.text}
+			</Label>
+		)}
+	</>);
+}

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

@@ -0,0 +1,73 @@
+import type Button from "./Button.js";
+import Icon from "./Icon.js";
+
+export default function ButtonTemplate(this: Button, injectedProps?: {
+		ariaPressed?: boolean,
+		ariaValueMax?: number,
+		ariaValueMin?: number,
+		ariaValueNow?: number,
+		ariaValueText?: string,
+}) {
+	return (<>
+		<button
+			type="button"
+			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}
+			aria-valuemin={injectedProps?.ariaValueMin}
+			aria-valuemax={injectedProps?.ariaValueMax}
+			aria-valuenow={injectedProps?.ariaValueNow}
+			aria-valuetext={injectedProps?.ariaValueText}
+			onFocusOut={this._onfocusout}
+			onClick={this._onclick}
+			onMouseDown={this._onmousedown}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+			onTouchStart={this._ontouchstart}
+			onTouchEnd={this._ontouchend}
+			tabindex={this.tabIndexValue}
+			aria-expanded={this.accessibilityAttributes.expanded}
+			aria-controls={this.accessibilityAttributes.controls}
+			aria-haspopup={this._hasPopup}
+			aria-label={this.ariaLabelText}
+			aria-description={this.ariaDescriptionText}
+			title={this.buttonTitle}
+			part="button"
+			role={this.effectiveAccRole}
+		>
+			{ this.icon &&
+				<Icon
+					class="ui5-button-icon"
+					name={this.icon}
+					mode="Decorative"
+					part="icon"
+				/>
+			}
+
+			<span id={`${this._id}-content`} class="ui5-button-text">
+				<bdi>
+					<slot></slot>
+				</bdi>
+			</span>
+
+			{this.endIcon &&
+				<Icon
+					class="ui5-button-end-icon"
+					name={this.endIcon}
+					mode="Decorative"
+					part="endIcon"
+				/>
+			}
+
+			{this.shouldRenderBadge &&
+				<slot name="badge"/>
+			}
+		</button>
+	</>);
+}

package/src/CalendarHeaderTemplate.tsx

@@ -0,0 +1,83 @@
+import type Calendar from "./Calendar.js";
+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) {
+	return (
+		<div class="ui5-calheader-root">
+			<div
+				data-ui5-cal-header-btn-prev
+				class={{
+					"ui5-calheader-arrowbtn": true,
+					"ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
+				}}
+				role="button"
+				onMouseDown={this.onPrevButtonClick}
+				title={this.headerPreviousButtonText}
+			>
+				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
+			</div>
+
+			<div class="ui5-calheader-midcontainer">
+				<div
+					data-ui5-cal-header-btn-month
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					hidden={this._isHeaderMonthButtonHidden}
+					tabindex={0}
+					role="button"
+					aria-label={this.accInfo.ariaLabelMonthButton}
+					onClick={this.onHeaderShowMonthPress}
+					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"
+					hidden={this._isHeaderYearButtonHidden}
+					tabindex={0}
+					role="button"
+					onClick={this.onHeaderShowYearPress}
+					onKeyDown={this.onYearButtonKeyDown}
+					onKeyUp={this.onYearButtonKeyUp}
+				>
+					<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 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
+				data-ui5-cal-header-btn-next
+				class={{
+					"ui5-calheader-arrowbtn": true,
+					"ui5-calheader-arrowbtn-disabled": this._nextButtonDisabled,
+				}}
+				role="button"
+				onMouseDown={this.onNextButtonClick}
+				title={this.headerNextButtonText}
+			>
+				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
+			</div>
+		</div>);
+}

package/src/CalendarLegendItemTemplate.tsx

@@ -0,0 +1,15 @@
+import type CalendarLegendItem from "./CalendarLegendItem.js";
+
+export default function CalendarLegendItemTemplate(this: CalendarLegendItem) {
+	return (
+		<div
+			class="ui5-calendar-legend-item-root"
+			// TOFIX: update after changing ITabbable
+			tabindex={parseInt(this.forcedTabIndex)}
+			role="listitem"
+		>
+			<div class="ui5-calendar-legend-item-box"></div>
+			<div class="ui5-calendar-legend-item-text">{this.effectiveText}</div>
+		</div>
+	);
+}

package/src/CalendarLegendTemplate.tsx

@@ -0,0 +1,22 @@
+import type CalendarLegend from "./CalendarLegend.js";
+import CalendarLegendItem from "./CalendarLegendItem.js";
+
+export default function CalendarLegendTemplate(this: CalendarLegend) {
+	return (
+		<div class="ui5-calendar-legend-root"
+			onFocusOut={this._onFocusOut}
+			onFocusIn={this._onFocusIn}
+			onKeyDown={this._onItemKeyDown}
+			onMouseDown={this._onMouseDown}
+			role="list"
+			aria-roledescription={this._roleDescription}
+		>
+			{this.defaultItemsMapping.filter(item => !item.hide).map(item =>
+				<CalendarLegendItem type={item.type}/>
+			)}
+
+			{this.legendItems.map(item =>
+				<slot name={item._individualSlot}></slot>
+			)}
+		</div>);
+}

package/src/CalendarTemplate.tsx

@@ -0,0 +1,82 @@
+import type Calendar from "./Calendar.js";
+import DayPicker from "./DayPicker.js";
+import MonthPicker from "./MonthPicker.js";
+import YearPicker from "./YearPicker.js";
+import CalendarHeaderTemplate from "./CalendarHeaderTemplate.js";
+
+export default function CalendarTemplate(this: Calendar) {
+	return (
+		<>
+			<div
+				class="ui5-cal-root"
+				onKeyDown={this._onkeydown}
+			>
+				<div id={`${this._id}-content`} class="ui5-cal-content">
+					<DayPicker
+						id={`${this._id}-daypicker`}
+						hidden={this._isDayPickerHidden}
+						formatPattern={this._formatPattern}
+						selectedDates={this._selectedDatesTimestamps}
+						specialCalendarDates={this._specialCalendarDates}
+						_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"
+					/>
+
+					<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"
+					/>
+
+					<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}
+						onChange={this.onSelectedYearChange}
+						onNavigate={this.onNavigate}
+						exportparts="year-cell, year-cell-selected, year-cell-selected-between"
+					/>
+				</div>
+
+				<div class="ui5-calheader">
+					{ 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>
+		</>);
+}