@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773396165

package/image/image.component.js

@@ -1,2 +1,455 @@
-import { t as e } from "../image.component-Cq2t-XZu.js";
-export { e as SbbImageElement };
+var me = (r) => {
+  throw TypeError(r);
+};
+var ue = (r, o, l) => o.has(r) || me("Cannot " + l);
+var p = (r, o, l) => (ue(r, o, "read from private field"), l ? l.call(r) : o.get(r)), d = (r, o, l) => o.has(r) ? me("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(r) : o.set(r, l), a = (r, o, l, g) => (ue(r, o, "write to private field"), g ? g.call(r, l) : o.set(r, l), l);
+import { __esDecorate as h, __runInitializers as s } from "tslib";
+import { f as fe, d as _e, a as be, S as ke, c as Pe, b as ye, g as ze, e as ve } from "../sbb-tokens-HiNSQasB.js";
+import { css as Se, nothing as C, html as O } from "lit";
+import { property as m, eventOptions as xe } from "lit/decorators.js";
+import { SbbElement as $e } from "../core/base-elements.js";
+import { forceType as u } from "../core/decorators.js";
+import { boxSizingStyles as we } from "../core/styles.js";
+const Me = Se`: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(:is(:state(loaded),[state--loaded])) .sbb-image__img{opacity:.999999}:host(:not([skip-lqip])) .sbb-image__img{position:absolute;inset:0}:host(:is(:state(loaded),[state--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}`, Le = (r) => {
+  if (!r || r.length === 0)
+    return [];
+  let o;
+  try {
+    o = JSON.parse(r);
+  } catch {
+    return [];
+  }
+  if (!o.breakpoints || o.breakpoints.length === 0)
+    return [];
+  if (!Array.isArray(o.breakpoints))
+    return [];
+  let l = !1, g = !1;
+  const D = ["image", "mediaQueries"];
+  return o.breakpoints.forEach((Q) => {
+    const q = Object.keys(Q);
+    q.forEach((_) => {
+      D.includes(_) || (l = !0);
+    }), D.forEach((_) => {
+      q.includes(_) || (g = !0);
+    });
+  }), l || g ? [] : o.breakpoints;
+}, Fe = {
+  passive: !0
+}, Ce = {
+  "sbb-breakpoint-zero-min": ve,
+  "sbb-breakpoint-zero-max": ze,
+  "sbb-breakpoint-small-min": ye,
+  "sbb-breakpoint-small-max": Pe,
+  "sbb-breakpoint-large-min": ke,
+  "sbb-breakpoint-large-max": be,
+  "sbb-breakpoint-ultra-min": _e,
+  "sbb-breakpoint-ultra-max": fe
+};
+let Te = (() => {
+  var b, k, P, y, z, v, S, x, $, w, M, L, n;
+  let r = $e, o = [], l, g = [], D = [], Q, q = [], _ = [], B, X = [], Y = [], j, I = [], T = [], U, V = [], A = [], R, K = [], N = [], H, W = [], Z = [], G, J = [], E = [], ee, te = [], ie = [], ae, se = [], re = [], oe, ne = [], ce = [], le, pe = [], de = [], he;
+  return n = class extends r {
+    constructor() {
+      super(...arguments);
+      d(this, b);
+      d(this, k);
+      d(this, P);
+      d(this, y);
+      d(this, z);
+      d(this, v);
+      d(this, S);
+      d(this, x);
+      d(this, $);
+      d(this, w);
+      d(this, M);
+      d(this, L);
+      this._captionElement = s(this, o), this._config = {
+        nonRetinaQuality: "45",
+        retinaQuality: "20"
+      }, a(this, b, s(this, g, "")), a(this, k, (s(this, D), s(this, q, !1))), a(this, P, (s(this, _), s(this, X, !1))), a(this, y, (s(this, Y), s(this, I, "auto"))), a(this, z, (s(this, T), s(this, V, !1))), a(this, v, (s(this, A), s(this, K, 1))), a(this, S, (s(this, N), s(this, W, 1))), a(this, x, (s(this, Z), s(this, J, ""))), a(this, $, (s(this, E), s(this, te, "high"))), a(this, w, (s(this, ie), s(this, se, "eager"))), a(this, M, (s(this, re), s(this, ne, ""))), a(this, L, (s(this, ce), s(this, pe, ""))), s(this, de);
+    }
+    /**
+     * An alt text is not always necessary (e.g. in teaser cards when
+     * additional link text is provided). In this case we can leave
+     * the value of the alt attribute blank, but the attribute itself
+     * still needs to be present. That way we can signal assistive
+     * technology, that they can skip the image.
+     */
+    get alt() {
+      return p(this, b);
+    }
+    set alt(t) {
+      a(this, b, t);
+    }
+    /**
+     * If set to false, we show a blurred version of the image as
+     * placeholder before the actual image shows up. This will help
+     * to improve the perceived loading performance. Read more about
+     * the idea of lqip here:
+     * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
+     */
+    get skipLqip() {
+      return p(this, k);
+    }
+    set skipLqip(t) {
+      a(this, k, t);
+    }
+    /**
+     * Set this to true, if you want to pass a custom focal point
+     * for the image. See full documentation here:
+     * https://docs.imgix.com/apis/rendering/focalpoint-crop
+     */
+    get customFocalPoint() {
+      return p(this, P);
+    }
+    set customFocalPoint(t) {
+      a(this, P, t);
+    }
+    /**
+     * If the lazy property is set to true, the module will automatically
+     * change the decoding to async, otherwise the decoding is set to auto
+     * which leaves the handling up to the browser. Read more about the
+     * decoding attribute here:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
+     */
+    get decoding() {
+      return p(this, y);
+    }
+    set decoding(t) {
+      a(this, y, t);
+    }
+    /**
+     * Set this to true, to receive visual guidance where the custom focal
+     * point is currently set.
+     */
+    get focalPointDebug() {
+      return p(this, z);
+    }
+    set focalPointDebug(t) {
+      a(this, z, t);
+    }
+    /**
+     * Pass in a floating number between 0 (left) and 1 (right).
+     */
+    get focalPointX() {
+      return p(this, v);
+    }
+    set focalPointX(t) {
+      a(this, v, t);
+    }
+    /**
+     * Pass in a floating number between 0 (top) and 1 (bottom).
+     */
+    get focalPointY() {
+      return p(this, S);
+    }
+    set focalPointY(t) {
+      a(this, S, t);
+    }
+    /**
+     * Right now the module is heavily coupled with the image delivery
+     * service imgix and depends on the original files being stored
+     * inside AEM. You can pass in any https://cdn.img.sbb.ch img
+     * src address you find on sbb.ch to play around with it. Just
+     * strip the url parameters and paste in the plain file address.
+     * If you want to know how to best work with this module with
+     * images coming from a different source, please contact the
+     * LYNE Core Team.
+     */
+    get imageSrc() {
+      return p(this, x);
+    }
+    set imageSrc(t) {
+      a(this, x, t);
+    }
+    /**
+     * The importance attribute is fairly new attribute which should
+     * help the browser decide which resources it should prioritise
+     * during page load. We will set the attribute value based on the
+     * value, we receive in the loading attribute. 'eager', which we use
+     * for the largest image within the initial viewport, will set the
+     * attribute value to 'high'. 'lazy', which we use for images below
+     * the fold, will set the attribute value to 'low'.
+     */
+    get importance() {
+      return p(this, $);
+    }
+    set importance(t) {
+      a(this, $, t);
+    }
+    /**
+     * With the support of native image lazy loading, we can now
+     * decide whether we want to load the image immediately or only
+     * once it is close to the visible viewport. The value eager is
+     * best used for images within the initial viewport. We want to
+     * load these images as fast as possible to improve the Core Web
+     * Vitals values. lazy on the other hand works best for images
+     * which are further down the page or invisible during the loading
+     * of the initial viewport.
+     */
+    get loading() {
+      return p(this, w);
+    }
+    set loading(t) {
+      a(this, w, t);
+    }
+    /**
+     * With `performance.mark` you can log a timestamp associated with
+     * the name you define in performanceMark when a certain event is
+     * happening. In our case we will log the `performance.mark` into
+     * the PerformanceEntry API once the image is fully loaded.
+     * Performance monitoring tools like SpeedCurve or Lighthouse are
+     * then able to grab these entries from the PerformanceEntry API
+     * and give us additional information and insights about our page
+     * loading behavior. We are then also able to monitor these
+     * values over a long period to see if our performance
+     * increases or decreases over time. Best to use lowercase strings
+     * here, separate words with underscores or dashes.
+     */
+    get performanceMark() {
+      return p(this, M);
+    }
+    set performanceMark(t) {
+      a(this, M, t);
+    }
+    /**
+     * With the pictureSizesConfig object, you can pass in information
+     * into image about what kind of source elements should get
+     * rendered. mediaQueries accepts multiple Media Query entries
+     * which can get combined by defining a conditionOperator.
+     * Type is: stringified InterfaceImageAttributesSizesConfig-Object
+     * An example could look like this:
+     * {
+     *    "breakpoints": [
+     *      {
+     *        "image": {
+     *          "height": "675",
+     *          "width": "1200"
+     *        },
+     *        "mediaQueries": [
+     *          {
+     *            "conditionFeature": "min-width",
+     *            "conditionFeatureValue": {
+     *              "lyneDesignToken": true,
+     *              "value": "sbb-breakpoint-large-min"
+     *            },
+     *            "conditionOperator": false
+     *          }
+     *        ]
+     *      },
+     *      {
+     *        "image": {
+     *          "height": "549",
+     *          "width": "976"
+     *        },
+     *        "mediaQueries": [
+     *          {
+     *            "conditionFeature": "min-width",
+     *            "conditionFeatureValue": {
+     *              "lyneDesignToken": true,
+     *              "value": "sbb-breakpoint-small-min"
+     *            },
+     *            "conditionOperator": false
+     *          }
+     *        ]
+     *      },
+     *      {
+     *        "image": {
+     *          "height": "180",
+     *          "width": "320"
+     *        },
+     *        "mediaQueries": [
+     *          {
+     *            "conditionFeature": "max-width",
+     *            "conditionFeatureValue": {
+     *              "lyneDesignToken": true,
+     *              "value": "sbb-breakpoint-small-max"
+     *            },
+     *            "conditionOperator": "and"
+     *          },
+     *          {
+     *            "conditionFeature": "orientation",
+     *            "conditionFeatureValue": {
+     *              "lyneDesignToken": false,
+     *              "value": "landscape"
+     *            },
+     *            "conditionOperator": false
+     *          }
+     *        ]
+     *      }
+     *    ]
+     *  }
+     */
+    get pictureSizesConfig() {
+      return p(this, L);
+    }
+    set pictureSizesConfig(t) {
+      a(this, L, t);
+    }
+    /** Whether the image is finished loading or failed to load. */
+    get complete() {
+      return this.shadowRoot?.querySelector?.(".sbb-image__img")?.complete ?? !1;
+    }
+    updated(t) {
+      super.updated(t), this._captionElement && (this._linksInCaption = this._captionElement.querySelectorAll("a"), this._linksInCaption && this._addFocusAbilityToLinksInCaption());
+    }
+    _logPerformanceMarks() {
+      this.performanceMark && (performance.clearMarks(this.performanceMark), performance.mark(this.performanceMark));
+    }
+    _addFocusAbilityToLinksInCaption() {
+      this._linksInCaption?.forEach((t) => {
+        t.removeAttribute("tabindex");
+      });
+    }
+    _prepareImageUrl(t, e = !1) {
+      if (!t || t === "")
+        return "";
+      const i = !!t.match(/^\w+:\/\//), c = i ? new URL(t) : new URL(`http://noop/${t}`);
+      return e ? (c.searchParams.append("blur", "100"), c.searchParams.append("w", "100"), c.searchParams.append("h", "56")) : c.searchParams.append("auto", "format,compress,cs=tinysrgb"), this.customFocalPoint && (c.searchParams.append("fit", "crop"), c.searchParams.append("crop", "focalpoint"), c.searchParams.append("fp-x", this.focalPointX.toString(10)), c.searchParams.append("fp-y", this.focalPointY.toString(10)), c.searchParams.append("fp-z", "1")), this.focalPointDebug && c.searchParams.append("fp-debug", "true"), i ? c.href : c.pathname.substring(1) + c.search;
+    }
+    _preparePictureSizeConfigs() {
+      let t;
+      return this.pictureSizesConfig ? t = this.pictureSizesConfig : t = `{
+        "breakpoints": [
+          {
+            "image": {
+              "height": 675,
+              "width": 1200
+            },
+            "mediaQueries": [
+              {
+                "conditionFeature": "min-width",
+                "conditionFeatureValue": {
+                  "lyneDesignToken": true,
+                  "value": "sbb-breakpoint-large-min"
+                },
+                "conditionOperator": false
+              }
+            ]
+          },
+          {
+            "image": {
+              "height": 549,
+              "width": 976
+            },
+            "mediaQueries": [
+              {
+                "conditionFeature": "min-width",
+                "conditionFeatureValue": {
+                  "lyneDesignToken": true,
+                  "value": "sbb-breakpoint-small-min"
+                },
+                "conditionOperator": false
+              }
+            ]
+          },
+          {
+            "image": {
+              "height": 180,
+              "width": 320
+            },
+            "mediaQueries": [
+              {
+                "conditionFeature": "max-width",
+                "conditionFeatureValue": {
+                  "lyneDesignToken": true,
+                  "value": "sbb-breakpoint-zero-max"
+                },
+                "conditionOperator": false
+              }
+            ]
+          }
+        ]
+      }`, Le(t);
+    }
+    _createMediaQueryString(t) {
+      let e = "";
+      return t.forEach((i) => {
+        const c = i.conditionFeature;
+        let F;
+        i.conditionFeatureValue.lyneDesignToken ? F = Ce[i.conditionFeatureValue.value] ?? "" : F = i.conditionFeatureValue.value;
+        const f = i.conditionOperator ? ` ${i.conditionOperator} ` : "";
+        e += `(${c}: ${F})${f}`;
+      }), e;
+    }
+    _imageLoaded() {
+      this._logPerformanceMarks(), this.internals.states.add("loaded"), this.dispatchEvent(new Event("load"));
+    }
+    render() {
+      const t = this._prepareImageUrl(this.imageSrc, !0), e = this._prepareImageUrl(this.imageSrc, !1);
+      this.loading === "lazy" && (this.decoding = "async", this.importance = "low");
+      const i = this._preparePictureSizeConfigs();
+      return O`
+      <div class="sbb-image__wrapper">
+        ${this.skipLqip ? C : O`<img
+              alt=""
+              class="sbb-image__blurred"
+              src=${t}
+              width="1000"
+              height="562"
+              loading=${this.loading ?? C}
+              decoding=${this.decoding ?? C}
+            />`}
+
+        <picture>
+          <!-- render picture element sources -->
+          ${i.map((c) => {
+        const F = c.image.height, f = c.image.width, ge = this._createMediaQueryString(c.mediaQueries);
+        return O`
+              <source
+                media=${`${ge}`}
+                sizes=${`${f}px`}
+                srcset=${`${e}&w=${f}&h=${F}&q=${this._config.nonRetinaQuality} ${f}w, ${e}&w=${f * 2}&h=${F * 2}&q=${this._config.retinaQuality} ${f * 2}w`}
+              ></source>`;
+      })}
+          <img
+            alt=${this.alt || ""}
+            @load=${this._imageLoaded}
+            @error=${() => this.dispatchEvent(new Event("error"))}
+            class="sbb-image__img"
+            src=${this.imageSrc}
+            width="1000"
+            height="562"
+            loading=${this.loading ?? C}
+            decoding=${this.decoding ?? C}
+            .fetchPriority=${this.importance ?? C}
+          />
+        </picture>
+      </div>
+    `;
+    }
+  }, b = new WeakMap(), k = new WeakMap(), P = new WeakMap(), y = new WeakMap(), z = new WeakMap(), v = new WeakMap(), S = new WeakMap(), x = new WeakMap(), $ = new WeakMap(), w = new WeakMap(), M = new WeakMap(), L = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    l = [u(), m()], Q = [u(), m({ attribute: "skip-lqip", type: Boolean, reflect: !0 })], B = [u(), m({ attribute: "custom-focal-point", type: Boolean })], j = [m()], U = [u(), m({ attribute: "focal-point-debug", type: Boolean })], R = [u(), m({ attribute: "focal-point-x", type: Number })], H = [u(), m({ attribute: "focal-point-y", type: Number })], G = [u(), m({ attribute: "image-src" })], ee = [m()], ae = [m()], oe = [u(), m({ attribute: "performance-mark" })], le = [u(), m({ attribute: "picture-sizes-config" })], he = [xe(Fe)], h(n, null, l, { 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 }, g, D), h(n, null, Q, { 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 }, q, _), h(n, null, B, { 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 }, X, Y), h(n, null, j, { 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 }, I, T), h(n, null, U, { 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 }, V, A), h(n, null, R, { 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 }, K, N), h(n, null, H, { 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 }, W, Z), h(n, null, G, { 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 }, J, E), h(n, null, ee, { 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 }, te, ie), h(n, null, ae, { 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 }, se, re), h(n, null, oe, { 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 }, ne, ce), h(n, null, le, { 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 }, pe, de), h(n, null, he, { kind: "method", name: "_imageLoaded", static: !1, private: !1, access: { has: (e) => "_imageLoaded" in e, get: (e) => e._imageLoaded }, metadata: t }, null, o), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.elementName = "sbb-image", n.styles = [we, Me], n.events = {
+    error: "error",
+    load: "load"
+  }, n;
+})();
+export {
+  Te as SbbImageElement
+};

package/image.js

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

package/image.pure.js

@@ -1,2 +1,4 @@
-import { t as e } from "./image.component-Cq2t-XZu.js";
-export { e as SbbImageElement };
+import { SbbImageElement as b } from "./image/image.component.js";
+export {
+  b as SbbImageElement
+};

package/journey-header/journey-header.component.js

@@ -1,2 +1,95 @@
-import { t as e } from "../journey-header.component-CR8AO0b2.js";
-export { e as SbbJourneyHeaderElement };
+var S = (e) => {
+  throw TypeError(e);
+};
+var I = (e, s, r) => s.has(e) || S("Cannot " + r);
+var g = (e, s, r) => (I(e, s, "read from private field"), r ? r.call(e) : s.get(e)), m = (e, s, r) => s.has(e) ? S("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, r), n = (e, s, r, u) => (I(e, s, "write to private field"), u ? u.call(e, r) : s.set(e, r), r);
+import { __esDecorate as b, __runInitializers as o } from "tslib";
+import { css as N, html as B } from "lit";
+import { property as _ } from "lit/decorators.js";
+import { SbbLanguageController as M } from "../core/controllers.js";
+import { forceType as f } from "../core/decorators.js";
+import { isLean as O } from "../core/dom.js";
+import { i18nConnectionFrom as U, i18nConnectionTo as D, i18nConnectionRoundtrip as F } from "../core/i18n.js";
+import { SbbNegativeMixin as R } from "../core/mixins.js";
+import { boxSizingStyles as q } from "../core/styles.js";
+import { SbbTitleBase as L } from "../title.js";
+import "../icon.js";
+import "../screen-reader-only.js";
+const A = N`:host{--sbb-journey-header-gap: var(--sbb-spacing-fixed-1x);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-3-negative)}sbb-icon{min-width:var(--sbb-size-icon-ui-small)}.sbb-journey-header{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sbb-journey-header-gap);width:fit-content}.sbb-journey-header:dir(rtl) sbb-icon{transform:rotate(-180deg)}.sbb-journey-header>span{max-width:100%}`, C = /* @__PURE__ */ new Map([
+  ["s", "6"],
+  ["m", "5"],
+  ["l", "4"]
+]);
+let ei = (() => {
+  var c, h, d, p, a;
+  let e = R(L), s, r = [], u = [], z, y = [], v = [], x, T = [], w = [], j, $ = [], k = [];
+  return a = class extends e {
+    constructor() {
+      super();
+      m(this, c);
+      m(this, h);
+      m(this, d);
+      m(this, p);
+      n(this, c, o(this, r, "")), n(this, h, (o(this, u), o(this, y, ""))), n(this, d, (o(this, v), o(this, T, !1))), n(this, p, (o(this, w), o(this, $, O() ? "s" : "m"))), this._language = (o(this, k), new M(this)), this.level = "3", this.visualLevel = C.get(this.size) ?? null;
+    }
+    /** Origin location for the journey header. */
+    get origin() {
+      return g(this, c);
+    }
+    set origin(t) {
+      n(this, c, t);
+    }
+    /** Destination location for the journey header. */
+    get destination() {
+      return g(this, h);
+    }
+    set destination(t) {
+      n(this, h, t);
+    }
+    /** Whether the journey is a round trip. If so, the icon changes to a round-trip one. */
+    get roundTrip() {
+      return g(this, d);
+    }
+    set roundTrip(t) {
+      n(this, d, t);
+    }
+    /**
+     * Journey header size, either s, m or l.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return g(this, p);
+    }
+    set size(t) {
+      n(this, p, t);
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("size") && (this.visualLevel = C.get(this.size) ?? null);
+    }
+    render() {
+      const t = this.roundTrip ? "arrows-long-right-left-small" : "arrow-long-right-small", i = `${U[this._language.current]} ${this.origin} ${D[this._language.current]} ${this.destination} ${this.roundTrip ? F(this.origin)[this._language.current] : ""}`;
+      return B`
+      <span class="sbb-journey-header" aria-hidden="true">
+        <span class="sbb-journey-header__origin">${this.origin}</span>
+        <sbb-icon name=${t}></sbb-icon>
+        <span class="sbb-journey-header__destination">${this.destination}</span>
+      </span>
+      <sbb-screen-reader-only>${i}</sbb-screen-reader-only>
+    `;
+    }
+  }, c = new WeakMap(), h = new WeakMap(), d = new WeakMap(), p = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    s = [f(), _()], z = [f(), _()], x = [f(), _({ attribute: "round-trip", type: Boolean })], j = [_({ reflect: !0 })], b(a, null, s, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (i) => "origin" in i, get: (i) => i.origin, set: (i, l) => {
+      i.origin = l;
+    } }, metadata: t }, r, u), b(a, null, z, { kind: "accessor", name: "destination", static: !1, private: !1, access: { has: (i) => "destination" in i, get: (i) => i.destination, set: (i, l) => {
+      i.destination = l;
+    } }, metadata: t }, y, v), b(a, null, x, { kind: "accessor", name: "roundTrip", static: !1, private: !1, access: { has: (i) => "roundTrip" in i, get: (i) => i.roundTrip, set: (i, l) => {
+      i.roundTrip = l;
+    } }, metadata: t }, T, w), b(a, null, j, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, l) => {
+      i.size = l;
+    } }, metadata: t }, $, k), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.elementName = "sbb-journey-header", a.styles = [q, L.styles, A], a;
+})();
+export {
+  ei as SbbJourneyHeaderElement
+};

package/journey-header.js

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

package/journey-header.pure.js

@@ -1,2 +1,4 @@
-import { t as e } from "./journey-header.component-CR8AO0b2.js";
-export { e as SbbJourneyHeaderElement };
+import { SbbJourneyHeaderElement as o } from "./journey-header/journey-header.component.js";
+export {
+  o as SbbJourneyHeaderElement
+};

package/lead-container/lead-container.component.js

@@ -1,2 +1,23 @@
-import { t as e } from "../lead-container.component-CXKHfBiS.js";
-export { e as SbbLeadContainerElement };
+import { css as n, html as i } from "lit";
+import { SbbElement as r } from "../core/base-elements.js";
+import { boxSizingStyles as s } from "../core/styles.js";
+const o = n`:host{display:block;padding-block:var(--sbb-lead-container-padding-block)}:host(:not(:is(:state(slotted-image),[state--slotted-image]))){--sbb-lead-container-image-overlap: 0}::slotted([slot=image]){display:block;width:100%}::slotted(:is(sbb-breadcrumb-group,sbb-block-link).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-alert,sbb-alert-group).sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-m)}::slotted(sbb-title.sbb-lead-container-spacing){margin-block-start:0}::slotted(sbb-notification.sbb-lead-container-spacing){margin-block-end:var(--sbb-spacing-responsive-xxxs)}::slotted(.sbb-lead-container-lead-text){margin-block:0 var(--sbb-spacing-responsive-s);color:var(--sbb-color-iron);color:light-dark(var(--sbb-color-iron),var(--sbb-color-smoke))}@media(min-width:90rem){.sbb-lead-container-image{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive));margin-inline:auto}}.sbb-lead-container-content-wrapper{background-color:var(--sbb-lead-container-background-color);display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){.sbb-lead-container-content-wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}@media(min-width:64rem){.sbb-lead-container-content-wrapper{background-color:transparent}}.sbb-lead-container-content{position:relative;border-radius:var(--sbb-lead-container-border-radius);padding-block:var(--sbb-lead-container-content-padding-block);background-color:var(--sbb-lead-container-background-color);grid-column:1/-1}@media(min-width:64rem){.sbb-lead-container-content{grid-column:2/-2;margin-block-start:calc(-1 * var(--sbb-lead-container-image-overlap));padding-inline:var(--sbb-lead-container-padding-inline);margin-inline:calc(-1 * var(--sbb-lead-container-padding-inline))}}@media(min-width:90rem){.sbb-lead-container-content{grid-column:4/-4}}`, a = class a extends r {
+  render() {
+    return i`
+      <div class="sbb-lead-container-image">
+        <slot name="image"></slot>
+      </div>
+      <!-- Content wrapper needed because grid needs to be applied but container image should not be touched by grid. -->
+      <div class="sbb-lead-container-content-wrapper">
+        <div class="sbb-lead-container-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+a.elementName = "sbb-lead-container", a.styles = [s, o];
+let e = a;
+export {
+  e as SbbLeadContainerElement
+};

package/lead-container.js

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

package/lead-container.pure.js

@@ -1,2 +1,4 @@
-import { t as e } from "./lead-container.component-CXKHfBiS.js";
-export { e as SbbLeadContainerElement };
+import { SbbLeadContainerElement as o } from "./lead-container/lead-container.component.js";
+export {
+  o as SbbLeadContainerElement
+};

package/link/block-link/block-link.component.js

@@ -1,11 +1,10 @@
 import { SbbLinkBaseElement as e } from "../../core/base-elements.js";
-import { SbbDisabledMixin as t } from "../../core/mixins.js";
-import { SbbBlockLinkCommonElementMixin as n } from "../common.js";
-//#region src/elements/link/block-link/block-link.component.ts
-var r = class extends n(t(e)) {
-	static {
-		this.elementName = "sbb-block-link";
-	}
+import { SbbDisabledMixin as o } from "../../core/mixins.js";
+import { SbbBlockLinkCommonElementMixin as t } from "../common.js";
+const i = class i extends t(o(e)) {
+};
+i.elementName = "sbb-block-link";
+let m = i;
+export {
+  m as SbbBlockLinkElement
 };
-//#endregion
-export { r as SbbBlockLinkElement };