@sbb-esta/lyne-elements 4.5.1 → 4.6.0

package/calendar/{calendar.component.js → calendar/calendar.component.js}

@@ -1,46 +1,47 @@
 var Ce = (o) => {
   throw TypeError(o);
 };
-var Ie = (o, n, d) => n.has(o) || Ce("Cannot " + d);
-var A = (o, n, d) => (Ie(o, n, "read from private field"), d ? d.call(o) : n.get(o)), x = (o, n, d) => n.has(o) ? Ce("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(o) : n.set(o, d), f = (o, n, d, b) => (Ie(o, n, "write to private field"), b ? b.call(o, d) : n.set(o, d), d);
-import { __esDecorate as y, __runInitializers as u } from "tslib";
-import { css as Le, LitElement as Be, isServer as Se, nothing as m, html as h } from "lit";
-import { customElement as He, property as Y, state as G } from "lit/decorators.js";
-import { classMap as Q } from "lit/directives/class-map.js";
-import { isArrowKeyOrPageKeysPressed as Ke } from "../core/a11y.js";
-import { readConfig as Ue } from "../core/config.js";
-import { SbbLanguageController as qe, SbbMediaMatcherController as je, SbbMediaQueryBreakpointLargeAndAbove as Re } from "../core/controllers.js";
-import { defaultDateAdapter as Ge, YEARS_PER_PAGE as V, DAYS_PER_ROW as D, MONTHS_PER_ROW as J, YEARS_PER_ROW as X, MONTHS_PER_PAGE as Qe } from "../core/datetime.js";
-import { forceType as Z, plainDate as Te, handleDistinctChange as Je } from "../core/decorators.js";
-import { i18nPreviousMonth as Xe, i18nNextMonth as Ze, i18nYearMonthSelection as et, i18nCalendarWeekNumber as U, i18nPreviousYear as tt, i18nNextYear as at, i18nCalendarDateSelection as Ee, i18nPreviousYearRange as st, i18nNextYearRange as it } from "../core/i18n.js";
-import { SbbHydrationMixin as rt, SbbElementInternalsMixin as nt } from "../core/mixins.js";
-import { boxSizingStyles as lt } from "../core/styles.js";
-import "../button/secondary-button.js";
-import "../icon.js";
-import "../screen-reader-only.js";
-const ot = 6048e5, Pe = /* @__PURE__ */ Symbol.for("constructDateFrom");
+var Se = (o, n, d) => n.has(o) || Ce("Cannot " + d);
+var A = (o, n, d) => (Se(o, n, "read from private field"), d ? d.call(o) : n.get(o)), x = (o, n, d) => n.has(o) ? Ce("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(o) : n.set(o, d), u = (o, n, d, h) => (Se(o, n, "write to private field"), h ? h.call(o, d) : n.set(o, d), d);
+import { __esDecorate as w, __runInitializers as _ } from "tslib";
+import { css as Le, LitElement as He, isServer as We, nothing as p, html as c } from "lit";
+import { customElement as Be, property as Y, state as Q } from "lit/decorators.js";
+import { classMap as J } from "lit/directives/class-map.js";
+import { isArrowKeyOrPageKeysPressed as qe } from "../../core/a11y.js";
+import { readConfig as Ke } from "../../core/config.js";
+import { SbbLanguageController as Ue, SbbMediaMatcherController as Qe, SbbMediaQueryBreakpointLargeAndAbove as Ie } from "../../core/controllers.js";
+import { defaultDateAdapter as je, YEARS_PER_PAGE as $, DAYS_PER_ROW as y, MONTHS_PER_ROW as j, YEARS_PER_ROW as G, MONTHS_PER_PAGE as Ge } from "../../core/datetime.js";
+import { forceType as X, plainDate as Ne, handleDistinctChange as Je } from "../../core/decorators.js";
+import { i18nPreviousMonth as Xe, i18nNextMonth as Ze, i18nYearMonthSelection as et, i18nCalendarWeekNumber as K, i18nPreviousYear as tt, i18nNextYear as at, i18nCalendarDateSelection as Re, i18nPreviousYearRange as st, i18nNextYearRange as rt } from "../../core/i18n.js";
+import { SbbHydrationMixin as it, SbbElementInternalsMixin as nt } from "../../core/mixins.js";
+import { boxSizingStyles as lt } from "../../core/styles.js";
+import "../../button/secondary-button.js";
+import "../../icon.js";
+import "../../screen-reader-only.js";
+import "../calendar-day/calendar-day.component.js";
+const ot = 6048e5, Te = /* @__PURE__ */ Symbol.for("constructDateFrom");
 function F(o, n) {
-  return typeof o == "function" ? o(n) : o && typeof o == "object" && Pe in o ? o[Pe](n) : o instanceof Date ? new o.constructor(n) : new Date(n);
+  return typeof o == "function" ? o(n) : o && typeof o == "object" && Te in o ? o[Te](n) : o instanceof Date ? new o.constructor(n) : new Date(n);
 }
-function q(o, n) {
+function U(o, n) {
   return F(n || o, o);
 }
 function dt(o, n, d) {
-  const b = q(o, d?.in);
-  return isNaN(n) ? F(o, NaN) : (n && b.setDate(b.getDate() + n), b);
+  const h = U(o, d?.in);
+  return isNaN(n) ? F(o, NaN) : (n && h.setDate(h.getDate() + n), h);
 }
 let ct = {};
-function te() {
+function Z() {
   return ct;
 }
 function z(o, n) {
-  const d = te(), b = n?.weekStartsOn ?? n?.locale?.options?.weekStartsOn ?? d.weekStartsOn ?? d.locale?.options?.weekStartsOn ?? 0, p = q(o, n?.in), w = p.getDay(), $ = (w < b ? 7 : 0) + w - b;
-  return p.setDate(p.getDate() - $), p.setHours(0, 0, 0, 0), p;
+  const d = Z(), h = n?.weekStartsOn ?? n?.locale?.options?.weekStartsOn ?? d.weekStartsOn ?? d.locale?.options?.weekStartsOn ?? 0, m = U(o, n?.in), v = m.getDay(), V = (v < h ? 7 : 0) + v - h;
+  return m.setDate(m.getDate() - V), m.setHours(0, 0, 0, 0), m;
 }
 function ht(o, ...n) {
   const d = F.bind(
     null,
-    o || n.find((b) => typeof b == "object")
+    o || n.find((h) => typeof h == "object")
   );
   return n.map(d);
 }
@@ -48,91 +49,106 @@ function bt(o, n, d) {
   return dt(o, n * 7, d);
 }
 function _t(o, n) {
-  const d = q(o, n?.in), b = d.getMonth();
-  return d.setFullYear(d.getFullYear(), b + 1, 0), d.setHours(23, 59, 59, 999), d;
+  const d = U(o, n?.in), h = d.getMonth();
+  return d.setFullYear(d.getFullYear(), h + 1, 0), d.setHours(23, 59, 59, 999), d;
 }
 function ut(o, n) {
-  const [d, b] = ht(o, n.start, n.end);
-  return { start: d, end: b };
+  const [d, h] = ht(o, n.start, n.end);
+  return { start: d, end: h };
 }
 function ft(o, n) {
-  const { start: d, end: b } = ut(n?.in, o);
-  let p = +d > +b;
-  const w = z(p ? b : d, n), $ = z(p ? d : b, n);
-  w.setHours(15), $.setHours(15);
-  const O = +$.getTime();
-  let k = w, M = n?.step ?? 1;
+  const { start: d, end: h } = ut(n?.in, o);
+  let m = +d > +h;
+  const v = z(m ? h : d, n), V = z(m ? d : h, n);
+  v.setHours(15), V.setHours(15);
+  const O = +V.getTime();
+  let D = v, M = n?.step ?? 1;
   if (!M) return [];
-  M < 0 && (M = -M, p = !p);
-  const W = [];
-  for (; +k <= O; )
-    k.setHours(0), W.push(F(d, k)), k = bt(k, M), k.setHours(15);
-  return p ? W.reverse() : W;
+  M < 0 && (M = -M, m = !m);
+  const C = [];
+  for (; +D <= O; )
+    D.setHours(0), C.push(F(d, D)), D = bt(D, M), D.setHours(15);
+  return m ? C.reverse() : C;
 }
 function gt(o, n) {
-  const d = q(o, n?.in);
+  const d = U(o, n?.in);
   return d.setDate(1), d.setHours(0, 0, 0, 0), d;
 }
+function mt(o, n) {
+  const d = U(o, n?.in), h = d.getFullYear(), m = Z(), v = n?.firstWeekContainsDate ?? n?.locale?.options?.firstWeekContainsDate ?? m.firstWeekContainsDate ?? m.locale?.options?.firstWeekContainsDate ?? 1, V = F(n?.in || o, 0);
+  V.setFullYear(h + 1, 0, v), V.setHours(0, 0, 0, 0);
+  const O = z(V, n), D = F(n?.in || o, 0);
+  D.setFullYear(h, 0, v), D.setHours(0, 0, 0, 0);
+  const M = z(D, n);
+  return +d >= +O ? h + 1 : +d >= +M ? h : h - 1;
+}
 function pt(o, n) {
-  const d = q(o, n?.in), b = d.getFullYear(), p = te(), w = n?.firstWeekContainsDate ?? n?.locale?.options?.firstWeekContainsDate ?? p.firstWeekContainsDate ?? p.locale?.options?.firstWeekContainsDate ?? 1, $ = F(n?.in || o, 0);
-  $.setFullYear(b + 1, 0, w), $.setHours(0, 0, 0, 0);
-  const O = z($, n), k = F(n?.in || o, 0);
-  k.setFullYear(b, 0, w), k.setHours(0, 0, 0, 0);
-  const M = z(k, n);
-  return +d >= +O ? b + 1 : +d >= +M ? b : b - 1;
+  const d = Z(), h = n?.firstWeekContainsDate ?? n?.locale?.options?.firstWeekContainsDate ?? d.firstWeekContainsDate ?? d.locale?.options?.firstWeekContainsDate ?? 1, m = mt(o, n), v = F(n?.in || o, 0);
+  return v.setFullYear(m, 0, h), v.setHours(0, 0, 0, 0), z(v, n);
 }
-function mt(o, n) {
-  const d = te(), b = n?.firstWeekContainsDate ?? n?.locale?.options?.firstWeekContainsDate ?? d.firstWeekContainsDate ?? d.locale?.options?.firstWeekContainsDate ?? 1, p = pt(o, n), w = F(n?.in || o, 0);
-  return w.setFullYear(p, 0, b), w.setHours(0, 0, 0, 0), z(w, n);
+function Ee(o, n) {
+  const d = U(o, n?.in), h = +z(d, n) - +pt(d, n);
+  return Math.round(h / ot) + 1;
 }
-function ee(o, n) {
-  const d = q(o, n?.in), b = +z(d, n) - +mt(d, n);
-  return Math.round(b / ot) + 1;
+const vt = Le`: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-header-color: var(--sbb-color-granite);--sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-background-color-hover: var(--sbb-background-color-3);--sbb-calendar-cell-background-color-active: var(--sbb-background-color-4);--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-2);--sbb-calendar-cell-border-radius: var(--sbb-border-radius-4x);--sbb-calendar-cell-selected-border: var(--sbb-border-width-2x) solid var(--sbb-border-color-2);--sbb-calendar-cell-selected-background-color: var(--sbb-background-color-2-inverted);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--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-3);--sbb-calendar-control-view-change-background: var(--sbb-background-color-1);--sbb-calendar-cell-year-month-width: 4.8125rem;--sbb-calendar-cell-year-month-height: 2.75rem}@media(min-width:37.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}:host(:is(:state(enhanced),[state--enhanced])){--sbb-calendar-cell-padding-block-end: var(--sbb-spacing-fixed-3x)}.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{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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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:var(--sbb-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-background: light-dark( var(--sbb-color-milk), var(--sbb-color-anthracite) );--sbb-calendar-control-view-change-color: var(--sbb-color-granite);--sbb-calendar-control-view-change-color: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );cursor:unset}.sbb-calendar__controls-change-date:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, 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-background-color-3)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-overflow-break{contain:layout}.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(:is(:state(wide),[state--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=horizontal][week-numbers]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc(8 * var(--sbb-calendar-cell-size))}:host([orientation=horizontal][week-numbers]:is(:state(wide),[state--wide])) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 8 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}:host([orientation=vertical]) .sbb-calendar__table-container{min-width:var(--sbb-calendar-min-width);--sbb-calendar-start-offset: 0}:host([orientation=vertical]:is(:state(wide),[state--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(:is(:state(wide),[state--wide]))) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header,.sbb-calendar__table-body{text-align:center}.sbb-calendar__table-header-cell,.sbb-calendar__table-header-cell-vertical{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);padding:0}:host(:not([multiple])) .sbb-calendar__table-header-cell,:host(:not([multiple])) .sbb-calendar__table-header-cell-vertical{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-header-cell-vertical{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__header-cell,.sbb-calendar__cell{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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:var(--sbb-cursor-pointer);position:relative;z-index:0}.sbb-calendar__header-cell:before,.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:var(--sbb-calendar-cell-border-radius);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__header-cell:not(:active,:disabled):hover,.sbb-calendar__cell:not(:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-background-color-hover);padding-block-end:var(--sbb-calendar-hover-shift)}}@media(any-hover:hover)and (forced-colors:active){.sbb-calendar__header-cell:not(:active,:disabled):hover:before,.sbb-calendar__cell:not(:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell:disabled,.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__header-cell:focus-visible:before,.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-calendar__header-cell:not(:disabled):active,.sbb-calendar__cell:not(:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-background-color-active)}@media(forced-colors:active){.sbb-calendar__header-cell:not(:disabled):active:before,.sbb-calendar__cell:not(:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color)}.sbb-calendar__cell{height:var(--sbb-calendar-cell-year-month-height);width:var(--sbb-calendar-cell-year-month-width)}.sbb-calendar__weekday{width:var(--sbb-calendar-cell-size)}.sbb-calendar__day-cell{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}.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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-calendar__selected:before{border:var(--sbb-calendar-cell-selected-border);border-radius:var(--sbb-calendar-cell-border-radius)}sbb-calendar-day{--sbb-calendar-day-flex-direction: row;--sbb-calendar-day-justify-content: center;--sbb-calendar-day-align-items: center;--sbb-calendar-day-extra-display: none;--sbb-calendar-day-crossed-out-top: 50%;--sbb-calendar-day-crossed-out-translate: translate(-50%, -50%) rotate(-45deg);--sbb-calendar-day-height: 2.75rem;--sbb-calendar-day-value-height: unset}@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))}}`;
+class wt extends Event {
+  get range() {
+    return this._range;
+  }
+  constructor(n) {
+    super("monthchange", { bubbles: !0, composed: !0 }), this._range = Object.freeze(n || []);
+  }
 }
-const vt = Le`: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-header-color: var(--sbb-color-granite);--sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-2);--sbb-calendar-cell-selected-color: var(--sbb-color-1-inverted);--sbb-calendar-cell-selected-background-color: var(--sbb-background-color-2-inverted);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--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-3);--sbb-calendar-control-view-change-background: var(--sbb-background-color-1)}@media(min-width:37.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{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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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:var(--sbb-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-background: light-dark( var(--sbb-color-milk), var(--sbb-color-anthracite) );--sbb-calendar-control-view-change-color: var(--sbb-color-granite);--sbb-calendar-control-view-change-color: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );cursor:unset}.sbb-calendar__controls-change-date:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, 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-background-color-3)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-overflow-break{contain:layout}.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(:is(:state(wide),[state--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=horizontal][week-numbers]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc(8 * var(--sbb-calendar-cell-size))}:host([orientation=horizontal][week-numbers]:is(:state(wide),[state--wide])) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 8 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}:host([orientation=vertical]) .sbb-calendar__table-container{min-width:var(--sbb-calendar-min-width);--sbb-calendar-start-offset: 0}:host([orientation=vertical]:is(:state(wide),[state--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(:is(:state(wide),[state--wide]))) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header,.sbb-calendar__table-body{text-align:center}.sbb-calendar__table-header-cell{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);padding:0}:host(:not([multiple])) .sbb-calendar__table-header-cell{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__header-cell,.sbb-calendar__cell{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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:var(--sbb-cursor-pointer);position:relative;z-index:0}.sbb-calendar__header-cell:before,.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__header-cell:not(.sbb-calendar__selected,:active,:disabled):hover,.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-background-color-3);padding-block-end:var(--sbb-calendar-hover-shift)}}@media(any-hover:hover)and (forced-colors:active){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:active,:disabled):hover:before,.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell:disabled,.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__header-cell:focus-visible:before,.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-calendar__header-cell:not(.sbb-calendar__selected,:disabled):active,.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-background-color-4)}@media(forced-colors:active){.sbb-calendar__header-cell:not(.sbb-calendar__selected,:disabled):active:before,.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar__header-cell{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color)}.sbb-calendar__weekday,.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__weekday:before,.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-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-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 St = (() => {
-  var N, C, I, S, R, T, E, P, L, B, H, K, g;
-  let o = [He("sbb-calendar")], n, d = [], b, p = rt(nt(Be)), w = [], $, O = [], k = [], M, W = [], ae = [], se, ie = [], re = [], ne, le = [], oe = [], de, ce = [], he = [], be, _e, ue = [], fe = [], ge, pe = [], me = [], ve, we = [], ye = [], De, ke = [], Ae = [], xe, $e = [], Ve = [], Me, Ye, ze = [], Fe = [], Oe, We = [], Ne = [];
-  return g = class extends p {
+let Tt = (() => {
+  var S, W, I, N, R, T, E, P, L, H, B, q, g;
+  let o = [Be("sbb-calendar")], n, d = [], h, m = it(nt(He)), v = [], V, O = [], D = [], M, C = [], ee = [], te, ae = [], se = [], re, ie = [], ne = [], le, oe = [], de = [], ce, he, be = [], _e = [], ue, fe = [], ge = [], me, pe = [], ve = [], we, ye = [], De = [], ke, Ae = [], xe = [], Ve, $e, Me = [], Ye = [], ze, Fe = [], Oe = [];
+  return g = class extends m {
     constructor() {
       super();
-      x(this, N);
-      x(this, C);
-      x(this, I);
       x(this, S);
+      x(this, W);
+      x(this, I);
+      x(this, N);
       x(this, R);
       x(this, T);
       x(this, E);
       x(this, P);
       x(this, L);
-      x(this, B);
       x(this, H);
-      x(this, K);
-      f(this, N, (u(this, w), u(this, O, !1))), f(this, C, (u(this, k), u(this, W, "day"))), f(this, I, (u(this, ae), u(this, ie, null))), f(this, S, (u(this, re), u(this, le, null))), f(this, R, (u(this, oe), u(this, ce, !1))), f(this, T, (u(this, he), u(this, ue, null))), f(this, E, (u(this, fe), u(this, pe, null))), f(this, P, (u(this, me), u(this, we, "horizontal"))), f(this, L, (u(this, ye), u(this, ke, !1))), this._dateAdapter = (u(this, Ae), Ue().datetime?.dateAdapter ?? Ge), f(this, B, u(this, $e, this._dateAdapter.today())), this._wideInternal = (u(this, Ve), !1), f(this, H, u(this, ze, "day")), this._nextCalendarView = (u(this, Fe), "day"), this._keyboardNavigationDayViewParameters = {
+      x(this, B);
+      x(this, q);
+      u(this, S, (_(this, v), _(this, O, !1))), u(this, W, (_(this, D), _(this, C, "day"))), u(this, I, (_(this, ee), _(this, ae, null))), u(this, N, (_(this, se), _(this, ie, null))), u(this, R, (_(this, ne), _(this, oe, !1))), u(this, T, (_(this, de), _(this, be, null))), u(this, E, (_(this, _e), _(this, fe, null))), u(this, P, (_(this, ge), _(this, pe, "horizontal"))), u(this, L, (_(this, ve), _(this, ye, !1))), this._dateAdapter = (_(this, De), Ke().datetime?.dateAdapter ?? je), u(this, H, _(this, Ae, this._dateAdapter.today())), this._wideInternal = (_(this, xe), !1), u(this, B, _(this, Me, "day")), this._nextCalendarView = (_(this, Ye), "day"), this._keyboardNavigationDayViewParameters = {
         firstDayInView: null,
         lastDayInView: null,
         firstMonthOffset: 0,
         firstMonthLength: 0,
         secondMonthOffset: 0
-      }, this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1, this._containingFocus = !1, f(this, K, u(this, We, !1)), this._language = (u(this, Ne), new qe(this).withHandler(() => {
+      }, this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._enhancedVariant = !1, this._resetFocus = !1, this._containingFocus = !1, u(this, q, _(this, Fe, !1)), this._language = (_(this, Oe), new Ue(this).withHandler(() => {
         this._monthNames = this._dateAdapter.getMonthNames("long"), this._createMonthRows();
-      })), this._mediaMatcher = new je(this, {
-        [Re]: () => this._init()
-      }), this._createMonthRows(), this._setWeekdays(), this.addEventListener("focusin", () => this._containingFocus = !0), this.addEventListener("focusout", () => this._containingFocus = !1);
+      })), this._mediaMatcher = new Qe(this, {
+        [Ie]: () => this._init()
+      }), this._onSlotChange = () => {
+        this._enhancedVariant = Array.from(this.children).some((e) => e.localName === "sbb-calendar-day"), this.toggleState("enhanced", this._enhancedVariant), this._setTabIndex();
+      }, this._createMonthRows(), this._setWeekdays(), this.addEventListener("focusin", () => this._containingFocus = !0), this.addEventListener("focusout", () => this._containingFocus = !1), this.addEventListener("click", (e) => {
+        const t = e.target.closest("sbb-calendar-day");
+        t && this._selectDate(t.value);
+      }), this.addEventListener("keydown", (e) => {
+        e.target.localName === "sbb-calendar-day" && this._handleKeyboardEvent(e, this._mapDateToDay(e.target.value));
+      });
     }
     /** If set to true, two months are displayed */
     get wide() {
-      return A(this, N);
+      return A(this, S);
     }
     set wide(e) {
-      f(this, N, e);
+      u(this, S, e);
     }
     /** The initial view of the calendar which should be displayed on opening. */
     get view() {
-      return A(this, C);
+      return A(this, W);
     }
     set view(e) {
-      f(this, C, e);
+      u(this, W, e);
     }
     /**
      * The minimum valid date. Accepts a date object or null.
@@ -142,24 +158,24 @@ let St = (() => {
       return A(this, I);
     }
     set min(e) {
-      f(this, I, e);
+      u(this, I, e);
     }
     /**
      * 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 A(this, S);
+      return A(this, N);
     }
     set max(e) {
-      f(this, S, e);
+      u(this, N, e);
     }
     /** Whether the calendar allows for multiple date selection. */
     get multiple() {
       return A(this, R);
     }
     set multiple(e) {
-      f(this, R, e);
+      u(this, R, e);
     }
     /**
      * The selected date: accepts a date object, or, if `multiple`, an array of dates.
@@ -179,35 +195,35 @@ let St = (() => {
       return A(this, T);
     }
     set _selected(e) {
-      f(this, T, e);
+      u(this, T, e);
     }
     /** A function used to filter out dates. */
     get dateFilter() {
       return A(this, E);
     }
     set dateFilter(e) {
-      f(this, E, e);
+      u(this, E, e);
     }
     /** The orientation of days in the calendar. */
     get orientation() {
       return A(this, P);
     }
     set orientation(e) {
-      f(this, P, e);
+      u(this, P, e);
     }
     /** Whether it has to display the week numbers in addition to week days. */
     get weekNumbers() {
       return A(this, L);
     }
     set weekNumbers(e) {
-      f(this, L, e);
+      u(this, L, e);
     }
     /** The currently active date. */
     get _activeDate() {
-      return A(this, B);
+      return A(this, H);
     }
     set _activeDate(e) {
-      f(this, B, e);
+      u(this, H, e);
     }
     /** The current wide property considering property value and breakpoints. From zero to small `wide` has always to be false. */
     set _wide(e) {
@@ -217,20 +233,23 @@ let St = (() => {
       return this._wideInternal;
     }
     get _calendarView() {
-      return A(this, H);
+      return A(this, B);
     }
     set _calendarView(e) {
-      f(this, H, e);
+      u(this, B, 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") ?? []);
+      return Array.from((this._calendarView === "day" ? this._getRootForQuerySelector()?.querySelectorAll("sbb-calendar-day") : this.shadowRoot?.querySelectorAll(".sbb-calendar__cell")) ?? []);
     }
     get _initialized() {
-      return A(this, K);
+      return A(this, q);
     }
     set _initialized(e) {
-      f(this, K, e);
+      u(this, q, e);
+    }
+    _getRootForQuerySelector() {
+      return this._enhancedVariant ? this : this.shadowRoot;
     }
     _dateFilter(e) {
       return this.dateFilter?.(e) ?? !0;
@@ -240,7 +259,10 @@ let St = (() => {
       this._resetCalendarView(), this._init();
     }
     connectedCallback() {
-      super.connectedCallback(), this.resetPosition();
+      super.connectedCallback(), this.resetPosition(), this.shadowRoot?.addEventListener("slotchange", this._onSlotChange, { capture: !0 });
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.shadowRoot?.removeEventListener("slotchange", this._onSlotChange, { capture: !0 });
     }
     /** @internal */
     focus() {
@@ -262,14 +284,14 @@ let St = (() => {
     }
     /** Initializes the component. */
     _init(e) {
-      if (!Se) {
+      if (!We) {
         if (this.hydrationRequired) {
           this.hydrationComplete.then(() => this._init());
           return;
         }
-        if (e && this._assignActiveDate(e), this._wide = (this._mediaMatcher.matches(Re) ?? !1) && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._weekNumbers = this._createWeekNumbers(this._activeDate), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
+        if (e && this._assignActiveDate(e), this._wide = (this._mediaMatcher.matches(Ie) ?? !1) && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._weekNumbers = this._createWeekNumbers(this._activeDate), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
           const t = this._dateAdapter.addCalendarMonths(this._activeDate, 1);
-          this._nextMonthWeeks = this._createWeekRows(t, !0), this._nextMonthYears = this._createYearRows(V), this._nextMonthWeekNumbers = this._createWeekNumbers(t);
+          this._nextMonthWeeks = this._createWeekRows(t, !0), this._nextMonthYears = this._createYearRows($), this._nextMonthWeekNumbers = this._createWeekNumbers(t);
         }
         this._initialized = !0;
       }
@@ -280,9 +302,9 @@ let St = (() => {
     }
     /** Creates the array of weekdays. */
     _setWeekdays() {
-      const e = this._dateAdapter.getDayOfWeekNames("narrow"), a = this._dateAdapter.getDayOfWeekNames("long").map((i, l) => ({
-        long: i,
-        narrow: e[l]
+      const e = this._dateAdapter.getDayOfWeekNames("narrow"), a = this._dateAdapter.getDayOfWeekNames("long").map((r, i) => ({
+        long: r,
+        narrow: e[i]
       })), s = this._dateAdapter.getFirstDayOfWeek();
       this._weekdays = a.slice(s).concat(a.slice(0, s));
     }
@@ -298,12 +320,12 @@ let St = (() => {
      * Then, this array is mapped via the `getWeek` function, which returns the ISO week number for that date.
      */
     _createWeekNumbers(e) {
-      return ft({ start: gt(e), end: _t(e) }, { weekStartsOn: 1 }).map((t) => ee(t, { weekStartsOn: 1, firstWeekContainsDate: 4 }));
+      return ft({ start: gt(e), end: _t(e) }, { weekStartsOn: 1 }).map((t) => Ee(t, { weekStartsOn: 1, firstWeekContainsDate: 4 }));
     }
     /** Creates the rows along the horizontal direction 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);
+      const a = this._dateAdapter.getNumDaysInMonth(e), s = this._dateAdapter.getFirstWeekOffset(e);
+      return t ? (this._keyboardNavigationDayViewParameters.secondMonthOffset = s, this._keyboardNavigationDayViewParameters.lastDayInView = this._dateAdapter.toIso8601(this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), a))) : (this._keyboardNavigationDayViewParameters.firstMonthLength = a, this._keyboardNavigationDayViewParameters.firstMonthOffset = s, 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), a))), this.orientation === "horizontal" ? this._createWeekRowsHorizontal(e, a, s) : this._createWeekRowsVertical(e, a, s);
     }
     /**
      * Creates the rows for each week in orientation='horizontal'.
@@ -313,22 +335,14 @@ let St = (() => {
      *
      * 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 l = 0, r = s; l < a; l++, r++) {
-        r === D && (i.push([]), r = 0);
-        const c = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), l + 1), _ = this._dateAdapter.toIso8601(c);
-        i[i.length - 1].push({
-          value: _,
-          dateValue: c,
-          dayValue: t[l],
-          monthValue: String(this._dateAdapter.getMonth(c)),
-          yearValue: String(this._dateAdapter.getYear(c)),
-          weekValue: ee(_, { weekStartsOn: 1, firstWeekContainsDate: 4 }),
-          weekDayValue: this._dateAdapter.getDayOfWeek(c)
-        });
+    _createWeekRowsHorizontal(e, t, a) {
+      const s = [[]];
+      for (let r = 0, i = a; r < t; r++, i++) {
+        i === y && (s.push([]), i = 0);
+        const l = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), r + 1);
+        s[s.length - 1].push(this._mapDateToDay(l));
       }
-      return i;
+      return s;
     }
     /**
      * Creates the rows for each week in orientation='vertical'.
@@ -344,40 +358,48 @@ let St = (() => {
      * - ...
      * - row 7: all the Sundays.
      */
-    _createWeekRowsVertical(e, t, a, s) {
-      const i = Array.from({ length: D }, () => []);
-      for (let l = 0, r = s; l < a; l++, r++) {
-        r === D && (r = 0);
-        const c = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), l + 1), _ = this._dateAdapter.toIso8601(c);
-        i[r].push({
-          value: _,
-          dateValue: c,
-          dayValue: t[l],
-          monthValue: String(this._dateAdapter.getMonth(c)),
-          yearValue: String(this._dateAdapter.getYear(c)),
-          weekValue: ee(_, { weekStartsOn: 1, firstWeekContainsDate: 4 }),
-          weekDayValue: this._dateAdapter.getDayOfWeek(c)
-        });
+    _createWeekRowsVertical(e, t, a) {
+      const s = Array.from({ length: y }, () => []);
+      for (let r = 0, i = a; r < t; r++, i++) {
+        i === y && (i = 0);
+        const l = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), r + 1);
+        s[i].push(this._mapDateToDay(l));
       }
-      return i;
+      return s;
+    }
+    _mapDateToDay(e) {
+      const t = this._dateAdapter.toIso8601(e);
+      return {
+        value: t,
+        dateValue: e,
+        dayValue: String(this._dateAdapter.getDate(e)),
+        monthValue: String(this._dateAdapter.getMonth(e)),
+        yearValue: String(this._dateAdapter.getYear(e)),
+        weekValue: Ee(t, { weekStartsOn: 1, firstWeekContainsDate: 4 }),
+        weekDayValue: this._dateAdapter.getDayOfWeek(e)
+      };
+    }
+    /** Force the conversion to ISO8601 formatted string. */
+    _mapValueToISODate(e) {
+      return typeof e == "string" ? e : this._dateAdapter.toIso8601(e);
     }
     /** Creates the rows for the month selection view. */
     _createMonthRows() {
-      const e = this._dateAdapter.getMonthNames("short"), t = new Array(12).fill(null).map((i, l) => ({
-        value: e[l],
-        longValue: this._monthNames[l],
-        monthValue: l + 1
-      })), a = 12 / J, s = [];
-      for (let i = 0; i < a; i++)
-        s.push(t.slice(J * i, J * (i + 1)));
+      const e = this._dateAdapter.getMonthNames("short"), t = new Array(12).fill(null).map((r, i) => ({
+        value: e[i],
+        longValue: this._monthNames[i],
+        monthValue: i + 1
+      })), a = 12 / j, s = [];
+      for (let r = 0; r < a; r++)
+        s.push(t.slice(j * r, j * (r + 1)));
       this._months = s;
     }
     /** Creates the rows for the year selection view. */
     _createYearRows(e = 0) {
-      const t = this._getStartValueYearView(), a = new Array(V).fill(0).map((l, r) => t + e + r), s = V / X, i = [];
-      for (let l = 0; l < s; l++)
-        i.push(a.slice(X * l, X * (l + 1)));
-      return i;
+      const t = this._getStartValueYearView(), a = new Array($).fill(0).map((i, l) => t + e + l), s = $ / G, r = [];
+      for (let i = 0; i < s; i++)
+        r.push(a.slice(G * i, G * (i + 1)));
+      return r;
     }
     /**
      * Calculates the first year that will be shown in the year selection panel.
@@ -391,16 +413,16 @@ let St = (() => {
      */
     _getStartValueYearView() {
       let e = 0;
-      this.max ? e = this._dateAdapter.getYear(this.max) - V + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
+      this.max ? e = this._dateAdapter.getYear(this.max) - $ + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
       const t = this._dateAdapter.getYear(this._activeDate);
-      return t - ((t - e) % V + V) % V;
+      return t - ((t - e) % $ + $) % $;
     }
     /** Checks if date is within the min-max range. */
     _isDayInRange(e) {
       if (!this.min && !this.max)
         return !0;
-      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);
+      const t = this._dateAdapter.deserialize(e);
+      return this._dateAdapter.sameDate(t, this._dateAdapter.clampDate(t, this.min, this.max));
     }
     /** Checks if date is within the min-max range in month view. */
     _isMonthInRange(e, t) {
@@ -456,8 +478,8 @@ let St = (() => {
      *     - if not, the selected dates are the new ones.
      */
     _selectMultipleDates(e) {
-      const t = this._cells.filter((r) => !r.disabled).map((r) => r.value), a = e.map((r) => r.value).filter((r) => t.includes(r)), s = new Set(a), i = new Set(this._selected.map((r) => this._dateAdapter.toIso8601(r))), l = this._updateSelectedWithMultipleDates(a, s, i);
-      this._selected = l.map((r) => this._dateAdapter.deserialize(r)), this._emitDateSelectedEvent(this._selected.map((r) => this._dateAdapter.deserialize(r)));
+      const t = this._cells.filter((l) => !l.disabled).map((l) => this._mapValueToISODate(l.value)), a = e.map((l) => l.value).filter((l) => t.includes(l)), s = new Set(a), r = new Set(this._selected.map((l) => this._dateAdapter.toIso8601(l))), i = this._updateSelectedWithMultipleDates(a, s, r);
+      this._selected = i.map((l) => this._dateAdapter.deserialize(l)), this._emitDateSelectedEvent(this._selected.map((l) => this._dateAdapter.deserialize(l)));
     }
     /**
      * Emits the dateselected event given the detail (as T or T[] based on the value of the multiple flag).
@@ -469,6 +491,10 @@ let St = (() => {
         bubbles: !0
       }));
     }
+    _emitMonthChange() {
+      const e = (this.wide ? [...this._weeks, ...this._nextMonthWeeks] : this._weeks).flat().sort((t, a) => t.value.localeCompare(a.value));
+      this.dispatchEvent(new wt(e));
+    }
     /**
      * In case of multiple selection, newly added days must be added to the existing ones, without duplication.
      * If the days to add are exactly the same as the selected ones, the set must be emptied.
@@ -496,7 +522,7 @@ let St = (() => {
     }
     /** Goes to the month identified by the shift. */
     _goToDifferentMonth(e) {
-      this._init(this._dateAdapter.addCalendarMonths(this._activeDate, e));
+      this._init(this._dateAdapter.addCalendarMonths(this._activeDate, e)), this._emitMonthChange();
     }
     _goToDifferentYear(e) {
       this._chosenYear += e, this._activeDate = this._dateAdapter.createDate(this._chosenYear, this._dateAdapter.getMonth(this._activeDate), this._dateAdapter.getDate(this._activeDate)), this._init();
@@ -541,17 +567,24 @@ let St = (() => {
       return this._nextDisabled(s);
     }
     _handleTableBlur(e) {
-      e?.localName !== "button" && this._setTabIndex();
+      e?.localName !== "sbb-calendar-day" && this._setTabIndex();
     }
     _setTabIndex() {
-      Array.from(this.shadowRoot.querySelectorAll('.sbb-calendar__cell[tabindex="0"]') ?? []).forEach((t) => t.tabIndex = -1);
-      const e = this._getFirstFocusable();
-      e && (e.tabIndex = 0);
+      const e = this._calendarView === "day" ? "sbb-calendar-day" : ".sbb-calendar__cell";
+      Array.from(this._getRootForQuerySelector().querySelectorAll(`${e}[tabindex="0"]`) ?? []).forEach((a) => a.tabIndex = -1);
+      const t = this._getFirstFocusable();
+      t && (t.tabIndex = 0);
     }
     /** Get the element in the calendar to assign focus. */
     _getFirstFocusable() {
-      const e = this.shadowRoot.querySelector(".sbb-calendar__selected") ?? this.shadowRoot.querySelector(".sbb-calendar__cell-current");
-      return e && !e.disabled ? e : this._calendarView === "day" ? this._getFirstFocusableDay() : this.shadowRoot.querySelector(".sbb-calendar__cell:not([disabled])");
+      const e = this._getRootForQuerySelector();
+      if (this._calendarView === "day") {
+        const t = e.querySelector(":is(:state(selected),[state--selected])") ?? e.querySelector(":is(:state(current),[state--current])");
+        return t && !t.disabled ? t : this._getFirstFocusableDay();
+      } else {
+        const t = this.shadowRoot?.querySelector(".sbb-calendar__cell-current");
+        return t && !t.disabled ? t : this.shadowRoot.querySelector(".sbb-calendar__cell:not([disabled])");
+      }
     }
     /**
      * In `day` view in `vertical` orientation,
@@ -561,54 +594,54 @@ let St = (() => {
      * 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])"));
+      const e = Array.from(this._getRootForQuerySelector().querySelectorAll("sbb-calendar-day: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}"]`);
+        const t = e.map((a) => this._dateAdapter.toIso8601(a.value)).sort()[0];
+        return this._getRootForQuerySelector().querySelector(`sbb-calendar-day[slot="${t}"]`);
       }
     }
     _handleKeyboardEvent(e, t) {
-      Ke(e) && e.preventDefault();
-      const a = this._cells, s = a.findIndex((r) => r === e.target);
-      let i;
-      t ? i = this._navigateByKeyboardDayView(e, s, a, t) : i = this._navigateByKeyboard(e, s, a);
-      const l = this.shadowRoot.activeElement;
-      i !== l && (i.tabIndex = 0, i?.focus(), l.tabIndex = -1);
+      qe(e) && e.preventDefault();
+      const a = this._cells, s = a.findIndex((l) => l === e.target);
+      let r;
+      t ? r = this._navigateByKeyboardDayView(e, s, a, t) : r = this._navigateByKeyboard(e, s, a);
+      const i = (this._enhancedVariant ? document : this.shadowRoot).activeElement;
+      r !== i && (r.tabIndex = 0, r?.focus(), i.tabIndex = -1);
     }
     _navigateByKeyboardDayView(e, t, a, s) {
-      const i = this.orientation === "horizontal" ? { leftRight: 1, upDown: D } : { leftRight: D, upDown: 1 }, l = t < this._keyboardNavigationDayViewParameters.firstMonthLength ? this._keyboardNavigationDayViewParameters.firstMonthOffset : this._keyboardNavigationDayViewParameters.secondMonthOffset;
+      const r = this.orientation === "horizontal" ? { leftRight: 1, upDown: y } : { leftRight: y, upDown: 1 }, i = t < this._keyboardNavigationDayViewParameters.firstMonthLength ? this._keyboardNavigationDayViewParameters.firstMonthOffset : this._keyboardNavigationDayViewParameters.secondMonthOffset;
       switch (e.key) {
         case "ArrowUp":
-          return this._findDayArrows(a, t, s.dateValue, -i.upDown);
+          return this._findDayArrows(a, t, s.dateValue, -r.upDown);
         case "ArrowDown":
-          return this._findDayArrows(a, t, s.dateValue, i.upDown);
+          return this._findDayArrows(a, t, s.dateValue, r.upDown);
         case "ArrowLeft":
-          return this._findDayArrows(a, t, s.dateValue, -i.leftRight);
+          return this._findDayArrows(a, t, s.dateValue, -r.leftRight);
         case "ArrowRight":
-          return this._findDayArrows(a, t, s.dateValue, i.leftRight);
+          return this._findDayArrows(a, t, s.dateValue, r.leftRight);
         case "PageUp":
           if (this.orientation === "horizontal") {
-            const c = (+s.dayValue % D || D) - +s.dayValue;
-            return this._findDayPageUpDown(a, t, s, c, i.upDown);
+            const b = (+s.dayValue % y || y) - +s.dayValue;
+            return this._findDayPageUpDown(a, t, s, b, r.upDown);
           } else {
-            const _ = (Math.ceil((+s.dayValue + l) / D) - 1) * D - l + 1 - +s.dayValue;
-            return this._findDayPageUpDown(a, t, s, _, i.upDown);
+            const f = (Math.ceil((+s.dayValue + i) / y) - 1) * y - i + 1 - +s.dayValue;
+            return this._findDayPageUpDown(a, t, s, f, r.upDown);
           }
         case "PageDown":
           if (this.orientation === "horizontal") {
-            const r = +s.monthValue + 1 > 12 ? 1 : +s.monthValue + 1, c = +s.monthValue + 1 > 12 ? +s.yearValue + 1 : +s.yearValue, _ = this._dateAdapter.createDate(c, r, 1), v = this._dateAdapter.getDate(this._dateAdapter.addCalendarDays(_, -1)), j = Math.trunc((v - +s.dayValue) / D) * D;
-            return this._findDayPageUpDown(a, t, s, j, -i.upDown);
+            const l = +s.monthValue + 1 > 12 ? 1 : +s.monthValue + 1, b = +s.monthValue + 1 > 12 ? +s.yearValue + 1 : +s.yearValue, f = this._dateAdapter.createDate(b, l, 1), k = this._dateAdapter.getDate(this._dateAdapter.addCalendarDays(f, -1)), Pe = Math.trunc((k - +s.dayValue) / y) * y;
+            return this._findDayPageUpDown(a, t, s, Pe, -r.upDown);
           } else {
-            const _ = Math.ceil((+s.dayValue + l) / D) * D - l - +s.dayValue;
-            return this._findDayPageUpDown(a, t, s, _, -i.upDown);
+            const f = Math.ceil((+s.dayValue + i) / y) * y - i - +s.dayValue;
+            return this._findDayPageUpDown(a, t, s, f, -r.upDown);
           }
         case "Home":
           return this._findDayFirst(a, t, s, 1);
         case "End": {
-          const r = +s.monthValue + 1 > 12 ? 1 : +s.monthValue + 1, c = +s.monthValue + 1 > 12 ? +s.yearValue + 1 : +s.yearValue, _ = this._dateAdapter.createDate(c, r, 1);
-          return this._findDayLast(a, t, _);
+          const l = +s.monthValue + 1 > 12 ? 1 : +s.monthValue + 1, b = +s.monthValue + 1 > 12 ? +s.yearValue + 1 : +s.yearValue, f = this._dateAdapter.createDate(b, l, 1);
+          return this._findDayLast(a, t, f);
         }
         default:
           return a[t];
@@ -618,32 +651,32 @@ let St = (() => {
       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))
+      const r = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a, s));
+      if (this._isDayOutOfView(r))
         return e[t];
-      const l = e.find((r) => r.value === i);
-      return !l || l.disabled ? this._findDayArrows(e, t, this._dateAdapter.deserialize(i), s) : l;
+      const i = e.find((l) => this._mapValueToISODate(l.value) === r);
+      return !i || i.disabled ? this._findDayArrows(e, t, this._dateAdapter.deserialize(r), s) : i;
     }
-    _findDayPageUpDown(e, t, a, s, i) {
-      const l = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a.dateValue, s));
-      if (this._isDayOutOfView(l))
+    _findDayPageUpDown(e, t, a, s, r) {
+      const i = this._dateAdapter.toIso8601(this._dateAdapter.addCalendarDays(a.dateValue, s));
+      if (this._isDayOutOfView(i))
         return e[t];
-      const r = e.find((c) => c.value === l);
-      return !r || r.disabled ? this._findDayPageUpDown(e, t, a, s + i, i) : r;
+      const l = e.find((b) => this._mapValueToISODate(b.value) === i);
+      return !l || l.disabled ? this._findDayPageUpDown(e, t, a, s + r, r) : l;
     }
     _findDayFirst(e, t, a, s) {
-      const i = this._dateAdapter.toIso8601(this._dateAdapter.createDate(+a.yearValue, +a.monthValue, s));
-      if (this._isDayOutOfView(i))
+      const r = this._dateAdapter.toIso8601(this._dateAdapter.createDate(+a.yearValue, +a.monthValue, s));
+      if (this._isDayOutOfView(r))
         return e[t];
-      const l = e.find((r) => r.value === i);
-      return !l || l.disabled ? this._findDayFirst(e, t, a, s + 1) : l;
+      const i = e.find((l) => this._mapValueToISODate(l.value) === r);
+      return !i || i.disabled ? this._findDayFirst(e, t, a, s + 1) : i;
     }
     _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((l) => l.value === s);
-      return !i || i.disabled ? this._findDayLast(e, t, this._dateAdapter.deserialize(s)) : i;
+      const r = e.find((i) => this._mapValueToISODate(i.value) === s);
+      return !r || r.disabled ? this._findDayLast(e, t, this._dateAdapter.deserialize(s)) : r;
     }
     /**
      * Gets the index of the element to move to, based on a list of elements (which can be potentially disabled),
@@ -652,24 +685,24 @@ let St = (() => {
      * while in month and year view it's not due to the fixed amount of rendered cells.
      */
     _navigateByKeyboard(e, t, a) {
-      const { elementIndexForWideMode: s, offsetForWideMode: i, lastElementIndexForWideMode: l, verticalOffset: r } = this._calculateParametersForKeyboardNavigation(t, this._calendarView === "year");
+      const { elementIndexForWideMode: s, offsetForWideMode: r, lastElementIndexForWideMode: i, verticalOffset: l } = this._calculateParametersForKeyboardNavigation(t, this._calendarView === "year");
       switch (e.key) {
         case "ArrowUp":
-          return this._findNext(a, t, -r);
+          return this._findNext(a, t, -l);
         case "ArrowDown":
-          return this._findNext(a, t, r);
+          return this._findNext(a, t, l);
         case "ArrowLeft":
           return this._findNext(a, t, -1);
         case "ArrowRight":
           return this._findNext(a, t, 1);
         case "Home":
-          return this._findFirst(a, i);
+          return this._findFirst(a, r);
         case "PageUp":
-          return this._findFirstOnColumn(a, s, i, r);
+          return this._findFirstOnColumn(a, s, r, l);
         case "PageDown":
-          return this._findLastOnColumn(a, t, l, r);
+          return this._findLastOnColumn(a, t, i, l);
         case "End":
-          return this._findLast(a, l - 1);
+          return this._findLast(a, i - 1);
         default:
           return a[t];
       }
@@ -680,11 +713,11 @@ let St = (() => {
      * @param isYearView Whether the displayed `view` is the year one.
      */
     _calculateParametersForKeyboardNavigation(e, t) {
-      const a = t ? V : Qe, s = Math.trunc(e / a) * a, i = s === 0 ? e : e - a;
+      const a = t ? $ : Ge, s = Math.trunc(e / a) * a, r = s === 0 ? e : e - a;
       return {
-        verticalOffset: t ? X : J,
-        elementIndexForWideMode: i,
-        offsetForWideMode: e - i,
+        verticalOffset: t ? G : j,
+        elementIndexForWideMode: r,
+        offsetForWideMode: e - r,
         lastElementIndexForWideMode: s === 0 ? a : a * 2
       };
     }
@@ -708,13 +741,16 @@ let St = (() => {
     }
     /** Find the first enabled element in the same column of the provided array. */
     _findFirstOnColumn(e, t, a, s) {
-      const i = t % s + a;
-      return e[i].disabled ? this._findNext(e, i, s) : e[i];
+      const r = t % s + a;
+      return e[r].disabled ? this._findNext(e, r, s) : e[r];
     }
     /** Find the last enabled element in the same column of the provided array. */
     _findLastOnColumn(e, t, a, s) {
-      const i = t + Math.trunc((a - t - 1) / s) * s;
-      return e[i].disabled ? this._findNext(e, i, -s) : e[i];
+      const r = t + Math.trunc((a - t - 1) / s) * s;
+      return e[r].disabled ? this._findNext(e, r, -s) : e[r];
+    }
+    _resetCalendarViewAndEmitMonthChange(e = !1) {
+      this._resetCalendarView(e), this._emitMonthChange();
     }
     _resetCalendarView(e = !1) {
       this._containingFocus && (this._resetFocus = !0), this._activeDate = (this.multiple ? this._selected.at(-1) : this._selected) ?? this._dateAdapter.today(), this._setChosenYear(), this._chosenMonth = void 0, this._init(), this._nextCalendarView = this._calendarView = this.view, e && this._startTableTransition();
@@ -722,12 +758,12 @@ let St = (() => {
     /** Render the view for the day selection. */
     _renderDayView() {
       const e = this._wide ? this._dateAdapter.addCalendarMonths(this._activeDate, 1) : void 0;
-      return h`
+      return c`
       <div class="sbb-calendar__controls">
         ${this._getArrow("left", () => this._goToDifferentMonth(-1), Xe[this._language.current], this._previousMonthDisabled())}
         <div class="sbb-calendar__controls-month">
           ${this._createLabelForDayView(this._activeDate)}
-          ${this._wide ? this._createLabelForDayView(e) : m}
+          ${this._wide ? this._createLabelForDayView(e) : p}
           <sbb-screen-reader-only role="status">
             ${this._createAriaLabelForDayView(this._activeDate, e)}
           </sbb-screen-reader-only>
@@ -736,12 +772,12 @@ let St = (() => {
       </div>
       <div class="sbb-calendar__table-overflow-break">
         <div class="sbb-calendar__table-container sbb-calendar__table-day-view">
-          ${this.orientation === "horizontal" ? h`
+          ${this.orientation === "horizontal" ? c`
                 ${this._createDayTable(this._weeks, this._weekNumbers)}
-                ${this._wide ? this._createDayTable(this._nextMonthWeeks, this._nextMonthWeekNumbers, !0) : m}
-              ` : h`
+                ${this._wide ? this._createDayTable(this._nextMonthWeeks, this._nextMonthWeekNumbers, !0) : p}
+              ` : c`
                 ${this._createDayTableVertical(this._weeks, this._weekNumbers)}
-                ${this._wide ? this._createDayTableVertical(this._nextMonthWeeks, this._nextMonthWeekNumbers, e) : m}
+                ${this._wide ? this._createDayTableVertical(this._nextMonthWeeks, this._nextMonthWeekNumbers, e) : p}
               `}
         </div>
       </div>
@@ -750,7 +786,7 @@ let St = (() => {
     /** 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 h`
+      return c`
       <button
         type="button"
         class="sbb-calendar__date-selection sbb-calendar__controls-change-date"
@@ -773,90 +809,90 @@ let St = (() => {
     }
     /** Creates the calendar table for the daily view. */
     _createDayTable(e, t, a = !1) {
-      const s = this._dateAdapter.toIso8601(this._dateAdapter.today()), i = (this._wide ? [...this._weeks, ...this._nextMonthWeeks] : a ? this._nextMonthWeeks : this._weeks).flat(), l = (a ? this._nextMonthWeeks : this._weeks).flat();
-      return h`
+      const s = (this._wide ? [...this._weeks, ...this._nextMonthWeeks] : a ? this._nextMonthWeeks : this._weeks).flat(), r = (a ? this._nextMonthWeeks : this._weeks).flat();
+      return c`
       <table
         class="sbb-calendar__table"
-        @focusout=${(r) => this._handleTableBlur(r.relatedTarget)}
-        @animationend=${(r) => this._tableAnimationEnd(r)}
+        @focusout=${(i) => this._handleTableBlur(i.relatedTarget)}
+        @animationend=${(i) => this._tableAnimationEnd(i)}
       >
         <thead class="sbb-calendar__table-header">
           <tr>
-            ${this.weekNumbers ? h`<th class="sbb-calendar__table-header-cell"></th>` : m}
-            ${this._weekdays.map((r, c) => h`
+            ${this.weekNumbers ? c`<th class="sbb-calendar__table-header-cell"></th>` : p}
+            ${this._weekdays.map((i, l) => c`
                 <th class="sbb-calendar__table-header-cell">
-                  ${this.multiple ? h`
+                  ${this.multiple ? c`
                         <button
                           class="sbb-calendar__header-cell sbb-calendar__weekday"
-                          aria-label=${r.long}
+                          aria-label=${i.long}
                           @click=${() => {
-        const _ = l.filter((v) => v.weekDayValue === (c + 1) % 7);
-        this._selectMultipleDates(_);
+        const b = r.filter((f) => f.weekDayValue === (l + 1) % 7);
+        this._selectMultipleDates(b);
       }}
                         >
-                          ${r.narrow}
+                          ${i.narrow}
                         </button>
-                      ` : h`
-                        <sbb-screen-reader-only>${r.long}</sbb-screen-reader-only>
-                        <span aria-hidden="true">${r.narrow}</span>
+                      ` : c`
+                        <sbb-screen-reader-only>${i.long}</sbb-screen-reader-only>
+                        <span aria-hidden="true">${i.narrow}</span>
                       `}
                 </th>
               `)}
           </tr>
         </thead>
         <tbody class="sbb-calendar__table-body">
-          ${e.map((r, c) => {
-        const _ = D - r.length;
-        return c === 0 && _ ? h`
+          ${e.map((i, l) => {
+        const b = y - i.length;
+        return l === 0 && b ? c`
                 <tr>
-                  ${this.weekNumbers ? h`
-                        <td class="sbb-calendar__table-header-cell">
-                          ${this.multiple ? h`
+                  ${this.weekNumbers ? c`
+                        <td class="sbb-calendar__table-header-cell-vertical">
+                          ${this.multiple ? c`
                                 <button
                                   class="sbb-calendar__header-cell sbb-calendar__weekday"
-                                  aria-label=${`${U[this._language.current]} ${t[0]}`}
+                                  aria-label=${`${K[this._language.current]} ${t[0]}`}
                                   @click=${() => {
-          const v = i.filter((j) => j.weekValue === t[0]);
-          this._selectMultipleDates(v);
+          const f = s.filter((k) => k.weekValue === t[0]);
+          this._selectMultipleDates(f);
         }}
                                 >
                                   ${t[0]}
                                 </button>
-                              ` : h`
+                              ` : c`
                                 <sbb-screen-reader-only
-                                  >${`${U[this._language.current]} ${t[0]}`}</sbb-screen-reader-only
+                                  >${`${K[this._language.current]} ${t[0]}`}</sbb-screen-reader-only
                                 >
                                 <span aria-hidden="true">${t[0]}</span>
                               `}
                         </td>
-                      ` : m}
-                  ${[...Array(_).keys()].map(() => h`<td class="sbb-calendar__table-data"></td>`)}
-                  ${this._createDayCells(r, s)}
+                      ` : p}
+                  ${[...Array(b).keys()].map(() => c`<td class="sbb-calendar__table-data"></td>`)}
+                  ${this._createDayCells(i)}
                 </tr>
-              ` : h`
+              ` : c`
               <tr>
-                ${this.weekNumbers ? h`
-                      <td class="sbb-calendar__table-header-cell">
-                        ${this.multiple ? h`
+                ${this.weekNumbers ? c`
+                      <td class="sbb-calendar__table-header-cell-vertical">
+                        ${this.multiple ? c`
                               <button
                                 class="sbb-calendar__header-cell sbb-calendar__weekday"
-                                aria-label=${`${U[this._language.current]} ${t[c]}`}
+                                aria-label=${`${K[this._language.current]} ${t[l]}`}
                                 @click=${() => {
-          const v = i.filter((j) => j.weekValue === t[c]);
-          this._selectMultipleDates(v);
+          const f = s.filter((k) => k.weekValue === t[l]);
+          this._selectMultipleDates(f);
         }}
                               >
-                                ${t[c]}
+                                ${t[l]}
                               </button>
-                            ` : h`
+                            ` : c`
                               <sbb-screen-reader-only
-                                >${`${U[this._language.current]} ${t[c]}`}</sbb-screen-reader-only
+                                >${`${K[this._language.current]} ${t[l]}`}</sbb-screen-reader-only
                               >
-                              <span aria-hidden="true">${t[c]}</span>
+                              <span aria-hidden="true">${t[l]}</span>
                             `}
                       </td>
-                    ` : m}
-                ${this._createDayCells(r, s)}
+                    ` : p}
+                ${this._createDayCells(i)}
               </tr>
             `;
       })}
@@ -866,64 +902,64 @@ let St = (() => {
     }
     /** Creates the table in orientation='vertical'. */
     _createDayTableVertical(e, t, a) {
-      const s = this._dateAdapter.toIso8601(this._dateAdapter.today()), i = this._dateAdapter.getFirstWeekOffset(a ?? this._activeDate), l = (this._wide ? [...this._weeks, ...this._nextMonthWeeks] : a ? this._nextMonthWeeks : this._weeks).flat();
-      return h`
+      const s = this._dateAdapter.getFirstWeekOffset(a ?? this._activeDate), r = (this._wide ? [...this._weeks, ...this._nextMonthWeeks] : a ? this._nextMonthWeeks : this._weeks).flat();
+      return c`
       <table
         class="sbb-calendar__table"
-        @focusout=${(r) => this._handleTableBlur(r.relatedTarget)}
-        @animationend=${(r) => this._tableAnimationEnd(r)}
+        @focusout=${(i) => this._handleTableBlur(i.relatedTarget)}
+        @animationend=${(i) => this._tableAnimationEnd(i)}
       >
-        ${this.weekNumbers ? h`
+        ${this.weekNumbers ? c`
               <thead class="sbb-calendar__table-header">
                 <tr>
-                  ${a ? m : h`<th class="sbb-calendar__table-data"></th>`}
-                  ${t.map((r) => h`
+                  ${a ? p : c`<th class="sbb-calendar__table-data"></th>`}
+                  ${t.map((i) => c`
                       <th class="sbb-calendar__table-header-cell">
-                        ${this.multiple ? h`
+                        ${this.multiple ? c`
                               <button
                                 class="sbb-calendar__header-cell sbb-calendar__weekday"
-                                aria-label=${`${U[this._language.current]} ${r}`}
+                                aria-label=${`${K[this._language.current]} ${i}`}
                                 @click=${() => {
-        const c = l.filter((_) => _.weekValue === r);
-        this._selectMultipleDates(c);
+        const l = r.filter((b) => b.weekValue === i);
+        this._selectMultipleDates(l);
       }}
                               >
-                                ${r}
+                                ${i}
                               </button>
-                            ` : h`
+                            ` : c`
                               <sbb-screen-reader-only
-                                >${`${U[this._language.current]} ${r}`}</sbb-screen-reader-only
+                                >${`${K[this._language.current]} ${i}`}</sbb-screen-reader-only
                               >
-                              <span aria-hidden="true">${r}</span>
+                              <span aria-hidden="true">${i}</span>
                             `}
                       </th>
                     `)}
                 </tr>
               </thead>
-            ` : m}
+            ` : p}
         <tbody class="sbb-calendar__table-body">
-          ${e.map((r, c) => {
-        const _ = this._weekdays[c], v = this._wide ? [...r, ...this._nextMonthWeeks[c]] : r;
-        return h`
+          ${e.map((i, l) => {
+        const b = this._weekdays[l], f = this._wide ? [...i, ...this._nextMonthWeeks[l]] : i;
+        return c`
               <tr>
-                ${a ? m : h`
-                      <td class="sbb-calendar__table-header-cell">
-                        ${this.multiple ? h`
+                ${a ? p : c`
+                      <td class="sbb-calendar__table-header-cell-vertical">
+                        ${this.multiple ? c`
                               <button
                                 class="sbb-calendar__header-cell sbb-calendar__weekday"
-                                aria-label=${_.long}
-                                @click=${() => this._selectMultipleDates(v)}
+                                aria-label=${b.long}
+                                @click=${() => this._selectMultipleDates(f)}
                               >
-                                ${_.narrow}
+                                ${b.narrow}
                               </button>
-                            ` : h`
-                              <sbb-screen-reader-only>${_.long}</sbb-screen-reader-only>
-                              <span aria-hidden="true">${_.narrow}</span>
+                            ` : c`
+                              <sbb-screen-reader-only>${b.long}</sbb-screen-reader-only>
+                              <span aria-hidden="true">${b.narrow}</span>
                             `}
                       </td>
                     `}
-                ${c < i ? h`<td class="sbb-calendar__table-data"></td>` : m}
-                ${this._createDayCells(r, s)}
+                ${l < s ? c`<td class="sbb-calendar__table-data"></td>` : p}
+                ${this._createDayCells(i)}
               </tr>
             `;
       })}
@@ -932,46 +968,22 @@ let St = (() => {
     `;
     }
     /** 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)), l = a.value === t;
-        let r;
-        return this.multiple ? r = this._selected.find((c) => this._dateAdapter.compareDate(a.dateValue, c) === 0) !== void 0 : r = !!this._selected && this._dateAdapter.compareDate(a.dateValue, this._selected) === 0, h`
-        <td
-          class=${Q({
-          "sbb-calendar__table-data": !0,
-          "sbb-calendar__table-data-selected": r
-        })}
-        >
-          <button
-            class=${Q({
-          "sbb-calendar__cell": !0,
-          "sbb-calendar__day": !0,
-          "sbb-calendar__cell-current": l,
-          "sbb-calendar__selected": r,
-          "sbb-calendar__crossed-out": !s && i
-        })}
-            @click=${() => this._selectDate(a.dateValue)}
-            ?disabled=${s || i}
-            value=${a.value}
-            type="button"
-            aria-label=${this._dateAdapter.getAccessibilityFormatDate(a.value)}
-            aria-pressed=${r}
-            aria-disabled=${s || i}
-            aria-current=${l ? "date" : m}
-            tabindex="-1"
-            @keydown=${(c) => this._handleKeyboardEvent(c, a)}
-            sbb-popover-close
-          >
-            ${a.dayValue}
-          </button>
+    _createDayCells(e) {
+      return e.map((t) => c`
+        <td class=" sbb-calendar__table-data sbb-calendar__day-cell">
+          <slot name=${t.value}>
+            <sbb-calendar-day
+              slot=${t.value}
+              @click=${() => this._selectDate(t.dateValue)}
+              @keydown=${(a) => this._handleKeyboardEvent(a, t)}
+            ></sbb-calendar-day>
+          </slot>
         </td>
-      `;
-      });
+      `);
     }
     /** Render the view for the month selection. */
     _renderMonthView() {
-      return h`
+      return c`
       <div class="sbb-calendar__controls">
         ${this._getArrow("left", () => this._goToDifferentYear(-1), tt[this._language.current], this._previousYearDisabled())}
         <div class="sbb-calendar__controls-month">${this._createLabelForMonthView()}</div>
@@ -980,71 +992,70 @@ let St = (() => {
       <div class="sbb-calendar__table-overflow-break">
         <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) : m}
+          ${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1) : p}
         </div>
       </div>
     `;
     }
     /** Creates the label with the year for the monthly view. */
     _createLabelForMonthView() {
-      return h` <button
+      return c` <button
         type="button"
         id="sbb-calendar__month-selection"
         class="sbb-calendar__controls-change-date"
-        aria-label=${`${Ee[this._language.current]} ${this._chosenYear}`}
-        @click=${() => this._resetCalendarView(!0)}
+        aria-label=${`${Re[this._language.current]} ${this._chosenYear}`}
+        @click=${() => this._resetCalendarViewAndEmitMonthChange(!0)}
       >
-        ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : m}
+        ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : p}
         <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 h`
+      return c`
       <table
         class="sbb-calendar__table"
         @animationend=${(a) => this._tableAnimationEnd(a)}
       >
-        ${this._wide ? h`<thead class="sbb-calendar__table-header" aria-hidden="true">
+        ${this._wide ? c`<thead class="sbb-calendar__table-header" aria-hidden="true">
               <tr>
-                <th class="sbb-calendar__table-header-cell" colspan=${J}>${t}</th>
+                <th class="sbb-calendar__table-header-cell" colspan=${j}>${t}</th>
               </tr>
-            </thead>` : m}
+            </thead>` : p}
         <tbody class="sbb-calendar__table-body">
-          ${e.map((a) => h`
+          ${e.map((a) => c`
               <tr>
                 ${a.map((s) => {
-        let i;
+        let r;
         if (this.multiple)
-          i = this._selected.find((_) => t === this._dateAdapter.getYear(_) && s.monthValue === this._dateAdapter.getMonth(_)) !== void 0;
+          r = this._selected.find((f) => t === this._dateAdapter.getYear(f) && s.monthValue === this._dateAdapter.getMonth(f)) !== void 0;
         else {
-          const _ = this._selected ? this._dateAdapter.getMonth(this._selected) : void 0, v = this._selected ? this._dateAdapter.getYear(this._selected) : void 0;
-          i = !!this._selected && t === v && s.monthValue === _;
+          const f = this._selected ? this._dateAdapter.getMonth(this._selected) : void 0, k = this._selected ? this._dateAdapter.getYear(this._selected) : void 0;
+          r = !!this._selected && t === k && s.monthValue === f;
         }
-        const l = !this._isMonthInRange(s.monthValue, t), r = !this._isMonthFilteredOut(s.monthValue, t), c = t === this._dateAdapter.getYear(this._dateAdapter.today()) && this._dateAdapter.getMonth(this._dateAdapter.today()) === s.monthValue;
-        return h` <td
-                    class=${Q({
+        const i = !this._isMonthInRange(s.monthValue, t), l = !this._isMonthFilteredOut(s.monthValue, t), b = t === this._dateAdapter.getYear(this._dateAdapter.today()) && this._dateAdapter.getMonth(this._dateAdapter.today()) === s.monthValue;
+        return c` <td
+                    class=${J({
           "sbb-calendar__table-data": !0,
           "sbb-calendar__table-month": !0
         })}
                   >
                     <button
-                      class=${Q({
+                      class=${J({
           "sbb-calendar__cell": !0,
-          "sbb-calendar__pill": !0,
-          "sbb-calendar__cell-current": c,
-          "sbb-calendar__crossed-out": !l && r,
-          "sbb-calendar__selected": i
+          "sbb-calendar__cell-current": b,
+          "sbb-calendar__crossed-out": !i && l,
+          "sbb-calendar__selected": r
         })}
                       @click=${() => this._onMonthSelection(s.monthValue, t)}
-                      ?disabled=${l || r}
+                      ?disabled=${i || l}
                       aria-label=${`${s.longValue} ${t}`}
-                      aria-pressed=${i}
-                      aria-disabled=${String(l || r)}
+                      aria-pressed=${r}
+                      aria-disabled=${String(i || l)}
                       tabindex="-1"
-                      data-month=${s.monthValue || m}
-                      @keydown=${(_) => this._handleKeyboardEvent(_)}
+                      data-month=${s.monthValue || p}
+                      @keydown=${(f) => this._handleKeyboardEvent(f)}
                     >
                       ${s.value}
                     </button>
@@ -1058,27 +1069,27 @@ let St = (() => {
     }
     /** Select the month and change the view to day selection. */
     _onMonthSelection(e, t) {
-      this._chosenMonth = e, this._nextCalendarView = "day", this._init(this._dateAdapter.createDate(t, this._chosenMonth, this._dateAdapter.getDate(this._activeDate))), this._startTableTransition();
+      this._chosenMonth = e, this._nextCalendarView = "day", this._init(this._dateAdapter.createDate(t, this._chosenMonth, this._dateAdapter.getDate(this._activeDate))), this._startTableTransition(), this._emitMonthChange();
     }
     /** Render the view for the year selection. */
     _renderYearView() {
-      return h`
+      return c`
       <div class="sbb-calendar__controls">
-        ${this._getArrow("left", () => this._goToDifferentYearRange(-V), st(V)[this._language.current], this._previousYearRangeDisabled())}
+        ${this._getArrow("left", () => this._goToDifferentYearRange(-$), st($)[this._language.current], this._previousYearRangeDisabled())}
         <div class="sbb-calendar__controls-month">${this._createLabelForYearView()}</div>
-        ${this._getArrow("right", () => this._goToDifferentYearRange(V), it(V)[this._language.current], this._nextYearRangeDisabled())}
+        ${this._getArrow("right", () => this._goToDifferentYearRange($), rt($)[this._language.current], this._nextYearRangeDisabled())}
       </div>
       <div class="sbb-calendar__table-overflow-break">
         <div class="sbb-calendar__table-container sbb-calendar__table-year-view">
           ${this._createYearTable(this._years)}
-          ${this._wide ? this._createYearTable(this._nextMonthYears, !0) : m}
+          ${this._wide ? this._createYearTable(this._nextMonthYears, !0) : p}
         </div>
       </div>
     `;
     }
     /** Creates the button arrow for all the views. */
     _getArrow(e, t, a, s) {
-      return h`<sbb-secondary-button
+      return c`<sbb-secondary-button
       size="m"
       icon-name="chevron-small-${e}-small"
       aria-label=${a}
@@ -1090,13 +1101,13 @@ let St = (() => {
     /** 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 h`
+      return c`
       <button
         type="button"
         id="sbb-calendar__year-selection"
         class="sbb-calendar__controls-change-date"
-        aria-label="${Ee[this._language.current]} ${s}"
-        @click=${() => this._resetCalendarView(!0)}
+        aria-label="${Re[this._language.current]} ${s}"
+        @click=${() => this._resetCalendarViewAndEmitMonthChange(!0)}
       >
         ${s}
         <sbb-icon name="chevron-small-up-small"></sbb-icon>
@@ -1107,40 +1118,39 @@ let St = (() => {
     /** Creates the table for the year selection view. */
     _createYearTable(e, t = !1) {
       const a = this._dateAdapter.today();
-      return h` <table
+      return c` <table
       class="sbb-calendar__table"
       @animationend=${(s) => this._tableAnimationEnd(s)}
     >
       <tbody class="sbb-calendar__table-body">
-        ${e.map((s) => h` <tr>
-              ${s.map((i) => {
-        let l;
+        ${e.map((s) => c` <tr>
+              ${s.map((r) => {
+        let i;
         if (this.multiple)
-          l = this._selected.find((v) => i === this._dateAdapter.getYear(v)) !== void 0;
+          i = this._selected.find((k) => r === this._dateAdapter.getYear(k)) !== void 0;
         else {
-          const v = this._selected ? this._dateAdapter.getYear(this._selected) : void 0;
-          l = !!this._selected && i === v;
+          const k = this._selected ? this._dateAdapter.getYear(this._selected) : void 0;
+          i = !!this._selected && r === k;
         }
-        const r = !this._isYearInRange(i), c = !this._isYearFilteredOut(i), _ = this._dateAdapter.getYear(a) === i;
-        return h` <td class="sbb-calendar__table-data sbb-calendar__table-year">
+        const l = !this._isYearInRange(r), b = !this._isYearFilteredOut(r), f = this._dateAdapter.getYear(a) === r;
+        return c` <td class="sbb-calendar__table-data sbb-calendar__table-year">
                   <button
-                    class=${Q({
+                    class=${J({
           "sbb-calendar__cell": !0,
-          "sbb-calendar__pill": !0,
-          "sbb-calendar__cell-current": _,
-          "sbb-calendar__crossed-out": !r && c,
-          "sbb-calendar__selected": l
+          "sbb-calendar__cell-current": f,
+          "sbb-calendar__crossed-out": !l && b,
+          "sbb-calendar__selected": i
         })}
-                    @click=${() => this._onYearSelection(i, t)}
-                    ?disabled=${r || c}
-                    aria-label=${i}
-                    aria-pressed=${l}
-                    aria-disabled=${String(r || c)}
+                    @click=${() => this._onYearSelection(r, t)}
+                    ?disabled=${l || b}
+                    aria-label=${r}
+                    aria-pressed=${i}
+                    aria-disabled=${String(l || b)}
                     tabindex="-1"
-                    data-year=${i || m}
-                    @keydown=${(v) => this._handleKeyboardEvent(v)}
+                    data-year=${r || p}
+                    @keydown=${(k) => this._handleKeyboardEvent(k)}
                   >
-                    ${i}
+                    ${r}
                   </button>
                 </td>`;
       })}
@@ -1153,8 +1163,8 @@ let St = (() => {
       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 (Se || this.hydrationRequired)
-        return h`${m}`;
+      if (We || this.hydrationRequired)
+        return c`${p}`;
       switch (this._calendarView) {
         case "year":
           return this._renderYearView();
@@ -1172,43 +1182,45 @@ let St = (() => {
       this.internals.states.add("transition"), this.shadowRoot?.querySelectorAll("table")?.forEach((e) => e.classList.toggle("sbb-calendar__table-hide"));
     }
     render() {
-      return h`<div class="sbb-calendar__wrapper">${this._getView()}</div>`;
+      return c`<div class="sbb-calendar__wrapper">${this._getView()}</div>`;
     }
-  }, N = new WeakMap(), C = new WeakMap(), I = new WeakMap(), S = new WeakMap(), R = new WeakMap(), T = new WeakMap(), E = new WeakMap(), P = new WeakMap(), L = new WeakMap(), B = new WeakMap(), H = new WeakMap(), K = new WeakMap(), b = g, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    $ = [Z(), Y({ type: Boolean })], M = [Y()], se = [Te(), Y()], ne = [Te(), Y()], de = [Z(), Je((t, a) => t._onMultipleChanged(a)), Y({ type: Boolean })], be = [Y()], _e = [G()], ge = [Y({ attribute: "date-filter" })], ve = [Y({ reflect: !0 })], De = [Z(), Y({ attribute: "week-numbers", type: Boolean })], xe = [G()], Me = [G()], Ye = [G()], Oe = [G()], y(g, null, $, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (t) => "wide" in t, get: (t) => t.wide, set: (t, a) => {
+  }, S = new WeakMap(), W = new WeakMap(), I = new WeakMap(), N = new WeakMap(), R = new WeakMap(), T = new WeakMap(), E = new WeakMap(), P = new WeakMap(), L = new WeakMap(), H = new WeakMap(), B = new WeakMap(), q = new WeakMap(), h = g, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    V = [X(), Y({ type: Boolean })], M = [Y()], te = [Ne(), Y()], re = [Ne(), Y()], le = [X(), Je((t, a) => t._onMultipleChanged(a)), Y({ type: Boolean })], ce = [Y()], he = [Q()], ue = [Y({ attribute: "date-filter" })], me = [Y({ reflect: !0 })], we = [X(), Y({ attribute: "week-numbers", type: Boolean })], ke = [Q()], Ve = [Q()], $e = [Q()], ze = [Q()], w(g, null, V, { 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 }, O, k), y(g, null, M, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (t) => "view" in t, get: (t) => t.view, set: (t, a) => {
+    } }, metadata: e }, O, D), w(g, null, M, { 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 }, W, ae), y(g, null, se, { kind: "accessor", name: "min", static: !1, private: !1, access: { has: (t) => "min" in t, get: (t) => t.min, set: (t, a) => {
+    } }, metadata: e }, C, ee), w(g, null, te, { kind: "accessor", name: "min", static: !1, private: !1, access: { has: (t) => "min" in t, get: (t) => t.min, set: (t, a) => {
       t.min = a;
-    } }, metadata: e }, ie, re), y(g, null, ne, { kind: "accessor", name: "max", static: !1, private: !1, access: { has: (t) => "max" in t, get: (t) => t.max, set: (t, a) => {
+    } }, metadata: e }, ae, se), w(g, null, re, { kind: "accessor", name: "max", static: !1, private: !1, access: { has: (t) => "max" in t, get: (t) => t.max, set: (t, a) => {
       t.max = a;
-    } }, metadata: e }, le, oe), y(g, null, de, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, a) => {
+    } }, metadata: e }, ie, ne), w(g, null, le, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, a) => {
       t.multiple = a;
-    } }, metadata: e }, ce, he), y(g, null, be, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, a) => {
+    } }, metadata: e }, oe, de), w(g, null, ce, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, a) => {
       t.selected = a;
-    } }, metadata: e }, null, w), y(g, null, _e, { kind: "accessor", name: "_selected", static: !1, private: !1, access: { has: (t) => "_selected" in t, get: (t) => t._selected, set: (t, a) => {
+    } }, metadata: e }, null, v), w(g, null, he, { 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 }, ue, fe), y(g, null, ge, { kind: "accessor", name: "dateFilter", static: !1, private: !1, access: { has: (t) => "dateFilter" in t, get: (t) => t.dateFilter, set: (t, a) => {
+    } }, metadata: e }, be, _e), w(g, null, ue, { 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 }, pe, me), y(g, null, ve, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, a) => {
+    } }, metadata: e }, fe, ge), w(g, null, me, { 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 }, we, ye), y(g, null, De, { kind: "accessor", name: "weekNumbers", static: !1, private: !1, access: { has: (t) => "weekNumbers" in t, get: (t) => t.weekNumbers, set: (t, a) => {
+    } }, metadata: e }, pe, ve), w(g, null, we, { kind: "accessor", name: "weekNumbers", static: !1, private: !1, access: { has: (t) => "weekNumbers" in t, get: (t) => t.weekNumbers, set: (t, a) => {
       t.weekNumbers = a;
-    } }, metadata: e }, ke, Ae), y(g, null, xe, { kind: "accessor", name: "_activeDate", static: !1, private: !1, access: { has: (t) => "_activeDate" in t, get: (t) => t._activeDate, set: (t, a) => {
+    } }, metadata: e }, ye, De), w(g, null, ke, { 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 }, $e, Ve), y(g, null, Me, { kind: "setter", name: "_wide", static: !1, private: !1, access: { has: (t) => "_wide" in t, set: (t, a) => {
+    } }, metadata: e }, Ae, xe), w(g, null, Ve, { kind: "setter", name: "_wide", static: !1, private: !1, access: { has: (t) => "_wide" in t, set: (t, a) => {
       t._wide = a;
-    } }, metadata: e }, null, w), y(g, null, Ye, { kind: "accessor", name: "_calendarView", static: !1, private: !1, access: { has: (t) => "_calendarView" in t, get: (t) => t._calendarView, set: (t, a) => {
+    } }, metadata: e }, null, v), w(g, null, $e, { 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 }, ze, Fe), y(g, 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 }, Me, Ye), w(g, null, ze, { 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 }, We, Ne), y(null, n = { value: b }, o, { kind: "class", name: b.name, metadata: e }, null, d), b = n.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, Fe, Oe), w(null, n = { value: h }, o, { kind: "class", name: h.name, metadata: e }, null, d), h = n.value, e && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), g.styles = [lt, vt], g.events = {
-    dateselected: "dateselected"
-  }, u(b, d), b;
+    dateselected: "dateselected",
+    monthchange: "monthchange"
+  }, _(h, d), h;
 })();
 export {
-  St as SbbCalendarElement
+  Tt as SbbCalendarElement,
+  wt as SbbMonthChangeEvent
 };