@sbb-esta/lyne-elements 2.2.0 → 2.4.1

package/calendar.js

@@ -1,57 +1,64 @@
-var he = (o) => {
-  throw TypeError(o);
+var ge = (h) => {
+  throw TypeError(h);
 };
-var _e = (o, h, f) => h.has(o) || he("Cannot " + f);
-var v = (o, h, f) => (_e(o, h, "read from private field"), f ? f.call(o) : h.get(o)), w = (o, h, f) => h.has(o) ? he("Cannot add the same private member more than once") : h instanceof WeakSet ? h.add(o) : h.set(o, f), u = (o, h, f, p) => (_e(o, h, "write to private field"), p ? p.call(o, f) : h.set(o, f), f);
-import { __esDecorate as m, __runInitializers as c } from "tslib";
-import { css as ge, LitElement as pe, isServer as ue, html as n, nothing as g } from "lit";
-import { customElement as ve, property as A, state as F } from "lit/decorators.js";
-import { classMap as R } from "lit/directives/class-map.js";
-import { sbbInputModalityDetector as we, isArrowKeyOrPageKeysPressed as ye } from "./core/a11y.js";
-import { readConfig as Ae } from "./core/config.js";
-import { SbbLanguageController as xe, SbbMediaMatcherController as De, SbbMediaQueryBreakpointMediumAndAbove as fe } from "./core/controllers.js";
-import { defaultDateAdapter as $e, YEARS_PER_PAGE as b, DAYS_PER_ROW as O, MONTHS_PER_ROW as I, YEARS_PER_ROW as C } from "./core/datetime.js";
-import { forceType as Ye } from "./core/decorators.js";
-import { EventEmitter as Me } from "./core/eventing.js";
-import { i18nPreviousMonth as ke, i18nNextMonth as Ve, i18nYearMonthSelection as ze, i18nPreviousYear as Fe, i18nNextYear as Re, i18nCalendarDateSelection as me, i18nPreviousYearRange as Ie, i18nNextYearRange as Ce } from "./core/i18n.js";
-import { SbbHydrationMixin as Se } from "./core/mixins.js";
+var pe = (h, _, g) => _.has(h) || ge("Cannot " + g);
+var y = (h, _, g) => (pe(h, _, "read from private field"), g ? g.call(h) : _.get(h)), D = (h, _, g) => _.has(h) ? ge("Cannot add the same private member more than once") : _ instanceof WeakSet ? _.add(h) : _.set(h, g), b = (h, _, g, v) => (pe(h, _, "write to private field"), v ? v.call(h, g) : _.set(h, g), g);
+import { __esDecorate as u, __runInitializers as c } from "tslib";
+import { css as ye, LitElement as De, isServer as me, nothing as m, html as l } from "lit";
+import { customElement as Ae, property as A, state as N } from "lit/decorators.js";
+import { classMap as C } from "lit/directives/class-map.js";
+import { sbbInputModalityDetector as xe, isArrowKeyOrPageKeysPressed as Ve } from "./core/a11y.js";
+import { readConfig as ke } from "./core/config.js";
+import { SbbLanguageController as $e, SbbMediaMatcherController as Me, SbbMediaQueryBreakpointMediumAndAbove as we } from "./core/controllers.js";
+import { defaultDateAdapter as Ye, YEARS_PER_PAGE as w, DAYS_PER_ROW as f, MONTHS_PER_ROW as S, YEARS_PER_ROW as T, MONTHS_PER_PAGE as ze } from "./core/datetime.js";
+import { forceType as Fe } from "./core/decorators.js";
+import { EventEmitter as Re } from "./core/eventing.js";
+import { i18nPreviousMonth as Ie, i18nNextMonth as Oe, i18nYearMonthSelection as Ne, i18nPreviousYear as Ce, i18nNextYear as Se, i18nCalendarDateSelection as ve, i18nPreviousYearRange as Te, i18nNextYearRange as Pe } from "./core/i18n.js";
+import { SbbHydrationMixin as We } from "./core/mixins.js";
 import "./button/secondary-button.js";
 import "./icon.js";
 import "./screen-reader-only.js";
-const Te = ge`*,:before,:after{box-sizing:border-box}:host{display:block;width:max-content;--sbb-calendar-cell-size: 2.5rem;--sbb-calendar-hover-shift: .0625rem;--sbb-calendar-wide-cell-size: 4.375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-header-color: var(--sbb-color-granite);--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-charcoal);--sbb-calendar-cell-selected-color: var(--sbb-color-white);--sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);--sbb-calendar-table-animation-shift: .00625rem;--sbb-calendar-table-animation-duration: .1ms;--sbb-calendar-table-column-spaces: 12;--sbb-calendar-control-view-change-height: 2.75rem;--sbb-calendar-control-view-change-color: var(--sbb-color-charcoal);--sbb-calendar-control-view-change-background: var(--sbb-color-white)}@media (min-width: 22.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);text-transform:capitalize;cursor:pointer;padding-inline:var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__controls-change-date:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}@media (any-hover: hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-color-milk)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);margin-inline:var(--sbb-calendar-margin);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset)}:host([data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not([data-wide])) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color);width:var(--sbb-calendar-cell-size);padding:0;padding-block-end:var(--sbb-spacing-fixed-4x);text-align:center}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__cell{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:pointer;position:relative;z-index:0}.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:50%;z-index:-1;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}@media (any-hover: hover){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-color-milk);padding-block-end:var(--sbb-calendar-hover-shift)}}@media (any-hover: hover) and (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__day:before{border-radius:50%}.sbb-calendar__pill{width:var(--sbb-calendar-wide-cell-size);border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__pill:before{border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__crossed-out:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.sbb-calendar__cell-current{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-calendar__selected{--sbb-calendar-cell-color: var(--sbb-calendar-cell-selected-color);--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-selected-background-color)}@media (forced-colors: active){.sbb-calendar__selected{--sbb-calendar-cell-background-color: ButtonText !important}}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}`;
-let et = (() => {
-  var D, $, Y, M, k, V, z, l;
-  let o = [ve("sbb-calendar")], h, f = [], p, E = Se(pe), x = [], W, L = [], P = [], B, q = [], K = [], H, U, j, G, Q, J = [], X = [], Z, ee = [], te = [], ae, se = [], ie = [], re, ne, le = [], de = [], oe, ce = [], be = [];
-  var S = (l = class extends E {
+const Ee = ye`*,:before,:after{box-sizing:border-box}:host{display:block;width:max-content;--sbb-calendar-cell-size: 2.5rem;--sbb-calendar-hover-shift: .0625rem;--sbb-calendar-wide-cell-size: 4.375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-header-color: var(--sbb-color-granite);--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-charcoal);--sbb-calendar-cell-selected-color: var(--sbb-color-white);--sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);--sbb-calendar-table-animation-shift: .00625rem;--sbb-calendar-table-animation-duration: .1ms;--sbb-calendar-table-column-spaces: 12;--sbb-calendar-control-view-change-height: 2.75rem;--sbb-calendar-control-view-change-color: var(--sbb-color-charcoal);--sbb-calendar-control-view-change-background: var(--sbb-color-white)}@media (min-width: 22.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);text-transform:capitalize;cursor:pointer;padding-inline:var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__controls-change-date:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}@media (any-hover: hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-color-milk)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);margin-inline:var(--sbb-calendar-margin);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset)}:host([data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}:host([orientation=vertical]) .sbb-calendar__table-container{min-width:var(--sbb-calendar-min-width);--sbb-calendar-start-offset: 0}:host([orientation=vertical][data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 13 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not([data-wide])) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color);width:var(--sbb-calendar-cell-size);padding:0;text-align:center}:host([orientation=horizontal]) .sbb-calendar__table-header{padding-block-end:var(--sbb-spacing-fixed-4x)}:host([orientation=vertical]) .sbb-calendar__table-header{padding-inline-end:var(--sbb-spacing-fixed-1x)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__cell{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:pointer;position:relative;z-index:0}.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:50%;z-index:-1;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}@media (any-hover: hover){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-color-milk);padding-block-end:var(--sbb-calendar-hover-shift)}}@media (any-hover: hover) and (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__day:before{border-radius:50%}.sbb-calendar__pill{width:var(--sbb-calendar-wide-cell-size);border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__pill:before{border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__crossed-out:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.sbb-calendar__cell-current{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-calendar__selected{--sbb-calendar-cell-color: var(--sbb-calendar-cell-selected-color);--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-selected-background-color)}@media (forced-colors: active){.sbb-calendar__selected{--sbb-calendar-cell-background-color: ButtonText !important}}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}`;
+let rt = (() => {
+  var V, k, $, M, Y, z, F, R, d;
+  let h = [Ae("sbb-calendar")], _, g = [], v, W = We(De), x = [], E, L = [], B = [], q, K = [], U = [], H, j, G, Q, J, X = [], Z = [], ee, te = [], ae = [], se, ie = [], re = [], ne, le = [], oe = [], de, ce, he = [], be = [], _e, ue = [], fe = [];
+  var P = (d = class extends W {
     constructor() {
       var e;
       super();
-      w(this, D);
-      w(this, $);
-      w(this, Y);
-      w(this, M);
-      w(this, k);
-      w(this, V);
-      w(this, z);
-      u(this, D, (c(this, x), c(this, L, !1))), u(this, $, (c(this, P), c(this, q, "day"))), this._min = c(this, K), this._now = null, u(this, Y, c(this, J, null)), this._dateAdapter = (c(this, X), ((e = Ae().datetime) == null ? void 0 : e.dateAdapter) ?? $e), this._dateSelected = new Me(this, S.events.dateSelected), u(this, M, c(this, ee, this.now)), u(this, k, (c(this, te), c(this, se, void 0))), u(this, V, (c(this, ie), c(this, le, "day"))), this._nextCalendarView = (c(this, de), "day"), this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1, u(this, z, c(this, ce, !1)), this._language = (c(this, be), new xe(this).withHandler(() => {
+      D(this, V);
+      D(this, k);
+      D(this, $);
+      D(this, M);
+      D(this, Y);
+      D(this, z);
+      D(this, F);
+      D(this, R);
+      b(this, V, (c(this, x), c(this, L, !1))), b(this, k, (c(this, B), c(this, K, "day"))), this._min = c(this, U), this._now = null, b(this, $, c(this, X, null)), b(this, M, (c(this, Z), c(this, te, "horizontal"))), this._dateAdapter = (c(this, ae), ((e = ke().datetime) == null ? void 0 : e.dateAdapter) ?? Ye), this._dateSelected = new Re(this, P.events.dateSelected), b(this, Y, c(this, ie, this.now)), b(this, z, (c(this, re), c(this, le, void 0))), b(this, F, (c(this, oe), c(this, he, "day"))), this._nextCalendarView = (c(this, be), "day"), this._keyboardNavigationDayViewParameters = {
+        firstDayInView: null,
+        lastDayInView: null,
+        firstMonthOffset: 0,
+        firstMonthLength: 0,
+        secondMonthOffset: 0
+      }, this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1, b(this, R, c(this, ue, !1)), this._language = (c(this, fe), new $e(this).withHandler(() => {
         this._monthNames = this._dateAdapter.getMonthNames("long"), this._createMonthRows();
-      })), this._mediaMatcher = new De(this, {
-        [fe]: () => this._init()
+      })), this._mediaMatcher = new Me(this, {
+        [we]: () => this._init()
       }), this._createMonthRows(), this._setWeekdays();
     }
     /** If set to true, two months are displayed */
     get wide() {
-      return v(this, D);
+      return y(this, V);
     }
     set wide(e) {
-      u(this, D, e);
+      b(this, V, e);
     }
     /** The initial view of the calendar which should be displayed on opening. */
     get view() {
-      return v(this, $);
+      return y(this, k);
     }
     set view(e) {
-      u(this, $, e);
+      b(this, k, e);
     }
     /** The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */
     set min(e) {
@@ -83,24 +90,31 @@ let et = (() => {
     }
     /** A function used to filter out dates. */
     get dateFilter() {
-      return v(this, Y);
+      return y(this, $);
     }
     set dateFilter(e) {
-      u(this, Y, e);
+      b(this, $, e);
+    }
+    /** The orientation of days in the calendar. */
+    get orientation() {
+      return y(this, M);
+    }
+    set orientation(e) {
+      b(this, M, e);
     }
     /** The currently active date. */
     get _activeDate() {
-      return v(this, M);
+      return y(this, Y);
     }
     set _activeDate(e) {
-      u(this, M, e);
+      b(this, Y, e);
     }
     /** The selected date as ISOString. */
     get _selected() {
-      return v(this, k);
+      return y(this, z);
     }
     set _selected(e) {
-      u(this, k, e);
+      b(this, z, e);
     }
     /** The current wide property considering property value and breakpoints. From zero to small `wide` has always to be false. */
     set _wide(e) {
@@ -110,20 +124,20 @@ let et = (() => {
       return this.hasAttribute("data-wide");
     }
     get _calendarView() {
-      return v(this, V);
+      return y(this, F);
     }
     set _calendarView(e) {
-      u(this, V, e);
+      b(this, F, e);
     }
     /** A list of buttons corresponding to days, months or years depending on the view. */
     get _cells() {
       return Array.from(this.shadowRoot.querySelectorAll(".sbb-calendar__cell") ?? []);
     }
     get _initialized() {
-      return v(this, z);
+      return y(this, R);
     }
     set _initialized(e) {
-      u(this, z, e);
+      b(this, R, e);
     }
     _dateFilter(e) {
       var t;
@@ -139,21 +153,21 @@ let et = (() => {
       };
     }
     willUpdate(e) {
-      super.willUpdate(e), this._initialized && (e.has("wide") && this.resetPosition(), e.has("view") && (this._setChosenYear(), this._chosenMonth = void 0, this._nextCalendarView = this._calendarView = this.view));
+      super.willUpdate(e), this._initialized && ((e.has("wide") || e.has("orientation")) && this.resetPosition(), e.has("view") && (this._setChosenYear(), this._chosenMonth = void 0, this._nextCalendarView = this._calendarView = this.view));
     }
     updated(e) {
-      super.updated(e), this._setTabIndex(), we.mostRecentModality === "keyboard" && this._focusCell();
+      super.updated(e), this._setTabIndex(), xe.mostRecentModality === "keyboard" && this._focusCell();
     }
     /** Initializes the component. */
     _init(e) {
-      if (!ue) {
+      if (!me) {
         if (this.hydrationRequired) {
           this.hydrationComplete.then(() => this._init());
           return;
         }
-        if (e && this._assignActiveDate(e), this._wide = (this._mediaMatcher.matches(fe) ?? !1) && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
+        if (e && this._assignActiveDate(e), this._wide = (this._mediaMatcher.matches(we) ?? !1) && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
           const t = this._dateAdapter.addCalendarMonths(this._activeDate, 1);
-          this._nextMonthWeeks = this._createWeekRows(t), this._nextMonthYears = this._createYearRows(b);
+          this._nextMonthWeeks = this._createWeekRows(t, !0), this._nextMonthYears = this._createYearRows(w);
         }
         this._initialized = !0;
       }
@@ -171,20 +185,62 @@ let et = (() => {
       })), s = this._dateAdapter.getFirstDayOfWeek();
       this._weekdays = a.slice(s).concat(a.slice(0, s));
     }
-    /** Creates the rows for each week. */
-    _createWeekRows(e) {
-      const t = this._dateAdapter.getNumDaysInMonth(e), a = this._dateAdapter.getDateNames(), s = [[]], i = this._dateAdapter.getFirstWeekOffset(e);
-      for (let r = 0, d = i; r < t; r++, d++) {
-        d === O && (s.push([]), d = 0);
-        const _ = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), r + 1);
-        s[s.length - 1].push({
-          value: this._dateAdapter.toIso8601(_),
-          dayValue: a[r],
-          monthValue: String(this._dateAdapter.getMonth(_)),
-          yearValue: String(this._dateAdapter.getYear(_))
+    /** Creates the rows for each week and sets the parameters used in keyboard navigation. */
+    _createWeekRows(e, t = !1) {
+      const a = this._dateAdapter.getDateNames(), s = this._dateAdapter.getNumDaysInMonth(e), i = this._dateAdapter.getFirstWeekOffset(e);
+      return t ? (this._keyboardNavigationDayViewParameters.secondMonthOffset = i, this._keyboardNavigationDayViewParameters.lastDayInView = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), s))) : (this._keyboardNavigationDayViewParameters.firstMonthLength = s, this._keyboardNavigationDayViewParameters.firstMonthOffset = i, this._keyboardNavigationDayViewParameters.firstDayInView = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), 1)), this._keyboardNavigationDayViewParameters.lastDayInView = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), s))), this.orientation === "horizontal" ? this._createWeekRowsHorizontal(e, a, s, i) : this._createWeekRowsVertical(e, a, s, i);
+    }
+    /**
+     * 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(e, t, a, s) {
+      const i = [[]];
+      for (let r = 0, n = s; r < a; r++, n++) {
+        n === f && (i.push([]), n = 0);
+        const o = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), r + 1);
+        i[i.length - 1].push({
+          value: this._dateAdapter.toIso8601(o),
+          dateValue: o,
+          dayValue: t[r],
+          monthValue: String(this._dateAdapter.getMonth(o)),
+          yearValue: String(this._dateAdapter.getYear(o))
         });
       }
-      return s;
+      return i;
+    }
+    /**
+     * 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(e, t, a, s) {
+      const i = Array.from({ length: f }, () => []);
+      for (let r = 0, n = s; r < a; r++, n++) {
+        n === f && (n = 0);
+        const o = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), r + 1);
+        i[n].push({
+          value: this._dateAdapter.toIso8601(o),
+          dateValue: o,
+          dayValue: t[r],
+          monthValue: String(this._dateAdapter.getMonth(o)),
+          yearValue: String(this._dateAdapter.getYear(o))
+        });
+      }
+      return i;
     }
     /** Creates the rows for the month selection view. */
     _createMonthRows() {
@@ -192,16 +248,16 @@ let et = (() => {
         value: e[r],
         longValue: this._monthNames[r],
         monthValue: r + 1
-      })), a = 12 / I, s = [];
+      })), a = 12 / S, s = [];
       for (let i = 0; i < a; i++)
-        s.push(t.slice(I * i, I * (i + 1)));
+        s.push(t.slice(S * i, S * (i + 1)));
       this._months = s;
     }
     /** Creates the rows for the year selection view. */
     _createYearRows(e = 0) {
-      const t = this._getStartValueYearView(), a = new Array(b).fill(0).map((r, d) => t + e + d), s = b / C, i = [];
+      const t = this._getStartValueYearView(), a = new Array(w).fill(0).map((r, n) => t + e + n), s = w / T, i = [];
       for (let r = 0; r < s; r++)
-        i.push(a.slice(C * r, C * (r + 1)));
+        i.push(a.slice(T * r, T * (r + 1)));
       return i;
     }
     /**
@@ -216,9 +272,9 @@ let et = (() => {
      */
     _getStartValueYearView() {
       let e = 0;
-      this.max ? e = this._dateAdapter.getYear(this.max) - b + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
+      this.max ? e = this._dateAdapter.getYear(this.max) - w + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
       const t = this._dateAdapter.getYear(this._activeDate);
-      return t - ((t - e) % b + b) % b;
+      return t - ((t - e) % w + w) % w;
     }
     /** Checks if date is within the min-max range. */
     _isDayInRange(e) {
@@ -227,12 +283,14 @@ let et = (() => {
       const t = this._dateAdapter.isValid(this.min) && this._dateAdapter.compareDate(this.min, this._dateAdapter.deserialize(e)) > 0, a = this._dateAdapter.isValid(this.max) && this._dateAdapter.compareDate(this.max, this._dateAdapter.deserialize(e)) < 0;
       return !(t || a);
     }
+    /** Checks if date is within the min-max range in month view. */
     _isMonthInRange(e, t) {
       if (!this.min && !this.max)
         return !0;
       const a = this._dateAdapter.isValid(this.min) && (t < this._dateAdapter.getYear(this.min) || t === this._dateAdapter.getYear(this.min) && e < this._dateAdapter.getMonth(this.min)), s = this._dateAdapter.isValid(this.max) && (t > this._dateAdapter.getYear(this.max) || t === this._dateAdapter.getYear(this.max) && e > this._dateAdapter.getMonth(this.max));
       return !(a || s);
     }
+    /** Checks if date is within the min-max range in year view. */
     _isYearInRange(e) {
       if (!this.min && !this.max)
         return !0;
@@ -303,18 +361,22 @@ let et = (() => {
       let e = this._dateAdapter.addCalendarMonths(this._activeDate, this._wide ? 2 : 1);
       return e = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), 1), this._nextDisabled(e);
     }
+    /** Checks if the "previous year" button should be disabled. */
     _previousYearDisabled() {
       const e = this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate) - 1, 12, 31);
       return this._prevDisabled(e);
     }
+    /** Checks if the "next year" button should be disabled. */
     _nextYearDisabled() {
       const e = this._dateAdapter.createDate(this._dateAdapter.getYear(this._activeDate) + (this._wide ? 2 : 1), 1, 1);
       return this._nextDisabled(e);
     }
+    /** Checks if the "previous year" button should be disabled in year view. */
     _previousYearRangeDisabled() {
       const e = this._dateAdapter.createDate(this._years[0][0] - 1, 12, 31);
       return this._prevDisabled(e);
     }
+    /** Checks if the "next year" button should be disabled in year view. */
     _nextYearRangeDisabled() {
       const e = this._wide ? this._nextMonthYears : this._years, t = e[e.length - 1], a = t[t.length - 1], s = this._dateAdapter.createDate(a + 1, 1, 1);
       return this._nextDisabled(s);
@@ -327,82 +389,146 @@ let et = (() => {
       const e = this._getFirstFocusable();
       e && (e.tabIndex = 0);
     }
+    /** Get the element in the calendar to assign focus. */
     _getFirstFocusable() {
       const e = this._selected ? this._dateAdapter.deserialize(this._selected) : this.now;
-      let t = this.shadowRoot.querySelector(".sbb-calendar__selected") ?? this.shadowRoot.querySelector(`[data-day="${this._dateAdapter.getDate(e)} ${this._dateAdapter.getMonth(e)} ${this._dateAdapter.getYear(e)}"]`) ?? this.shadowRoot.querySelector(`[data-month="${this._dateAdapter.getMonth(e)}"]`) ?? this.shadowRoot.querySelector(`[data-year="${this._dateAdapter.getYear(e)}"]`);
-      return (!t || t != null && t.disabled) && (t = this.shadowRoot.querySelector(".sbb-calendar__cell:not([disabled])")), t || null;
+      let t = this.shadowRoot.querySelector(".sbb-calendar__selected") ?? this.shadowRoot.querySelector(`[value="${this._dateAdapter.toIso8601(e)}"]`) ?? this.shadowRoot.querySelector(`[data-month="${this._dateAdapter.getMonth(e)}"]`) ?? this.shadowRoot.querySelector(`[data-year="${this._dateAdapter.getYear(e)}"]`);
+      return (!t || t != null && t.disabled) && (t = this._calendarView === "day" ? this._getFirstFocusableDay() : this.shadowRoot.querySelector(".sbb-calendar__cell:not([disabled])")), t || null;
+    }
+    /**
+     * 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__cell:not([disabled])')` will return a wrong value.
+     *
+     * To solve this, the element with the lowest `value` is taken (ISO String are ordered).
+     */
+    _getFirstFocusableDay() {
+      const e = Array.from(this.shadowRoot.querySelectorAll(".sbb-calendar__cell:not([disabled])"));
+      if (!e || e.length === 0)
+        return null;
+      {
+        const t = e.map((a) => a.value).sort()[0];
+        return this.shadowRoot.querySelector(`.sbb-calendar__cell[value="${t}"]`);
+      }
     }
     _handleKeyboardEvent(e, t) {
-      ye(e) && e.preventDefault();
-      const a = this._cells, s = a.findIndex((d) => d === e.target), i = this._navigateByKeyboard(e, s, a, t), r = this.shadowRoot.activeElement;
+      Ve(e) && e.preventDefault();
+      const a = this._cells, s = a.findIndex((n) => n === e.target);
+      let i;
+      t ? i = this._navigateByKeyboardDayView(e, s, a, t) : i = this._navigateByKeyboard(e, s, a);
+      const r = this.shadowRoot.activeElement;
       i !== r && (i.tabIndex = 0, i == null || i.focus(), r.tabIndex = -1);
     }
+    _navigateByKeyboardDayView(e, t, a, s) {
+      const i = this.orientation === "horizontal" ? { leftRight: 1, upDown: f } : { leftRight: f, upDown: 1 }, r = t < this._keyboardNavigationDayViewParameters.firstMonthLength ? this._keyboardNavigationDayViewParameters.firstMonthOffset : this._keyboardNavigationDayViewParameters.secondMonthOffset;
+      switch (e.key) {
+        case "ArrowUp":
+          return this._findDayArrows(a, t, s.dateValue, -i.upDown);
+        case "ArrowDown":
+          return this._findDayArrows(a, t, s.dateValue, i.upDown);
+        case "ArrowLeft":
+          return this._findDayArrows(a, t, s.dateValue, -i.leftRight);
+        case "ArrowRight":
+          return this._findDayArrows(a, t, s.dateValue, i.leftRight);
+        case "PageUp":
+          if (this.orientation === "horizontal") {
+            const o = (+s.dayValue % f || f) - +s.dayValue;
+            return this._findDayPageUpDown(a, t, s, o, i.upDown);
+          } else {
+            const p = (Math.ceil((+s.dayValue + r) / f) - 1) * f - r + 1 - +s.dayValue;
+            return this._findDayPageUpDown(a, t, s, p, i.upDown);
+          }
+        case "PageDown":
+          if (this.orientation === "horizontal") {
+            const n = +s.monthValue + 1 > 12 ? 1 : +s.monthValue + 1, o = +s.monthValue + 1 > 12 ? +s.yearValue + 1 : +s.yearValue, p = this._dateAdapter.createDate(o, n, 1), I = this._dateAdapter.getDate(this._dateAdapter.addCalendarDays(p, -1)), O = Math.trunc((I - +s.dayValue) / f) * f;
+            return this._findDayPageUpDown(a, t, s, O, -i.upDown);
+          } else {
+            const p = Math.ceil((+s.dayValue + r) / f) * f - r - +s.dayValue;
+            return this._findDayPageUpDown(a, t, s, p, -i.upDown);
+          }
+        case "Home":
+          return this._findDayFirst(a, t, s, 1);
+        case "End": {
+          const n = +s.monthValue + 1 > 12 ? 1 : +s.monthValue + 1, o = +s.monthValue + 1 > 12 ? +s.yearValue + 1 : +s.yearValue, p = this._dateAdapter.createDate(o, n, 1);
+          return this._findDayLast(a, t, p);
+        }
+        default:
+          return a[t];
+      }
+    }
+    _isDayOutOfView(e) {
+      return e < this._keyboardNavigationDayViewParameters.firstDayInView || e > this._keyboardNavigationDayViewParameters.lastDayInView;
+    }
+    _findDayArrows(e, t, a, s) {
+      const i = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a, s));
+      if (this._isDayOutOfView(i))
+        return e[t];
+      const r = e.find((n) => n.value === i);
+      return !r || r.disabled ? this._findDayArrows(e, t, this._dateAdapter.deserialize(i), s) : r;
+    }
+    _findDayPageUpDown(e, t, a, s, i) {
+      const r = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a.dateValue, s));
+      if (this._isDayOutOfView(r))
+        return e[t];
+      const n = e.find((o) => o.value === r);
+      return !n || n.disabled ? this._findDayPageUpDown(e, t, a, s + i, i) : n;
+    }
+    _findDayFirst(e, t, a, s) {
+      const i = this._dateAdapter.toIso8601(this._dateAdapter.createDate(+a.yearValue, +a.monthValue, s));
+      if (this._isDayOutOfView(i))
+        return e[t];
+      const r = e.find((n) => n.value === i);
+      return !r || r.disabled ? this._findDayFirst(e, t, a, s + 1) : r;
+    }
+    _findDayLast(e, t, a) {
+      const s = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a, -1));
+      if (this._isDayOutOfView(s))
+        return e[t];
+      const i = e.find((r) => r.value === s);
+      return !i || i.disabled ? this._findDayLast(e, t, this._dateAdapter.deserialize(s)) : i;
+    }
     /**
      * 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(e, t, a, s) {
-      const { elementIndexForWideMode: i, offsetForWideMode: r, lastElementIndexForWideMode: d, verticalOffset: _ } = this._calculateParametersForKeyboardNavigation(a, t, s);
+    _navigateByKeyboard(e, t, a) {
+      const { elementIndexForWideMode: s, offsetForWideMode: i, lastElementIndexForWideMode: r, verticalOffset: n } = this._calculateParametersForKeyboardNavigation(t, this._calendarView === "year");
       switch (e.key) {
         case "ArrowUp":
-          return this._findNext(a, t, -_);
+          return this._findNext(a, t, -n);
         case "ArrowDown":
-          return this._findNext(a, t, _);
+          return this._findNext(a, t, n);
         case "ArrowLeft":
           return this._findNext(a, t, -1);
         case "ArrowRight":
           return this._findNext(a, t, 1);
         case "Home":
-          return this._findFirst(a, r);
+          return this._findFirst(a, i);
         case "PageUp":
-          return this._findFirstOnColumn(a, i, r, _);
+          return this._findFirstOnColumn(a, s, i, n);
         case "PageDown":
-          return this._findLastOnColumn(a, t, d, _);
+          return this._findLastOnColumn(a, t, r, n);
         case "End":
-          return this._findLast(a, d - 1);
+          return this._findLast(a, r - 1);
         default:
           return a[t];
       }
     }
     /**
-     * Calculates the parameter needed in keyboard navigation.
-     * Since three views are now available, the function creates and returns the correct parameters for each of them
-     * by considering the number of cells per each row and the correction for the wide mode.
-     * @param cells The array of rendered table cells; they are buttons that can represent days, months or years.
+     * Calculates the parameters needed in keyboard navigation in year and month view.
      * @param index The starting element's index in the cell array.
-     * @param day (optional) Only in the day view, the day represented by the starting cell.
+     * @param isYearView Whether the displayed `view` is the year one.
      */
-    _calculateParametersForKeyboardNavigation(e, t, a) {
-      switch (this._calendarView) {
-        case "day": {
-          const s = +a.dayValue - 1;
-          return {
-            verticalOffset: O,
-            elementIndexForWideMode: s,
-            offsetForWideMode: t - s,
-            lastElementIndexForWideMode: t === s ? this._dateAdapter.getNumDaysInMonth(this._dateAdapter.addCalendarMonths(this._dateAdapter.deserialize(a.value), -1)) : e.length
-          };
-        }
-        // Month view is not dependent from `wide` value, so some parameters are fixed.
-        case "month":
-          return {
-            verticalOffset: I,
-            elementIndexForWideMode: t,
-            offsetForWideMode: 0,
-            lastElementIndexForWideMode: 12
-          };
-        case "year": {
-          const s = Math.trunc(t / b) * b, i = s === 0 ? t : t - b;
-          return {
-            verticalOffset: C,
-            elementIndexForWideMode: i,
-            offsetForWideMode: t - i,
-            lastElementIndexForWideMode: s === 0 ? b : b * 2
-          };
-        }
-      }
+    _calculateParametersForKeyboardNavigation(e, t) {
+      const a = t ? w : ze, s = Math.trunc(e / a) * a, i = s === 0 ? e : e - a;
+      return {
+        verticalOffset: t ? T : S,
+        elementIndexForWideMode: i,
+        offsetForWideMode: e - i,
+        lastElementIndexForWideMode: s === 0 ? a : a * 2
+      };
     }
     /**
      * Gets the next element of the provided array starting from `index` by adding `delta`.
@@ -439,32 +565,37 @@ let et = (() => {
     /** Render the view for the day selection. */
     _renderDayView() {
       const e = this._wide ? this._dateAdapter.addCalendarMonths(this._activeDate, 1) : void 0;
-      return n`
+      return l`
       <div class="sbb-calendar__controls">
-        ${this._getArrow("left", () => this._goToDifferentMonth(-1), ke[this._language.current], this._previousMonthDisabled())}
+        ${this._getArrow("left", () => this._goToDifferentMonth(-1), Ie[this._language.current], this._previousMonthDisabled())}
         <div class="sbb-calendar__controls-month">
           ${this._createLabelForDayView(this._activeDate)}
-          ${this._wide ? this._createLabelForDayView(e) : g}
+          ${this._wide ? this._createLabelForDayView(e) : m}
           <sbb-screen-reader-only role="status">
             ${this._createAriaLabelForDayView(this._activeDate, e)}
           </sbb-screen-reader-only>
         </div>
-        ${this._getArrow("right", () => this._goToDifferentMonth(1), Ve[this._language.current], this._nextMonthDisabled())}
+        ${this._getArrow("right", () => this._goToDifferentMonth(1), Oe[this._language.current], this._nextMonthDisabled())}
       </div>
       <div class="sbb-calendar__table-container sbb-calendar__table-day-view">
-        ${this._createDayTable(this._weeks)}
-        ${this._wide ? this._createDayTable(this._nextMonthWeeks) : g}
+        ${this.orientation === "horizontal" ? l`
+              ${this._createDayTable(this._weeks)}
+              ${this._wide ? this._createDayTable(this._nextMonthWeeks) : m}
+            ` : l`
+              ${this._createDayTableVertical(this._weeks)}
+              ${this._wide ? this._createDayTableVertical(this._nextMonthWeeks, e) : m}
+            `}
       </div>
     `;
     }
     /** Creates the label with the month for the daily view. */
     _createLabelForDayView(e) {
       const t = `${this._monthNames[this._dateAdapter.getMonth(e) - 1]} ${this._dateAdapter.getYear(e)}`;
-      return n`
+      return l`
       <button
         type="button"
         class="sbb-calendar__date-selection sbb-calendar__controls-change-date"
-        aria-label="${ze[this._language.current]} ${t}"
+        aria-label="${Ne[this._language.current]} ${t}"
         @click=${() => {
         this._resetFocus = !0, this._nextCalendarView = "year", this._startTableTransition();
       }}
@@ -483,78 +614,95 @@ let et = (() => {
     }
     /** Creates the calendar table for the daily view. */
     _createDayTable(e) {
-      return n`
+      const t = this._dateAdapter.toIso8601(this.now);
+      return l`
       <table
         class="sbb-calendar__table"
-        @focusout=${(t) => this._handleTableBlur(t.relatedTarget)}
-        @animationend=${(t) => this._tableAnimationEnd(t)}
+        @focusout=${(a) => this._handleTableBlur(a.relatedTarget)}
+        @animationend=${(a) => this._tableAnimationEnd(a)}
       >
         <thead class="sbb-calendar__table-header">
           <tr class="sbb-calendar__table-header-row">
-            ${this._createDayTableHeader()}
+            ${this._weekdays.map((a) => l`
+                <th class="sbb-calendar__table-header">
+                  <sbb-screen-reader-only>${a.long}</sbb-screen-reader-only>
+                  <span aria-hidden="true">${a.narrow}</span>
+                </th>
+              `)}
           </tr>
         </thead>
         <tbody class="sbb-calendar__table-body">
-          ${this._createDayTableBody(e)}
+          ${e.map((a, s) => {
+        const i = f - a.length;
+        return s === 0 && i ? l`
+                <tr>
+                  ${[...Array(i).keys()].map(() => l`<td class="sbb-calendar__table-data"></td>`)}
+                  ${this._createDayCells(a, t)}
+                </tr>
+              ` : l`<tr>
+              ${this._createDayCells(a, t)}
+            </tr>`;
+      })}
         </tbody>
       </table>
     `;
     }
-    /** Creates the table header with the month header cells. */
-    _createDayTableHeader() {
-      return this._weekdays.map((e) => n`
-        <th class="sbb-calendar__table-header">
-          <sbb-screen-reader-only>${e.long}</sbb-screen-reader-only>
-          <span aria-hidden="true">${e.narrow}</span>
-        </th>
-      `);
-    }
-    /** Creates the table body with the day cells. For the first row, it also considers the possible day's offset. */
-    _createDayTableBody(e) {
-      const t = this._dateAdapter.toIso8601(this.now);
-      return e.map((a, s) => {
-        const i = O - a.length;
-        return s === 0 && i ? n`
-          <tr>
-            ${[...Array(i).keys()].map(() => n`<td
-                  class="sbb-calendar__table-data"
-                  data-day=${`0 ${a[0].monthValue} ${a[0].yearValue}`}
-                ></td>`)}
-            ${this._createDayCells(a, t)}
-          </tr>
-        ` : n`<tr>
-        ${this._createDayCells(a, t)}
-      </tr>`;
-      });
+    /* Creates the table in orientation='vertical'. */
+    _createDayTableVertical(e, t) {
+      const a = this._dateAdapter.toIso8601(this.now), s = this._dateAdapter.getFirstWeekOffset(t ?? this._activeDate);
+      return l`
+      <table
+        class="sbb-calendar__table"
+        @focusout=${(i) => this._handleTableBlur(i.relatedTarget)}
+        @animationend=${(i) => this._tableAnimationEnd(i)}
+      >
+        <tbody class="sbb-calendar__table-body">
+          ${e.map((i, r) => {
+        const n = this._weekdays[r];
+        return l`
+              <tr>
+                ${t ? m : l` <td class="sbb-calendar__table-header">
+                      <sbb-screen-reader-only>${n.long}</sbb-screen-reader-only>
+                      <span aria-hidden="true">${n.narrow}</span>
+                    </td>`}
+                ${r < s ? l`<td class="sbb-calendar__table-data"></td>` : m}
+                ${this._createDayCells(i, a)}
+              </tr>
+            `;
+      })}
+        </tbody>
+      </table>
+    `;
     }
     /** Creates the cells for the daily view. */
     _createDayCells(e, t) {
       return e.map((a) => {
-        const s = !this._isDayInRange(a.value), i = !this._dateFilter(this._dateAdapter.deserialize(a.value)), r = !!this._selected && a.value === this._selected, d = `${a.dayValue} ${a.monthValue} ${a.yearValue}`, _ = a.value === t;
-        return n`
+        const s = !this._isDayInRange(a.value), i = !this._dateFilter(this._dateAdapter.deserialize(a.value)), r = !!this._selected && a.value === this._selected, n = a.value === t;
+        return l`
         <td
-          class=${R({
+          class=${C({
           "sbb-calendar__table-data": !0,
           "sbb-calendar__table-data-selected": r
         })}
         >
           <button
-            class=${R({
+            class=${C({
           "sbb-calendar__cell": !0,
           "sbb-calendar__day": !0,
-          "sbb-calendar__cell-current": _,
+          "sbb-calendar__cell-current": n,
           "sbb-calendar__selected": r,
           "sbb-calendar__crossed-out": !s && i
         })}
             @click=${() => this._selectDate(a.value)}
             ?disabled=${s || i}
+            value=${a.value}
+            type="button"
             aria-label=${this._dateAdapter.getAccessibilityFormatDate(a.value)}
             aria-pressed=${r}
             aria-disabled=${s || i}
-            aria-current=${_ ? "date" : g}
-            data-day=${d || g}
+            aria-current=${n ? "date" : m}
             tabindex="-1"
-            @keydown=${(y) => this._handleKeyboardEvent(y, a)}
+            @keydown=${(o) => this._handleKeyboardEvent(o, a)}
             sbb-popover-close
           >
             ${a.dayValue}
@@ -565,71 +713,71 @@ let et = (() => {
     }
     /** Render the view for the month selection. */
     _renderMonthView() {
-      return n`
+      return l`
       <div class="sbb-calendar__controls">
-        ${this._getArrow("left", () => this._goToDifferentYear(-1), Fe[this._language.current], this._previousYearDisabled())}
+        ${this._getArrow("left", () => this._goToDifferentYear(-1), Ce[this._language.current], this._previousYearDisabled())}
         <div class="sbb-calendar__controls-month">${this._createLabelForMonthView()}</div>
-        ${this._getArrow("right", () => this._goToDifferentYear(1), Re[this._language.current], this._nextYearDisabled())}
+        ${this._getArrow("right", () => this._goToDifferentYear(1), Se[this._language.current], this._nextYearDisabled())}
       </div>
       <div class="sbb-calendar__table-container sbb-calendar__table-month-view">
         ${this._createMonthTable(this._months, this._chosenYear)}
-        ${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1) : g}
+        ${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1) : m}
       </div>
     `;
     }
     /** Creates the label with the year for the monthly view. */
     _createLabelForMonthView() {
-      return n` <button
+      return l` <button
         type="button"
         id="sbb-calendar__month-selection"
         class="sbb-calendar__controls-change-date"
-        aria-label=${`${me[this._language.current]} ${this._chosenYear}`}
+        aria-label=${`${ve[this._language.current]} ${this._chosenYear}`}
         @click=${() => this._resetCalendarView(!0)}
       >
-        ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : g}
+        ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : m}
         <sbb-icon name="chevron-small-up-small"></sbb-icon>
       </button>
       <sbb-screen-reader-only role="status"> ${this._chosenYear} </sbb-screen-reader-only>`;
     }
     /** Creates the table for the month selection view. */
     _createMonthTable(e, t) {
-      return n`
+      return l`
       <table
         class="sbb-calendar__table"
         @animationend=${(a) => this._tableAnimationEnd(a)}
       >
-        ${this._wide ? n`<thead class="sbb-calendar__table-header" aria-hidden="true">
+        ${this._wide ? l`<thead class="sbb-calendar__table-header" aria-hidden="true">
               <tr class="sbb-calendar__table-header-row">
-                <th class="sbb-calendar__table-header" colspan=${I}>${t}</th>
+                <th class="sbb-calendar__table-header" colspan=${S}>${t}</th>
               </tr>
-            </thead>` : g}
+            </thead>` : m}
         <tbody class="sbb-calendar__table-body">
-          ${e.map((a) => n`
+          ${e.map((a) => l`
               <tr>
                 ${a.map((s) => {
-        const i = !this._isMonthInRange(s.monthValue, t), r = !this._isMonthFilteredOut(s.monthValue, t), d = this._selected ? this._dateAdapter.getMonth(this._dateAdapter.deserialize(this._selected)) : void 0, _ = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, y = !!this._selected && t === _ && s.monthValue === d, T = t === this._dateAdapter.getYear(this.now) && this._dateAdapter.getMonth(this.now) === s.monthValue;
-        return n` <td
-                    class=${R({
+        const i = !this._isMonthInRange(s.monthValue, t), r = !this._isMonthFilteredOut(s.monthValue, t), n = this._selected ? this._dateAdapter.getMonth(this._dateAdapter.deserialize(this._selected)) : void 0, o = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, p = !!this._selected && t === o && s.monthValue === n, I = t === this._dateAdapter.getYear(this.now) && this._dateAdapter.getMonth(this.now) === s.monthValue;
+        return l` <td
+                    class=${C({
           "sbb-calendar__table-data": !0,
           "sbb-calendar__table-month": !0
         })}
                   >
                     <button
-                      class=${R({
+                      class=${C({
           "sbb-calendar__cell": !0,
           "sbb-calendar__pill": !0,
-          "sbb-calendar__cell-current": T,
+          "sbb-calendar__cell-current": I,
           "sbb-calendar__crossed-out": !i && r,
-          "sbb-calendar__selected": y
+          "sbb-calendar__selected": p
         })}
                       @click=${() => this._onMonthSelection(s.monthValue, t)}
                       ?disabled=${i || r}
                       aria-label=${`${s.longValue} ${t}`}
-                      aria-pressed=${y}
+                      aria-pressed=${p}
                       aria-disabled=${String(i || r)}
                       tabindex="-1"
-                      data-month=${s.monthValue || g}
-                      @keydown=${(N) => this._handleKeyboardEvent(N)}
+                      data-month=${s.monthValue || m}
+                      @keydown=${(O) => this._handleKeyboardEvent(O)}
                     >
                       ${s.value}
                     </button>
@@ -647,21 +795,21 @@ let et = (() => {
     }
     /** Render the view for the year selection. */
     _renderYearView() {
-      return n`
+      return l`
       <div class="sbb-calendar__controls">
-        ${this._getArrow("left", () => this._goToDifferentYearRange(-b), Ie(b)[this._language.current], this._previousYearRangeDisabled())}
+        ${this._getArrow("left", () => this._goToDifferentYearRange(-w), Te(w)[this._language.current], this._previousYearRangeDisabled())}
         <div class="sbb-calendar__controls-month">${this._createLabelForYearView()}</div>
-        ${this._getArrow("right", () => this._goToDifferentYearRange(b), Ce(b)[this._language.current], this._nextYearRangeDisabled())}
+        ${this._getArrow("right", () => this._goToDifferentYearRange(w), Pe(w)[this._language.current], this._nextYearRangeDisabled())}
       </div>
       <div class="sbb-calendar__table-container sbb-calendar__table-year-view">
         ${this._createYearTable(this._years)}
-        ${this._wide ? this._createYearTable(this._nextMonthYears, !0) : g}
+        ${this._wide ? this._createYearTable(this._nextMonthYears, !0) : m}
       </div>
     `;
     }
     /** Creates the button arrow for all the views. */
     _getArrow(e, t, a, s) {
-      return n`<sbb-secondary-button
+      return l`<sbb-secondary-button
       size="m"
       icon-name="chevron-small-${e}-small"
       aria-label=${a}
@@ -673,12 +821,12 @@ let et = (() => {
     /** Creates the label with the year range for the yearly view. */
     _createLabelForYearView() {
       const e = this._years.flat()[0], t = (this._wide ? this._nextMonthYears : this._years).flat(), a = t[t.length - 1], s = `${e} - ${a}`;
-      return n`
+      return l`
       <button
         type="button"
         id="sbb-calendar__year-selection"
         class="sbb-calendar__controls-change-date"
-        aria-label="${me[this._language.current]} ${s}"
+        aria-label="${ve[this._language.current]} ${s}"
         @click=${() => this._resetCalendarView(!0)}
       >
         ${s}
@@ -690,31 +838,31 @@ let et = (() => {
     /** Creates the table for the year selection view. */
     _createYearTable(e, t = !1) {
       const a = this.now;
-      return n` <table
+      return l` <table
       class="sbb-calendar__table"
       @animationend=${(s) => this._tableAnimationEnd(s)}
     >
       <tbody class="sbb-calendar__table-body">
-        ${e.map((s) => n` <tr>
+        ${e.map((s) => l` <tr>
               ${s.map((i) => {
-        const r = !this._isYearInRange(i), d = !this._isYearFilteredOut(i), _ = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, y = !!this._selected && i === _, T = this._dateAdapter.getYear(a) === i;
-        return n` <td class="sbb-calendar__table-data sbb-calendar__table-year">
+        const r = !this._isYearInRange(i), n = !this._isYearFilteredOut(i), o = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, p = !!this._selected && i === o, I = this._dateAdapter.getYear(a) === i;
+        return l` <td class="sbb-calendar__table-data sbb-calendar__table-year">
                   <button
-                    class=${R({
+                    class=${C({
           "sbb-calendar__cell": !0,
           "sbb-calendar__pill": !0,
-          "sbb-calendar__cell-current": T,
-          "sbb-calendar__crossed-out": !r && d,
-          "sbb-calendar__selected": y
+          "sbb-calendar__cell-current": I,
+          "sbb-calendar__crossed-out": !r && n,
+          "sbb-calendar__selected": p
         })}
                     @click=${() => this._onYearSelection(i, t)}
-                    ?disabled=${r || d}
+                    ?disabled=${r || n}
                     aria-label=${i}
-                    aria-pressed=${y}
-                    aria-disabled=${String(r || d)}
+                    aria-pressed=${p}
+                    aria-disabled=${String(r || n)}
                     tabindex="-1"
-                    data-year=${i || g}
-                    @keydown=${(N) => this._handleKeyboardEvent(N)}
+                    data-year=${i || m}
+                    @keydown=${(O) => this._handleKeyboardEvent(O)}
                   >
                     ${i}
                   </button>
@@ -729,8 +877,8 @@ let et = (() => {
       this._chosenYear = t ? e - 1 : e, this._nextCalendarView = "month", this._assignActiveDate(this._dateAdapter.createDate(this._chosenYear, this._dateAdapter.getMonth(this._activeDate), this._dateAdapter.getDate(this._activeDate))), this._startTableTransition();
     }
     _getView() {
-      if (ue || this.hydrationRequired)
-        return n`${g}`;
+      if (me || this.hydrationRequired)
+        return l`${m}`;
       switch (this._calendarView) {
         case "year":
           return this._renderYearView();
@@ -750,40 +898,42 @@ let et = (() => {
       this.toggleAttribute("data-transition", !0), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("table")) == null || t.forEach((a) => a.classList.toggle("sbb-calendar__table-hide"));
     }
     render() {
-      return n`<div class="sbb-calendar__wrapper">${this._getView()}</div>`;
+      return l`<div class="sbb-calendar__wrapper">${this._getView()}</div>`;
     }
-  }, D = new WeakMap(), $ = new WeakMap(), Y = new WeakMap(), M = new WeakMap(), k = new WeakMap(), V = new WeakMap(), z = new WeakMap(), p = l, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(E[Symbol.metadata] ?? null) : void 0;
-    W = [Ye(), A({ type: Boolean })], B = [A()], H = [A()], U = [A()], j = [A()], G = [A()], Q = [A({ attribute: "date-filter" })], Z = [F()], ae = [F()], re = [F()], ne = [F()], oe = [F()], m(l, null, W, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (t) => "wide" in t, get: (t) => t.wide, set: (t, a) => {
+  }, V = new WeakMap(), k = new WeakMap(), $ = new WeakMap(), M = new WeakMap(), Y = new WeakMap(), z = new WeakMap(), F = new WeakMap(), R = new WeakMap(), v = d, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(W[Symbol.metadata] ?? null) : void 0;
+    E = [Fe(), A({ type: Boolean })], q = [A()], H = [A()], j = [A()], G = [A()], Q = [A()], J = [A({ attribute: "date-filter" })], ee = [A({ reflect: !0 })], se = [N()], ne = [N()], de = [N()], ce = [N()], _e = [N()], u(d, null, E, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (t) => "wide" in t, get: (t) => t.wide, set: (t, a) => {
       t.wide = a;
-    } }, metadata: e }, L, P), m(l, null, B, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (t) => "view" in t, get: (t) => t.view, set: (t, a) => {
+    } }, metadata: e }, L, B), u(d, null, q, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (t) => "view" in t, get: (t) => t.view, set: (t, a) => {
       t.view = a;
-    } }, metadata: e }, q, K), m(l, null, H, { kind: "setter", name: "min", static: !1, private: !1, access: { has: (t) => "min" in t, set: (t, a) => {
+    } }, metadata: e }, K, U), u(d, null, H, { kind: "setter", name: "min", static: !1, private: !1, access: { has: (t) => "min" in t, set: (t, a) => {
       t.min = a;
-    } }, metadata: e }, null, x), m(l, null, U, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (t) => "max" in t, set: (t, a) => {
+    } }, metadata: e }, null, x), u(d, null, j, { kind: "setter", name: "max", static: !1, private: !1, access: { has: (t) => "max" in t, set: (t, a) => {
       t.max = a;
-    } }, metadata: e }, null, x), m(l, null, j, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (t) => "now" in t, set: (t, a) => {
+    } }, metadata: e }, null, x), u(d, null, G, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (t) => "now" in t, set: (t, a) => {
       t.now = a;
-    } }, metadata: e }, null, x), m(l, null, G, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, a) => {
+    } }, metadata: e }, null, x), u(d, null, Q, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, a) => {
       t.selected = a;
-    } }, metadata: e }, null, x), m(l, null, Q, { kind: "accessor", name: "dateFilter", static: !1, private: !1, access: { has: (t) => "dateFilter" in t, get: (t) => t.dateFilter, set: (t, a) => {
+    } }, metadata: e }, null, x), u(d, null, J, { kind: "accessor", name: "dateFilter", static: !1, private: !1, access: { has: (t) => "dateFilter" in t, get: (t) => t.dateFilter, set: (t, a) => {
       t.dateFilter = a;
-    } }, metadata: e }, J, X), m(l, null, Z, { kind: "accessor", name: "_activeDate", static: !1, private: !1, access: { has: (t) => "_activeDate" in t, get: (t) => t._activeDate, set: (t, a) => {
+    } }, metadata: e }, X, Z), u(d, null, ee, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, a) => {
+      t.orientation = a;
+    } }, metadata: e }, te, ae), u(d, null, se, { kind: "accessor", name: "_activeDate", static: !1, private: !1, access: { has: (t) => "_activeDate" in t, get: (t) => t._activeDate, set: (t, a) => {
       t._activeDate = a;
-    } }, metadata: e }, ee, te), m(l, null, ae, { kind: "accessor", name: "_selected", static: !1, private: !1, access: { has: (t) => "_selected" in t, get: (t) => t._selected, set: (t, a) => {
+    } }, metadata: e }, ie, re), u(d, null, ne, { kind: "accessor", name: "_selected", static: !1, private: !1, access: { has: (t) => "_selected" in t, get: (t) => t._selected, set: (t, a) => {
       t._selected = a;
-    } }, metadata: e }, se, ie), m(l, null, re, { kind: "setter", name: "_wide", static: !1, private: !1, access: { has: (t) => "_wide" in t, set: (t, a) => {
+    } }, metadata: e }, le, oe), u(d, null, de, { kind: "setter", name: "_wide", static: !1, private: !1, access: { has: (t) => "_wide" in t, set: (t, a) => {
       t._wide = a;
-    } }, metadata: e }, null, x), m(l, null, ne, { kind: "accessor", name: "_calendarView", static: !1, private: !1, access: { has: (t) => "_calendarView" in t, get: (t) => t._calendarView, set: (t, a) => {
+    } }, metadata: e }, null, x), u(d, null, ce, { kind: "accessor", name: "_calendarView", static: !1, private: !1, access: { has: (t) => "_calendarView" in t, get: (t) => t._calendarView, set: (t, a) => {
       t._calendarView = a;
-    } }, metadata: e }, le, de), m(l, null, oe, { kind: "accessor", name: "_initialized", static: !1, private: !1, access: { has: (t) => "_initialized" in t, get: (t) => t._initialized, set: (t, a) => {
+    } }, metadata: e }, he, be), u(d, null, _e, { kind: "accessor", name: "_initialized", static: !1, private: !1, access: { has: (t) => "_initialized" in t, get: (t) => t._initialized, set: (t, a) => {
       t._initialized = a;
-    } }, metadata: e }, ce, be), m(null, h = { value: p }, o, { kind: "class", name: p.name, metadata: e }, null, f), S = p = h.value, e && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = Te, l.events = {
+    } }, metadata: e }, ue, fe), u(null, _ = { value: v }, h, { kind: "class", name: v.name, metadata: e }, null, g), P = v = _.value, e && Object.defineProperty(v, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), d.styles = Ee, d.events = {
     dateSelected: "dateSelected"
-  }, c(p, f), l);
-  return S = p;
+  }, c(v, g), d);
+  return P = v;
 })();
 export {
-  et as SbbCalendarElement
+  rt as SbbCalendarElement
 };