@sbb-esta/lyne-elements 1.6.0 → 1.8.0

package/calendar.js

@@ -1,30 +1,30 @@
-import { css as Y, LitElement as M, isServer as x, html as o, nothing as h } from "lit";
-import { property as u, state as f, customElement as V } from "lit/decorators.js";
+import { css as $, LitElement as M, isServer as x, html as o, nothing as h } from "lit";
+import { property as _, state as f, customElement as V } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { sbbInputModalityDetector as k, isArrowKeyOrPageKeysPressed as F } from "./core/a11y.js";
 import { readConfig as z } from "./core/config.js";
-import { SbbConnectedAbortController as R, SbbLanguageController as N } from "./core/controllers.js";
-import { defaultDateAdapter as T, YEARS_PER_PAGE as l, DAYS_PER_ROW as y, MONTHS_PER_ROW as g, YEARS_PER_ROW as v } from "./core/datetime.js";
+import { SbbConnectedAbortController as R, SbbLanguageController as C } from "./core/controllers.js";
+import { defaultDateAdapter as T, YEARS_PER_PAGE as d, DAYS_PER_ROW as y, MONTHS_PER_ROW as g, YEARS_PER_ROW as v } from "./core/datetime.js";
 import { isBreakpoint as A } from "./core/dom.js";
-import { EventEmitter as I } from "./core/eventing.js";
-import { i18nPreviousMonth as O, i18nNextMonth as S, i18nYearMonthSelection as C, i18nPreviousYear as W, i18nNextYear as E, i18nCalendarDateSelection as D, i18nPreviousYearRange as L, i18nNextYearRange as P } from "./core/i18n.js";
+import { EventEmitter as N } from "./core/eventing.js";
+import { i18nPreviousMonth as I, i18nNextMonth as O, i18nYearMonthSelection as S, i18nPreviousYear as W, i18nNextYear as E, i18nCalendarDateSelection as D, i18nPreviousYearRange as L, i18nNextYearRange as P } from "./core/i18n.js";
 import { SbbHydrationMixin as B } from "./core/mixins.js";
 import "./button/secondary-button.js";
 import "./icon.js";
 import "./screen-reader-only.js";
-const q = Y`*,:before,:after{box-sizing:border-box}:host{--sbb-calendar-cell-size: 2.5rem;--sbb-calendar-hover-shift: .0625rem;--sbb-calendar-wide-cell-size: 4.375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-header-color: var(--sbb-color-granite);--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-charcoal);--sbb-calendar-cell-selected-color: var(--sbb-color-white);--sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);--sbb-calendar-table-animation-shift: .00625rem;--sbb-calendar-table-animation-duration: .1ms;--sbb-calendar-table-column-spaces: 12;--sbb-calendar-control-view-change-height: 2.75rem;--sbb-calendar-control-view-change-color: var(--sbb-color-charcoal);--sbb-calendar-control-view-change-background: var(--sbb-color-white);display:block;width:max-content}@media (min-width: 22.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);text-transform:capitalize;cursor:pointer;padding-inline:var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__controls-change-date:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}@media (any-hover: hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-color-milk)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);--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);margin-inline:var(--sbb-calendar-margin)}:host([data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not([data-wide])) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color);width:var(--sbb-calendar-cell-size);padding:0;padding-block-end:var(--sbb-spacing-fixed-4x);text-align:center}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__cell{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:pointer;position:relative;z-index:0}.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:50%;z-index:-1;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}@media (any-hover: hover){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-color-milk);padding-block-end:var(--sbb-calendar-hover-shift)}}@media (any-hover: hover) and (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__day:before{border-radius:50%}.sbb-calendar__pill{width:var(--sbb-calendar-wide-cell-size);border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__pill:before{border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__crossed-out:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.sbb-calendar__cell-current{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-calendar__selected{--sbb-calendar-cell-color: var(--sbb-calendar-cell-selected-color);--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-selected-background-color)}@media (forced-colors: active){.sbb-calendar__selected{--sbb-calendar-cell-background-color: ButtonText !important}}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}`;
+const q = $`*,:before,:after{box-sizing:border-box}:host{display:block;width:max-content;--sbb-calendar-cell-size: 2.5rem;--sbb-calendar-hover-shift: .0625rem;--sbb-calendar-wide-cell-size: 4.375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-header-color: var(--sbb-color-granite);--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-charcoal);--sbb-calendar-cell-selected-color: var(--sbb-color-white);--sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);--sbb-calendar-table-animation-shift: .00625rem;--sbb-calendar-table-animation-duration: .1ms;--sbb-calendar-table-column-spaces: 12;--sbb-calendar-control-view-change-height: 2.75rem;--sbb-calendar-control-view-change-color: var(--sbb-color-charcoal);--sbb-calendar-control-view-change-background: var(--sbb-color-white)}@media (min-width: 22.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);text-transform:capitalize;cursor:pointer;padding-inline:var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__controls-change-date:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}@media (any-hover: hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-color-milk)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);margin-inline:var(--sbb-calendar-margin);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset)}:host([data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not([data-wide])) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color);width:var(--sbb-calendar-cell-size);padding:0;padding-block-end:var(--sbb-spacing-fixed-4x);text-align:center}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__cell{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:pointer;position:relative;z-index:0}.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:50%;z-index:-1;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}@media (any-hover: hover){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-color-milk);padding-block-end:var(--sbb-calendar-hover-shift)}}@media (any-hover: hover) and (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__day:before{border-radius:50%}.sbb-calendar__pill{width:var(--sbb-calendar-wide-cell-size);border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__pill:before{border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__crossed-out:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.sbb-calendar__cell-current{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-calendar__selected{--sbb-calendar-cell-color: var(--sbb-calendar-cell-selected-color);--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-selected-background-color)}@media (forced-colors: active){.sbb-calendar__selected{--sbb-calendar-cell-background-color: ButtonText !important}}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}`;
 var K = Object.defineProperty, H = Object.getOwnPropertyDescriptor, b = (e, t, a, r) => {
   for (var s = r > 1 ? void 0 : r ? H(t, a) : t, i = e.length - 1, n; i >= 0; i--)
     (n = e[i]) && (s = (r ? n(t, a, s) : n(s)) || s);
   return r && s && K(t, a, s), s;
 };
-let d = class extends B(M) {
+let l = class extends B(M) {
   constructor() {
     var e;
-    super(), this.wide = !1, this._now = null, this._dateAdapter = ((e = z().datetime) == null ? void 0 : e.dateAdapter) ?? T, this._dateSelected = new I(
+    super(), this.wide = !1, this.view = "day", this._now = null, this._dateAdapter = ((e = z().datetime) == null ? void 0 : e.dateAdapter) ?? T, this._dateSelected = new N(
       this,
-      d.events.dateSelected
-    ), this._activeDate = this.now, this._calendarView = "day", this._nextCalendarView = "day", this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1, this._initialized = !1, this._abort = new R(this), this._language = new N(this).withHandler(() => {
+      l.events.dateSelected
+    ), this._activeDate = this.now, this._calendarView = "day", this._nextCalendarView = "day", this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1, this._initialized = !1, this._abort = new R(this), this._language = new C(this).withHandler(() => {
       this._monthNames = this._dateAdapter.getMonthNames("long"), this._createMonthRows();
     }), this._createMonthRows(), this._setWeekdays();
   }
@@ -69,7 +69,7 @@ let d = class extends B(M) {
   }
   /** Resets the active month according to the new state of the calendar. */
   resetPosition() {
-    this._calendarView !== "day" && this._resetToDayView(), this._activeDate = this.selected ?? this.now, this._init();
+    this._resetCalendarView(), this._init();
   }
   connectedCallback() {
     var e;
@@ -81,7 +81,7 @@ let d = class extends B(M) {
     });
   }
   willUpdate(e) {
-    super.willUpdate(e), this._initialized && e.has("wide") && this.resetPosition();
+    super.willUpdate(e), this._initialized && (e.has("wide") && this.resetPosition(), e.has("view") && (this._setChosenYear(), this._chosenMonth = void 0, this._nextCalendarView = this._calendarView = this.view));
   }
   updated(e) {
     super.updated(e), this._setTabIndex(), k.mostRecentModality === "keyboard" && this._focusCell();
@@ -95,7 +95,7 @@ let d = class extends B(M) {
       }
       if (e && this._assignActiveDate(e), this._wide = A("medium") && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
         const t = this._dateAdapter.addCalendarMonths(this._activeDate, 1);
-        this._nextMonthWeeks = this._createWeekRows(t), this._nextMonthYears = this._createYearRows(l);
+        this._nextMonthWeeks = this._createWeekRows(t), this._nextMonthYears = this._createYearRows(d);
       }
       this._initialized = !0;
     }
@@ -147,7 +147,7 @@ let d = class extends B(M) {
   }
   /** Creates the rows for the year selection view. */
   _createYearRows(e = 0) {
-    const t = this._getStartValueYearView(), a = new Array(l).fill(0).map((i, n) => t + e + n), r = l / v, s = [];
+    const t = this._getStartValueYearView(), a = new Array(d).fill(0).map((i, n) => t + e + n), r = d / v, s = [];
     for (let i = 0; i < r; i++)
       s.push(a.slice(v * i, v * (i + 1)));
     return s;
@@ -164,9 +164,9 @@ let d = class extends B(M) {
    */
   _getStartValueYearView() {
     let e = 0;
-    this.max ? e = this._dateAdapter.getYear(this.max) - l + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
+    this.max ? e = this._dateAdapter.getYear(this.max) - d + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
     const t = this._dateAdapter.getYear(this._activeDate);
-    return t - ((t - e) % l + l) % l;
+    return t - ((t - e) % d + d) % d;
   }
   /** Checks if date is within the min-max range. */
   _isDayInRange(e) {
@@ -209,7 +209,12 @@ let d = class extends B(M) {
   }
   /** Emits the selected date and sets it internally. */
   _selectDate(e) {
-    this._chosenMonth = void 0, this._chosenYear = void 0, this._selected !== e && (this._selected = e, this._dateSelected.emit(this._dateAdapter.deserialize(e)));
+    this._chosenMonth = void 0, this._setChosenYear(), this._selected !== e && (this._selected = e, this._dateSelected.emit(this._dateAdapter.deserialize(e)));
+  }
+  _setChosenYear() {
+    this.view === "month" ? this._chosenYear = this._dateAdapter.getYear(
+      this._dateAdapter.deserialize(this._selected) ?? this.selected ?? this.now
+    ) : this._chosenYear = void 0;
   }
   _assignActiveDate(e) {
     if (this._min && this._dateAdapter.compareDate(this._min, e) > 0) {
@@ -382,12 +387,12 @@ let d = class extends B(M) {
           lastElementIndexForWideMode: 12
         };
       case "year": {
-        const r = Math.trunc(t / l) * l, s = r === 0 ? t : t - l;
+        const r = Math.trunc(t / d) * d, s = r === 0 ? t : t - d;
         return {
           verticalOffset: v,
           elementIndexForWideMode: s,
           offsetForWideMode: t - s,
-          lastElementIndexForWideMode: r === 0 ? l : l * 2
+          lastElementIndexForWideMode: r === 0 ? d : d * 2
         };
       }
     }
@@ -421,8 +426,8 @@ let d = class extends B(M) {
     const s = t + Math.trunc((a - t - 1) / r) * r;
     return e[s].disabled ? this._findNext(e, s, -r) : e[s];
   }
-  _resetToDayView() {
-    this._resetFocus = !0, this._activeDate = this.selected ?? this.now, this._chosenYear = void 0, this._chosenMonth = void 0, this._nextCalendarView = "day", this._removeTable();
+  _resetCalendarView(e = !1) {
+    this._resetFocus = !0, this._activeDate = this.selected ?? this.now, this._setChosenYear(), this._chosenMonth = void 0, this._nextCalendarView = this._calendarView = this.view, e && this._startTableTransition();
   }
   /** Render the view for the day selection. */
   _renderDayView() {
@@ -432,7 +437,7 @@ let d = class extends B(M) {
         ${this._getArrow(
       "left",
       () => this._goToDifferentMonth(-1),
-      O[this._language.current],
+      I[this._language.current],
       this._previousMonthDisabled()
     )}
         <div class="sbb-calendar__controls-month">
@@ -445,7 +450,7 @@ let d = class extends B(M) {
         ${this._getArrow(
       "right",
       () => this._goToDifferentMonth(1),
-      S[this._language.current],
+      O[this._language.current],
       this._nextMonthDisabled()
     )}
       </div>
@@ -463,9 +468,9 @@ let d = class extends B(M) {
         type="button"
         id="sbb-calendar__date-selection"
         class="sbb-calendar__controls-change-date"
-        aria-label="${C[this._language.current]} ${t}"
+        aria-label="${S[this._language.current]} ${t}"
         @click=${() => {
-      this._resetFocus = !0, this._nextCalendarView = "year", this._removeTable();
+      this._resetFocus = !0, this._nextCalendarView = "year", this._startTableTransition();
     }}
       >
         ${t}
@@ -557,7 +562,7 @@ let d = class extends B(M) {
             aria-current=${c ? "date" : h}
             data-day=${n || h}
             tabindex="-1"
-            @keydown=${(_) => this._handleKeyboardEvent(_, a)}
+            @keydown=${(u) => this._handleKeyboardEvent(u, a)}
             sbb-popover-close
           >
             ${a.dayValue}
@@ -597,7 +602,7 @@ let d = class extends B(M) {
         id="sbb-calendar__month-selection"
         class="sbb-calendar__controls-change-date"
         aria-label=${`${D[this._language.current]} ${this._chosenYear}`}
-        @click=${() => this._resetToDayView()}
+        @click=${() => this._resetCalendarView(!0)}
       >
         ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : h}
         <sbb-icon name="chevron-small-up-small"></sbb-icon>
@@ -621,7 +626,7 @@ let d = class extends B(M) {
       (r) => o`
               <tr>
                 ${r.map((s) => {
-        const i = !this._isMonthInRange(s.monthValue), n = !this._isMonthFilteredOut(s.monthValue), c = this._selected ? this._dateAdapter.getMonth(this._dateAdapter.deserialize(this._selected)) : void 0, _ = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, m = !!this._selected && t === _ && s.monthValue === c, w = t === this._dateAdapter.getYear(this.now) && this._dateAdapter.getMonth(this.now) === s.monthValue;
+        const i = !this._isMonthInRange(s.monthValue), n = !this._isMonthFilteredOut(s.monthValue), c = this._selected ? this._dateAdapter.getMonth(this._dateAdapter.deserialize(this._selected)) : void 0, u = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, m = !!this._selected && t === u && s.monthValue === c, w = t === this._dateAdapter.getYear(this.now) && this._dateAdapter.getMonth(this.now) === s.monthValue;
         return o` <td
                     class=${p({
           "sbb-calendar__table-data": !0,
@@ -643,7 +648,7 @@ let d = class extends B(M) {
                       aria-disabled=${String(i || n)}
                       tabindex="-1"
                       data-month=${s.monthValue || h}
-                      @keydown=${($) => this._handleKeyboardEvent($)}
+                      @keydown=${(Y) => this._handleKeyboardEvent(Y)}
                     >
                       ${s.value}
                     </button>
@@ -664,7 +669,7 @@ let d = class extends B(M) {
         this._chosenMonth,
         this._dateAdapter.getDate(this._activeDate)
       )
-    ), this._removeTable();
+    ), this._startTableTransition();
   }
   /** Render the view for the year selection. */
   _renderYearView() {
@@ -672,15 +677,15 @@ let d = class extends B(M) {
       <div class="sbb-calendar__controls">
         ${this._getArrow(
       "left",
-      () => this._goToDifferentYearRange(-l),
-      L(l)[this._language.current],
+      () => this._goToDifferentYearRange(-d),
+      L(d)[this._language.current],
       this._previousYearRangeDisabled()
     )}
         <div class="sbb-calendar__controls-month">${this._createLabelForYearView()}</div>
         ${this._getArrow(
       "right",
-      () => this._goToDifferentYearRange(l),
-      P(l)[this._language.current],
+      () => this._goToDifferentYearRange(d),
+      P(d)[this._language.current],
       this._nextYearRangeDisabled()
     )}
       </div>
@@ -710,7 +715,7 @@ let d = class extends B(M) {
         id="sbb-calendar__year-selection"
         class="sbb-calendar__controls-change-date"
         aria-label="${D[this._language.current]} ${r}"
-        @click=${() => this._resetToDayView()}
+        @click=${() => this._resetCalendarView(!0)}
       >
         ${r}
         <sbb-icon name="chevron-small-up-small"></sbb-icon>
@@ -729,7 +734,7 @@ let d = class extends B(M) {
         ${e.map(
       (r) => o` <tr>
               ${r.map((s) => {
-        const i = !this._isYearInRange(s), n = !this._isYearFilteredOut(s), c = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, _ = !!this._selected && s === c, m = this._dateAdapter.getYear(a) === s;
+        const i = !this._isYearInRange(s), n = !this._isYearFilteredOut(s), c = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, u = !!this._selected && s === c, m = this._dateAdapter.getYear(a) === s;
         return o` <td class="sbb-calendar__table-data sbb-calendar__table-year">
                   <button
                     class=${p({
@@ -737,12 +742,12 @@ let d = class extends B(M) {
           "sbb-calendar__pill": !0,
           "sbb-calendar__cell-current": m,
           "sbb-calendar__crossed-out": !i && n,
-          "sbb-calendar__selected": _
+          "sbb-calendar__selected": u
         })}
                     @click=${() => this._onYearSelection(s, t)}
                     ?disabled=${i || n}
                     aria-label=${s}
-                    aria-pressed=${_}
+                    aria-pressed=${u}
                     aria-disabled=${String(i || n)}
                     tabindex="-1"
                     data-year=${s || h}
@@ -765,7 +770,7 @@ let d = class extends B(M) {
         this._dateAdapter.getMonth(this._activeDate),
         this._dateAdapter.getDate(this._activeDate)
       )
-    ), this._removeTable();
+    ), this._startTableTransition();
   }
   get _getView() {
     if (x || this.hydrationRequired)
@@ -784,55 +789,57 @@ let d = class extends B(M) {
     const t = e.target;
     e.animationName === "hide" ? (t.classList.remove("sbb-calendar__table-hide"), this._resetFocus = !0, this._calendarView = this._nextCalendarView) : e.animationName === "show" && this.removeAttribute("data-transition");
   }
-  _removeTable() {
-    this.toggleAttribute("data-transition", !0), this.shadowRoot.querySelectorAll("table").forEach(
-      (e) => e.classList.toggle("sbb-calendar__table-hide")
-    );
+  _startTableTransition() {
+    var e, t;
+    this.toggleAttribute("data-transition", !0), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("table")) == null || t.forEach((a) => a.classList.toggle("sbb-calendar__table-hide"));
   }
   render() {
     return o`<div class="sbb-calendar__wrapper">${this._getView}</div>`;
   }
 };
-d.styles = q;
-d.events = {
+l.styles = q;
+l.events = {
   dateSelected: "dateSelected"
 };
 b([
-  u({ type: Boolean })
-], d.prototype, "wide", 2);
+  _({ type: Boolean })
+], l.prototype, "wide", 2);
+b([
+  _()
+], l.prototype, "view", 2);
 b([
-  u()
-], d.prototype, "min", 1);
+  _()
+], l.prototype, "min", 1);
 b([
-  u()
-], d.prototype, "max", 1);
+  _()
+], l.prototype, "max", 1);
 b([
-  u()
-], d.prototype, "now", 1);
+  _()
+], l.prototype, "now", 1);
 b([
-  u()
-], d.prototype, "selected", 1);
+  _()
+], l.prototype, "selected", 1);
 b([
-  u({ attribute: "date-filter" })
-], d.prototype, "dateFilter", 2);
+  _({ attribute: "date-filter" })
+], l.prototype, "dateFilter", 2);
 b([
   f()
-], d.prototype, "_activeDate", 2);
+], l.prototype, "_activeDate", 2);
 b([
   f()
-], d.prototype, "_selected", 2);
+], l.prototype, "_selected", 2);
 b([
   f()
-], d.prototype, "_wide", 1);
+], l.prototype, "_wide", 1);
 b([
   f()
-], d.prototype, "_calendarView", 2);
+], l.prototype, "_calendarView", 2);
 b([
   f()
-], d.prototype, "_initialized", 2);
-d = b([
+], l.prototype, "_initialized", 2);
+l = b([
   V("sbb-calendar")
-], d);
+], l);
 export {
-  d as SbbCalendarElement
+  l as SbbCalendarElement
 };

package/card/card/card.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-
 /**
  * It displays content related to a single subject.
  *

package/card/card-badge/card-badge.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-
 /**
  * It displays content within a badge.
  *

package/card/card-button/card-button.d.ts

@@ -1,5 +1,4 @@
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-
 declare const SbbCardButtonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbCardActionCommonElementMixinType> & typeof SbbButtonBaseElement;
 /**
  * It turns the `sbb-card` into a button element.

package/card/card-link/card-link.d.ts

@@ -1,5 +1,4 @@
 import { SbbLinkBaseElement } from '../../core/base-elements.js';
-
 declare const SbbCardLinkElement_base: import('../../core/mixins.js').AbstractConstructor<import('../common.js').SbbCardActionCommonElementMixinType> & typeof SbbLinkBaseElement;
 /**
  * It turns the `sbb-card` into a link element.

package/card/card.js

@@ -1,6 +1,6 @@
 import { css as l, LitElement as v, html as c, nothing as p } from "lit";
 import { property as n, customElement as h } from "lit/decorators.js";
-const g = l`*,:before,:after{box-sizing:border-box}:host{--sbb-card-background-color: var(--sbb-color-white);--sbb-card-border-radius: var(--sbb-border-radius-4x);--sbb-card-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x) );--sbb-card-animation-easing: var(--sbb-animation-easing);--sbb-card-border-color: transparent;--sbb-card-border-style: solid;--sbb-card-hover-shift: 0;--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}@media (forced-colors: active){:host{--sbb-card-border-color: CanvasText;--sbb-card-border-width: var(--sbb-border-width-2x)}}:host([color=milk]){--sbb-card-background-color: var(--sbb-color-milk);--sbb-card-border-color: transparent}:host([color=transparent-bordered]){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cloud);--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-focus-outline-color: inherit}:host([color=transparent-bordered-dashed]){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cement);--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-card-border-style: dashed;--sbb-focus-outline-color: inherit}:host([data-has-active-action]){--sbb-card-border-color: var(--sbb-color-charcoal);--sbb-card-border-width: var(--sbb-border-width-2x);--sbb-card-border-style: solid}@media (forced-colors: active){:host([data-has-active-action]){--sbb-card-border-color: Highlight}}:host([size=xs]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-start: var(--sbb-spacing-fixed-3x);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=s]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=m]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-s);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=m][data-has-card-badge]){--sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);--sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-start: var(--sbb-spacing-fixed-4x);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=l][data-has-card-badge]){--sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);--sbb-card-padding-block-end: var(--sbb-spacing-fixed-4x)}:host([size=xl]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=xl][data-has-card-badge]){--sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);--sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxs)}:host([size=xxl]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-s);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-s);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=xxxl]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-l);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}@media (forced-colors: active){:host([data-has-action]){--sbb-title-text-color-normal-override: var(--sbb-card-color)}}@media (any-hover: hover){:host([data-has-action]:not([data-has-active-action]):hover){--sbb-card-hover-shift: -.125rem}:host([data-has-action]:not([data-has-active-action]):hover) .sbb-card{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}@media (any-hover: hover) and (forced-colors: active){:host([data-has-action]:not([data-has-active-action]):hover){--sbb-card-border-color: Highlight}}@media (forced-colors: active){:host([data-has-action][data-action-role=button]){--sbb-card-color: ButtonText}}@media (forced-colors: active){:host([data-has-action][data-action-role=link]){--sbb-card-color: LinkText}}.sbb-card{display:block;position:relative;padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block-start) var(--sbb-card-padding-block-end);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color);width:100%;height:100%}.sbb-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none}.sbb-card__wrapper{display:block;height:100%}:host([data-has-action]) .sbb-card__wrapper{pointer-events:none;transform:translateY(var(--sbb-card-hover-shift));transition:transform var(--sbb-card-animation-duration) var(--sbb-card-animation-easing)}.sbb-card__badge-wrapper{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;inset-block-end:unset;border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius)}:host([data-has-action]) .sbb-card__badge-wrapper{pointer-events:none}:host(:not([data-has-card-badge])) .sbb-card__badge-wrapper{display:none}::slotted(sbb-title){margin-block-start:0}`;
+const g = l`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-card-background-color: var(--sbb-color-white);--sbb-card-border-radius: var(--sbb-border-radius-4x);--sbb-card-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-1x) );--sbb-card-animation-easing: var(--sbb-animation-easing);--sbb-card-border-color: transparent;--sbb-card-border-style: solid;--sbb-card-hover-shift: 0;--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (forced-colors: active){:host{--sbb-card-border-color: CanvasText;--sbb-card-border-width: var(--sbb-border-width-2x)}}:host([color=milk]){--sbb-card-background-color: var(--sbb-color-milk);--sbb-card-border-color: transparent}:host([color=transparent-bordered]){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cloud);--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-focus-outline-color: inherit}:host([color=transparent-bordered-dashed]){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cement);--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-card-border-style: dashed;--sbb-focus-outline-color: inherit}:host([data-has-active-action]){--sbb-card-border-color: var(--sbb-color-charcoal);--sbb-card-border-width: var(--sbb-border-width-2x);--sbb-card-border-style: solid}@media (forced-colors: active){:host([data-has-active-action]){--sbb-card-border-color: Highlight}}:host([size=xs]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-start: var(--sbb-spacing-fixed-3x);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=s]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=m]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-s);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=m][data-has-card-badge]){--sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);--sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-start: var(--sbb-spacing-fixed-4x);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=l][data-has-card-badge]){--sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);--sbb-card-padding-block-end: var(--sbb-spacing-fixed-4x)}:host([size=xl]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-xxs);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=xl][data-has-card-badge]){--sbb-card-padding-block-start: var(--sbb-spacing-fixed-6x);--sbb-card-padding-block-end: var(--sbb-spacing-responsive-xxs)}:host([size=xxl]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-s);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-s);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}:host([size=xxxl]){--sbb-card-padding-inline: var(--sbb-spacing-responsive-l);--sbb-card-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-card-padding-block-end: var(--sbb-card-padding-block-start)}@media (forced-colors: active){:host([data-has-action]){--sbb-title-text-color-normal-override: var(--sbb-card-color)}}@media (any-hover: hover){:host([data-has-action]:not([data-has-active-action]):hover){--sbb-card-hover-shift: -.125rem}:host([data-has-action]:not([data-has-active-action]):hover) .sbb-card{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-hard-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-hard-1-color)}}@media (any-hover: hover) and (forced-colors: active){:host([data-has-action]:not([data-has-active-action]):hover){--sbb-card-border-color: Highlight}}@media (forced-colors: active){:host([data-has-action][data-action-role=button]){--sbb-card-color: ButtonText}}@media (forced-colors: active){:host([data-has-action][data-action-role=link]){--sbb-card-color: LinkText}}.sbb-card{width:100%;height:100%;display:block;position:relative;padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block-start) var(--sbb-card-padding-block-end);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color)}.sbb-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none}.sbb-card__wrapper{display:block;height:100%}:host([data-has-action]) .sbb-card__wrapper{pointer-events:none;transform:translateY(var(--sbb-card-hover-shift));transition:transform var(--sbb-card-animation-duration) var(--sbb-card-animation-easing)}.sbb-card__badge-wrapper{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;inset-block-end:unset;border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius)}:host([data-has-action]) .sbb-card__badge-wrapper{pointer-events:none}:host(:not([data-has-card-badge])) .sbb-card__badge-wrapper{display:none}::slotted(sbb-title){margin-block-start:0}`;
 var x = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (i, s, o, b) => {
   for (var a = b > 1 ? void 0 : b ? u(s, o) : s, d = i.length - 1, e; d >= 0; d--)
     (e = i[d]) && (a = (b ? e(s, o, a) : e(a)) || a);

package/card/common/card-action-common.d.ts

@@ -1,6 +1,5 @@
 import { SbbActionBaseElement } from '../../core/base-elements.js';
 import { AbstractConstructor } from '../../core/mixins.js';
-
 export declare class SbbCardActionCommonElementMixinType {
     active: boolean;
     protected actionRole: 'link' | 'button';

package/checkbox/checkbox/checkbox.d.ts

@@ -1,7 +1,6 @@
 import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
 import { SbbIconPlacement } from '../../core/interfaces.js';
 import { SbbCheckboxSize } from '../common.js';
-
 declare const SbbCheckboxElement_base: import('../../core/mixins.js').Constructor<import('../common.js').SbbCheckboxCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
 /**
  * It displays a checkbox enhanced with the SBB Design.

package/checkbox/checkbox-group/checkbox-group.d.ts

@@ -3,7 +3,6 @@ import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
 import { SbbCheckboxPanelElement } from '../checkbox-panel.js';
 import { SbbCheckboxElement } from '../checkbox.js';
 import { SbbCheckboxSize } from '../common.js';
-
 declare const SbbCheckboxGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-checkbox`.

package/checkbox/checkbox-panel/checkbox-panel.d.ts

@@ -2,7 +2,6 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { EventEmitter } from '../../core/eventing.js';
 import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '../../core/interfaces/types.js';
 import { SbbPanelSize } from '../../core/mixins.js';
-
 export type SbbCheckboxPanelStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
 declare const SbbCheckboxPanelElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbPanelMixinType> & import('../../core/mixins.js').Constructor<import('../common.js').SbbCheckboxCommonElementMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
 /**

package/checkbox/common/checkbox-common.d.ts

@@ -1,7 +1,6 @@
 import { LitElement } from 'lit';
 import { Constructor, SbbDisabledMixinType, SbbFormAssociatedCheckboxMixinType, SbbRequiredMixinType } from '../../core/mixins.js';
 import { SbbCheckboxGroupElement } from '../checkbox-group.js';
-
 export type SbbCheckboxSize = 'xs' | 's' | 'm';
 export declare class SbbCheckboxCommonElementMixinType extends SbbFormAssociatedCheckboxMixinType implements Partial<SbbDisabledMixinType>, Partial<SbbRequiredMixinType> {
     indeterminate: boolean;

package/chip/chip.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-
 /**
  * It displays brief and compact information.
  *

package/chip.js

@@ -1,6 +1,6 @@
 import { css as n, LitElement as p, html as h } from "lit";
 import { property as l, customElement as d } from "lit/decorators.js";
-const x = n`*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([color=milk]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-milk)}:host([color=charcoal]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-charcoal)}:host([color=white]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-white)}:host([color=granite]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-granite)}:host([size=xxs]){--sbb-chip-padding-block: 0em;--sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-font-size-text-xxs)}:host([size=xs]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-font-size-text-xs)}:host([size=s]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-font-size-text-s)}.sbb-chip{font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-padding-block) * 2);background-color:var(--sbb-chip-background-color);padding-inline:var(--sbb-chip-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-color);overflow:hidden;display:flex}@media (forced-colors: active){.sbb-chip{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
+const x = n`*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([color=milk]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-milk)}:host([color=charcoal]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-charcoal)}:host([color=white]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-white)}:host([color=granite]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-granite)}:host([size=xxs]){--sbb-chip-padding-block: 0em;--sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-font-size-text-xxs)}:host([size=xs]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-font-size-text-xs)}:host([size=s]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-font-size-text-s)}.sbb-chip{font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-padding-block) * 2);background-color:var(--sbb-chip-background-color);padding-inline:var(--sbb-chip-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-color);overflow:hidden}@media (forced-colors: active){.sbb-chip{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
 var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (a, b, i, e) => {
   for (var o = e > 1 ? void 0 : e ? v(b, i) : b, r = a.length - 1, t; r >= 0; r--)
     (t = a[r]) && (o = (e ? t(b, i, o) : t(o)) || o);

package/clock/clock.d.ts

@@ -1,6 +1,5 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
 import { SbbTime } from '../core/interfaces.js';
-
 /**
  * It displays an analog clock with the classic SBB face.
  */

package/clock/clock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA2CrD;;GAEG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE9C,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjE,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;cAE9B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQlE,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,2BAA2B,CAMjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAsBzB,sDAAsD;YACxC,UAAU;IAcxB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAUlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA2CrD;;GAEG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE9C,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjE,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;cAE9B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAQlE,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,2BAA2B,CAMjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAsBzB,sDAAsD;YACxC,UAAU;IAcxB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/container/container/container.d.ts

@@ -1,10 +1,10 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-
 /**
  * It displays its content with the default page spacing.
  *
  * @slot - Use the unnamed slot to add anything to the container.
  * @slot sticky-bar - The slot used by the sbb-sticky-bar component.
+ * @slot image - The slot used to slot an `sbb-image` to use as background.
  */
 export declare class SbbContainerElement extends LitElement {
     static styles: CSSResultGroup;

package/container/container/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb;;;;;GAKG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,yCAAyC;IACU,QAAQ,UAAS;IAEpE,sFAAsF;IAE/E,kBAAkB,UAAS;IAElC,2DAA2D;IACvB,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,CAAW;cAEnE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;GAMG;AACH,qBAEa,mBAAoB,SAAQ,UAAU;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,yCAAyC;IACU,QAAQ,UAAS;IAEpE,sFAAsF;IAE/E,kBAAkB,UAAS;IAElC,2DAA2D;IACvB,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,CAAW;cAEnE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/container/container.js

@@ -1,40 +1,45 @@
-import { css as l, LitElement as d, html as p } from "lit";
-import { property as c, customElement as u } from "lit/decorators.js";
-const h = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host([color=white]){--sbb-container-background-color: var(--sbb-color-white)}:host([color=milk]){--sbb-container-background-color: var(--sbb-color-milk)}:host(:not([expanded])[background-expanded]){background-color:var(--sbb-container-background-color)}.sbb-container{background-color:var(--sbb-container-background-color)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}`;
-var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (n, e, t, a) => {
-  for (var o = a > 1 ? void 0 : a ? v(e, t) : e, b = n.length - 1, i; b >= 0; b--)
-    (i = n[b]) && (o = (a ? i(e, t, o) : i(o)) || o);
-  return a && o && f(e, t, o), o;
+import { css as l, LitElement as c, html as p } from "lit";
+import { property as d, customElement as g } from "lit/decorators.js";
+import { slotState as m } from "../core/decorators.js";
+const u = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host([color=white]){--sbb-container-background-color: var(--sbb-color-white)}:host([color=milk]){--sbb-container-background-color: var(--sbb-color-milk)}:host([data-slot-names~=image]){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host([data-slot-names~=image][background-expanded]){position:relative}.sbb-container{background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}:host([data-slot-names~=image]:not([background-expanded])) .sbb-container{position:relative}.sbb-container__content{position:relative}::slotted([slot=image]){--sbb-image-border-radius: 0;position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 90rem){:host(:not([expanded],[background-expanded])) ::slotted([slot=image]){--sbb-image-border-radius: var(--sbb-border-radius-4x);border-radius:var(--sbb-border-radius-4x)}}::slotted(img[slot=image]){object-fit:cover;height:100%;width:100%}`;
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (a, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? v(e, t) : e, i = a.length - 1, b; i >= 0; i--)
+    (b = a[i]) && (o = (n ? b(e, t, o) : b(o)) || o);
+  return n && o && h(e, t, o), o;
 };
-let r = class extends d {
+let r = class extends c {
   constructor() {
     super(...arguments), this.expanded = !1, this.backgroundExpanded = !1, this.color = "white";
   }
-  willUpdate(n) {
+  willUpdate(a) {
     var e, t;
-    super.willUpdate(n), n.has("expanded") && ((t = (e = this.querySelector) == null ? void 0 : e.call(this, "sbb-sticky-bar")) == null || t.toggleAttribute("data-expanded", this.expanded));
+    super.willUpdate(a), a.has("expanded") && ((t = (e = this.querySelector) == null ? void 0 : e.call(this, "sbb-sticky-bar")) == null || t.toggleAttribute("data-expanded", this.expanded));
   }
   render() {
     return p`
       <div class="sbb-container">
-        <slot></slot>
+        <slot name="image"></slot>
+        <div class="sbb-container__content">
+          <slot></slot>
+        </div>
       </div>
       <slot name="sticky-bar"></slot>
     `;
   }
 };
-r.styles = h;
+r.styles = u;
 s([
-  c({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], r.prototype, "expanded", 2);
 s([
-  c({ type: Boolean, reflect: !0, attribute: "background-expanded" })
+  d({ type: Boolean, reflect: !0, attribute: "background-expanded" })
 ], r.prototype, "backgroundExpanded", 2);
 s([
-  c({ reflect: !0 })
+  d({ reflect: !0 })
 ], r.prototype, "color", 2);
 r = s([
-  u("sbb-container")
+  g("sbb-container"),
+  m()
 ], r);
 export {
   r as SbbContainerElement

package/container/sticky-bar/sticky-bar.d.ts

@@ -1,5 +1,4 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-
 /**
  * A container that sticks to the bottom of the page if slotted into `sbb-container`.
  *