@sbb-esta/lyne-elements 5.0.1 → 5.1.0

package/development/calendar.pure.js

@@ -1,8 +1,1884 @@
-import { t as SbbCalendarDayElement } from "./calendar-day.component-DS2H_TP3.js";
-import { SbbCalendarMonthElement } from "./calendar/calendar-month/calendar-month.component.js";
-import { SbbCalendarYearElement } from "./calendar/calendar-year/calendar-year.component.js";
-import { SbbCalendarWeekdayElement } from "./calendar/calendar-weekday/calendar-weekday.component.js";
-import { SbbCalendarWeeknumberElement } from "./calendar/calendar-weeknumber/calendar-weeknumber.component.js";
-import { n as SbbDateSelectedEvent, r as SbbMonthChangeEvent, t as SbbCalendarElement } from "./calendar.component-BmB8HoZt.js";
-import { t as SbbCalendarCellBaseElement } from "./calendar-cell-base-element-D9XadTz1.js";
-export { SbbCalendarCellBaseElement, SbbCalendarDayElement, SbbCalendarElement, SbbCalendarMonthElement, SbbCalendarWeekdayElement, SbbCalendarWeeknumberElement, SbbCalendarYearElement, SbbDateSelectedEvent, SbbMonthChangeEvent };
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, isServer, nothing, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { MONDAY, SbbButtonLikeBaseElement, SbbDisabledMixin, SbbElement, SbbFormAssociatedMixin, SbbLanguageController, SbbPropertyWatcherController, THURSDAY, TUESDAY, WEDNESDAY, buttonResetStyles, defaultDateAdapter, forceType, handleDistinctChange, i18nCalendarDateSelection, i18nCalendarWeekNumber, i18nNextMonth, i18nNextYear, i18nNextYearRange, i18nPreviousMonth, i18nPreviousYear, i18nPreviousYearRange, i18nYearMonthSelection, isArrowKeyOrPageKeysPressed, plainDate, readConfig, screenReaderOnlyStyles } from "./core.js";
+import { SbbSecondaryButtonElement } from "./button.pure.js";
+import { SbbIconElement } from "./icon.pure.js";
+
+//#region src/elements/calendar/common/calendar-cell-base-element.scss?inline
+var calendar_cell_base_element_default = ":host {\n  --sbb-focus-outline-offset: 0.125rem;\n  --sbb-calendar-cell-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n  font-size: var(--sbb-calendar-cell-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  cursor: var(--sbb-calendar-cell-cursor);\n  color: var(--sbb-calendar-cell-color);\n  border-radius: calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));\n  margin: var(--sbb-calendar-cell-margin);\n  padding: var(--sbb-calendar-cell-border-width);\n  background-clip: content-box;\n  transition-duration: var(--sbb-calendar-cell-transition-duration);\n  transition-timing-function: var(--sbb-calendar-cell-transition-easing-function);\n  transition-property: background-color;\n}\n\n:host(:is(sbb-calendar-weekday, sbb-calendar-weeknumber)) {\n  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-xs);\n  --sbb-calendar-day-height: var(--sbb-calendar-day-size);\n  color: var(--sbb-calendar-header-color);\n}\n\n:host(:is(sbb-calendar-day, sbb-calendar-weekday, sbb-calendar-weeknumber)) {\n  height: var(--sbb-calendar-day-height);\n  width: var(--sbb-calendar-day-width);\n}\n\n:host(:is(:state(current),[state--current])) {\n  font-weight: bold;\n}\n\n:host(:is(:state(selected),[state--selected])) {\n  border: var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);\n  padding: 0;\n}\n\n:host(:disabled) {\n  --sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);\n  --sbb-calendar-cell-cursor: unset;\n}\n\n:host(:focus-visible) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n@media (any-hover: hover) {\n  :host(:not(:disabled, :where(:is(:state(active),[state--active]), :active)):hover) {\n    background-color: var(--sbb-calendar-cell-background-color-hover);\n  }\n}\n\n@media (any-hover: hover) and (forced-colors: active) {\n  :host(:not(:disabled):hover) {\n    outline-offset: var(--sbb-focus-outline-offset);\n    outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n    --sbb-focus-outline-style: initial;\n  }\n}\n\n:host(:not(:disabled):where(:is(:state(active),[state--active]), :active)) {\n  background-color: var(--sbb-calendar-cell-background-color-active);\n}\n\n.sbb-action-base {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.sbb-calendar-year,\n.sbb-calendar-month {\n  height: var(--sbb-calendar-cell-year-month-height);\n  width: var(--sbb-calendar-cell-year-month-width);\n}\n\n:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year, .sbb-calendar-month, .sbb-calendar-day__value)::after {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  translate: -50% -50%;\n  content: \"\";\n  height: var(--sbb-calendar-cell-disabled-height);\n  width: var(--sbb-calendar-cell-disabled-width);\n  background-color: var(--sbb-calendar-cell-disabled-color);\n  rotate: -45deg;\n}\n";
+
+//#endregion
+//#region src/elements/calendar/common/calendar-cell-base-element.ts
+var SbbCalendarCellBaseElement = class extends SbbDisabledMixin(SbbButtonLikeBaseElement) {
+	static {
+		this.styles = [unsafeCSS(calendar_cell_base_element_default)];
+	}
+	constructor() {
+		super();
+		this.dateAdapter = readConfig().datetime?.dateAdapter ?? defaultDateAdapter;
+		this.addController(new SbbPropertyWatcherController(this, () => this.getParent(), {
+			dateFilter: (component) => this.setDisabledFilteredState(component),
+			min: (component) => this.setDisabledFilteredState(component),
+			max: (component) => this.setDisabledFilteredState(component),
+			value: (component) => this.setSelectedState(component)
+		}));
+	}
+	getParent() {
+		return this.getRootNode?.()?.host?.closest("sbb-calendar");
+	}
+	/**
+	* Intentionally empty, as buttons are not targeted by form reset.
+	* @internal
+	*/
+	formResetCallback() {}
+	/**
+	* Intentionally empty, as buttons are not targeted by form restore.
+	* @internal
+	*/
+	formStateRestoreCallback(_state, _reason) {}
+};
+
+//#endregion
+//#region src/elements/calendar/calendar-day/calendar-day.scss?inline
+var calendar_day_default = ".sbb-calendar-day {\n  justify-content: var(--sbb-calendar-day-justify-content);\n}\n\n.sbb-calendar-day__value {\n  display: flex;\n  height: var(--sbb-calendar-day-value-height);\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.sbb-calendar-day__extra {\n  display: var(--sbb-calendar-day-extra-display);\n  height: var(--sbb-calendar-day-extra-height);\n}\n\n::slotted(*) {\n  height: var(--sbb-calendar-day-extra-height);\n}\n";
+
+//#endregion
+//#region src/elements/calendar/calendar-day/calendar-day.component.ts
+/**
+* It displays a single day cell in the `sbb-calendar` component.
+*
+* @slot - Use the unnamed slot to add some custom content to the day.
+*/
+let SbbCalendarDayElement = (() => {
+	let _classSuper = SbbCalendarCellBaseElement;
+	let _instanceExtraInitializers = [];
+	let _set_slot_decorators;
+	let _set_value_decorators;
+	return class SbbCalendarDayElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this._value = (__runInitializers(this, _instanceExtraInitializers), null);
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_set_slot_decorators = [property()];
+			_set_value_decorators = [state()];
+			__esDecorate(this, null, _set_slot_decorators, {
+				kind: "setter",
+				name: "slot",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "slot" in obj,
+					set: (obj, value) => {
+						obj.slot = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			__esDecorate(this, null, _set_value_decorators, {
+				kind: "setter",
+				name: "value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "value" in obj,
+					set: (obj, value) => {
+						obj.value = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-calendar-day";
+		}
+		static {
+			this.styles = [unsafeCSS(calendar_day_default)];
+		}
+		set slot(value) {
+			super.slot = value;
+			this.value = this.dateAdapter.deserialize(value);
+		}
+		get slot() {
+			return super.slot;
+		}
+		/** Value of the calendar-day element. */
+		set value(value) {
+			const date = this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(value));
+			if (date) {
+				this._value = date;
+				const isToday = this.dateAdapter.sameDate(date, this.dateAdapter.today());
+				this.toggleState("current", isToday);
+				this.internals.ariaCurrent = isToday ? "date" : null;
+				this.internals.ariaLabel = this.dateAdapter.getAccessibilityFormatDate(date);
+				const parent = this.getParent();
+				if (parent) {
+					this.setDisabledFilteredState(parent);
+					this.setSelectedState(parent);
+				}
+			}
+		}
+		get value() {
+			return this._value;
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.tabIndex = -1;
+		}
+		/**
+		* The component is used as the default day cell within the `sbb-calendar`,
+		* or, if extra content is needed, it can be slotted.
+		*/
+		getParent() {
+			return this.closest?.("sbb-calendar") ?? this.getRootNode?.()?.host?.closest("sbb-calendar");
+		}
+		setSelectedState(parent) {
+			const selected = !!this.value && (parent.multiple ? parent.value.some((selDay) => this.dateAdapter.sameDate(this.value, selDay)) : !!parent.value && this.dateAdapter.compareDate(this.value, parent.value) === 0);
+			this.toggleState("selected", selected);
+			this.internals.ariaPressed = String(selected);
+		}
+		setDisabledFilteredState(parent) {
+			const isFilteredOut = !this._isActiveDate(parent.dateFilter);
+			const isOutOfRange = !this._isDayInRange(parent.min, parent.max);
+			this.disabled = isFilteredOut || isOutOfRange;
+			this.internals.ariaDisabled = String(this.disabled);
+			this.toggleState("crossed-out", isFilteredOut && !isOutOfRange);
+		}
+		_isActiveDate(dateFilter) {
+			return dateFilter && this.value ? dateFilter(this.value) : true;
+		}
+		_isDayInRange(min, max) {
+			if (!min && !max) return true;
+			return this.dateAdapter.sameDate(this.value, this.dateAdapter.clampDate(this.value, min, max));
+		}
+		_handleSlotchange(e) {
+			this.internals.ariaDescribedByElements = e.target.assignedElements();
+		}
+		renderTemplate() {
+			return html` <span class="sbb-calendar-day__value" aria-hidden="true">
+        ${this.dateAdapter.getDate(this.value)}
+      </span>
+      <span class="sbb-calendar-day__extra">
+        <slot @slotchange=${(event) => this._handleSlotchange(event)}></slot>
+      </span>`;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/calendar/calendar-month/calendar-month.component.ts
+/**
+* It displays a single month cell in the `sbb-calendar` months view.
+*/
+let SbbCalendarMonthElement = (() => {
+	let _classSuper = SbbCalendarCellBaseElement;
+	let _instanceExtraInitializers = [];
+	let _set_value_decorators;
+	return class SbbCalendarMonthElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this._monthShortNames = (__runInitializers(this, _instanceExtraInitializers), this.dateAdapter.getMonthNames("short"));
+			this._monthLongNames = this.dateAdapter.getMonthNames("long");
+			this._monthValue = null;
+			this._yearValue = null;
+			this._value = null;
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_set_value_decorators = [state()];
+			__esDecorate(this, null, _set_value_decorators, {
+				kind: "setter",
+				name: "value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "value" in obj,
+					set: (obj, value) => {
+						obj.value = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-calendar-month";
+		}
+		static {
+			this._monthFormatRegex = /^\d{4}-(0[1-9]|1[0-2])$/;
+		}
+		/**
+		* Value of the calendar-month element in ISO format (YYYY-MM).
+		*/
+		set value(value) {
+			if (!value || !SbbCalendarMonthElement._monthFormatRegex.test(value)) return;
+			this._value = value;
+			const splitDate = value.split("-");
+			this._yearValue = Number(splitDate[0]);
+			this._monthValue = Number(splitDate[1]);
+			const isToday = this._yearValue === this.dateAdapter.getYear(this.dateAdapter.today()) && this._monthValue === this.dateAdapter.getMonth(this.dateAdapter.today());
+			this.toggleState("current", isToday);
+			this.internals.ariaLabel = `${this._monthLongNames[this._monthValue - 1]} ${this._yearValue}`;
+			const parent = this.getParent();
+			if (parent) {
+				this.setDisabledFilteredState(parent);
+				this.setSelectedState(parent);
+			}
+		}
+		get value() {
+			return this._value;
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.tabIndex = -1;
+		}
+		setSelectedState(parent) {
+			const selected = !!this.value && (parent.multiple ? parent.value?.some((date) => this._yearValue === this.dateAdapter.getYear(date) && this._monthValue === this.dateAdapter.getMonth(date)) ?? false : !!parent.value && this.dateAdapter.getYear(parent.value) === this._yearValue && this.dateAdapter.getMonth(parent.value) === this._monthValue);
+			this.toggleState("selected", selected);
+			this.internals.ariaPressed = String(selected);
+		}
+		setDisabledFilteredState(parent) {
+			const isFilteredOut = !this._isActiveMonth(parent);
+			const isOutOfRange = !this._isMonthInRange(parent.min, parent.max);
+			this.disabled = isFilteredOut || isOutOfRange;
+			this.internals.ariaDisabled = String(this.disabled);
+			this.toggleState("crossed-out", isFilteredOut && !isOutOfRange);
+		}
+		_isActiveMonth(parent) {
+			if (!parent.dateFilter || !this._yearValue || !this._monthValue) return true;
+			const firstOfMonth = this.dateAdapter.createDate(this._yearValue, this._monthValue, 1);
+			for (let date = firstOfMonth; this.dateAdapter.getMonth(date) == this._monthValue; date = this.dateAdapter.addCalendarDays(date, 1)) if (parent.dateFilter(date)) return true;
+			return false;
+		}
+		_isMonthInRange(min, max) {
+			if (!min && !max || !this._yearValue || !this._monthValue) return true;
+			const isBeforeMin = this.dateAdapter.isValid(min) && (this._yearValue < this.dateAdapter.getYear(min) || this._yearValue === this.dateAdapter.getYear(min) && this._monthValue < this.dateAdapter.getMonth(min));
+			const isAfterMax = this.dateAdapter.isValid(max) && (this._yearValue > this.dateAdapter.getYear(max) || this._yearValue === this.dateAdapter.getYear(max) && this._monthValue > this.dateAdapter.getMonth(max));
+			return !(isBeforeMin || isAfterMax);
+		}
+		renderTemplate() {
+			return html`${this._monthShortNames[this._monthValue - 1]}`;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/calendar/calendar-year/calendar-year.component.ts
+/**
+* It displays a single year cell in the `sbb-calendar` years view.
+*/
+let SbbCalendarYearElement = (() => {
+	let _classSuper = SbbCalendarCellBaseElement;
+	let _instanceExtraInitializers = [];
+	let _set_value_decorators;
+	return class SbbCalendarYearElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this._value = (__runInitializers(this, _instanceExtraInitializers), null);
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_set_value_decorators = [state()];
+			__esDecorate(this, null, _set_value_decorators, {
+				kind: "setter",
+				name: "value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "value" in obj,
+					set: (obj, value) => {
+						obj.value = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-calendar-year";
+		}
+		/**
+		* Value of the calendar-year element.
+		*/
+		set value(value) {
+			const year = Number(value);
+			if (isNaN(year)) return;
+			this._value = value;
+			const isToday = this.dateAdapter.getYear(this.dateAdapter.today()) === year;
+			this.toggleState("current", isToday);
+			this.internals.ariaLabel = String(year);
+			const parent = this.getParent();
+			if (parent) {
+				this.setDisabledFilteredState(parent);
+				this.setSelectedState(parent);
+			}
+		}
+		get value() {
+			return this._value;
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.tabIndex = -1;
+		}
+		setSelectedState(parent) {
+			const selected = !!this.value && (parent.multiple ? parent.value?.some((date) => Number(this.value) === this.dateAdapter.getYear(date)) ?? false : !!parent.value && this.dateAdapter.getYear(parent.value) === Number(this.value));
+			this.toggleState("selected", selected);
+			this.internals.ariaPressed = String(selected);
+		}
+		setDisabledFilteredState(parent) {
+			const isFilteredOut = !this._isActiveYear(parent);
+			const isOutOfRange = !this._isYearInRange(parent.min, parent.max);
+			this.disabled = isFilteredOut || isOutOfRange;
+			this.internals.ariaDisabled = String(this.disabled);
+			this.toggleState("crossed-out", isFilteredOut && !isOutOfRange);
+		}
+		_isActiveYear(parent) {
+			if (!parent.dateFilter || !this.value) return true;
+			const firstOfYear = this.dateAdapter.createDate(Number(this.value), 1, 1);
+			for (let date = firstOfYear; this.dateAdapter.getYear(date) == Number(this.value); date = this.dateAdapter.addCalendarDays(date, 1)) if (parent.dateFilter(date)) return true;
+			return false;
+		}
+		_isYearInRange(min, max) {
+			if (!min && !max || !this.value) return true;
+			const isBeforeMin = this.dateAdapter.isValid(min) && this.dateAdapter.getYear(min) > Number(this.value);
+			const isAfterMax = this.dateAdapter.isValid(max) && this.dateAdapter.getYear(max) < Number(this.value);
+			return !(isBeforeMin || isAfterMax);
+		}
+		renderTemplate() {
+			return html`${this.value}`;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/calendar/calendar-weekday/calendar-weekday.component.ts
+/**
+* It displays a single week day cell in the `sbb-calendar` component.
+*/
+let SbbCalendarWeekdayElement = (() => {
+	let _classSuper = SbbCalendarCellBaseElement;
+	let _instanceExtraInitializers = [];
+	let _set_value_decorators;
+	return class SbbCalendarWeekdayElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this._value = (__runInitializers(this, _instanceExtraInitializers), null);
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_set_value_decorators = [state()];
+			__esDecorate(this, null, _set_value_decorators, {
+				kind: "setter",
+				name: "value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "value" in obj,
+					set: (obj, value) => {
+						obj.value = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-calendar-weekday";
+		}
+		/** Value of the week day element. */
+		set value(value) {
+			if (!value) return;
+			this._value = value;
+			this.internals.ariaLabel = value.long;
+		}
+		get value() {
+			return this._value;
+		}
+		setSelectedState() {}
+		setDisabledFilteredState() {}
+		renderTemplate() {
+			return html`${this.value?.narrow}`;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/calendar/calendar-weeknumber/calendar-weeknumber.component.ts
+/**
+* It displays a single week number cell in the `sbb-calendar` component.
+*/
+let SbbCalendarWeeknumberElement = (() => {
+	let _classSuper = SbbCalendarCellBaseElement;
+	let _instanceExtraInitializers = [];
+	let _set_value_decorators;
+	return class SbbCalendarWeeknumberElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this._language = (__runInitializers(this, _instanceExtraInitializers), new SbbLanguageController(this));
+			this._value = null;
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_set_value_decorators = [state()];
+			__esDecorate(this, null, _set_value_decorators, {
+				kind: "setter",
+				name: "value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "value" in obj,
+					set: (obj, value) => {
+						obj.value = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-calendar-weeknumber";
+		}
+		/** Value of the week number element. */
+		set value(value) {
+			if (!value) return;
+			this._value = String(value);
+			this.internals.ariaLabel = `${i18nCalendarWeekNumber[this._language.current]} ${value}`;
+		}
+		get value() {
+			return this._value;
+		}
+		setSelectedState() {}
+		setDisabledFilteredState() {}
+		renderTemplate() {
+			return html`${this.value}`;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/calendar/calendar/calendar.scss?inline
+var calendar_default = ":host {\n  display: block;\n  width: max-content;\n  max-width: 100%;\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:state(enhanced),[state--enhanced])) {\n  --sbb-calendar-cell-padding-block-end: var(--sbb-spacing-fixed-3x);\n}\n\n.sbb-calendar__wrapper {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sbb-calendar-tables-gap);\n  position: relative;\n}\n\n:is(.sbb-calendar__year-view, .sbb-calendar__month-view) {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\n:host(:not(:is(:state(view-day),[state--view-day]))) .sbb-calendar__day-view {\n  visibility: hidden;\n}\n\n.sbb-calendar__table-header {\n  display: flex;\n  align-items: center;\n  gap: var(--sbb-calendar-control-gap);\n  height: var(--sbb-size-element-xs);\n  margin-block-end: var(--sbb-spacing-fixed-4x);\n}\n\n.sbb-calendar__table-header span {\n  flex: 1 1 auto;\n  padding-inline-start: var(--sbb-spacing-fixed-3x);\n  color: var(--sbb-calendar-control-view-change-color);\n}\n\n.sbb-calendar__control {\n  -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-calendar__table {\n  width: 100%;\n  border-collapse: collapse;\n  height: max-content;\n  flex: 0 0;\n}\n\n.sbb-calendar__table :is(thead, tbody) {\n  text-align: center;\n}\n\n.sbb-calendar__table-header-cell,\n.sbb-calendar__table-header-cell-vertical {\n  width: var(--sbb-calendar-cell-size);\n  min-width: var(--sbb-calendar-cell-size);\n  color: var(--sbb-calendar-header-color);\n  padding: 0;\n  font-size: var(--sbb-text-font-size-xs);\n  font-weight: normal;\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n:host(:not([multiple])) .sbb-calendar__table-header-cell,\n:host(:not([multiple])) .sbb-calendar__table-header-cell-vertical {\n  height: var(--sbb-calendar-cell-size);\n}\n\n.sbb-calendar__table-header-cell-vertical {\n  padding-block-end: var(--sbb-calendar-cell-padding-block-end);\n}\n\n.sbb-calendar__table-data {\n  position: relative;\n  padding: 0;\n  text-align: center;\n}\n\n.sbb-calendar__day-cell {\n  padding-block-end: var(--sbb-calendar-cell-padding-block-end);\n}\n\n:host(:not(:is(:state(enhanced),[state--enhanced]))) sbb-calendar-day {\n  --sbb-calendar-day-justify-content: center;\n  --sbb-calendar-day-height: var(--sbb-calendar-day-size);\n  --sbb-calendar-day-extra-display: none;\n  --sbb-calendar-day-value-height: unset;\n}\n";
+
+//#endregion
+//#region src/elements/calendar/calendar/calendar.component.ts
+const DAYS_PER_ROW = 7;
+const MONTHS_PER_ROW = 4;
+const YEARS_PER_ROW = 4;
+const MONTHS_PER_PAGE = 12;
+const YEARS_PER_PAGE = 24;
+var SbbMonthChangeEvent = class extends Event {
+	get range() {
+		return this._range;
+	}
+	constructor(range) {
+		super("monthchange", {
+			bubbles: true,
+			composed: true
+		});
+		this._range = Object.freeze(range || []);
+	}
+};
+var SbbDateSelectedEvent = class extends Event {
+	get dateSelected() {
+		return this._dateSelected;
+	}
+	constructor(dates) {
+		super("dateselected", {
+			bubbles: true,
+			composed: true
+		});
+		this._dateSelected = Object.freeze(dates);
+	}
+};
+/**
+* It displays a calendar which allows choosing a date.
+*
+* @slot - Use the unnamed slot to add customized `sbb-calendar-day` elements.
+*/
+let SbbCalendarElement = (() => {
+	let _classSuper = SbbFormAssociatedMixin(SbbElement);
+	let _instanceExtraInitializers = [];
+	let _amount_decorators;
+	let _amount_initializers = [];
+	let _amount_extraInitializers = [];
+	let _view_decorators;
+	let _view_initializers = [];
+	let _view_extraInitializers = [];
+	let _min_decorators;
+	let _min_initializers = [];
+	let _min_extraInitializers = [];
+	let _max_decorators;
+	let _max_initializers = [];
+	let _max_extraInitializers = [];
+	let _multiple_decorators;
+	let _multiple_initializers = [];
+	let _multiple_extraInitializers = [];
+	let _set_value_decorators;
+	let __value_decorators;
+	let __value_initializers = [];
+	let __value_extraInitializers = [];
+	let _dateFilter_decorators;
+	let _dateFilter_initializers = [];
+	let _dateFilter_extraInitializers = [];
+	let _set_fixedMonth_decorators;
+	let _orientation_decorators;
+	let _orientation_initializers = [];
+	let _orientation_extraInitializers = [];
+	let _weekNumbers_decorators;
+	let _weekNumbers_initializers = [];
+	let _weekNumbers_extraInitializers = [];
+	let __activeDate_decorators;
+	let __activeDate_initializers = [];
+	let __activeDate_extraInitializers = [];
+	let __calendarView_decorators;
+	let __calendarView_initializers = [];
+	let __calendarView_extraInitializers = [];
+	let __initialized_decorators;
+	let __initialized_initializers = [];
+	let __initialized_extraInitializers = [];
+	return class SbbCalendarElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_amount_decorators = [forceType(), property({ type: Number })];
+			_view_decorators = [property()];
+			_min_decorators = [plainDate(), property()];
+			_max_decorators = [plainDate(), property()];
+			_multiple_decorators = [
+				forceType(),
+				handleDistinctChange((e, newValue) => e._onMultipleChanged(newValue)),
+				property({ type: Boolean })
+			];
+			_set_value_decorators = [property()];
+			__value_decorators = [state()];
+			_dateFilter_decorators = [property({ attribute: "date-filter" })];
+			_set_fixedMonth_decorators = [forceType(), property({ attribute: "fixed-month" })];
+			_orientation_decorators = [property({ reflect: true })];
+			_weekNumbers_decorators = [forceType(), property({
+				attribute: "week-numbers",
+				type: Boolean
+			})];
+			__activeDate_decorators = [state()];
+			__calendarView_decorators = [state()];
+			__initialized_decorators = [state()];
+			__esDecorate(this, null, _amount_decorators, {
+				kind: "accessor",
+				name: "amount",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "amount" in obj,
+					get: (obj) => obj.amount,
+					set: (obj, value) => {
+						obj.amount = value;
+					}
+				},
+				metadata: _metadata
+			}, _amount_initializers, _amount_extraInitializers);
+			__esDecorate(this, null, _view_decorators, {
+				kind: "accessor",
+				name: "view",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "view" in obj,
+					get: (obj) => obj.view,
+					set: (obj, value) => {
+						obj.view = value;
+					}
+				},
+				metadata: _metadata
+			}, _view_initializers, _view_extraInitializers);
+			__esDecorate(this, null, _min_decorators, {
+				kind: "accessor",
+				name: "min",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "min" in obj,
+					get: (obj) => obj.min,
+					set: (obj, value) => {
+						obj.min = value;
+					}
+				},
+				metadata: _metadata
+			}, _min_initializers, _min_extraInitializers);
+			__esDecorate(this, null, _max_decorators, {
+				kind: "accessor",
+				name: "max",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "max" in obj,
+					get: (obj) => obj.max,
+					set: (obj, value) => {
+						obj.max = value;
+					}
+				},
+				metadata: _metadata
+			}, _max_initializers, _max_extraInitializers);
+			__esDecorate(this, null, _multiple_decorators, {
+				kind: "accessor",
+				name: "multiple",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "multiple" in obj,
+					get: (obj) => obj.multiple,
+					set: (obj, value) => {
+						obj.multiple = value;
+					}
+				},
+				metadata: _metadata
+			}, _multiple_initializers, _multiple_extraInitializers);
+			__esDecorate(this, null, _set_value_decorators, {
+				kind: "setter",
+				name: "value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "value" in obj,
+					set: (obj, value) => {
+						obj.value = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			__esDecorate(this, null, __value_decorators, {
+				kind: "accessor",
+				name: "_value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_value" in obj,
+					get: (obj) => obj._value,
+					set: (obj, value) => {
+						obj._value = value;
+					}
+				},
+				metadata: _metadata
+			}, __value_initializers, __value_extraInitializers);
+			__esDecorate(this, null, _dateFilter_decorators, {
+				kind: "accessor",
+				name: "dateFilter",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "dateFilter" in obj,
+					get: (obj) => obj.dateFilter,
+					set: (obj, value) => {
+						obj.dateFilter = value;
+					}
+				},
+				metadata: _metadata
+			}, _dateFilter_initializers, _dateFilter_extraInitializers);
+			__esDecorate(this, null, _set_fixedMonth_decorators, {
+				kind: "setter",
+				name: "fixedMonth",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "fixedMonth" in obj,
+					set: (obj, value) => {
+						obj.fixedMonth = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			__esDecorate(this, null, _orientation_decorators, {
+				kind: "accessor",
+				name: "orientation",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "orientation" in obj,
+					get: (obj) => obj.orientation,
+					set: (obj, value) => {
+						obj.orientation = value;
+					}
+				},
+				metadata: _metadata
+			}, _orientation_initializers, _orientation_extraInitializers);
+			__esDecorate(this, null, _weekNumbers_decorators, {
+				kind: "accessor",
+				name: "weekNumbers",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "weekNumbers" in obj,
+					get: (obj) => obj.weekNumbers,
+					set: (obj, value) => {
+						obj.weekNumbers = value;
+					}
+				},
+				metadata: _metadata
+			}, _weekNumbers_initializers, _weekNumbers_extraInitializers);
+			__esDecorate(this, null, __activeDate_decorators, {
+				kind: "accessor",
+				name: "_activeDate",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_activeDate" in obj,
+					get: (obj) => obj._activeDate,
+					set: (obj, value) => {
+						obj._activeDate = value;
+					}
+				},
+				metadata: _metadata
+			}, __activeDate_initializers, __activeDate_extraInitializers);
+			__esDecorate(this, null, __calendarView_decorators, {
+				kind: "accessor",
+				name: "_calendarView",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_calendarView" in obj,
+					get: (obj) => obj._calendarView,
+					set: (obj, value) => {
+						obj._calendarView = value;
+					}
+				},
+				metadata: _metadata
+			}, __calendarView_initializers, __calendarView_extraInitializers);
+			__esDecorate(this, null, __initialized_decorators, {
+				kind: "accessor",
+				name: "_initialized",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_initialized" in obj,
+					get: (obj) => obj._initialized,
+					set: (obj, value) => {
+						obj._initialized = value;
+					}
+				},
+				metadata: _metadata
+			}, __initialized_initializers, __initialized_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-calendar";
+		}
+		static {
+			this.elementDependencies = [
+				SbbCalendarDayElement,
+				SbbCalendarMonthElement,
+				SbbCalendarWeekdayElement,
+				SbbCalendarWeeknumberElement,
+				SbbCalendarYearElement,
+				SbbIconElement,
+				SbbSecondaryButtonElement
+			];
+		}
+		static {
+			this.styles = [
+				buttonResetStyles,
+				screenReaderOnlyStyles,
+				unsafeCSS(calendar_default)
+			];
+		}
+		static {
+			this.events = {
+				dateselected: "dateselected",
+				monthchange: "monthchange"
+			};
+		}
+		#amount_accessor_storage;
+		/**
+		* The amount of months to display in this calendar.
+		*/
+		get amount() {
+			return this.#amount_accessor_storage;
+		}
+		set amount(value) {
+			this.#amount_accessor_storage = value;
+		}
+		#view_accessor_storage;
+		/** The initial view of the calendar which should be displayed on opening. */
+		get view() {
+			return this.#view_accessor_storage;
+		}
+		set view(value) {
+			this.#view_accessor_storage = value;
+		}
+		#min_accessor_storage;
+		/**
+		* The minimum valid date. Accepts a date object or null.
+		* Accepts an ISO8601 formatted string (e.g. 2024-12-24) as attribute.
+		*/
+		get min() {
+			return this.#min_accessor_storage;
+		}
+		set min(value) {
+			this.#min_accessor_storage = value;
+		}
+		#max_accessor_storage;
+		/**
+		* The maximum valid date. Accepts a date object or null.
+		* Accepts an ISO8601 formatted string (e.g. 2024-12-24) as attribute.
+		*/
+		get max() {
+			return this.#max_accessor_storage;
+		}
+		set max(value) {
+			this.#max_accessor_storage = value;
+		}
+		#multiple_accessor_storage;
+		/** Whether the calendar allows for multiple date selection. */
+		get multiple() {
+			return this.#multiple_accessor_storage;
+		}
+		set multiple(value) {
+			this.#multiple_accessor_storage = value;
+		}
+		/**
+		* The selected date: accepts a date object, or, if `multiple`, an array of dates.
+		*/
+		set value(value) {
+			if (Array.isArray(value)) this._value = value.map((dateLike) => this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(dateLike))).filter((date) => date !== null).filter((date) => !this._isDayInRange(this._dateAdapter.toIso8601(date)) || this._dateFilter(date)).sort(this._sortDate);
+			else {
+				const selectedDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
+				if (!!selectedDate && (!this._isDayInRange(this._dateAdapter.toIso8601(selectedDate)) || this._dateFilter(selectedDate))) this._value = selectedDate;
+				else this._value = null;
+			}
+		}
+		get value() {
+			return this._value;
+		}
+		#_value_accessor_storage;
+		get _value() {
+			return this.#_value_accessor_storage;
+		}
+		set _value(value) {
+			this.#_value_accessor_storage = value;
+		}
+		#dateFilter_accessor_storage;
+		/** A function used to filter out dates. */
+		get dateFilter() {
+			return this.#dateFilter_accessor_storage;
+		}
+		set dateFilter(value) {
+			this.#dateFilter_accessor_storage = value;
+		}
+		/**
+		* Set this with the format `YYYY-MM` to limit the calendar to a specific month,
+		* and prevent navigation to other months.
+		*/
+		set fixedMonth(value) {
+			const match = value ? value.match(/^(\d{4})-(\d{2})$/) : null;
+			this._fixedMonth = match ? this._dateAdapter.createDate(Number(match[1]), Number(match[2]), 1) : null;
+		}
+		get fixedMonth() {
+			return this._fixedMonth ? this._dateAdapter.toIso8601(this._fixedMonth).split("-").slice(0, 2).join("-") : "";
+		}
+		#orientation_accessor_storage;
+		/** The orientation of days in the calendar. */
+		get orientation() {
+			return this.#orientation_accessor_storage;
+		}
+		set orientation(value) {
+			this.#orientation_accessor_storage = value;
+		}
+		#weekNumbers_accessor_storage;
+		/** Whether it has to display the week numbers in addition to week days. */
+		get weekNumbers() {
+			return this.#weekNumbers_accessor_storage;
+		}
+		set weekNumbers(value) {
+			this.#weekNumbers_accessor_storage = value;
+		}
+		#_activeDate_accessor_storage;
+		/** The currently active date. */
+		get _activeDate() {
+			return this.#_activeDate_accessor_storage;
+		}
+		set _activeDate(value) {
+			this.#_activeDate_accessor_storage = value;
+		}
+		#_calendarView_accessor_storage;
+		get _calendarView() {
+			return this.#_calendarView_accessor_storage;
+		}
+		set _calendarView(value) {
+			this.#_calendarView_accessor_storage = value;
+		}
+		/** A list of calendar's cells corresponding to days, months or years depending on the view. */
+		get _cells() {
+			return Array.from((this._calendarView === "day" ? Array.from(this.shadowRoot.querySelectorAll("slot")).flatMap((e) => e.assignedElements({ flatten: true })) : this.shadowRoot?.querySelectorAll(`sbb-calendar-${this._calendarView}`)) ?? []);
+		}
+		#_initialized_accessor_storage;
+		get _initialized() {
+			return this.#_initialized_accessor_storage;
+		}
+		set _initialized(value) {
+			this.#_initialized_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.#amount_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _amount_initializers, 1));
+			this.#view_accessor_storage = (__runInitializers(this, _amount_extraInitializers), __runInitializers(this, _view_initializers, "day"));
+			this.#min_accessor_storage = (__runInitializers(this, _view_extraInitializers), __runInitializers(this, _min_initializers, null));
+			this.#max_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, null));
+			this.#multiple_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _multiple_initializers, false));
+			this.#_value_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, __value_initializers, null));
+			this.#dateFilter_accessor_storage = (__runInitializers(this, __value_extraInitializers), __runInitializers(this, _dateFilter_initializers, null));
+			this._fixedMonth = (__runInitializers(this, _dateFilter_extraInitializers), null);
+			this.#orientation_accessor_storage = __runInitializers(this, _orientation_initializers, "horizontal");
+			this.#weekNumbers_accessor_storage = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, _weekNumbers_initializers, false));
+			this._dateAdapter = (__runInitializers(this, _weekNumbers_extraInitializers), readConfig().datetime?.dateAdapter ?? defaultDateAdapter);
+			this.#_activeDate_accessor_storage = __runInitializers(this, __activeDate_initializers, this._dateAdapter.today());
+			this.#_calendarView_accessor_storage = (__runInitializers(this, __activeDate_extraInitializers), __runInitializers(this, __calendarView_initializers, "day"));
+			/** A list of days, in two formats (long and single char). */
+			this._weekdays = __runInitializers(this, __calendarView_extraInitializers);
+			/** Grid of calendar cells representing the dates of the month. */
+			this._weeks = [];
+			/** The first visible day in the calendar. */
+			this._firstVisibleDay = "";
+			/** The last visible day in the calendar. */
+			this._lastVisibleDay = "";
+			/** An array containing all the month names in the current language. */
+			this._monthNames = this._dateAdapter.getMonthNames("long");
+			this._enhancedVariant = false;
+			/** Whether the focus should be reset on focusCell. */
+			this._resetFocus = false;
+			/** Whether an element inside the calendar is currently focused. */
+			this._containingFocus = false;
+			this._lastSelection = null;
+			this.#_initialized_accessor_storage = __runInitializers(this, __initialized_initializers, false);
+			this._language = (__runInitializers(this, __initialized_extraInitializers), new SbbLanguageController(this).withHandler(() => {
+				this._monthNames = this._dateAdapter.getMonthNames("long");
+				this._createMonthRows();
+			}));
+			this._sortDate = (a, b) => this._dateAdapter.compareDate(a, b);
+			this._onSlotChange = () => {
+				this._enhancedVariant = Array.from(this.children).some((c) => c.localName === "sbb-calendar-day");
+				this.toggleState("enhanced", this._enhancedVariant);
+				this._setTabIndex();
+			};
+			this._createMonthRows();
+			this._setWeekdays();
+			this.addEventListener("focusin", () => this._containingFocus = true);
+			this.addEventListener("focusout", () => this._containingFocus = false);
+			const resolveDay = (event) => event.target.closest("sbb-calendar-day") ?? event.composedPath().find((e) => e.localName === "sbb-calendar-day") ?? null;
+			this.addEventListener("click", (event) => {
+				const day = resolveDay(event);
+				if (day) this._selectDate(day.value, event);
+			});
+			this.addEventListener("keydown", (event) => {
+				const day = resolveDay(event);
+				if (day) this._handleKeyboardEvent(event, day);
+			});
+			this.addEventListener("blur", () => this._lastSelection = null);
+		}
+		_dateFilter(date) {
+			return this.dateFilter?.(date) ?? true;
+		}
+		/** Resets the active month according to the new state of the calendar. */
+		resetPosition() {
+			this._resetCalendarView();
+			this._init();
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.resetPosition();
+			this.shadowRoot?.addEventListener("slotchange", this._onSlotChange, { capture: true });
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.shadowRoot?.removeEventListener("slotchange", this._onSlotChange, { capture: true });
+		}
+		/**
+		* Returns the list of days that are visible in the calendar.
+		*/
+		visibleDays() {
+			return this._weeks.flat(2).sort((a, b) => a.value.localeCompare(b.value));
+		}
+		/** @internal */
+		formResetCallback() {}
+		/** @internal */
+		formStateRestoreCallback(state, reason) {
+			if (reason === "autocomplete" || state == null) return;
+			const restore = (value) => this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
+			if (typeof state === "string") this.value = restore(state);
+			else if (state instanceof FormData) {
+				if (this.multiple) {
+					this._readFormData(state).then((array) => this.value = array.map(restore).filter((date) => date != null));
+					return;
+				}
+				const entry = state.get(this.name);
+				if (entry instanceof Blob) entry.text().then((text) => this.value = restore(JSON.parse(text)));
+				else this.value = restore(entry);
+			}
+		}
+		async _readFormData(formData) {
+			return Promise.all(formData.getAll(this.name).map(async (entry) => entry instanceof Blob ? JSON.parse(await entry.text()) : entry));
+		}
+		/** @internal */
+		focus() {
+			this._resetFocus = true;
+			this._focusCell();
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (!this._initialized) return;
+			if (changedProperties.has("amount") || changedProperties.has("orientation") || changedProperties.has("fixedMonth")) this.resetPosition();
+			if (changedProperties.has("view")) {
+				this._setChosenYear();
+				this._chosenMonth = void 0;
+				this._calendarView = this.view;
+			}
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (name === "_calendarView") {
+				this.internals.states.delete(`view-${oldValue}`);
+				this.internals.states.add(`view-${this._calendarView}`);
+				if (this._containingFocus) this._resetFocus = true;
+			}
+		}
+		updated(changedProperties) {
+			super.updated(changedProperties);
+			this._setTabIndex();
+			this._focusCell();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._emitMonthChange();
+		}
+		/**
+		* The `_value` state should be adapted when the `multiple` property changes:
+		*   - if it changes to true, the '_value' is set to an array;
+		*   - if it changes to false, the first available option is set as 'value' otherwise it's set to null.
+		*/
+		_onMultipleChanged(isMultiple) {
+			if (isMultiple && !Array.isArray(this._value)) this._value = this._value ? [this._value] : [];
+			if (!isMultiple && Array.isArray(this._value)) this._value = this._value.length ? this._value[0] : null;
+		}
+		/** Initializes the component. */
+		_init(activeDate) {
+			if (isServer) return;
+			else if (this.hydrationRequired) {
+				this.hydrationComplete.then(() => this._init());
+				return;
+			}
+			if (activeDate) this._assignActiveDate(activeDate);
+			const startDate = this._fixedMonth ?? this._activeDate;
+			const amount = this.amount < 1 ? 1 : this.amount;
+			this._weeks = Array.from({ length: amount }, (_, i) => this._createWeekRows(this._dateAdapter.addCalendarMonths(startDate, i)));
+			const dateFromFirstMonth = this._weeks[0][0][0].dateValue;
+			this._firstVisibleDay = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(dateFromFirstMonth), this._dateAdapter.getMonth(dateFromFirstMonth), 1));
+			const dateFromLastMonth = this._weeks[amount - 1][0][0].dateValue;
+			this._lastVisibleDay = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(dateFromLastMonth), this._dateAdapter.getMonth(dateFromLastMonth), this._dateAdapter.getNumDaysInMonth(dateFromLastMonth)));
+			this._years = this._createYearRows();
+			this._weekNumbers = this._weeks.map((week) => week.flat().sort((a, b) => a.value.localeCompare(b.value)).map((day) => day.weekValue).filter((v, i, a) => a.indexOf(v) === i));
+			this._initialized = true;
+		}
+		/** Focuses on a day cell prioritizing the selected day, the current day, and lastly, the first selectable day. */
+		_focusCell() {
+			if (this._resetFocus) {
+				this._getFirstFocusable()?.focus();
+				this._resetFocus = false;
+			}
+		}
+		/** Creates the array of weekdays. */
+		_setWeekdays() {
+			const narrowWeekdays = this._dateAdapter.getDayOfWeekNames("narrow");
+			const weekdays = this._dateAdapter.getDayOfWeekNames("long").map((long, i) => ({
+				long,
+				narrow: narrowWeekdays[i]
+			}));
+			const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();
+			this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
+		}
+		/** Creates the rows along the horizontal direction and sets the parameters used in keyboard navigation. */
+		_createWeekRows(value) {
+			const daysInMonth = this._dateAdapter.getNumDaysInMonth(value);
+			const weekOffset = this._dateAdapter.getFirstWeekOffset(value);
+			return this.orientation === "horizontal" ? this._createWeekRowsHorizontal(value, daysInMonth, weekOffset) : this._createWeekRowsVertical(value, daysInMonth, weekOffset);
+		}
+		/**
+		* Creates the rows for each week in orientation='horizontal'.
+		*
+		* Iterates through the days of the months, creates a Day object for each and pushes it into and array.
+		* Each seven days (considering the offset at the beginning of the month) restarts from an empty array.
+		*
+		* The result is a matrix in which every row is a week (or part of it, considering offset).
+		*/
+		_createWeekRowsHorizontal(value, daysInMonth, weekOffset) {
+			const weeks = [[]];
+			for (let i = 0, cell = weekOffset; i < daysInMonth; i++, cell++) {
+				if (cell === DAYS_PER_ROW) {
+					weeks.push([]);
+					cell = 0;
+				}
+				const date = this._dateAdapter.createDate(this._dateAdapter.getYear(value), this._dateAdapter.getMonth(value), i + 1);
+				weeks[weeks.length - 1].push(this._mapDateToDay(date));
+			}
+			return weeks;
+		}
+		/**
+		* Creates the rows for each week in orientation='vertical'.
+		*
+		* Creates a matrix with seven empty rows.
+		* Iterates through the days of the months, creates a Day object for each
+		* and pushes it into the correct array considering the offset at the beginning of the month.
+		* Each seven days (including offset) restarts from the first.
+		*
+		* The result is a matrix in which every row is a set of weekdays, so:
+		* - row 0: all the Mondays;
+		* - row 1: all the Tuesdays;
+		* - ...
+		* - row 7: all the Sundays.
+		*/
+		_createWeekRowsVertical(value, daysInMonth, weekOffset) {
+			const weeks = Array.from({ length: DAYS_PER_ROW }, () => []);
+			for (let i = 0, cell = weekOffset; i < daysInMonth; i++, cell++) {
+				if (cell === DAYS_PER_ROW) cell = 0;
+				const date = this._dateAdapter.createDate(this._dateAdapter.getYear(value), this._dateAdapter.getMonth(value), i + 1);
+				weeks[cell].push(this._mapDateToDay(date));
+			}
+			return weeks;
+		}
+		_mapDateToDay(date) {
+			return {
+				value: this._dateAdapter.toIso8601(date),
+				dateValue: date,
+				dayValue: String(this._dateAdapter.getDate(date)),
+				monthValue: String(this._dateAdapter.getMonth(date)),
+				yearValue: String(this._dateAdapter.getYear(date)),
+				weekValue: this._getWeek(date),
+				weekDayValue: this._dateAdapter.getDayOfWeek(date)
+			};
+		}
+		_getWeek(date) {
+			const firstDayOfYear = this._dateAdapter.createDate(this._dateAdapter.getYear(date), 1, 1);
+			const weekday = this._dateAdapter.getDayOfWeek(firstDayOfYear);
+			let weekIndex = [
+				MONDAY,
+				TUESDAY,
+				WEDNESDAY,
+				THURSDAY
+			].includes(weekday) ? 1 : 0;
+			let weekStart = this._dateAdapter.addCalendarDays(firstDayOfYear, this._dateAdapter.getFirstWeekOffset(firstDayOfYear) * -1);
+			while (this._dateAdapter.compareDate(weekStart, date) <= 0) {
+				const weekEnd = this._dateAdapter.addCalendarDays(weekStart, 6);
+				if (this._dateAdapter.compareDate(date, weekEnd) <= 0) return weekIndex > 0 ? weekIndex : this._getWeek(this._dateAdapter.addCalendarDays(firstDayOfYear, -1));
+				weekStart = this._dateAdapter.addCalendarDays(weekStart, DAYS_PER_ROW);
+				weekIndex++;
+			}
+			throw new Error("The provided date is invalid");
+		}
+		/** Force the conversion to ISO8601 formatted string. */
+		_mapValueToISODate(value) {
+			return typeof value === "string" ? value : this._dateAdapter.toIso8601(value);
+		}
+		/** Creates the rows for the month selection view. */
+		_createMonthRows() {
+			const months = new Array(12).fill(null).map((_, i) => ({
+				value: String(i + 1).padStart(2, "0"),
+				monthValue: i + 1
+			}));
+			const rows = 12 / MONTHS_PER_ROW;
+			const monthArray = [];
+			for (let i = 0; i < rows; i++) monthArray.push(months.slice(MONTHS_PER_ROW * i, MONTHS_PER_ROW * (i + 1)));
+			this._months = monthArray;
+		}
+		/** Creates the rows for the year selection view. */
+		_createYearRows() {
+			const startValueYearView = this._getStartValueYearView();
+			const allYears = new Array(YEARS_PER_PAGE).fill(0).map((_, i) => startValueYearView + i);
+			const rows = YEARS_PER_PAGE / YEARS_PER_ROW;
+			const yearArray = [];
+			for (let i = 0; i < rows; i++) yearArray.push(allYears.slice(YEARS_PER_ROW * i, YEARS_PER_ROW * (i + 1)));
+			return yearArray;
+		}
+		/**
+		* Calculates the first year that will be shown in the year selection panel.
+		* If `minDate` and `maxDate` are both null, the starting year is calculated as
+		* the multiple of YEARS_PER_PAGE closest to and less than activeDate,
+		* e.g., with `YEARS_PER_PAGE` = 24 and `activeDate` = 2020, the function will return 2016 (24 * 83),
+		* while with `activeDate` = 2000, the function will return 1992 (24 * 82).
+		* If `minDate` is not null, it returns the corresponding year; if `maxDate` is not null,
+		* it returns the corresponding year minus `YEARS_PER_PAGE`, so that the `maxDate` is the last rendered year.
+		* If both are not null, `maxDate` has priority over `minDate`.
+		*/
+		_getStartValueYearView() {
+			let startingYear = 0;
+			if (this.max) startingYear = this._dateAdapter.getYear(this.max) - YEARS_PER_PAGE + 1;
+			else if (this.min) startingYear = this._dateAdapter.getYear(this.min);
+			const activeYear = this._dateAdapter.getYear(this._activeDate);
+			return activeYear - ((activeYear - startingYear) % YEARS_PER_PAGE + YEARS_PER_PAGE) % YEARS_PER_PAGE;
+		}
+		/** Checks if date is within the min-max range. */
+		_isDayInRange(dateString) {
+			if (!this.min && !this.max) return true;
+			const date = this._dateAdapter.deserialize(dateString);
+			return this._dateAdapter.sameDate(date, this._dateAdapter.clampDate(date, this.min, this.max));
+		}
+		/** Emits the selected date and sets it internally. */
+		_selectDate(day, event) {
+			this._chosenMonth = void 0;
+			this._setChosenYear();
+			if (this.multiple) {
+				window.getSelection()?.removeAllRanges();
+				let selected = !this._value ? [] : Array.isArray(this._value) ? this._value : [this._value];
+				const serializedSelected = selected.map((s) => this._dateAdapter.toIso8601(s));
+				if (event.shiftKey && this._lastSelection && serializedSelected.includes(this._dateAdapter.toIso8601(this._lastSelection)) && !serializedSelected.includes(this._dateAdapter.toIso8601(day))) {
+					const offset = this._dateAdapter.compareDate(this._lastSelection, day) < 0 ? 1 : -1;
+					const range = [];
+					let current = this._lastSelection;
+					while (!this._dateAdapter.sameDate(current, day)) {
+						current = this._dateAdapter.addCalendarDays(current, offset);
+						const serializedCurrent = this._dateAdapter.toIso8601(current);
+						if (!serializedSelected.includes(serializedCurrent)) range.push(serializedCurrent);
+					}
+					selected = this._mergeDates(range, serializedSelected);
+				} else if (selected.some((sel) => this._dateAdapter.sameDate(sel, day))) selected = selected.filter((sel) => !this._dateAdapter.sameDate(sel, day));
+				else selected = [...selected, day].sort(this._sortDate);
+				this._lastSelection = day;
+				this._value = selected;
+				this._emitDateSelectedEvent(this._value.map((e) => this._dateAdapter.deserialize(e)));
+			} else if (!this._value || this._dateAdapter.compareDate(this._value, day) !== 0) {
+				this._value = day;
+				this._emitDateSelectedEvent(this._dateAdapter.deserialize(day));
+			}
+		}
+		/**
+		* Handle multiple dates selection via weekNumber / weekDay buttons:
+		* - if Cmd or Ctrl are pressed, add the new date to the current ones;
+		* - if not,
+		*     - if the new dates are the same of the current ones, it means that the same button has been clicked twice, so do nothing;
+		*     - if not, the selected dates are the new ones.
+		*/
+		_selectMultipleDates(days) {
+			this._value = this._mergeDates(days.map((e) => e.value));
+			this._emitDateSelectedEvent(this._value.map((e) => this._dateAdapter.deserialize(e)));
+		}
+		_mergeDates(dates, selected) {
+			selected ??= this._value.map((s) => this._dateAdapter.toIso8601(s));
+			const enabledDays = this._cells.filter((e) => !e.disabled).map((e) => this._mapValueToISODate(e.value));
+			const daysToAdd = dates.filter((isoDate) => enabledDays.includes(isoDate));
+			if (daysToAdd.every((day) => selected.includes(day))) selected = selected.filter((day) => !daysToAdd.includes(day));
+			else selected = [...selected, ...daysToAdd].filter((v, i, a) => a.indexOf(v) === i);
+			return selected.map((s) => this._dateAdapter.deserialize(s)).sort(this._sortDate);
+		}
+		/**
+		* Emits the dateselected event given the detail (as T or T[] based on the value of the multiple flag).
+		* FIXME: the name of the variable appears as event name in the readme
+		*  due to a bug in the custom-elements-manifest library.
+		*  https://github.com/open-wc/custom-elements-manifest/issues/149
+		*/
+		_emitDateSelectedEvent(dateselected) {
+			/** @type {SbbDateSelectedEvent<T>} Event emitted on date selection. */
+			this.dispatchEvent(new SbbDateSelectedEvent(dateselected));
+			/** @type {InputEvent} Event emitted on user selection. */
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true
+			}));
+			/** @type {Event} Event emitted on user selection. */
+			this.dispatchEvent(new Event("change", { bubbles: true }));
+		}
+		_emitMonthChange() {
+			const monthchange = this.visibleDays();
+			/**
+			* @type {SbbMonthChangeEvent}
+			* Emits when the month changes.
+			* The `range` property contains the days array of the chosen month.
+			*/
+			this.dispatchEvent(new SbbMonthChangeEvent(monthchange));
+		}
+		_setChosenYear() {
+			if (this.view === "month") {
+				let selectedDate;
+				if (this.multiple) selectedDate = this.value.at(-1);
+				else selectedDate = this.value;
+				this._chosenYear = this._dateAdapter.getYear(selectedDate ?? this._dateAdapter.today());
+			} else this._chosenYear = void 0;
+		}
+		_assignActiveDate(date) {
+			this._activeDate = this._dateAdapter.clampDate(date, this.min, this.max);
+		}
+		/** Goes to the month identified by the shift. */
+		_goToDifferentMonth(months) {
+			this._init(this._dateAdapter.addCalendarMonths(this._activeDate, months));
+			this._emitMonthChange();
+		}
+		_goToDifferentYear(years) {
+			this._chosenYear += years;
+			this._activeDate = this._dateAdapter.createDate(this._chosenYear, this._dateAdapter.getMonth(this._activeDate), this._dateAdapter.getDate(this._activeDate));
+			this._init();
+		}
+		_goToDifferentYearRange(years) {
+			this._init(this._dateAdapter.addCalendarYears(this._activeDate, years));
+		}
+		_prevDisabled(prevDate) {
+			if (!this.min) return false;
+			return this._dateAdapter.compareDate(prevDate, this.min) < 0;
+		}
+		_nextDisabled(nextDate) {
+			if (!this.max) return false;
+			return this._dateAdapter.compareDate(nextDate, this.max) > 0;
+		}
+		/** Checks if the "previous month" button should be disabled. */
+		_previousMonthDisabled() {
+			const prevMonth = this._dateAdapter.addCalendarDays(this._activeDate, this._dateAdapter.getDate(this._activeDate) * -1);
+			return this._prevDisabled(prevMonth);
+		}
+		/** Checks if the "next month" button should be disabled. */
+		_nextMonthDisabled() {
+			let nextMonth = this._dateAdapter.addCalendarMonths(this._activeDate, this.amount < 1 ? 1 : this.amount);
+			nextMonth = this._dateAdapter.createDate(this._dateAdapter.getYear(nextMonth), this._dateAdapter.getMonth(nextMonth), 1);
+			return this._nextDisabled(nextMonth);
+		}
+		/** Checks if the "previous year" button should be disabled. */
+		_previousYearDisabled() {
+			const prevYear = this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate) - 1, 12, 31);
+			return this._prevDisabled(prevYear);
+		}
+		/** Checks if the "next year" button should be disabled. */
+		_nextYearDisabled() {
+			const nextYear = this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate) + (this.amount < 1 ? 1 : this.amount), 1, 1);
+			return this._nextDisabled(nextYear);
+		}
+		/** Checks if the "previous year" button should be disabled in year view. */
+		_previousYearRangeDisabled() {
+			const prevYear = this._dateAdapter.createDate(this._years[0][0] - 1, 12, 31);
+			return this._prevDisabled(prevYear);
+		}
+		/** Checks if the "next year" button should be disabled in year view. */
+		_nextYearRangeDisabled() {
+			const lastYear = this._years.flat(2).at(-1);
+			const nextYear = this._dateAdapter.createDate(lastYear + 1, 1, 1);
+			return this._nextDisabled(nextYear);
+		}
+		_handleTableBlur(eventTarget) {
+			if (eventTarget?.localName !== "sbb-calendar-day") this._setTabIndex();
+		}
+		_setTabIndex() {
+			Array.from(this._cells.filter((e) => e.tabIndex === 0) ?? []).forEach((day) => day.tabIndex = -1);
+			const firstFocusable = this._getFirstFocusable();
+			if (firstFocusable) firstFocusable.tabIndex = 0;
+		}
+		/** Get the element in the calendar to assign focus. */
+		_getFirstFocusable() {
+			if (this._calendarView === "day") {
+				const selectedOrCurrent = this._cells.find((e) => e.matches(":is(:state(selected),[state--selected])")) ?? this._cells.find((e) => e.matches(":is(:state(current),[state--current])"));
+				return selectedOrCurrent && !selectedOrCurrent.disabled ? selectedOrCurrent : this._getFirstFocusableDay();
+			} else {
+				const selectedOrCurrent = this.shadowRoot?.querySelector(`sbb-calendar-${this._calendarView}:is(:state(selected),[state--selected])`) ?? this.shadowRoot?.querySelector(`sbb-calendar-${this._calendarView}:is(:state(current),[state--current])`);
+				return selectedOrCurrent && !selectedOrCurrent.disabled ? selectedOrCurrent : this.shadowRoot.querySelector(`sbb-calendar-${this._calendarView}:not([disabled])`);
+			}
+		}
+		/**
+		* In `day` view in `vertical` orientation,
+		* if the first of the month is not a Monday, it is not the first rendered element in the table,
+		* so `this.shadowRoot!.querySelector('sbb-calendar-day:not([disabled])')` will return a wrong value.
+		*
+		* To solve this, the element with the lowest `value` is taken (ISO String are ordered).
+		*/
+		_getFirstFocusableDay() {
+			const cells = this._cells;
+			const daysInView = cells.filter((e) => !e.disabled);
+			if (!daysInView || daysInView.length === 0) return null;
+			else {
+				const firstElement = daysInView.map((e) => this._dateAdapter.toIso8601(e.value)).sort()[0];
+				return cells.find((e) => e.matches(`[slot="${firstElement}"]`)) ?? null;
+			}
+		}
+		_handleKeyboardEvent(event, day) {
+			if (isArrowKeyOrPageKeysPressed(event)) event.preventDefault();
+			const origin = day ?? event.target;
+			const cells = this._cells;
+			const index = cells.indexOf(origin);
+			let nextEl;
+			if (day) nextEl = this._navigateByKeyboardDayView(event, index, cells, this._mapDateToDay(day.value));
+			else nextEl = this._navigateByKeyboard(event, index, cells);
+			const activeEl = (this._enhancedVariant ? document : this.shadowRoot).activeElement;
+			if (nextEl !== activeEl) {
+				nextEl.tabIndex = 0;
+				nextEl.focus();
+				if (cells.includes(activeEl)) activeEl.tabIndex = -1;
+			}
+		}
+		_navigateByKeyboardDayView(evt, index, cells, day) {
+			const arrowsOffset = this.orientation === "horizontal" ? {
+				leftRight: 1,
+				upDown: DAYS_PER_ROW
+			} : {
+				leftRight: DAYS_PER_ROW,
+				upDown: 1
+			};
+			switch (evt.key) {
+				case "ArrowUp": return this._findDayArrows(cells, index, day.dateValue, -arrowsOffset.upDown);
+				case "ArrowDown": return this._findDayArrows(cells, index, day.dateValue, arrowsOffset.upDown);
+				case "ArrowLeft": return this._findDayArrows(cells, index, day.dateValue, -arrowsOffset.leftRight);
+				case "ArrowRight": return this._findDayArrows(cells, index, day.dateValue, arrowsOffset.leftRight);
+				case "PageUp": if (this.orientation === "horizontal") {
+					const delta = (+day.dayValue % DAYS_PER_ROW || DAYS_PER_ROW) - +day.dayValue;
+					return this._findDayPageUpDown(cells, index, day, delta, arrowsOffset.upDown);
+				} else {
+					const offsetForVertical = this._dateAdapter.getFirstWeekOffset(day.dateValue);
+					const delta = (Math.ceil((+day.dayValue + offsetForVertical) / DAYS_PER_ROW) - 1) * DAYS_PER_ROW - offsetForVertical + 1 - +day.dayValue;
+					return this._findDayPageUpDown(cells, index, day, delta, arrowsOffset.upDown);
+				}
+				case "PageDown": if (this.orientation === "horizontal") {
+					const monthInBounds = +day.monthValue + 1 > 12 ? 1 : +day.monthValue + 1;
+					const yearInBounds = +day.monthValue + 1 > 12 ? +day.yearValue + 1 : +day.yearValue;
+					const firstNextMonth = this._dateAdapter.createDate(yearInBounds, monthInBounds, 1);
+					const lastOfMonth = this._dateAdapter.getDate(this._dateAdapter.addCalendarDays(firstNextMonth, -1));
+					const delta = Math.trunc((lastOfMonth - +day.dayValue) / DAYS_PER_ROW) * DAYS_PER_ROW;
+					return this._findDayPageUpDown(cells, index, day, delta, -arrowsOffset.upDown);
+				} else {
+					const offsetForVertical = this._dateAdapter.getFirstWeekOffset(day.dateValue);
+					const delta = Math.ceil((+day.dayValue + offsetForVertical) / DAYS_PER_ROW) * DAYS_PER_ROW - offsetForVertical - +day.dayValue;
+					return this._findDayPageUpDown(cells, index, day, delta, -arrowsOffset.upDown);
+				}
+				case "Home": return this._findDayFirst(cells, index, day, 1);
+				case "End": {
+					const monthInBounds = +day.monthValue + 1 > 12 ? 1 : +day.monthValue + 1;
+					const yearInBounds = +day.monthValue + 1 > 12 ? +day.yearValue + 1 : +day.yearValue;
+					const firstNextMonth = this._dateAdapter.createDate(yearInBounds, monthInBounds, 1);
+					return this._findDayLast(cells, index, firstNextMonth);
+				}
+				default: return cells[index];
+			}
+		}
+		_isDayOutOfView(date) {
+			return date < this._firstVisibleDay || date > this._lastVisibleDay;
+		}
+		_findDayArrows(cells, index, date, delta) {
+			const newDateValue = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(date, delta));
+			if (this._isDayOutOfView(newDateValue)) return cells[index];
+			const nextCell = cells.find((e) => this._mapValueToISODate(e.value) === newDateValue);
+			if (!nextCell || nextCell.disabled) return this._findDayArrows(cells, index, this._dateAdapter.deserialize(newDateValue), delta);
+			return nextCell;
+		}
+		_findDayPageUpDown(cells, index, day, delta, deltaIfDisabled) {
+			const newDateValue = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(day.dateValue, delta));
+			if (this._isDayOutOfView(newDateValue)) return cells[index];
+			const nextCell = cells.find((e) => this._mapValueToISODate(e.value) === newDateValue);
+			if (!nextCell || nextCell.disabled) return this._findDayPageUpDown(cells, index, day, delta + deltaIfDisabled, deltaIfDisabled);
+			return nextCell;
+		}
+		_findDayFirst(cells, index, day, date) {
+			const newDateValue = this._dateAdapter.toIso8601(this._dateAdapter.createDate(+day.yearValue, +day.monthValue, date));
+			if (this._isDayOutOfView(newDateValue)) return cells[index];
+			const nextCell = cells.find((e) => this._mapValueToISODate(e.value) === newDateValue);
+			if (!nextCell || nextCell.disabled) return this._findDayFirst(cells, index, day, date + 1);
+			return nextCell;
+		}
+		_findDayLast(cells, index, firstNextMonth) {
+			const newDateValue = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(firstNextMonth, -1));
+			if (this._isDayOutOfView(newDateValue)) return cells[index];
+			const nextCell = cells.find((e) => this._mapValueToISODate(e.value) === newDateValue);
+			if (!nextCell || nextCell.disabled) return this._findDayLast(cells, index, this._dateAdapter.deserialize(newDateValue));
+			return nextCell;
+		}
+		/**
+		* Gets the index of the element to move to, based on a list of elements (which can be potentially disabled),
+		* the keyboard input and the position of the current element in the list.
+		* In the day view, the `day?: Day` parameter is mandatory for calculation,
+		* while in month and year view it's not due to the fixed amount of rendered cells.
+		*/
+		_navigateByKeyboard(evt, index, cells) {
+			const { elementIndexForWideMode, offsetForWideMode, lastElementIndexForWideMode, verticalOffset } = this._calculateParametersForKeyboardNavigation(index, this._calendarView === "year");
+			switch (evt.key) {
+				case "ArrowUp": return this._findNext(cells, index, -verticalOffset);
+				case "ArrowDown": return this._findNext(cells, index, verticalOffset);
+				case "ArrowLeft": return this._findNext(cells, index, -1);
+				case "ArrowRight": return this._findNext(cells, index, 1);
+				case "Home": return this._findFirst(cells, offsetForWideMode);
+				case "PageUp": return this._findFirstOnColumn(cells, elementIndexForWideMode, offsetForWideMode, verticalOffset);
+				case "PageDown": return this._findLastOnColumn(cells, index, lastElementIndexForWideMode, verticalOffset);
+				case "End": return this._findLast(cells, lastElementIndexForWideMode - 1);
+				default: return cells[index];
+			}
+		}
+		/**
+		* Calculates the parameters needed in keyboard navigation in year and month view.
+		* @param index The starting element's index in the cell array.
+		* @param isYearView Whether the displayed `view` is the year one.
+		*/
+		_calculateParametersForKeyboardNavigation(index, isYearView) {
+			const elementsPerPage = isYearView ? YEARS_PER_PAGE : MONTHS_PER_PAGE;
+			const offset = Math.trunc(index / elementsPerPage) * elementsPerPage;
+			const indexInView = offset === 0 ? index : index - elementsPerPage;
+			return {
+				verticalOffset: isYearView ? YEARS_PER_ROW : MONTHS_PER_ROW,
+				elementIndexForWideMode: indexInView,
+				offsetForWideMode: index - indexInView,
+				lastElementIndexForWideMode: offset === 0 ? elementsPerPage : elementsPerPage * 2
+			};
+		}
+		/**
+		* Gets the next element of the provided array starting from `index` by adding `delta`.
+		* If the found element is disabled, it continues adding `delta` until it finds an enabled one in the array bounds.
+		*/
+		_findNext(days, index, delta) {
+			let nextIndex = index + delta;
+			while (nextIndex < days.length && days[nextIndex]?.disabled) nextIndex += delta;
+			return days[nextIndex] ?? days[index];
+		}
+		/** Find the first enabled element in the provided array. */
+		_findFirst(days, firstOfCurrentMonth) {
+			return !days[firstOfCurrentMonth].disabled ? days[firstOfCurrentMonth] : this._findNext(days, firstOfCurrentMonth, 1);
+		}
+		/** Find the last enabled element in the provided array. */
+		_findLast(days, lastOfCurrentMonth) {
+			return !days[lastOfCurrentMonth].disabled ? days[lastOfCurrentMonth] : this._findNext(days, lastOfCurrentMonth, -1);
+		}
+		/** Find the first enabled element in the same column of the provided array. */
+		_findFirstOnColumn(days, index, offset, verticalOffset) {
+			const nextIndex = index % verticalOffset + offset;
+			return !days[nextIndex].disabled ? days[nextIndex] : this._findNext(days, nextIndex, verticalOffset);
+		}
+		/** Find the last enabled element in the same column of the provided array. */
+		_findLastOnColumn(days, index, offset, verticalOffset) {
+			const nextIndex = index + Math.trunc((offset - index - 1) / verticalOffset) * verticalOffset;
+			return !days[nextIndex].disabled ? days[nextIndex] : this._findNext(days, nextIndex, -verticalOffset);
+		}
+		_resetCalendarViewAndEmitMonthChange() {
+			this._resetCalendarView();
+			this._emitMonthChange();
+		}
+		_resetCalendarView() {
+			if (this._containingFocus) this._resetFocus = true;
+			this._activeDate = (this.multiple ? this._value.at(-1) : this._value) ?? this._dateAdapter.today();
+			this._setChosenYear();
+			this._chosenMonth = void 0;
+			this._init();
+			this._calendarView = this.view;
+		}
+		/** Creates the calendar table for the daily view. */
+		_createDayTable(weeks, weekNumbers, first) {
+			const firstDay = weeks[0][0].dateValue;
+			const monthLabel = `${this._monthNames[this._dateAdapter.getMonth(firstDay) - 1]} ${this._dateAdapter.getYear(firstDay)}`;
+			const weeksForSelectMultipleWeekNumbers = weeks.flat();
+			const weeksForSelectMultipleWeekDays = weeks.flat();
+			return html`
+      <div class="sbb-calendar__table-wrapper sbb-calendar__day-view">
+        <div class="sbb-calendar__table-header">
+          <span>${monthLabel}</span> ${first ? this._createDayTableControls(monthLabel) : nothing}
+        </div>
+        <table
+          class="sbb-calendar__table"
+          @focusout=${(event) => this._handleTableBlur(event.relatedTarget)}
+        >
+          <thead>
+            <tr>
+              ${this.weekNumbers ? html`<th class="sbb-calendar__table-header-cell"></th>` : nothing}
+              ${this._weekdays.map((weekDay, index) => html`
+                  <th class="sbb-calendar__table-header-cell">
+                    ${this.multiple ? html`
+                          <sbb-calendar-weekday
+                            .value=${weekDay}
+                            @click=${() => {
+				const days = weeksForSelectMultipleWeekDays.filter((day) => day.weekDayValue === (index + 1) % 7);
+				this._selectMultipleDates(days);
+			}}
+                          ></sbb-calendar-weekday>
+                        ` : html`
+                          <span class="sbb-screen-reader-only">${weekDay.long}</span>
+                          <span aria-hidden="true">${weekDay.narrow}</span>
+                        `}
+                  </th>
+                `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${weeks.map((week, rowIndex) => {
+				const firstRowOffset = DAYS_PER_ROW - week.length;
+				if (rowIndex === 0 && firstRowOffset) return html`
+                  <tr>
+                    ${this.weekNumbers ? html`
+                          <td class="sbb-calendar__table-header-cell-vertical">
+                            ${this.multiple ? html`
+                                  <sbb-calendar-weeknumber
+                                    .value=${weekNumbers[0]}
+                                    @click=${() => {
+					const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumbers[0]);
+					this._selectMultipleDates(days);
+				}}
+                                  ></sbb-calendar-weeknumber>
+                                ` : html`
+                                  <span class="sbb-screen-reader-only"
+                                    >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[0]}`}</span
+                                  >
+                                  <span aria-hidden="true">${weekNumbers[0]}</span>
+                                `}
+                          </td>
+                        ` : nothing}
+                    ${[...Array(firstRowOffset).keys()].map(() => html`<td class="sbb-calendar__table-data"></td>`)}
+                    ${this._createDayCells(week)}
+                  </tr>
+                `;
+				return html`
+                <tr>
+                  ${this.weekNumbers ? html`
+                        <td class="sbb-calendar__table-header-cell-vertical">
+                          ${this.multiple ? html`
+                                <sbb-calendar-weeknumber
+                                  .value=${weekNumbers[rowIndex]}
+                                  @click=${() => {
+					const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumbers[rowIndex]);
+					this._selectMultipleDates(days);
+				}}
+                                ></sbb-calendar-weeknumber>
+                              ` : html`
+                                <span class="sbb-screen-reader-only"
+                                  >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[rowIndex]}`}</span
+                                >
+                                <span aria-hidden="true">${weekNumbers[rowIndex]}</span>
+                              `}
+                        </td>
+                      ` : nothing}
+                  ${this._createDayCells(week)}
+                </tr>
+              `;
+			})}
+          </tbody>
+        </table>
+      </div>
+    `;
+		}
+		/** Creates the table in orientation='vertical'. */
+		_createDayTableVertical(weeks, weekNumbers, first) {
+			const firstDay = weeks[0][0].dateValue;
+			const monthLabel = `${this._monthNames[this._dateAdapter.getMonth(firstDay) - 1]} ${this._dateAdapter.getYear(firstDay)}`;
+			const activeDate = weeks[0][0].dateValue;
+			const weekOffset = this._dateAdapter.getFirstWeekOffset(activeDate ?? this._activeDate);
+			const weeksForSelectMultipleWeekNumbers = weeks.flat();
+			return html`
+      <div class="sbb-calendar__table-wrapper sbb-calendar__day-view">
+        <div class="sbb-calendar__table-header">
+          <span>${monthLabel}</span> ${first ? this._createDayTableControls(monthLabel) : nothing}
+        </div>
+        <table
+          class="sbb-calendar__table"
+          @focusout=${(event) => this._handleTableBlur(event.relatedTarget)}
+        >
+          ${this.weekNumbers ? html`
+                <thead>
+                  <tr>
+                    <th class="sbb-calendar__table-data"></th>
+                    ${weekNumbers.map((weekNumber) => html`
+                        <th class="sbb-calendar__table-header-cell">
+                          ${this.multiple ? html`
+                                <sbb-calendar-weeknumber
+                                  .value=${weekNumber}
+                                  @click=${() => {
+				const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumber);
+				this._selectMultipleDates(days);
+			}}
+                                ></sbb-calendar-weeknumber>
+                              ` : html`
+                                <span class="sbb-screen-reader-only"
+                                  >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumber}`}</span
+                                >
+                                <span aria-hidden="true">${weekNumber}</span>
+                              `}
+                        </th>
+                      `)}
+                  </tr>
+                </thead>
+              ` : nothing}
+          <tbody>
+            ${weeks.map((week, rowIndex) => {
+				const weekday = this._weekdays[rowIndex];
+				return html`
+                <tr>
+                  <td class="sbb-calendar__table-header-cell-vertical">
+                    ${this.multiple ? html`
+                          <sbb-calendar-weekday
+                            .value=${weekday}
+                            @click=${() => this._selectMultipleDates(week)}
+                          >
+                            ${weekday.narrow}
+                          </sbb-calendar-weekday>
+                        ` : html`
+                          <span class="sbb-screen-reader-only">${weekday.long}</span>
+                          <span aria-hidden="true">${weekday.narrow}</span>
+                        `}
+                  </td>
+                  ${rowIndex < weekOffset ? html`<td class="sbb-calendar__table-data"></td>` : nothing}
+                  ${this._createDayCells(week)}
+                </tr>
+              `;
+			})}
+          </tbody>
+        </table>
+      </div>
+    `;
+		}
+		_createDayTableControls(monthLabel) {
+			return this._fixedMonth ? [] : [
+				this._getArrow("left", () => this._goToDifferentMonth(-1), i18nPreviousMonth[this._language.current], this._previousMonthDisabled()),
+				this._getArrow("right", () => this._goToDifferentMonth(1), i18nNextMonth[this._language.current], this._nextMonthDisabled()),
+				this._getArrow("up", () => {
+					this._resetFocus = true;
+					this._calendarView = "year";
+				}, `${i18nYearMonthSelection[this._language.current]} ${monthLabel}`)
+			];
+		}
+		/** Creates the cells for the daily view. */
+		_createDayCells(week) {
+			return week.map((day) => {
+				return html`
+        <td class="sbb-calendar__table-data sbb-calendar__day-cell">
+          <slot name=${day.value}>
+            <sbb-calendar-day slot=${day.value}></sbb-calendar-day>
+          </slot>
+        </td>
+      `;
+			});
+		}
+		/** Render the view for the month selection. */
+		_renderMonthView() {
+			return html`
+      <div class="sbb-calendar__table-wrapper sbb-calendar__month-view">
+        <div class="sbb-calendar__table-header">
+          <span>${this._chosenYear}</span>
+          ${this._fixedMonth ? [] : [
+				this._getArrow("left", () => this._goToDifferentYear(-1), i18nPreviousYear[this._language.current], this._previousYearDisabled()),
+				this._getArrow("right", () => this._goToDifferentYear(1), i18nNextYear[this._language.current], this._nextYearDisabled()),
+				this._getArrow("down", () => this._resetCalendarViewAndEmitMonthChange(), i18nCalendarDateSelection[this._language.current])
+			]}
+          <span class="sbb-screen-reader-only" role="status">${this._chosenYear}</span>
+        </div>
+        <table class="sbb-calendar__table">
+          <tbody>
+            ${this._months.map((row) => html`
+                <tr>
+                  ${row.map((month) => {
+				return html`
+                      <td class="sbb-calendar__table-data">
+                        <sbb-calendar-month
+                          .value="${this._chosenYear}-${month.value}"
+                          @click=${() => this._onMonthSelection(month.monthValue, this._chosenYear)}
+                          @keydown=${(evt) => this._handleKeyboardEvent(evt)}
+                        >
+                        </sbb-calendar-month>
+                      </td>
+                    `;
+			})}
+                </tr>
+              `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+		}
+		/** Select the month and change the view to day selection. */
+		_onMonthSelection(month, year) {
+			this._chosenMonth = month;
+			this._calendarView = "day";
+			this._init(this._dateAdapter.createDate(year, this._chosenMonth, this._dateAdapter.getDate(this._activeDate)));
+			this._emitMonthChange();
+		}
+		/** Render the view for the year selection. */
+		_renderYearView() {
+			const firstYear = this._years.flat(2)[0];
+			const lastYearArray = this._years.at(-1).flat();
+			const yearLabel = `${firstYear} - ${lastYearArray[lastYearArray.length - 1]}`;
+			return html`
+      <div class="sbb-calendar__table-wrapper sbb-calendar__year-view">
+        <div class="sbb-calendar__table-header">
+          <span>${yearLabel}</span>
+          ${this._fixedMonth ? [] : [
+				this._getArrow("left", () => this._goToDifferentYearRange(-24), i18nPreviousYearRange(YEARS_PER_PAGE)[this._language.current], this._previousYearRangeDisabled()),
+				this._getArrow("right", () => this._goToDifferentYearRange(YEARS_PER_PAGE), i18nNextYearRange(YEARS_PER_PAGE)[this._language.current], this._nextYearRangeDisabled()),
+				this._getArrow("down", () => this._resetCalendarViewAndEmitMonthChange(), i18nCalendarDateSelection[this._language.current])
+			]}
+          <span class="sbb-screen-reader-only" role="status">${yearLabel}</span>
+        </div>
+        <table class="sbb-calendar__table">
+          <tbody>
+            ${this._years.map((row) => html` <tr>
+                  ${row.map((year) => {
+				return html`
+                      <td class="sbb-calendar__table-data">
+                        <sbb-calendar-year
+                          .value=${String(year)}
+                          @keydown=${(evt) => this._handleKeyboardEvent(evt)}
+                          @click=${() => this._onYearSelection(year)}
+                        >
+                        </sbb-calendar-year>
+                      </td>
+                    `;
+			})}
+                </tr>`)}
+          </tbody>
+        </table>
+      </div>
+    `;
+		}
+		/** Select the year and change the view to month selection. */
+		_onYearSelection(year) {
+			this._chosenYear = year;
+			this._calendarView = "month";
+			this._assignActiveDate(this._dateAdapter.createDate(this._chosenYear, this._dateAdapter.getMonth(this._activeDate), this._dateAdapter.getDate(this._activeDate)));
+		}
+		/** Creates the button arrow for all the views. */
+		_getArrow(direction, click, ariaLabel, disabled = false) {
+			return html`<sbb-secondary-button
+      class="sbb-calendar__control"
+      size="s"
+      icon-name="chevron-small-${direction}-small"
+      aria-label=${ariaLabel}
+      @click=${click}
+      ?disabled=${disabled}
+    ></sbb-secondary-button>`;
+		}
+		_getView() {
+			switch (this._calendarView) {
+				case "year": return this._renderYearView();
+				case "month": return this._renderMonthView();
+				default: return nothing;
+			}
+		}
+		render() {
+			if (isServer || this.hydrationRequired) return html`${nothing}`;
+			return html`<div class="sbb-calendar__wrapper">
+      ${this.orientation === "horizontal" ? this._weeks.map((weeks, i) => this._createDayTable(weeks, this._weekNumbers[i], i === 0)) : this._weeks.map((weeks, i) => this._createDayTableVertical(weeks, this._weekNumbers[i], i === 0))}
+      ${this._getView()}
+    </div>`;
+		}
+	};
+})();
+
+//#endregion
+export { SbbCalendarCellBaseElement, SbbCalendarDayElement, SbbCalendarElement, SbbCalendarMonthElement, SbbCalendarWeekdayElement, SbbCalendarWeeknumberElement, SbbCalendarYearElement, SbbDateSelectedEvent, SbbMonthChangeEvent };