@sbb-esta/lyne-elements-dev 4.7.0-dev.1773648103 → 4.7.0-dev.1773648656

package/clock/clock.component.js

@@ -1,153 +1,2 @@
-var m = (s) => {
-  throw TypeError(s);
-};
-var u = (s, n, i) => n.has(s) || m("Cannot " + i);
-var b = (s, n, i) => (u(s, n, "read from private field"), i ? i.call(s) : n.get(s)), v = (s, n, i) => n.has(s) ? m("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(s) : n.set(s, i), h = (s, n, i, d) => (u(s, n, "write to private field"), d ? d.call(s, i) : n.set(s, i), i);
-import { __runInitializers as k, __esDecorate as z } from "tslib";
-import { css as S, isServer as M, html as w } from "lit";
-import { property as C } from "lit/decorators.js";
-import { ref as _ } from "lit/directives/ref.js";
-import { SbbElement as L } from "../core/base-elements.js";
-import { boxSizingStyles as E } from "../core/styles.js";
-const A = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="var(--sbb-clock-background-color)" 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>
-`, O = `<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>
-`, T = `<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>
-`, I = `<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>
-`, N = S`:host{display:block;position:relative;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-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.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, "paused")}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration, 0s);animation-play-state:var(--sbb-clock-animation-play-state, "paused");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, "paused");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, 0s);animation-play-state:var(--sbb-clock-animation-play-state, "paused");animation-iteration-count:1}:host(:not(:is(:state(initialized),[state--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, 0deg))}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, 0deg))}97.5%,to{transform:rotate(360deg)}}`, P = 12, F = 60, p = 60, x = 50, H = 360, g = 30, U = 6, $ = 360 / 58.5, V = 60, y = 3600, D = y / 2, f = {
-  once: !0,
-  passive: !0
-};
-let Q = (() => {
-  var o, a;
-  let s = L, n, i = [], d = [];
-  return a = class extends s {
-    constructor() {
-      super(...arguments);
-      v(this, o);
-      h(this, o, k(this, i, null)), this._state = (k(this, d), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
-        this.now || (document.visibilityState === "hidden" ? await this._stopClock() : await this._startClock());
-      };
-    }
-    /**
-     * Define a specific time which the clock should show statically.
-     * @param value HH:MM:ss
-     */
-    get now() {
-      return b(this, o);
-    }
-    set now(t) {
-      h(this, o, t);
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), D * 1e3);
-    }
-    willUpdate(t) {
-      super.willUpdate(t), !M && t.has("now") && this._startOrConfigureClock();
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), M || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);
-    }
-    async _startOrConfigureClock() {
-      this.now ? (await this._stopClock(), this._resetSecondsHandAnimation(), this._setHandsStartingPosition()) : await this._startClock();
-    }
-    /** Starts the clock by defining the hands starting position then starting the animations. */
-    async _startClock() {
-      this._clockHandHours?.addEventListener("animationend", this._moveHoursHandFn, f), this._clockHandSeconds?.addEventListener("animationend", this._moveMinutesHandFn, f), await new Promise((t) => setTimeout(() => {
-        this._setHandsStartingPosition(), this.style?.setProperty("--sbb-clock-animation-play-state", "running"), this._state = "running", t();
-      }, x));
-    }
-    /** Stops the clock by removing all the animations. */
-    async _stopClock() {
-      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.
-     */
-    async _resetClock() {
-      this._state === "running" && (await this._stopClock(), await this._startClock());
-    }
-    /** Set the starting position for the three hands on the clock face. */
-    _setHandsStartingPosition() {
-      this._assignCurrentTime();
-      const t = p - this._seconds, e = F - this._minutes, c = P - this._hours;
-      let r = 0, l = 0;
-      t > 0 && (r += t, l = 1), e > 0 && (r += (e - l) * V, l = 1), c > 0 && (r += (c - l) * y), this.style?.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * g + 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 * $)}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.internals.states.add("initialized");
-    }
-    /** 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(), [e, c, r] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((l) => +l);
-      this._hours = e % 12, this._minutes = c, this._seconds = r;
-    }
-    /** Set the starting position for the minutes hand. */
-    _setMinutesHand() {
-      this._clockHandMinutes?.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * U)}deg)`);
-    }
-    /** Move the hours hand to the next value. */
-    _moveHoursHand() {
-      this._removeHoursAnimationStyles();
-      let t = Math.ceil(this._hours * g + this._minutes / 2);
-      t >= H && (t -= H), this._clockHandHours?.style.setProperty("transform", `rotateZ(${t}deg)`);
-    }
-    /** Move the minutes hand to the next value. */
-    _moveMinutesHand() {
-      this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(() => this._addMinutesAndSetHands(), p * 1e3);
-    }
-    _addMinutesAndSetHands() {
-      this._minutes++, this._setMinutesHand();
-    }
-    /**
-     * Removing animation by overriding with empty string,
-     * then triggering a reflow and re add original animation by removing override.
-     * @private
-     */
-    _resetSecondsHandAnimation() {
-      this._clockHandSeconds && (this._clockHandSeconds.style.animation = "", this._clockHandSeconds.offsetHeight, this._clockHandSeconds.style.removeProperty("animation"));
-    }
-    _removeEventListeners() {
-      document?.removeEventListener("visibilitychange", this._handlePageVisibilityChange), this._clockHandHours?.removeEventListener("animationend", this._moveHoursHandFn), this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
-    }
-    _removeHoursAnimationStyles() {
-      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() {
-      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 w`
-      <span class="sbb-clock__face" .innerHTML=${A}></span>
-      <span
-        class="sbb-clock__hand-hours"
-        .innerHTML=${O}
-        ${_((t) => {
-        this._clockHandHours = t;
-      })}
-      ></span>
-      <span
-        class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
-        .innerHTML=${T}
-        ${_((t) => {
-        this._clockHandMinutes = t;
-      })}
-      ></span>
-      <span
-        class="sbb-clock__hand-seconds"
-        .innerHTML=${I}
-        ${_((t) => {
-        this._clockHandSeconds = t;
-      })}
-      ></span>
-    `;
-    }
-  }, o = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    n = [C()], z(a, null, n, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, get: (e) => e.now, set: (e, c) => {
-      e.now = c;
-    } }, metadata: t }, i, d), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.elementName = "sbb-clock", a.styles = [E, N], a;
-})();
-export {
-  Q as SbbClockElement
-};
+import { t as e } from "../clock.component-DDaWbXHW.js";
+export { e as SbbClockElement };

package/clock.component-DDaWbXHW.js

@@ -0,0 +1,148 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r, isServer as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o } from "./core/base-elements.js";
+import { boxSizingStyles as s } from "./core/styles.js";
+import { ref as c } from "lit/directives/ref.js";
+//#region src/elements/clock/assets/sbb_clock_face.svg?raw
+var l = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><g class=\"face\"><circle fill=\"var(--sbb-clock-background-color)\" 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>\n", u = "<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>\n", d = "<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>\n", f = "<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>\n", p = n`:host{aspect-ratio:1;contain:content;display:block;position:relative;overflow:hidden}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{transform-origin:50%;transform-style:preserve-3d;backface-visibility:hidden;position:absolute;inset:0;transform:rotate(0)}.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.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-timing-function:linear;animation-iteration-count:infinite;animation-play-state:var(--sbb-clock-animation-play-state,"paused")}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration,0s);animation-play-state:var(--sbb-clock-animation-play-state,"paused");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,"paused");fill:var(--sbb-clock-seconds-hand-color);animation-iteration-count:infinite}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration,0s);animation-play-state:var(--sbb-clock-animation-play-state,"paused");animation-iteration-count:1}:host(:not(:is(:state(initialized),[state--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:rotateZ(var(--sbb-clock-hours-animation-start-angle,0deg))}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:rotateZ(var(--sbb-clock-seconds-animation-start-angle,0deg))}97.5%,to{transform:rotate(360deg)}}`, m = 12, h = 60, g = 60, _ = 50, v = 360, y = 30, b = 6, x = 360 / 58.5, S = 60, C = 3600, w = C / 2, T = {
+	once: !0,
+	passive: !0
+}, E = (() => {
+	let n = o, E, D = [], O = [];
+	return class extends n {
+		constructor() {
+			super(...arguments), this.#e = t(this, D, null), this._state = (t(this, O), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
+				this.now || (document.visibilityState === "hidden" ? await this._stopClock() : await this._startClock());
+			};
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			E = [a()], e(this, null, E, {
+				kind: "accessor",
+				name: "now",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "now" in e,
+					get: (e) => e.now,
+					set: (e, t) => {
+						e.now = t;
+					}
+				},
+				metadata: t
+			}, D, O), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-clock";
+		}
+		static {
+			this.styles = [s, p];
+		}
+		#e;
+		get now() {
+			return this.#e;
+		}
+		set now(e) {
+			this.#e = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), w * 1e3);
+		}
+		willUpdate(e) {
+			super.willUpdate(e), !i && e.has("now") && this._startOrConfigureClock();
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), i || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);
+		}
+		async _startOrConfigureClock() {
+			this.now ? (await this._stopClock(), this._resetSecondsHandAnimation(), this._setHandsStartingPosition()) : await this._startClock();
+		}
+		async _startClock() {
+			this._clockHandHours?.addEventListener("animationend", this._moveHoursHandFn, T), this._clockHandSeconds?.addEventListener("animationend", this._moveMinutesHandFn, T), await new Promise((e) => setTimeout(() => {
+				this._setHandsStartingPosition(), this.style?.setProperty("--sbb-clock-animation-play-state", "running"), this._state = "running", e();
+			}, _));
+		}
+		async _stopClock() {
+			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";
+		}
+		async _resetClock() {
+			this._state === "running" && (await this._stopClock(), await this._startClock());
+		}
+		_setHandsStartingPosition() {
+			this._assignCurrentTime();
+			let e = g - this._seconds, t = h - this._minutes, n = m - this._hours, r = 0, i = 0;
+			e > 0 && (r += e, i = 1), t > 0 && (r += (t - i) * S, i = 1), n > 0 && (r += (n - i) * C), this.style?.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * y + 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 * x)}deg`), this.style?.setProperty("--sbb-clock-seconds-animation-duration", `${e}s`), this._setMinutesHand(), this._clockHandSeconds?.classList.add("sbb-clock__hand-seconds--initial-minute"), this._clockHandHours?.classList.add("sbb-clock__hand-hours--initial-hour"), this.internals.states.add("initialized");
+		}
+		_assignCurrentTime() {
+			let e = this.now ? null : /* @__PURE__ */ new Date(), [t, n, r] = e ? [
+				e.getHours(),
+				e.getMinutes(),
+				e.getSeconds()
+			] : this.now.split(":").map((e) => +e);
+			this._hours = t % 12, this._minutes = n, this._seconds = r;
+		}
+		_setMinutesHand() {
+			this._clockHandMinutes?.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * b)}deg)`);
+		}
+		_moveHoursHand() {
+			this._removeHoursAnimationStyles();
+			let e = Math.ceil(this._hours * y + this._minutes / 2);
+			e >= v && (e -= v), this._clockHandHours?.style.setProperty("transform", `rotateZ(${e}deg)`);
+		}
+		_moveMinutesHand() {
+			this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(() => this._addMinutesAndSetHands(), g * 1e3);
+		}
+		_addMinutesAndSetHands() {
+			this._minutes++, this._setMinutesHand();
+		}
+		_resetSecondsHandAnimation() {
+			this._clockHandSeconds && (this._clockHandSeconds.style.animation = "", this._clockHandSeconds.offsetHeight, this._clockHandSeconds.style.removeProperty("animation"));
+		}
+		_removeEventListeners() {
+			document?.removeEventListener("visibilitychange", this._handlePageVisibilityChange), this._clockHandHours?.removeEventListener("animationend", this._moveHoursHandFn), this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
+		}
+		_removeHoursAnimationStyles() {
+			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() {
+			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 r`
+      <span class="sbb-clock__face" .innerHTML=${l}></span>
+      <span
+        class="sbb-clock__hand-hours"
+        .innerHTML=${u}
+        ${c((e) => {
+				this._clockHandHours = e;
+			})}
+      ></span>
+      <span
+        class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
+        .innerHTML=${d}
+        ${c((e) => {
+				this._clockHandMinutes = e;
+			})}
+      ></span>
+      <span
+        class="sbb-clock__hand-seconds"
+        .innerHTML=${f}
+        ${c((e) => {
+				this._clockHandSeconds = e;
+			})}
+      ></span>
+    `;
+		}
+	};
+})();
+//#endregion
+export { E as t };

package/clock.js

@@ -1,5 +1,6 @@
-import { SbbClockElement as e } from "./clock/clock.component.js";
+import { t as e } from "./clock.component-DDaWbXHW.js";
+import "./clock.pure.js";
+//#region src/elements/clock.ts
 e.define();
-export {
-  e as SbbClockElement
-};
+//#endregion
+export { e as SbbClockElement };

package/clock.pure.js

@@ -1,4 +1,2 @@
-import { SbbClockElement as b } from "./clock/clock.component.js";
-export {
-  b as SbbClockElement
-};
+import { t as e } from "./clock.component-DDaWbXHW.js";
+export { e as SbbClockElement };

package/common-CI_BB6sF.js

@@ -0,0 +1,5 @@
+import { css as e } from "lit";
+//#region src/elements/button/common/button-common.scss?lit&inline
+var t = e`:host{--sbb-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-button-box-shadow-definition:var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y) var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread) var(--sbb-button-shadow-2-color), var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y) var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread) var(--sbb-button-shadow-1-color);--_width:unset;--_min-height-modifier:0rem;--_border-color:var(--sbb-button-color-default-border);--_background-color:var(--sbb-button-color-default-background);--_color:var(--sbb-button-color-default-text);--_button-inset:0;--_border:calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix,1px)) solid var(--_border-color);display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-button-border-overlap-fix:0rem;--sbb-button-color-default-border:CanvasText!important;--sbb-button-color-active-border:Highlight!important;--sbb-button-color-default-background:Canvas!important;--sbb-button-color-hover-background:Canvas!important;--sbb-button-color-active-background:Canvas!important;--sbb-button-color-disabled-background:Canvas!important;--sbb-button-color-disabled-text:GrayText!important;--sbb-button-color-loading-border:Highlight!important;--sbb-button-color-default-text:CanvasText!important;--sbb-button-color-hover-text:CanvasText!important;--sbb-button-color-active-text:CanvasText!important}:host(:is(:state(button),[state--button])){--sbb-button-color-default-text:ButtonText!important;--sbb-button-color-hover-text:ButtonText!important;--sbb-button-color-active-text:ButtonText!important}:host(:is(:state(link),[state--link])){--sbb-button-color-default-text:LinkText!important;--sbb-button-color-hover-text:LinkText!important;--sbb-button-color-active-text:LinkText!important}}:host([negative]){--sbb-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-button-color-disabled-text:var(--sbb-color-aluminium)}:host([size=l]){--sbb-button-min-height:var(--sbb-button-min-height-size-l);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-l)}:host([size=m]){--sbb-button-min-height:var(--sbb-button-min-height-size-m);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-m)}:host([size=s]){--sbb-button-min-height:var(--sbb-button-min-height-size-s);--sbb-button-padding-inline:var(--sbb-button-padding-inline-size-s);--sbb-button-gap:var(--sbb-spacing-fixed-1x)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-button-padding-inline:0;--_width:calc(var(--sbb-button-min-height) + var(--_min-height-modifier))}@media (any-hover:hover){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-translate-y-content-hover:-.0625rem;--sbb-button-shadow-1-offset-y:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y));--sbb-button-shadow-1-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));--sbb-button-shadow-2-blur:calc(.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));--sbb-button-cursor:var(--sbb-cursor-pointer);--_border-color:var(--sbb-button-color-hover-border);--_color:var(--sbb-button-color-hover-text);--_background-color:var(--sbb-button-color-hover-background);--_button-inset:calc(var(--sbb-button-border-width) * -1)}}@media (forced-colors:active){:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading]):is(:hover,:is(:state(force-hover),[state--force-hover]))){--sbb-button-color-hover-border:Highlight!important}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-button-cursor:var(--sbb-cursor-default);--_color:var(--sbb-button-color-disabled-text);--_background-color:var(--sbb-button-color-disabled-background);--_border-color:var(--sbb-button-color-disabled-border);--_border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--_border-color)}:host(:not([disabled],:disabled,[disabled-interactive]):is(:active,:is(:state(active),[state--active]),[loading])){--_color:var(--sbb-button-color-active-text);--_background-color:var(--sbb-button-color-active-background);--_border-color:var(--sbb-button-color-active-border)}:host([loading]:not([disabled],:disabled,[disabled-interactive])){--_min-height-modifier:calc(-2 * var(--sbb-button-loading-border-width));--sbb-button-focus-outline-offset-override:calc(var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width));--_border:none;--_transform-style:preserve-3d}.sbb-action-base{gap:var(--sbb-button-gap);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-typo-letter-spacing-text);text-align:left;white-space:nowrap;min-height:calc(var(--sbb-button-min-height) + var(--_min-height-modifier));width:var(--_width);border-radius:var(--sbb-button-border-radius);color:var(--_color);cursor:var(--sbb-button-cursor);-webkit-user-select:none;user-select:none;background-color:var(--_background-color);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transform-style:var(--_transform-style,flat);padding-block:var(--sbb-button-padding-block-min);padding-inline:var(--sbb-button-padding-inline);outline:none;justify-content:center;align-items:center;font-weight:700;text-decoration:none;transition-property:color,background-color;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--_button-inset);border:var(--_border);border-radius:var(--sbb-button-border-radius);pointer-events:none;box-shadow:var(--sbb-button-box-shadow);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,border,box-shadow;position:absolute}:host([loading]:not([disabled],:disabled,[disabled-interactive])) .sbb-action-base{margin:var(--sbb-button-loading-border-width);padding-inline:calc(var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width));transition-property:none}:host(:is(:state(focus-visible),[state--focus-visible])) .sbb-action-base:before,:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-button-focus-outline-offset-override,var(--sbb-focus-outline-offset))}.sbb-button__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-button__label{display:none}.sbb-button__label,::slotted([slot=icon]),sbb-icon{transition:translate var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);translate:0 var(--sbb-button-translate-y-content-hover,0)}.sbb-button-loading-border{inset:calc(-1 * var(--sbb-button-loading-border-width));clip-path:border-box;border-radius:var(--sbb-button-border-radius);background:var(--_background-color);z-index:-1;contain:paint;animation:background-fade-in var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x)) var(--sbb-disable-animation-duration,var(--sbb-button-loading-delay)) linear;animation-fill-mode:forwards;position:absolute;transform:translateZ(-1px);container-type:inline-size}.sbb-button-loading-border:before{content:"";width:64cqmin;max-height:var(--sbb-button-min-height);aspect-ratio:2;background:radial-gradient(100% 100% at right, var(--sbb-button-color-active-text), transparent 50%);offset-path:border-box;offset-anchor:100% 50%;opacity:0;animation:snake-fade-in var(--sbb-disable-animation-duration,calc(var(--sbb-animation-duration-12x) * 2)) var(--sbb-disable-animation-duration,calc(var(--sbb-button-loading-delay) + var(--sbb-animation-duration-5x))) var(--sbb-animation-easing), snake-position var(--sbb-disable-animation-duration,calc(max(tan(atan2(var(--sbb-button-width), 1px)) / 136, .5) * 3s)) infinite linear;transform-style:preserve-3d;animation-fill-mode:forwards;display:block;position:absolute}@keyframes snake-position{to{offset-distance:100%}}@keyframes snake-fade-in{to{opacity:1}}@keyframes background-fade-in{to{background:var(--sbb-button-color-loading-border)}}`, n = e`:host{--sbb-button-color-active-background:var(--sbb-color-primary150);--sbb-button-color-active-border:var(--sbb-color-primary150);--sbb-button-color-active-text:var(--sbb-color-4-negative);--sbb-button-color-default-background:var(--sbb-color-primary);--sbb-button-color-default-border:var(--sbb-color-primary);--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-color-primary125);--sbb-button-color-hover-border:var(--sbb-color-primary125);--sbb-button-color-hover-text:var(--sbb-color-3-negative);--sbb-button-color-loading-border:var(--lightningcss-light,color-mix(in srgb, var(--sbb-button-color-active-background) 50%, var(--sbb-button-color-default-text)))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text)));--sbb-button-shadow-1-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-primary) 20%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-primary) 40%, transparent));--sbb-button-shadow-2-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent))}:host([negative]){--sbb-button-color-active-background:var(--sbb-color-primary150);--sbb-button-color-active-border:var(--sbb-color-primary150);--sbb-button-color-active-text:var(--sbb-color-4-negative);--sbb-button-color-default-background:var(--sbb-color-primary);--sbb-button-color-default-border:var(--sbb-color-primary);--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-color-primary125);--sbb-button-color-hover-border:var(--sbb-color-primary125);--sbb-button-color-hover-text:var(--sbb-color-3-negative);--sbb-button-color-loading-border:color-mix(in srgb, var(--sbb-button-color-active-background) 70%, var(--sbb-button-color-default-text));--sbb-button-shadow-1-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-primary) 60%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-primary) 40%, transparent));--sbb-button-shadow-2-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent))}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}`, r = e`:host{--sbb-button-color-active-background:var(--sbb-background-color-3);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:var(--lightningcss-light,var(--sbb-color-anthracite))var(--lightningcss-dark,var(--sbb-color-graphite));--sbb-button-color-default-background:var(--sbb-background-color-1);--sbb-button-color-default-border:var(--sbb-border-color-4-inverted);--sbb-button-color-default-text:var(--sbb-color-3);--sbb-button-color-hover-background:var(--sbb-background-color-1);--sbb-button-color-hover-border:var(--sbb-border-color-4-inverted);--sbb-button-color-hover-text:var(--sbb-color-4);--sbb-button-color-loading-border:var(--sbb-border-color-4-inverted);--sbb-button-shadow-1-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-cement) 20%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-border-overlap-fix:0rem}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-2-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-graphite);--sbb-button-color-default-background:var(--sbb-background-color-1-negative);--sbb-button-color-default-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-default-text:var(--sbb-color-3-negative);--sbb-button-color-hover-background:var(--sbb-background-color-1-negative);--sbb-button-color-hover-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-4-negative);--sbb-button-color-loading-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}`, i = e`:host{--sbb-button-color-active-background:var(--sbb-background-color-1-inverted);--sbb-button-color-active-border:var(--sbb-border-color-1);--sbb-button-color-active-text:var(--lightningcss-light,var(--sbb-color-cloud))var(--lightningcss-dark,var(--sbb-color-anthracite));--sbb-button-color-default-background:var(--sbb-background-color-3-inverted);--sbb-button-color-default-border:var(--sbb-border-color-3);--sbb-button-color-default-text:var(--sbb-color-1-inverted);--sbb-button-color-hover-background:var(--sbb-background-color-3-inverted);--sbb-button-color-hover-border:var(--sbb-border-color-3);--sbb-button-color-hover-text:var(--sbb-color-3-inverted);--sbb-button-color-loading-border:var(--lightningcss-light,var(--sbb-color-iron))var(--lightningcss-dark,var(--sbb-color-silver));--sbb-button-shadow-1-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-black) 30%, transparent));--sbb-button-shadow-2-color:var(--lightningcss-light,color-mix(in srgb, var(--sbb-color-cement) 20%, transparent))var(--lightningcss-dark,color-mix(in srgb, var(--sbb-color-black) 30%, transparent))}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-1-negative-inverted);--sbb-button-color-active-border:var(--sbb-border-color-1-negative);--sbb-button-color-active-text:var(--sbb-color-anthracite);--sbb-button-color-default-background:var(--sbb-background-color-3-negative-inverted);--sbb-button-color-default-border:var(--sbb-border-color-3-negative);--sbb-button-color-default-text:var(--sbb-color-1-negative-inverted);--sbb-button-color-hover-background:var(--sbb-background-color-3-negative-inverted);--sbb-button-color-hover-border:var(--sbb-border-color-3-negative);--sbb-button-color-hover-text:var(--sbb-color-4-negative-inverted);--sbb-button-color-loading-border:var(--sbb-color-silver);--sbb-button-shadow-1-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-button-shadow-2-color:color-mix(in srgb, var(--sbb-color-black) 30%, transparent)}:host(:not([disabled],:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]),[loading])){--sbb-button-box-shadow:var(--sbb-button-box-shadow-definition)}`, a = e`:host{--sbb-button-color-active-background:var(--sbb-background-color-4);--sbb-button-color-active-border:var(--sbb-border-color-4-inverted);--sbb-button-color-active-text:var(--sbb-color-1);--sbb-button-color-default-background:transparent;--sbb-button-color-default-border:transparent;--sbb-button-color-default-text:var(--sbb-color-1);--sbb-button-color-hover-background:var(--sbb-background-color-3);--sbb-button-color-hover-border:var(--sbb-border-color-3-inverted);--sbb-button-color-hover-text:var(--sbb-color-1);--sbb-button-color-loading-border:var(--lightningcss-light,var(--sbb-color-silver))var(--lightningcss-dark,var(--sbb-color-granite))}:host([negative]){--sbb-button-color-active-background:var(--sbb-background-color-4-negative);--sbb-button-color-active-border:var(--sbb-border-color-4-negative-inverted);--sbb-button-color-active-text:var(--sbb-color-1-negative);--sbb-button-color-default-background:transparent;--sbb-button-color-default-border:transparent;--sbb-button-color-default-text:var(--sbb-color-1-negative);--sbb-button-color-hover-background:var(--sbb-background-color-3-negative);--sbb-button-color-hover-border:var(--sbb-border-color-3-negative-inverted);--sbb-button-color-hover-text:var(--sbb-color-1-negative);--sbb-button-color-loading-border:var(--sbb-color-granite)}`, o = e`:host{-webkit-tap-highlight-color:transparent;--sbb-mini-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-mini-button-color-background:var(--sbb-mini-button-color-default-background);--sbb-mini-button-color:var(--sbb-mini-button-color-text);height:fit-content;display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-mini-button-color-text:ButtonText!important;--sbb-mini-button-color-hover-background:Highlight!important;--sbb-mini-button-color-active-background:Highlight!important;--sbb-mini-button-color-disabled-background:Canvas!important;--sbb-mini-button-color-disabled-border:GrayText!important;--sbb-mini-button-color-disabled-text:GrayText!important}}:host([negative]){--sbb-mini-button-color-text:var(--sbb-color-3-negative);--sbb-mini-button-color-default-background:transparent;--sbb-mini-button-color-hover-background:var(--sbb-background-color-3-negative);--sbb-mini-button-color-active-background:var(--sbb-background-color-4-negative);--sbb-mini-button-color-disabled-background:var(--sbb-background-color-3-negative);--sbb-mini-button-color-disabled-border:var(--sbb-border-color-5);--sbb-mini-button-color-disabled-text:var(--sbb-color-5)}@media (any-hover:hover){:host(:is(:hover,:is(:state(force-hover),[state--force-hover])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]),:active,:is(:state(active),[state--active]))){--sbb-mini-button-translate-y-content-hover:-.0625rem;--sbb-mini-button-color-background:var(--sbb-mini-button-color-hover-background)}}:host(:is(:active,:is(:state(active),[state--active])):not([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background:var(--sbb-mini-button-color-active-background)}:host(:is([disabled],:disabled,[disabled-interactive],:is(:state(disabled),[state--disabled]))){--sbb-mini-button-color-background:var(--sbb-mini-button-color-disabled-background);--sbb-mini-button-border:var(--sbb-border-width-1x) dashed var(--sbb-mini-button-color-disabled-border);--sbb-mini-button-color:var(--sbb-mini-button-color-disabled-text);--sbb-mini-button-pointer-events:none;--sbb-mini-button-cursor:var(--sbb-cursor-default)}:host(:is(:state(focus-visible),[state--focus-visible])){--sbb-focus-outline-style:initial}.sbb-action-base{color:var(--sbb-mini-button-color);border-radius:var(--sbb-mini-button-border-radius);-webkit-user-select:none;user-select:none;pointer-events:var(--sbb-mini-button-pointer-events,auto);cursor:var(--sbb-mini-button-cursor,var(--sbb-cursor-pointer));transition:color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);outline:none;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";border-radius:var(--sbb-mini-button-border-radius);background-color:var(--sbb-mini-button-color-background);transition-duration:var(--sbb-mini-button-transition-duration);transition-timing-function:var(--sbb-mini-button-transition-easing-function);border:var(--sbb-mini-button-border);transition-property:inset,background-color;position:absolute;inset:0}.sbb-action-base:focus-visible:before,:host(:is(:is(:state(focus-visible),[state--focus-visible]),:focus-visible)) .sbb-action-base: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)}::slotted(sbb-icon),sbb-icon{transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover,0rem);min-width:var(--_sbb-mini-button-image-size,var(--sbb-size-icon-ui-small));min-height:var(--_sbb-mini-button-image-size,var(--sbb-size-icon-ui-small));justify-content:center;align-items:center;display:flex}`, s = e`:host{--sbb-mini-button-gap:.125rem;--sbb-mini-button-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-mini-button-label-display:block;--sbb-mini-button-label-height:var(--sbb-size-icon-ui-small)}:host(:where(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--sbb-mini-button-padding-inline:0;--sbb-mini-button-label-display:none;--sbb-mini-button-label-height:unset}.sbb-action-base{height:var(--sbb-mini-button-label-height);gap:var(--sbb-mini-button-gap);padding-inline:var(--sbb-mini-button-padding-inline);justify-content:center;align-items:center}.sbb-mini-button__label{white-space:nowrap;text-overflow:ellipsis;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);display:var(--sbb-mini-button-label-display);transition:translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);translate:0 var(--sbb-mini-button-translate-y-content-hover,0);overflow:hidden}`;
+//#endregion
+export { r as a, i, o as n, n as o, a as r, t as s, s as t };

package/compact-paginator.component-BxSy5YXY.js

@@ -0,0 +1,45 @@
+import { css as e, html as t } from "lit";
+import { SbbElement as n } from "./core/base-elements.js";
+import { boxSizingStyles as r } from "./core/styles.js";
+import { i18nPage as i, i18nPaginatorOf as a } from "./core/i18n.js";
+import "./divider.js";
+import "./screen-reader-only.js";
+import { styleMap as o } from "lit/directives/style-map.js";
+import { SbbPaginatorCommonElementMixin as s } from "./paginator/common/paginator-common.js";
+//#region src/elements/paginator/compact-paginator/compact-paginator.scss?lit&inline
+var c = e`:host{--sbb-compact-paginator-height:var(--sbb-size-element-m);--sbb-compact-paginator-color:var(--lightningcss-light,var(--sbb-color-metal))var(--lightningcss-dark,var(--sbb-color-smoke));--sbb-paginator-compact-justify-content:start;display:block}:host([size=s]){--sbb-compact-paginator-height:var(--sbb-size-element-xs)}:host([negative]){--sbb-compact-paginator-color:var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content:end}.sbb-compact-paginator{gap:var(--sbb-spacing-fixed-5x);justify-content:var(--sbb-paginator-compact-justify-content);min-height:var(--sbb-compact-paginator-height);display:flex}.sbb-paginator__pages{--sbb-text-font-size:var(--sbb-text-font-size-m);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);justify-content:center;align-items:center;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-compact-paginator-color);display:flex}.sbb-compact-paginator__divider{height:1rem}`, l = class extends s(n) {
+	static {
+		this.elementName = "sbb-compact-paginator";
+	}
+	static {
+		this.styles = [r, c];
+	}
+	static {
+		this.events = { page: "page" };
+	}
+	_renderPageNumbers() {
+		return t`
+      <span class="sbb-paginator__pages" aria-hidden="true"
+        >${this.pageIndex + 1}<sbb-divider
+          orientation="vertical"
+          class="sbb-compact-paginator__divider"
+          style=${o({ "--sbb-divider-color": "currentcolor" })}
+          ?negative=${this.negative}
+        ></sbb-divider
+        >${this.numberOfPages()}</span
+      >
+      <sbb-screen-reader-only>
+        ${`${this.accessibilityPageLabel ? this.accessibilityPageLabel : i[this.language.current]} ${this.pageIndex + 1} ${a[this.language.current]} ${this.numberOfPages()}`}
+      </sbb-screen-reader-only>
+    `;
+	}
+	renderPaginator() {
+		return t`
+      <div class="sbb-compact-paginator">
+        ${this.pagerPosition === "start" ? t`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}` : t`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
+      </div>
+    `;
+	}
+};
+//#endregion
+export { l as t };

package/container/container/container.component.js

@@ -1,76 +1,2 @@
-var w = (t) => {
-  throw TypeError(t);
-};
-var z = (t, a, s) => a.has(t) || w("Cannot " + s);
-var p = (t, a, s) => (z(t, a, "read from private field"), s ? s.call(t) : a.get(t)), g = (t, a, s) => a.has(t) ? w("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), u = (t, a, s, i) => (z(t, a, "write to private field"), i ? i.call(t, s) : a.set(t, s), s);
-import { __esDecorate as h, __runInitializers as n } from "tslib";
-import { css as S, html as I } from "lit";
-import { property as m } from "lit/decorators.js";
-import { SbbElement as B } from "../../core/base-elements.js";
-import { forceType as E } from "../../core/decorators.js";
-import { ɵstateController as U } from "../../core/mixins.js";
-import { boxSizingStyles as j } from "../../core/styles.js";
-const O = S`@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 K = (() => {
-  var d, c, l, r;
-  let t = B, a, s = [], i = [], x, k = [], v = [], f, _ = [], y = [];
-  return r = class extends t {
-    constructor() {
-      super(...arguments);
-      g(this, d, n(this, s, !1));
-      g(this, c, (n(this, i), n(this, k, !1)));
-      g(this, l, (n(this, v), n(this, _, "white")));
-      n(this, y);
-    }
-    /** Whether the container is expanded. */
-    get expanded() {
-      return p(this, d);
-    }
-    set expanded(o) {
-      u(this, d, o);
-    }
-    /** Whether the background color is shown on full container width on large screens. */
-    get backgroundExpanded() {
-      return p(this, c);
-    }
-    set backgroundExpanded(o) {
-      u(this, c, o);
-    }
-    /** Color of the container, like transparent, white etc. */
-    get color() {
-      return p(this, l);
-    }
-    set color(o) {
-      u(this, l, o);
-    }
-    willUpdate(o) {
-      if (super.willUpdate(o), o.has("expanded")) {
-        const e = this.querySelector?.("sbb-sticky-bar");
-        U(e)?.toggle("expanded", this.expanded);
-      }
-    }
-    render() {
-      return I`
-      <div class="sbb-container">
-        <slot name="image"></slot>
-        <div class="sbb-container__content">
-          <slot></slot>
-        </div>
-      </div>
-      <slot name="sticky-bar"></slot>
-    `;
-    }
-  }, d = new WeakMap(), c = new WeakMap(), l = new WeakMap(), (() => {
-    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
-    a = [E(), m({ type: Boolean, reflect: !0 })], x = [E(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], f = [m({ reflect: !0 })], h(r, null, a, { 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 }, s, i), h(r, null, x, { 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 }, k, v), h(r, null, f, { 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 }, _, y), o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), r.elementName = "sbb-container", r.styles = [j, O], r;
-})();
-export {
-  K as SbbContainerElement
-};
+import { t as e } from "../../container.component-DXFIvseq.js";
+export { e as SbbContainerElement };

package/container/container.js

@@ -1,7 +1,4 @@
-import { SbbContainerElement as e } from "./container/container.component.js";
-e.define();
-console.warn(`The entrypoint '@sbb-esta/elements/container/container.js' has been deprecated.
-Use either '@sbb-esta/elements/container.js' or '@sbb-esta/elements/container.pure.js' instead.`);
-export {
-  e as SbbContainerElement
-};
+import { t as e } from "../container.component-DXFIvseq.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/container/container.js' has been deprecated.\nUse either '@sbb-esta/elements/container.js' or '@sbb-esta/elements/container.pure.js' instead.");
+//#endregion
+export { e as SbbContainerElement };