@sbb-esta/lyne-elements-dev 5.0.0-next.1-dev.1777358786 → 5.0.0-next.1-dev.1777393579

package/standard-theme.css

@@ -1916,6 +1916,59 @@ slot[name=error]::slotted(*) {
   --sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
   --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
+  --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
+  --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
+  --sbb-train-blocked-passage-icon-bar-width: 0.625rem;
+  --sbb-train-blocked-passage-icon-bar-height: 0.25rem;
+  --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
+  --sbb-train-formation-wagon-dimension-short: 2.25rem;
+  --sbb-train-formation-wagon-dimension-long: 5.25rem;
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-line-color: var(--sbb-color-cement);
+  --sbb-train-formation-sector-line-color: light-dark(
+    var(--sbb-color-cement),
+    var(--sbb-color-smoke)
+  );
+  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
+  --sbb-train-formation-blocked-passage-dimension: 1rem;
+  --sbb-train-formation-text-color: var(--sbb-color-3);
+  --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
+  --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
+  --_sbb-train-formation-flex-direction: row;
+  --_sbb-train-formation-flex-direction-inverted: column;
+  --sbb-train-wagon-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-train-wagon-shape-color: var(--sbb-color-3);
+  --sbb-train-wagon-vertical-gap: 0.125rem;
+  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x);
+  --sbb-train-wagon-border-width: var(--sbb-border-width-1x);
+  --sbb-train-wagon-main-icon-height: 1.25rem;
+  --sbb-train-wagon-attribute-icon-gap: 0.125rem;
+  --sbb-train-wagon-attribute-icon-height: 0.875rem;
+  --sbb-train-wagon-attribute-icon-color: var(--sbb-color-1);
+  --sbb-train-wagon-attributes-max-width: 3.4375rem;
+  --sbb-train-wagon-attributes-mean-width: 1.75rem;
+  --sbb-train-wagon-occupancy-height: 0.75rem;
+  --sbb-train-wagon-background-color-hover: var(--sbb-background-color-3);
+  --sbb-train-wagon-background-color-active: var(--sbb-background-color-4);
+  --sbb-train-wagon-border-radius: var(--sbb-border-radius-6x);
+  --sbb-train-wagon-information-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-wagon-information-min-width: 1.875rem;
+  --sbb-train-wagon-class-dimension: 1.125rem;
+  --sbb-train-wagon-class-color: var(--sbb-color-anthracite);
+  --sbb-train-wagon-class-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-graphite));
+  --sbb-train-wagon-class-background-color: var(--sbb-background-color-3);
+  --sbb-train-wagon-class-border-width: var(--sbb-border-width-1x);
+  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
+    var(--sbb-color-graphite);
+  --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
+    light-dark(var(--sbb-color-graphite), var(--sbb-color-anthracite));
+  --sbb-train-wagon-class-border-radius: var(--sbb-border-radius-2x);
+  --sbb-train-wagon-class-font-weight: bold;
+  --sbb-train-wagon-class-first-thickness: 0.25rem;
+  --sbb-train-wagon-class-first-color: var(--sbb-color-lemon);
+  --sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
   --sbb-tag-animation-easing: var(--sbb-animation-easing);
   --sbb-tag-background-color: var(--sbb-background-color-1);
   --sbb-tag-border-color: var(--sbb-border-color-4-inverted);
@@ -2113,12 +2166,13 @@ slot[name=error]::slotted(*) {
     --sbb-toggle-check-circle-background-color: Canvas;
     --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
     --sbb-toggle-selected-option-border-color: Highlight;
+    --sbb-train-blocked-passage-background-color: CanvasText;
+    --sbb-train-blocked-passage-bar-color: Canvas;
+    --sbb-train-formation-sector-line-color: CanvasText;
+    --sbb-train-wagon-shape-color: CanvasText;
   }
 }
 :root {
-  --sbb-train-formation-wagon-width: 5rem;
-  --sbb-train-formation-wagon-height: 2.5rem;
-  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-default-z-index: 1000;
   --sbb-cursor-default: default;
   --sbb-cursor-pointer: pointer;
@@ -2795,34 +2849,6 @@ img {
   transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
 
-sbb-train-formation:has(sbb-train[direction-label]) {
-  --sbb-train-formation-reserve-spacing-display: block;
-}
-
-sbb-train-formation:has(sbb-train-wagon[sector]) {
-  --sbb-train-formation-show-sectors-gap: 1;
-}
-
-sbb-train-formation:not(:has(sbb-train-wagon[label])) {
-  --sbb-train-formation-wagon-label-display: none;
-}
-
-sbb-train-formation[view=side] sbb-train-wagon {
-  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
-}
-
-sbb-train-formation[view=top] sbb-train-wagon {
-  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
-  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
-  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
-  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
-}
-
 .sbb-overlay-outlet {
   position: fixed;
   inset: 0;

package/train/train/train.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../train.component-DuFi_iBX.js";
+import { t as e } from "../../train.component-3vmLxVCZ.js";
 export { e as SbbTrainElement };

package/train/train-blocked-passage/train-blocked-passage.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../train-blocked-passage.component-DIh8dbU9.js";
+import { t as e } from "../../train-blocked-passage.component-voZ8fxiB.js";
 export { e as SbbTrainBlockedPassageElement };

package/train/train-formation/train-formation.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../train-formation.component-DS4EDwPY.js";
+import { t as e } from "../../train-formation.component-6XQVXPue.js";
 export { e as SbbTrainFormationElement };

package/train/train-formation-orientation-mixin.js

@@ -0,0 +1,45 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { state as n } from "lit/decorators.js";
+import { SbbPropertyWatcherController as r } from "../core.js";
+//#region src/elements/train/train-formation-orientation-mixin.ts
+var i = (i) => (() => {
+	let a = i, o, s = [], c = [];
+	return class extends a {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+			o = [n()], e(this, null, o, {
+				kind: "accessor",
+				name: "orientation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "orientation" in e,
+					get: (e) => e.orientation,
+					set: (e, t) => {
+						e.orientation = t;
+					}
+				},
+				metadata: t
+			}, s, c), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		#e = t(this, s, null);
+		get orientation() {
+			return this.#e;
+		}
+		set orientation(e) {
+			this.#e = e;
+		}
+		constructor(...e) {
+			super(...e), t(this, c), this.addController(new r(this, () => this.closest("sbb-train-formation"), { orientation: (e) => {
+				this.orientation && this.internals.states.delete(`orientation-${this.orientation}`), this.orientation = e.orientation, this.orientation && this.internals.states.add(`orientation-${this.orientation}`);
+			} }));
+		}
+	};
+})();
+//#endregion
+export { i as SbbTrainFormationOrientationMixin };

package/train/train-wagon/train-wagon.component.js

@@ -1,2 +1,13 @@
-import { t as e } from "../../train-wagon.component-LwKwwuta.js";
-export { e as SbbTrainWagonElement };
+import { SbbElement as e } from "../../core.js";
+import { SbbTrainWagonMixin as t } from "../train-wagon-common.js";
+//#region src/elements/train/train-wagon/train-wagon.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-train-wagon";
+	}
+	render() {
+		return this.renderTemplate();
+	}
+};
+//#endregion
+export { n as SbbTrainWagonElement };

package/train/train-wagon-button/train-wagon-button.component.js

@@ -0,0 +1,10 @@
+import { SbbButtonBaseElement as e } from "../../core.js";
+import { SbbTrainWagonMixin as t } from "../train-wagon-common.js";
+//#region src/elements/train/train-wagon-button/train-wagon-button.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-train-wagon-button";
+	}
+};
+//#endregion
+export { n as SbbTrainWagonButtonElement };

package/train/train-wagon-common.js

@@ -0,0 +1,2 @@
+import { t as e } from "../train-wagon-common-DTN_G78z.js";
+export { e as SbbTrainWagonMixin };

package/train/train-wagon-link/train-wagon-link.component.js

@@ -0,0 +1,10 @@
+import { SbbLinkBaseElement as e } from "../../core.js";
+import { SbbTrainWagonMixin as t } from "../train-wagon-common.js";
+//#region src/elements/train/train-wagon-link/train-wagon-link.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-train-wagon-link";
+	}
+};
+//#endregion
+export { n as SbbTrainWagonLinkElement };

package/train-blocked-passage.component-voZ8fxiB.js

@@ -0,0 +1,14 @@
+import { unsafeCSS as e } from "lit";
+import { SbbElement as t, boxSizingStyles as n } from "./core.js";
+import { SbbTrainFormationOrientationMixin as r } from "./train/train-formation-orientation-mixin.js";
+//#region src/elements/train/train-blocked-passage/train-blocked-passage.scss?inline
+var i = ":host{display:grid;grid-template-areas:\"icon\";align-items:center;width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--_sbb-train-formation-wagon-height)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){width:var(--_sbb-train-formation-wagon-width);height:var(--sbb-train-formation-blocked-passage-dimension)}:host:before,:host:after{content:\"\";grid-area:icon;justify-self:center}:host:before{width:var(--sbb-train-formation-blocked-passage-dimension);height:var(--sbb-train-formation-blocked-passage-dimension);border-radius:50%;background-color:var(--sbb-train-blocked-passage-background-color)}:host:after{width:var(--sbb-train-blocked-passage-icon-bar-width);height:var(--sbb-train-blocked-passage-icon-bar-height);border-radius:var(--sbb-train-blocked-passage-icon-bar-border-radius);background-color:var(--sbb-train-blocked-passage-bar-color)}", a = class extends r(t) {
+	static {
+		this.elementName = "sbb-train-blocked-passage";
+	}
+	static {
+		this.styles = [n, e(i)];
+	}
+};
+//#endregion
+export { a as t };

package/train-formation.component-6XQVXPue.js

@@ -0,0 +1,147 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, nothing as r, unsafeCSS as i } from "lit";
+import { property as a, state as o } from "lit/decorators.js";
+import { SbbElement as s, SbbLanguageController as c, SbbNamedSlotListMixin as l, boxSizingStyles as u, hostScrollbarStyles as d, i18nSector as f, i18nSectorShort as p, i18nTrains as m } from "./core.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+//#region src/elements/train/train-formation/train-formation.scss?inline
+var g = ":host{--sbb-train-formation-scroll-padding: var(--sbb-train-formation-padding);--_sbb-train-formation-wagon-width: var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-wagon-height: var(--sbb-train-formation-wagon-dimension-short);display:grid;grid-template:\"start sectors end\" auto \"start trains end\" auto/auto 1fr auto;position:relative;overflow:auto visible;gap:var(--_sbb-train-formation-sectors-to-train-gap, 0) 0;padding-block:var(--sbb-train-formation-padding);color:var(--sbb-train-formation-text-color);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}:host:before,:host:after{content:\"\";display:block;width:var(--sbb-train-formation-scroll-padding)}:host:before{grid-area:start}:host:after{grid-area:end}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host(:is(:state(has-sectors),[state--has-sectors])){--_sbb-train-formation-sectors-to-train-gap: var(--sbb-train-formation-gap)}:host(:is(:state(has-direction-label),[state--has-direction-label])){--_sbb-train-formation-reserve-spacing-display: block}:host([orientation=vertical]){--_sbb-train-formation-wagon-width: var(--sbb-train-formation-wagon-dimension-short);--_sbb-train-formation-wagon-height: var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-flex-direction: column;--_sbb-train-formation-flex-direction-inverted: row;grid-template:\"start start\" auto \"sectors trains\" 1fr \"end end\" auto;overflow:visible auto;padding-block:unset;padding-inline:var(--sbb-train-formation-padding);gap:0 var(--_sbb-train-formation-sectors-to-train-gap, 0);width:fit-content}:host([orientation=vertical]):before,:host([orientation=vertical]):after{width:auto;height:var(--sbb-train-formation-scroll-padding)}.sbb-train-formation__sectors{display:flex;grid-area:sectors;gap:var(--sbb-train-formation-wagon-gap);flex-direction:var(--_sbb-train-formation-flex-direction)}.sbb-train-formation__sector{--_wagon-sum: var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-dimension-long);--_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-dimension);--_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));--_sector-line-length: calc(.5 * var(--_sector-width));flex:0 0 var(--_sector-width);display:flex;flex-direction:var(--_sbb-train-formation-flex-direction);justify-content:center;overflow:clip visible}:host([orientation=vertical]) .sbb-train-formation__sector{overflow:visible clip}.sbb-train-formation__sector-sticky-wrapper{position:sticky;inset:auto 0;padding:0 var(--sbb-train-formation-sector-padding);margin:0 var(--sbb-train-formation-sector-margin);white-space:nowrap}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper{writing-mode:sideways-lr;inset:0 auto;padding:var(--sbb-train-formation-sector-padding) 0;margin:var(--sbb-train-formation-sector-margin) 0}.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:var(--_sector-line-length)}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:before,:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:after{width:auto;height:var(--_sector-line-length)}.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;flex-direction:var(--_sbb-train-formation-flex-direction);gap:var(--sbb-train-formation-wagon-gap)}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}", _ = (() => {
+	let _ = l(s), v, y = [], b = [], x, S = [], C = [], w, T = [], E = [];
+	return class extends _ {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+			v = [a({ reflect: !0 })], x = [a({ reflect: !0 })], w = [o()], e(this, null, v, {
+				kind: "accessor",
+				name: "view",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "view" in e,
+					get: (e) => e.view,
+					set: (e, t) => {
+						e.view = t;
+					}
+				},
+				metadata: t
+			}, y, b), e(this, null, x, {
+				kind: "accessor",
+				name: "orientation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "orientation" in e,
+					get: (e) => e.orientation,
+					set: (e, t) => {
+						e.orientation = t;
+					}
+				},
+				metadata: t
+			}, S, C), e(this, null, w, {
+				kind: "accessor",
+				name: "_sectors",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "_sectors" in e,
+					get: (e) => e._sectors,
+					set: (e, t) => {
+						e._sectors = t;
+					}
+				},
+				metadata: t
+			}, T, E), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-train-formation";
+		}
+		static {
+			this.styles = [
+				d,
+				u,
+				i(g)
+			];
+		}
+		#e;
+		get view() {
+			return this.#e;
+		}
+		set view(e) {
+			this.#e = e;
+		}
+		#t;
+		get orientation() {
+			return this.#t;
+		}
+		set orientation(e) {
+			this.#t = e;
+		}
+		#n;
+		get _sectors() {
+			return this.#n;
+		}
+		set _sectors(e) {
+			this.#n = e;
+		}
+		constructor() {
+			super(), this.listChildLocalNames = ["sbb-train"], this.#e = t(this, y, "side"), this.#t = (t(this, b), t(this, S, "horizontal")), this.#n = (t(this, C), t(this, T, [])), this._language = (t(this, E), new c(this)), this.addEventListener?.("trainslotchange", (e) => {
+				this._readSectors(e), this._readDirectionLabel(e);
+			}), this.addEventListener?.("sectorchange", (e) => this._readSectors(e)), this.addEventListener?.("directionlabelchange", (e) => this._readDirectionLabel(e));
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.classList.add("sbb-scrollbar");
+		}
+		_readDirectionLabel(e) {
+			e?.stopPropagation(), this.toggleState("has-direction-label", Array.from(this.querySelectorAll?.("sbb-train") ?? []).some((e) => !!e.directionLabel));
+		}
+		_readSectors(e) {
+			e?.stopPropagation(), this._sectors = Array.from(this.querySelectorAll?.("sbb-train-wagon,sbb-train-wagon-button,sbb-train-wagon-link,sbb-train-blocked-passage") ?? []).reduce((e, t) => {
+				let n = e[e.length - 1];
+				if (t.localName.startsWith("sbb-train-wagon")) {
+					let r = t.sector ?? t.getAttribute("sector");
+					!n.label && r && (n.label = r), !r || n.label === r ? n.wagonCount++ : e.push({
+						label: r,
+						wagonCount: 1,
+						blockedPassageCount: 0
+					});
+				} else t.localName === "sbb-train-blocked-passage" && n.blockedPassageCount++;
+				return e;
+			}, [{
+				wagonCount: 0,
+				blockedPassageCount: 0
+			}]), this.toggleState("has-sectors", this._sectors.some((e) => !!e.label));
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("listChildren") && (this._readSectors(), this._readDirectionLabel());
+		}
+		render() {
+			return n`
+      ${this._sectors.length && this._sectors[0].label !== void 0 ? n`<div class="sbb-train-formation__sectors" aria-hidden="true">
+            ${this._sectors.map((e) => n`<span
+                  class="sbb-train-formation__sector"
+                  style=${h({
+				"--sbb-train-formation-wagon-count": e.wagonCount,
+				"--sbb-train-formation-wagon-blocked-passage-count": e.blockedPassageCount
+			})}
+                >
+                  <span class="sbb-train-formation__sector-sticky-wrapper">
+                    ${`${e.wagonCount === 1 && e.label ? p[this._language.current] : f[this._language.current]} ${e.label ? e.label : ""}`}
+                  </span>
+                </span>`)}
+          </div>` : r}
+
+      <div class="sbb-train-formation__trains">
+        ${this.renderList({
+				class: "sbb-train-formation__train-list",
+				ariaLabel: m[this._language.current]
+			})}
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { _ as t };