@sbb-esta/lyne-elements 3.12.0 → 4.0.0-next

package/clock/clock.component.js

@@ -3,19 +3,20 @@ var M = (s) => {
 };
 var g = (s, n, e) => n.has(s) || M("Cannot " + e);
 var p = (s, n, e) => (g(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, a) => (g(s, n, "write to private field"), a ? a.call(s, e) : n.set(s, e), e);
-import { __runInitializers as _, __esDecorate as f } from "tslib";
-import { css as E, LitElement as A, isServer as y, html as O } from "lit";
+import { __runInitializers as _, __esDecorate as y } from "tslib";
+import { css as E, LitElement as A, isServer as f, html as O } from "lit";
 import { customElement as T, property as I } from "lit/decorators.js";
 import { ref as m } from "lit/directives/ref.js";
-const N = `<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>
-`, 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>
-`, x = `<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>
-`, 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>
-`, 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-brand);--sbb-clock-face-color: var(--sbb-color-1);--sbb-clock-background-color: var(--sbb-background-color-1);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-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)}.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, z = 60, V = 50, S = 360, w = 30, G = 6, R = 360 / 58.5, B = 60, L = 3600, K = L / 2, C = {
+import { boxSizingStyles as N } from "../core/styles.js";
+const P = `<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>
+`, x = `<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>
+`, U = `<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>
+`, $ = E`: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-brand);--sbb-clock-face-color: var(--sbb-color-1);--sbb-clock-background-color: var(--sbb-background-color-1);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-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)}.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)}}`, D = 12, V = 60, z = 60, G = 50, S = 360, w = 30, R = 6, B = 360 / 58.5, K = 60, L = 3600, j = L / 2, C = {
   once: !0,
   passive: !0
 };
-let X = (() => {
+let tt = (() => {
   var c, o;
   let s = [T("sbb-clock")], n, e = [], a, u = A, b, k = [], v = [];
   return o = class extends u {
@@ -37,13 +38,13 @@ let X = (() => {
       h(this, c, t);
     }
     connectedCallback() {
-      super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), K * 1e3);
+      super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), j * 1e3);
     }
     willUpdate(t) {
-      super.willUpdate(t), !y && t.has("now") && this._startOrConfigureClock();
+      super.willUpdate(t), !f && t.has("now") && this._startOrConfigureClock();
     }
     firstUpdated(t) {
-      super.firstUpdated(t), y || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
+      super.firstUpdated(t), f || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
     }
     disconnectedCallback() {
       super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);
@@ -55,7 +56,7 @@ let X = (() => {
     async _startClock() {
       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));
+      }, G));
     }
     /** Stops the clock by removing all the animations. */
     async _stopClock() {
@@ -70,9 +71,9 @@ let X = (() => {
     /** Set the starting position for the three hands on the clock face. */
     _setHandsStartingPosition() {
       this._assignCurrentTime();
-      const t = z - this._seconds, i = D - this._minutes, l = $ - this._hours;
+      const t = z - this._seconds, i = V - this._minutes, l = D - this._hours;
       let r = 0, d = 0;
-      t > 0 && (r += t, d = 1), i > 0 && (r += (i - 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);
+      t > 0 && (r += t, d = 1), i > 0 && (r += (i - d) * K, 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 * B)}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() {
@@ -81,7 +82,7 @@ let X = (() => {
     }
     /** Set the starting position for the minutes hand. */
     _setMinutesHand() {
-      this._clockHandMinutes?.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * G)}deg)`);
+      this._clockHandMinutes?.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * R)}deg)`);
     }
     /** Move the hours hand to the next value. */
     _moveHoursHand() {
@@ -116,24 +117,24 @@ let X = (() => {
     render() {
       return O`
       <div class="sbb-clock">
-        <span class="sbb-clock__face" .innerHTML=${N}></span>
+        <span class="sbb-clock__face" .innerHTML=${P}></span>
         <span
           class="sbb-clock__hand-hours"
-          .innerHTML=${P}
+          .innerHTML=${x}
           ${m((t) => {
         this._clockHandHours = t;
       })}
         ></span>
         <span
           class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
-          .innerHTML=${x}
+          .innerHTML=${F}
           ${m((t) => {
         this._clockHandMinutes = t;
       })}
         ></span>
         <span
           class="sbb-clock__hand-seconds"
-          .innerHTML=${F}
+          .innerHTML=${U}
           ${m((t) => {
         this._clockHandSeconds = t;
       })}
@@ -143,11 +144,11 @@ let X = (() => {
     }
   }, c = new WeakMap(), a = o, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    b = [I()], f(o, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (i) => "now" in i, get: (i) => i.now, set: (i, l) => {
+    b = [I()], y(o, null, b, { kind: "accessor", name: "now", static: !1, private: !1, access: { has: (i) => "now" in i, get: (i) => i.now, set: (i, l) => {
       i.now = l;
-    } }, metadata: t }, k, v), f(null, n = { value: a }, s, { kind: "class", name: a.name, metadata: t }, null, e), a = n.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = U, _(a, e), a;
+    } }, metadata: t }, k, v), y(null, n = { value: a }, s, { kind: "class", name: a.name, metadata: t }, null, e), a = n.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.styles = [N, $], _(a, e), a;
 })();
 export {
-  X as SbbClockElement
+  tt as SbbClockElement
 };

package/container/container/container.component.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+declare const SbbContainerElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
 /**
  * It displays its content with the default page spacing.
  *
@@ -6,7 +7,7 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit'
  * @slot sticky-bar - The slot used by the sbb-sticky-bar component.
  * @slot image - The slot used to slot an `sbb-image` to use as background.
  */
-export declare class SbbContainerElement extends LitElement {
+export declare class SbbContainerElement extends SbbContainerElement_base {
     static styles: CSSResultGroup;
     /** Whether the container is expanded. */
     accessor expanded: boolean;
@@ -22,4 +23,5 @@ declare global {
         'sbb-container': SbbContainerElement;
     }
 }
+export {};
 //# sourceMappingURL=container.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"container.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/container/container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;GAMG;AACH,qBAGM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,yCAAyC;IACzC,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,sFAAsF;IACtF,SAEgB,kBAAkB,EAAE,OAAO,CAAS;IAEpD,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,aAAa,GACb,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,CAAW;cAEN,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
+{"version":3,"file":"container.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/container/container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AASb;;;;;;GAMG;AACH,qBAEM,mBAAoB,SAAQ,wBAAoC;IACpE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,yCAAyC;IACzC,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,sFAAsF;IACtF,SAEgB,kBAAkB,EAAE,OAAO,CAAS;IAEpD,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,aAAa,GACb,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,CAAW;cAEN,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/container/container/container.component.js

@@ -1,44 +1,46 @@
 var I = (e) => {
   throw TypeError(e);
 };
-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), g = (e, t, r, n) => (D(e, t, "write to private field"), n ? n.call(e, r) : t.set(e, r), r);
+var D = (e, a, s) => a.has(e) || I("Cannot " + s);
+var p = (e, a, s) => (D(e, a, "read from private field"), s ? s.call(e) : a.get(e)), g = (e, a, s) => a.has(e) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, s), u = (e, a, s, r) => (D(e, a, "write to private field"), r ? r.call(e, s) : a.set(e, s), s);
 import { __esDecorate as h, __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(: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([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-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([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 c, d, l, s;
-  let e = [O("sbb-container"), q()], t, r = [], n, x = j, v, k = [], _ = [], f, y = [], E = [], w, z = [], S = [];
-  return s = class extends x {
+import { forceType as T } from "../../core/decorators.js";
+import { SbbElementInternalsMixin as q } from "../../core/mixins.js";
+import { boxSizingStyles as A } from "../../core/styles.js";
+const C = U`@charset "UTF-8";:host{--sbb-container-background-border-radius: 0;--sbb-container-color: inherit;display:block}:host(:is(:not([color]),[color=white])){--sbb-container-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-container-background-color: var(--sbb-background-color-3)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-1-negative)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-background-color-1-negative)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-background-color-2-negative)}:host(:is(:state(slotted-image),[state--slotted-image])){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host(:is(:state(slotted-image),[state--slotted-image])[background-expanded]){position:relative}@media(min-width:90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-container{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}:host(:is(:state(slotted-image),[state--slotted-image]):not([background-expanded])) .sbb-container{position:relative}:host(:is(:state(slotted-image),[state--slotted-image])) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}`;
+let P = (() => {
+  var c, d, l, n;
+  let e = [O("sbb-container")], a, s = [], r, x = q(j), v, k = [], _ = [], f, y = [], E = [], w, S = [], z = [];
+  return n = class extends x {
     constructor() {
       super(...arguments);
-      u(this, c, i(this, k, !1));
-      u(this, d, (i(this, _), i(this, y, !1)));
-      u(this, l, (i(this, E), i(this, z, "white")));
-      i(this, S);
+      g(this, c, i(this, k, !1));
+      g(this, d, (i(this, _), i(this, y, !1)));
+      g(this, l, (i(this, E), i(this, S, "white")));
+      i(this, z);
     }
     /** Whether the container is expanded. */
     get expanded() {
       return p(this, c);
     }
     set expanded(o) {
-      g(this, c, o);
+      u(this, c, o);
     }
     /** Whether the background color is shown on full container width on large screens. */
     get backgroundExpanded() {
       return p(this, d);
     }
     set backgroundExpanded(o) {
-      g(this, d, o);
+      u(this, d, o);
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
       return p(this, l);
     }
     set color(o) {
-      g(this, l, o);
+      u(this, l, o);
     }
     willUpdate(o) {
       super.willUpdate(o), o.has("expanded") && this.querySelector?.("sbb-sticky-bar")?.toggleAttribute("data-expanded", this.expanded);
@@ -54,17 +56,17 @@ let K = (() => {
       <slot name="sticky-bar"></slot>
     `;
     }
-  }, c = new WeakMap(), d = new WeakMap(), l = new WeakMap(), n = s, (() => {
+  }, c = new WeakMap(), d = new WeakMap(), l = new WeakMap(), r = n, (() => {
     const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    v = [T(), m({ type: Boolean, reflect: !0 })], f = [T(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [m({ reflect: !0 })], h(s, null, v, { 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 }, k, _), h(s, 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, E), h(s, null, w, { 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), h(null, t = { value: n }, e, { kind: "class", name: n.name, metadata: o }, null, r), n = t.value, o && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), s.styles = A, i(n, r), n;
+    v = [T(), m({ type: Boolean, reflect: !0 })], f = [T(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], w = [m({ reflect: !0 })], h(n, null, v, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, b) => {
+      t.expanded = b;
+    } }, metadata: o }, k, _), h(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (t) => "backgroundExpanded" in t, get: (t) => t.backgroundExpanded, set: (t, b) => {
+      t.backgroundExpanded = b;
+    } }, metadata: o }, y, E), h(n, null, w, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (t) => "color" in t, get: (t) => t.color, set: (t, b) => {
+      t.color = b;
+    } }, metadata: o }, S, z), h(null, a = { value: r }, e, { kind: "class", name: r.name, metadata: o }, null, s), r = a.value, o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), n.styles = [A, C], i(r, s), r;
 })();
 export {
-  K as SbbContainerElement
+  P as SbbContainerElement
 };

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

@@ -1 +1 @@
-{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAUb;;;;;;;;;;GAUG;AACH,qBAEM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;cAMzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,yBAAyB;IAKjC,OAAO,CAAC,2BAA2B;cAKhB,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAWb;;;;;;;;;;GAUG;AACH,qBAEM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;cAMzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,yBAAyB;IAKjC,OAAO,CAAC,2BAA2B;cAKhB,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

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

@@ -1,24 +1,25 @@
-var w = (a) => {
+var x = (a) => {
   throw TypeError(a);
 };
-var x = (a, s, e) => s.has(a) || w("Cannot " + e);
-var k = (a, s, e) => (x(a, s, "read from private field"), e ? e.call(a) : s.get(a)), u = (a, s, e) => s.has(a) ? w("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, e), d = (a, s, e, r) => (x(a, s, "write to private field"), r ? r.call(a, e) : s.set(a, e), e);
-import { __runInitializers as l, __esDecorate as h } from "tslib";
+var w = (a, i, e) => i.has(a) || x("Cannot " + e);
+var k = (a, i, e) => (w(a, i, "read from private field"), e ? e.call(a) : i.get(a)), u = (a, i, e) => i.has(a) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, e), d = (a, i, e, r) => (w(a, i, "write to private field"), r ? r.call(a, e) : i.set(a, e), e);
+import { __runInitializers as l, __esDecorate as y } from "tslib";
 import { IntersectionController as S } from "@lit-labs/observers/intersection-controller.js";
 import { css as A, LitElement as C, html as R } from "lit";
 import { customElement as B, property as z } from "lit/decorators.js";
 import { isLean as I, isZeroAnimationDuration as D } from "../../core/dom.js";
 import { SbbUpdateSchedulerMixin as U } from "../../core/mixins.js";
-const T = A`*,: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-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host([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-background-color-1)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}: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-page-spacing-padding, 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:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-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-color-soft-2),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-color-soft-1)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
-let M = (() => {
-  var n, b, o;
-  let a = [B("sbb-sticky-bar")], s, e = [], r, y = U(C), v, g = [], m = [], p, _ = [], f = [];
-  return o = class extends y {
+import { boxSizingStyles as T } from "../../core/styles.js";
+const H = A`: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-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host([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-background-color-1)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}: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-page-spacing-padding, 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:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-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-box-shadow-level-11-soft)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
+let $ = (() => {
+  var o, b, n;
+  let a = [B("sbb-sticky-bar")], i, e = [], r, h = U(C), g, m = [], v = [], p, _ = [], f = [];
+  return n = class extends h {
     constructor() {
       super(...arguments);
-      u(this, n);
+      u(this, o);
       u(this, b);
-      d(this, n, l(this, g, null)), d(this, b, (l(this, m), l(this, _, I() ? "s" : "m"))), this._intersector = l(this, f), this._observer = new S(this, {
+      d(this, o, l(this, m, null)), d(this, b, (l(this, v), l(this, _, I() ? "s" : "m"))), this._intersector = l(this, f), this._observer = new S(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -27,10 +28,10 @@ let M = (() => {
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
-      return k(this, n);
+      return k(this, o);
     }
     set color(t) {
-      d(this, n, t);
+      d(this, o, t);
     }
     /**
      * Size of the container.
@@ -65,8 +66,8 @@ let M = (() => {
     }
     _detectStickyState(t) {
       this.toggleAttribute("data-initialized", !0);
-      const i = !t.isIntersecting && t.boundingClientRect.top > 0, c = this._intersector?.getBoundingClientRect(), E = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
-      this.toggleAttribute("data-slide-vertically", i && this._intersector && Math.abs(c.bottom - E.bottom) > 30), this.toggleAttribute("data-sticking", i), this.completeUpdate();
+      const s = !t.isIntersecting && t.boundingClientRect.top > 0, c = this._intersector?.getBoundingClientRect(), E = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+      this.toggleAttribute("data-slide-vertically", s && this._intersector && Math.abs(c.bottom - E.bottom) > 30), this.toggleAttribute("data-sticking", s), this.completeUpdate();
     }
     /** Animates from normal content flow position to `position: sticky`. */
     stick() {
@@ -101,14 +102,14 @@ let M = (() => {
       <div class="sbb-sticky-bar__intersector"></div>
     `;
     }
-  }, n = new WeakMap(), b = new WeakMap(), r = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    v = [z({ reflect: !0 })], p = [z({ reflect: !0 })], h(o, null, v, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, c) => {
-      i.color = c;
-    } }, metadata: t }, g, m), h(o, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, c) => {
-      i.size = c;
-    } }, metadata: t }, _, f), h(null, s = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), r = s.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.styles = T, o.events = {
+  }, o = new WeakMap(), b = new WeakMap(), r = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    g = [z({ reflect: !0 })], p = [z({ reflect: !0 })], y(n, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (s) => "color" in s, get: (s) => s.color, set: (s, c) => {
+      s.color = c;
+    } }, metadata: t }, m, v), y(n, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (s) => "size" in s, get: (s) => s.size, set: (s, c) => {
+      s.size = c;
+    } }, metadata: t }, _, f), y(null, i = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.styles = [T, H], n.events = {
     beforestick: "beforestick",
     stick: "stick",
     beforeunstick: "beforeunstick",
@@ -116,5 +117,5 @@ let M = (() => {
   }, l(r, e), r;
 })();
 export {
-  M as SbbStickyBarElement
+  $ as SbbStickyBarElement
 };

package/core/controllers/media-matchers-controller.d.ts

@@ -4,8 +4,8 @@ export declare const SbbMediaQueryForcedColors = "(forced-colors: active)";
 export declare const SbbMediaQueryDarkMode = "(prefers-color-scheme: dark)";
 export declare const SbbMediaQueryHover = "(any-hover: hover)";
 export declare const SbbMediaQueryPointerCoarse = "(pointer: coarse)";
-export declare const SbbMediaQueryBreakpointMediumAndAbove: string;
-export declare const SbbMediaQueryBreakpointMediumAndBelow: string;
+export declare const SbbMediaQueryBreakpointLargeAndAbove: string;
+export declare const SbbMediaQueryBreakpointLargeAndBelow: string;
 export declare const SbbMediaQueryBreakpointSmallAndBelow: string;
 /**
  * A callback, which is invoked when the associated media query match

package/core/controllers/media-matchers-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-matchers-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/media-matchers-controller.ts"],"names":[],"mappings":"AAMA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAKjE,eAAO,MAAM,yBAAyB,4BAA4B,CAAC;AACnE,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;AACpE,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,0BAA0B,sBAAsB,CAAC;AAC9D,eAAO,MAAM,qCAAqC,QAAuD,CAAC;AAC1G,eAAO,MAAM,qCAAqC,QAAuD,CAAC;AAC1G,eAAO,MAAM,oCAAoC,QAAsD,CAAC;AAGxG;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAehE;;;;;;;GAOG;AACH,qBAAa,yBAA0B,YAAW,kBAAkB;IAGhE,OAAO,CAAC,QAAQ;gBADhB,IAAI,EAAE,sBAAsB,EACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC;IAK1D;;;;OAIG;IACI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAMtC,aAAa,IAAI,IAAI;IAoBrB,gBAAgB,IAAI,IAAI;CAWhC;AAED;;;;;;;GAOG;AACH,qBAAa,qBAAsB,SAAQ,yBAAyB;IAyBhE,OAAO,CAAC,KAAK;IAxBf,2EAA2E;IAC3E,OAAO,CAAC,MAAM,CAAC,YAAY,CAAsE;IAEjG,kFAAkF;IAClF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAUxB;IAET,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAGrC;IAEF,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAa;gBAG7C,KAAK,EAAE,sBAAsB,GAAG,WAAW,GAAG,4BAA4B,EAClF,QAAQ,EAAE,sBAAsB;IAYlC,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAYlC;;;OAGG;WAEW,aAAa,IAAI,IAAI;IAOnB,aAAa,IAAI,IAAI;IAerB,gBAAgB,IAAI,IAAI;IAQxB,OAAO,IAAI,OAAO;CAWnC"}
+{"version":3,"file":"media-matchers-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/media-matchers-controller.ts"],"names":[],"mappings":"AAMA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAKjE,eAAO,MAAM,yBAAyB,4BAA4B,CAAC;AACnE,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;AACpE,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,0BAA0B,sBAAsB,CAAC;AAC9D,eAAO,MAAM,oCAAoC,QAAsD,CAAC;AACxG,eAAO,MAAM,oCAAoC,QAAsD,CAAC;AACxG,eAAO,MAAM,oCAAoC,QAAsD,CAAC;AAGxG;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAehE;;;;;;;GAOG;AACH,qBAAa,yBAA0B,YAAW,kBAAkB;IAGhE,OAAO,CAAC,QAAQ;gBADhB,IAAI,EAAE,sBAAsB,EACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC;IAK1D;;;;OAIG;IACI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAMtC,aAAa,IAAI,IAAI;IAoBrB,gBAAgB,IAAI,IAAI;CAWhC;AAED;;;;;;;GAOG;AACH,qBAAa,qBAAsB,SAAQ,yBAAyB;IAyBhE,OAAO,CAAC,KAAK;IAxBf,2EAA2E;IAC3E,OAAO,CAAC,MAAM,CAAC,YAAY,CAAsE;IAEjG,kFAAkF;IAClF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAUxB;IAET,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAGrC;IAEF,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAa;gBAG7C,KAAK,EAAE,sBAAsB,GAAG,WAAW,GAAG,4BAA4B,EAClF,QAAQ,EAAE,sBAAsB;IAYlC,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAYlC;;;OAGG;WAEW,aAAa,IAAI,IAAI;IAOnB,aAAa,IAAI,IAAI;IAerB,gBAAgB,IAAI,IAAI;IAQxB,OAAO,IAAI,OAAO;CAWnC"}

package/core/controllers/media-matchers-controller.js

@@ -1,7 +1,7 @@
-import { S as p, a as b, b as g, c as y } from "../../sbb-tokens-B3Eka-Tz.js";
-import { isServer as n } from "lit";
-const c = (d) => d / p, k = "(forced-colors: active)", i = "(prefers-color-scheme: dark)", Q = "(any-hover: hover)", w = "(pointer: coarse)", L = `(min-width: ${c(y)}rem)`, B = `(max-width: ${c(b)}rem)`, C = `(max-width: ${c(g)}rem)`, a = /* @__PURE__ */ new Map();
-class M {
+import { S as p, a as g, b, c as y } from "../../sbb-tokens-CB1Hgctn.js";
+import { isServer as i } from "lit";
+const c = (d) => d / p, L = "(forced-colors: active)", n = "(prefers-color-scheme: dark)", k = "(any-hover: hover)", Q = "(pointer: coarse)", w = `(min-width: ${c(y)}rem)`, B = `(max-width: ${c(g)}rem)`, C = `(max-width: ${c(b)}rem)`, a = /* @__PURE__ */ new Map();
+class v {
   constructor(e, t) {
     this._queries = t, e.addController(this);
   }
@@ -11,10 +11,10 @@ class M {
    * @returns Whether the query matches or null with SSR.
    */
   matches(e) {
-    return n ? null : matchMedia(e).matches;
+    return i ? null : matchMedia(e).matches;
   }
   hostConnected() {
-    if (!n)
+    if (!i)
       for (const [e, t] of Object.entries(this._queries)) {
         const r = a.get(e);
         if (r)
@@ -32,17 +32,17 @@ class M {
     }
   }
 }
-const s = class s extends M {
+const s = class s extends v {
   constructor(e, t) {
     const r = () => {
       t(this.matches()), this._host.toggleState("dark", this.matches());
     };
     super(e, {
-      [i]: r
+      [n]: r
     }), this._host = e, this._onChangeWithStateUpdater = r;
   }
   static _readLightDarkClass() {
-    if (n)
+    if (i)
       return null;
     const e = document.documentElement.classList;
     return ["light-dark", "dark", "light"].find((t) => e.contains(`sbb-${t}`)) ?? null;
@@ -53,24 +53,24 @@ const s = class s extends M {
    */
   // eslint-disable-next-line lyne/needs-super-call-rule
   static requestUpdate() {
-    const e = a.get(i);
+    const e = a.get(n);
     e && e.handlers.forEach((t) => t(e.mediaQueryList.matches));
   }
   hostConnected() {
-    const e = (a.get(i)?.handlers.size ?? 0) === 0;
+    const e = (a.get(n)?.handlers.size ?? 0) === 0;
     super.hostConnected(), e && s._observer.observe(document.documentElement, s._observerConfig), this._onChangeWithStateUpdater();
   }
   hostDisconnected() {
-    super.hostDisconnected(), (a.get(i)?.handlers.size ?? 0) === 0 && s._observer.disconnect();
+    super.hostDisconnected(), (a.get(n)?.handlers.size ?? 0) === 0 && s._observer.disconnect();
   }
   matches() {
-    if (n)
+    if (i)
       return !1;
     const e = getComputedStyle(this._host).getPropertyValue("color-scheme"), t = e.includes("dark"), r = e.trim() === "dark";
-    return super.matches(i) && t || r;
+    return super.matches(n) && t || r;
   }
 };
-s._currentMode = s._readLightDarkClass(), s._observer = n ? null : new MutationObserver((e) => {
+s._currentMode = s._readLightDarkClass(), s._observer = i ? null : new MutationObserver((e) => {
   if (e[0].oldValue !== document.documentElement.getAttribute("class")) {
     const t = s._readLightDarkClass();
     s._currentMode !== t && (s.requestUpdate(), s._currentMode = t);
@@ -82,12 +82,12 @@ s._currentMode = s._readLightDarkClass(), s._observer = n ? null : new MutationO
 let l = s;
 export {
   l as SbbDarkModeController,
-  M as SbbMediaMatcherController,
-  L as SbbMediaQueryBreakpointMediumAndAbove,
-  B as SbbMediaQueryBreakpointMediumAndBelow,
+  v as SbbMediaMatcherController,
+  w as SbbMediaQueryBreakpointLargeAndAbove,
+  B as SbbMediaQueryBreakpointLargeAndBelow,
   C as SbbMediaQueryBreakpointSmallAndBelow,
-  i as SbbMediaQueryDarkMode,
-  k as SbbMediaQueryForcedColors,
-  Q as SbbMediaQueryHover,
-  w as SbbMediaQueryPointerCoarse
+  n as SbbMediaQueryDarkMode,
+  L as SbbMediaQueryForcedColors,
+  k as SbbMediaQueryHover,
+  Q as SbbMediaQueryPointerCoarse
 };

package/core/controllers/slot-state-controller.d.ts

@@ -1,33 +1,45 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class SbbSlottedChangeEvent extends Event {
+    readonly slot: HTMLSlotElement;
+    constructor(slot: HTMLSlotElement);
+}
 /**
- * This controller checks for slotted children. From these it generates
- * a list of used slot names (`unnamed` for children without a slot attribute)
- * and adds this to the `data-slot-names` attribute, as a space separated list.
+ * This controller checks for slotted children. From these it updates
+ * the ElementInternals states with the pattern `slotted-<name>` or `slotted`
+ * for the unnamed slot.
  *
- * This allows CSS attribute selector to display/hide/configure a section
- * of the component as required (see [attr~=value] selector specifically).
+ * This allows a :state(slotted-<name>) CSS selector to display/hide/configure
+ * a section of the component as required.
  *
  * @example
  * .example {
  *   display: none;
  *
- *   :host([data-slot-names~="icon"]) & {
+ *   :host(:state(slotted-icon)) & {
  *     display: inline;
  *   }
  * }
  *
- * https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/:state
  */
 export declare class SbbSlotStateController implements ReactiveController {
     private _host;
-    private _onChangeCallback;
-    readonly slots: Set<string>;
+    private _internals;
     private _textObserver;
-    constructor(_host: ReactiveControllerHost & HTMLElement, _onChangeCallback?: (() => void) | null);
-    hostConnected(): void;
-    hostDisconnected(): void;
+    constructor(_host: ReactiveControllerHost & HTMLElement, _internals: ElementInternals);
+    hostConnected: ReactiveController['hostConnected'];
     private _slotchangeHandler;
-    private _syncSlots;
-    private _updateSlotNameAttribute;
+    private _handleSlotChange;
+    private _updateSlottedState;
+    private _observeTextNodesInSlot;
+    private _hasSlottedContent;
+}
+declare global {
+    interface HTMLElementEventMap {
+        slottedchange: SbbSlottedChangeEvent;
+    }
+    interface ShadowRootEventMap {
+        slottedchange: SbbSlottedChangeEvent;
+    }
 }
 //# sourceMappingURL=slot-state-controller.d.ts.map

package/core/controllers/slot-state-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-state-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/slot-state-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,sBAAuB,YAAW,kBAAkB;IAmB7D,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,iBAAiB;IAnB3B,SAAgB,KAAK,cAAqB;IAE1C,OAAO,CAAC,aAAa,CAahB;gBAGK,KAAK,EAAE,sBAAsB,GAAG,WAAW,EAC3C,iBAAiB,GAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAW;IAKhD,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;IAO/B,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,wBAAwB;CAajC"}
+{"version":3,"file":"slot-state-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/slot-state-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF,qBAAa,qBAAsB,SAAQ,KAAK;aACX,IAAI,EAAE,eAAe;gBAArB,IAAI,EAAE,eAAe;CAGzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,sBAAuB,YAAW,kBAAkB;IAa7D,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,UAAU;IAbpB,OAAO,CAAC,aAAa,CAShB;gBAGK,KAAK,EAAE,sBAAsB,GAAG,WAAW,EAC3C,UAAU,EAAE,gBAAgB;IAK/B,aAAa,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAavD;IAEF,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,uBAAuB;IAc/B,OAAO,CAAC,kBAAkB;CAW3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B,aAAa,EAAE,qBAAqB,CAAC;KACtC;IACD,UAAU,kBAAkB;QAC1B,aAAa,EAAE,qBAAqB,CAAC;KACtC;CACF"}