@sbb-esta/lyne-elements 2.11.0 → 2.11.2

package/clock/clock.component.js

@@ -1,28 +1,28 @@
-var z = (n) => {
-  throw TypeError(n);
+var M = (s) => {
+  throw TypeError(s);
 };
-var S = (n, e, i) => e.has(n) || z("Cannot " + i);
-var w = (n, e, i) => (S(n, e, "read from private field"), i ? i.call(n) : e.get(n)), C = (n, e, i) => e.has(n) ? z("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, i), h = (n, e, i, c) => (S(n, e, "write to private field"), c ? c.call(n, i) : e.set(n, i), i);
-import { __runInitializers as m, __esDecorate as L } from "tslib";
-import { css as P, LitElement as F, isServer as E, html as x } from "lit";
-import { customElement as U, property as $ } from "lit/decorators.js";
+var p = (s, n, e) => n.has(s) || M("Cannot " + e);
+var g = (s, n, e) => (p(s, n, "read from private field"), e ? e.call(s) : n.get(s)), H = (s, n, e) => n.has(s) ? M("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, e), h = (s, n, e, i) => (p(s, n, "write to private field"), i ? i.call(s, e) : n.set(s, e), e);
+import { __runInitializers as m, __esDecorate as y } from "tslib";
+import { css as E, LitElement as A, isServer as z, html as O } from "lit";
+import { customElement as T, property as I } from "lit/decorators.js";
 import { ref as _ } from "lit/directives/ref.js";
-const D = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="#FFF" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
-`, V = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path id="mod_clock_svg_hours" d="M55.7 64.5h-6.4l.6-44h5.2z"/></svg>
-`, G = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
-`, R = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
-`, B = P`*,:before,:after{box-sizing:border-box}:host{--sbb-clock-hours-animation-start-angle: 0deg;--sbb-clock-seconds-animation-start-angle: 0deg;--sbb-clock-hours-animation-duration: 0s;--sbb-clock-seconds-animation-duration: 0s;--sbb-clock-animation-play-state: paused;--sbb-clock-seconds-hand-color: var(--sbb-color-red);display:block}.sbb-clock{position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state)}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}:host(:not([data-initialized])) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle))}97.5%,to{transform:rotate(360deg)}}`, K = 12, j = 60, A = 60, Z = 50, O = 360, T = 30, q = 6, J = 360 / 58.5, Q = 60, N = 3600, W = N / 2, I = {
+const N = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="#FFF" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
+`, P = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path id="mod_clock_svg_hours" d="M55.7 64.5h-6.4l.6-44h5.2z"/></svg>
+`, F = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
+`, x = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
+`, U = E`*,:before,:after{box-sizing:border-box}:host{--sbb-clock-hours-animation-start-angle: 0deg;--sbb-clock-seconds-animation-start-angle: 0deg;--sbb-clock-hours-animation-duration: 0s;--sbb-clock-seconds-animation-duration: 0s;--sbb-clock-animation-play-state: paused;--sbb-clock-seconds-hand-color: var(--sbb-color-red);display:block}.sbb-clock{position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;inset:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state)}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}:host(:not([data-initialized])) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle))}97.5%,to{transform:rotate(360deg)}}`, $ = 12, D = 60, f = 60, V = 50, S = 360, w = 30, G = 6, R = 360 / 58.5, B = 60, L = 3600, K = L / 2, C = {
   once: !0,
   passive: !0
 };
-let it = (() => {
-  var r, l;
-  let n = [U("sbb-clock")], e, i = [], c, u = F, b, k = [], v = [];
-  return l = class extends u {
+let X = (() => {
+  var c, o;
+  let s = [T("sbb-clock")], n, e = [], i, u = A, b, k = [], v = [];
+  return o = class extends u {
     constructor() {
       super(...arguments);
-      C(this, r);
-      h(this, r, m(this, k, null)), this._state = (m(this, v), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
+      H(this, c);
+      h(this, c, m(this, k, null)), this._state = (m(this, v), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
         this.now || (document.visibilityState === "hidden" ? await this._stopClock() : await this._startClock());
       };
     }
@@ -31,19 +31,19 @@ let it = (() => {
      * @param value HH:MM:ss
      */
     get now() {
-      return w(this, r);
+      return g(this, c);
     }
     set now(t) {
-      h(this, r, t);
+      h(this, c, t);
     }
     connectedCallback() {
-      super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), W * 1e3);
+      super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), K * 1e3);
     }
     willUpdate(t) {
-      super.willUpdate(t), !E && t.has("now") && this._startOrConfigureClock();
+      super.willUpdate(t), !z && t.has("now") && this._startOrConfigureClock();
     }
     async firstUpdated(t) {
-      super.firstUpdated(t), E || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), await this._startOrConfigureClock());
+      super.firstUpdated(t), z || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), await this._startOrConfigureClock());
     }
     disconnectedCallback() {
       super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);
@@ -53,16 +53,13 @@ let it = (() => {
     }
     /** Starts the clock by defining the hands starting position then starting the animations. */
     async _startClock() {
-      var t, s;
-      (t = this._clockHandHours) == null || t.addEventListener("animationend", this._moveHoursHandFn, I), (s = this._clockHandSeconds) == null || s.addEventListener("animationend", this._moveMinutesHandFn, I), await new Promise((o) => setTimeout(() => {
-        var a;
-        this._setHandsStartingPosition(), (a = this.style) == null || a.setProperty("--sbb-clock-animation-play-state", "running"), this._state = "running", o();
-      }, Z));
+      this._clockHandHours?.addEventListener("animationend", this._moveHoursHandFn, C), this._clockHandSeconds?.addEventListener("animationend", this._moveMinutesHandFn, C), await new Promise((t) => setTimeout(() => {
+        this._setHandsStartingPosition(), this.style?.setProperty("--sbb-clock-animation-play-state", "running"), this._state = "running", t();
+      }, V));
     }
     /** Stops the clock by removing all the animations. */
     async _stopClock() {
-      var t, s, o, a;
-      clearInterval(this._handMovement), this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (s = this._clockHandSeconds) == null || s.removeEventListener("animationend", this._moveMinutesHandFn), (o = this._clockHandMinutes) == null || o.classList.add("sbb-clock__hand-minutes--no-transition"), (a = this.style) == null || a.setProperty("--sbb-clock-animation-play-state", "paused"), this._state = "paused";
+      clearInterval(this._handMovement), this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), this._clockHandHours?.removeEventListener("animationend", this._moveHoursHandFn), this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), this._clockHandMinutes?.classList.add("sbb-clock__hand-minutes--no-transition"), this.style?.setProperty("--sbb-clock-animation-play-state", "paused"), this._state = "paused";
     }
     /**
      * As a fallback measure to prevent de-sync, reset the clock to the system time.
@@ -72,33 +69,29 @@ let it = (() => {
     }
     /** Set the starting position for the three hands on the clock face. */
     _setHandsStartingPosition() {
-      var M, p, g, H, y, f;
       this._assignCurrentTime();
-      const t = A - this._seconds, s = j - this._minutes, o = K - this._hours;
-      let a = 0, d = 0;
-      t > 0 && (a += t, d = 1), s > 0 && (a += (s - d) * Q, d = 1), o > 0 && (a += (o - d) * N), (M = this.style) == null || M.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * T + this._minutes / 2)}deg`), (p = this.style) == null || p.setProperty("--sbb-clock-hours-animation-duration", `${a}s`), (g = this.style) == null || g.setProperty("--sbb-clock-seconds-animation-start-angle", `${Math.ceil(this._seconds * J)}deg`), (H = this.style) == null || H.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), (y = this._clockHandSeconds) == null || y.classList.add("sbb-clock__hand-seconds--initial-minute"), (f = this._clockHandHours) == null || f.classList.add("sbb-clock__hand-hours--initial-hour"), this.toggleAttribute("data-initialized", !0);
+      const t = f - this._seconds, a = D - this._minutes, l = $ - this._hours;
+      let r = 0, d = 0;
+      t > 0 && (r += t, d = 1), a > 0 && (r += (a - d) * B, d = 1), l > 0 && (r += (l - d) * L), this.style?.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * w + this._minutes / 2)}deg`), this.style?.setProperty("--sbb-clock-hours-animation-duration", `${r}s`), this.style?.setProperty("--sbb-clock-seconds-animation-start-angle", `${Math.ceil(this._seconds * R)}deg`), this.style?.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), this._clockHandSeconds?.classList.add("sbb-clock__hand-seconds--initial-minute"), this._clockHandHours?.classList.add("sbb-clock__hand-hours--initial-hour"), this.toggleAttribute("data-initialized", !0);
     }
     /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
     _assignCurrentTime() {
-      const t = this.now ? null : /* @__PURE__ */ new Date(), [s, o, a] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((d) => +d);
-      this._hours = s % 12, this._minutes = o, this._seconds = a;
+      const t = this.now ? null : /* @__PURE__ */ new Date(), [a, l, r] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((d) => +d);
+      this._hours = a % 12, this._minutes = l, this._seconds = r;
     }
     /** Set the starting position for the minutes hand. */
     _setMinutesHand() {
-      var t;
-      (t = this._clockHandMinutes) == null || t.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * q)}deg)`);
+      this._clockHandMinutes?.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * G)}deg)`);
     }
     /** Move the hours hand to the next value. */
     _moveHoursHand() {
-      var s;
       this._removeHoursAnimationStyles();
-      let t = Math.ceil(this._hours * T + this._minutes / 2);
-      t >= O && (t -= O), (s = this._clockHandHours) == null || s.style.setProperty("transform", `rotateZ(${t}deg)`);
+      let t = Math.ceil(this._hours * w + this._minutes / 2);
+      t >= S && (t -= S), this._clockHandHours?.style.setProperty("transform", `rotateZ(${t}deg)`);
     }
     /** Move the minutes hand to the next value. */
     _moveMinutesHand() {
-      var t;
-      (t = this._clockHandSeconds) == null || t.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(() => this._addMinutesAndSetHands(), A * 1e3);
+      this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(() => this._addMinutesAndSetHands(), f * 1e3);
     }
     _addMinutesAndSetHands() {
       this._minutes++, this._setMinutesHand();
@@ -112,38 +105,35 @@ let it = (() => {
       this._clockHandSeconds && (this._clockHandSeconds.style.animation = "", this._clockHandSeconds.offsetHeight, this._clockHandSeconds.style.removeProperty("animation"));
     }
     _removeEventListeners() {
-      var t, s;
-      document == null || document.removeEventListener("visibilitychange", this._handlePageVisibilityChange), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (s = this._clockHandSeconds) == null || s.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
+      document?.removeEventListener("visibilitychange", this._handlePageVisibilityChange), this._clockHandHours?.removeEventListener("animationend", this._moveHoursHandFn), this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
     }
     _removeHoursAnimationStyles() {
-      var t;
-      (t = this._clockHandHours) == null || t.classList.remove("sbb-clock__hand-hours--initial-hour"), this.style.removeProperty("--sbb-clock-hours-animation-start-angle"), this.style.removeProperty("--sbb-clock-hours-animation-duration");
+      this._clockHandHours?.classList.remove("sbb-clock__hand-hours--initial-hour"), this.style.removeProperty("--sbb-clock-hours-animation-start-angle"), this.style.removeProperty("--sbb-clock-hours-animation-duration");
     }
     _removeSecondsAnimationStyles() {
-      var t, s;
-      (t = this._clockHandSeconds) == null || t.classList.remove("sbb-clock__hand-seconds--initial-minute"), (s = this._clockHandMinutes) == null || s.classList.remove("sbb-clock__hand-minutes--no-transition"), this.style.removeProperty("--sbb-clock-seconds-animation-start-angle"), this.style.removeProperty("--sbb-clock-seconds-animation-duration");
+      this._clockHandSeconds?.classList.remove("sbb-clock__hand-seconds--initial-minute"), this._clockHandMinutes?.classList.remove("sbb-clock__hand-minutes--no-transition"), this.style.removeProperty("--sbb-clock-seconds-animation-start-angle"), this.style.removeProperty("--sbb-clock-seconds-animation-duration");
     }
     render() {
-      return x`
+      return O`
       <div class="sbb-clock">
-        <span class="sbb-clock__face" .innerHTML=${D}></span>
+        <span class="sbb-clock__face" .innerHTML=${N}></span>
         <span
           class="sbb-clock__hand-hours"
-          .innerHTML=${V}
+          .innerHTML=${P}
           ${_((t) => {
         this._clockHandHours = t;
       })}
         ></span>
         <span
           class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
-          .innerHTML=${G}
+          .innerHTML=${F}
           ${_((t) => {
         this._clockHandMinutes = t;
       })}
         ></span>
         <span
           class="sbb-clock__hand-seconds"
-          .innerHTML=${R}
+          .innerHTML=${x}
           ${_((t) => {
         this._clockHandSeconds = t;
       })}
@@ -151,13 +141,13 @@ let it = (() => {
       </div>
     `;
     }
-  }, r = new WeakMap(), c = l, (() => {
+  }, c = new WeakMap(), i = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    b = [$()], L(l, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (s) => "now" in s, get: (s) => s.now, set: (s, o) => {
-      s.now = o;
-    } }, metadata: t }, k, v), L(null, e = { value: c }, n, { kind: "class", name: c.name, metadata: t }, null, i), c = e.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = B, m(c, i), c;
+    b = [I()], y(o, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (a) => "now" in a, get: (a) => a.now, set: (a, l) => {
+      a.now = l;
+    } }, metadata: t }, k, v), y(null, n = { value: i }, s, { kind: "class", name: i.name, metadata: t }, null, e), i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = U, m(i, e), i;
 })();
 export {
-  it as SbbClockElement
+  X as SbbClockElement
 };

package/container/container/container.component.js

@@ -1,48 +1,47 @@
-var I = (t) => {
-  throw TypeError(t);
+var I = (e) => {
+  throw TypeError(e);
 };
-var D = (t, a, r) => a.has(t) || I("Cannot " + r);
-var p = (t, a, r) => (D(t, a, "read from private field"), r ? r.call(t) : a.get(t)), u = (t, a, r) => a.has(t) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), h = (t, a, r, s) => (D(t, a, "write to private field"), s ? s.call(t, r) : a.set(t, r), r);
-import { __esDecorate as g, __runInitializers as c } from "tslib";
+var D = (e, t, r) => t.has(e) || I("Cannot " + r);
+var p = (e, t, r) => (D(e, t, "read from private field"), r ? r.call(e) : t.get(e)), u = (e, t, r) => t.has(e) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), h = (e, t, r, s) => (D(e, t, "write to private field"), s ? s.call(e, r) : t.set(e, r), r);
+import { __esDecorate as g, __runInitializers as i } from "tslib";
 import { css as U, LitElement as j, html as B } from "lit";
 import { customElement as O, property as m } from "lit/decorators.js";
 import { slotState as q, forceType as T } from "../../core/decorators.js";
-const A = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-container-background-border-radius: 0;--sbb-container-color: inherit;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([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-white)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-color-midnight)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-color-charcoal)}: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}@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-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}:host([data-slot-names~=image]) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%}`;
+const A = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-container-background-border-radius: 0;--sbb-container-color: inherit;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([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-white)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-color-midnight)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-color-charcoal)}: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}@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-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}:host([data-slot-names~=image]) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
 let K = (() => {
-  var d, l, b, n;
-  let t = [O("sbb-container"), q()], a, r = [], s, x = j, k, _ = [], v = [], f, y = [], w = [], E, z = [], S = [];
+  var c, d, l, n;
+  let e = [O("sbb-container"), q()], t, r = [], s, x = j, k, _ = [], v = [], f, y = [], w = [], E, z = [], S = [];
   return n = class extends x {
     constructor() {
       super(...arguments);
-      u(this, d, c(this, _, !1));
-      u(this, l, (c(this, v), c(this, y, !1)));
-      u(this, b, (c(this, w), c(this, z, "white")));
-      c(this, S);
+      u(this, c, i(this, _, !1));
+      u(this, d, (i(this, v), i(this, y, !1)));
+      u(this, l, (i(this, w), i(this, z, "white")));
+      i(this, S);
     }
     /** Whether the container is expanded. */
     get expanded() {
-      return p(this, d);
+      return p(this, c);
     }
     set expanded(o) {
-      h(this, d, o);
+      h(this, c, o);
     }
     /** Whether the background color is shown on full container width on large screens. */
     get backgroundExpanded() {
-      return p(this, l);
+      return p(this, d);
     }
     set backgroundExpanded(o) {
-      h(this, l, o);
+      h(this, d, o);
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
-      return p(this, b);
+      return p(this, l);
     }
     set color(o) {
-      h(this, b, o);
+      h(this, l, o);
     }
     willUpdate(o) {
-      var e, i;
-      super.willUpdate(o), o.has("expanded") && ((i = (e = this.querySelector) == null ? void 0 : e.call(this, "sbb-sticky-bar")) == null || i.toggleAttribute("data-expanded", this.expanded));
+      super.willUpdate(o), o.has("expanded") && this.querySelector?.("sbb-sticky-bar")?.toggleAttribute("data-expanded", this.expanded);
     }
     render() {
       return B`
@@ -55,16 +54,16 @@ let K = (() => {
       <slot name="sticky-bar"></slot>
     `;
     }
-  }, d = new WeakMap(), l = new WeakMap(), b = new WeakMap(), s = n, (() => {
+  }, c = new WeakMap(), d = new WeakMap(), l = new WeakMap(), s = n, (() => {
     const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    k = [T(), m({ type: Boolean, reflect: !0 })], f = [T(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], E = [m({ reflect: !0 })], g(n, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, i) => {
-      e.expanded = i;
-    } }, metadata: o }, _, v), g(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, i) => {
-      e.backgroundExpanded = i;
-    } }, metadata: o }, y, w), g(n, null, E, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, i) => {
-      e.color = i;
-    } }, metadata: o }, z, S), g(null, a = { value: s }, t, { kind: "class", name: s.name, metadata: o }, null, r), s = a.value, o && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), n.styles = A, c(s, r), s;
+    k = [T(), m({ type: Boolean, reflect: !0 })], f = [T(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], E = [m({ reflect: !0 })], g(n, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (a) => "expanded" in a, get: (a) => a.expanded, set: (a, b) => {
+      a.expanded = b;
+    } }, metadata: o }, _, v), g(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (a) => "backgroundExpanded" in a, get: (a) => a.backgroundExpanded, set: (a, b) => {
+      a.backgroundExpanded = b;
+    } }, metadata: o }, y, w), g(n, null, E, { 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: o }, z, S), g(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: o }, null, r), s = t.value, o && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), n.styles = A, i(s, r), s;
 })();
 export {
   K as SbbContainerElement

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

@@ -1,32 +1,32 @@
-var z = (a) => {
+var S = (a) => {
   throw TypeError(a);
 };
-var A = (a, i, e) => i.has(a) || z("Cannot " + e);
-var h = (a, i, e) => (A(a, i, "read from private field"), e ? e.call(a) : i.get(a)), y = (a, i, e) => i.has(a) ? z("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, e), d = (a, i, e, r) => (A(a, i, "write to private field"), r ? r.call(a, e) : i.set(a, e), e);
+var z = (a, i, e) => i.has(a) || S("Cannot " + e);
+var y = (a, i, e) => (z(a, i, "read from private field"), e ? e.call(a) : i.get(a)), h = (a, i, e) => i.has(a) ? S("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, e), d = (a, i, e, r) => (z(a, i, "write to private field"), r ? r.call(a, e) : i.set(a, e), e);
 import { __runInitializers as k, __esDecorate as v } from "tslib";
-import { IntersectionController as U } from "@lit-labs/observers/intersection-controller.js";
-import { css as R, LitElement as I, html as D } from "lit";
-import { customElement as T, property as C } from "lit/decorators.js";
-import { hostAttributes as B } from "../../core/decorators.js";
-import { isLean as H, isZeroAnimationDuration as L } from "../../core/dom.js";
+import { IntersectionController as E } from "@lit-labs/observers/intersection-controller.js";
+import { css as U, LitElement as R, html as I } from "lit";
+import { customElement as D, property as A } from "lit/decorators.js";
+import { hostAttributes as T } from "../../core/decorators.js";
+import { isLean as B, isZeroAnimationDuration as H } from "../../core/dom.js";
 import { EventEmitter as u } from "../../core/eventing.js";
-import { SbbUpdateSchedulerMixin as N } from "../../core/mixins.js";
-const O = R`*,:before,:after{box-sizing:border-box}: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([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) );--_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([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-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:"";top:0;right:0;bottom:0;left: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([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{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;top:0;right:0;bottom:0;left: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(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-elevation-level-11-soft-2-color),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-elevation-level-11-soft-1-color)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline: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%)}}`;
-let Q = (() => {
+import { SbbUpdateSchedulerMixin as L } from "../../core/mixins.js";
+const N = U`*,:before,:after{box-sizing:border-box}: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([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) );--_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([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-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([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{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(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-elevation-level-11-soft-2-color),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-elevation-level-11-soft-1-color)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline: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%)}}`;
+let K = (() => {
   var b, c, o;
-  let a = [T("sbb-sticky-bar"), B({
+  let a = [D("sbb-sticky-bar"), T({
     slot: "sticky-bar"
-  })], i, e = [], r, m = N(I), _, g = [], p = [], f, w = [], x = [];
+  })], i, e = [], r, m = L(R), _, g = [], p = [], f, w = [], x = [];
   var n = (o = class extends m {
     constructor() {
       super(...arguments);
-      y(this, b);
-      y(this, c);
-      d(this, b, k(this, g, null)), d(this, c, (k(this, p), k(this, w, H() ? "s" : "m"))), this._willStick = (k(this, x), new u(this, n.events.willStick, {
+      h(this, b);
+      h(this, c);
+      d(this, b, k(this, g, null)), d(this, c, (k(this, p), k(this, w, B() ? "s" : "m"))), this._willStick = (k(this, x), new u(this, n.events.willStick, {
         cancelable: !0
       })), this._didStick = new u(this, n.events.didStick, {
         cancelable: !0
-      }), this._willUnstick = new u(this, n.events.willUnstick, { cancelable: !0 }), this._didUnstick = new u(this, n.events.didUnstick, { cancelable: !0 }), this._observer = new U(this, {
+      }), this._willUnstick = new u(this, n.events.willUnstick, { cancelable: !0 }), this._didUnstick = new u(this, n.events.didUnstick, { cancelable: !0 }), this._observer = new E(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -35,7 +35,7 @@ let Q = (() => {
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
-      return h(this, b);
+      return y(this, b);
     }
     set color(t) {
       d(this, b, t);
@@ -45,7 +45,7 @@ let Q = (() => {
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return h(this, c);
+      return y(this, c);
     }
     set size(t) {
       d(this, c, t);
@@ -69,13 +69,12 @@ let Q = (() => {
       super.firstUpdated(t), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
     }
     _isZeroAnimationDuration() {
-      return L(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
+      return H(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
     }
     _detectStickyState(t) {
-      var S;
       this.toggleAttribute("data-initialized", !0);
-      const s = !t.isIntersecting && t.boundingClientRect.top > 0, l = (S = this._intersector) == null ? void 0 : S.getBoundingClientRect(), E = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
-      this.toggleAttribute("data-slide-vertically", s && this._intersector && Math.abs(l.bottom - E.bottom) > 30), this.toggleAttribute("data-sticking", s), this.completeUpdate();
+      const s = !t.isIntersecting && t.boundingClientRect.top > 0, l = this._intersector?.getBoundingClientRect(), C = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+      this.toggleAttribute("data-slide-vertically", s && this._intersector && Math.abs(l.bottom - C.bottom) > 30), this.toggleAttribute("data-sticking", s), this.completeUpdate();
     }
     /** Animates from normal content flow position to `position: sticky`. */
     stick() {
@@ -95,7 +94,7 @@ let Q = (() => {
       (this._state === "sticking" || this._state === "sticky") && t.animationName === "slide-in" ? this._stickyCallback() : this._state === "unsticking" && t.animationName === "slide-out" && this._unstickyCallback();
     }
     render() {
-      return D`
+      return I`
       <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
         <div class="sbb-sticky-bar">
           <slot></slot>
@@ -106,12 +105,12 @@ let Q = (() => {
     }
   }, b = new WeakMap(), c = new WeakMap(), r = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-    _ = [C({ reflect: !0 })], f = [C({ reflect: !0 })], v(o, null, _, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (s) => "color" in s, get: (s) => s.color, set: (s, l) => {
+    _ = [A({ reflect: !0 })], f = [A({ reflect: !0 })], v(o, null, _, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (s) => "color" in s, get: (s) => s.color, set: (s, l) => {
       s.color = l;
     } }, metadata: t }, g, p), v(o, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, l) => {
       s.size = l;
     } }, metadata: t }, w, x), v(null, i = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), n = r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = O, o.events = {
+  })(), o.styles = N, o.events = {
     willStick: "willStick",
     didStick: "didStick",
     willUnstick: "willUnstick",
@@ -120,5 +119,5 @@ let Q = (() => {
   return n = r;
 })();
 export {
-  Q as SbbStickyBarElement
+  K as SbbStickyBarElement
 };

package/core/a11y/focus-trap-controller.js

@@ -1,4 +1,4 @@
-import { interactivityChecker as n } from "./interactivity-checker.js";
+import { interactivityChecker as i } from "./interactivity-checker.js";
 class r {
   /**
    * Whether the focus is trap is enabled.
@@ -11,8 +11,7 @@ class r {
     return !!this._abortController;
   }
   constructor(t) {
-    var e, s;
-    this._host = t, this._abortController = null, (s = (e = this._host).addController) == null || s.call(e, this);
+    this._host = t, this._abortController = null, this._host.addController?.(this);
   }
   hostDisconnected() {
     this._untrap();
@@ -24,9 +23,9 @@ class r {
   focusInitialElement(t) {
     const e = this._host.querySelector("[sbb-focus-initial]");
     if (e) {
-      if (!n.isFocusable(e)) {
+      if (!i.isFocusable(e)) {
         const s = this._getFirstTabbableElement(e);
-        return s == null || s.focus(t), !!s;
+        return s?.focus(t), !!s;
       }
       return e.focus(t), !0;
     }
@@ -50,20 +49,19 @@ class r {
   }
   _trap() {
     this._abortController = new AbortController(), this._host.addEventListener("keydown", (t) => {
-      var e, s;
       if (t.key === "Tab")
         if (t.shiftKey) {
-          const l = this._getFirstTabbableElement(this._host);
-          l && t.composedPath().includes(l) && ((s = this._getLastTabbableElement(this._host)) == null || s.focus(), t.preventDefault());
+          const e = this._getFirstTabbableElement(this._host);
+          e && t.composedPath().includes(e) && (this._getLastTabbableElement(this._host)?.focus(), t.preventDefault());
         } else {
-          const l = this._getLastTabbableElement(this._host);
-          l && t.composedPath().includes(l) && ((e = this._getFirstTabbableElement(this._host)) == null || e.focus(), t.preventDefault());
+          const e = this._getLastTabbableElement(this._host);
+          e && t.composedPath().includes(e) && (this._getFirstTabbableElement(this._host)?.focus(), t.preventDefault());
         }
     }, { signal: this._abortController.signal });
   }
   /** Get the first tabbable element from a DOM subtree (inclusive). */
   _getFirstTabbableElement(t) {
-    if (t !== this._host && n.isFocusable(t) && n.isTabbable(t))
+    if (t !== this._host && i.isFocusable(t) && i.isTabbable(t))
       return t;
     const e = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
     for (let s = 0; s < e.length; s++) {
@@ -75,7 +73,7 @@ class r {
   }
   /** Get the last tabbable element from a DOM subtree (inclusive). */
   _getLastTabbableElement(t) {
-    if (t !== this._host && n.isFocusable(t) && n.isTabbable(t))
+    if (t !== this._host && i.isFocusable(t) && i.isTabbable(t))
       return t;
     const e = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
     for (let s = e.length - 1; s >= 0; s--) {
@@ -86,8 +84,7 @@ class r {
     return null;
   }
   _untrap() {
-    var t;
-    (t = this._abortController) == null || t.abort(), this._abortController = null;
+    this._abortController?.abort(), this._abortController = null;
   }
 }
 export {