@sbb-esta/lyne-elements 4.5.0 → 4.6.0

package/calendar/calendar-day/calendar-day.component.js

@@ -0,0 +1,98 @@
+import { __esDecorate as d, __runInitializers as h } from "tslib";
+import { css as y, html as f } from "lit";
+import { customElement as g, property as p, state as m } from "lit/decorators.js";
+import { SbbButtonLikeBaseElement as _ } from "../../core/base-elements.js";
+import { readConfig as x } from "../../core/config/config.js";
+import { SbbPropertyWatcherController as S } from "../../core/controllers.js";
+import { defaultDateAdapter as D } from "../../core/datetime/native-date-adapter.js";
+import { SbbDisabledMixin as k } from "../../core/mixins.js";
+import { boxSizingStyles as A } from "../../core/styles.js";
+const w = y`:host{display:block;--sbb-calendar-day-width: 2.75rem;--sbb-calendar-day-height: 3rem;--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color);--sbb-calendar-day-selected-border: none;--sbb-calendar-day-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-calendar-day-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-day-cursor: var(--sbb-cursor-pointer);--sbb-calendar-day-border-radius: var(--sbb-border-radius-4x);--sbb-calendar-day-flex-direction: column;--sbb-calendar-day-justify-content: initial;--sbb-calendar-day-align-items: initial;--sbb-calendar-day-value-height: var(--sbb-spacing-fixed-6x);--sbb-calendar-day-extra-display: block;--sbb-calendar-day-extra-height: var(--sbb-spacing-fixed-4x);--sbb-calendar-day-crossed-out-top: 33%;--sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg)}:host(:is(:state(selected),[state--selected])){--sbb-calendar-day-selected-border: var(--sbb-border-width-2x) solid var(--sbb-border-color-2)}:host(:disabled){--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);--sbb-calendar-day-cursor: unset}:host(:focus-visible){outline:0}:host(:not(:disabled):active){--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color-active)}.sbb-calendar-day{--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;flex-direction:var(--sbb-calendar-day-flex-direction);justify-content:var(--sbb-calendar-day-justify-content);align-items:var(--sbb-calendar-day-align-items);height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width);padding:var(--sbb-calendar-cell-padding);padding-block-end:var(--sbb-calendar-day-cell-padding-hover, var(--sbb-calendar-cell-padding));margin:auto;color:var(--sbb-calendar-cell-color);cursor:var(--sbb-calendar-day-cursor);position:relative;z-index:0}.sbb-calendar-day:before{content:"";position:absolute;inset:0;background-color:var(--sbb-calendar-day-cell-background-color);border:var(--sbb-calendar-day-selected-border);border-radius:var(--sbb-calendar-day-border-radius);z-index:-1;transition-duration:var(--sbb-calendar-day-transition-duration);transition-timing-function:var(--sbb-calendar-day-transition-easing-function);transition-property:background-color}:host(:focus-visible) .sbb-calendar-day: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)}@media(forced-colors:active){:host(:not(:disabled):active) .sbb-calendar-day: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}}@media(any-hover:hover){:host(:not(:active,:disabled):hover) .sbb-calendar-day{--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color-hover);--sbb-calendar-day-cell-padding-hover: calc( .0625rem + var(--sbb-calendar-cell-padding) )}}@media(any-hover:hover)and (forced-colors:active){:host(:not(:active,:disabled):hover) .sbb-calendar-day: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-day__value{height:var(--sbb-calendar-day-value-height)}:host(:is(:state(current),[state--current])) .sbb-calendar-day__value{font-weight:700}:host(:is(:state(crossed-out),[state--crossed-out])) .sbb-calendar-day__value: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);inset-block-start:var(--sbb-calendar-day-crossed-out-top);inset-inline-start:50%;transform:var(--sbb-calendar-day-crossed-out-translate)}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height);padding:var(--sbb-calendar-cell-padding)}::slotted(*){height:1rem}`;
+let T = (() => {
+  var s;
+  let v = [g("sbb-calendar-day")], o, n = [], r, b = k(_), l = [], c, u;
+  return s = class extends b {
+    set slot(e) {
+      super.slot = e, this.value = this.dateAdapter.deserialize(e);
+    }
+    get slot() {
+      return super.slot;
+    }
+    /** Value of the calendar-day element. */
+    set value(e) {
+      const a = this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));
+      if (a) {
+        this._value = a;
+        const t = this.dateAdapter.sameDate(a, this.dateAdapter.today());
+        this.toggleState("current", t), this.internals.ariaCurrent = t ? "date" : null, this.internals.ariaLabel = this.dateAdapter.getAccessibilityFormatDate(a);
+        const i = this._getParent();
+        i && (this._setDisabledFilteredState(i), this._setSelectedState(i));
+      }
+    }
+    get value() {
+      return this._value;
+    }
+    constructor() {
+      super(), this.dateAdapter = (h(this, l), x().datetime?.dateAdapter ?? D), this._value = null, this.addController(new S(this, () => this._getParent(), {
+        dateFilter: (e) => this._setDisabledFilteredState(e),
+        min: (e) => this._setDisabledFilteredState(e),
+        max: (e) => this._setDisabledFilteredState(e),
+        selected: (e) => this._setSelectedState(e)
+      }));
+    }
+    /**
+     * Intentionally empty, as buttons are not targeted by form reset.
+     * @internal
+     */
+    formResetCallback() {
+    }
+    /**
+     * Intentionally empty, as buttons are not targeted by form restore.
+     * @internal
+     */
+    formStateRestoreCallback(e, a) {
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.tabIndex = -1;
+    }
+    /**
+     * The component is used as the default day cell within the `sbb-calendar`,
+     * or, if extra content is needed, it can be slotted.
+     */
+    _getParent() {
+      return this.closest?.("sbb-calendar") ?? this.getRootNode?.()?.host?.closest("sbb-calendar");
+    }
+    _setSelectedState(e) {
+      const a = e.multiple ? e.selected.some((t) => this.dateAdapter.sameDate(this.value, t)) : !!e.selected && this.dateAdapter.compareDate(this.value, e.selected) === 0;
+      this.toggleState("selected", a), this.internals.ariaPressed = String(a);
+    }
+    _setDisabledFilteredState(e) {
+      const a = !this._isActiveDate(e.dateFilter), t = !this._isDayInRange(e.min, e.max);
+      this.disabled = a || t, this.internals.ariaDisabled = String(this.disabled), this.toggleState("crossed-out", a && !t);
+    }
+    _isActiveDate(e) {
+      return e?.(this.value) ?? !0;
+    }
+    _isDayInRange(e, a) {
+      return !e && !a ? !0 : this.dateAdapter.sameDate(this.value, this.dateAdapter.clampDate(this.value, e, a));
+    }
+    renderTemplate() {
+      return f` <span class="sbb-calendar-day__value" aria-hidden="true">
+        ${this.dateAdapter.getDate(this.value)}
+      </span>
+      <span class="sbb-calendar-day__extra">
+        <slot></slot>
+      </span>`;
+    }
+  }, r = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    c = [p()], u = [m()], d(s, null, c, { kind: "setter", name: "slot", static: !1, private: !1, access: { has: (a) => "slot" in a, set: (a, t) => {
+      a.slot = t;
+    } }, metadata: e }, null, l), d(s, null, u, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, set: (a, t) => {
+      a.value = t;
+    } }, metadata: e }, null, l), d(null, o = { value: r }, v, { kind: "class", name: r.name, metadata: e }, null, n), r = o.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.styles = [A, w], h(r, n), r;
+})();
+export {
+  T as SbbCalendarDayElement
+};

package/calendar/calendar-day.js

@@ -0,0 +1,4 @@
+import { SbbCalendarDayElement as r } from "./calendar-day/calendar-day.component.js";
+export {
+  r as SbbCalendarDayElement
+};

package/calendar/calendar.js

@@ -0,0 +1,5 @@
+import { SbbCalendarElement as b, SbbMonthChangeEvent as t } from "./calendar/calendar.component.js";
+export {
+  b as SbbCalendarElement,
+  t as SbbMonthChangeEvent
+};

package/calendar.js

@@ -1,4 +1,7 @@
-import { SbbCalendarElement as a } from "./calendar/calendar.component.js";
+import { SbbCalendarElement as a, SbbMonthChangeEvent as b } from "./calendar/calendar/calendar.component.js";
+import { SbbCalendarDayElement as t } from "./calendar/calendar-day/calendar-day.component.js";
 export {
-  a as SbbCalendarElement
+  t as SbbCalendarDayElement,
+  a as SbbCalendarElement,
+  b as SbbMonthChangeEvent
 };

package/chip-label/chip-label.component.js

@@ -1,21 +1,21 @@
 var k = (e) => {
   throw TypeError(e);
 };
-var y = (e, s, t) => s.has(e) || k("Cannot " + t);
-var p = (e, s, t) => (y(e, s, "read from private field"), t ? t.call(e) : s.get(e)), d = (e, s, t) => s.has(e) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), h = (e, s, t, a) => (y(e, s, "write to private field"), a ? a.call(e, t) : s.set(e, t), t);
+var y = (e, s, l) => s.has(e) || k("Cannot " + l);
+var p = (e, s, l) => (y(e, s, "read from private field"), l ? l.call(e) : s.get(e)), d = (e, s, l) => s.has(e) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, l), h = (e, s, l, t) => (y(e, s, "write to private field"), t ? t.call(e, l) : s.set(e, l), l);
 import { __esDecorate as g, __runInitializers as c } from "tslib";
 import { css as S, LitElement as E, html as I } from "lit";
 import { customElement as j, property as w } from "lit/decorators.js";
 import { boxSizingStyles as D } from "../core/styles.js";
-const C = S`:host{display:inline-block;--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-3);--sbb-chip-label-padding-block: 0em;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-text-font-size-xxs)}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-color-granite);--sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-text-font-size-s)}.sbb-chip-label{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);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);overflow:hidden}@media(forced-colors:active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
+const C = S`:host{display:inline-block}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-color-granite);--sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-chip-label-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-chip-label-font-size: var(--sbb-text-font-size-s)}.sbb-chip-label{line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);font-size:var(--sbb-chip-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);overflow:hidden}@media(forced-colors:active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
 let B = (() => {
   var o, b, i;
-  let e = [j("sbb-chip-label")], s, t = [], a, v = E, f, u = [], x = [], m, _ = [], z = [];
+  let e = [j("sbb-chip-label")], s, l = [], t, v = E, u, f = [], m = [], x, _ = [], z = [];
   return i = class extends v {
     constructor() {
       super(...arguments);
-      d(this, o, c(this, u, "xxs"));
-      d(this, b, (c(this, x), c(this, _, "milk")));
+      d(this, o, c(this, f, "xxs"));
+      d(this, b, (c(this, m), c(this, _, "milk")));
       c(this, z);
     }
     /** Size of the chip. */
@@ -41,14 +41,14 @@ let B = (() => {
       </span>
     `;
     }
-  }, o = new WeakMap(), b = new WeakMap(), a = i, (() => {
+  }, o = new WeakMap(), b = new WeakMap(), t = i, (() => {
     const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    f = [w({ reflect: !0 })], m = [w({ reflect: !0 })], g(i, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (l) => "size" in l, get: (l) => l.size, set: (l, n) => {
-      l.size = n;
-    } }, metadata: r }, u, x), g(i, null, m, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (l) => "color" in l, get: (l) => l.color, set: (l, n) => {
-      l.color = n;
-    } }, metadata: r }, _, z), g(null, s = { value: a }, e, { kind: "class", name: a.name, metadata: r }, null, t), a = s.value, r && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), i.styles = [D, C], c(a, t), a;
+    u = [w({ reflect: !0 })], x = [w({ reflect: !0 })], g(i, null, u, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, n) => {
+      a.size = n;
+    } }, metadata: r }, f, m), g(i, null, x, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, n) => {
+      a.color = n;
+    } }, metadata: r }, _, z), g(null, s = { value: t }, e, { kind: "class", name: t.name, metadata: r }, null, l), t = s.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), i.styles = [D, C], c(t, l), t;
 })();
 export {
   B as SbbChipLabelElement

package/container/container/container.component.js

@@ -3,20 +3,20 @@ var I = (t) => {
 };
 var B = (t, a, s) => a.has(t) || I("Cannot " + s);
 var p = (t, a, s) => (B(t, a, "read from private field"), s ? s.call(t) : a.get(t)), g = (t, a, s) => a.has(t) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), u = (t, a, s, r) => (B(t, a, "write to private field"), r ? r.call(t, s) : a.set(t, s), s);
-import { __esDecorate as h, __runInitializers as i } from "tslib";
+import { __esDecorate as m, __runInitializers as i } from "tslib";
 import { css as D, LitElement as T, html as U } from "lit";
-import { customElement as j, property as m } from "lit/decorators.js";
+import { customElement as j, property as h } from "lit/decorators.js";
 import { forceType as C } from "../../core/decorators.js";
 import { SbbElementInternalsMixin as O, ɵstateController as q } from "../../core/mixins.js";
 import { boxSizingStyles as F } from "../../core/styles.js";
-const L = D`@charset "UTF-8";:host{--sbb-container-background-border-radius: 0;--sbb-container-color: inherit;display:block}:host(:is(:not([color]),[color=white])){--sbb-container-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-container-background-color: var(--sbb-background-color-3)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-1-negative)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-background-color-1-negative)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-background-color-2-negative)}:host(:is(:state(slotted-image),[state--slotted-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(:is(:state(slotted-image),[state--slotted-image])[background-expanded]){position:relative}@media(min-width:90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);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-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-container{max-width:var(--sbb-spacing-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-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}:host(:is(:state(slotted-image),[state--slotted-image]):not([background-expanded])) .sbb-container{position:relative}:host(:is(:state(slotted-image),[state--slotted-image])) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
+const L = D`@charset "UTF-8";:host{display:block}:host(:is(:not([color]),[color=white])){--sbb-container-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-container-background-color: var(--sbb-background-color-3)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-1-negative)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-background-color-1-negative)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-background-color-2-negative)}:host(:is(:state(slotted-image),[state--slotted-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(:is(:state(slotted-image),[state--slotted-image])[background-expanded]){position:relative}@media(min-width:90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);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-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-container{max-width:var(--sbb-spacing-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-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}:host(:is(:state(slotted-image),[state--slotted-image]):not([background-expanded])) .sbb-container{position:relative}:host(:is(:state(slotted-image),[state--slotted-image])) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
 let Q = (() => {
   var c, d, l, n;
-  let t = [j("sbb-container")], a, s = [], r, x = O(T), k, v = [], _ = [], f, y = [], E = [], w, S = [], z = [];
+  let t = [j("sbb-container")], a, s = [], r, x = O(T), v, k = [], _ = [], f, y = [], E = [], w, S = [], z = [];
   return n = class extends x {
     constructor() {
       super(...arguments);
-      g(this, c, i(this, v, !1));
+      g(this, c, i(this, k, !1));
       g(this, d, (i(this, _), i(this, y, !1)));
       g(this, l, (i(this, E), i(this, S, "white")));
       i(this, z);
@@ -61,13 +61,13 @@ let Q = (() => {
     }
   }, c = new WeakMap(), d = new WeakMap(), l = new WeakMap(), r = n, (() => {
     const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    k = [C(), m({ type: Boolean, reflect: !0 })], f = [C(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [m({ reflect: !0 })], h(n, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, b) => {
+    v = [C(), h({ type: Boolean, reflect: !0 })], f = [C(), h({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [h({ reflect: !0 })], m(n, null, v, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, b) => {
       e.expanded = b;
-    } }, metadata: o }, v, _), h(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, b) => {
+    } }, metadata: o }, k, _), m(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, b) => {
       e.backgroundExpanded = b;
-    } }, metadata: o }, y, E), h(n, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, b) => {
+    } }, metadata: o }, y, E), m(n, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, b) => {
       e.color = b;
-    } }, metadata: o }, S, z), h(null, a = { value: r }, t, { kind: "class", name: r.name, metadata: o }, null, s), r = a.value, o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+    } }, metadata: o }, S, z), m(null, a = { value: r }, t, { kind: "class", name: r.name, metadata: o }, null, s), r = a.value, o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
   })(), n.styles = [F, L], i(r, s), r;
 })();
 export {

package/container/sticky-bar/sticky-bar.component.js

@@ -2,7 +2,7 @@ var x = (s) => {
   throw TypeError(s);
 };
 var w = (s, i, e) => i.has(s) || x("Cannot " + e);
-var k = (s, i, e) => (w(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, r) => (w(s, i, "write to private field"), r ? r.call(s, e) : i.set(s, e), e);
+var k = (s, i, e) => (w(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, n) => (w(s, i, "write to private field"), n ? n.call(s, e) : i.set(s, e), e);
 import { __esDecorate as y, __runInitializers as d } from "tslib";
 import { IntersectionController as E } from "@lit-labs/observers/intersection-controller.js";
 import { css as C, LitElement as I, html as R } from "lit";
@@ -10,16 +10,16 @@ import { customElement as A, property as z } from "lit/decorators.js";
 import { isLean as B, isZeroAnimationDuration as D } from "../../core/dom.js";
 import { SbbUpdateSchedulerMixin as U, SbbElementInternalsMixin as T } from "../../core/mixins.js";
 import { boxSizingStyles as H } from "../../core/styles.js";
-const L = C`:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 100%,-100% 100%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
+const L = C`:host{--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name, unset);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:0s;animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border, none)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 100%,-100% 100%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color, transparent);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
 let F = (() => {
-  var o, c, n;
-  let s = [A("sbb-sticky-bar")], i, e = [], r, h = U(T(I)), g, v = [], m = [], p, _ = [], f = [];
-  return n = class extends h {
+  var o, c, r;
+  let s = [A("sbb-sticky-bar")], i, e = [], n, h = U(T(I)), g, p = [], v = [], m, _ = [], f = [];
+  return r = class extends h {
     constructor() {
       super();
       u(this, o);
       u(this, c);
-      l(this, o, d(this, v, null)), l(this, c, (d(this, m), d(this, _, B() ? "s" : "m"))), this._stateInternal = d(this, f), this._observer = new E(this, {
+      l(this, o, d(this, p, null)), l(this, c, (d(this, v), d(this, _, B() ? "s" : "m"))), this._stateInternal = d(this, f), this._observer = new E(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -102,19 +102,19 @@ let F = (() => {
       <div class="sbb-sticky-bar__intersector"></div>
     `;
     }
-  }, o = new WeakMap(), c = new WeakMap(), r = n, (() => {
+  }, o = new WeakMap(), c = new WeakMap(), n = r, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    g = [z({ reflect: !0 })], p = [z({ reflect: !0 })], y(n, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
+    g = [z({ reflect: !0 })], m = [z({ reflect: !0 })], y(r, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
       a.color = b;
-    } }, metadata: t }, v, m), y(n, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
+    } }, metadata: t }, p, v), y(r, null, m, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
       a.size = b;
-    } }, metadata: t }, _, f), y(null, i = { value: r }, s, { kind: "class", name: r.name, metadata: t }, null, e), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = [H, L], n.events = {
+    } }, metadata: t }, _, f), y(null, i = { value: n }, s, { kind: "class", name: n.name, metadata: t }, null, e), n = i.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = [H, L], r.events = {
     beforestick: "beforestick",
     stick: "stick",
     beforeunstick: "beforeunstick",
     unstick: "unstick"
-  }, d(r, e), r;
+  }, d(n, e), n;
 })();
 export {
   F as SbbStickyBarElement

package/core/datetime/temporal-date-adapter.js

@@ -1,9 +1,17 @@
 import { SbbLanguageController as a } from "../controllers.js";
 import { DateAdapter as o } from "./date-adapter.js";
 const i = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;
-if (typeof Temporal != "object")
-  throw new Error("Temporal is not available in the current environment. Please make sure to include the temporal polyfill.");
-class l extends o {
+class d extends o {
+  /**
+   * @param cutoffYearOffset The threshold on whether a two-digit year
+   * should be treated as belonging to 2000 or 1900. e.g. with 15 (default)
+   * the current year plus 15 will be treated as belonging to 2000, and the rest to 1900.
+   * So e.g. with the current year 2025, 40 will be treated as 2040, while 41 will be treated as 1941.
+   */
+  constructor(e) {
+    if (super(e), typeof Temporal != "object")
+      throw new Error("Temporal is not available in the current environment. Please make sure to include the temporal polyfill.");
+  }
   /** Gets the year of the input date. */
   getYear(e) {
     return e.year;
@@ -132,8 +140,6 @@ class l extends o {
     return Array.from({ length: e }).map((t, n) => r(n));
   }
 }
-const u = new l();
 export {
-  l as TemporalDateAdapter,
-  u as temporalDateAdapter
+  d as TemporalDateAdapter
 };

package/core/datetime.js

@@ -1,17 +1,16 @@
-import { DAYS_PER_ROW as a, DateAdapter as A, FORMAT_DATE as r, ISO8601_FORMAT_DATE as _, MONTHS_PER_PAGE as R, MONTHS_PER_ROW as E, YEARS_PER_PAGE as p, YEARS_PER_ROW as o } from "./datetime/date-adapter.js";
-import { NativeDateAdapter as O, defaultDateAdapter as P } from "./datetime/native-date-adapter.js";
-import { TemporalDateAdapter as d, temporalDateAdapter as S } from "./datetime/temporal-date-adapter.js";
+import { DAYS_PER_ROW as A, DateAdapter as _, FORMAT_DATE as R, ISO8601_FORMAT_DATE as a, MONTHS_PER_PAGE as r, MONTHS_PER_ROW as E, YEARS_PER_PAGE as p, YEARS_PER_ROW as O } from "./datetime/date-adapter.js";
+import { NativeDateAdapter as D, defaultDateAdapter as P } from "./datetime/native-date-adapter.js";
+import { TemporalDateAdapter as S } from "./datetime/temporal-date-adapter.js";
 export {
-  a as DAYS_PER_ROW,
-  A as DateAdapter,
-  r as FORMAT_DATE,
-  _ as ISO8601_FORMAT_DATE,
-  R as MONTHS_PER_PAGE,
+  A as DAYS_PER_ROW,
+  _ as DateAdapter,
+  R as FORMAT_DATE,
+  a as ISO8601_FORMAT_DATE,
+  r as MONTHS_PER_PAGE,
   E as MONTHS_PER_ROW,
-  O as NativeDateAdapter,
-  d as TemporalDateAdapter,
+  D as NativeDateAdapter,
+  S as TemporalDateAdapter,
   p as YEARS_PER_PAGE,
-  o as YEARS_PER_ROW,
-  P as defaultDateAdapter,
-  S as temporalDateAdapter
+  O as YEARS_PER_ROW,
+  P as defaultDateAdapter
 };

package/core/styles/core.scss

@@ -32,6 +32,9 @@ $theme: 'standard' !default;
 @use '../../card/card/card.global' as card with (
   $theme: $theme
 );
+@use '../../chip-label/chip-label.global' as chip-label with (
+  $theme: $theme
+);
 @use '../../chip/chip/chip.global' as chip with (
   $theme: $theme
 );
@@ -59,6 +62,12 @@ $theme: 'standard' !default;
 @use '../../clock/clock.global' as clock with (
   $theme: $theme
 );
+@use '../../container/container/container.global' as container with (
+  $theme: $theme
+);
+@use '../../container/sticky-bar/sticky-bar.global' as sticky-bar with (
+  $theme: $theme
+);
 @use '../../divider/divider.global' as divider with (
   $theme: $theme
 );
@@ -114,12 +123,15 @@ $theme: 'standard' !default;
   @include card.base;
   @include card-badge.base;
   @include carousel.base;
+  @include chip-label.base;
   @include chip.base;
   @include chip-group.base;
   @include panel-common.base;
   @include checkbox.base;
   @include checkbox-group.base;
   @include checkbox-common.base;
+  @include container.base;
+  @include sticky-bar.base;
   @include clock.base;
   @include divider.base;
   @include expansion-panel.base;
@@ -241,6 +253,7 @@ $theme: 'standard' !default;
 @include font-face.font-declarations;
 
 // Components global styles
+@include container.rules;
 @include tab-nav-bar.rules;
 
 // TODO: discuss where to add these classes
@@ -350,6 +363,7 @@ html {
     white-space: break-spaces;
     overflow-y: auto;
     min-height: calc((var(--sbb-typo-line-height-text) * 1em));
+    height: 100%;
   }
 
   &[size='l'] :where(textarea) {
@@ -460,18 +474,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-container components when the global CSS refactoring happens
-sbb-container {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-object-fit: cover;
-
-    border-radius: var(--sbb-container-background-border-radius);
-    height: 100%;
-    position: absolute;
-  }
-}
-
 // TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
 sbb-flip-card-summary {
   > [slot='image']:is(sbb-image, img),

package/core/styles/mixins/chip.scss

@@ -25,37 +25,37 @@
 @mixin chip-label-variables--size-xxs {
   --sbb-chip-label-padding-block: 0em;
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
 }
 
 @mixin chip-label-variables--size-xs {
   --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
-  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xs);
 }
 
 @mixin chip-label-variables--size-s {
   --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
-  --sbb-text-font-size: var(--sbb-text-font-size-s);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-s);
 }
 
 @mixin chip-label-rules {
-  @include typo.text;
-
   // We need an even value to make it work smoothly in Safari
   line-height: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: calc(
-    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size) +
+    var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) +
       var(--sbb-chip-label-padding-block) * 2
   );
   background-color: var(--sbb-chip-label-background-color);
   padding-inline: var(--sbb-chip-label-padding-inline);
   border-radius: var(--sbb-border-radius-infinity);
   color: var(--sbb-chip-label-color);
+  font-size: var(--sbb-chip-label-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
 
   // Overflow hidden needed because line-height can be taller than height which can cause weird layout shifting
   overflow: hidden;

package/core.css

@@ -1341,6 +1341,12 @@
   --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
   --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
   --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-chip-label-color: var(--sbb-color-granite);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
+  --sbb-chip-label-padding-block: 0em;
+  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
   --sbb-chip-background-color: var(--sbb-background-color-3);
   --sbb-chip-background-color-active: var(--sbb-background-color-1);
   --sbb-chip-background-color-hover: var(--sbb-background-color-1);
@@ -1396,6 +1402,13 @@
   --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
   --sbb-checkbox-label-color: var(--sbb-color-color-3);
   --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-container-background-border-radius: 0;
+  --sbb-container-color: inherit;
+  --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
+  --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
+  --sbb-sticky-bar-position: sticky;
+  --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
   --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
   --sbb-clock-face-color: var(--sbb-color-1);
   --sbb-clock-background-color: var(--sbb-background-color-1);
@@ -1658,6 +1671,14 @@
   font-display: swap;
   font-weight: 300;
 }
+sbb-container > [slot=image]:is(sbb-image, img),
+sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-object-fit: cover;
+  border-radius: var(--sbb-container-background-border-radius);
+  height: 100%;
+  position: absolute;
+}
+
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);
@@ -1803,6 +1824,7 @@ html {
   white-space: break-spaces;
   overflow-y: auto;
   min-height: calc(var(--sbb-typo-line-height-text) * 1em);
+  height: 100%;
 }
 :is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
   padding-block-end: 0.34375rem;
@@ -1941,14 +1963,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-container > [slot=image]:is(sbb-image, img),
-sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-object-fit: cover;
-  border-radius: var(--sbb-container-background-border-radius);
-  height: 100%;
-  position: absolute;
-}
-
 sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
 sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: auto;