@sbb-esta/lyne-elements-experimental 0.52.1 → 0.53.0

package/index.js

@@ -3,6 +3,8 @@ import { SbbPearlChainElement } from "./pearl-chain.js";
 import { SbbPearlChainTimeElement } from "./pearl-chain-time.js";
 import { SbbPearlChainVerticalElement } from "./pearl-chain-vertical.js";
 import { SbbPearlChainVerticalItemElement } from "./pearl-chain-vertical-item.js";
+import { SbbTeaserHeroElement } from "./teaser-hero.js";
+import { SbbTeaserPaidElement } from "./teaser-paid.js";
 import { SbbTimetableDurationElement } from "./timetable-duration.js";
 import { SbbTimetableRowElement } from "./timetable-row.js";
 
@@ -11,6 +13,8 @@ globalThis.SbbPearlChainElement = SbbPearlChainElement;
 globalThis.SbbPearlChainTimeElement = SbbPearlChainTimeElement;
 globalThis.SbbPearlChainVerticalElement = SbbPearlChainVerticalElement;
 globalThis.SbbPearlChainVerticalItemElement = SbbPearlChainVerticalItemElement;
+globalThis.SbbTeaserHeroElement = SbbTeaserHeroElement;
+globalThis.SbbTeaserPaidElement = SbbTeaserPaidElement;
 globalThis.SbbTimetableDurationElement = SbbTimetableDurationElement;
 globalThis.SbbTimetableRowElement = SbbTimetableRowElement;
 

package/journey-summary.js

@@ -1,79 +1,79 @@
-import { SbbLanguageController as y } from "@sbb-esta/lyne-elements/core/controllers.js";
-import { defaultDateAdapter as d } from "@sbb-esta/lyne-elements/core/datetime.js";
-import { i18nTripDuration as v } from "@sbb-esta/lyne-elements/core/i18n.js";
-import { css as h, LitElement as f, html as s, nothing as o } from "lit";
-import { property as b, customElement as _ } from "lit/decorators.js";
+import { SbbLanguageController as c } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { defaultDateAdapter as u } from "@sbb-esta/lyne-elements/core/datetime.js";
+import { i18nTripDuration as h } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { css as v, LitElement as _, html as s, nothing as n } from "lit";
+import { property as b, customElement as f } from "lit/decorators.js";
 import { durationToTime as g, removeTimezoneFromISOTimeString as $ } from "./core/datetime.js";
 import "@sbb-esta/lyne-elements/divider.js";
 import "@sbb-esta/lyne-elements/screen-reader-only.js";
 import "@sbb-esta/lyne-elements/journey-header.js";
 import "./pearl-chain-time.js";
 import { i as j } from "./isValid-Df_caLp4.js";
-import { f as u } from "./format-qHhIvnY8.js";
-const x = h`*,:before,:after{box-sizing:border-box}:host{display:block}.sbb-journey-summary{--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-color-iron);display:flex;flex-direction:column}.sbb-journey-summary__via-block{display:flex}.sbb-journey-summary__vias{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-block:0;padding-inline-start:var(--sbb-spacing-fixed-1x)}.sbb-journey-summary__date{margin-block-end:var(--sbb-spacing-fixed-2x)}.sbb-journey-summary__via{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sbb-journey-summary__divider{margin-block:var(--sbb-spacing-fixed-6x)}ul li{list-style:none;display:inline}`;
-var w = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? k(t, a) : t, m = e.length - 1, p; m >= 0; m--)
-    (p = e[m]) && (i = (r ? p(t, a, i) : p(i)) || i);
-  return r && i && w(t, a, i), i;
+import { f as d } from "./format-qHhIvnY8.js";
+const w = v`*,:before,:after{box-sizing:border-box}:host{display:block}.sbb-journey-summary{--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-color-iron);display:flex;flex-direction:column}.sbb-journey-summary__via-block{display:flex}.sbb-journey-summary__vias{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-block:0;padding-inline-start:var(--sbb-spacing-fixed-1x)}.sbb-journey-summary__date{margin-block-end:var(--sbb-spacing-fixed-2x)}.sbb-journey-summary__via{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sbb-journey-summary__divider{margin-block:var(--sbb-spacing-fixed-6x)}ul li{list-style:none;display:inline}`;
+var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (e, r, o, t) => {
+  for (var i = t > 1 ? void 0 : t ? k(r, o) : r, m = e.length - 1, p; m >= 0; m--)
+    (p = e[m]) && (i = (t ? p(r, o, i) : p(i)) || i);
+  return t && i && x(r, o, i), i;
 };
-let n = class extends f {
+let a = class extends _ {
   constructor() {
-    super(...arguments), this.headerLevel = "3", this.a = null, this.b = !1, this.c = new y(this);
+    super(...arguments), this.headerLevel = "3", this._now = null, this._hasContentSlot = !1, this._language = new c(this);
   }
   set now(e) {
-    this.a = d.getValidDateOrNull(d.deserialize(e));
+    this._now = u.getValidDateOrNull(u.deserialize(e));
   }
   get now() {
-    return this.a ?? /* @__PURE__ */ new Date();
+    return this._now ?? /* @__PURE__ */ new Date();
   }
   connectedCallback() {
     var e;
-    super.connectedCallback(), this.b = !!((e = this.querySelector) != null && e.call(this, '[slot="content"]'));
+    super.connectedCallback(), this._hasContentSlot = !!((e = this.querySelector) != null && e.call(this, '[slot="content"]'));
   }
   /**  renders the date of the journey or if it is the current or next day */
-  e(e, t) {
-    const a = d, r = t ? g(t, this.c.current) : null;
+  _renderJourneyStart(e, r) {
+    const o = u, t = r ? g(r, this._language.current) : null;
     if (j(e))
       return s`
-        <time datetime=${u(e, "d") + " " + u(e, "M")}>
-          ${a.format(e).replace(",", ".")}</time
-        >${t && t > 0 ? s`,<time>
+        <time datetime=${d(e, "d") + " " + d(e, "M")}>
+          ${o.format(e).replace(",", ".")}</time
+        >${r && r > 0 ? s`,<time>
                 <sbb-screen-reader-only>
-                  ${v[this.c.current]} ${r.long}
+                  ${h[this._language.current]} ${t.long}
                 </sbb-screen-reader-only>
-                <span aria-hidden="true">${r.short}</span>
-              </time>` : o}
+                <span aria-hidden="true">${t.short}</span>
+              </time>` : n}
       `;
   }
-  f(e) {
-    const t = e.slice(0, 5);
+  _renderJourneyVias(e) {
+    const r = e.slice(0, 5);
     return s`
       <div class="sbb-journey-summary__via-block">
         <span class="sbb-journey-summary__via-text">Via</span>
-        <ul class="sbb-journey-summary__vias" role=${e.length <= 1 ? "presentation" : o}>
-          ${t.map(
-      (a, r) => s`<li class="sbb-journey-summary__via">
-                ${a}${r !== t.length - 1 && r < 4 ? s`<span>,</span>` : o}
+        <ul class="sbb-journey-summary__vias" role=${e.length <= 1 ? "presentation" : n}>
+          ${r.map(
+      (o, t) => s`<li class="sbb-journey-summary__via">
+                ${o}${t !== r.length - 1 && t < 4 ? s`<span>,</span>` : n}
               </li>`
     )}
         </ul>
       </div>
     `;
   }
-  d(e) {
-    const { vias: t, duration: a, departureWalk: r, departure: i, arrivalWalk: m, arrival: p, legs: c } = e || {};
+  _renderJourneyInformation(e) {
+    const { vias: r, duration: o, departureWalk: t, departure: i, arrivalWalk: m, arrival: p, legs: y } = e || {};
     return s`
       <div>
-        ${t && t.length > 0 ? this.f(t) : o}
+        ${r && r.length > 0 ? this._renderJourneyVias(r) : n}
         <div class="sbb-journey-summary__date">
-          ${this.e($(i), a)}
+          ${this._renderJourneyStart($(i), o)}
         </div>
         <sbb-pearl-chain-time
           .arrivalTime=${p}
           .departureTime=${i}
-          .departureWalk=${r}
+          .departureWalk=${t}
           .arrivalWalk=${m}
-          .legs=${c}
+          .legs=${y}
           .disableAnimation=${this.disableAnimation}
           .now=${this.now}
         ></sbb-pearl-chain-time>
@@ -81,50 +81,50 @@ let n = class extends f {
     `;
   }
   render() {
-    const { origin: e, destination: t } = this.trip || {};
+    const { origin: e, destination: r } = this.trip || {};
     return s`
       <div class="sbb-journey-summary">
         ${e ? s`<sbb-journey-header
               size="l"
-              .level=${this.headerLevel || o}
+              .level=${this.headerLevel || n}
               .origin=${e}
-              .destination=${t}
-              .roundTrip=${this.roundTrip ?? o}
-            ></sbb-journey-header>` : o}
-        ${this.d(this.trip)}
+              .destination=${r}
+              .roundTrip=${this.roundTrip ?? n}
+            ></sbb-journey-header>` : n}
+        ${this._renderJourneyInformation(this.trip)}
         ${this.tripBack ? s`<div>
               <sbb-divider class="sbb-journey-summary__divider"></sbb-divider>
-              ${this.d(this.tripBack)}
-            </div>` : o}
-        ${this.b ? s` <div class="sbb-journey-summary__slot">
+              ${this._renderJourneyInformation(this.tripBack)}
+            </div>` : n}
+        ${this._hasContentSlot ? s` <div class="sbb-journey-summary__slot">
               <slot name="content"></slot>
-            </div>` : o}
+            </div>` : n}
       </div>
     `;
   }
 };
-n.styles = x;
+a.styles = w;
 l([
   b({ type: Object })
-], n.prototype, "trip", 2);
+], a.prototype, "trip", 2);
 l([
   b({ attribute: "trip-back", type: Object })
-], n.prototype, "tripBack", 2);
+], a.prototype, "tripBack", 2);
 l([
   b({ attribute: "round-trip", type: Boolean })
-], n.prototype, "roundTrip", 2);
+], a.prototype, "roundTrip", 2);
 l([
   b({ attribute: "header-level" })
-], n.prototype, "headerLevel", 2);
+], a.prototype, "headerLevel", 2);
 l([
   b({ attribute: "disable-animation", type: Boolean })
-], n.prototype, "disableAnimation", 2);
+], a.prototype, "disableAnimation", 2);
 l([
   b()
-], n.prototype, "now", 1);
-n = l([
-  _("sbb-journey-summary")
-], n);
+], a.prototype, "now", 1);
+a = l([
+  f("sbb-journey-summary")
+], a);
 export {
-  n as SbbJourneySummaryElement
+  a as SbbJourneySummaryElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements-experimental",
-  "version": "0.52.1",
+  "version": "0.53.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -11,7 +11,7 @@
   "type": "module",
   "customElements": "custom-elements.json",
   "peerDependencies": {
-    "@sbb-esta/lyne-elements": "0.52.1"
+    "@sbb-esta/lyne-elements": "0.53.0"
   },
   "dependencies": {
     "lit": "^3.0.0"
@@ -71,6 +71,16 @@
       "development": "./development/pearl-chain-vertical-item.js",
       "default": "./pearl-chain-vertical-item.js"
     },
+    "./teaser-hero.js": {
+      "types": "./development/teaser-hero.d.ts",
+      "development": "./development/teaser-hero.js",
+      "default": "./teaser-hero.js"
+    },
+    "./teaser-paid.js": {
+      "types": "./development/teaser-paid.d.ts",
+      "development": "./development/teaser-paid.js",
+      "default": "./teaser-paid.js"
+    },
     "./timetable-duration.js": {
       "types": "./development/timetable-duration.d.ts",
       "development": "./development/timetable-duration.js",

package/pearl-chain-time.js

@@ -1,47 +1,47 @@
-import { SbbLanguageController as d } from "@sbb-esta/lyne-elements/core/controllers.js";
+import { SbbLanguageController as f } from "@sbb-esta/lyne-elements/core/controllers.js";
 import { defaultDateAdapter as h } from "@sbb-esta/lyne-elements/core/datetime.js";
-import { i18nDeparture as g, i18nTransferProcedures as u, i18nArrival as v } from "@sbb-esta/lyne-elements/core/i18n.js";
-import { css as y, LitElement as _, html as p, nothing as m } from "lit";
-import { property as s, customElement as x } from "lit/decorators.js";
+import { i18nDeparture as d, i18nTransferProcedures as u, i18nArrival as _ } from "@sbb-esta/lyne-elements/core/i18n.js";
+import { css as v, LitElement as y, html as p, nothing as m } from "lit";
+import { property as n, customElement as x } from "lit/decorators.js";
 import { removeTimezoneFromISOTimeString as c } from "./core/datetime.js";
 import { getDepartureArrivalTimeAttribute as w, isRideLeg as $ } from "./core/timetable.js";
 import "./pearl-chain.js";
-import { f } from "./format-qHhIvnY8.js";
-const T = y`*,:before,:after{box-sizing:border-box}:host{--sbb-pearl-chain-time-height: auto;display:block}@media (min-width: 37.5rem){:host{--sbb-pearl-chain-time-height: 1.5625rem}}@media (min-width: 52.5rem){:host{--sbb-pearl-chain-time-height: 1.75rem}}.sbb-pearl-chain__time{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;height:var(--sbb-pearl-chain-time-height)}.sbb-pearl-chain__time-walktime,.sbb-pearl-chain__time-transfer{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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:inline-flex;align-items:center}.sbb-pearl-chain__time-walktime--left{transform:translate(-.4375rem);margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem)}.sbb-pearl-chain__time-walktime--right{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-walktime-prime-symbol{float:right}.sbb-pearl-chain__time-transfer{gap:var(--sbb-spacing-fixed-1x)}.sbb-pearl-chain__time-transfer--departure{margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-pearl-chain__time-transfer--arrival{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-chain{flex:1 1 auto;align-self:center;margin-inline:var(--sbb-spacing-fixed-3x)}.sbb-pearl-chain__time-time{--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);font-weight:700;color:var(--sbb-color-charcoal)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (r, a, b, n) => {
-  for (var e = n > 1 ? void 0 : n ? A(a, b) : a, l = r.length - 1, o; l >= 0; l--)
-    (o = r[l]) && (e = (n ? o(a, b, e) : o(e)) || e);
-  return n && e && z(a, b, e), e;
+import { f as g } from "./format-qHhIvnY8.js";
+const T = v`*,:before,:after{box-sizing:border-box}:host{--sbb-pearl-chain-time-height: auto;display:block}@media (min-width: 37.5rem){:host{--sbb-pearl-chain-time-height: 1.5625rem}}@media (min-width: 52.5rem){:host{--sbb-pearl-chain-time-height: 1.75rem}}.sbb-pearl-chain__time{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;height:var(--sbb-pearl-chain-time-height)}.sbb-pearl-chain__time-walktime,.sbb-pearl-chain__time-transfer{--sbb-text-font-size: var(--sbb-font-size-text-xxs);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:inline-flex;align-items:center}.sbb-pearl-chain__time-walktime--left{transform:translate(-.4375rem);margin-inline-end:calc(var(--sbb-spacing-fixed-2x) - .4375rem)}.sbb-pearl-chain__time-walktime--right{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-walktime-prime-symbol{float:right}.sbb-pearl-chain__time-transfer{gap:var(--sbb-spacing-fixed-1x)}.sbb-pearl-chain__time-transfer--departure{margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-pearl-chain__time-transfer--arrival{margin-inline-start:calc(var(--sbb-spacing-fixed-2x) - .25rem)}.sbb-pearl-chain__time-chain{flex:1 1 auto;align-self:center;margin-inline:var(--sbb-spacing-fixed-3x)}.sbb-pearl-chain__time-time{--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);font-weight:700;color:var(--sbb-color-charcoal)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (r, a, b, s) => {
+  for (var e = s > 1 ? void 0 : s ? A(a, b) : a, l = r.length - 1, o; l >= 0; l--)
+    (o = r[l]) && (e = (s ? o(a, b, e) : o(e)) || e);
+  return s && e && z(a, b, e), e;
 };
-let t = class extends _ {
+let t = class extends y {
   constructor() {
-    super(...arguments), this.b = null, this.a = new d(this);
+    super(...arguments), this._now = null, this._language = new f(this);
   }
   set now(r) {
-    this.b = h.getValidDateOrNull(h.deserialize(r));
+    this._now = h.getValidDateOrNull(h.deserialize(r));
   }
   get now() {
-    return this.b ?? /* @__PURE__ */ new Date();
+    return this._now ?? /* @__PURE__ */ new Date();
   }
   render() {
     var l;
-    const r = this.departureTime ? c(this.departureTime) : void 0, a = this.arrivalTime ? c(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: b, renderArrivalTimeAttribute: n } = w(
+    const r = this.departureTime ? c(this.departureTime) : void 0, a = this.arrivalTime ? c(this.arrivalTime) : void 0, { renderDepartureTimeAttribute: b, renderArrivalTimeAttribute: s } = w(
       this.legs,
       this.departureWalk || 0,
       this.arrivalWalk || 0,
-      this.a.current
+      this._language.current
     ), e = (l = this.legs) == null ? void 0 : l.filter((o) => $(o));
     return p`
       <div class="sbb-pearl-chain__time">
         ${b()}
         ${r ? p`<time class="sbb-pearl-chain__time-time" datetime=${this.departureTime}>
               <span class="sbb-screen-reader-only"
-                >${g[this.a.current]}:&nbsp;</span
+                >${d[this._language.current]}:&nbsp;</span
               >
-              ${f(r, "HH:mm")}
+              ${g(r, "HH:mm")}
             </time>` : m}
         ${(e == null ? void 0 : e.length) > 1 ? p`<span class="sbb-screen-reader-only" role="paragraph">
-              ${(e == null ? void 0 : e.length) - 1} ${u[this.a.current]}
+              ${(e == null ? void 0 : e.length) - 1} ${u[this._language.current]}
             </span>` : m}
         <sbb-pearl-chain
           class="sbb-pearl-chain__time-chain"
@@ -51,36 +51,36 @@ let t = class extends _ {
         ></sbb-pearl-chain>
         ${a ? p`<time class="sbb-pearl-chain__time-time" datetime=${this.arrivalTime}>
               <span class="sbb-screen-reader-only"
-                >${v[this.a.current]}:&nbsp;</span
+                >${_[this._language.current]}:&nbsp;</span
               >
-              ${f(a, "HH:mm")}
+              ${g(a, "HH:mm")}
             </time>` : m}
-        ${n()}
+        ${s()}
       </div>
     `;
   }
 };
 t.styles = T;
 i([
-  s({ type: Array })
+  n({ type: Array })
 ], t.prototype, "legs", 2);
 i([
-  s({ attribute: "departure-time" })
+  n({ attribute: "departure-time" })
 ], t.prototype, "departureTime", 2);
 i([
-  s({ attribute: "arrival-time" })
+  n({ attribute: "arrival-time" })
 ], t.prototype, "arrivalTime", 2);
 i([
-  s({ attribute: "departure-walk", type: Number })
+  n({ attribute: "departure-walk", type: Number })
 ], t.prototype, "departureWalk", 2);
 i([
-  s({ attribute: "arrival-walk", type: Number })
+  n({ attribute: "arrival-walk", type: Number })
 ], t.prototype, "arrivalWalk", 2);
 i([
-  s({ attribute: "disable-animation", type: Boolean })
+  n({ attribute: "disable-animation", type: Boolean })
 ], t.prototype, "disableAnimation", 2);
 i([
-  s()
+  n()
 ], t.prototype, "now", 1);
 t = i([
   x("sbb-pearl-chain-time")

package/pearl-chain.js

@@ -1,129 +1,129 @@
 import { defaultDateAdapter as O } from "@sbb-esta/lyne-elements/core/datetime.js";
-import { css as q, LitElement as K, html as _, nothing as H } from "lit";
+import { css as q, LitElement as K, html as v, nothing as H } from "lit";
 import { property as y, customElement as Q } from "lit/decorators.js";
 import { styleMap as J } from "lit/directives/style-map.js";
 import { removeTimezoneFromISOTimeString as n } from "./core/datetime.js";
 import { isRideLeg as U } from "./core/timetable.js";
 import { d as m } from "./differenceInMinutes-CDpgJIgL.js";
 import { t as f } from "./constants-ClrwyPF-.js";
-function W(a, r) {
-  const e = f(a), l = f(r);
-  return e.getTime() > l.getTime();
+function W(e, r) {
+  const a = f(e), t = f(r);
+  return a.getTime() > t.getTime();
 }
-function I(a, r) {
-  const e = f(a), l = f(r);
-  return +e < +l;
+function R(e, r) {
+  const a = f(e), t = f(r);
+  return +a < +t;
 }
 const Z = q`*,:before,:after{box-sizing:border-box}:host{--sbb-pearl-chain-height: var(--sbb-border-width-2x);--sbb-pearl-chain-spacing-small: var(--sbb-spacing-fixed-1x);--sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color);--sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption);--sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);--sbb-pearl-chain-leg-width: 100%;--sbb-pearl-chain-bullet-size-start-end: .625rem;--sbb-pearl-chain-bullet-size-stop: .5rem;--sbb-pearl-chain-bullet-color: var(--sbb-color-charcoal);--sbb-pearl-chain-bullet-color-past: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-irrelevant: var(--sbb-color-metal);--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-red);--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);--sbb-pearl-chain-bullet-animation-duration: 1.92s;--sbb-pearl-chain-bullet-animation-easing: ease-out;--sbb-pearl-chain-bullet-crossed-width: .88375rem;--sbb-pearl-chain-bullet-crossed-height: .21875rem;--sbb-pearl-chain-bullet-crossed-border-width: .09375rem;display:block}.sbb-pearl-chain{position:relative;display:flex;justify-content:space-between;flex-wrap:nowrap;color:var(--sbb-pearl-chain-color);width:100%;padding-block:calc((var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2);padding-inline-end:var(--sbb-pearl-chain-bullet-size-start-end)}.sbb-pearl-chain__bullet{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%;min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);content:"";position:absolute;background-color:currentcolor;inset-block-start:0;z-index:3}@media (forced-colors: active){.sbb-pearl-chain__bullet{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__bullet:first-of-type{inset-inline-start:0}.sbb-pearl-chain__bullet:last-of-type{inset-inline-end:0}.sbb-pearl-chain__leg{flex-shrink:0;flex-grow:0;position:relative;height:var(--sbb-pearl-chain-height);border-inline-end:var(--sbb-pearl-chain-spacing-small) solid Canvas;background-color:currentcolor;width:var(--sbb-pearl-chain-leg-width);display:flex;align-items:center}@media (forced-colors: active){.sbb-pearl-chain__leg{background-color:CanvasText}.sbb-pearl-chain--past .sbb-pearl-chain__leg{background-color:GrayText}}.sbb-pearl-chain__leg:last-of-type{border:none}.sbb-pearl-chain__stop{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%;min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas;position:relative;z-index:2}@media (forced-colors: active){.sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__bullet--future{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%}@media (forced-colors: active){.sbb-pearl-chain__bullet--future{--sbb-pearl-chain-bullet-color: CanvasText}}.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);color:var(--sbb-pearl-chain-color-past)}@media (forced-colors: active){.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{--sbb-pearl-chain-bullet-color: GrayText !important}}@media (forced-colors: active){.sbb-pearl-chain__leg--past,.sbb-pearl-chain--past,.sbb-pearl-chain__leg--past:after,.sbb-pearl-chain__leg--progress:after,.sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,.sbb-pearl-chain--progress,.sbb-pearl-chain__bullet--past{background-color:GrayText!important}}.sbb-pearl-chain__bullet--progress{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);background:var(--sbb-pearl-chain-bullet-color)}@media (forced-colors: active){.sbb-pearl-chain__bullet--progress{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);color:var(--sbb-pearl-chain-color-disruption)}@media (forced-colors: active){.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{--sbb-pearl-chain-bullet-color: Highlight}}@media (forced-colors: active){.sbb-pearl-chain__bullet--departure-disruption,.sbb-pearl-chain--arrival-disruption,.sbb-pearl-chain--departure-disruption,.sbb-pearl-chain__leg--disruption{color:Highlight;background:Highlight}}.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption)}@media (forced-colors: active){.sbb-pearl-chain__leg--disruption .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: Highlight}}.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past)}@media (forced-colors: active){.sbb-pearl-chain__leg--past .sbb-pearl-chain__stop{--sbb-pearl-chain-bullet-color: GrayText !important}}.sbb-pearl-chain__leg--disruption:after{background-color:unset;background-image:linear-gradient(to right,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-x;background-size:calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);inset-inline-end:var(--sbb-pearl-chain-height)}@media (forced-colors: active){.sbb-pearl-chain__leg--disruption:after{background:unset;border-block-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain__leg--skipped{color:var(--sbb-pearl-chain-color-disruption)}.sbb-pearl-chain__leg--skipped:after{background-color:unset;background-image:linear-gradient(to right,currentcolor 0%,currentcolor 50%,Canvas 50%);background-repeat:repeat-x;background-size:calc(2 * var(--sbb-pearl-chain-spacing-small)) var(--sbb-pearl-chain-height);inset-inline-end:var(--sbb-pearl-chain-height)}@media (forced-colors: active){.sbb-pearl-chain__leg--skipped:after{background:unset;border-block-start:.0625rem dashed Highlight;transform:translateY(.0625rem)}}.sbb-pearl-chain__stop--departure-skipped{min-height:var(--sbb-pearl-chain-bullet-size-stop);min-width:var(--sbb-pearl-chain-bullet-size-stop);height:var(--sbb-pearl-chain-bullet-size-stop);width:var(--sbb-pearl-chain-bullet-size-stop);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain__stop--departure-skipped:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media (forced-colors: active){.sbb-pearl-chain__stop--departure-skipped:before{background:Highlight}}.sbb-pearl-chain--arrival-skipped,.sbb-pearl-chain--departure-skipped{min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);border:var(--sbb-pearl-chain-bullet-border-width) solid currentcolor;background:Canvas}.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%) rotate(45deg);border-block-start:var(--sbb-pearl-chain-bullet-crossed-border-width) solid canvas;background:var(--sbb-pearl-chain-bullet-color-disruption);height:var(--sbb-pearl-chain-bullet-crossed-height);width:var(--sbb-pearl-chain-bullet-crossed-width)}@media (forced-colors: active){.sbb-pearl-chain--arrival-skipped:before,.sbb-pearl-chain--departure-skipped:before{background:Highlight}}.sbb-pearl-chain__leg:after{content:"";position:absolute;inset-block:0;inset-inline-start:0;background-color:currentcolor;border-radius:var(--sbb-pearl-chain-height);z-index:1}@media (forced-colors: active){.sbb-pearl-chain__leg:after{background-color:CanvasText}.sbb-pearl-chain--past .sbb-pearl-chain__leg:after{background-color:GrayText}}.sbb-pearl-chain__leg:last-of-type:after{inset-inline-end:calc(-1 * var(--sbb-pearl-chain-height))}.sbb-pearl-chain__leg--progress:after{background-color:var(--sbb-pearl-chain-color-past);width:var(--sbb-pearl-chain-leg-status)}.sbb-pearl-chain__position{background:var(--sbb-pearl-chain-bullet-color);color:var(--sbb-pearl-chain-bullet-color);border-color:var(--sbb-pearl-chain-bullet-color);border-radius:100%;min-height:var(--sbb-pearl-chain-bullet-size-start-end);min-width:var(--sbb-pearl-chain-bullet-size-start-end);height:var(--sbb-pearl-chain-bullet-size-start-end);width:var(--sbb-pearl-chain-bullet-size-start-end);--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);animation:pearl-chain-bullet-position-pulse var(--sbb-pearl-chain-bullet-animation-duration) var(--sbb-pearl-chain-bullet-animation-easing) infinite;position:absolute;inset-block-start:-200%;z-index:4;inset-inline-start:var(--sbb-pearl-chain-status-position)}@media (forced-colors: active){.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: CanvasText}}@media (forced-colors: active){.sbb-pearl-chain__position{--sbb-pearl-chain-bullet-color: Highlight}}@keyframes pearl-chain-bullet-position-pulse{0%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}25%{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}50%{box-shadow:0 0 0 .1875rem var(--sbb-color-red-alpha-20)}to{box-shadow:0 0 0 0 var(--sbb-pearl-chain-bullet-color-disruption)}}.sbb-pearl-chain__position--no-animation{animation:unset}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var L = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, k = (a, r, e, l) => {
-  for (var s = l > 1 ? void 0 : l ? rr(r, e) : r, o = a.length - 1, c; o >= 0; o--)
-    (c = a[o]) && (s = (l ? c(r, e, s) : c(s)) || s);
-  return l && s && L(r, e, s), s;
+var L = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, k = (e, r, a, t) => {
+  for (var i = t > 1 ? void 0 : t ? rr(r, a) : r, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (i = (t ? c(r, a, i) : c(i)) || i);
+  return t && i && L(r, a, i), i;
 };
 let d = class extends K {
   constructor() {
-    super(...arguments), this.b = null;
+    super(...arguments), this._now = null;
   }
-  set now(a) {
-    this.b = O.getValidDateOrNull(O.deserialize(a));
+  set now(e) {
+    this._now = O.getValidDateOrNull(O.deserialize(e));
   }
   get now() {
-    return this.b;
+    return this._now;
   }
-  d(a) {
-    return a == null ? void 0 : a.reduce((r, e) => {
+  _getAllDuration(e) {
+    return e == null ? void 0 : e.reduce((r, a) => {
       var o, c;
-      const l = n((o = e.arrival) == null ? void 0 : o.time), s = n((c = e.departure) == null ? void 0 : c.time);
-      return l && s ? r + m(
-        n(e.arrival.time),
-        n(e.departure.time)
+      const t = n((o = a.arrival) == null ? void 0 : o.time), i = n((c = a.departure) == null ? void 0 : c.time);
+      return t && i ? r + m(
+        n(a.arrival.time),
+        n(a.departure.time)
       ) : r;
     }, 0);
   }
-  e(a) {
-    return a == null ? void 0 : a.every((r) => {
-      var e, l;
-      return (l = (e = r == null ? void 0 : r.serviceJourney) == null ? void 0 : e.serviceAlteration) == null ? void 0 : l.cancelled;
+  _isAllCancelled(e) {
+    return e == null ? void 0 : e.every((r) => {
+      var a, t;
+      return (t = (a = r == null ? void 0 : r.serviceJourney) == null ? void 0 : a.serviceAlteration) == null ? void 0 : t.cancelled;
     });
   }
-  f(a, r) {
-    var s, o;
-    const e = n((s = r.arrival) == null ? void 0 : s.time), l = n((o = r.departure) == null ? void 0 : o.time);
-    if (e && l) {
+  _getRelativeDuration(e, r) {
+    var i, o;
+    const a = n((i = r.arrival) == null ? void 0 : i.time), t = n((o = r.departure) == null ? void 0 : o.time);
+    if (a && t) {
       const c = m(
         n(r.arrival.time),
         n(r.departure.time)
-      ), v = this.d(a);
-      return v === 0 ? 100 : c / v * 100;
+      ), _ = this._getAllDuration(e);
+      return _ === 0 ? 100 : c / _ * 100;
     }
     return 0;
   }
-  c(a, r, e) {
-    if (!r || !e)
+  _getProgress(e, r, a) {
+    if (!r || !a)
       return 0;
-    const l = m(e, r), s = m(a, r);
-    return l && s / l * 100;
+    const t = m(a, r), i = m(e, r);
+    return t && i / t * 100;
   }
-  a(a, r, e) {
-    return e && r && I(e, a) && W(r, a) ? "progress" : r && I(r, a) ? "past" : "future";
+  _getStatus(e, r, a) {
+    return a && r && R(a, e) && W(r, e) ? "progress" : r && R(r, e) ? "past" : "future";
   }
-  g(a, r, e) {
-    const l = this.c(a, r, e);
-    if (l < 0 && l > 100) return;
-    const s = () => ({
-      "--sbb-pearl-chain-status-position": `${l}%`,
-      ...l >= 50 ? { transform: "translateX(-100%)" } : {}
+  _renderPosition(e, r, a) {
+    const t = this._getProgress(e, r, a);
+    if (t < 0 && t > 100) return;
+    const i = () => ({
+      "--sbb-pearl-chain-status-position": `${t}%`,
+      ...t >= 50 ? { transform: "translateX(-100%)" } : {}
     }), o = this.disableAnimation ? "sbb-pearl-chain__position--no-animation" : "";
-    return _`<span
-      style=${J(s())}
+    return v`<span
+      style=${J(i())}
       class="sbb-pearl-chain__position ${o}"
     ></span>`;
   }
   render() {
-    var z, x, T, C;
-    const a = this.now ?? /* @__PURE__ */ new Date(), r = (z = this.legs) == null ? void 0 : z.filter((t) => U(t)), e = (r == null ? void 0 : r.length) && n((T = (x = r[0]) == null ? void 0 : x.departure) == null ? void 0 : T.time), l = (r == null ? void 0 : r.length) && n((C = r[(r == null ? void 0 : r.length) - 1].arrival) == null ? void 0 : C.time), s = (() => {
-      var t, b, i, p;
-      return r && ((b = (t = r[0]) == null ? void 0 : t.serviceJourney) != null && b.stopPoints) && ((p = (i = r[0]) == null ? void 0 : i.serviceJourney) == null ? void 0 : p.stopPoints[0].stopStatus) === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "";
+    var z, x, S, C;
+    const e = this.now ?? /* @__PURE__ */ new Date(), r = (z = this.legs) == null ? void 0 : z.filter((l) => U(l)), a = (r == null ? void 0 : r.length) && n((S = (x = r[0]) == null ? void 0 : x.departure) == null ? void 0 : S.time), t = (r == null ? void 0 : r.length) && n((C = r[(r == null ? void 0 : r.length) - 1].arrival) == null ? void 0 : C.time), i = (() => {
+      var l, b, s, p;
+      return r && ((b = (l = r[0]) == null ? void 0 : l.serviceJourney) != null && b.stopPoints) && ((p = (s = r[0]) == null ? void 0 : s.serviceJourney) == null ? void 0 : p.stopPoints[0].stopStatus) === "NOT_SERVICED" ? "sbb-pearl-chain--departure-skipped" : "";
     })(), o = (() => {
-      var i;
-      const t = r && r[r.length - 1], b = t && ((i = t.serviceJourney) == null ? void 0 : i.stopPoints);
+      var s;
+      const l = r && r[r.length - 1], b = l && ((s = l.serviceJourney) == null ? void 0 : s.stopPoints);
       return b && b[b.length - 1].stopStatus === "NOT_SERVICED" ? "sbb-pearl-chain--arrival-skipped" : "";
     })(), c = (() => {
-      var t, b, i;
-      return r && ((i = (b = (t = r[0]) == null ? void 0 : t.serviceJourney) == null ? void 0 : b.serviceAlteration) != null && i.cancelled) ? "sbb-pearl-chain--departure-disruption" : "";
-    })(), v = (() => {
-      var t, b, i;
-      return r && ((i = (b = (t = r[r.length - 1]) == null ? void 0 : t.serviceJourney) == null ? void 0 : b.serviceAlteration) != null && i.cancelled) ? "sbb-pearl-chain--arrival-disruption" : "";
-    })(), G = r && e && l && !c ? "sbb-pearl-chain__bullet--" + this.a(a, l, e) : "", R = r && l && !v ? "sbb-pearl-chain__bullet--" + this.a(a, l) : "";
-    return this.e(r) ? _`
+      var l, b, s;
+      return r && ((s = (b = (l = r[0]) == null ? void 0 : l.serviceJourney) == null ? void 0 : b.serviceAlteration) != null && s.cancelled) ? "sbb-pearl-chain--departure-disruption" : "";
+    })(), _ = (() => {
+      var l, b, s;
+      return r && ((s = (b = (l = r[r.length - 1]) == null ? void 0 : l.serviceJourney) == null ? void 0 : b.serviceAlteration) != null && s.cancelled) ? "sbb-pearl-chain--arrival-disruption" : "";
+    })(), I = r && a && t && !c ? "sbb-pearl-chain__bullet--" + this._getStatus(e, t, a) : "", G = r && t && !_ ? "sbb-pearl-chain__bullet--" + this._getStatus(e, t) : "";
+    return this._isAllCancelled(r) ? v`
         <div class="sbb-pearl-chain">
           <span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
           <div class="sbb-pearl-chain__leg sbb-pearl-chain__leg--disruption"></div>
           <span class="sbb-pearl-chain__bullet sbb-pearl-chain--departure-disruption"></span>
         </div>
-      ` : _`
+      ` : v`
       <div class="sbb-pearl-chain">
         <span
-          class="sbb-pearl-chain__bullet ${G} ${s} ${c}"
+          class="sbb-pearl-chain__bullet ${I} ${i} ${c}"
         ></span>
-        ${r == null ? void 0 : r.map((t, b) => {
-      var $, N, D, E, P, A;
-      const { stopPoints: i, serviceAlteration: p } = (t == null ? void 0 : t.serviceJourney) || {}, V = this.f(r, t), h = n(($ = t.departure) == null ? void 0 : $.time), u = n((N = t.arrival) == null ? void 0 : N.time), B = i && ((D = i[i.length - 1]) == null ? void 0 : D.stopStatus) === "NOT_SERVICED", j = i && ((E = i[i.length - 1]) == null ? void 0 : E.stopStatus) === "PLANNED", S = i && ((P = i[0]) == null ? void 0 : P.stopStatus) === "NOT_SERVICED", w = b > 0 && r[b - 1].serviceJourney.stopPoints, M = w && ((A = w[w.length - 1]) == null ? void 0 : A.stopStatus) === "NOT_SERVICED", Y = B || S && j ? "sbb-pearl-chain__leg--skipped" : "", F = S || M ? "sbb-pearl-chain__stop--departure-skipped" : "", g = p != null && p.cancelled ? "sbb-pearl-chain__leg--disruption" : "", X = !g && this.a(a, h, u) && "sbb-pearl-chain__leg--" + this.a(a, u, h);
-      return _` <div
+        ${r == null ? void 0 : r.map((l, b) => {
+      var D, P, $, N, A, E;
+      const { stopPoints: s, serviceAlteration: p } = (l == null ? void 0 : l.serviceJourney) || {}, V = this._getRelativeDuration(r, l), h = n((D = l.departure) == null ? void 0 : D.time), u = n((P = l.arrival) == null ? void 0 : P.time), B = s && (($ = s[s.length - 1]) == null ? void 0 : $.stopStatus) === "NOT_SERVICED", j = s && ((N = s[s.length - 1]) == null ? void 0 : N.stopStatus) === "PLANNED", T = s && ((A = s[0]) == null ? void 0 : A.stopStatus) === "NOT_SERVICED", w = b > 0 && r[b - 1].serviceJourney.stopPoints, M = w && ((E = w[w.length - 1]) == null ? void 0 : E.stopStatus) === "NOT_SERVICED", Y = B || T && j ? "sbb-pearl-chain__leg--skipped" : "", F = T || M ? "sbb-pearl-chain__stop--departure-skipped" : "", g = p != null && p.cancelled ? "sbb-pearl-chain__leg--disruption" : "", X = !g && this._getStatus(e, h, u) && "sbb-pearl-chain__leg--" + this._getStatus(e, u, h);
+      return v` <div
             class="sbb-pearl-chain__leg ${X} ${g} ${Y}"
             style=${J({
         "--sbb-pearl-chain-leg-width": `${V}%`,
-        ...this.a(a, u, h) === "progress" && !g ? {
-          "--sbb-pearl-chain-leg-status": `${this.c(a, h, u)}%`
+        ...this._getStatus(e, u, h) === "progress" && !g ? {
+          "--sbb-pearl-chain-leg-status": `${this._getProgress(e, h, u)}%`
         } : {}
       })}
           >
-            ${b > 0 && b < r.length ? _`<span class="sbb-pearl-chain__stop ${F}"></span>` : H}
-            ${this.a(a, u, h) === "progress" && !g ? this.g(a, h, u) : H}
+            ${b > 0 && b < r.length ? v`<span class="sbb-pearl-chain__stop ${F}"></span>` : H}
+            ${this._getStatus(e, u, h) === "progress" && !g ? this._renderPosition(e, h, u) : H}
           </div>`;
     })}
         <span
-          class="sbb-pearl-chain__bullet ${R} ${o} ${v}"
+          class="sbb-pearl-chain__bullet ${G} ${o} ${_}"
         ></span>
       </div>
     `;

package/teaser-hero/teaser-hero.d.ts

@@ -0,0 +1,26 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
+import { CSSResultGroup, TemplateResult } from 'lit';
+
+/**
+ * It displays an image and an action call within a panel.
+ *
+ * @slot - Use the unnamed slot to add text content to the panel
+ * @slot link-content - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ */
+export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Panel link text. */
+    linkContent?: string;
+    /** Image src will be passed to `sbb-image`. */
+    imageSrc?: string;
+    /** Image alt text will be passed to `sbb-image`. */
+    imageAlt?: string;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-hero': SbbTeaserHeroElement;
+    }
+}
+//# sourceMappingURL=teaser-hero.d.ts.map

package/teaser-hero/teaser-hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.d.ts","sourceRoot":"","sources":["../../../src/elements-experimental/teaser-hero/teaser-hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AACnF,OAAO,EAAE,KAAK,cAAc,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMxE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,mDAAmD,CAAC;AAE3D;;;;;;GAMG;AACH,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,uBAAuB;IACyB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErE,+CAA+C;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D,oDAAoD;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;cAE5C,cAAc,IAAI,cAAc;CAyBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/teaser-hero.d.ts

@@ -0,0 +1,2 @@
+export * from './teaser-hero/teaser-hero.js';
+//# sourceMappingURL=teaser-hero.d.ts.map