@sbb-esta/lyne-elements 4.0.0-next.1 → 4.0.0-next.2

package/image/image.component.js

@@ -1,56 +1,57 @@
-var _e = (r) => {
-  throw TypeError(r);
+var be = (o) => {
+  throw TypeError(o);
 };
-var ke = (r, o, l) => o.has(r) || _e("Cannot " + l);
-var d = (r, o, l) => (ke(r, o, "read from private field"), l ? l.call(r) : o.get(r)), h = (r, o, l) => o.has(r) ? _e("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(r) : o.set(r, l), s = (r, o, l, m) => (ke(r, o, "write to private field"), m ? m.call(r, l) : o.set(r, l), l);
+var _e = (o, r, l) => r.has(o) || be("Cannot " + l);
+var d = (o, r, l) => (_e(o, r, "read from private field"), l ? l.call(o) : r.get(o)), h = (o, r, l) => r.has(o) ? be("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(o) : r.set(o, l), s = (o, r, l, m) => (_e(o, r, "write to private field"), m ? m.call(o, l) : r.set(o, l), l);
 import { __esDecorate as p, __runInitializers as a } from "tslib";
-import { S as ye, d as Se, e as ze, a as ve, c as xe, b as $e, f as we, g as Me, h as Le } from "../sbb-tokens-CB1Hgctn.js";
-import { css as Ie, LitElement as Ce, nothing as F, html as q } from "lit";
-import { customElement as Fe, property as u, eventOptions as De } from "lit/decorators.js";
-import { forceType as g } from "../core/decorators.js";
-import { boxSizingStyles as Ee } from "../core/styles.js";
-const Qe = Ie`:host{--sbb-image-aspect-ratio: 16 / 9;--sbb-image-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-image-object-fit: cover;display:block;border-radius:var(--sbb-border-radius-4x)}.sbb-image__img{opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host(:not([skip-lqip])) .sbb-image__img{position:absolute;inset:0}:host([data-loaded]) .sbb-image__blurred{opacity:0}picture{display:contents}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:var(--sbb-image-object-fit);object-position:var(--sbb-image-object-position);transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{display:flex;position:relative;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:inherit;overflow:hidden}`, qe = (r) => {
-  if (!r || r.length === 0)
+import { c as Pe, d as ye, a as Se, S as ze, b as ve, e as xe, f as $e, g as we } from "../sbb-tokens-BNWpZrLn.js";
+import { css as Me, LitElement as Le, nothing as C, html as q } from "lit";
+import { customElement as Ie, property as g, eventOptions as Ce } from "lit/decorators.js";
+import { forceType as u } from "../core/decorators.js";
+import { boxSizingStyles as Fe } from "../core/styles.js";
+const De = Me`:host{--sbb-image-aspect-ratio: 16 / 9;--sbb-image-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-image-object-fit: cover;display:block;border-radius:var(--sbb-border-radius-4x)}.sbb-image__img{opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host(:not([skip-lqip])) .sbb-image__img{position:absolute;inset:0}:host([data-loaded]) .sbb-image__blurred{opacity:0}picture{display:contents}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:var(--sbb-image-object-fit);object-position:var(--sbb-image-object-position);transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{display:flex;position:relative;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:inherit;overflow:hidden}`, Ee = (o) => {
+  if (!o || o.length === 0)
     return [];
-  let o;
+  let r;
   try {
-    o = JSON.parse(r);
+    r = JSON.parse(o);
   } catch {
     return [];
   }
-  if (!o.breakpoints || o.breakpoints.length === 0)
+  if (!r.breakpoints || r.breakpoints.length === 0)
     return [];
-  if (!Array.isArray(o.breakpoints))
+  if (!Array.isArray(r.breakpoints))
     return [];
   let l = !1, m = !1;
-  const D = ["image", "mediaQueries"];
-  return o.breakpoints.forEach((Q) => {
-    const E = Object.keys(Q);
-    E.forEach((_) => {
-      D.includes(_) || (l = !0);
-    }), D.forEach((_) => {
-      E.includes(_) || (m = !0);
+  const F = ["image", "mediaQueries"];
+  return r.breakpoints.forEach((E) => {
+    const D = Object.keys(E);
+    D.forEach((b) => {
+      F.includes(b) || (l = !0);
+    }), F.forEach((b) => {
+      D.includes(b) || (m = !0);
     });
-  }), l || m ? [] : o.breakpoints;
-}, Oe = {
+  }), l || m ? [] : r.breakpoints;
+}, qe = {
   once: !0,
   passive: !0
-}, b = (r) => r / ye, Be = {
-  "sbb-breakpoint-zero-min": b(Le),
-  "sbb-breakpoint-zero-max": b(Me),
-  "sbb-breakpoint-small-min": b(we),
-  "sbb-breakpoint-small-max": b($e),
-  "sbb-breakpoint-large-min": b(xe),
-  "sbb-breakpoint-large-max": b(ve),
-  "sbb-breakpoint-ultra-min": b(ze),
-  "sbb-breakpoint-ultra-max": b(Se)
+}, Qe = {
+  "sbb-breakpoint-zero-min": we,
+  "sbb-breakpoint-zero-max": $e,
+  "sbb-breakpoint-small-min": xe,
+  "sbb-breakpoint-small-max": ve,
+  "sbb-breakpoint-large-min": ze,
+  "sbb-breakpoint-large-max": Se,
+  "sbb-breakpoint-ultra-min": ye,
+  "sbb-breakpoint-ultra-max": Pe
 };
-let Ke = (() => {
-  var k, P, y, S, z, v, x, $, w, M, L, I, n;
-  let r = [Fe("sbb-image")], o, l = [], m, D = Ce, Q = [], E, _ = [], O = [], B, T = [], X = [], Y, j = [], U = [], A, V = [], R = [], K, N = [], H = [], W, Z = [], G = [], J, ee = [], te = [], ie, ae = [], se = [], re, oe = [], ne = [], ce, le = [], pe = [], me, de = [], he = [], ue, ge = [], be = [], fe;
-  return n = class extends D {
+let Ve = (() => {
+  var _, k, P, y, S, z, v, x, $, w, M, L, n;
+  let o = [Ie("sbb-image")], r, l = [], m, F = Le, E = [], D, b = [], Q = [], O, B = [], X = [], Y, j = [], U = [], A, T = [], V = [], R, K = [], N = [], H, W = [], Z = [], G, J = [], ee = [], te, ie = [], ae = [], se, re = [], oe = [], ne, ce = [], le = [], pe, me = [], de = [], he, ge = [], ue = [], fe;
+  return n = class extends F {
     constructor() {
       super(...arguments);
+      h(this, _);
       h(this, k);
       h(this, P);
       h(this, y);
@@ -62,11 +63,10 @@ let Ke = (() => {
       h(this, w);
       h(this, M);
       h(this, L);
-      h(this, I);
-      this._captionElement = a(this, Q), this._config = {
+      this._captionElement = a(this, E), this._config = {
         nonRetinaQuality: "45",
         retinaQuality: "20"
-      }, s(this, k, a(this, _, "")), s(this, P, (a(this, O), a(this, T, !1))), s(this, y, (a(this, X), a(this, j, !1))), s(this, S, (a(this, U), a(this, V, "auto"))), s(this, z, (a(this, R), a(this, N, !1))), s(this, v, (a(this, H), a(this, Z, 1))), s(this, x, (a(this, G), a(this, ee, 1))), s(this, $, (a(this, te), a(this, ae, ""))), s(this, w, (a(this, se), a(this, oe, "high"))), s(this, M, (a(this, ne), a(this, le, "eager"))), s(this, L, (a(this, pe), a(this, de, ""))), s(this, I, (a(this, he), a(this, ge, ""))), a(this, be);
+      }, s(this, _, a(this, b, "")), s(this, k, (a(this, Q), a(this, B, !1))), s(this, P, (a(this, X), a(this, j, !1))), s(this, y, (a(this, U), a(this, T, "auto"))), s(this, S, (a(this, V), a(this, K, !1))), s(this, z, (a(this, N), a(this, W, 1))), s(this, v, (a(this, Z), a(this, J, 1))), s(this, x, (a(this, ee), a(this, ie, ""))), s(this, $, (a(this, ae), a(this, re, "high"))), s(this, w, (a(this, oe), a(this, ce, "eager"))), s(this, M, (a(this, le), a(this, me, ""))), s(this, L, (a(this, de), a(this, ge, ""))), a(this, ue);
     }
     /**
      * An alt text is not always necessary (e.g. in teaser cards when
@@ -76,10 +76,10 @@ let Ke = (() => {
      * technology, that they can skip the image.
      */
     get alt() {
-      return d(this, k);
+      return d(this, _);
     }
     set alt(t) {
-      s(this, k, t);
+      s(this, _, t);
     }
     /**
      * If set to false, we show a blurred version of the image as
@@ -89,10 +89,10 @@ let Ke = (() => {
      * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
      */
     get skipLqip() {
-      return d(this, P);
+      return d(this, k);
     }
     set skipLqip(t) {
-      s(this, P, t);
+      s(this, k, t);
     }
     /**
      * Set this to true, if you want to pass a custom focal point
@@ -100,10 +100,10 @@ let Ke = (() => {
      * https://docs.imgix.com/apis/rendering/focalpoint-crop
      */
     get customFocalPoint() {
-      return d(this, y);
+      return d(this, P);
     }
     set customFocalPoint(t) {
-      s(this, y, t);
+      s(this, P, t);
     }
     /**
      * If the lazy property is set to true, the module will automatically
@@ -113,38 +113,38 @@ let Ke = (() => {
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
      */
     get decoding() {
-      return d(this, S);
+      return d(this, y);
     }
     set decoding(t) {
-      s(this, S, t);
+      s(this, y, t);
     }
     /**
      * Set this to true, to receive visual guidance where the custom focal
      * point is currently set.
      */
     get focalPointDebug() {
-      return d(this, z);
+      return d(this, S);
     }
     set focalPointDebug(t) {
-      s(this, z, t);
+      s(this, S, t);
     }
     /**
      * Pass in a floating number between 0 (left) and 1 (right).
      */
     get focalPointX() {
-      return d(this, v);
+      return d(this, z);
     }
     set focalPointX(t) {
-      s(this, v, t);
+      s(this, z, t);
     }
     /**
      * Pass in a floating number between 0 (top) and 1 (bottom).
      */
     get focalPointY() {
-      return d(this, x);
+      return d(this, v);
     }
     set focalPointY(t) {
-      s(this, x, t);
+      s(this, v, t);
     }
     /**
      * Right now the module is heavily coupled with the image delivery
@@ -157,10 +157,10 @@ let Ke = (() => {
      * LYNE Core Team.
      */
     get imageSrc() {
-      return d(this, $);
+      return d(this, x);
     }
     set imageSrc(t) {
-      s(this, $, t);
+      s(this, x, t);
     }
     /**
      * The importance attribute is fairly new attribute which should
@@ -172,10 +172,10 @@ let Ke = (() => {
      * the fold, will set the attribute value to 'low'.
      */
     get importance() {
-      return d(this, w);
+      return d(this, $);
     }
     set importance(t) {
-      s(this, w, t);
+      s(this, $, t);
     }
     /**
      * With the support of native image lazy loading, we can now
@@ -188,10 +188,10 @@ let Ke = (() => {
      * of the initial viewport.
      */
     get loading() {
-      return d(this, M);
+      return d(this, w);
     }
     set loading(t) {
-      s(this, M, t);
+      s(this, w, t);
     }
     /**
      * With performance.mark you can log a timestamp associated with
@@ -207,10 +207,10 @@ let Ke = (() => {
      * here, separate words with underscores or dashes.
      */
     get performanceMark() {
-      return d(this, L);
+      return d(this, M);
     }
     set performanceMark(t) {
-      s(this, L, t);
+      s(this, M, t);
     }
     /**
      * With the pictureSizesConfig object, you can pass in information
@@ -281,10 +281,10 @@ let Ke = (() => {
      *  }
      */
     get pictureSizesConfig() {
-      return d(this, I);
+      return d(this, L);
     }
     set pictureSizesConfig(t) {
-      s(this, I, t);
+      s(this, L, t);
     }
     /** Whether the image is finished loading or failed to load. */
     get complete() {
@@ -301,10 +301,6 @@ let Ke = (() => {
     _logPerformanceMarks() {
       this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
     }
-    _matchMediaQueryDesignToken(t) {
-      const e = Be[t];
-      return e ? `${e}rem` : "";
-    }
     _addFocusAbilityToLinksInCaption() {
       this._linksInCaption?.forEach((t) => {
         t.removeAttribute("tabindex");
@@ -369,16 +365,16 @@ let Ke = (() => {
             ]
           }
         ]
-      }`, qe(t);
+      }`, Ee(t);
     }
     _createMediaQueryString(t) {
       let e = "";
       return t.forEach((i) => {
         const c = i.conditionFeature;
-        let C;
-        i.conditionFeatureValue.lyneDesignToken ? C = this._matchMediaQueryDesignToken(i.conditionFeatureValue.value) : C = i.conditionFeatureValue.value;
+        let I;
+        i.conditionFeatureValue.lyneDesignToken ? I = Qe[i.conditionFeatureValue.value] ?? "" : I = i.conditionFeatureValue.value;
         const f = i.conditionOperator ? ` ${i.conditionOperator} ` : "";
-        e += `(${c}: ${C})${f}`;
+        e += `(${c}: ${I})${f}`;
       }), e;
     }
     _imageLoaded() {
@@ -390,25 +386,25 @@ let Ke = (() => {
       const i = this._preparePictureSizeConfigs();
       return q`
       <div class="sbb-image__wrapper">
-        ${this.skipLqip ? F : q`<img
+        ${this.skipLqip ? C : q`<img
               alt=""
               class="sbb-image__blurred"
               src=${t}
               width="1000"
               height="562"
-              loading=${this.loading ?? F}
-              decoding=${this.decoding ?? F}
+              loading=${this.loading ?? C}
+              decoding=${this.decoding ?? C}
             />`}
 
         <picture>
           <!-- render picture element sources -->
           ${i.map((c) => {
-        const C = c.image.height, f = c.image.width, Pe = this._createMediaQueryString(c.mediaQueries);
+        const I = c.image.height, f = c.image.width, ke = this._createMediaQueryString(c.mediaQueries);
         return q`
               <source
-                media=${`${Pe}`}
+                media=${`${ke}`}
                 sizes=${`${f}px`}
-                srcset=${`${e}&w=${f}&h=${C}&q=${this._config.nonRetinaQuality} ${f}w, ${e}&w=${f * 2}&h=${C * 2}&q=${this._config.retinaQuality} ${f * 2}w`}
+                srcset=${`${e}&w=${f}&h=${I}&q=${this._config.nonRetinaQuality} ${f}w, ${e}&w=${f * 2}&h=${I * 2}&q=${this._config.retinaQuality} ${f * 2}w`}
               ></source>`;
       })}
           <img
@@ -419,46 +415,46 @@ let Ke = (() => {
             src=${this.imageSrc}
             width="1000"
             height="562"
-            loading=${this.loading ?? F}
-            decoding=${this.decoding ?? F}
-            .fetchPriority=${this.importance ?? F}
+            loading=${this.loading ?? C}
+            decoding=${this.decoding ?? C}
+            .fetchPriority=${this.importance ?? C}
           />
         </picture>
       </div>
     `;
     }
-  }, k = new WeakMap(), P = new WeakMap(), y = new WeakMap(), S = new WeakMap(), z = new WeakMap(), v = new WeakMap(), x = new WeakMap(), $ = new WeakMap(), w = new WeakMap(), M = new WeakMap(), L = new WeakMap(), I = new WeakMap(), m = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(D[Symbol.metadata] ?? null) : void 0;
-    E = [g(), u()], B = [g(), u({ attribute: "skip-lqip", type: Boolean, reflect: !0 })], Y = [g(), u({ attribute: "custom-focal-point", type: Boolean })], A = [u()], K = [g(), u({ attribute: "focal-point-debug", type: Boolean })], W = [g(), u({ attribute: "focal-point-x", type: Number })], J = [g(), u({ attribute: "focal-point-y", type: Number })], ie = [g(), u({ attribute: "image-src" })], re = [u()], ce = [u()], me = [g(), u({ attribute: "performance-mark" })], ue = [g(), u({ attribute: "picture-sizes-config" })], fe = [De(Oe)], p(n, null, E, { kind: "accessor", name: "alt", static: !1, private: !1, access: { has: (e) => "alt" in e, get: (e) => e.alt, set: (e, i) => {
+  }, _ = new WeakMap(), k = new WeakMap(), P = new WeakMap(), y = new WeakMap(), S = new WeakMap(), z = new WeakMap(), v = new WeakMap(), x = new WeakMap(), $ = new WeakMap(), w = new WeakMap(), M = new WeakMap(), L = new WeakMap(), m = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(F[Symbol.metadata] ?? null) : void 0;
+    D = [u(), g()], O = [u(), g({ attribute: "skip-lqip", type: Boolean, reflect: !0 })], Y = [u(), g({ attribute: "custom-focal-point", type: Boolean })], A = [g()], R = [u(), g({ attribute: "focal-point-debug", type: Boolean })], H = [u(), g({ attribute: "focal-point-x", type: Number })], G = [u(), g({ attribute: "focal-point-y", type: Number })], te = [u(), g({ attribute: "image-src" })], se = [g()], ne = [g()], pe = [u(), g({ attribute: "performance-mark" })], he = [u(), g({ attribute: "picture-sizes-config" })], fe = [Ce(qe)], p(n, null, D, { kind: "accessor", name: "alt", static: !1, private: !1, access: { has: (e) => "alt" in e, get: (e) => e.alt, set: (e, i) => {
       e.alt = i;
-    } }, metadata: t }, _, O), p(n, null, B, { kind: "accessor", name: "skipLqip", static: !1, private: !1, access: { has: (e) => "skipLqip" in e, get: (e) => e.skipLqip, set: (e, i) => {
+    } }, metadata: t }, b, Q), p(n, null, O, { kind: "accessor", name: "skipLqip", static: !1, private: !1, access: { has: (e) => "skipLqip" in e, get: (e) => e.skipLqip, set: (e, i) => {
       e.skipLqip = i;
-    } }, metadata: t }, T, X), p(n, null, Y, { kind: "accessor", name: "customFocalPoint", static: !1, private: !1, access: { has: (e) => "customFocalPoint" in e, get: (e) => e.customFocalPoint, set: (e, i) => {
+    } }, metadata: t }, B, X), p(n, null, Y, { kind: "accessor", name: "customFocalPoint", static: !1, private: !1, access: { has: (e) => "customFocalPoint" in e, get: (e) => e.customFocalPoint, set: (e, i) => {
       e.customFocalPoint = i;
     } }, metadata: t }, j, U), p(n, null, A, { kind: "accessor", name: "decoding", static: !1, private: !1, access: { has: (e) => "decoding" in e, get: (e) => e.decoding, set: (e, i) => {
       e.decoding = i;
-    } }, metadata: t }, V, R), p(n, null, K, { kind: "accessor", name: "focalPointDebug", static: !1, private: !1, access: { has: (e) => "focalPointDebug" in e, get: (e) => e.focalPointDebug, set: (e, i) => {
+    } }, metadata: t }, T, V), p(n, null, R, { kind: "accessor", name: "focalPointDebug", static: !1, private: !1, access: { has: (e) => "focalPointDebug" in e, get: (e) => e.focalPointDebug, set: (e, i) => {
       e.focalPointDebug = i;
-    } }, metadata: t }, N, H), p(n, null, W, { kind: "accessor", name: "focalPointX", static: !1, private: !1, access: { has: (e) => "focalPointX" in e, get: (e) => e.focalPointX, set: (e, i) => {
+    } }, metadata: t }, K, N), p(n, null, H, { kind: "accessor", name: "focalPointX", static: !1, private: !1, access: { has: (e) => "focalPointX" in e, get: (e) => e.focalPointX, set: (e, i) => {
       e.focalPointX = i;
-    } }, metadata: t }, Z, G), p(n, null, J, { kind: "accessor", name: "focalPointY", static: !1, private: !1, access: { has: (e) => "focalPointY" in e, get: (e) => e.focalPointY, set: (e, i) => {
+    } }, metadata: t }, W, Z), p(n, null, G, { kind: "accessor", name: "focalPointY", static: !1, private: !1, access: { has: (e) => "focalPointY" in e, get: (e) => e.focalPointY, set: (e, i) => {
       e.focalPointY = i;
-    } }, metadata: t }, ee, te), p(n, null, ie, { kind: "accessor", name: "imageSrc", static: !1, private: !1, access: { has: (e) => "imageSrc" in e, get: (e) => e.imageSrc, set: (e, i) => {
+    } }, metadata: t }, J, ee), p(n, null, te, { kind: "accessor", name: "imageSrc", static: !1, private: !1, access: { has: (e) => "imageSrc" in e, get: (e) => e.imageSrc, set: (e, i) => {
       e.imageSrc = i;
-    } }, metadata: t }, ae, se), p(n, null, re, { kind: "accessor", name: "importance", static: !1, private: !1, access: { has: (e) => "importance" in e, get: (e) => e.importance, set: (e, i) => {
+    } }, metadata: t }, ie, ae), p(n, null, se, { kind: "accessor", name: "importance", static: !1, private: !1, access: { has: (e) => "importance" in e, get: (e) => e.importance, set: (e, i) => {
       e.importance = i;
-    } }, metadata: t }, oe, ne), p(n, null, ce, { kind: "accessor", name: "loading", static: !1, private: !1, access: { has: (e) => "loading" in e, get: (e) => e.loading, set: (e, i) => {
+    } }, metadata: t }, re, oe), p(n, null, ne, { kind: "accessor", name: "loading", static: !1, private: !1, access: { has: (e) => "loading" in e, get: (e) => e.loading, set: (e, i) => {
       e.loading = i;
-    } }, metadata: t }, le, pe), p(n, null, me, { kind: "accessor", name: "performanceMark", static: !1, private: !1, access: { has: (e) => "performanceMark" in e, get: (e) => e.performanceMark, set: (e, i) => {
+    } }, metadata: t }, ce, le), p(n, null, pe, { kind: "accessor", name: "performanceMark", static: !1, private: !1, access: { has: (e) => "performanceMark" in e, get: (e) => e.performanceMark, set: (e, i) => {
       e.performanceMark = i;
-    } }, metadata: t }, de, he), p(n, null, ue, { kind: "accessor", name: "pictureSizesConfig", static: !1, private: !1, access: { has: (e) => "pictureSizesConfig" in e, get: (e) => e.pictureSizesConfig, set: (e, i) => {
+    } }, metadata: t }, me, de), p(n, null, he, { kind: "accessor", name: "pictureSizesConfig", static: !1, private: !1, access: { has: (e) => "pictureSizesConfig" in e, get: (e) => e.pictureSizesConfig, set: (e, i) => {
       e.pictureSizesConfig = i;
-    } }, metadata: t }, ge, be), p(n, null, fe, { kind: "method", name: "_imageLoaded", static: !1, private: !1, access: { has: (e) => "_imageLoaded" in e, get: (e) => e._imageLoaded }, metadata: t }, null, Q), p(null, o = { value: m }, r, { kind: "class", name: m.name, metadata: t }, null, l), m = o.value, t && Object.defineProperty(m, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = [Ee, Qe], n.events = {
+    } }, metadata: t }, ge, ue), p(n, null, fe, { kind: "method", name: "_imageLoaded", static: !1, private: !1, access: { has: (e) => "_imageLoaded" in e, get: (e) => e._imageLoaded }, metadata: t }, null, E), p(null, r = { value: m }, o, { kind: "class", name: m.name, metadata: t }, null, l), m = r.value, t && Object.defineProperty(m, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.styles = [Fe, De], n.events = {
     error: "error",
     load: "load"
   }, a(m, l), m;
 })();
 export {
-  Ke as SbbImageElement
+  Ve as SbbImageElement
 };

package/link/common/block-link-common.js

@@ -1,22 +1,22 @@
 var c = (t) => {
   throw TypeError(t);
 };
-var m = (t, o, e) => o.has(t) || c("Cannot " + e);
-var v = (t, o, e) => (m(t, o, "read from private field"), e ? e.call(t) : o.get(t)), p = (t, o, e) => o.has(t) ? c("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, e), h = (t, o, e, s) => (m(t, o, "write to private field"), s ? s.call(t, e) : o.set(t, e), e);
-import { __esDecorate as g, __runInitializers as f } from "tslib";
-import { property as d } from "lit/decorators.js";
-import { html as k } from "lit/static-html.js";
+var m = (t, e, o) => e.has(t) || c("Cannot " + o);
+var v = (t, e, o) => (m(t, e, "read from private field"), o ? o.call(t) : e.get(t)), p = (t, e, o) => e.has(t) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), h = (t, e, o, s) => (m(t, e, "write to private field"), s ? s.call(t, o) : e.set(t, o), o);
+import { __esDecorate as k, __runInitializers as f } from "tslib";
+import { property as y } from "lit/decorators.js";
+import { html as d } from "lit/static-html.js";
 import { boxSizingStyles as u } from "../../core/styles.js";
 import { SbbIconNameMixin as x } from "../../icon.js";
 import { S as _, s as z } from "../../link-common-CdQBSga7.js";
 import { css as S } from "lit";
-const P = S`:host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));--sbb-link-gap: var(--sbb-spacing-fixed-1x);display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}.sbb-action-base{gap:var(--sbb-link-gap)}:host([size=xs]) .sbb-action-base{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-action-base{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=m]) .sbb-action-base{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-body-text) * 1em);width:var(--sbb-size-icon-ui-small);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;transform:translateY(-50%)}`, D = (t) => (() => {
+const P = S`:host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));--sbb-link-gap: var(--sbb-spacing-fixed-1x);display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}.sbb-action-base{gap:var(--sbb-link-gap)}:host([size=xs]) .sbb-action-base{--sbb-text-font-size: var(--sbb-text-font-size-xs);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)}:host([size=s]) .sbb-action-base{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size)}:host([size=m]) .sbb-action-base{--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)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-size-icon-ui-small);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;transform:translateY(-50%)}`, D = (t) => (() => {
   var r, i;
-  let e = _(x(t)), s, n = [], l = [];
-  return i = class extends e {
+  let o = _(x(t)), s, b = [], l = [];
+  return i = class extends o {
     constructor() {
       super(...arguments);
-      p(this, r, f(this, n, "start"));
+      p(this, r, f(this, b, "start"));
       f(this, l);
     }
     /** Moves the icon to the end of the component if set to true. */
@@ -27,16 +27,16 @@ const P = S`:host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125)
       h(this, r, a);
     }
     renderTemplate() {
-      return k`
+      return d`
         <span class="sbb-link__icon"> ${super.renderIconSlot()} </span>
         <slot></slot>
       `;
     }
   }, r = new WeakMap(), (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
-    s = [d({ attribute: "icon-placement", reflect: !0 })], g(i, null, s, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (b) => "iconPlacement" in b, get: (b) => b.iconPlacement, set: (b, y) => {
-      b.iconPlacement = y;
-    } }, metadata: a }, n, l), a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    s = [y({ attribute: "icon-placement", reflect: !0 })], k(i, null, s, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (n) => "iconPlacement" in n, get: (n) => n.iconPlacement, set: (n, g) => {
+      n.iconPlacement = g;
+    } }, metadata: a }, b, l), a && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
   })(), i.styles = [u, z, P], i;
 })();
 export {

package/lists.css

@@ -41,16 +41,16 @@
   width: 1em;
   align-items: center;
   justify-content: center;
-  inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-body-text) * 1em - 1em));
+  inset-block-start: calc(0.5 * (var(--sbb-typo-line-height-text) * 1em - 1em));
   inset-inline-start: calc(-1 * (0.5 * var(--sbb-list-padding-inline-start) + 0.5em));
   transform: scale(1.3);
 }
 .sbb-list:where(dl) {
-  --sbb-text-font-size: var(--sbb-font-size-text-s);
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   margin: 0;
   padding: 0;
@@ -74,7 +74,7 @@
   --sbb-step-list-text-to-marker-block-offset: calc(
     0.5 *
       (
-        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+        var(--sbb-step-list-dimensions) - var(--sbb-typo-line-height-text) *
           var(--sbb-text-font-size)
       )
   );
@@ -104,11 +104,11 @@
   min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
 }
 .sbb-step-list > li::before {
-  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
-  line-height: var(--sbb-typo-line-height-body-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
   content: counter(steps);
@@ -152,7 +152,7 @@
   --sbb-icon-list-text-to-marker-block-offset: calc(
     0.5 *
       (
-        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-body-text) *
+        var(--sbb-icon-list-dimensions) - var(--sbb-typo-line-height-text) *
           var(--sbb-text-font-size)
       )
   );

package/menu/common/menu-action-common.js

@@ -3,7 +3,7 @@ import { html as a } from "lit/static-html.js";
 import { SbbDisabledMixin as s } from "../../core/mixins.js";
 import { boxSizingStyles as i } from "../../core/styles.js";
 import { SbbIconNameMixin as b } from "../../icon.js";
-const r = t`:host{outline:none!important;--sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);--sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);--sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);--sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);--sbb-menu-action-cursor: var(--sbb-cursor-pointer);--sbb-menu-action-color: var(--sbb-color-2-inverted);--sbb-menu-action-forced-color-border-color: CanvasText;--sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);display:block}@media(any-hover:hover){:host(:is(:hover:not([disabled],:disabled,[disabled-interactive]),[aria-expanded=true])){--sbb-menu-background-color: var(--sbb-color-iron);--sbb-menu-background-color: light-dark(var(--sbb-color-iron), var(--sbb-color-milk));--sbb-menu-action-forced-color-border-color: Highlight}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-cursor: var(--sbb-cursor-default);--sbb-menu-action-color: var(--sbb-color-graphite);--sbb-menu-action-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));--sbb-menu-action-forced-color-border-color: GrayText;pointer-events:none;cursor:var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-color: GrayText}}:host([data-sbb-menu-trigger]){--sbb-menu-action-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host([data-button]){--sbb-menu-action-color: ButtonText}}:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))):after{inset:50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - .5 * var(--sbb-size-icon-ui-small)) auto auto!important;translate:50% -50%}:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))):after{inset:calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto!important}:host([aria-controls*=sbb-menu]){--sbb-menu-action-submenu-icon-display: flex}:is(.sbb-menu-button,.sbb-menu-link){text-decoration:none;display:block;width:100%;color:var(--sbb-menu-action-color);padding:var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);cursor:var(--sbb-menu-action-cursor);outline:none}.sbb-menu-action__content{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-menu-action-gap);padding:var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);border-radius:var(--sbb-menu-action-border-radius);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-color:var(--sbb-menu-background-color)}:host(:focus-visible) .sbb-menu-action__content,:focus-visible .sbb-menu-action__content{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media(forced-colors:active){.sbb-menu-action__content{border:var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color)}}.sbb-menu-action__icon,.sbb-menu-submenu__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}.sbb-menu-submenu__icon{display:var(--sbb-menu-action-submenu-icon-display, none);margin-inline-start:auto}.sbb-menu-action__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-menu-action__label{text-decoration:line-through}`, v = (e) => {
+const r = t`:host{outline:none!important;--sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);--sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);--sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);--sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);--sbb-menu-action-cursor: var(--sbb-cursor-pointer);--sbb-menu-action-color: var(--sbb-color-2-inverted);--sbb-menu-action-forced-color-border-color: CanvasText;--sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);display:block}@media(any-hover:hover){:host(:is(:hover:not([disabled],:disabled,[disabled-interactive]),[aria-expanded=true])){--sbb-menu-background-color: var(--sbb-color-iron);--sbb-menu-background-color: light-dark(var(--sbb-color-iron), var(--sbb-color-milk));--sbb-menu-action-forced-color-border-color: Highlight}}:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-cursor: var(--sbb-cursor-default);--sbb-menu-action-color: var(--sbb-color-graphite);--sbb-menu-action-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));--sbb-menu-action-forced-color-border-color: GrayText;pointer-events:none;cursor:var(--sbb-cursor-default)}@media(forced-colors:active){:host(:is([disabled],:disabled,[disabled-interactive])){--sbb-menu-action-color: GrayText}}:host([data-sbb-menu-trigger]){--sbb-menu-action-cursor: var(--sbb-cursor-default)}@media(forced-colors:active){:host([data-button]){--sbb-menu-action-color: ButtonText}}:host([sbb-badge]:not(:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))):after{inset:50% calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - .5 * var(--sbb-size-icon-ui-small)) auto auto!important;translate:50% -50%}:host([sbb-badge]:is(:is(:state(has-icon-name),[state--has-icon-name]),:is(:state(slotted-icon),[state--slotted-icon]))):after{inset:calc(var(--sbb-menu-action-outer-vertical-padding) + var(--sbb-menu-action-content-padding-block) + var(--sbb-badge-position-offset)) calc(100% - var(--sbb-menu-action-outer-horizontal-padding) - var(--sbb-menu-action-content-padding-inline) - var(--sbb-size-icon-ui-small) + var(--sbb-badge-position-offset)) auto auto!important}:host([aria-controls*=sbb-menu]){--sbb-menu-action-submenu-icon-display: flex}:is(.sbb-menu-button,.sbb-menu-link){text-decoration:none;display:block;width:100%;color:var(--sbb-menu-action-color);padding:var(--sbb-menu-action-outer-vertical-padding) var(--sbb-menu-action-outer-horizontal-padding);cursor:var(--sbb-menu-action-cursor);outline:none}.sbb-menu-action__content{--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;gap:var(--sbb-menu-action-gap);padding:var(--sbb-menu-action-content-padding-block) var(--sbb-menu-action-content-padding-inline);border-radius:var(--sbb-menu-action-border-radius);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-color:var(--sbb-menu-background-color)}:host(:focus-visible) .sbb-menu-action__content,:focus-visible .sbb-menu-action__content{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media(forced-colors:active){.sbb-menu-action__content{border:var(--sbb-border-width-2x) solid var(--sbb-menu-action-forced-color-border-color)}}.sbb-menu-action__icon,.sbb-menu-submenu__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small)}.sbb-menu-submenu__icon{display:var(--sbb-menu-action-submenu-icon-display, none);margin-inline-start:auto}.sbb-menu-action__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:is([disabled],:disabled,[disabled-interactive])) .sbb-menu-action__label{text-decoration:line-through}`, v = (e) => {
   const n = class n extends b(s(e)) {
     renderTemplate() {
       return a`

package/message/message.component.js

@@ -2,11 +2,11 @@ import { __esDecorate as n, __runInitializers as m } from "tslib";
 import { css as c, LitElement as g, html as d } from "lit";
 import { customElement as v } from "lit/decorators.js";
 import { boxSizingStyles as p } from "../core/styles.js";
-const f = c`:host{--sbb-message-subtitle-color: var(--sbb-color-granite);--sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);--sbb-message-image-border-radius: var(--sbb-border-radius-4x);--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;display:block}.sbb-message__container{text-align:center}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important;width:100%}::slotted([slot=subtitle]){--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-message-subtitle-color);margin:0}::slotted([slot=legend]){--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);padding:0;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block)}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}`;
+const f = c`:host{--sbb-message-subtitle-color: var(--sbb-color-granite);--sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));--sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);--sbb-message-image-border-radius: var(--sbb-border-radius-4x);--sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;--sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;display:block}.sbb-message__container{text-align:center}::slotted(sbb-title[slot=title]){margin:0}::slotted([slot=image]){display:block;margin-inline:auto!important;margin-block:var(--sbb-message-image-margin-block)!important;width:100%}::slotted([slot=subtitle]){--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-message-subtitle-color);margin:0}::slotted([slot=legend]){--sbb-text-font-size: var(--sbb-text-font-size-xs);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);padding:0;color:var(--sbb-color-granite);color:light-dark(var(--sbb-color-granite),var(--sbb-color-cement));margin-block:var(--sbb-message-legend-margin-block)}::slotted([slot=action]){margin-block:var(--sbb-message-action-margin-block)}`;
 let _ = (() => {
   var e;
-  let r = [v("sbb-message")], o, l = [], t, i = g;
-  return e = class extends i {
+  let r = [v("sbb-message")], l, i = [], t, o = g;
+  return e = class extends o {
     _configureTitle(s) {
       const a = s.target.assignedElements().find((b) => b.localName === "sbb-title");
       a && (customElements.upgrade(a), a.visualLevel = "5");
@@ -23,9 +23,9 @@ let _ = (() => {
     `;
     }
   }, t = e, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    n(null, o = { value: t }, r, { kind: "class", name: t.name, metadata: s }, null, l), t = o.value, s && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), e.styles = [p, f], m(t, l), t;
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n(null, l = { value: t }, r, { kind: "class", name: t.name, metadata: s }, null, i), t = l.value, s && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), e.styles = [p, f], m(t, i), t;
 })();
 export {
   _ as SbbMessageElement