@sbb-esta/lyne-elements 1.16.0 → 2.0.1

package/train/train-formation/train-formation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-formation/train-formation.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;;AAUnD;;;;GAIG;AACH,qBAEM,wBAAyB,SAAQ,6BAEtC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAiB;IAEhE,uCAAuC;IACvC,SAEgB,cAAc,EAAE,OAAO,CAAS;IAEvC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA0B;IAE5D,sDAAsD;IACtD,OAAO,CAAC,aAAa,CAAC,CAAiB;IACvC,OAAO,CAAC,sBAAsB,CAI3B;IACH,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAOzC;;;OAGG;IACH,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;YA0CN,mBAAmB;cAgBd,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
+{"version":3,"file":"train-formation.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-formation/train-formation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;;AAUnD;;;;;GAKG;AACH,qBAEM,wBAAyB,SAAQ,6BAEtC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAAiB;IAEhE,sEAAsE;IACtE,SAA6C,IAAI,EAAE,MAAM,GAAG,KAAK,CAAU;IAElE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA0B;IAE5D,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAOzC,OAAO,CAAC,YAAY;cA0CD,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAQ3E,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/train/train-formation.js

@@ -1,113 +1,95 @@
-var z = (a) => {
+var S = (a) => {
   throw TypeError(a);
 };
-var W = (a, o, s) => o.has(a) || z("Cannot " + s);
-var p = (a, o, s) => (W(a, o, "read from private field"), s ? s.call(a) : o.get(a)), u = (a, o, s) => o.has(a) ? z("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, s), h = (a, o, s, i) => (W(a, o, "write to private field"), i ? i.call(a, s) : o.set(a, s), s);
-import { __runInitializers as m, __esDecorate as g } from "tslib";
-import { ResizeController as D } from "@lit-labs/observers/resize-controller.js";
-import { css as S, LitElement as $, html as _, nothing as A } from "lit";
-import { customElement as E, property as P, state as I } from "lit/decorators.js";
-import { ref as O } from "lit/directives/ref.js";
-import { SbbConnectedAbortController as R, SbbLanguageController as T } from "../core/controllers.js";
-import { forceType as N } from "../core/decorators.js";
-import { i18nSectorShort as F, i18nSector as j, i18nTrains as B } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as U } from "../core/mixins.js";
-const q = S`*,:before,:after{box-sizing:border-box}:host{display:block;--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}@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)}.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{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: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}`;
-let rt = (() => {
+var L = (a, o, s) => o.has(a) || S("Cannot " + s);
+var p = (a, o, s) => (L(a, o, "read from private field"), s ? s.call(a) : o.get(a)), u = (a, o, s) => o.has(a) ? S("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, s), m = (a, o, s, i) => (L(a, o, "write to private field"), i ? i.call(a, s) : o.set(a, s), s);
+import { __runInitializers as f, __esDecorate as _ } from "tslib";
+import { css as $, LitElement as A, html as v, nothing as E } from "lit";
+import { customElement as P, property as I, state as N } from "lit/decorators.js";
+import { SbbConnectedAbortController as T, SbbLanguageController as D } from "../core/controllers.js";
+import { i18nSectorShort as j, i18nSector as O, i18nTrains as U } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as q } from "../core/mixins.js";
+const F = $`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-formation-sector-line-color: var(--sbb-color-cement);--sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);--sbb-train-formation-blocked-passage-width: 1rem;--sbb-train-formation-text-color: var(--sbb-color-charcoal);--sbb-train-formation-vertical-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host{--sbb-train-formation-sector-line-color: CanvasText}}.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)}.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{display:grid;grid-template:"start sectors end" auto "start trains end" auto/auto 1fr auto;position:relative;overflow-x:auto;row-gap:calc(var(--sbb-train-formation-show-sectors-gap, 0) * var(--sbb-train-formation-vertical-gap));padding-block-end:var(--sbb-train-formation-vertical-gap);color:var(--sbb-train-formation-text-color)}.sbb-train-formation:before,.sbb-train-formation:after{content:"";display:block;width:var(--sbb-train-formation-padding-inline)}.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-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);flex:0 0 var(--_sector-width);text-align:center;overflow-x:clip}.sbb-train-formation__sector-sticky-wrapper{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__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";position:absolute;inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:calc(.5 * var(--_sector-width))}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.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}`;
+let V = (() => {
   var b, l, e;
-  let a = [E("sbb-train-formation")], o, s = [], i, v = U($), w, k = [], y = [], x, C = [], L = [];
-  return e = class extends v {
+  let a = [P("sbb-train-formation")], o, s = [], i, w = q(A), g, k = [], x = [], y, C = [], z = [];
+  return e = class extends w {
     constructor() {
       super(...arguments);
       u(this, b);
       u(this, l);
-      this.listChildLocalNames = ["sbb-train"], h(this, b, m(this, k, !1)), h(this, l, (m(this, y), m(this, C, []))), this._formationDiv = m(this, L), this._contentResizeObserver = new D(this, {
-        target: null,
-        skipInitial: !0,
-        callback: () => this._applyCssWidth()
-      }), this._abort = new R(this), this._language = new T(this);
+      this.listChildLocalNames = ["sbb-train"], m(this, b, f(this, k, "side")), m(this, l, (f(this, x), f(this, C, []))), this._abort = (f(this, z), new T(this)), this._language = new D(this);
     }
-    /** Option to hide all wagon labels. */
-    get hideWagonLabel() {
+    /** Whether the view of the wagons is from side or top perspective. */
+    get view() {
       return p(this, b);
     }
-    set hideWagonLabel(t) {
-      h(this, b, t);
+    set view(r) {
+      m(this, b, r);
     }
     get _sectors() {
       return p(this, l);
     }
-    set _sectors(t) {
-      h(this, l, t);
+    set _sectors(r) {
+      m(this, l, r);
     }
     connectedCallback() {
       super.connectedCallback();
-      const t = this._abort.signal;
-      this.addEventListener("trainSlotChange", (r) => this._readSectors(r), { signal: t }), this.addEventListener("sectorChange", (r) => this._readSectors(r), { signal: t });
+      const r = this._abort.signal;
+      this.addEventListener("trainSlotChange", (t) => this._readSectors(t), { signal: r }), this.addEventListener("sectorChange", (t) => this._readSectors(t), { signal: r });
     }
-    /**
-     * 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 t = this._formationDiv.getBoundingClientRect().width;
-      this._formationDiv.style.setProperty("--sbb-train-direction-width", `${t}px`);
-    }
-    _readSectors(t) {
-      var r;
-      t == null || t.stopPropagation(), this._sectors = Array.from(((r = this.querySelectorAll) == null ? void 0 : r.call(this, "sbb-train-wagon,sbb-train-blocked-passage")) ?? []).reduce((n, f) => {
+    _readSectors(r) {
+      var t;
+      r == null || r.stopPropagation(), this._sectors = Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-train-wagon,sbb-train-blocked-passage")) ?? []).reduce((n, h) => {
         const c = n[n.length - 1];
-        if (f.localName === "sbb-train-wagon") {
-          const d = f.sector ?? f.getAttribute("sector");
+        if (h.localName === "sbb-train-wagon") {
+          const d = h.sector ?? h.getAttribute("sector");
           !c.label && d && (c.label = d), !d || c.label === d ? c.wagonCount++ : n.push({
             label: d,
             wagonCount: 1,
             blockedPassageCount: 0
           });
-        } else f.localName === "sbb-train-blocked-passage" && c.blockedPassageCount++;
+        } else h.localName === "sbb-train-blocked-passage" && c.blockedPassageCount++;
         return n;
       }, [{ wagonCount: 0, blockedPassageCount: 0 }]);
     }
-    async _updateFormationDiv(t) {
-      t && (this._formationDiv && this._contentResizeObserver.unobserve(this._formationDiv), this._formationDiv = t, this._contentResizeObserver.observe(this._formationDiv), await this.updateComplete, this._applyCssWidth());
-    }
-    willUpdate(t) {
-      super.willUpdate(t), t.has("listChildren") && this._readSectors();
+    willUpdate(r) {
+      super.willUpdate(r), r.has("listChildren") && this._readSectors();
     }
     render() {
-      return _`
-      <div class="sbb-train-formation" ${O(this._updateFormationDiv)}>
-        ${this._sectors.length && this._sectors[0].label !== void 0 ? _`<div class="sbb-train-formation__sectors" aria-hidden="true">
-              ${this._sectors.map((t) => _`<span
+      return v`
+      <div class="sbb-train-formation">
+        ${this._sectors.length && this._sectors[0].label !== void 0 ? v`<div class="sbb-train-formation__sectors" aria-hidden="true">
+              ${this._sectors.map((r) => v`<span
                     class="sbb-train-formation__sector"
                     style="
-                --sbb-train-formation-wagon-count: ${t.wagonCount};
-                --sbb-train-formation-wagon-blocked-passage-count: ${t.blockedPassageCount}"
+                --sbb-train-formation-wagon-count: ${r.wagonCount};
+                --sbb-train-formation-wagon-blocked-passage-count: ${r.blockedPassageCount}"
                   >
                     <span class="sbb-train-formation__sector-sticky-wrapper">
-                      ${`${t.wagonCount === 1 && t.label ? F[this._language.current] : j[this._language.current]} ${t.label ? t.label : ""}`}
+                      ${`${r.wagonCount === 1 && r.label ? j[this._language.current] : O[this._language.current]} ${r.label ? r.label : ""}`}
                     </span>
                   </span>`)}
-            </div>` : A}
+            </div>` : E}
 
         <div class="sbb-train-formation__trains">
           ${this.renderList({
         class: "sbb-train-formation__train-list",
-        ariaLabel: B[this._language.current]
+        ariaLabel: U[this._language.current]
       })}
         </div>
       </div>
     `;
     }
   }, b = new WeakMap(), l = new WeakMap(), i = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    w = [N(), P({ attribute: "hide-wagon-label", reflect: !0, type: Boolean })], x = [I()], g(e, null, w, { kind: "accessor", name: "hideWagonLabel", static: !1, private: !1, access: { has: (r) => "hideWagonLabel" in r, get: (r) => r.hideWagonLabel, set: (r, n) => {
-      r.hideWagonLabel = n;
-    } }, metadata: t }, k, y), g(e, null, x, { kind: "accessor", name: "_sectors", static: !1, private: !1, access: { has: (r) => "_sectors" in r, get: (r) => r._sectors, set: (r, n) => {
-      r._sectors = n;
-    } }, metadata: t }, C, L), g(null, o = { value: i }, a, { kind: "class", name: i.name, metadata: t }, null, s), i = o.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.styles = q, m(i, s), i;
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
+    g = [I({ reflect: !0 })], y = [N()], _(e, null, g, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (t) => "view" in t, get: (t) => t.view, set: (t, n) => {
+      t.view = n;
+    } }, metadata: r }, k, x), _(e, null, y, { kind: "accessor", name: "_sectors", static: !1, private: !1, access: { has: (t) => "_sectors" in t, get: (t) => t._sectors, set: (t, n) => {
+      t._sectors = n;
+    } }, metadata: r }, C, z), _(null, o = { value: i }, a, { kind: "class", name: i.name, metadata: r }, null, s), i = o.value, r && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), e.styles = F, f(i, s), i;
 })();
 export {
-  rt as SbbTrainFormationElement
+  V as SbbTrainFormationElement
 };

package/train/train-wagon/train-wagon.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
 import { SbbOccupancy } from '../../core/interfaces.js';
 import { SbbIconElement } from '../../icon.js';
 declare const SbbTrainWagonElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNamedSlotListMixinType<SbbIconElement>> & typeof LitElement;
@@ -12,18 +12,21 @@ export declare class SbbTrainWagonElement extends SbbTrainWagonElement_base {
     static readonly events: {
         readonly sectorChange: "sectorChange";
     };
+    /**
+     * Wagon type.
+     * For `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property.
+     */
+    accessor type: 'wagon' | 'wagon-end-left' | 'wagon-end-right' | 'couchette' | 'sleeping' | 'restaurant' | 'locomotive' | 'closed';
     protected readonly listChildLocalNames: string[];
-    /** Wagon type. */
-    accessor type: 'locomotive' | 'closed' | 'wagon';
     /** Occupancy of a wagon. */
-    accessor occupancy: SbbOccupancy;
-    /** Sector in which to wagon stops. */
+    accessor occupancy: SbbOccupancy | null;
+    /** Sector in which the wagon stops. */
     accessor sector: string;
     /** Accessibility text for blocked passages of the wagon. */
     accessor blockedPassage: 'previous' | 'next' | 'both' | 'none';
-    /** Visible class label of a wagon. */
+    /** Class label */
     accessor wagonClass: '1' | '2' | null;
-    /** Visible label for the wagon number. Not used by type locomotive or closed. */
+    /** Wagon number */
     accessor label: string;
     /** Additional accessibility text which will be appended to the end. */
     accessor additionalAccessibilityText: string;
@@ -33,8 +36,8 @@ export declare class SbbTrainWagonElement extends SbbTrainWagonElement_base {
      * Emits whenever the sector value changes.
      */
     private _sectorChange;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
     private _sectorChanged;
+    private _typeLabel;
     protected render(): TemplateResult;
 }
 declare global {

package/train/train-wagon/train-wagon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"train-wagon.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-wagon/train-wagon.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAiBb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,OAAO,eAAe,CAAC;AACvB,OAAO,mCAAmC,CAAC;;AAE3C;;;;GAIG;AACH,qBAEM,oBAAqB,SAAQ,yBAElC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IACX,mBAA4B,mBAAmB,WAAgB;IAE/D,kBAAkB;IAClB,SAA6C,IAAI,EAAE,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAW;IAE/F,4BAA4B;IAC5B,SAA4B,SAAS,EAAE,YAAY,CAAU;IAE7D,sCAAsC;IACtC,SAGgB,MAAM,EAAE,MAAM,CAAM;IAEpC,4DAA4D;IAC5D,SACgB,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAU;IAE/E,sCAAsC;IACtC,SAAwD,UAAU,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAQ;IAE5F,iFAAiF;IACjF,SAEgB,KAAK,EAAE,MAAM,CAAM;IAEnC,uEAAuE;IACvE,SAEgB,2BAA2B,EAAE,MAAM,CAAM;IAEzD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,CAAC,aAAa,CAOnB;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,cAAc;cAIH,MAAM,IAAI,cAAc;CAwG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"train-wagon.d.ts","sourceRoot":"","sources":["../../../../src/elements/train/train-wagon/train-wagon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAqBpF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,OAAO,eAAe,CAAC;AACvB,OAAO,mCAAmC,CAAC;;AAQ3C;;;;GAIG;AACH,qBAEM,oBAAqB,SAAQ,yBAElC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,SAA6C,IAAI,EAC7C,OAAO,GACP,gBAAgB,GAChB,iBAAiB,GACjB,WAAW,GACX,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,QAAQ,CAAW;IAEvB,mBAA4B,mBAAmB,WAAgB;IAE/D,4BAA4B;IAC5B,SAA4B,SAAS,EAAE,YAAY,GAAG,IAAI,CAAQ;IAElE,uCAAuC;IACvC,SAGgB,MAAM,EAAE,MAAM,CAAM;IAEpC,4DAA4D;IAC5D,SACgB,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAU;IAE/E,kBAAkB;IAClB,SAAwD,UAAU,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAQ;IAE5F,mBAAmB;IACnB,SAEgB,KAAK,EAAE,MAAM,CAAM;IAEnC,uEAAuE;IACvE,SAEgB,2BAA2B,EAAE,MAAM,CAAM;IAEzD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,UAAU;cAeC,MAAM,IAAI,cAAc;CA2G5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/train/train-wagon.js

@@ -1,188 +1,177 @@
-var K = (s) => {
-  throw TypeError(s);
+var X = (e) => {
+  throw TypeError(e);
 };
-var Q = (s, e, l) => e.has(s) || K("Cannot " + l);
-var h = (s, e, l) => (Q(s, e, "read from private field"), l ? l.call(s) : e.get(s)), d = (s, e, l) => e.has(s) ? K("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, l), r = (s, e, l, g) => (Q(s, e, "write to private field"), g ? g.call(s, l) : e.set(s, l), l);
-import { __runInitializers as o, __esDecorate as p } from "tslib";
-import { css as X, LitElement as Y, nothing as c } from "lit";
-import { customElement as aa, property as _ } from "lit/decorators.js";
-import { html as b, unsafeStatic as R } from "lit/static-html.js";
-import { SbbLanguageController as ta } from "../core/controllers.js";
-import { forceType as C, handleDistinctChange as sa, omitEmptyConverter as ea } from "../core/decorators.js";
-import { EventEmitter as ia } from "../core/eventing.js";
-import { i18nSector as na, i18nWagonLabel as ra, i18nClass as V, i18nBlockedPassage as oa, i18nClosedCompartmentLabel as la, i18nLocomotiveLabel as ca, i18nAdditionalWagonInformationHeading as ba, i18nWagonLabelNumber as ga } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as ha } from "../core/mixins.js";
+var Y = (e, s, l) => s.has(e) || X("Cannot " + l);
+var h = (e, s, l) => (Y(e, s, "read from private field"), l ? l.call(e) : s.get(e)), p = (e, s, l) => s.has(e) ? X("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, l), o = (e, s, l, b) => (Y(e, s, "write to private field"), b ? b.call(e, l) : s.set(e, l), l);
+import { __runInitializers as r, __esDecorate as d } from "tslib";
+import { css as st, LitElement as it, nothing as g } from "lit";
+import { customElement as nt, property as u } from "lit/decorators.js";
+import { when as ot } from "lit/directives/when.js";
+import { html as c } from "lit/static-html.js";
+import { SbbLanguageController as rt } from "../core/controllers.js";
+import { forceType as $, handleDistinctChange as ct, omitEmptyConverter as Z } from "../core/decorators.js";
+import { EventEmitter as lt } from "../core/eventing.js";
+import { i18nClosedCompartmentLabel as bt, i18nLocomotiveLabel as gt, i18nCouchetteWagonLabel as ht, i18nSleepingWagonLabel as pt, i18nRestaurantWagonLabel as dt, i18nWagonLabel as ut, i18nSector as yt, i18nWagonLabelNumber as mt, i18nClass as tt, i18nBlockedPassage as at, i18nAdditionalWagonInformationHeading as _t } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as wt } from "../core/mixins.js";
 import "../icon.js";
 import "../timetable-occupancy-icon.js";
-const da = X`*,:before,:after{box-sizing:border-box}:host{display:block;--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}@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;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}`;
-let Ta = (() => {
-  var m, w, u, y, f, v, x, i;
-  let s = [aa("sbb-train-wagon")], e, l = [], g, k = ha(Y), z, T = [], A = [], S, L = [], P = [], I, E = [], W = [], D, N = [], j = [], B, H = [], M = [], O, U = [], G = [], Z, q = [], F = [];
-  var $ = (i = class extends k {
+const ft = st`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-train-wagon-width: var(--sbb-train-formation-wagon-width);--sbb-train-wagon-height: var(--sbb-train-formation-wagon-height);--sbb-train-wagon-shape-color: var(--sbb-color-charcoal);--sbb-train-wagon-main-icon-height: 1.25rem;--sbb-train-wagon-main-icon-margin-block-start: .625rem;--sbb-train-wagon-attribute-icon-gap: var(--sbb-spacing-fixed-1x);--sbb-train-wagon-attribute-icon-height: .875rem;--sbb-train-wagon-attribute-icon-color: var(--sbb-color-granite);--sbb-train-wagon-occupancy-height: .75rem}@media (forced-colors: active){:host{--sbb-train-wagon-shape-color: CanvasText}}:host(:is([type=closed],[type=locomotive])){--sbb-train-wagon-shape-color: var(--sbb-color-metal)}@media (forced-colors: active){:host(:is([type=closed],[type=locomotive])){--sbb-train-wagon-shape-color: CanvasText}}@media (forced-colors: active){:host([type=closed]){--sbb-train-wagon-shape-color: GrayText}}:host(:is([type=sleeping],[type=couchette])){--sbb-train-wagon-main-icon-margin-block-start: .390625rem}:host(:is([type=wagon],[type=restaurant],[type=sleeping],[type=couchette])){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-shape)}:host([type=closed]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-closed-shape)}:host([type=locomotive]){--sbb-train-wagon-shape: var(--sbb-train-wagon-locomotive-shape)}:host([type=wagon-end-left]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-end-left-shape)}:host([type=wagon-end-right]){--sbb-train-wagon-shape: var(--sbb-train-wagon-wagon-end-right-shape)}.sbb-train-wagon{display:flex;flex-direction:column;align-items:center;width:var(--sbb-train-wagon-width);gap:var(--sbb-train-formation-vertical-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}.sbb-train-wagon__compartment:before{content:"";grid-column:occupancy/class;grid-row:occupancy;pointer-events:none;width:var(--sbb-train-wagon-width);height:var(--sbb-train-wagon-height);background-color:var(--sbb-train-wagon-shape-color);-webkit-mask-image:var(--sbb-train-wagon-shape);mask-image:var(--sbb-train-wagon-shape)}.sbb-train-wagon__main-icon{--sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);grid-column:occupancy/class;grid-row:occupancy;margin-block-start:var(--sbb-train-wagon-main-icon-margin-block-start);justify-self:center}.sbb-train-wagon__label{--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);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,.sbb-train-wagon__class{height:var(--sbb-train-wagon-height);display:flex;align-items:center;justify-content:center}.sbb-train-wagon__occupancy{--sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);grid-area:occupancy}.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;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}.sbb-train-wagon__attribute-icon-list{list-style:none;margin:0;padding:0;font-size:inherit;--sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sbb-train-wagon-attribute-icon-gap);color:var(--sbb-train-wagon-attribute-icon-color)}.sbb-train-wagon__attribute-icon-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}`, et = {
+  couchette: "sa-cc",
+  sleeping: "sa-wl",
+  restaurant: "sa-wr"
+};
+let jt = (() => {
+  var y, m, _, w, f, v, x, i;
+  let e = [nt("sbb-train-wagon")], s, l = [], b, C = wt(it), z, T = [], L = [], P, A = [], S = [], I, E = [], W = [], j, D = [], N = [], B, M = [], O = [], G, H = [], R = [], q, F = [], J = [];
+  var k = (i = class extends C {
     constructor() {
       super(...arguments);
-      d(this, m);
-      d(this, w);
-      d(this, u);
-      d(this, y);
-      d(this, f);
-      d(this, v);
-      d(this, x);
-      this.listChildLocalNames = ["sbb-icon"], r(this, m, o(this, T, "wagon")), r(this, w, (o(this, A), o(this, L, "none"))), r(this, u, (o(this, P), o(this, E, ""))), r(this, y, (o(this, W), o(this, N, "none"))), r(this, f, (o(this, j), o(this, H, null))), r(this, v, (o(this, M), o(this, U, ""))), r(this, x, (o(this, G), o(this, q, ""))), this._language = (o(this, F), new ta(this)), this._sectorChange = new ia(this, $.events.sectorChange, {
+      p(this, y);
+      p(this, m);
+      p(this, _);
+      p(this, w);
+      p(this, f);
+      p(this, v);
+      p(this, x);
+      o(this, y, r(this, T, "wagon")), this.listChildLocalNames = (r(this, L), ["sbb-icon"]), o(this, m, r(this, A, null)), o(this, _, (r(this, S), r(this, E, ""))), o(this, w, (r(this, W), r(this, D, "none"))), o(this, f, (r(this, N), r(this, M, null))), o(this, v, (r(this, O), r(this, H, ""))), o(this, x, (r(this, R), r(this, F, ""))), this._language = (r(this, J), new rt(this)), this._sectorChange = new lt(this, k.events.sectorChange, {
         bubbles: !0,
         cancelable: !0
       });
     }
-    /** Wagon type. */
+    /**
+     * Wagon type.
+     * For `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property.
+     */
     get type() {
-      return h(this, m);
+      return h(this, y);
     }
-    set type(t) {
-      r(this, m, t);
+    set type(a) {
+      o(this, y, a);
     }
     /** Occupancy of a wagon. */
     get occupancy() {
-      return h(this, w);
+      return h(this, m);
     }
-    set occupancy(t) {
-      r(this, w, t);
+    set occupancy(a) {
+      o(this, m, a);
     }
-    /** Sector in which to wagon stops. */
+    /** Sector in which the wagon stops. */
     get sector() {
-      return h(this, u);
+      return h(this, _);
     }
-    set sector(t) {
-      r(this, u, t);
+    set sector(a) {
+      o(this, _, a);
     }
     /** Accessibility text for blocked passages of the wagon. */
     get blockedPassage() {
-      return h(this, y);
+      return h(this, w);
     }
-    set blockedPassage(t) {
-      r(this, y, t);
+    set blockedPassage(a) {
+      o(this, w, a);
     }
-    /** Visible class label of a wagon. */
+    /** Class label */
     get wagonClass() {
       return h(this, f);
     }
-    set wagonClass(t) {
-      r(this, f, t);
+    set wagonClass(a) {
+      o(this, f, a);
     }
-    /** Visible label for the wagon number. Not used by type locomotive or closed. */
+    /** Wagon number */
     get label() {
       return h(this, v);
     }
-    set label(t) {
-      r(this, v, t);
+    set label(a) {
+      o(this, v, a);
     }
     /** Additional accessibility text which will be appended to the end. */
     get additionalAccessibilityText() {
       return h(this, x);
     }
-    set additionalAccessibilityText(t) {
-      r(this, x, t);
-    }
-    willUpdate(t) {
-      super.willUpdate(t), (t.has("type") || t.has("occupancy") || t.has("wagonClass")) && this.toggleAttribute("data-has-visible-wagon-content", !!(this.type === "wagon" && this.occupancy || this.wagonClass));
+    set additionalAccessibilityText(a) {
+      o(this, x, a);
     }
     _sectorChanged() {
       this._sectorChange.emit();
     }
+    _typeLabel() {
+      return this.type === "closed" ? bt[this._language.current] : this.type === "locomotive" ? gt[this._language.current] : this.type === "couchette" ? ht[this._language.current] : this.type === "sleeping" ? pt[this._language.current] : this.type === "restaurant" ? dt[this._language.current] : ut[this._language.current];
+    }
     render() {
-      const t = (n) => {
-        const J = n;
-        return b`
-        <${R(J)} class="sbb-train-wagon__label" aria-hidden=${(!this.label).toString()}>
-          ${this.label ? b` <span class="sbb-screen-reader-only">
-                    ${`${ga[this._language.current]},`}&nbsp;
-                  </span>
-                  ${this.label}` : c}
-        </${R(J)}>
-      `;
-      }, a = `${na[this._language.current]}, ${this.sector}`;
-      return b`
+      const a = this.type === "wagon-end-left" && this.blockedPassage === "none" ? "previous" : this.type === "wagon-end-right" && this.blockedPassage === "none" ? "next" : this.blockedPassage ?? "none", t = a !== "none", n = +!!this.sector + +!!this.label + +(!!this.wagonClass && this.type !== "closed") + +(!!this.occupancy && this.type !== "closed") + +t, K = `${yt[this._language.current]}, ${this.sector}`, Q = this.label ? c`<span class="sbb-screen-reader-only">
+            ${`${mt[this._language.current]}, ${this.label}`}
+          </span>
+          <span aria-hidden="true">${this.label}</span>` : g, U = c`<span class="sbb-screen-reader-only">
+        ${this.wagonClass === "1" ? tt.first[this._language.current] : tt.second[this._language.current]}
+      </span>
+      <span aria-hidden="true">${this.wagonClass}</span>`, V = et[this.type] ? c`<sbb-icon
+          name=${et[this.type]}
+          class="sbb-train-wagon__main-icon"
+        ></sbb-icon>` : g;
+      return c`
       <div class="sbb-train-wagon">
-        ${this.type === "wagon" ? b`<ul
-              aria-label=${ra[this._language.current]}
-              class="sbb-train-wagon__compartment"
-            >
-              ${this.sector ? b`<li class="sbb-screen-reader-only">${a}</li>` : c}
-              ${t("li")}
-              ${this.wagonClass ? b`<li class="sbb-train-wagon__class">
-                    <span class="sbb-screen-reader-only">
-                      ${this.wagonClass === "1" ? V.first[this._language.current] : V.second[this._language.current]}
-                    </span>
-                    <span aria-hidden="true">${this.wagonClass}</span>
-                  </li>` : c}
-              ${this.occupancy ? b`<sbb-timetable-occupancy-icon
+        ${ot(n > 1, () => c`<ul aria-label=${this._typeLabel()} class="sbb-train-wagon__compartment">
+              ${this.sector ? c`<li class="sbb-screen-reader-only">${K}</li>` : g}
+              <li class="sbb-train-wagon__label" aria-hidden=${`${!this.label}`}>
+                ${Q}
+              </li>
+              ${this.wagonClass && this.type !== "closed" ? c`<li class="sbb-train-wagon__class">${U}</li>` : g}
+              ${this.occupancy && this.type !== "closed" ? c`<sbb-timetable-occupancy-icon
                     class="sbb-train-wagon__occupancy"
                     role="listitem"
-                    .occupancy=${this.occupancy}
-                  ></sbb-timetable-occupancy-icon>` : c}
-              ${this.blockedPassage && this.blockedPassage !== "none" ? b`<li class="sbb-screen-reader-only">
-                    ${oa[this.blockedPassage][this._language.current]}
-                  </li>` : c}
-            </ul>` : c}
-        ${this.type === "closed" ? b`<span class="sbb-train-wagon__compartment">
+                    occupancy=${this.occupancy}
+                  ></sbb-timetable-occupancy-icon>` : g}
+              ${t ? c`<li class="sbb-screen-reader-only">
+                    ${at[a][this._language.current]}
+                  </li>` : g}
+              ${V}
+            </ul>`, () => c`<div class="sbb-train-wagon__compartment">
               <span class="sbb-screen-reader-only">
-                ${la(this.label ? parseInt(this.label) : void 0)[this._language.current]}
-                ${this.sector ? `, ${a}` : c}
+                ${`${this._typeLabel()}${this.sector ? `, ${K}` : ""}`}
               </span>
-              ${t("span")}
-            </span>` : c}
-        ${this.type === "locomotive" ? b`<span class="sbb-train-wagon__compartment">
-              <span class="sbb-screen-reader-only">
-                ${ca[this._language.current]}
-                ${this.sector ? `, ${a}` : c}
+              <span class="sbb-train-wagon__label" aria-hidden=${`${!this.label}`}>
+                ${Q}
               </span>
-              ${t("span")}
-              <svg
-                class="sbb-train-wagon__locomotive"
-                aria-hidden="true"
-                width="80"
-                height="40"
-                viewBox="0 0 80 40"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17.7906 4.42719C19.9743 1.93152 23.129 0.5 26.4452 0.5H53.5548C56.871 0.5 60.0257 1.93152 62.2094 4.4272L76.2094 20.4272C82.7157 27.8629 77.4351 39.5 67.5548 39.5H12.4452C2.56489 39.5 -2.71566 27.8629 3.79058 20.4272L17.7906 4.42719Z"
-                  stroke="var(--sbb-train-wagon-shape-color-closed)"
-                />
-              </svg>
-            </span>` : c}
-        ${this.additionalAccessibilityText ? b`<span class="sbb-screen-reader-only">, ${this.additionalAccessibilityText}</span>` : c}
-        ${this.type === "wagon" ? b`<span class="sbb-train-wagon__icons" ?hidden=${this.listChildren.length === 0}>
-              ${this.renderList({
-        class: "sbb-train-wagon__icons-list",
-        ariaLabel: ba[this._language.current]
+
+              ${this.wagonClass && this.type !== "closed" ? c`<span class="sbb-train-wagon__class">${U}</span>` : g}
+              ${this.occupancy && this.type !== "closed" ? c`<sbb-timetable-occupancy-icon
+                    class="sbb-train-wagon__occupancy"
+                    occupancy=${this.occupancy}
+                  ></sbb-timetable-occupancy-icon>` : g}
+              ${t ? c`<span class="sbb-screen-reader-only">
+                    ${at[a][this._language.current]}
+                  </span>` : g}
+              ${V}
+            </div> `)}
+        ${this.additionalAccessibilityText ? c`<span class="sbb-screen-reader-only">, ${this.additionalAccessibilityText}</span>` : g}
+        ${this.renderList({
+        class: "sbb-train-wagon__attribute-icon-list",
+        ariaLabel: _t[this._language.current]
       })}
-            </span>` : c}
       </div>
     `;
     }
-  }, m = new WeakMap(), w = new WeakMap(), u = new WeakMap(), y = new WeakMap(), f = new WeakMap(), v = new WeakMap(), x = new WeakMap(), g = i, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    z = [_({ reflect: !0 })], S = [_()], I = [C(), sa((a) => a._sectorChanged()), _({ reflect: !0, converter: ea })], D = [_({ attribute: "blocked-passage" })], B = [_({ attribute: "wagon-class" })], O = [C(), _()], Z = [C(), _({ attribute: "additional-accessibility-text" })], p(i, null, z, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (a) => "type" in a, get: (a) => a.type, set: (a, n) => {
-      a.type = n;
-    } }, metadata: t }, T, A), p(i, null, S, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (a) => "occupancy" in a, get: (a) => a.occupancy, set: (a, n) => {
-      a.occupancy = n;
-    } }, metadata: t }, L, P), p(i, null, I, { kind: "accessor", name: "sector", static: !1, private: !1, access: { has: (a) => "sector" in a, get: (a) => a.sector, set: (a, n) => {
-      a.sector = n;
-    } }, metadata: t }, E, W), p(i, null, D, { kind: "accessor", name: "blockedPassage", static: !1, private: !1, access: { has: (a) => "blockedPassage" in a, get: (a) => a.blockedPassage, set: (a, n) => {
-      a.blockedPassage = n;
-    } }, metadata: t }, N, j), p(i, null, B, { kind: "accessor", name: "wagonClass", static: !1, private: !1, access: { has: (a) => "wagonClass" in a, get: (a) => a.wagonClass, set: (a, n) => {
-      a.wagonClass = n;
-    } }, metadata: t }, H, M), p(i, null, O, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (a) => "label" in a, get: (a) => a.label, set: (a, n) => {
-      a.label = n;
-    } }, metadata: t }, U, G), p(i, null, Z, { kind: "accessor", name: "additionalAccessibilityText", static: !1, private: !1, access: { has: (a) => "additionalAccessibilityText" in a, get: (a) => a.additionalAccessibilityText, set: (a, n) => {
-      a.additionalAccessibilityText = n;
-    } }, metadata: t }, q, F), p(null, e = { value: g }, s, { kind: "class", name: g.name, metadata: t }, null, l), $ = g = e.value, t && Object.defineProperty(g, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.styles = da, i.events = {
+  }, y = new WeakMap(), m = new WeakMap(), _ = new WeakMap(), w = new WeakMap(), f = new WeakMap(), v = new WeakMap(), x = new WeakMap(), b = i, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
+    z = [u({ reflect: !0 })], P = [u()], I = [$(), ct((t) => t._sectorChanged()), u({ reflect: !0, converter: Z })], j = [u({ attribute: "blocked-passage" })], B = [u({ attribute: "wagon-class" })], G = [$(), u({ reflect: !0, converter: Z })], q = [$(), u({ attribute: "additional-accessibility-text" })], d(i, null, z, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (t) => "type" in t, get: (t) => t.type, set: (t, n) => {
+      t.type = n;
+    } }, metadata: a }, T, L), d(i, null, P, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (t) => "occupancy" in t, get: (t) => t.occupancy, set: (t, n) => {
+      t.occupancy = n;
+    } }, metadata: a }, A, S), d(i, null, I, { kind: "accessor", name: "sector", static: !1, private: !1, access: { has: (t) => "sector" in t, get: (t) => t.sector, set: (t, n) => {
+      t.sector = n;
+    } }, metadata: a }, E, W), d(i, null, j, { kind: "accessor", name: "blockedPassage", static: !1, private: !1, access: { has: (t) => "blockedPassage" in t, get: (t) => t.blockedPassage, set: (t, n) => {
+      t.blockedPassage = n;
+    } }, metadata: a }, D, N), d(i, null, B, { kind: "accessor", name: "wagonClass", static: !1, private: !1, access: { has: (t) => "wagonClass" in t, get: (t) => t.wagonClass, set: (t, n) => {
+      t.wagonClass = n;
+    } }, metadata: a }, M, O), d(i, null, G, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (t) => "label" in t, get: (t) => t.label, set: (t, n) => {
+      t.label = n;
+    } }, metadata: a }, H, R), d(i, null, q, { kind: "accessor", name: "additionalAccessibilityText", static: !1, private: !1, access: { has: (t) => "additionalAccessibilityText" in t, get: (t) => t.additionalAccessibilityText, set: (t, n) => {
+      t.additionalAccessibilityText = n;
+    } }, metadata: a }, F, J), d(null, s = { value: b }, e, { kind: "class", name: b.name, metadata: a }, null, l), k = b = s.value, a && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), i.styles = ft, i.events = {
     sectorChange: "sectorChange"
-  }, o(g, l), i);
-  return $ = g;
+  }, r(b, l), i);
+  return k = b;
 })();
 export {
-  Ta as SbbTrainWagonElement
+  jt as SbbTrainWagonElement
 };