@sbb-esta/lyne-elements 1.13.0 → 1.14.1

package/train/train-wagon.js

@@ -1,94 +1,141 @@
-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 v, i18nClass as h, i18nBlockedPassage as f, i18nClosedCompartmentLabel as x, i18nLocomotiveLabel as $, i18nAdditionalWagonInformationHeading as C, i18nWagonLabelNumber as L } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as k } from "../core/mixins.js";
+var K = (s) => {
+  throw TypeError(s);
+};
+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";
 import "../icon.js";
 import "../timetable-occupancy-icon.js";
-const z = d`*,: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}`;
-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;
-};
-let n = class extends k(
-  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(
-      this,
-      n.events.sectorChange,
-      {
+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 {
+    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, {
         bubbles: !0,
         cancelable: !0
-      }
-    );
-  }
-  set sector(a) {
-    this._sector = a, this._sectorChanged();
-  }
-  get sector() {
-    return this._sector;
-  }
-  willUpdate(a) {
-    super.willUpdate(a), (a.has("type") || a.has("occupancy") || a.has("wagonClass")) && this.toggleAttribute(
-      "data-has-visible-wagon-content",
-      !!(this.type === "wagon" && this.occupancy || this.wagonClass)
-    );
-  }
-  _sectorChanged() {
-    this._sectorChange.emit();
-  }
-  render() {
-    const a = (l) => {
-      const o = l;
-      return s`
-        <${p(o)} class="sbb-train-wagon__label" aria-hidden=${(!this.label).toString()}>
-          ${this.label ? s` <span class="sbb-screen-reader-only">
-                    ${`${L[this._language.current]},`}&nbsp;
+      });
+    }
+    /** Wagon type. */
+    get type() {
+      return h(this, m);
+    }
+    set type(t) {
+      r(this, m, t);
+    }
+    /** Occupancy of a wagon. */
+    get occupancy() {
+      return h(this, w);
+    }
+    set occupancy(t) {
+      r(this, w, t);
+    }
+    /** Sector in which to wagon stops. */
+    get sector() {
+      return h(this, u);
+    }
+    set sector(t) {
+      r(this, u, t);
+    }
+    /** Accessibility text for blocked passages of the wagon. */
+    get blockedPassage() {
+      return h(this, y);
+    }
+    set blockedPassage(t) {
+      r(this, y, t);
+    }
+    /** Visible class label of a wagon. */
+    get wagonClass() {
+      return h(this, f);
+    }
+    set wagonClass(t) {
+      r(this, f, t);
+    }
+    /** Visible label for the wagon number. Not used by type locomotive or closed. */
+    get label() {
+      return h(this, v);
+    }
+    set label(t) {
+      r(this, v, t);
+    }
+    /** 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));
+    }
+    _sectorChanged() {
+      this._sectorChange.emit();
+    }
+    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}` : t}
-        </${p(o)}>
+                  ${this.label}` : c}
+        </${R(J)}>
       `;
-    }, e = `${_[this._language.current]}, ${this.sector}`;
-    return s`
+      }, a = `${na[this._language.current]}, ${this.sector}`;
+      return b`
       <div class="sbb-train-wagon">
-        ${this.type === "wagon" ? s`<ul
-              aria-label=${v[this._language.current]}
+        ${this.type === "wagon" ? b`<ul
+              aria-label=${ra[this._language.current]}
               class="sbb-train-wagon__compartment"
             >
-              ${this.sector ? s`<li class="sbb-screen-reader-only">${e}</li>` : t}
-              ${a("li")}
-              ${this.wagonClass ? s`<li class="sbb-train-wagon__class">
+              ${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" ? h.first[this._language.current] : h.second[this._language.current]}
+                      ${this.wagonClass === "1" ? V.first[this._language.current] : V.second[this._language.current]}
                     </span>
                     <span aria-hidden="true">${this.wagonClass}</span>
-                  </li>` : t}
-              ${this.occupancy ? s`<sbb-timetable-occupancy-icon
+                  </li>` : c}
+              ${this.occupancy ? b`<sbb-timetable-occupancy-icon
                     class="sbb-train-wagon__occupancy"
                     role="listitem"
                     .occupancy=${this.occupancy}
-                  ></sbb-timetable-occupancy-icon>` : t}
-              ${this.blockedPassage && this.blockedPassage !== "none" ? s`<li class="sbb-screen-reader-only">
-                    ${f[this.blockedPassage][this._language.current]}
-                  </li>` : t}
-            </ul>` : t}
-        ${this.type === "closed" ? s`<span class="sbb-train-wagon__compartment">
+                  ></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">
               <span class="sbb-screen-reader-only">
-                ${x(this.label ? parseInt(this.label) : void 0)[this._language.current]}
-                ${this.sector ? `, ${e}` : t}
+                ${la(this.label ? parseInt(this.label) : void 0)[this._language.current]}
+                ${this.sector ? `, ${a}` : c}
               </span>
-              ${a("span")}
-            </span>` : t}
-        ${this.type === "locomotive" ? s`<span class="sbb-train-wagon__compartment">
+              ${t("span")}
+            </span>` : c}
+        ${this.type === "locomotive" ? b`<span class="sbb-train-wagon__compartment">
               <span class="sbb-screen-reader-only">
-                ${$[this._language.current]}
-                ${this.sector ? `, ${e}` : t}
+                ${ca[this._language.current]}
+                ${this.sector ? `, ${a}` : c}
               </span>
-              ${a("span")}
+              ${t("span")}
               <svg
                 class="sbb-train-wagon__locomotive"
                 aria-hidden="true"
@@ -103,46 +150,39 @@ let n = class extends k(
                   stroke="var(--sbb-train-wagon-shape-color-closed)"
                 />
               </svg>
-            </span>` : t}
-        ${this.additionalAccessibilityText ? s`<span class="sbb-screen-reader-only">, ${this.additionalAccessibilityText}</span>` : t}
-        ${this.type === "wagon" ? s`<span class="sbb-train-wagon__icons" ?hidden=${this.listChildren.length === 0}>
+            </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: C[this._language.current]
-    })}
-            </span>` : t}
+        class: "sbb-train-wagon__icons-list",
+        ariaLabel: ba[this._language.current]
+      })}
+            </span>` : c}
       </div>
     `;
-  }
-};
-n.styles = z;
-n.events = {
-  sectorChange: "sectorChange"
-};
-i([
-  b({ reflect: !0 })
-], n.prototype, "type", 2);
-i([
-  b()
-], n.prototype, "occupancy", 2);
-i([
-  b({ reflect: !0 })
-], n.prototype, "sector", 1);
-i([
-  b({ attribute: "blocked-passage" })
-], n.prototype, "blockedPassage", 2);
-i([
-  b({ attribute: "wagon-class" })
-], n.prototype, "wagonClass", 2);
-i([
-  b()
-], n.prototype, "label", 2);
-i([
-  b({ attribute: "additional-accessibility-text" })
-], n.prototype, "additionalAccessibilityText", 2);
-n = i([
-  m("sbb-train-wagon")
-], n);
+    }
+  }, 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 = {
+    sectorChange: "sectorChange"
+  }, o(g, l), i);
+  return $ = g;
+})();
 export {
-  n as SbbTrainWagonElement
+  Ta as SbbTrainWagonElement
 };

package/train/train.js

@@ -1,57 +1,99 @@
-import { css as p, LitElement as g, nothing as d } from "lit";
-import { property as n, customElement as f } 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 { SbbNamedSlotListMixin as x } from "../core/mixins.js";
-import "../icon.js";
-const y = p`*,:before,:after{box-sizing:border-box}:host{display:block;--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 )}@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}`;
-var u = Object.defineProperty, L = Object.getOwnPropertyDescriptor, e = (i, a, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? L(a, s) : a, b = i.length - 1, l; b >= 0; b--)
-    (l = i[b]) && (r = (o ? l(a, s, r) : l(r)) || r);
-  return o && r && u(a, s, r), r;
+var U = (e) => {
+  throw TypeError(e);
 };
-let t = class extends x(g) {
-  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,
-      t.events.trainSlotChange,
-      {
+var G = (e, a, r) => a.has(e) || U("Cannot " + r);
+var p = (e, a, r) => (G(e, a, "read from private field"), r ? r.call(e) : a.get(e)), f = (e, a, r) => a.has(e) ? U("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, r), n = (e, a, r, l) => (G(e, a, "write to private field"), l ? l.call(e, r) : a.set(e, r), r);
+import { __runInitializers as o, __esDecorate as v } from "tslib";
+import { css as q, LitElement as B, nothing as P } from "lit";
+import { customElement as F, property as m } from "lit/decorators.js";
+import { html as L, unsafeStatic as W } from "lit/static-html.js";
+import { SbbLanguageController as H } from "../core/controllers.js";
+import { forceType as y } from "../core/decorators.js";
+import { EventEmitter as J } from "../core/eventing.js";
+import { i18nTrain as K, i18nWagonsLabel as Q } from "../core/i18n.js";
+import { SbbNamedSlotListMixin as R } from "../core/mixins.js";
+import "../icon.js";
+const V = q`*,:before,:after{box-sizing:border-box}:host{display:block;--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 )}@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}`;
+let bi = (() => {
+  var c, d, h, _, g, s;
+  let e = [F("sbb-train")], a, r = [], l, x = R(B), w, z = [], k = [], S, $ = [], C = [], E, T = [], I = [], D, j = [], A = [], N, M = [], O = [];
+  var u = (s = class extends x {
+    constructor() {
+      super(...arguments);
+      f(this, c);
+      f(this, d);
+      f(this, h);
+      f(this, _);
+      f(this, g);
+      this.listChildLocalNames = [
+        "sbb-train-wagon",
+        "sbb-train-blocked-passage"
+      ], n(this, c, o(this, z, "")), n(this, d, (o(this, k), o(this, $, "6"))), n(this, h, (o(this, C), o(this, T, ""))), n(this, _, (o(this, I), o(this, j, ""))), n(this, g, (o(this, A), o(this, M, "left"))), this._language = (o(this, O), new H(this)), this._trainSlotChange = new J(this, u.events.trainSlotChange, {
         bubbles: !0,
         cancelable: !0
-      }
-    );
-  }
-  /**
-   * Create the aria-label text out of the direction label, station and the accessibility label.
-   */
-  _getDirectionAriaLabel() {
-    const i = [m[this._language.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();
-  }
-  render() {
-    const i = `h${this.directionLabelLevel}`;
-    return c`
+      });
+    }
+    /** General label for "driving direction". */
+    get directionLabel() {
+      return p(this, c);
+    }
+    set directionLabel(t) {
+      n(this, c, t);
+    }
+    /** Heading level of the direction label, used for screen readers. */
+    get directionLabelLevel() {
+      return p(this, d);
+    }
+    set directionLabelLevel(t) {
+      n(this, d, t);
+    }
+    /** Label for the destination station of the train. */
+    get station() {
+      return p(this, h);
+    }
+    set station(t) {
+      n(this, h, t);
+    }
+    /** Accessibility label for additional information regarding the leaving direction of the train. */
+    get accessibilityLabel() {
+      return p(this, _);
+    }
+    set accessibilityLabel(t) {
+      n(this, _, t);
+    }
+    /** Controls the direction indicator to show the arrow left or right. Default is left.  */
+    get direction() {
+      return p(this, g);
+    }
+    set direction(t) {
+      n(this, g, t);
+    }
+    /**
+     * Create the aria-label text out of the direction label, station and the accessibility label.
+     */
+    _getDirectionAriaLabel() {
+      const t = [K[this._language.current]];
+      return this.directionLabel && this.station && t.push(`${this.directionLabel} ${this.station}`), this.accessibilityLabel && t.push(this.accessibilityLabel), `${t.join(", ")}.`;
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("listChildren") && this._trainSlotChange.emit();
+    }
+    render() {
+      const t = `h${this.directionLabelLevel}`;
+      return L`
       <div class="sbb-train">
-        <${h(i)} class="sbb-train__direction-label-sr">
+        <${W(t)} class="sbb-train__direction-label-sr">
           ${this._getDirectionAriaLabel()}
-        </${h(i)}>
+        </${W(t)}>
         ${this.renderList({
-      class: "sbb-train__wagons",
-      ariaLabel: w[this._language.current]
-    })}
+        class: "sbb-train__wagons",
+        ariaLabel: Q[this._language.current]
+      })}
 
-        ${this.directionLabel ? c`<div class="sbb-train__direction" aria-hidden="true">
+        ${this.directionLabel ? L`<div class="sbb-train__direction" aria-hidden="true">
                 <div class="sbb-train__direction-heading">
                   <span class="sbb-train__direction-label">${this.directionLabel}</span>
-                  ${this.station ? c`<span class="sbb-train__direction-station">${this.station}</span>` : d}
+                  ${this.station ? L`<span class="sbb-train__direction-station">${this.station}</span>` : P}
                 </div>
                 <div class="sbb-train__direction-indicator">
                   <div class="sbb-train__sticky-wrapper">
@@ -61,33 +103,28 @@ let t = class extends x(g) {
                     ></sbb-icon>
                   </div>
                 </div>
-              </div>` : d}
+              </div>` : P}
       </div>
     `;
-  }
-};
-t.styles = y;
-t.events = {
-  trainSlotChange: "trainSlotChange"
-};
-e([
-  n({ attribute: "direction-label" })
-], t.prototype, "directionLabel", 2);
-e([
-  n({ attribute: "direction-label-level" })
-], t.prototype, "directionLabelLevel", 2);
-e([
-  n()
-], t.prototype, "station", 2);
-e([
-  n({ attribute: "accessibility-label" })
-], t.prototype, "accessibilityLabel", 2);
-e([
-  n({ reflect: !0 })
-], t.prototype, "direction", 2);
-t = e([
-  f("sbb-train")
-], t);
+    }
+  }, c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), l = s, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    w = [y(), m({ attribute: "direction-label" })], S = [m({ attribute: "direction-label-level" })], E = [y(), m()], D = [y(), m({ attribute: "accessibility-label" })], N = [m({ reflect: !0 })], v(s, null, w, { kind: "accessor", name: "directionLabel", static: !1, private: !1, access: { has: (i) => "directionLabel" in i, get: (i) => i.directionLabel, set: (i, b) => {
+      i.directionLabel = b;
+    } }, metadata: t }, z, k), v(s, null, S, { kind: "accessor", name: "directionLabelLevel", static: !1, private: !1, access: { has: (i) => "directionLabelLevel" in i, get: (i) => i.directionLabelLevel, set: (i, b) => {
+      i.directionLabelLevel = b;
+    } }, metadata: t }, $, C), v(s, null, E, { kind: "accessor", name: "station", static: !1, private: !1, access: { has: (i) => "station" in i, get: (i) => i.station, set: (i, b) => {
+      i.station = b;
+    } }, metadata: t }, T, I), v(s, null, D, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, b) => {
+      i.accessibilityLabel = b;
+    } }, metadata: t }, j, A), v(s, null, N, { kind: "accessor", name: "direction", static: !1, private: !1, access: { has: (i) => "direction" in i, get: (i) => i.direction, set: (i, b) => {
+      i.direction = b;
+    } }, metadata: t }, M, O), v(null, a = { value: l }, e, { kind: "class", name: l.name, metadata: t }, null, r), u = l = a.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s.styles = V, s.events = {
+    trainSlotChange: "trainSlotChange"
+  }, o(l, r), s);
+  return u = l;
+})();
 export {
-  t as SbbTrainElement
+  bi as SbbTrainElement
 };

package/visual-checkbox/visual-checkbox.d.ts

@@ -7,11 +7,11 @@ declare const SbbVisualCheckboxElement_base: import('../core/mixins.js').Abstrac
 export declare class SbbVisualCheckboxElement extends SbbVisualCheckboxElement_base {
     static styles: CSSResultGroup;
     /** Checked state. */
-    checked: boolean;
+    accessor checked: boolean;
     /** Indeterminate state. */
-    indeterminate: boolean;
+    accessor indeterminate: boolean;
     /** Size of the checkbox. */
-    size: SbbCheckboxSize;
+    accessor size: SbbCheckboxSize;
     protected render(): TemplateResult;
 }
 declare global {

package/visual-checkbox/visual-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-checkbox.d.ts","sourceRoot":"","sources":["../../../src/elements/visual-checkbox/visual-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;;AAK7D;;GAEG;AACH,qBACa,wBAAyB,SAAQ,6BAA8C;IAC1F,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,qBAAqB;IAC8B,OAAO,EAAE,OAAO,CAAS;IAE5E,2BAA2B;IACwB,aAAa,UAAS;IAEzE,4BAA4B;IACQ,IAAI,EAAE,eAAe,CAAO;cAE7C,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}
+{"version":3,"file":"visual-checkbox.d.ts","sourceRoot":"","sources":["../../../src/elements/visual-checkbox/visual-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;;AAM7D;;GAEG;AACH,qBAEM,wBAAyB,SAAQ,6BAA8C;IACnF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,qBAAqB;IACrB,SAEgB,OAAO,EAAE,OAAO,CAAS;IAEzC,2BAA2B;IAC3B,SAEgB,aAAa,EAAE,OAAO,CAAS;IAE/C,4BAA4B;IAC5B,SAA6C,IAAI,EAAE,eAAe,CAAO;cAEtD,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}