@sbb-esta/lyne-elements 0.52.0 → 0.52.1

package/train/train-formation.js

@@ -1,71 +1,70 @@
 import { css as c, LitElement as d, html as l } from "lit";
-import { property as f, state as p, customElement as m } from "lit/decorators.js";
-import { ref as h } from "lit/directives/ref.js";
+import { property as f, state as h, customElement as m } from "lit/decorators.js";
+import { ref as p } from "lit/directives/ref.js";
 import { SbbConnectedAbortController as u, SbbLanguageController as g } from "../core/controllers.js";
-import { i18nSectorShort as v, i18nSector as w, i18nTrains as _ } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as k } from "../core/mixins.js";
-import { AgnosticResizeObserver as y } from "../core/observers.js";
-const x = c`*,:before,:after{box-sizing:border-box}:host{--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem;display:block}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-train-formation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
-var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (r, t, i, a) => {
-  for (var o = a > 1 ? void 0 : a ? z(t, i) : t, s = r.length - 1, b; s >= 0; s--)
-    (b = r[s]) && (o = (a ? b(t, i, o) : b(o)) || o);
-  return a && o && C(t, i, o), o;
+import { i18nSectorShort as v, i18nSector as w, i18nTrains as k } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as _ } from "../core/mixins.js";
+import { AgnosticResizeObserver as x } from "../core/observers.js";
+const y = c`*,:before,:after{box-sizing:border-box}:host{--sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);--sbb-train-formation-background-color: var(--sbb-color-white);--sbb-train-formation-sector-label-color: var(--sbb-color-metal);--sbb-train-formation-sector-line-color: var(--sbb-color-smoke);--sbb-train-formation-blocked-passage-width: 1rem;display:block}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}:host([hide-wagon-label]){--sbb-train-formation-wagon-label-display: none}.sbb-train-formation{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-train-formation::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-train-formation::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-train-formation::-webkit-scrollbar-button,.sbb-train-formation::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-train-formation{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-inline-padding);background-color:var(--sbb-train-formation-background-color)}.sbb-train-formation:before{grid-area:start}.sbb-train-formation:after{grid-area:end}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-width);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-width);--_total-count: calc( var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count) );--_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--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);flex:0 0 var(--_sector-width);color:var(--sbb-train-formation-sector-label-color);text-align:center;position:relative;display:inline-block;margin-block-end:var(--sbb-spacing-fixed-4x);max-width:var(--_sector-width)}.sbb-train-formation__sector:before{content:"";position:absolute;top:50%;right:0;bottom:50%;left:0;height:1px;background-color:var(--sbb-train-formation-sector-line-color)}.sbb-train-formation__sector-sticky-wrapper{background-color:var(--sbb-train-formation-background-color);position:sticky;inset:auto 0;padding:0 var(--sbb-spacing-fixed-1x);margin:0 var(--sbb-spacing-fixed-2x);overflow:hidden;white-space:nowrap}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}`;
+var C = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (r, a, i, t) => {
+  for (var o = t > 1 ? void 0 : t ? L(a, i) : a, s = r.length - 1, b; s >= 0; s--)
+    (b = r[s]) && (o = (t ? b(a, i, o) : b(o)) || o);
+  return t && o && C(a, i, o), o;
 };
-let n = class extends k(d) {
+let n = class extends _(d) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this._sectors = [], this._contentResizeObserver = new y(() => this._applyCssWidth()), this._abort = new u(this), this._language = new g(this);
+    super(...arguments), this.listChildLocalNames = ["sbb-train"], this.hideWagonLabel = !1, this.e = [], this.b = new x(() => this.f()), this.g = new u(this), this.c = new g(this);
   }
   connectedCallback() {
     super.connectedCallback();
-    const r = this._abort.signal;
-    this.addEventListener("trainSlotChange", (t) => this._readSectors(t), { signal: r }), this.addEventListener("sectorChange", (t) => this._readSectors(t), { signal: r });
+    const r = this.g.signal;
+    this.addEventListener("trainSlotChange", (a) => this.d(a), { signal: r }), this.addEventListener("sectorChange", (a) => this.d(a), { signal: r });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._contentResizeObserver.disconnect();
+    super.disconnectedCallback(), this.b.disconnect();
   }
   /**
    * Apply width of the scrollable space of the formation as a css variable. This will be used from
    * every slotted sbb-train for the direction-label
    */
-  _applyCssWidth() {
-    const r = this._formationDiv.getBoundingClientRect().width;
-    this._formationDiv.style.setProperty("--sbb-train-direction-width", `${r}px`);
+  f() {
+    const r = this.a.getBoundingClientRect().width;
+    this.a.style.setProperty("--sbb-train-direction-width", `${r}px`);
   }
-  _readSectors(r) {
-    var t;
-    r == null || r.stopPropagation(), this._sectors = Array.from(
-      ((t = this.querySelectorAll) == null ? void 0 : t.call(
+  d(r) {
+    var a;
+    r == null || r.stopPropagation(), this.e = Array.from(
+      ((a = this.querySelectorAll) == null ? void 0 : a.call(
         this,
         "sbb-train-wagon,sbb-train-blocked-passage"
       )) ?? []
     ).reduce(
-      (i, a) => {
+      (i, t) => {
         const o = i[i.length - 1];
-        if (a.localName === "sbb-train-wagon") {
-          const s = a.sector ?? a.getAttribute("sector");
+        if (t.localName === "sbb-train-wagon") {
+          const s = t.sector ?? t.getAttribute("sector");
           !o.label && s && (o.label = s), !s || o.label === s ? o.wagonCount++ : i.push({
             label: s,
             wagonCount: 1,
             blockedPassageCount: 0
           });
-        } else
-          a.localName === "sbb-train-blocked-passage" && o.blockedPassageCount++;
+        } else t.localName === "sbb-train-blocked-passage" && o.blockedPassageCount++;
         return i;
       },
       [{ wagonCount: 0, blockedPassageCount: 0 }]
     );
   }
-  async _updateFormationDiv(r) {
-    r && (this._contentResizeObserver.disconnect(), this._formationDiv = r, this._contentResizeObserver.observe(this._formationDiv), await this.updateComplete, this._applyCssWidth());
+  async h(r) {
+    r && (this.b.disconnect(), this.a = r, this.b.observe(this.a), await this.updateComplete, this.f());
   }
   willUpdate(r) {
-    super.willUpdate(r), r.has("listChildren") && this._readSectors();
+    super.willUpdate(r), r.has("listChildren") && this.d();
   }
   render() {
     return l`
-      <div class="sbb-train-formation" ${h(this._updateFormationDiv)}>
+      <div class="sbb-train-formation" ${p(this.h)}>
         <div class="sbb-train-formation__sectors" aria-hidden="true">
-          ${this._sectors.map(
+          ${this.e.map(
       (r) => l`<span
                 class="sbb-train-formation__sector"
                 style="
@@ -73,7 +72,7 @@ let n = class extends k(d) {
                 --sbb-train-formation-wagon-blocked-passage-count: ${r.blockedPassageCount}"
               >
                 <span class="sbb-train-formation__sector-sticky-wrapper">
-                  ${`${r.wagonCount === 1 && r.label ? v[this._language.current] : w[this._language.current]} ${r.label ? r.label : ""}`}
+                  ${`${r.wagonCount === 1 && r.label ? v[this.c.current] : w[this.c.current]} ${r.label ? r.label : ""}`}
                 </span>
               </span>`
     )}
@@ -82,20 +81,20 @@ let n = class extends k(d) {
         <div class="sbb-train-formation__trains">
           ${this.renderList({
       class: "sbb-train-formation__train-list",
-      ariaLabel: _[this._language.current]
+      ariaLabel: k[this.c.current]
     })}
         </div>
       </div>
     `;
   }
 };
-n.styles = x;
+n.styles = y;
 e([
   f({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })
 ], n.prototype, "hideWagonLabel", 2);
 e([
-  p()
-], n.prototype, "_sectors", 2);
+  h()
+], n.prototype, "e", 2);
 n = e([
   m("sbb-train-formation")
 ], n);

package/train/train-wagon.js

@@ -2,22 +2,22 @@ import { css as d, LitElement as w, nothing as t } from "lit";
 import { property as b, customElement as m } from "lit/decorators.js";
 import { html as s, unsafeStatic as p } from "lit/static-html.js";
 import { SbbLanguageController as y } from "../core/controllers.js";
-import { EventEmitter as u } from "../core/eventing.js";
-import { i18nSector as _, i18nWagonLabel as f, i18nClass as h, i18nBlockedPassage as v, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as k } from "../core/i18n.js";
+import { EventEmitter as f } from "../core/eventing.js";
+import { i18nSector as v, i18nWagonLabel as u, i18nClass as h, i18nBlockedPassage as _, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as k } from "../core/i18n.js";
 import { SbbNamedSlotListMixin as L } from "../core/mixins.js";
 import "../icon.js";
 import "../timetable-occupancy-icon.js";
 const z = d`*,:before,:after{box-sizing:border-box}:host{--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-inner-padding: var(--sbb-spacing-fixed-3x);--sbb-train-wagon-shape-border-radius: var(--sbb-train-formation-wagon-border-radius);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-shape-color-closed: var(--sbb-color-metal);--sbb-train-wagon-shape-width: var(--sbb-border-width-1x);--sbb-train-wagon-gap: var(--sbb-spacing-fixed-2x);--sbb-train-wagon-icons-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-icons-height: .875rem;display:block}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color-closed: CanvasText}}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-wagon-gap)}.sbb-train-wagon__compartment{list-style:none;margin:0;padding:0;font-size:inherit;display:grid;grid-template:"label label" auto "occupancy class" 1fr/1fr 1fr;position:relative;width:100%}:host([type=closed]) .sbb-train-wagon__compartment:before,:host(:not([data-has-visible-wagon-content])) .sbb-train-wagon__compartment:before{content:"";grid-area:occupancy/span 2;height:var(--sbb-train-wagon-height)}.sbb-train-wagon__compartment:after{content:"";display:block;position:absolute;inset-inline:0;inset-block:auto 0;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);border-radius:var(--sbb-train-wagon-shape-border-radius)}:host([type=wagon]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color)}:host([type=closed]) .sbb-train-wagon__compartment:after{border:var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color-closed)}.sbb-train-wagon__occupancy,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center}.sbb-train-wagon__label{--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);grid-area:label;text-align:center;display:var(--sbb-train-formation-wagon-label-display, inline-block);min-height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-train-wagon__occupancy{grid-area:occupancy;padding-inline-start:var(--sbb-train-wagon-inner-padding)}.sbb-train-wagon__class{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);grid-area:class;padding-inline-end:var(--sbb-train-wagon-inner-padding);margin-inline-start:auto}.sbb-train-wagon__locomotive{grid-area:occupancy/span 2}.sbb-train-wagon__icons{--sbb-icon-svg-height: var(--sbb-train-wagon-icons-height);display:flex}.sbb-train-wagon__icons[hidden]{position:absolute}.sbb-train-wagon__icons-list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:wrap;gap:var(--sbb-train-wagon-icons-gap);justify-content:center}.sbb-train-wagon__icons-list>:is(li,span){display:inline-flex}.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 S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (a, e, l, o) => {
-  for (var r = o > 1 ? void 0 : o ? A(e, l) : e, c = a.length - 1, g; c >= 0; c--)
-    (g = a[c]) && (r = (o ? g(e, l, r) : g(r)) || r);
-  return o && r && S(e, l, r), r;
+var S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, e = (a, i, l, o) => {
+  for (var r = o > 1 ? void 0 : o ? A(i, l) : i, c = a.length - 1, g; c >= 0; c--)
+    (g = a[c]) && (r = (o ? g(i, l, r) : g(r)) || r);
+  return o && r && S(i, l, r), r;
 };
 let n = class extends L(
   w
 ) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-icon"], this.type = "wagon", this.occupancy = "none", this._sector = null, this.blockedPassage = "none", this._language = new y(this), this._sectorChange = new u(
+    super(...arguments), this.listChildLocalNames = ["sbb-icon"], this.type = "wagon", this.occupancy = "none", this.b = null, this.blockedPassage = "none", this.a = new y(this), this.d = new f(
       this,
       n.events.sectorChange,
       {
@@ -27,10 +27,10 @@ let n = class extends L(
     );
   }
   set sector(a) {
-    this._sector = a, this._sectorChanged();
+    this.b = a, this.c();
   }
   get sector() {
-    return this._sector;
+    return this.b;
   }
   willUpdate(a) {
     super.willUpdate(a), (a.has("type") || a.has("occupancy") || a.has("wagonClass")) && this.toggleAttribute(
@@ -38,8 +38,8 @@ let n = class extends L(
       !!(this.type === "wagon" && this.occupancy || this.wagonClass)
     );
   }
-  _sectorChanged() {
-    this._sectorChange.emit();
+  c() {
+    this.d.emit();
   }
   render() {
     const a = (l) => {
@@ -47,23 +47,23 @@ let n = class extends L(
       return s`
         <${p(o)} class="sbb-train-wagon__label" aria-hidden=${(!this.label).toString()}>
           ${this.label ? s` <span class="sbb-screen-reader-only">
-                    ${`${k[this._language.current]},`}&nbsp;
+                    ${`${k[this.a.current]},`}&nbsp;
                   </span>
                   ${this.label}` : t}
         </${p(o)}>
       `;
-    }, e = `${_[this._language.current]}, ${this.sector}`;
+    }, i = `${v[this.a.current]}, ${this.sector}`;
     return s`
       <div class="sbb-train-wagon">
         ${this.type === "wagon" ? s`<ul
-              aria-label=${f[this._language.current]}
+              aria-label=${u[this.a.current]}
               class="sbb-train-wagon__compartment"
             >
-              ${this.sector ? s`<li class="sbb-screen-reader-only">${e}</li>` : t}
+              ${this.sector ? s`<li class="sbb-screen-reader-only">${i}</li>` : t}
               ${a("li")}
               ${this.wagonClass ? s`<li class="sbb-train-wagon__class">
                     <span class="sbb-screen-reader-only">
-                      ${this.wagonClass === "1" ? h.first[this._language.current] : h.second[this._language.current]}
+                      ${this.wagonClass === "1" ? h.first[this.a.current] : h.second[this.a.current]}
                     </span>
                     <span aria-hidden="true">${this.wagonClass}</span>
                   </li>` : t}
@@ -73,20 +73,20 @@ let n = class extends L(
                     .occupancy=${this.occupancy}
                   ></sbb-timetable-occupancy-icon>` : t}
               ${this.blockedPassage && this.blockedPassage !== "none" ? s`<li class="sbb-screen-reader-only">
-                    ${v[this.blockedPassage][this._language.current]}
+                    ${_[this.blockedPassage][this.a.current]}
                   </li>` : t}
             </ul>` : t}
         ${this.type === "closed" ? s`<span class="sbb-train-wagon__compartment">
               <span class="sbb-screen-reader-only">
-                ${x(this.label ? parseInt(this.label) : void 0)[this._language.current]}
-                ${this.sector ? `, ${e}` : t}
+                ${x(this.label ? parseInt(this.label) : void 0)[this.a.current]}
+                ${this.sector ? `, ${i}` : t}
               </span>
               ${a("span")}
             </span>` : t}
         ${this.type === "locomotive" ? s`<span class="sbb-train-wagon__compartment">
               <span class="sbb-screen-reader-only">
-                ${$[this._language.current]}
-                ${this.sector ? `, ${e}` : t}
+                ${$[this.a.current]}
+                ${this.sector ? `, ${i}` : t}
               </span>
               ${a("span")}
               <svg
@@ -108,7 +108,7 @@ let n = class extends L(
         ${this.type === "wagon" ? s`<span class="sbb-train-wagon__icons" ?hidden=${this.listChildren.length === 0}>
               ${this.renderList({
       class: "sbb-train-wagon__icons-list",
-      ariaLabel: C[this._language.current]
+      ariaLabel: C[this.a.current]
     })}
             </span>` : t}
       </div>
@@ -119,28 +119,28 @@ n.styles = z;
 n.events = {
   sectorChange: "sectorChange"
 };
-i([
+e([
   b({ reflect: !0 })
 ], n.prototype, "type", 2);
-i([
+e([
   b()
 ], n.prototype, "occupancy", 2);
-i([
+e([
   b({ reflect: !0 })
 ], n.prototype, "sector", 1);
-i([
+e([
   b({ attribute: "blocked-passage" })
 ], n.prototype, "blockedPassage", 2);
-i([
+e([
   b({ attribute: "wagon-class" })
 ], n.prototype, "wagonClass", 2);
-i([
+e([
   b()
 ], n.prototype, "label", 2);
-i([
+e([
   b({ attribute: "additional-accessibility-text" })
 ], n.prototype, "additionalAccessibilityText", 2);
-n = i([
+n = e([
   m("sbb-train-wagon")
 ], n);
 export {

package/train/train.js

@@ -1,9 +1,9 @@
-import { css as p, LitElement as g, nothing as d } from "lit";
-import { property as n, customElement as f } from "lit/decorators.js";
+import { css as p, LitElement as f, nothing as d } from "lit";
+import { property as n, customElement as v } from "lit/decorators.js";
 import { html as c, unsafeStatic as h } from "lit/static-html.js";
-import { SbbLanguageController as v } from "../core/controllers.js";
-import { EventEmitter as _ } from "../core/eventing.js";
-import { i18nTrain as m, i18nWagonsLabel as w } from "../core/i18n.js";
+import { SbbLanguageController as g } from "../core/controllers.js";
+import { EventEmitter as m } from "../core/eventing.js";
+import { i18nTrain as _, i18nWagonsLabel as w } from "../core/i18n.js";
 import { SbbNamedSlotListMixin as x } from "../core/mixins.js";
 import "../icon.js";
 const y = p`*,:before,:after{box-sizing:border-box}:host{--sbb-train-direction-spacing: var(--sbb-spacing-fixed-4x);--sbb-train-direction-label-padding: var(--sbb-spacing-fixed-1x);--sbb-train-direction-station-padding: var(--sbb-spacing-fixed-3x);--sbb-train-direction-line-width: var(--sbb-border-width-1x);--sbb-train-direction-line-color: var(--sbb-color-smoke);--sbb-train-direction-label-color: var(--sbb-color-metal);--sbb-train-direction-label-background: var(--sbb-color-white);--sbb-train-direction-indicator-end-height: .75rem;--sbb-train-direction-indicator-arrow-offset-end: .5625rem;--sbb-train-direction-indicator-arrow-offset-start: calc( var(--sbb-train-direction-indicator-arrow-offset-end) * -1 );display:block}@media (forced-colors: active){:host{--sbb-train-direction-line-color: CanvasText}}.sbb-train{display:flex;flex-direction:column;position:relative;height:100%}.sbb-train__wagons{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;gap:var(--sbb-train-formation-wagon-gap)}.sbb-train__direction{--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);padding-block-start:var(--sbb-train-direction-spacing);margin-block:auto var(--sbb-train-direction-spacing);display:flex;position:relative;width:100%}.sbb-train__direction-heading{z-index:1;display:flex;position:sticky;inset:auto 0;flex-direction:column;width:100%;max-width:var(--sbb-train-direction-width);margin:0;color:var(--sbb-train-direction-label-color);font-size:inherit;font-weight:inherit}.sbb-train__direction-indicator{z-index:0;position:absolute;top:calc(.5em * var(--sbb-typo-line-height-body-text) + var(--sbb-train-direction-spacing));inset-inline:0;height:var(--sbb-train-direction-line-width);background-color:var(--sbb-train-direction-line-color)}.sbb-train__direction-arrow{color:var(--sbb-train-direction-line-color)}:host([direction=right]) .sbb-train__direction-arrow{transform:translate(var(--sbb-train-direction-indicator-arrow-offset-end));order:1}:host([direction=left]) .sbb-train__direction-arrow{transform:translate(var(--sbb-train-direction-indicator-arrow-offset-start))}.sbb-train__sticky-wrapper{position:sticky;inset:auto 0;width:100%;max-width:var(--sbb-train-direction-width);height:var(--sbb-train-direction-line-width);display:flex;align-items:center;justify-content:space-between}.sbb-train__sticky-wrapper:after{content:"";width:var(--sbb-train-direction-line-width);height:var(--sbb-train-direction-indicator-end-height);background-color:var(--sbb-train-direction-line-color);display:block}.sbb-train__direction-label,.sbb-train__direction-station{margin:0 auto}.sbb-train__direction-label{padding:0 var(--sbb-train-direction-label-padding);background-color:var(--sbb-train-direction-label-background)}.sbb-train__direction-station{--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);max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0 var(--sbb-train-direction-station-padding)}.sbb-train__direction-label-sr{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
@@ -12,12 +12,12 @@ var u = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (i, a, s
     (l = i[b]) && (r = (o ? l(a, s, r) : l(r)) || r);
   return o && r && u(a, s, r), r;
 };
-let t = class extends x(g) {
+let t = class extends x(f) {
   constructor() {
     super(...arguments), this.listChildLocalNames = [
       "sbb-train-wagon",
       "sbb-train-blocked-passage"
-    ], this.directionLabelLevel = "6", this.direction = "left", this._language = new v(this), this._trainSlotChange = new _(
+    ], this.directionLabelLevel = "6", this.direction = "left", this.a = new g(this), this.b = new m(
       this,
       t.events.trainSlotChange,
       {
@@ -29,23 +29,23 @@ let t = class extends x(g) {
   /**
    * Create the aria-label text out of the direction label, station and the accessibility label.
    */
-  _getDirectionAriaLabel() {
-    const i = [m[this._language.current]];
+  c() {
+    const i = [_[this.a.current]];
     return this.directionLabel && this.station && i.push(`${this.directionLabel} ${this.station}`), this.accessibilityLabel && i.push(this.accessibilityLabel), `${i.join(", ")}.`;
   }
   willUpdate(i) {
-    super.willUpdate(i), i.has("listChildren") && this._trainSlotChange.emit();
+    super.willUpdate(i), i.has("listChildren") && this.b.emit();
   }
   render() {
     const i = `h${this.directionLabelLevel}`;
     return c`
       <div class="sbb-train">
         <${h(i)} class="sbb-train__direction-label-sr">
-          ${this._getDirectionAriaLabel()}
+          ${this.c()}
         </${h(i)}>
         ${this.renderList({
       class: "sbb-train__wagons",
-      ariaLabel: w[this._language.current]
+      ariaLabel: w[this.a.current]
     })}
 
         ${this.directionLabel ? c`<div class="sbb-train__direction" aria-hidden="true">
@@ -86,7 +86,7 @@ e([
   n({ reflect: !0 })
 ], t.prototype, "direction", 2);
 t = e([
-  f("sbb-train")
+  v("sbb-train")
 ], t);
 export {
   t as SbbTrainElement