@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/clock.js

@@ -1,156 +1,156 @@
-import { css as u, LitElement as _, html as M } from "lit";
-import { property as p, customElement as v } from "lit/decorators.js";
-import { ref as c } from "lit/directives/ref.js";
-const f = `<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>
-`, k = `<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>
-`, z = `<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>
-`, g = `<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>
+import { css as u, LitElement as b, html as v } from "lit";
+import { property as M, customElement as k } from "lit/decorators.js";
+import { ref as l } from "lit/directives/ref.js";
+const p = `<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>
+`, H = `<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>
+`, z = `<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>
 `, y = u`*,: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 .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)}}`;
-var w = Object.defineProperty, L = Object.getOwnPropertyDescriptor, m = (t, s, a, n) => {
-  for (var i = n > 1 ? void 0 : n ? L(s, a) : s, o = t.length - 1, e; o >= 0; o--)
-    (e = t[o]) && (i = (n ? e(s, a, i) : e(i)) || i);
-  return n && i && w(s, a, i), i;
+var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, _ = (t, s, o, i) => {
+  for (var n = i > 1 ? void 0 : i ? S(s, o) : s, e = t.length - 1, a; e >= 0; e--)
+    (a = t[e]) && (n = (i ? a(s, o, n) : a(n)) || n);
+  return i && n && f(s, o, n), n;
 };
-const E = 12, O = 60, r = 60, S = 50, h = 360, d = 30, N = 6, T = 360 / 58.5, A = 60, C = 3600, b = {
+const w = 12, L = 60, r = 60, E = 50, d = 360, h = 30, C = 6, A = 360 / 58.5, O = 60, P = 3600, m = {
   once: !0,
   passive: !0
 };
-let l = class extends _ {
+let c = class extends b {
   constructor() {
-    super(...arguments), this.now = null, this.h = () => this.r(), this.f = () => this.s();
+    super(...arguments), this.now = null, this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand();
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("now") && (this.now ? (this.j(), this.k(), this.l()) : this.m());
+    super.willUpdate(t), t.has("now") && (this.now ? (this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), this._stopClock()) : this._startClock());
   }
-  async n() {
-    document.visibilityState === "hidden" ? await this.l() : this.now || await this.m();
+  async _handlePageVisibilityChange() {
+    document.visibilityState === "hidden" ? await this._stopClock() : this.now || await this._startClock();
   }
-  t() {
-    document.addEventListener("visibilitychange", () => this.n(), !1);
+  _addEventListeners() {
+    document.addEventListener("visibilitychange", () => this._handlePageVisibilityChange(), !1);
   }
-  u() {
+  _removeEventListeners() {
     var t, s;
     document.removeEventListener(
       "visibilitychange",
-      () => this.n(),
+      () => this._handlePageVisibilityChange(),
       !1
-    ), (t = this.a) == null || t.removeEventListener("animationend", this.h), (s = this.b) == null || s.removeEventListener("animationend", this.f), clearInterval(this.i);
+    ), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (s = this._clockHandSeconds) == null || s.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
   }
-  k() {
+  _removeHoursAnimationStyles() {
     var t;
-    (t = this.a) == 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");
+    (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");
   }
-  j() {
+  _removeSecondsAnimationStyles() {
     var t, s;
-    (t = this.b) == null || t.classList.remove("sbb-clock__hand-seconds--initial-minute"), (s = this.d) == 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");
+    (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");
   }
   /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
-  v() {
-    const t = this.now ? null : /* @__PURE__ */ new Date(), [s, a, n] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((i) => +i);
-    this.e = s % 12, this.c = a, this.g = n;
+  _assignCurrentTime() {
+    const t = this.now ? null : /* @__PURE__ */ new Date(), [s, o, i] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((n) => +n);
+    this._hours = s % 12, this._minutes = o, this._seconds = i;
   }
   /** Set the starting position for the three hands on the clock face. */
-  o() {
-    var o, e;
-    this.v();
-    const t = r - this.g, s = O - this.c, a = E - this.e;
-    let n = 0, i = 0;
-    t > 0 && (n += t, i = 1), s > 0 && (n += (s - i) * A, i = 1), a > 0 && (n += (a - i) * C), this.style.setProperty(
+  _setHandsStartingPosition() {
+    var e, a;
+    this._assignCurrentTime();
+    const t = r - this._seconds, s = L - this._minutes, o = w - this._hours;
+    let i = 0, n = 0;
+    t > 0 && (i += t, n = 1), s > 0 && (i += (s - n) * O, n = 1), o > 0 && (i += (o - n) * P), this.style.setProperty(
       "--sbb-clock-hours-animation-start-angle",
-      `${Math.ceil(this.e * d + this.c / 2)}deg`
-    ), this.style.setProperty("--sbb-clock-hours-animation-duration", `${n}s`), this.style.setProperty(
+      `${Math.ceil(this._hours * h + this._minutes / 2)}deg`
+    ), this.style.setProperty("--sbb-clock-hours-animation-duration", `${i}s`), this.style.setProperty(
       "--sbb-clock-seconds-animation-start-angle",
-      `${Math.ceil(this.g * T)}deg`
-    ), this.style.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this.p(), (o = this.b) == null || o.classList.add("sbb-clock__hand-seconds--initial-minute"), (e = this.a) == null || e.classList.add("sbb-clock__hand-hours--initial-hour"), this.style.setProperty("--sbb-clock-animation-play-state", "running"), this.toggleAttribute("data-initialized", !0);
+      `${Math.ceil(this._seconds * A)}deg`
+    ), this.style.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), (e = this._clockHandSeconds) == null || e.classList.add("sbb-clock__hand-seconds--initial-minute"), (a = this._clockHandHours) == null || a.classList.add("sbb-clock__hand-hours--initial-hour"), this.style.setProperty("--sbb-clock-animation-play-state", "running"), this.toggleAttribute("data-initialized", !0);
   }
   /** Set the starting position for the minutes hand. */
-  p() {
+  _setMinutesHand() {
     var t;
-    (t = this.d) == null || t.style.setProperty(
+    (t = this._clockHandMinutes) == null || t.style.setProperty(
       "transform",
-      `rotateZ(${Math.ceil(this.c * N)}deg)`
+      `rotateZ(${Math.ceil(this._minutes * C)}deg)`
     );
   }
   /** Move the hours hand to the next value. */
-  r() {
+  _moveHoursHand() {
     var s;
-    this.k();
-    let t = Math.ceil(this.e * d + this.c / 2);
-    t >= h && (t -= h), (s = this.a) == null || s.style.setProperty("transform", `rotateZ(${t}deg)`);
+    this._removeHoursAnimationStyles();
+    let t = Math.ceil(this._hours * h + this._minutes / 2);
+    t >= d && (t -= d), (s = this._clockHandHours) == null || s.style.setProperty("transform", `rotateZ(${t}deg)`);
   }
   /** Move the minutes hand to the next value. */
-  s() {
+  _moveMinutesHand() {
     var t;
-    (t = this.b) == null || t.removeEventListener("animationend", this.f), this.j(), this.q(), this.i = setInterval(
-      () => this.q(),
+    (t = this._clockHandSeconds) == null || t.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(
+      () => this._addMinutesAndSetHands(),
       r * 1e3
     );
   }
-  q() {
-    this.c++, this.p();
+  _addMinutesAndSetHands() {
+    this._minutes++, this._setMinutesHand();
   }
   /** Stops the clock by removing all the animations. */
-  async l() {
-    var t, s, a, n, i;
-    clearInterval(this.i), this.now ? (this.o(), await new Promise((o) => setTimeout(o)), (t = this.b) == null || t.classList.add("sbb-clock__hand-seconds--initial-minute"), (s = this.a) == null || s.classList.add("sbb-clock__hand-hours--initial-hour")) : (this.j(), this.k()), (a = this.a) == null || a.removeEventListener("animationend", this.h), (n = this.b) == null || n.removeEventListener("animationend", this.f), (i = this.d) == null || i.classList.add("sbb-clock__hand-minutes--no-transition"), this.style.setProperty("--sbb-clock-animation-play-state", "paused");
+  async _stopClock() {
+    var t, s, o, i, n;
+    clearInterval(this._handMovement), this.now ? (this._setHandsStartingPosition(), await new Promise((e) => setTimeout(e)), (t = this._clockHandSeconds) == null || t.classList.add("sbb-clock__hand-seconds--initial-minute"), (s = this._clockHandHours) == null || s.classList.add("sbb-clock__hand-hours--initial-hour")) : (this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles()), (o = this._clockHandHours) == null || o.removeEventListener("animationend", this._moveHoursHandFn), (i = this._clockHandSeconds) == null || i.removeEventListener("animationend", this._moveMinutesHandFn), (n = this._clockHandMinutes) == null || n.classList.add("sbb-clock__hand-minutes--no-transition"), this.style.setProperty("--sbb-clock-animation-play-state", "paused");
   }
   /** Starts the clock by defining the hands starting position then starting the animations. */
-  async m() {
+  async _startClock() {
     var t, s;
-    (t = this.a) == null || t.addEventListener(
+    (t = this._clockHandHours) == null || t.addEventListener(
       "animationend",
-      this.h,
-      b
-    ), (s = this.b) == null || s.addEventListener(
+      this._moveHoursHandFn,
+      m
+    ), (s = this._clockHandSeconds) == null || s.addEventListener(
       "animationend",
-      this.f,
-      b
+      this._moveMinutesHandFn,
+      m
     ), await new Promise(
-      () => setTimeout(() => this.o(), S)
+      () => setTimeout(() => this._setHandsStartingPosition(), E)
     );
   }
   async firstUpdated(t) {
-    super.firstUpdated(t), this.t(), this.now ? await this.l() : await this.m();
+    super.firstUpdated(t), this._addEventListeners(), this.now ? await this._stopClock() : await this._startClock();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.u();
+    super.disconnectedCallback(), this._removeEventListeners();
   }
   render() {
-    return M`
+    return v`
       <div class="sbb-clock">
-        <span class="sbb-clock__face" .innerHTML=${f}></span>
+        <span class="sbb-clock__face" .innerHTML=${p}></span>
         <span
           class="sbb-clock__hand-hours"
-          .innerHTML=${k}
-          ${c((t) => {
-      this.a = t;
+          .innerHTML=${H}
+          ${l((t) => {
+      this._clockHandHours = t;
     })}
         ></span>
         <span
           class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
-          .innerHTML=${z}
-          ${c((t) => {
-      this.d = t;
+          .innerHTML=${g}
+          ${l((t) => {
+      this._clockHandMinutes = t;
     })}
         ></span>
         <span
           class="sbb-clock__hand-seconds"
-          .innerHTML=${g}
-          ${c((t) => {
-      this.b = t;
+          .innerHTML=${z}
+          ${l((t) => {
+      this._clockHandSeconds = t;
     })}
         ></span>
       </div>
     `;
   }
 };
-l.styles = y;
-m([
-  p()
-], l.prototype, "now", 2);
-l = m([
-  v("sbb-clock")
-], l);
+c.styles = y;
+_([
+  M()
+], c.prototype, "now", 2);
+c = _([
+  k("sbb-clock")
+], c);
 export {
-  l as SbbClockElement
+  c as SbbClockElement
 };

package/container/sticky-bar.js

@@ -3,33 +3,33 @@ import { property as v, customElement as p } from "lit/decorators.js";
 import { hostAttributes as k } from "../core/decorators.js";
 import { AgnosticIntersectionObserver as h } from "../core/observers.js";
 const y = d`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);display:contents}:host([data-sticking]){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) )}:host([data-sticking][color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking][color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}.sbb-sticky-bar__wrapper{position:sticky;inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index)}.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))}}:host([data-expanded]) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);transition:background-color var(--sbb-sticky-bar-fade-out-animation-duration) var(--sbb-sticky-bar-animation-easing);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius)}:host([data-sticking]) .sbb-sticky-bar__wrapper:after{transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]) .sbb-sticky-bar__wrapper:after{border-block-start:var(--sbb-border-width-1x) solid CanvasText;border-radius:0}}.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-fade-out-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]) .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);transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration)}: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:transparent;pointer-events:none;transition:background-color var(--sbb-sticky-bar-fade-out-animation-duration) var(--sbb-sticky-bar-animation-easing)}:host([data-sticking]) .sbb-sticky-bar__intersector:after{transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration);background-color:var(--sbb-sticky-bar-sticky-background-color)}`;
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (a, t, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? f(t, i) : t, o = a.length - 1, e; o >= 0; o--)
-    (e = a[o]) && (s = (r ? e(t, i, s) : e(s)) || s);
-  return r && s && u(t, i, s), s;
+var u = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (a, s, e, r) => {
+  for (var t = r > 1 ? void 0 : r ? g(s, e) : s, o = a.length - 1, b; o >= 0; o--)
+    (b = a[o]) && (t = (r ? b(s, e, t) : b(t)) || t);
+  return r && t && u(s, e, t), t;
 };
-let b = class extends c {
+let i = class extends c {
   constructor() {
-    super(...arguments), this.b = new h(
-      (a) => this.c(a[0])
+    super(...arguments), this._observer = new h(
+      (a) => this._toggleShadowVisibility(a[0])
     );
   }
   connectedCallback() {
     super.connectedCallback();
     const a = this.closest("sbb-container");
-    a && this.toggleAttribute("data-expanded", a.expanded), this.a && this.b.observe(this.a);
+    a && this.toggleAttribute("data-expanded", a.expanded), this._intersector && this._observer.observe(this._intersector);
   }
   firstUpdated(a) {
-    super.firstUpdated(a), this.a || (this.a = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this.b.observe(this.a)), this.b.observe(this);
+    super.firstUpdated(a), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
   }
-  c(a) {
+  _toggleShadowVisibility(a) {
     this.toggleAttribute(
       "data-sticking",
       !a.isIntersecting && a.boundingClientRect.top > 0
     );
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.b.disconnect();
+    super.disconnectedCallback(), this._observer.disconnect();
   }
   render() {
     return l`
@@ -42,16 +42,16 @@ let b = class extends c {
     `;
   }
 };
-b.styles = y;
+i.styles = y;
 n([
   v({ reflect: !0 })
-], b.prototype, "color", 2);
-b = n([
+], i.prototype, "color", 2);
+i = n([
   p("sbb-sticky-bar"),
   k({
     slot: "sticky-bar"
   })
-], b);
+], i);
 export {
-  b as SbbStickyBarElement
+  i as SbbStickyBarElement
 };