@sbb-esta/lyne-elements 5.0.2 → 5.1.0

package/development/train.pure.js

@@ -1,9 +1,976 @@
-import { t as SbbTrainBlockedPassageElement } from "./train-blocked-passage.component-BGCuXvjt.js";
-import { t as SbbTrainFormationElement } from "./train-formation.component-XGatA4-S.js";
-import { SbbTrainWagonButtonElement } from "./train/train-wagon-button/train-wagon-button.component.js";
-import { SbbTrainWagonLinkElement } from "./train/train-wagon-link/train-wagon-link.component.js";
-import { SbbTrainWagonElement } from "./train/train-wagon/train-wagon.component.js";
-import { t as SbbTrainElement } from "./train.component-CX1HEDwX.js";
-import { SbbTrainFormationOrientationMixin } from "./train/train-formation-orientation-mixin.js";
-import { t as SbbTrainWagonMixin } from "./train-wagon-common-4dC995mT.js";
-export { SbbTrainBlockedPassageElement, SbbTrainElement, SbbTrainFormationElement, SbbTrainFormationOrientationMixin, SbbTrainWagonButtonElement, SbbTrainWagonElement, SbbTrainWagonLinkElement, SbbTrainWagonMixin };
+import { html, isServer, nothing, unsafeCSS } from "lit";
+import { SbbButtonBaseElement, SbbElement, SbbLanguageController, SbbLinkBaseElement, SbbNamedSlotListMixin, SbbPropertyWatcherController, forceType, handleDistinctChange, hostScrollbarStyles, i18nAdditionalWagonInformationHeading, i18nAnd, i18nBlockedPassage, i18nClass, i18nClosedCompartmentLabel, i18nCouchetteWagonLabel, i18nLocomotiveLabel, i18nRestaurantWagonLabel, i18nSector, i18nSectorShort, i18nSleepingWagonLabel, i18nTrain, i18nTrains, i18nWagonLabel, i18nWagonLabelNumber, i18nWagonsLabel, omitEmptyConverter } from "./core.js";
+import { __esDecorate, __runInitializers } from "tslib";
+import { property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
+import { html as html$1, unsafeStatic } from "lit/static-html.js";
+import { SbbDividerElement } from "./divider.pure.js";
+import { SbbIconElement } from "./icon.pure.js";
+import { SbbTimetableOccupancyIconElement } from "./timetable-occupancy-icon.pure.js";
+
+//#region src/elements/train/train-formation-orientation-mixin.ts
+/**
+* Mixin that reads the `orientation` property from the closest `sbb-train-formation`
+* and reflects it as a CSS custom state (`orientation-horizontal` / `orientation-vertical`).
+*/
+const SbbTrainFormationOrientationMixin = (superClass) => {
+	return (() => {
+		let _classSuper = superClass;
+		let _orientation_decorators;
+		let _orientation_initializers = [];
+		let _orientation_extraInitializers = [];
+		return class SbbTrainFormationOrientationElement extends _classSuper {
+			static {
+				const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+				_orientation_decorators = [state()];
+				__esDecorate(this, null, _orientation_decorators, {
+					kind: "accessor",
+					name: "orientation",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "orientation" in obj,
+						get: (obj) => obj.orientation,
+						set: (obj, value) => {
+							obj.orientation = value;
+						}
+					},
+					metadata: _metadata
+				}, _orientation_initializers, _orientation_extraInitializers);
+				if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+					enumerable: true,
+					configurable: true,
+					writable: true,
+					value: _metadata
+				});
+			}
+			#orientation_accessor_storage = __runInitializers(this, _orientation_initializers, null);
+			get orientation() {
+				return this.#orientation_accessor_storage;
+			}
+			set orientation(value) {
+				this.#orientation_accessor_storage = value;
+			}
+			constructor(...args) {
+				super(...args);
+				__runInitializers(this, _orientation_extraInitializers);
+				this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-train-formation"), { orientation: (t) => {
+					if (this.orientation) this.internals.states.delete(`orientation-${this.orientation}`);
+					this.orientation = t.orientation;
+					if (this.orientation) this.internals.states.add(`orientation-${this.orientation}`);
+				} }));
+			}
+		};
+	})();
+};
+
+//#endregion
+//#region src/elements/train/train-blocked-passage/train-blocked-passage.scss?inline
+var train_blocked_passage_default = ":host {\n  display: grid;\n  grid-template-areas: \"icon\";\n  align-items: center;\n  width: var(--sbb-train-formation-blocked-passage-dimension);\n  height: var(--_sbb-train-formation-wagon-height);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) {\n  width: var(--_sbb-train-formation-wagon-width);\n  height: var(--sbb-train-formation-blocked-passage-dimension);\n}\n\n:host::before,\n:host::after {\n  content: \"\";\n  grid-area: icon;\n  justify-self: center;\n}\n\n:host::before {\n  width: var(--sbb-train-formation-blocked-passage-dimension);\n  height: var(--sbb-train-formation-blocked-passage-dimension);\n  border-radius: 50%;\n  background-color: var(--sbb-train-blocked-passage-background-color);\n}\n\n:host::after {\n  width: var(--sbb-train-blocked-passage-icon-bar-width);\n  height: var(--sbb-train-blocked-passage-icon-bar-height);\n  border-radius: var(--sbb-train-blocked-passage-icon-bar-border-radius);\n  background-color: var(--sbb-train-blocked-passage-bar-color);\n}\n";
+
+//#endregion
+//#region src/elements/train/train-blocked-passage/train-blocked-passage.component.ts
+/**
+* It visually displays a blocked passage between train wagons.
+*/
+var SbbTrainBlockedPassageElement = class extends SbbTrainFormationOrientationMixin(SbbElement) {
+	static {
+		this.elementName = "sbb-train-blocked-passage";
+	}
+	static {
+		this.styles = [unsafeCSS(train_blocked_passage_default)];
+	}
+};
+
+//#endregion
+//#region src/elements/train/train-formation/train-formation.scss?inline
+var train_formation_default = ":host {\n  --sbb-train-formation-scroll-padding: var(--sbb-train-formation-padding);\n  --_sbb-train-formation-wagon-width: var(--sbb-train-formation-wagon-dimension-long);\n  --_sbb-train-formation-wagon-height: var(--sbb-train-formation-wagon-dimension-short);\n  display: grid;\n  grid-template: \"start sectors end\" auto \"start trains end\" auto/auto 1fr auto;\n  position: relative;\n  overflow: auto visible;\n  gap: var(--_sbb-train-formation-sectors-to-train-gap, 0) 0;\n  padding-block: var(--sbb-train-formation-padding);\n  color: var(--sbb-train-formation-text-color);\n  font-size: var(--sbb-text-font-size-xs);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n}\n:host::before, :host::after {\n  content: \"\";\n  display: block;\n  width: var(--sbb-train-formation-scroll-padding);\n}\n:host::before {\n  grid-area: start;\n}\n:host::after {\n  grid-area: end;\n}\n\n:host(:focus-visible) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n:host(:is(:state(has-sectors),[state--has-sectors])) {\n  --_sbb-train-formation-sectors-to-train-gap: var(--sbb-train-formation-gap);\n}\n\n:host(:is(:state(has-direction-label),[state--has-direction-label])) {\n  --_sbb-train-formation-reserve-spacing-display: block;\n}\n\n:host([orientation=vertical]) {\n  --_sbb-train-formation-wagon-width: var(--sbb-train-formation-wagon-dimension-short);\n  --_sbb-train-formation-wagon-height: var(--sbb-train-formation-wagon-dimension-long);\n  --_sbb-train-formation-flex-direction: column;\n  --_sbb-train-formation-flex-direction-inverted: row;\n  grid-template: \"start start\" auto \"sectors trains\" 1fr \"end end\" auto;\n  overflow: visible auto;\n  padding-block: unset;\n  padding-inline: var(--sbb-train-formation-padding);\n  gap: 0 var(--_sbb-train-formation-sectors-to-train-gap, 0);\n  width: fit-content;\n}\n:host([orientation=vertical])::before, :host([orientation=vertical])::after {\n  width: auto;\n  height: var(--sbb-train-formation-scroll-padding);\n}\n\n.sbb-train-formation__sectors {\n  display: flex;\n  grid-area: sectors;\n  gap: var(--sbb-train-formation-wagon-gap);\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n}\n\n.sbb-train-formation__sector {\n  --_wagon-sum: var(--sbb-train-formation-wagon-count) *\n    var(--sbb-train-formation-wagon-dimension-long);\n  --_blocked-passage-sum: var(--sbb-train-formation-wagon-blocked-passage-count) *\n    var(--sbb-train-formation-blocked-passage-dimension);\n  --_total-count: calc(\n    var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count)\n  );\n  --_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));\n  --_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));\n  --_sector-line-length: calc(0.5 * var(--_sector-width));\n  flex: 0 0 var(--_sector-width);\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  justify-content: center;\n  overflow: clip visible;\n}\n:host([orientation=vertical]) .sbb-train-formation__sector {\n  overflow: visible clip;\n}\n\n.sbb-train-formation__sector-sticky-wrapper {\n  position: sticky;\n  inset: auto 0;\n  padding: 0 var(--sbb-train-formation-sector-padding);\n  margin: 0 var(--sbb-train-formation-sector-margin);\n  white-space: nowrap;\n}\n:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper {\n  writing-mode: sideways-lr;\n  inset: 0 auto;\n  padding: var(--sbb-train-formation-sector-padding) 0;\n  margin: var(--sbb-train-formation-sector-margin) 0;\n}\n.sbb-train-formation__sector-sticky-wrapper::before, .sbb-train-formation__sector-sticky-wrapper::after {\n  content: \"\";\n  position: absolute;\n  inset-block: calc(50% - var(--sbb-train-formation-sector-line-width) / 2);\n  border-block-end: var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);\n  width: var(--_sector-line-length);\n}\n:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper::before, :host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper::after {\n  width: auto;\n  height: var(--_sector-line-length);\n}\n.sbb-train-formation__sector-sticky-wrapper::before {\n  inset-inline-end: 100%;\n}\n.sbb-train-formation__sector-sticky-wrapper::after {\n  inset-inline-start: 100%;\n}\n\n.sbb-train-formation__trains {\n  grid-area: trains;\n}\n\n.sbb-train-formation__train-list {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-formation-wagon-gap);\n}\n\n.sbb-train-formation__train-list > :is(li, span) {\n  display: inline-flex;\n}\n";
+
+//#endregion
+//#region src/elements/train/train-formation/train-formation.component.ts
+/**
+* It displays a train composition, acting as a container for one or more `sbb-train` component.
+*
+* @slot - Use the unnamed slot to add 'sbb-train' elements to the `sbb-train-formation`.
+* @cssprop [--sbb-train-formation-scroll-padding=var(--sbb-spacing-fixed-1x)] - Defines the inline or block padding inside the horizontal or vertical scrolling area.
+*/
+let SbbTrainFormationElement = (() => {
+	let _classSuper = SbbNamedSlotListMixin(SbbElement);
+	let _view_decorators;
+	let _view_initializers = [];
+	let _view_extraInitializers = [];
+	let _orientation_decorators;
+	let _orientation_initializers = [];
+	let _orientation_extraInitializers = [];
+	let __sectors_decorators;
+	let __sectors_initializers = [];
+	let __sectors_extraInitializers = [];
+	return class SbbTrainFormationElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_view_decorators = [property({ reflect: true })];
+			_orientation_decorators = [property({ reflect: true })];
+			__sectors_decorators = [state()];
+			__esDecorate(this, null, _view_decorators, {
+				kind: "accessor",
+				name: "view",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "view" in obj,
+					get: (obj) => obj.view,
+					set: (obj, value) => {
+						obj.view = value;
+					}
+				},
+				metadata: _metadata
+			}, _view_initializers, _view_extraInitializers);
+			__esDecorate(this, null, _orientation_decorators, {
+				kind: "accessor",
+				name: "orientation",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "orientation" in obj,
+					get: (obj) => obj.orientation,
+					set: (obj, value) => {
+						obj.orientation = value;
+					}
+				},
+				metadata: _metadata
+			}, _orientation_initializers, _orientation_extraInitializers);
+			__esDecorate(this, null, __sectors_decorators, {
+				kind: "accessor",
+				name: "_sectors",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_sectors" in obj,
+					get: (obj) => obj._sectors,
+					set: (obj, value) => {
+						obj._sectors = value;
+					}
+				},
+				metadata: _metadata
+			}, __sectors_initializers, __sectors_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-train-formation";
+		}
+		static {
+			this.styles = [hostScrollbarStyles, unsafeCSS(train_formation_default)];
+		}
+		#view_accessor_storage;
+		/** Whether the view of the wagons is from side or top perspective. */
+		get view() {
+			return this.#view_accessor_storage;
+		}
+		set view(value) {
+			this.#view_accessor_storage = value;
+		}
+		#orientation_accessor_storage;
+		/** Orientation, either horizontal or vertical. */
+		get orientation() {
+			return this.#orientation_accessor_storage;
+		}
+		set orientation(value) {
+			this.#orientation_accessor_storage = value;
+		}
+		#_sectors_accessor_storage;
+		get _sectors() {
+			return this.#_sectors_accessor_storage;
+		}
+		set _sectors(value) {
+			this.#_sectors_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.listChildLocalNames = ["sbb-train"];
+			this.#view_accessor_storage = __runInitializers(this, _view_initializers, "side");
+			this.#orientation_accessor_storage = (__runInitializers(this, _view_extraInitializers), __runInitializers(this, _orientation_initializers, "horizontal"));
+			this.#_sectors_accessor_storage = (__runInitializers(this, _orientation_extraInitializers), __runInitializers(this, __sectors_initializers, []));
+			this._language = (__runInitializers(this, __sectors_extraInitializers), new SbbLanguageController(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(event) {
+			event?.stopPropagation();
+			this.toggleState("has-direction-label", Array.from(this.querySelectorAll?.("sbb-train") ?? []).some((train) => !!train.directionLabel));
+		}
+		_readSectors(event) {
+			event?.stopPropagation();
+			this._sectors = Array.from(this.querySelectorAll?.("sbb-train-wagon,sbb-train-wagon-button,sbb-train-wagon-link,sbb-train-blocked-passage") ?? []).reduce((aggregatedSectors, item) => {
+				const currentAggregatedSector = aggregatedSectors[aggregatedSectors.length - 1];
+				if (item.localName.startsWith("sbb-train-wagon")) {
+					const sectorAttribute = item.sector ?? item.getAttribute("sector");
+					if (!currentAggregatedSector.label && sectorAttribute) currentAggregatedSector.label = sectorAttribute;
+					if (!sectorAttribute || currentAggregatedSector.label === sectorAttribute) currentAggregatedSector.wagonCount++;
+					else aggregatedSectors.push({
+						label: sectorAttribute,
+						wagonCount: 1,
+						blockedPassageCount: 0
+					});
+				} else if (item.localName === "sbb-train-blocked-passage") currentAggregatedSector.blockedPassageCount++;
+				return aggregatedSectors;
+			}, [{
+				wagonCount: 0,
+				blockedPassageCount: 0
+			}]);
+			this.toggleState("has-sectors", this._sectors.some((s) => !!s.label));
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("listChildren")) {
+				this._readSectors();
+				this._readDirectionLabel();
+			}
+		}
+		render() {
+			return html`
+      ${this._sectors.length && this._sectors[0].label !== void 0 ? html`<div class="sbb-train-formation__sectors" aria-hidden="true">
+            ${this._sectors.map((aggregatedSector) => html`<span
+                  class="sbb-train-formation__sector"
+                  style=${styleMap({
+				"--sbb-train-formation-wagon-count": aggregatedSector.wagonCount,
+				"--sbb-train-formation-wagon-blocked-passage-count": aggregatedSector.blockedPassageCount
+			})}
+                >
+                  <span class="sbb-train-formation__sector-sticky-wrapper">
+                    ${`${aggregatedSector.wagonCount === 1 && aggregatedSector.label ? i18nSectorShort[this._language.current] : i18nSector[this._language.current]} ${aggregatedSector.label ? aggregatedSector.label : ""}`}
+                  </span>
+                </span>`)}
+          </div>` : nothing}
+
+      <div class="sbb-train-formation__trains">
+        ${this.renderList({
+				class: "sbb-train-formation__train-list",
+				ariaLabel: i18nTrains[this._language.current]
+			})}
+      </div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/train/train-wagon-common.scss?inline
+var train_wagon_common_default = ":host {\n  --sbb-train-wagon-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n  font-size: var(--sbb-train-wagon-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  outline: none !important;\n}\n\n:host([wagon-type=closed]) {\n  --sbb-train-wagon-crossed-shape-display: block;\n}\n@media (forced-colors: active) {\n  :host([wagon-type=closed]) {\n    --sbb-train-wagon-shape-color: GrayText;\n  }\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-left]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x) var(--sbb-spacing-fixed-3x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=wagon-end-right]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-side),[state--view-side])[wagon-type=locomotive]) {\n  --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-4x);\n}\n\n:host(:is(:state(view-top),[state--view-top])) {\n  --sbb-train-wagon-border-radius: var(--sbb-border-radius-4x);\n}\n\n:host([label]) {\n  --_sbb-train-wagon-attributes-max-width: var(--sbb-train-wagon-attributes-max-width);\n}\n\n:host(:not([label])) {\n  --_sbb-train-wagon-attributes-justify-content: center;\n}\n\n:host(.sbb-active) {\n  --sbb-train-wagon-border-width: var(--sbb-border-width-3x);\n}\n\n:host(:is(:state(action),[state--action])) {\n  cursor: var(--sbb-cursor-pointer);\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(link),[state--link])) {\n    --sbb-train-wagon-shape-color: LinkText;\n  }\n}\n\n.sbb-train-wagon-link {\n  outline: none;\n  color: inherit;\n  text-decoration: none;\n}\n\n.sbb-train-wagon {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n  align-items: center;\n  width: var(--_sbb-train-formation-wagon-width);\n  gap: var(--sbb-train-wagon-vertical-gap);\n  position: relative;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon {\n  width: auto;\n  height: var(--_sbb-train-formation-wagon-height);\n}\n.sbb-train-wagon::before {\n  content: \"\";\n  position: absolute;\n  width: var(--_sbb-train-formation-wagon-width);\n  height: var(--_sbb-train-formation-wagon-height);\n  border-radius: var(--sbb-train-wagon-border-radius);\n}\n:host(:is(:state(button),[state--button]):focus-visible) .sbb-train-wagon::before, .sbb-train-wagon-link:focus-visible .sbb-train-wagon::before {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n.sbb-train-wagon__compartment {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  justify-content: center;\n  padding-inline: var(--sbb-train-wagon-padding-inline);\n  mask-image: var(--_sbb-train-wagon-clip-shape-compartment);\n  transition: background-color var(--sbb-train-wagon-transition-duration) var(--sbb-animation-easing);\n}\n@media (any-hover: hover) {\n  :host(:is(:state(action),[state--action]):hover) .sbb-train-wagon__compartment {\n    background-color: var(--sbb-train-wagon-background-color-hover);\n  }\n}\n:host(:is(:state(action),[state--action]):is(:active, :is(:state(active),[state--active]))) .sbb-train-wagon__compartment {\n  background-color: var(--sbb-train-wagon-background-color-active);\n}\n.sbb-train-wagon__compartment:has(.sbb-train-wagon__occupancy):has(.sbb-train-wagon__class) {\n  justify-content: space-between;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__compartment {\n  padding-inline: 0;\n  padding-block: var(--sbb-train-wagon-padding-inline);\n}\n\n.sbb-train-wagon__compartment,\n.sbb-train-wagon__main-icon {\n  width: var(--_sbb-train-formation-wagon-width);\n  height: var(--_sbb-train-formation-wagon-height);\n}\n\n.sbb-train-wagon__shape {\n  position: absolute;\n  inset: 0;\n  width: var(--sbb-train-formation-wagon-dimension-long);\n  height: var(--sbb-train-formation-wagon-dimension-short);\n  transform-origin: 0 0;\n  will-change: transform;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__shape {\n  rotate: -90deg;\n  transform: scale(-1, 1);\n}\n\n.sbb-train-wagon__shape {\n  mask-image: var(--_sbb-train-wagon-clip-shape);\n  pointer-events: none;\n  fill: none;\n  stroke: var(--sbb-train-wagon-shape-color);\n  stroke-width: calc(var(--sbb-train-wagon-border-width) * 2);\n}\n\n.sbb-train-wagon__main-icon {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sbb-train-wagon__shape-closed {\n  display: var(--sbb-train-wagon-crossed-shape-display, none);\n  stroke-width: var(--sbb-border-width-1x);\n}\n\n.sbb-train-wagon__occupancy,\n.sbb-train-wagon__class {\n  height: var(--_sbb-train-formation-wagon-height);\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__occupancy,\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class {\n  height: auto;\n  width: var(--_sbb-train-formation-wagon-width);\n}\n\n.sbb-train-wagon__occupancy {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);\n  grid-area: occupancy;\n}\n\n.sbb-train-wagon__class {\n  gap: 0.0625rem;\n  order: 1;\n}\n\n.sbb-train-wagon__class-entry {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sbb-train-wagon-class-dimension);\n  height: var(--sbb-train-wagon-class-dimension);\n  border: var(--sbb-train-wagon-class-border);\n  background-color: var(--sbb-train-wagon-class-background-color);\n  border-radius: var(--sbb-train-wagon-class-border-radius);\n  font-weight: var(--sbb-train-wagon-class-font-weight);\n  color: var(--sbb-train-wagon-class-color);\n  position: relative;\n  line-height: 1;\n}\n.sbb-train-wagon__class-entry.first::before {\n  content: \"\";\n  position: absolute;\n  background-color: var(--sbb-train-wagon-class-first-color);\n  border-end-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:not(:is(:state(orientation-vertical),[state--orientation-vertical]))) .sbb-train-wagon__class-entry.first::before {\n  height: var(--sbb-train-wagon-class-first-thickness);\n  width: var(--sbb-train-wagon-class-dimension);\n  inset: calc(-0.5 * (var(--_sbb-train-formation-wagon-height) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width)) 0 auto calc(-1 * var(--sbb-train-wagon-class-border-width));\n  border-end-start-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__class-entry.first::before {\n  width: var(--sbb-train-wagon-class-first-thickness);\n  height: var(--sbb-train-wagon-class-dimension);\n  inset: calc(-1 * var(--sbb-train-wagon-class-border-width)) auto 0 calc(-0.5 * (var(--_sbb-train-formation-wagon-width) - var(--sbb-train-wagon-class-dimension)) + var(--sbb-train-wagon-border-width) - var(--sbb-train-wagon-class-border-width));\n  border-start-end-radius: var(--sbb-train-wagon-class-first-border-radius);\n}\n\n.sbb-train-wagon__information-wrapper {\n  display: flex;\n  align-items: start;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-wagon-information-gap);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__information-wrapper {\n  min-width: var(--sbb-train-wagon-information-min-width);\n}\n.sbb-train-wagon__information-wrapper[hidden] {\n  display: none;\n}\n\n:is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n  margin-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-font-size)));\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) :is(.sbb-train-wagon__label, .sbb-train-wagon__label-divider) {\n  margin-block-start: 0;\n}\n\n.sbb-train-wagon__label {\n  line-height: 1;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label {\n  max-width: var(--sbb-train-wagon-information-min-width);\n  width: 100%;\n  text-align: center;\n}\n\n.sbb-train-wagon__label-divider {\n  height: var(--sbb-train-wagon-font-size);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__label-divider {\n  height: auto;\n  width: var(--sbb-train-wagon-font-size);\n  margin-inline-start: calc(0.5 * (var(--sbb-train-wagon-information-min-width) - var(--sbb-train-wagon-font-size)));\n}\n\n.sbb-train-wagon__attribute-icon-list {\n  --sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);\n  display: flex;\n  justify-content: var(--_sbb-train-wagon-attributes-justify-content, start);\n  flex-wrap: wrap;\n  gap: var(--sbb-train-wagon-attribute-icon-gap);\n  color: var(--sbb-train-wagon-attribute-icon-color);\n  padding-block-start: calc(0.5 * (1em * var(--sbb-typo-line-height-text) - var(--sbb-train-wagon-attribute-icon-height)));\n  max-width: var(--_sbb-train-wagon-attributes-max-width);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train-wagon__attribute-icon-list {\n  max-width: calc(var(--_sbb-train-wagon-attributes-icon-columns) * var(--sbb-train-wagon-attributes-mean-width));\n  max-height: calc(var(--_sbb-train-wagon-attributes-icon-rows, 3) * var(--sbb-train-wagon-attribute-icon-height) + (var(--_sbb-train-wagon-attributes-icon-rows, 3) - 1) * var(--sbb-train-wagon-attribute-icon-gap));\n  padding-block-start: 0;\n  justify-content: center;\n  width: 100%;\n}\n\n.sbb-train-wagon__attribute-icon-list > :is(li, span) {\n  display: inline-flex;\n}\n";
+
+//#endregion
+//#region src/elements/train/train-wagon-common.ts
+const wagonTypeToIconMap = {
+	couchette: "sa-cc",
+	sleeping: "sa-wl",
+	restaurant: "sa-wr"
+};
+const shapePaths = {
+	wagon: {
+		side: "M12 0H72A12 12 0 0184 12V24A12 12 0 0172 36H12A12 12 0 010 24V12A12 12 0 0112 0Z",
+		top: "M8 0A8 8 0 000 8V28a8 8 0 008 8H76a8 8 0 008-8V8A8 8 0 0076 0H8Z"
+	},
+	locomotive: {
+		side: "M7.7 8.6C10.5 3.6 16 0 22 0H62c6 0 11.5 3.6 14.3 8.6l5.1 9C85.9 25.6 80 36 71 36H13C4 36-1.9 25.6 2.6 17.6l5.1-9Z",
+		top: "M66 0H18C8 0 0 8 0 18S8 36 18 36H66c10 0 18-8 18-18S76 0 66 0Z"
+	},
+	"wagon-end-left": {
+		side: "M7.7 8.6A16 16 0 0122 0H72c6 0 12 6 12 12V24c0 6-6 12-12 12H13C3.8 36-2 26.1 2.6 18.1Z",
+		top: "M76 0H18C8.25 0 .5 8.25.5 18S8 36 18 36H76c4 0 8-4 8-8V8c0-4-4-8-8-8Z"
+	},
+	"wagon-end-right": {
+		side: "M76.3 8.6A16 16 0 0062 0H12C6 0 0 6 0 13v11c0 6 6 12 12 12h58.4c8.6 0 15-9.9 10.4-17.9z",
+		top: "M66 0H8C4 0 0 4 0 8V28c0 4 4 8 8 8H66c9.75 0 17.5-8.25 17.5-18S76 0 66 0Z"
+	}
+};
+const SbbTrainWagonMixin = (superClass) => {
+	return (() => {
+		let _classSuper = SbbTrainFormationOrientationMixin(SbbNamedSlotListMixin(superClass));
+		let _wagonType_decorators;
+		let _wagonType_initializers = [];
+		let _wagonType_extraInitializers = [];
+		let _occupancy_decorators;
+		let _occupancy_initializers = [];
+		let _occupancy_extraInitializers = [];
+		let _sector_decorators;
+		let _sector_initializers = [];
+		let _sector_extraInitializers = [];
+		let _blockedPassage_decorators;
+		let _blockedPassage_initializers = [];
+		let _blockedPassage_extraInitializers = [];
+		let _wagonClass_decorators;
+		let _wagonClass_initializers = [];
+		let _wagonClass_extraInitializers = [];
+		let _label_decorators;
+		let _label_initializers = [];
+		let _label_extraInitializers = [];
+		let _additionalAccessibilityText_decorators;
+		let _additionalAccessibilityText_initializers = [];
+		let _additionalAccessibilityText_extraInitializers = [];
+		let __view_decorators;
+		let __view_initializers = [];
+		let __view_extraInitializers = [];
+		return class SbbTrainWagonMixinElement extends _classSuper {
+			static {
+				const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+				_wagonType_decorators = [property({
+					attribute: "wagon-type",
+					reflect: true
+				})];
+				_occupancy_decorators = [property()];
+				_sector_decorators = [
+					forceType(),
+					handleDistinctChange((e) => e._sectorChanged()),
+					property({
+						reflect: true,
+						converter: omitEmptyConverter
+					})
+				];
+				_blockedPassage_decorators = [property({ attribute: "blocked-passage" })];
+				_wagonClass_decorators = [property({ attribute: "wagon-class" })];
+				_label_decorators = [forceType(), property({
+					reflect: true,
+					converter: omitEmptyConverter
+				})];
+				_additionalAccessibilityText_decorators = [forceType(), property({ attribute: "additional-accessibility-text" })];
+				__view_decorators = [state()];
+				__esDecorate(this, null, _wagonType_decorators, {
+					kind: "accessor",
+					name: "wagonType",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "wagonType" in obj,
+						get: (obj) => obj.wagonType,
+						set: (obj, value) => {
+							obj.wagonType = value;
+						}
+					},
+					metadata: _metadata
+				}, _wagonType_initializers, _wagonType_extraInitializers);
+				__esDecorate(this, null, _occupancy_decorators, {
+					kind: "accessor",
+					name: "occupancy",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "occupancy" in obj,
+						get: (obj) => obj.occupancy,
+						set: (obj, value) => {
+							obj.occupancy = value;
+						}
+					},
+					metadata: _metadata
+				}, _occupancy_initializers, _occupancy_extraInitializers);
+				__esDecorate(this, null, _sector_decorators, {
+					kind: "accessor",
+					name: "sector",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "sector" in obj,
+						get: (obj) => obj.sector,
+						set: (obj, value) => {
+							obj.sector = value;
+						}
+					},
+					metadata: _metadata
+				}, _sector_initializers, _sector_extraInitializers);
+				__esDecorate(this, null, _blockedPassage_decorators, {
+					kind: "accessor",
+					name: "blockedPassage",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "blockedPassage" in obj,
+						get: (obj) => obj.blockedPassage,
+						set: (obj, value) => {
+							obj.blockedPassage = value;
+						}
+					},
+					metadata: _metadata
+				}, _blockedPassage_initializers, _blockedPassage_extraInitializers);
+				__esDecorate(this, null, _wagonClass_decorators, {
+					kind: "accessor",
+					name: "wagonClass",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "wagonClass" in obj,
+						get: (obj) => obj.wagonClass,
+						set: (obj, value) => {
+							obj.wagonClass = value;
+						}
+					},
+					metadata: _metadata
+				}, _wagonClass_initializers, _wagonClass_extraInitializers);
+				__esDecorate(this, null, _label_decorators, {
+					kind: "accessor",
+					name: "label",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "label" in obj,
+						get: (obj) => obj.label,
+						set: (obj, value) => {
+							obj.label = value;
+						}
+					},
+					metadata: _metadata
+				}, _label_initializers, _label_extraInitializers);
+				__esDecorate(this, null, _additionalAccessibilityText_decorators, {
+					kind: "accessor",
+					name: "additionalAccessibilityText",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "additionalAccessibilityText" in obj,
+						get: (obj) => obj.additionalAccessibilityText,
+						set: (obj, value) => {
+							obj.additionalAccessibilityText = value;
+						}
+					},
+					metadata: _metadata
+				}, _additionalAccessibilityText_initializers, _additionalAccessibilityText_extraInitializers);
+				__esDecorate(this, null, __view_decorators, {
+					kind: "accessor",
+					name: "_view",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "_view" in obj,
+						get: (obj) => obj._view,
+						set: (obj, value) => {
+							obj._view = value;
+						}
+					},
+					metadata: _metadata
+				}, __view_initializers, __view_extraInitializers);
+				if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+					enumerable: true,
+					configurable: true,
+					writable: true,
+					value: _metadata
+				});
+			}
+			static {
+				this.elementDependencies = [
+					SbbIconElement,
+					SbbTimetableOccupancyIconElement,
+					SbbDividerElement
+				];
+			}
+			static {
+				this.styles = [unsafeCSS(train_wagon_common_default)];
+			}
+			#wagonType_accessor_storage;
+			/**
+			* Wagon type.
+			* For `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property.
+			*/
+			get wagonType() {
+				return this.#wagonType_accessor_storage;
+			}
+			set wagonType(value) {
+				this.#wagonType_accessor_storage = value;
+			}
+			#occupancy_accessor_storage;
+			/** Occupancy of a wagon. */
+			get occupancy() {
+				return this.#occupancy_accessor_storage;
+			}
+			set occupancy(value) {
+				this.#occupancy_accessor_storage = value;
+			}
+			#sector_accessor_storage;
+			/** Sector in which the wagon stops. */
+			get sector() {
+				return this.#sector_accessor_storage;
+			}
+			set sector(value) {
+				this.#sector_accessor_storage = value;
+			}
+			#blockedPassage_accessor_storage;
+			/** Accessibility text for blocked passages of the wagon. */
+			get blockedPassage() {
+				return this.#blockedPassage_accessor_storage;
+			}
+			set blockedPassage(value) {
+				this.#blockedPassage_accessor_storage = value;
+			}
+			#wagonClass_accessor_storage;
+			/** Class label */
+			get wagonClass() {
+				return this.#wagonClass_accessor_storage;
+			}
+			set wagonClass(value) {
+				this.#wagonClass_accessor_storage = value;
+			}
+			#label_accessor_storage;
+			/** Wagon number */
+			get label() {
+				return this.#label_accessor_storage;
+			}
+			set label(value) {
+				this.#label_accessor_storage = value;
+			}
+			#additionalAccessibilityText_accessor_storage;
+			/** Additional accessibility text which will be appended to the end. */
+			get additionalAccessibilityText() {
+				return this.#additionalAccessibilityText_accessor_storage;
+			}
+			set additionalAccessibilityText(value) {
+				this.#additionalAccessibilityText_accessor_storage = value;
+			}
+			#_view_accessor_storage;
+			get _view() {
+				return this.#_view_accessor_storage;
+			}
+			set _view(value) {
+				this.#_view_accessor_storage = value;
+			}
+			constructor(...args) {
+				super(...args);
+				this.#wagonType_accessor_storage = __runInitializers(this, _wagonType_initializers, "wagon");
+				this.listChildLocalNames = (__runInitializers(this, _wagonType_extraInitializers), ["sbb-icon"]);
+				this.#occupancy_accessor_storage = __runInitializers(this, _occupancy_initializers, null);
+				this.#sector_accessor_storage = (__runInitializers(this, _occupancy_extraInitializers), __runInitializers(this, _sector_initializers, ""));
+				this.#blockedPassage_accessor_storage = (__runInitializers(this, _sector_extraInitializers), __runInitializers(this, _blockedPassage_initializers, "none"));
+				this.#wagonClass_accessor_storage = (__runInitializers(this, _blockedPassage_extraInitializers), __runInitializers(this, _wagonClass_initializers, null));
+				this.#label_accessor_storage = (__runInitializers(this, _wagonClass_extraInitializers), __runInitializers(this, _label_initializers, ""));
+				this.#additionalAccessibilityText_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _additionalAccessibilityText_initializers, ""));
+				this.#_view_accessor_storage = (__runInitializers(this, _additionalAccessibilityText_extraInitializers), __runInitializers(this, __view_initializers, null));
+				this._language = (__runInitializers(this, __view_extraInitializers), new SbbLanguageController(this));
+				this._clipStyleSheet = null;
+				this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-train-formation"), { view: (t) => {
+					if (this._view) this.internals.states.delete(`view-${this._view}`);
+					this._view = t.view;
+					if (this._view) this.internals.states.add(`view-${this._view}`);
+				} }));
+			}
+			createRenderRoot() {
+				const renderRoot = super.createRenderRoot();
+				if (!isServer) {
+					this._clipStyleSheet = new CSSStyleSheet();
+					renderRoot.adoptedStyleSheets.push(this._clipStyleSheet);
+				}
+				return renderRoot;
+			}
+			_sectorChanged() {
+				/** @internal */
+				this.dispatchEvent(new Event("sectorchange", {
+					bubbles: true,
+					composed: true
+				}));
+			}
+			_wagonTypeLabel() {
+				switch (this.wagonType) {
+					case "closed": return i18nClosedCompartmentLabel[this._language.current];
+					case "locomotive": return i18nLocomotiveLabel[this._language.current];
+					case "couchette": return i18nCouchetteWagonLabel[this._language.current];
+					case "sleeping": return i18nSleepingWagonLabel[this._language.current];
+					case "restaurant": return i18nRestaurantWagonLabel[this._language.current];
+					default: return i18nWagonLabel[this._language.current];
+				}
+			}
+			_wagonShape() {
+				const view = this._view ?? "side";
+				if ([
+					"wagon",
+					"couchette",
+					"sleeping",
+					"restaurant",
+					"closed"
+				].includes(this.wagonType)) return shapePaths["wagon"][view];
+				return shapePaths[this.wagonType][view] ?? shapePaths["wagon"][view];
+			}
+			_classLabel() {
+				switch (this.wagonClass) {
+					case "1": return i18nClass["first"][this._language.current];
+					case "2": return i18nClass["second"][this._language.current];
+					case "1-2": return `${i18nClass["first"][this._language.current]} ${i18nAnd[this._language.current]} ${i18nClass["second"][this._language.current]}`;
+					case "2-1": return `${i18nClass["second"][this._language.current]} ${i18nAnd[this._language.current]} ${i18nClass["first"][this._language.current]}`;
+					default: return "";
+				}
+			}
+			renderTemplate() {
+				const blockedPassage = this.wagonType === "wagon-end-left" && this.blockedPassage === "none" ? "previous" : this.wagonType === "wagon-end-right" && this.blockedPassage === "none" ? "next" : this.blockedPassage ?? "none";
+				const hasBlockedPassageEntry = blockedPassage !== "none";
+				const listEntriesCount = +!!this.sector + +!!this.label + +(!!this.wagonClass && this.wagonType !== "closed") + +(!!this.occupancy && this.wagonType !== "closed") + +hasBlockedPassageEntry;
+				const sectorString = `${i18nSector[this._language.current]}, ${this.sector}`;
+				const labelString = `${i18nWagonLabelNumber[this._language.current]}, ${this.label}`;
+				const wagonClassContent = html$1`<span class="sbb-screen-reader-only">
+          ${this._classLabel()}
+        </span>
+        ${this.wagonClass?.split("-").map((wagonClass) => html$1`<span
+                aria-hidden="true"
+                class="sbb-train-wagon__class-entry ${wagonClass === "1" ? "first" : ""}"
+              >
+                ${wagonClass}
+              </span>`)} `;
+				const path = this._wagonShape();
+				const availableIconRows = this.label ? 3 : 4;
+				this._clipStyleSheet?.replaceSync(`:host {
+            --_sbb-train-wagon-clip-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 36' fill='black'%3E%3Cpath d='${path}' /%3E%3C/svg%3E");
+            --_sbb-train-wagon-clip-shape-compartment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${this.orientation === "vertical" ? 36 : 84} ${this.orientation === "vertical" ? 84 : 36}' fill='black'%3E%3Cpath d='${path}'${this.orientation === "vertical" ? ` transform='rotate(-90, 0, 0) scale(-1, 1)'` : ""} /%3E%3C/svg%3E");
+            --_sbb-train-wagon-attributes-icon-columns: ${Math.ceil(this.listChildren.length / availableIconRows)};
+            --_sbb-train-wagon-attributes-icon-rows: ${availableIconRows};
+          }`);
+				return html$1`
+        <div class="sbb-train-wagon">
+          ${when(listEntriesCount > 1, () => html$1`<ul aria-label=${this._wagonTypeLabel()} class="sbb-train-wagon__compartment">
+                ${this.sector ? html$1`<li class="sbb-screen-reader-only">${sectorString}</li>` : nothing}
+                ${this.label ? html$1`<li class="sbb-screen-reader-only">${labelString}</li>` : nothing}
+                ${this.wagonClass && this.wagonType !== "closed" ? html$1`<li class="sbb-train-wagon__class">${wagonClassContent}</li>` : nothing}
+                ${this.occupancy && this.wagonType !== "closed" ? html$1`<sbb-timetable-occupancy-icon
+                      class="sbb-train-wagon__occupancy"
+                      role="listitem"
+                      occupancy=${this.occupancy}
+                    ></sbb-timetable-occupancy-icon>` : nothing}
+                ${hasBlockedPassageEntry ? html$1`<li class="sbb-screen-reader-only">
+                      ${i18nBlockedPassage[blockedPassage][this._language.current]}
+                    </li>` : nothing}
+              </ul>`, () => html$1`<div class="sbb-train-wagon__compartment">
+                <span class="sbb-screen-reader-only">
+                  ${`${this._wagonTypeLabel()}${this.sector ? `, ${sectorString}` : ""}`}
+                </span>
+                ${this.label ? html$1`<span class="sbb-screen-reader-only">${labelString}</span>` : nothing}
+                ${this.wagonClass && this.wagonType !== "closed" ? html$1`<span class="sbb-train-wagon__class">${wagonClassContent}</span>` : nothing}
+                ${this.occupancy && this.wagonType !== "closed" ? html$1`<sbb-timetable-occupancy-icon
+                      class="sbb-train-wagon__occupancy"
+                      occupancy=${this.occupancy}
+                    ></sbb-timetable-occupancy-icon>` : nothing}
+                ${hasBlockedPassageEntry ? html$1`<span class="sbb-screen-reader-only">
+                      ${i18nBlockedPassage[blockedPassage][this._language.current]}
+                    </span>` : nothing}
+              </div> `)}
+          ${wagonTypeToIconMap[this.wagonType] ? html$1`<sbb-icon
+                name=${wagonTypeToIconMap[this.wagonType]}
+                class="sbb-train-wagon__main-icon"
+              ></sbb-icon>` : nothing}
+          <svg class="sbb-train-wagon__shape" viewBox="0 0 84 36" aria-hidden="true">
+            <path d=${path}></path>
+            <path
+              class="sbb-train-wagon__shape-closed"
+              d=${this._view === "top" ? "M81 3L3 34" : "M81 4L4 32"}
+            ></path>
+            <path
+              class="sbb-train-wagon__shape-closed"
+              d=${this._view === "top" ? "M81 34L3 3" : "M81 32L4 4"}
+            ></path>
+          </svg>
+          ${this.additionalAccessibilityText ? html$1`<span class="sbb-screen-reader-only"
+                >, ${this.additionalAccessibilityText}</span
+              >` : nothing}
+          <span
+            class="sbb-train-wagon__information-wrapper"
+            ?hidden=${!this.listChildren.length && !this.label}
+          >
+            ${this.label ? html$1`<span aria-hidden="true" class="sbb-train-wagon__label">${this.label}</span>` : nothing}
+            ${this.label && this.listChildren.length ? html$1`<sbb-divider
+                  orientation=${this.orientation === "vertical" ? "horizontal" : "vertical"}
+                  aria-hidden="true"
+                  class="sbb-train-wagon__label-divider"
+                ></sbb-divider>` : nothing}
+            ${this.renderList({
+					class: "sbb-train-wagon__attribute-icon-list",
+					ariaLabel: i18nAdditionalWagonInformationHeading[this._language.current]
+				})}
+          </span>
+        </div>
+      `;
+			}
+		};
+	})();
+};
+
+//#endregion
+//#region src/elements/train/train-wagon-button/train-wagon-button.component.ts
+/**
+* It displays a train compartment within a `sbb-train` component and behaves like a button.
+* It can be used to display the train compartment as well as to trigger an action, e.g., to show more details about the train compartment.
+*
+* @slot - Use the unnamed slot to add one or more `sbb-icon` for meta-information of the wagon.
+*/
+var SbbTrainWagonButtonElement = class extends SbbTrainWagonMixin(SbbButtonBaseElement) {
+	static {
+		this.elementName = "sbb-train-wagon-button";
+	}
+};
+
+//#endregion
+//#region src/elements/train/train-wagon-link/train-wagon-link.component.ts
+/**
+* It displays a train compartment within a `sbb-train` component and behaves like a link.
+* It can be used to display the train compartment as well as to trigger an action, e.g., to show more details about the train compartment.
+*
+* @slot - Use the unnamed slot to add one or more `sbb-icon` for meta-information of the wagon.
+*/
+var SbbTrainWagonLinkElement = class extends SbbTrainWagonMixin(SbbLinkBaseElement) {
+	static {
+		this.elementName = "sbb-train-wagon-link";
+	}
+};
+
+//#endregion
+//#region src/elements/train/train-wagon/train-wagon.component.ts
+/**
+* It displays a train compartment within a `sbb-train` component.
+*
+* @slot - Use the unnamed slot to add one or more `sbb-icon` for meta-information of the wagon.
+*/
+var SbbTrainWagonElement = class extends SbbTrainWagonMixin(SbbElement) {
+	static {
+		this.elementName = "sbb-train-wagon";
+	}
+	render() {
+		return this.renderTemplate();
+	}
+};
+
+//#endregion
+//#region src/elements/train/train/train.scss?inline
+var train_default = ":host {\n  --sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x);\n  --_sbb-train-direction-row-dimension: calc(\n    max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-text))\n  );\n  display: flex;\n  font-size: var(--sbb-text-font-size-xs);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  flex-direction: var(--_sbb-train-formation-flex-direction-inverted);\n  gap: var(--sbb-train-formation-gap);\n  position: relative;\n}\n:host::before {\n  content: \"\";\n  display: var(--_sbb-train-formation-reserve-spacing-display, none);\n  height: var(--_sbb-train-direction-row-dimension);\n}\n\n:host(:is(:state(orientation-vertical),[state--orientation-vertical]))::before {\n  height: auto;\n  width: var(--_sbb-train-direction-row-dimension);\n}\n\n.sbb-train__wagons {\n  display: flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  gap: var(--sbb-train-formation-wagon-gap);\n}\n\n.sbb-train__direction-heading {\n  display: flex;\n  position: absolute;\n  width: 100%;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-heading {\n  width: auto;\n  height: 100%;\n}\n\n.sbb-train__direction-sticky-wrapper {\n  position: sticky;\n  inset-inline-start: 0;\n  display: inline-flex;\n  flex-direction: var(--_sbb-train-formation-flex-direction);\n  align-items: center;\n  gap: var(--sbb-train-direction-label-spacing);\n  max-width: 100%;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-sticky-wrapper {\n  inset-inline-start: unset;\n  inset-block-start: 0;\n  max-width: unset;\n  max-height: 100%;\n}\n\n:host([direction=right]) .sbb-train__direction-arrow {\n  transform: scale(-1, 1);\n  order: 2;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-arrow {\n  rotate: 90deg;\n}\n\n.sbb-train__direction-label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-train__direction-label {\n  writing-mode: sideways-lr;\n}\n";
+
+//#endregion
+//#region src/elements/train/train/train.component.ts
+/**
+* It can be used as a container for `sbb-train-wagon` or `sbb-train-blocked-passage` components.
+*
+* @slot - Use the unnamed slot to add 'sbb-train-wagon' elements to the `sbb-train`.
+*/
+let SbbTrainElement = (() => {
+	let _classSuper = SbbTrainFormationOrientationMixin(SbbNamedSlotListMixin(SbbElement));
+	let _directionLabel_decorators;
+	let _directionLabel_initializers = [];
+	let _directionLabel_extraInitializers = [];
+	let _directionLabelLevel_decorators;
+	let _directionLabelLevel_initializers = [];
+	let _directionLabelLevel_extraInitializers = [];
+	let _station_decorators;
+	let _station_initializers = [];
+	let _station_extraInitializers = [];
+	let _accessibilityLabel_decorators;
+	let _accessibilityLabel_initializers = [];
+	let _accessibilityLabel_extraInitializers = [];
+	let _direction_decorators;
+	let _direction_initializers = [];
+	let _direction_extraInitializers = [];
+	return class SbbTrainElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.listChildLocalNames = [
+				"sbb-train-wagon",
+				"sbb-train-wagon-button",
+				"sbb-train-wagon-link",
+				"sbb-train-blocked-passage"
+			];
+			this.#directionLabel_accessor_storage = __runInitializers(this, _directionLabel_initializers, "");
+			this.#directionLabelLevel_accessor_storage = (__runInitializers(this, _directionLabel_extraInitializers), __runInitializers(this, _directionLabelLevel_initializers, "6"));
+			this.#station_accessor_storage = (__runInitializers(this, _directionLabelLevel_extraInitializers), __runInitializers(this, _station_initializers, ""));
+			this.#accessibilityLabel_accessor_storage = (__runInitializers(this, _station_extraInitializers), __runInitializers(this, _accessibilityLabel_initializers, ""));
+			this.#direction_accessor_storage = (__runInitializers(this, _accessibilityLabel_extraInitializers), __runInitializers(this, _direction_initializers, "left"));
+			this._language = (__runInitializers(this, _direction_extraInitializers), new SbbLanguageController(this));
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_directionLabel_decorators = [
+				forceType(),
+				handleDistinctChange((e) => {
+					e.dispatchEvent(
+						/** @internal */
+						new Event("directionlabelchange", {
+							bubbles: true,
+							composed: true
+						})
+					);
+				}),
+				property({
+					attribute: "direction-label",
+					reflect: true,
+					converter: omitEmptyConverter
+				})
+			];
+			_directionLabelLevel_decorators = [property({ attribute: "direction-label-level" })];
+			_station_decorators = [forceType(), property()];
+			_accessibilityLabel_decorators = [forceType(), property({ attribute: "accessibility-label" })];
+			_direction_decorators = [property({ reflect: true })];
+			__esDecorate(this, null, _directionLabel_decorators, {
+				kind: "accessor",
+				name: "directionLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "directionLabel" in obj,
+					get: (obj) => obj.directionLabel,
+					set: (obj, value) => {
+						obj.directionLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _directionLabel_initializers, _directionLabel_extraInitializers);
+			__esDecorate(this, null, _directionLabelLevel_decorators, {
+				kind: "accessor",
+				name: "directionLabelLevel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "directionLabelLevel" in obj,
+					get: (obj) => obj.directionLabelLevel,
+					set: (obj, value) => {
+						obj.directionLabelLevel = value;
+					}
+				},
+				metadata: _metadata
+			}, _directionLabelLevel_initializers, _directionLabelLevel_extraInitializers);
+			__esDecorate(this, null, _station_decorators, {
+				kind: "accessor",
+				name: "station",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "station" in obj,
+					get: (obj) => obj.station,
+					set: (obj, value) => {
+						obj.station = value;
+					}
+				},
+				metadata: _metadata
+			}, _station_initializers, _station_extraInitializers);
+			__esDecorate(this, null, _accessibilityLabel_decorators, {
+				kind: "accessor",
+				name: "accessibilityLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "accessibilityLabel" in obj,
+					get: (obj) => obj.accessibilityLabel,
+					set: (obj, value) => {
+						obj.accessibilityLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _accessibilityLabel_initializers, _accessibilityLabel_extraInitializers);
+			__esDecorate(this, null, _direction_decorators, {
+				kind: "accessor",
+				name: "direction",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "direction" in obj,
+					get: (obj) => obj.direction,
+					set: (obj, value) => {
+						obj.direction = value;
+					}
+				},
+				metadata: _metadata
+			}, _direction_initializers, _direction_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-train";
+		}
+		static {
+			this.elementDependencies = [SbbIconElement];
+		}
+		static {
+			this.styles = [unsafeCSS(train_default)];
+		}
+		#directionLabel_accessor_storage;
+		/** General label for "driving direction". */
+		get directionLabel() {
+			return this.#directionLabel_accessor_storage;
+		}
+		set directionLabel(value) {
+			this.#directionLabel_accessor_storage = value;
+		}
+		#directionLabelLevel_accessor_storage;
+		/** Heading level of the direction label, used for screen readers. */
+		get directionLabelLevel() {
+			return this.#directionLabelLevel_accessor_storage;
+		}
+		set directionLabelLevel(value) {
+			this.#directionLabelLevel_accessor_storage = value;
+		}
+		#station_accessor_storage;
+		/** Label for the destination station of the train. */
+		get station() {
+			return this.#station_accessor_storage;
+		}
+		set station(value) {
+			this.#station_accessor_storage = value;
+		}
+		#accessibilityLabel_accessor_storage;
+		/** Accessibility label for additional information regarding the leaving direction of the train. */
+		get accessibilityLabel() {
+			return this.#accessibilityLabel_accessor_storage;
+		}
+		set accessibilityLabel(value) {
+			this.#accessibilityLabel_accessor_storage = value;
+		}
+		#direction_accessor_storage;
+		/** Controls the direction indicator to show the arrow left or right. Default is left.  */
+		get direction() {
+			return this.#direction_accessor_storage;
+		}
+		set direction(value) {
+			this.#direction_accessor_storage = value;
+		}
+		/**
+		* Create the aria-label text out of the direction label, station and the accessibility label.
+		*/
+		_getDirectionAriaLabel() {
+			const textParts = [i18nTrain[this._language.current]];
+			if (this.directionLabel && this.station) textParts.push(`${this.directionLabel} ${this.station}`);
+			if (this.accessibilityLabel) textParts.push(this.accessibilityLabel);
+			return `${textParts.join(", ")}.`;
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("listChildren"))
+ /** @internal */
+			this.dispatchEvent(new Event("trainslotchange", { bubbles: true }));
+		}
+		render() {
+			const TITLE_TAG_NAME = `h${this.directionLabelLevel}`;
+			return html$1`
+        <${unsafeStatic(TITLE_TAG_NAME)} class="sbb-screen-reader-only">
+          ${this._getDirectionAriaLabel()}
+        </${unsafeStatic(TITLE_TAG_NAME)}>
+        ${this.directionLabel ? html$1`<div class="sbb-train__direction-heading" aria-hidden="true">
+                <span class="sbb-train__direction-sticky-wrapper">
+                  <sbb-icon class="sbb-train__direction-arrow" name="arrow-left-small"></sbb-icon>
+                  <span class="sbb-train__direction-label">
+                    ${this.directionLabel} ${this.station}
+                  </span>
+                </span>
+              </div>` : nothing}
+        ${this.renderList({
+				class: "sbb-train__wagons",
+				ariaLabel: i18nWagonsLabel[this._language.current]
+			})}
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbTrainBlockedPassageElement, SbbTrainElement, SbbTrainFormationElement, SbbTrainFormationOrientationMixin, SbbTrainWagonButtonElement, SbbTrainWagonElement, SbbTrainWagonLinkElement, SbbTrainWagonMixin };