From fcaf38dd1303918ddff3381ffc5a28f1cb3cfa89 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 31 Oct 2024 11:37:31 +0100
Subject: [PATCH 01/12] refactor: apply new direction design

---
 src/elements/core/styles/core.scss            |   4 +
 .../train-formation.snapshot.spec.snap.js     |  14 +--
 src/elements/train/train-formation/readme.md  |   5 -
 .../train/train-formation/train-formation.ts  |  36 +-----
 src/elements/train/train/train.scss           | 114 +++---------------
 src/elements/train/train/train.ts             |  45 ++++---
 6 files changed, 49 insertions(+), 169 deletions(-)

diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
index 38ddec81fe..1c743b012f 100644
--- a/src/elements/core/styles/core.scss
+++ b/src/elements/core/styles/core.scss
@@ -153,3 +153,7 @@ input[data-sbb-time-input] {
     max-width: var(--sbb-time-input-s-max-width);
   }
 }
+
+sbb-train-formation:has(sbb-train[direction-label]) {
+  --sbb-train-formation-reserve-spacing-display: block;
+}
diff --git a/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js b/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
index 49861475ab..852f216a12 100644
--- a/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
+++ b/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-train-formation should render with one train DOM"] = 
+snapshots["sbb-train-formation should render with one train DOM"] =
 `<sbb-train-formation>
   <sbb-train
     direction="left"
@@ -19,10 +19,9 @@ snapshots["sbb-train-formation should render with one train DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with one train DOM */
 
-snapshots["sbb-train-formation should render with one train Shadow DOM"] = 
+snapshots["sbb-train-formation should render with one train Shadow DOM"] =
 `<div
   class="sbb-train-formation"
-  style="--sbb-train-direction-width: 800px;"
 >
   <div
     aria-hidden="true"
@@ -58,7 +57,7 @@ snapshots["sbb-train-formation should render with one train Shadow DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with one train Shadow DOM */
 
-snapshots["sbb-train-formation should render with multiple trains DOM"] = 
+snapshots["sbb-train-formation should render with multiple trains DOM"] =
 `<sbb-train-formation>
   <sbb-train
     direction="left"
@@ -88,10 +87,9 @@ snapshots["sbb-train-formation should render with multiple trains DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with multiple trains DOM */
 
-snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] = 
+snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] =
 `<div
   class="sbb-train-formation"
-  style="--sbb-train-direction-width: 800px;"
 >
   <div
     aria-hidden="true"
@@ -141,7 +139,7 @@ snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with multiple trains Shadow DOM */
 
-snapshots["sbb-train-formation should render with multiple trains A11y tree Chrome"] = 
+snapshots["sbb-train-formation should render with multiple trains A11y tree Chrome"] =
 `<p>
   {
   "role": "WebArea",
@@ -179,7 +177,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
 `;
 /* end snapshot sbb-train-formation should render with multiple trains A11y tree Chrome */
 
-snapshots["sbb-train-formation should render with multiple trains A11y tree Firefox"] = 
+snapshots["sbb-train-formation should render with multiple trains A11y tree Firefox"] =
 `<p>
   {
   "role": "document",
diff --git a/src/elements/train/train-formation/readme.md b/src/elements/train/train-formation/readme.md
index c39eee21ef..b826501c21 100644
--- a/src/elements/train/train-formation/readme.md
+++ b/src/elements/train/train-formation/readme.md
@@ -1,11 +1,6 @@
 The `sbb-train-formation` is a component used as a top container element
 for wrapping [sbb-train](/docs/timetable-sbb-train--docs)s.
 
-## Style
-
-It has no properties, and it applies the possible scrollable-width to every given `sbb-train`
-as CSS variable (`--sbb-train-direction-width`) initially and on resize.
-
 ```html
 <sbb-train-formation>
   <sbb-train
diff --git a/src/elements/train/train-formation/train-formation.ts b/src/elements/train/train-formation/train-formation.ts
index 4eb880b8b9..f7b7a6194a 100644
--- a/src/elements/train/train-formation/train-formation.ts
+++ b/src/elements/train/train-formation/train-formation.ts
@@ -1,4 +1,3 @@
-import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import {
   type CSSResultGroup,
   html,
@@ -8,7 +7,6 @@ import {
   type TemplateResult,
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ref } from 'lit/directives/ref.js';
 
 import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
 import { forceType } from '../../core/decorators.js';
@@ -46,13 +44,6 @@ class SbbTrainFormationElement extends SbbNamedSlotListMixin<SbbTrainElement, ty
 
   @state() private accessor _sectors: AggregatedSector[] = [];
 
-  /** Element that defines the visible content width. */
-  private _formationDiv?: HTMLDivElement;
-  private _contentResizeObserver = new ResizeController(this, {
-    target: null,
-    skipInitial: true,
-    callback: () => this._applyCssWidth(),
-  });
   private _abort = new SbbConnectedAbortController(this);
   private _language = new SbbLanguageController(this);
 
@@ -63,15 +54,6 @@ class SbbTrainFormationElement extends SbbNamedSlotListMixin<SbbTrainElement, ty
     this.addEventListener('sectorChange', (e) => this._readSectors(e), { signal });
   }
 
-  /**
-   * Apply width of the scrollable space of the formation as a css variable. This will be used from
-   * every slotted sbb-train for the direction-label
-   */
-  private _applyCssWidth(): void {
-    const contentWidth = this._formationDiv!.getBoundingClientRect().width;
-    this._formationDiv!.style.setProperty('--sbb-train-direction-width', `${contentWidth}px`);
-  }
-
   private _readSectors(event?: Event): void {
     // Keep the event internal.
     event?.stopPropagation();
@@ -114,22 +96,6 @@ class SbbTrainFormationElement extends SbbNamedSlotListMixin<SbbTrainElement, ty
     );
   }
 
-  private async _updateFormationDiv(el: Element | undefined): Promise<void> {
-    if (!el) {
-      return;
-    }
-    if (this._formationDiv) {
-      this._contentResizeObserver.unobserve(this._formationDiv);
-    }
-    this._formationDiv = el as HTMLDivElement;
-    this._contentResizeObserver.observe(this._formationDiv);
-    // There seems to be a slight difference between browser, in how the
-    // observer is called. In order to be consistent across browsers
-    // we set the width manually once the component update is complete.
-    await this.updateComplete;
-    this._applyCssWidth();
-  }
-
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
 
@@ -140,7 +106,7 @@ class SbbTrainFormationElement extends SbbNamedSlotListMixin<SbbTrainElement, ty
 
   protected override render(): TemplateResult {
     return html`
-      <div class="sbb-train-formation" ${ref(this._updateFormationDiv)}>
+      <div class="sbb-train-formation">
         ${this._sectors.length && this._sectors[0].label !== undefined
           ? html`<div class="sbb-train-formation__sectors" aria-hidden="true">
               ${this._sectors.map(
diff --git a/src/elements/train/train/train.scss b/src/elements/train/train/train.scss
index 2d6271dcb0..3f7323d8ea 100644
--- a/src/elements/train/train/train.scss
+++ b/src/elements/train/train/train.scss
@@ -6,34 +6,15 @@
 :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);
-
-  // Static value from design specs
-  --sbb-train-direction-indicator-end-height: #{sbb.px-to-rem-build(12)};
-
-  // Evaluate offset for the arrow-icon because 50% offset will cause a cut off of
-  // the arrow-top on the overflowing edge
-  --sbb-train-direction-indicator-arrow-offset-end: #{sbb.px-to-rem-build(9)};
-  --sbb-train-direction-indicator-arrow-offset-start: calc(
-    var(--sbb-train-direction-indicator-arrow-offset-end) * -1
-  );
-
-  @include sbb.if-forced-colors {
-    --sbb-train-direction-line-color: CanvasText;
-  }
+  --sbb-train-spacing: var(--sbb-spacing-fixed-2x);
+  --sbb-train-direction-label-color: var(--sbb-color-charcoal);
+  --sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x);
 }
 
 .sbb-train {
   display: flex;
   flex-direction: column;
-  position: relative;
-  height: 100%;
+  gap: var(--sbb-train-spacing);
 }
 
 .sbb-train__wagons {
@@ -43,91 +24,30 @@
   gap: var(--sbb-train-formation-wagon-gap);
 }
 
-.sbb-train__direction {
-  @include sbb.text-s--regular;
-
-  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(((0.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);
-}
+  @include sbb.text-xs--regular;
 
-.sbb-train__direction-arrow {
-  color: var(--sbb-train-direction-line-color);
-
-  :host([direction='right']) & {
-    transform: translateX(var(--sbb-train-direction-indicator-arrow-offset-end));
-    order: 1;
-  }
-
-  :host([direction='left']) & {
-    transform: translateX(var(--sbb-train-direction-indicator-arrow-offset-start));
-  }
+  color: var(--sbb-train-direction-label-color);
+  display: flex;
 }
 
-.sbb-train__sticky-wrapper {
+.sbb-train__direction-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;
+  inset-inline-start: 0;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-
-  // Direction indicator end-shape
-  &::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;
+  gap: var(--sbb-train-direction-label-spacing);
 }
 
 .sbb-train__direction-label {
-  padding: 0 var(--sbb-train-direction-label-padding);
-  background-color: var(--sbb-train-direction-label-background);
-}
-
-.sbb-train__direction-station {
-  @include sbb.text-xxs--regular;
-
-  max-width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  padding: 0 var(--sbb-train-direction-station-padding);
+  @include sbb.ellipsis;
 }
 
 .sbb-train__direction-label-sr {
   @include sbb.screen-reader-only;
 }
+
+.sbb-train__direction-placeholder {
+  display: var(--sbb-train-formation-reserve-spacing-display, none);
+  height: var(--sbb-size-icon-ui-small);
+}
diff --git a/src/elements/train/train/train.ts b/src/elements/train/train/train.ts
index 701929c4b3..836a2963c7 100644
--- a/src/elements/train/train/train.ts
+++ b/src/elements/train/train/train.ts
@@ -9,7 +9,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { SbbLanguageController } from '../../core/controllers.js';
-import { forceType } from '../../core/decorators.js';
+import { forceType, omitEmptyConverter } from '../../core/decorators.js';
 import { EventEmitter } from '../../core/eventing.js';
 import { i18nTrain, i18nWagonsLabel } from '../../core/i18n.js';
 import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
@@ -43,7 +43,8 @@ class SbbTrainElement extends SbbNamedSlotListMixin<
 
   /** General label for "driving direction". */
   @forceType()
-  @property({ attribute: 'direction-label' })
+  // Has to be reflected as it is used in core.scss as selector.
+  @property({ attribute: 'direction-label', reflect: true, converter: omitEmptyConverter })
   public accessor directionLabel: string = '';
 
   /** Heading level of the direction label, used for screen readers. */
@@ -112,33 +113,29 @@ class SbbTrainElement extends SbbNamedSlotListMixin<
         <${unsafeStatic(TITLE_TAG_NAME)} class="sbb-train__direction-label-sr">
           ${this._getDirectionAriaLabel()}
         </${unsafeStatic(TITLE_TAG_NAME)}>
-        ${this.renderList({
-          class: 'sbb-train__wagons',
-          ariaLabel: i18nWagonsLabel[this._language.current],
-        })}
-
         ${
           this.directionLabel
-            ? html`<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
-                    ? html`<span class="sbb-train__direction-station">${this.station}</span>`
+            ? html`<div class="sbb-train__direction-heading" aria-hidden="true">
+                <span class="sbb-train__direction-sticky-wrapper">
+                  ${this.direction === 'left'
+                    ? html`<sbb-icon name="chevron-small-left-small"></sbb-icon>`
+                    : nothing}
+
+                  <span class="sbb-train__direction-label">
+                    ${this.directionLabel} ${this.station}
+                  </span>
+
+                  ${this.direction === 'right'
+                    ? html`<sbb-icon name="chevron-small-right-small"></sbb-icon>`
                     : nothing}
-                </div>
-                <div class="sbb-train__direction-indicator">
-                  <div class="sbb-train__sticky-wrapper">
-                    <sbb-icon
-                      class="sbb-train__direction-arrow"
-                      name=${this.direction === 'left'
-                        ? 'chevron-small-left-small'
-                        : 'chevron-small-right-small'}
-                    ></sbb-icon>
-                  </div>
-                </div>
+                </span>
               </div>`
-            : nothing
+            : html`<div class="sbb-train__direction-placeholder"></div>`
         }
+        ${this.renderList({
+          class: 'sbb-train__wagons',
+          ariaLabel: i18nWagonsLabel[this._language.current],
+        })}
       </div>
     `;
   }

From 1fb649cea4c5d1d043d53fa295aec3f73e00f19f Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 31 Oct 2024 13:42:34 +0100
Subject: [PATCH 02/12] fix: fix spacings

---
 src/elements/train/train-formation/readme.md     |  6 ++++++
 .../train/train-formation/train-formation.scss   | 16 ++++++++--------
 .../train/train-formation/train-formation.ts     |  1 +
 src/elements/train/train-wagon/train-wagon.scss  |  5 ++---
 src/elements/train/train/train.scss              |  5 +----
 5 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/elements/train/train-formation/readme.md b/src/elements/train/train-formation/readme.md
index b826501c21..82494e8a79 100644
--- a/src/elements/train/train-formation/readme.md
+++ b/src/elements/train/train-formation/readme.md
@@ -53,6 +53,12 @@ for wrapping [sbb-train](/docs/timetable-sbb-train--docs)s.
 | ---------------- | ------------------ | ------- | --------- | ------- | -------------------------------- |
 | `hideWagonLabel` | `hide-wagon-label` | public  | `boolean` | `false` | Option to hide all wagon labels. |
 
+## CSS Properties
+
+| Name                                   | Default | Description                                                      |
+| -------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `--sbb-train-formation-inline-padding` | `0px`   | Defines the inline padding inside the horizontal scrolling area. |
+
 ## Slots
 
 | Name | Description                                                                    |
diff --git a/src/elements/train/train-formation/train-formation.scss b/src/elements/train/train-formation/train-formation.scss
index bce4d2ab4c..26d84929f1 100644
--- a/src/elements/train/train-formation/train-formation.scss
+++ b/src/elements/train/train-formation/train-formation.scss
@@ -6,11 +6,11 @@
 :host {
   display: block;
 
-  --sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);
   --sbb-train-formation-background-color: var(--sbb-color-white);
-  --sbb-train-formation-sector-label-color: var(--sbb-color-metal);
-  --sbb-train-formation-sector-line-color: var(--sbb-color-smoke);
+  --sbb-train-formation-sector-line-color: var(--sbb-color-cement);
   --sbb-train-formation-blocked-passage-width: #{sbb.px-to-rem-build(16)};
+  --sbb-train-formation-text-color: var(--sbb-color-charcoal);
+  --sbb-train-formation-vertical-gap: var(--sbb-spacing-fixed-2x);
 
   @include sbb.if-forced-colors {
     --sbb-train-formation-sector-line-color: CanvasText;
@@ -24,6 +24,10 @@
 .sbb-train-formation {
   @include sbb.scrollbar;
 
+  row-gap: var(--sbb-train-formation-vertical-gap);
+  padding-block-end: var(--sbb-train-formation-vertical-gap);
+  color: var(--sbb-train-formation-text-color);
+
   & {
     display: grid;
     grid-template:
@@ -31,7 +35,6 @@
       'start trains end' auto / auto 1fr auto;
     position: relative;
     overflow-x: auto;
-    background-color: var(--sbb-train-formation-background-color);
   }
 
   // Enable inline padding
@@ -40,7 +43,6 @@
     content: '';
     display: block;
     width: var(--sbb-train-formation-inline-padding);
-    background-color: var(--sbb-train-formation-background-color);
   }
 
   &::before {
@@ -68,14 +70,12 @@
   --_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));
 
-  @include sbb.text-s--regular;
+  @include sbb.text-xs--regular;
 
   flex: 0 0 var(--_sector-width);
-  color: var(--sbb-train-formation-sector-label-color);
   text-align: center;
   position: relative;
   display: inline-block;
-  margin-block-end: var(--sbb-spacing-fixed-4x);
   max-width: var(--_sector-width);
 
   // Line behind the sector-label
diff --git a/src/elements/train/train-formation/train-formation.ts b/src/elements/train/train-formation/train-formation.ts
index f7b7a6194a..291d41a4fa 100644
--- a/src/elements/train/train-formation/train-formation.ts
+++ b/src/elements/train/train-formation/train-formation.ts
@@ -28,6 +28,7 @@ interface AggregatedSector {
  * 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-inline-padding=0px] - Defines the inline padding inside the horizontal scrolling area.
  */
 export
 @customElement('sbb-train-formation')
diff --git a/src/elements/train/train-wagon/train-wagon.scss b/src/elements/train/train-wagon/train-wagon.scss
index cac5285574..00cb619e78 100644
--- a/src/elements/train/train-wagon/train-wagon.scss
+++ b/src/elements/train/train-wagon/train-wagon.scss
@@ -13,7 +13,6 @@
   --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: #{sbb.px-to-rem-build(14)};
 
@@ -27,7 +26,7 @@
   flex-direction: column;
   align-items: center;
   width: var(--sbb-train-wagon-width);
-  gap: var(--sbb-train-wagon-gap);
+  gap: var(--sbb-train-formation-vertical-gap);
 }
 
 .sbb-train-wagon__compartment {
@@ -78,7 +77,7 @@
 }
 
 .sbb-train-wagon__label {
-  @include sbb.text-s--regular;
+  @include sbb.text-xs--regular;
 
   grid-area: label;
   text-align: center;
diff --git a/src/elements/train/train/train.scss b/src/elements/train/train/train.scss
index 3f7323d8ea..74b9f9b56b 100644
--- a/src/elements/train/train/train.scss
+++ b/src/elements/train/train/train.scss
@@ -6,15 +6,13 @@
 :host {
   display: block;
 
-  --sbb-train-spacing: var(--sbb-spacing-fixed-2x);
-  --sbb-train-direction-label-color: var(--sbb-color-charcoal);
   --sbb-train-direction-label-spacing: var(--sbb-spacing-fixed-1x);
 }
 
 .sbb-train {
   display: flex;
   flex-direction: column;
-  gap: var(--sbb-train-spacing);
+  gap: var(--sbb-train-formation-vertical-gap);
 }
 
 .sbb-train__wagons {
@@ -27,7 +25,6 @@
 .sbb-train__direction-heading {
   @include sbb.text-xs--regular;
 
-  color: var(--sbb-train-direction-label-color);
   display: flex;
 }
 

From d9a2943aea3c4197ab9aea7948494bfd937d33a4 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Wed, 6 Nov 2024 09:38:46 +0100
Subject: [PATCH 03/12] build: fix doc links

---
 src/elements/card/card-badge/readme.md                 | 4 ++--
 src/elements/radio-button/radio-button-panel/readme.md | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/elements/card/card-badge/readme.md b/src/elements/card/card-badge/readme.md
index fc950206dc..02af81ea8d 100644
--- a/src/elements/card/card-badge/readme.md
+++ b/src/elements/card/card-badge/readme.md
@@ -1,6 +1,6 @@
 The `sbb-card-badge` can contain some information like prices or discounts,
-and can be used in [sbb-card](/docs/components-sbb-card-sbb-card--docs) or
-[sbb-selection-expansion-panel](/docs/components-sbb-selection-expansion-panel--docs).
+and can be used in [sbb-card](/docs/elements-sbb-card-sbb-card--docs) or
+[sbb-selection-expansion-panel](/docs/elements-sbb-selection-expansion-panel--docs).
 
 To achieve the correct spacing between elements inside the card badge, we recommend to use `span`-elements.
 All content parts are presented with a predefined gap in between.
diff --git a/src/elements/radio-button/radio-button-panel/readme.md b/src/elements/radio-button/radio-button-panel/readme.md
index 818afe7e63..216300e965 100644
--- a/src/elements/radio-button/radio-button-panel/readme.md
+++ b/src/elements/radio-button/radio-button-panel/readme.md
@@ -1,4 +1,4 @@
-The `sbb-radio-button-panel` component provides the same functionality as a native `<input type="radio"/>` enhanced with the selection panel design and functionalities. Use multiple `sbb-radio-button-panel` components inside a [sbb-radio-button-group](/docs/components-sbb-radio-button-sbb-radio-button-group--docs) component in order to display a radio input within a group.
+The `sbb-radio-button-panel` component provides the same functionality as a native `<input type="radio"/>` enhanced with the selection panel design and functionalities. Use multiple `sbb-radio-button-panel` components inside a [sbb-radio-button-group](/docs/elements-sbb-radio-button-sbb-radio-button-group--docs) component in order to display a radio input within a group.
 
 ```html
 <sbb-radio-button-group value="Value one" aria-label="Radio group label">

From 7cf466e7863307a348d6ba932b90b44aec0cb857 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Wed, 6 Nov 2024 16:42:11 +0100
Subject: [PATCH 04/12] fix: fix train formation

---
 src/elements/core/i18n/i18n.ts                |  21 ++
 src/elements/core/styles/core.scss            |  11 +
 .../train/train-blocked-passage/readme.md     |   4 +-
 .../train-blocked-passage.scss                |   4 +-
 .../train-formation.snapshot.spec.snap.js     |  59 +++-
 src/elements/train/train-formation/readme.md  |  20 +-
 .../train-formation/train-formation.scss      |  32 +-
 .../train-formation.stories.ts                |  48 ++-
 .../train/train-formation/train-formation.ts  |   9 +-
 .../train-formation.visual.spec.ts            | 246 +++++++++------
 .../train-wagon.snapshot.spec.snap.js         | 295 +++++++++++++-----
 src/elements/train/train-wagon/readme.md      |  39 ++-
 .../train/train-wagon/train-wagon.scss        | 136 ++++----
 .../train-wagon/train-wagon.snapshot.spec.ts  |  18 ++
 .../train/train-wagon/train-wagon.spec.ts     |  14 +-
 .../train/train-wagon/train-wagon.stories.ts  | 106 ++++---
 src/elements/train/train-wagon/train-wagon.ts | 236 ++++++++------
 .../train-wagon/train-wagon.visual.spec.ts    | 112 ++++---
 .../__snapshots__/train.snapshot.spec.snap.js |  38 +--
 src/elements/train/train/readme.md            |   6 +-
 src/elements/train/train/train.scss           |  22 +-
 src/elements/train/train/train.spec.ts        |  12 +-
 src/elements/train/train/train.stories.ts     |   2 +-
 src/elements/train/train/train.ts             |   2 +-
 src/elements/train/train/train.visual.spec.ts |  14 +
 tools/web-test-runner/preload-icons.ts        |   2 +
 26 files changed, 947 insertions(+), 561 deletions(-)

diff --git a/src/elements/core/i18n/i18n.ts b/src/elements/core/i18n/i18n.ts
index 5b3cadcf6b..cd26fbe20d 100644
--- a/src/elements/core/i18n/i18n.ts
+++ b/src/elements/core/i18n/i18n.ts
@@ -102,6 +102,27 @@ export const i18nLocomotiveLabel: Record<string, string> = {
   it: 'Locomotiva',
 };
 
+export const i18nSleepingWagonLabel: Record<string, string> = {
+  de: 'Schlafwagen',
+  en: 'Sleeping car',
+  fr: 'Voiture-lits',
+  it: 'Carrozza letti',
+};
+
+export const i18nCouchetteWagonLabel: Record<string, string> = {
+  de: 'Liegewagen',
+  en: 'Couchette car',
+  fr: 'Voiture-couchettes',
+  it: 'Carrozza cuccette',
+};
+
+export const i18nRestaurantWagonLabel: Record<string, string> = {
+  de: 'Speisewagen',
+  en: 'Dining car',
+  fr: 'Voiture-restaurant',
+  it: 'Carrozza ristorante',
+};
+
 export const i18nBlockedPassage: Record<string, Record<string, string>> = {
   previous: {
     de: 'Kein Durchgang zum vorherigen Wagen',
diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
index 1c743b012f..ee3c43b5d1 100644
--- a/src/elements/core/styles/core.scss
+++ b/src/elements/core/styles/core.scss
@@ -154,6 +154,17 @@ input[data-sbb-time-input] {
   }
 }
 
+// TODO: move to train formation after css refactoring
 sbb-train-formation:has(sbb-train[direction-label]) {
   --sbb-train-formation-reserve-spacing-display: block;
 }
+
+// TODO: move to train formation after css refactoring
+sbb-train-formation:has(sbb-train-wagon[sector]) {
+  --sbb-train-formation-show-sectors-gap: 1;
+}
+
+// TODO: move to train formation after css refactoring
+sbb-train-formation:not(:has(sbb-train-wagon[label])) {
+  --sbb-train-formation-wagon-label-display: none;
+}
diff --git a/src/elements/train/train-blocked-passage/readme.md b/src/elements/train/train-blocked-passage/readme.md
index 5ad00ed80a..c911041f8b 100644
--- a/src/elements/train/train-blocked-passage/readme.md
+++ b/src/elements/train/train-blocked-passage/readme.md
@@ -1,7 +1,7 @@
 A `sbb-train-blocked-passage` is a visual representation of a blocked passage between
-[sbb-train-wagon](/docs/timetable-sbb-train-wagon--docs)s.
+[sbb-train-wagon](/docs/elements-timetable-sbb-train-wagon--docs)s.
 
-It is used inside the [sbb-train](/docs/timetable-sbb-train--docs) element.
+It is used inside the [sbb-train](/docs/elements-timetable-sbb-train--docs) element.
 
 ```html
 <sbb-train-blocked-passage></sbb-train-blocked-passage>
diff --git a/src/elements/train/train-blocked-passage/train-blocked-passage.scss b/src/elements/train/train-blocked-passage/train-blocked-passage.scss
index ae39baa145..01ed779a5c 100644
--- a/src/elements/train/train-blocked-passage/train-blocked-passage.scss
+++ b/src/elements/train/train-blocked-passage/train-blocked-passage.scss
@@ -7,7 +7,7 @@
   display: block;
 
   --sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);
-  --sbb-train-blocked-passage-background-color: var(--sbb-color-red);
+  --sbb-train-blocked-passage-background-color: var(--sbb-color-red125);
   --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
   --sbb-train-blocked-passage-icon-dimension: #{sbb.px-to-rem-build(16)};
   --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
@@ -24,7 +24,7 @@
   &::before {
     content: '';
     display: var(--sbb-train-formation-wagon-label-display, block);
-    height: calc(var(--sbb-font-size-text-s) * var(--sbb-typo-line-height-body-text));
+    height: calc(var(--sbb-font-size-text-xxs) * var(--sbb-typo-line-height-body-text));
   }
 }
 
diff --git a/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js b/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
index 852f216a12..a6119d8ebd 100644
--- a/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
+++ b/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
@@ -1,14 +1,13 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-train-formation should render with one train DOM"] =
-`<sbb-train-formation>
+snapshots["sbb-train-formation should render with one train DOM"] = 
+`<sbb-train-formation view="side">
   <sbb-train
     direction="left"
     slot="li-0"
   >
     <sbb-train-wagon
-      data-has-visible-wagon-content=""
       sector="A"
       slot="li-0"
       type="wagon"
@@ -19,10 +18,8 @@ snapshots["sbb-train-formation should render with one train DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with one train DOM */
 
-snapshots["sbb-train-formation should render with one train Shadow DOM"] =
-`<div
-  class="sbb-train-formation"
->
+snapshots["sbb-train-formation should render with one train Shadow DOM"] = 
+`<div class="sbb-train-formation">
   <div
     aria-hidden="true"
     class="sbb-train-formation__sectors"
@@ -57,14 +54,13 @@ snapshots["sbb-train-formation should render with one train Shadow DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with one train Shadow DOM */
 
-snapshots["sbb-train-formation should render with multiple trains DOM"] =
-`<sbb-train-formation>
+snapshots["sbb-train-formation should render with multiple trains DOM"] = 
+`<sbb-train-formation view="side">
   <sbb-train
     direction="left"
     slot="li-0"
   >
     <sbb-train-wagon
-      data-has-visible-wagon-content=""
       sector="A"
       slot="li-0"
       type="wagon"
@@ -76,7 +72,6 @@ snapshots["sbb-train-formation should render with multiple trains DOM"] =
     slot="li-1"
   >
     <sbb-train-wagon
-      data-has-visible-wagon-content=""
       sector="B"
       slot="li-0"
       type="wagon"
@@ -87,10 +82,8 @@ snapshots["sbb-train-formation should render with multiple trains DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with multiple trains DOM */
 
-snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] =
-`<div
-  class="sbb-train-formation"
->
+snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] = 
+`<div class="sbb-train-formation">
   <div
     aria-hidden="true"
     class="sbb-train-formation__sectors"
@@ -139,7 +132,7 @@ snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with multiple trains Shadow DOM */
 
-snapshots["sbb-train-formation should render with multiple trains A11y tree Chrome"] =
+snapshots["sbb-train-formation should render with multiple trains A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -154,6 +147,14 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
       "role": "text",
       "name": "Coaches of the train"
     },
+    {
+      "role": "text",
+      "name": "Train coach"
+    },
+    {
+      "role": "text",
+      "name": ", "
+    },
     {
       "role": "text",
       "name": "Sector, A"
@@ -167,6 +168,14 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
       "role": "text",
       "name": "Coaches of the train"
     },
+    {
+      "role": "text",
+      "name": "Train coach"
+    },
+    {
+      "role": "text",
+      "name": ", "
+    },
     {
       "role": "text",
       "name": "Sector, B"
@@ -177,7 +186,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
 `;
 /* end snapshot sbb-train-formation should render with multiple trains A11y tree Chrome */
 
-snapshots["sbb-train-formation should render with multiple trains A11y tree Firefox"] =
+snapshots["sbb-train-formation should render with multiple trains A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -192,6 +201,14 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Fire
       "role": "text leaf",
       "name": "Coaches of the train"
     },
+    {
+      "role": "text leaf",
+      "name": "Train coach"
+    },
+    {
+      "role": "text leaf",
+      "name": ", "
+    },
     {
       "role": "text leaf",
       "name": "Sector, A"
@@ -205,6 +222,14 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Fire
       "role": "text leaf",
       "name": "Coaches of the train"
     },
+    {
+      "role": "text leaf",
+      "name": "Train coach"
+    },
+    {
+      "role": "text leaf",
+      "name": ", "
+    },
     {
       "role": "text leaf",
       "name": "Sector, B"
diff --git a/src/elements/train/train-formation/readme.md b/src/elements/train/train-formation/readme.md
index 82494e8a79..fb1e72edcc 100644
--- a/src/elements/train/train-formation/readme.md
+++ b/src/elements/train/train-formation/readme.md
@@ -1,5 +1,5 @@
 The `sbb-train-formation` is a component used as a top container element
-for wrapping [sbb-train](/docs/timetable-sbb-train--docs)s.
+for wrapping [sbb-train](/docs/elements-timetable-sbb-train--docs)s.
 
 ```html
 <sbb-train-formation>
@@ -45,19 +45,29 @@ for wrapping [sbb-train](/docs/timetable-sbb-train--docs)s.
 </sbb-train-formation>
 ```
 
+### View
+
+The perspective of the train can be switched with the `view` property between `side` (default) and `top`.
+
+### Inline padding
+
+In certain circumstances there should be a left and right padding applied, but including the scrollbar.
+To achieve the inline padding, set a value to the
+CSS variable `--sbb-train-formation-padding-inline` like `var(--sbb-spacing-fixed-4x)`.
+
 <!-- Auto Generated Below -->
 
 ## Properties
 
-| Name             | Attribute          | Privacy | Type      | Default | Description                      |
-| ---------------- | ------------------ | ------- | --------- | ------- | -------------------------------- |
-| `hideWagonLabel` | `hide-wagon-label` | public  | `boolean` | `false` | Option to hide all wagon labels. |
+| Name   | Attribute | Privacy | Type              | Default  | Description                                                     |
+| ------ | --------- | ------- | ----------------- | -------- | --------------------------------------------------------------- |
+| `view` | `view`    | public  | `'side' \| 'top'` | `'side'` | Whether the view of the wagons is from side or top perspective. |
 
 ## CSS Properties
 
 | Name                                   | Default | Description                                                      |
 | -------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `--sbb-train-formation-inline-padding` | `0px`   | Defines the inline padding inside the horizontal scrolling area. |
+| `--sbb-train-formation-padding-inline` | `0px`   | Defines the inline padding inside the horizontal scrolling area. |
 
 ## Slots
 
diff --git a/src/elements/train/train-formation/train-formation.scss b/src/elements/train/train-formation/train-formation.scss
index 26d84929f1..46dfbdc221 100644
--- a/src/elements/train/train-formation/train-formation.scss
+++ b/src/elements/train/train-formation/train-formation.scss
@@ -17,17 +17,9 @@
   }
 }
 
-:host([hide-wagon-label]) {
-  --sbb-train-formation-wagon-label-display: none;
-}
-
 .sbb-train-formation {
   @include sbb.scrollbar;
 
-  row-gap: var(--sbb-train-formation-vertical-gap);
-  padding-block-end: var(--sbb-train-formation-vertical-gap);
-  color: var(--sbb-train-formation-text-color);
-
   & {
     display: grid;
     grid-template:
@@ -35,6 +27,11 @@
       'start trains end' auto / auto 1fr auto;
     position: relative;
     overflow-x: auto;
+    row-gap: calc(
+      var(--sbb-train-formation-show-sectors-gap, 0) * var(--sbb-train-formation-vertical-gap)
+    );
+    padding-block-end: var(--sbb-train-formation-vertical-gap);
+    color: var(--sbb-train-formation-text-color);
   }
 
   // Enable inline padding
@@ -42,7 +39,7 @@
   &::after {
     content: '';
     display: block;
-    width: var(--sbb-train-formation-inline-padding);
+    width: var(--sbb-train-formation-padding-inline);
   }
 
   &::before {
@@ -114,3 +111,20 @@
 .sbb-train-formation__train-list > :is(li, span) {
   display: inline-flex;
 }
+
+// TODO: Move to sbb-train-wagon after CSS refactoring
+:host([view='side']) {
+  --sbb-train-formation-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-formation-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-formation-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-formation-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-formation-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");
+}
+
+:host([view='top']) {
+  --sbb-train-formation-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-formation-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-formation-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-formation-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-formation-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");
+}
diff --git a/src/elements/train/train-formation/train-formation.stories.ts b/src/elements/train/train-formation/train-formation.stories.ts
index 574d03092e..d7f0e13992 100644
--- a/src/elements/train/train-formation/train-formation.stories.ts
+++ b/src/elements/train/train-formation/train-formation.stories.ts
@@ -25,7 +25,7 @@ const MountedFormationTemplate = (args: Args): TemplateResult => html`
         additional-accessibility-text="Top of the train"
         sector="A"
       ></sbb-train-wagon>
-      <sbb-train-wagon type="closed" sector="A"></sbb-train-wagon>
+      <sbb-train-wagon type="closed" sector="A" label="37"></sbb-train-wagon>
       <sbb-train-blocked-passage></sbb-train-blocked-passage>
       <sbb-train-wagon
         type="wagon"
@@ -51,15 +51,10 @@ const MountedFormationTemplate = (args: Args): TemplateResult => html`
       <sbb-train-wagon type="wagon" label="39" occupancy="none" wagon-class="1" sector="B">
         <sbb-icon aria-hidden="false" aria-label="low-floor entry" name="sa-nf"></sbb-icon>
       </sbb-train-wagon>
-      <sbb-train-wagon type="wagon" label="40" occupancy="high" wagon-class="2" sector="B">
-        <sbb-icon
-          aria-hidden="false"
-          aria-label="Restaurant 1st and 2nd class"
-          name="sa-wr"
-        ></sbb-icon>
+      <sbb-train-wagon type="restaurant" label="40" sector="B">
         <sbb-icon aria-hidden="false" aria-label="wheelchair space" name="sa-rs"></sbb-icon>
       </sbb-train-wagon>
-      <sbb-train-wagon type="wagon" label="41" occupancy="medium" wagon-class="2" sector="B">
+      <sbb-train-wagon type="wagon" label="41" occupancy="high" wagon-class="2" sector="B">
         <sbb-icon aria-hidden="false" aria-label="low-floor entry" name="sa-nf"></sbb-icon>
       </sbb-train-wagon>
       <sbb-train-wagon
@@ -107,21 +102,15 @@ const MountedFormationTemplate = (args: Args): TemplateResult => html`
         wagon-class="2"
         sector="D"
       ></sbb-train-wagon>
+      <sbb-train-wagon type="couchette" label="46" sector="D"></sbb-train-wagon>
       <sbb-train-wagon
-        type="wagon"
-        label="46"
-        occupancy="low"
-        wagon-class="2"
-        sector="D"
-      ></sbb-train-wagon>
-      <sbb-train-wagon
-        type="wagon"
+        type="sleeping"
         label="47"
         additional-accessibility-text="End of the train"
-        occupancy="low"
-        wagon-class="2"
         sector="D"
+        blocked-passage="next"
       ></sbb-train-wagon>
+      <sbb-train-blocked-passage></sbb-train-blocked-passage>
     </sbb-train>
     <sbb-train
       direction-label="Direction of travel"
@@ -130,18 +119,18 @@ const MountedFormationTemplate = (args: Args): TemplateResult => html`
       accessibility-label="The top of the train is in Sector E. The train leaves the station in this direction"
     >
       <sbb-train-wagon
-        type="locomotive"
+        type="wagon-end-left"
         additional-accessibility-text="Top of the train"
+        blocked-passage="previous"
+        occupancy="none"
+        wagon-class="2"
         sector="E"
       ></sbb-train-wagon>
-      <sbb-train-wagon type="closed" label="49" sector="E"></sbb-train-wagon>
-      <sbb-train-blocked-passage></sbb-train-blocked-passage>
       <sbb-train-wagon
         type="wagon"
         label="50"
         occupancy="low"
         wagon-class="2"
-        blocked-passage="previous"
         sector="E"
       ></sbb-train-wagon>
       <sbb-train-wagon
@@ -201,7 +190,7 @@ const MountedFormationTemplate = (args: Args): TemplateResult => html`
         sector="H"
       ></sbb-train-wagon>
       <sbb-train-wagon
-        type="wagon"
+        type="wagon-end-right"
         label="59"
         occupancy="low"
         wagon-class="2"
@@ -325,18 +314,19 @@ const SingleFormationTemplate = (args: Args): TemplateResult => html`
   </sbb-train-formation>
 `;
 
-const hideWagonLabel: InputType = {
+const view: InputType = {
   control: {
-    type: 'boolean',
+    type: 'inline-radio',
   },
+  options: ['side', 'top'],
 };
 
 const defaultArgTypes: ArgTypes = {
-  'hide-wagon-label': hideWagonLabel,
+  view,
 };
 
 const defaultArgs: Args = {
-  'hide-wagon-label': false,
+  view: 'side',
 };
 
 export const TrainFormation: StoryObj = {
@@ -355,12 +345,12 @@ export const SingleFormation: StoryObj = {
   },
 };
 
-export const TrainFormationHideWagonLabel: StoryObj = {
+export const TrainFormationTopView: StoryObj = {
   render: MountedFormationTemplate,
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'hide-wagon-label': true,
+    view: 'top',
   },
 };
 
diff --git a/src/elements/train/train-formation/train-formation.ts b/src/elements/train/train-formation/train-formation.ts
index 291d41a4fa..5d0a80e690 100644
--- a/src/elements/train/train-formation/train-formation.ts
+++ b/src/elements/train/train-formation/train-formation.ts
@@ -9,7 +9,6 @@ import {
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
-import { forceType } from '../../core/decorators.js';
 import { i18nSector, i18nSectorShort, i18nTrains } from '../../core/i18n.js';
 import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js';
 import type { SbbTrainBlockedPassageElement } from '../train-blocked-passage.js';
@@ -28,7 +27,7 @@ interface AggregatedSector {
  * 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-inline-padding=0px] - Defines the inline padding inside the horizontal scrolling area.
+ * @cssprop [--sbb-train-formation-padding-inline=0px] - Defines the inline padding inside the horizontal scrolling area.
  */
 export
 @customElement('sbb-train-formation')
@@ -38,10 +37,8 @@ class SbbTrainFormationElement extends SbbNamedSlotListMixin<SbbTrainElement, ty
   public static override styles: CSSResultGroup = style;
   protected override readonly listChildLocalNames = ['sbb-train'];
 
-  /** Option to hide all wagon labels. */
-  @forceType()
-  @property({ attribute: 'hide-wagon-label', reflect: true, type: Boolean })
-  public accessor hideWagonLabel: boolean = false;
+  /** Whether the view of the wagons is from side or top perspective. */
+  @property({ reflect: true }) public accessor view: 'side' | 'top' = 'side';
 
   @state() private accessor _sectors: AggregatedSector[] = [];
 
diff --git a/src/elements/train/train-formation/train-formation.visual.spec.ts b/src/elements/train/train-formation/train-formation.visual.spec.ts
index ad7975ecbe..ebd20e8680 100644
--- a/src/elements/train/train-formation/train-formation.visual.spec.ts
+++ b/src/elements/train/train-formation/train-formation.visual.spec.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 
 import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
 
 import '../train.js';
 import '../train-wagon.js';
@@ -8,8 +9,6 @@ import '../train-blocked-passage.js';
 import './train-formation.js';
 
 describe(`sbb-train-formation`, () => {
-  const hideWagonLabelCases = [false, true];
-
   const train1 = html`<sbb-train
     direction-label="Direction of travel"
     station="Bern"
@@ -34,11 +33,10 @@ describe(`sbb-train-formation`, () => {
     <sbb-train-wagon type="wagon" label="39" occupancy="none" wagon-class="1" sector="B">
       <sbb-icon name="sa-nf"></sbb-icon>
     </sbb-train-wagon>
-    <sbb-train-wagon type="wagon" label="40" occupancy="high" wagon-class="2" sector="B">
-      <sbb-icon name="sa-wr"></sbb-icon>
+    <sbb-train-wagon type="restaurant" label="40" sector="B">
       <sbb-icon name="sa-rs"></sbb-icon>
     </sbb-train-wagon>
-    <sbb-train-wagon type="wagon" label="41" occupancy="medium" wagon-class="2" sector="B">
+    <sbb-train-wagon type="wagon" label="41" occupancy="high" wagon-class="2" sector="B">
       <sbb-icon name="sa-nf"></sbb-icon>
     </sbb-train-wagon>
     <sbb-train-wagon
@@ -82,113 +80,107 @@ describe(`sbb-train-formation`, () => {
       wagon-class="2"
       sector="D"
     ></sbb-train-wagon>
+    <sbb-train-wagon type="couchette" label="46" sector="D"></sbb-train-wagon>
+    <sbb-train-wagon type="sleeping" label="47" sector="D" blocked-passage="next"></sbb-train-wagon>
+    <sbb-train-blocked-passage></sbb-train-blocked-passage>
+  </sbb-train>`;
+
+  const train2 = html`<sbb-train
+    direction-label="Direction of travel"
+    station="Luzern"
+    direction="left"
+  >
+    <sbb-train-wagon
+      type="wagon-end-left"
+      blocked-passage="previous"
+      occupancy="none"
+      wagon-class="2"
+      sector="E"
+    ></sbb-train-wagon>
+    <sbb-train-wagon type="closed" label="49" sector="E"></sbb-train-wagon>
+    <sbb-train-blocked-passage></sbb-train-blocked-passage>
     <sbb-train-wagon
       type="wagon"
-      label="46"
+      label="50"
       occupancy="low"
       wagon-class="2"
-      sector="D"
+      blocked-passage="previous"
+      sector="E"
     ></sbb-train-wagon>
     <sbb-train-wagon
       type="wagon"
-      label="47"
+      label="51"
       occupancy="low"
       wagon-class="2"
-      sector="D"
+      sector="F"
+    ></sbb-train-wagon>
+    <sbb-train-wagon
+      type="wagon"
+      label="52"
+      occupancy="low"
+      wagon-class="2"
+      sector="F"
+    ></sbb-train-wagon>
+    <sbb-train-wagon
+      type="wagon"
+      label="53"
+      occupancy="low"
+      wagon-class="2"
+      sector="F"
+    ></sbb-train-wagon>
+    <sbb-train-wagon
+      type="wagon"
+      label="54"
+      occupancy="low"
+      wagon-class="2"
+      sector="G"
+    ></sbb-train-wagon>
+    <sbb-train-wagon
+      type="wagon"
+      label="55"
+      occupancy="low"
+      wagon-class="2"
+      sector="G"
+    ></sbb-train-wagon>
+    <sbb-train-wagon
+      type="wagon"
+      label="56"
+      occupancy="low"
+      wagon-class="2"
+      sector="G"
+    ></sbb-train-wagon>
+    <sbb-train-wagon
+      type="wagon"
+      label="57"
+      occupancy="low"
+      wagon-class="2"
+      sector="H"
+    ></sbb-train-wagon>
+    <sbb-train-wagon
+      type="wagon"
+      label="58"
+      occupancy="low"
+      wagon-class="2"
+      sector="H"
+    ></sbb-train-wagon>
+    <sbb-train-wagon
+      type="wagon-end-right"
+      label="59"
+      occupancy="low"
+      wagon-class="2"
+      sector="H"
     ></sbb-train-wagon>
   </sbb-train>`;
 
   describeViewports({ viewports: ['zero', 'medium', 'ultra'] }, () => {
-    describe('multiple trains', () => {
-      for (const hideWagonLabel of hideWagonLabelCases) {
-        it(
-          `hide-wagon-label=${hideWagonLabel}`,
-          visualDiffDefault.with(async (setup) => {
-            await setup.withFixture(
-              html`<sbb-train-formation ?hide-wagon-label=${hideWagonLabel}>
-                ${train1}
-                <sbb-train direction-label="Direction of travel" station="Luzern" direction="left">
-                  <sbb-train-wagon type="locomotive" sector="E"></sbb-train-wagon>
-                  <sbb-train-wagon type="closed" label="49" sector="E"></sbb-train-wagon>
-                  <sbb-train-blocked-passage></sbb-train-blocked-passage>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="50"
-                    occupancy="low"
-                    wagon-class="2"
-                    blocked-passage="previous"
-                    sector="E"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="51"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="F"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="52"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="F"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="53"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="F"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="54"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="G"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="55"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="G"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="56"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="G"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="57"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="H"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="58"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="H"
-                  ></sbb-train-wagon>
-                  <sbb-train-wagon
-                    type="wagon"
-                    label="59"
-                    occupancy="low"
-                    wagon-class="2"
-                    sector="H"
-                  ></sbb-train-wagon>
-                </sbb-train>
-              </sbb-train-formation>`,
-            );
-          }),
+    it(
+      `multiple trains`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-train-formation>${train1} ${train2}</sbb-train-formation>`,
         );
-      }
-    });
+      }),
+    );
 
     it(
       `single train`,
@@ -196,5 +188,63 @@ describe(`sbb-train-formation`, () => {
         await setup.withFixture(html`<sbb-train-formation>${train1}</sbb-train-formation>`);
       }),
     );
+
+    it(
+      `padding`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-train-formation
+            style="--sbb-train-formation-padding-inline:var(--sbb-spacing-fixed-4x)"
+          >
+            ${train1} ${train2}
+          </sbb-train-formation>`,
+        );
+      }),
+    );
+
+    it(
+      `no label`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-train-formation> ${train1} ${train2} </sbb-train-formation>`,
+        );
+
+        Array.from(setup.snapshotElement.querySelectorAll('sbb-train-wagon')!).forEach(
+          (wagon) => (wagon.label = ''),
+        );
+
+        await waitForLitRender(setup.snapshotElement);
+      }),
+    );
+
+    it(
+      `no sectors`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-train-formation> ${train1} ${train2} </sbb-train-formation>`,
+        );
+
+        Array.from(setup.snapshotElement.querySelectorAll('sbb-train-wagon')!).forEach(
+          (wagon) => (wagon.sector = ''),
+        );
+
+        await waitForLitRender(setup.snapshotElement);
+      }),
+    );
+
+    it(
+      `no direction label`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-train-formation> ${train1} ${train2} </sbb-train-formation>`,
+        );
+
+        Array.from(setup.snapshotElement.querySelectorAll('sbb-train')!).forEach(
+          (wagon) => (wagon.directionLabel = ''),
+        );
+
+        await waitForLitRender(setup.snapshotElement);
+      }),
+    );
   });
 });
diff --git a/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js b/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
index f416e6d06e..e28c47e4db 100644
--- a/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
+++ b/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
@@ -4,7 +4,6 @@ export const snapshots = {};
 snapshots["sbb-train-wagon should render as type wagon DOM"] = 
 `<sbb-train-wagon
   blocked-passage="previous"
-  data-has-visible-wagon-content=""
   label="38"
   occupancy="none"
   type="wagon"
@@ -41,6 +40,7 @@ snapshots["sbb-train-wagon should render as type wagon Shadow DOM"] =
       aria-label="No occupancy forecast available"
       class="sbb-train-wagon__occupancy"
       data-namespace="default"
+      occupancy="none"
       role="listitem"
     >
     </sbb-timetable-occupancy-icon>
@@ -48,24 +48,16 @@ snapshots["sbb-train-wagon should render as type wagon Shadow DOM"] =
       No passage to the previous train coach
     </li>
   </ul>
-  <span
-    class="sbb-train-wagon__icons"
-    hidden=""
-  >
-    <span hidden="">
-      <slot>
-      </slot>
-    </span>
+  <span hidden="">
+    <slot>
+    </slot>
   </span>
 </div>
 `;
 /* end snapshot sbb-train-wagon should render as type wagon Shadow DOM */
 
 snapshots["sbb-train-wagon should render as type wagon with one icon DOM"] = 
-`<sbb-train-wagon
-  data-has-visible-wagon-content=""
-  type="wagon"
->
+`<sbb-train-wagon type="wagon">
   <sbb-icon
     aria-hidden="true"
     data-namespace="default"
@@ -80,47 +72,35 @@ snapshots["sbb-train-wagon should render as type wagon with one icon DOM"] =
 
 snapshots["sbb-train-wagon should render as type wagon with one icon Shadow DOM"] = 
 `<div class="sbb-train-wagon">
-  <ul
-    aria-label="Train coach"
-    class="sbb-train-wagon__compartment"
-  >
-    <li
+  <div class="sbb-train-wagon__compartment">
+    <span class="sbb-screen-reader-only">
+      Train coach
+    </span>
+    <span
       aria-hidden="true"
       class="sbb-train-wagon__label"
     >
-    </li>
-    <sbb-timetable-occupancy-icon
-      aria-label="No occupancy forecast available"
-      class="sbb-train-wagon__occupancy"
-      data-namespace="default"
-      role="listitem"
-    >
-    </sbb-timetable-occupancy-icon>
-  </ul>
-  <span class="sbb-train-wagon__icons">
-    <sbb-screen-reader-only>
-      Additional wagon information
-    </sbb-screen-reader-only>
-    <span class="sbb-train-wagon__icons-list">
-      <span>
-        <slot name="li-0">
-        </slot>
-      </span>
     </span>
-    <span hidden="">
-      <slot>
+  </div>
+  <sbb-screen-reader-only>
+    Additional wagon information
+  </sbb-screen-reader-only>
+  <span class="sbb-train-wagon__attribute-icon-list">
+    <span>
+      <slot name="li-0">
       </slot>
     </span>
   </span>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
 </div>
 `;
 /* end snapshot sbb-train-wagon should render as type wagon with one icon Shadow DOM */
 
 snapshots["sbb-train-wagon should render as type wagon with multiple icons DOM"] = 
-`<sbb-train-wagon
-  data-has-visible-wagon-content=""
-  type="wagon"
->
+`<sbb-train-wagon type="wagon">
   <sbb-icon
     aria-hidden="true"
     data-namespace="default"
@@ -143,41 +123,32 @@ snapshots["sbb-train-wagon should render as type wagon with multiple icons DOM"]
 
 snapshots["sbb-train-wagon should render as type wagon with multiple icons Shadow DOM"] = 
 `<div class="sbb-train-wagon">
-  <ul
-    aria-label="Train coach"
-    class="sbb-train-wagon__compartment"
-  >
-    <li
+  <div class="sbb-train-wagon__compartment">
+    <span class="sbb-screen-reader-only">
+      Train coach
+    </span>
+    <span
       aria-hidden="true"
       class="sbb-train-wagon__label"
     >
+    </span>
+  </div>
+  <ul
+    aria-label="Additional wagon information"
+    class="sbb-train-wagon__attribute-icon-list"
+  >
+    <li>
+      <slot name="li-0">
+      </slot>
     </li>
-    <sbb-timetable-occupancy-icon
-      aria-label="No occupancy forecast available"
-      class="sbb-train-wagon__occupancy"
-      data-namespace="default"
-      role="listitem"
-    >
-    </sbb-timetable-occupancy-icon>
-  </ul>
-  <span class="sbb-train-wagon__icons">
-    <ul
-      aria-label="Additional wagon information"
-      class="sbb-train-wagon__icons-list"
-    >
-      <li>
-        <slot name="li-0">
-        </slot>
-      </li>
-      <li>
-        <slot name="li-1">
-        </slot>
-      </li>
-    </ul>
-    <span hidden="">
-      <slot>
+    <li>
+      <slot name="li-1">
       </slot>
-    </span>
+    </li>
+  </ul>
+  <span hidden="">
+    <slot>
+    </slot>
   </span>
 </div>
 `;
@@ -194,7 +165,7 @@ snapshots["sbb-train-wagon should render as type locomotive DOM"] =
 
 snapshots["sbb-train-wagon should render as type locomotive Shadow DOM"] = 
 `<div class="sbb-train-wagon">
-  <span class="sbb-train-wagon__compartment">
+  <div class="sbb-train-wagon__compartment">
     <span class="sbb-screen-reader-only">
       Locomotive
     </span>
@@ -203,10 +174,14 @@ snapshots["sbb-train-wagon should render as type locomotive Shadow DOM"] =
       class="sbb-train-wagon__label"
     >
     </span>
-  </span>
+  </div>
   <span class="sbb-screen-reader-only">
     , Top of the train
   </span>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
 </div>
 `;
 /* end snapshot sbb-train-wagon should render as type locomotive Shadow DOM */
@@ -219,7 +194,7 @@ snapshots["sbb-train-wagon should render as type closed wagon without number DOM
 
 snapshots["sbb-train-wagon should render as type closed wagon without number Shadow DOM"] = 
 `<div class="sbb-train-wagon">
-  <span class="sbb-train-wagon__compartment">
+  <div class="sbb-train-wagon__compartment">
     <span class="sbb-screen-reader-only">
       Closed train coach
     </span>
@@ -228,12 +203,16 @@ snapshots["sbb-train-wagon should render as type closed wagon without number Sha
       class="sbb-train-wagon__label"
     >
     </span>
+  </div>
+  <span hidden="">
+    <slot>
+    </slot>
   </span>
 </div>
 `;
 /* end snapshot sbb-train-wagon should render as type closed wagon without number Shadow DOM */
 
-snapshots["sbb-train-wagon should render as type wagon A11y tree Chrome"] = 
+snapshots["sbb-train-wagon should render as type wagon A11y tree Chrome"] =
 `<p>
   {
   "role": "WebArea",
@@ -241,11 +220,11 @@ snapshots["sbb-train-wagon should render as type wagon A11y tree Chrome"] =
   "children": [
     {
       "role": "text",
-      "name": "Number,"
+      "name": "Number"
     },
     {
       "role": "text",
-      "name": " "
+      "name": ",  "
     },
     {
       "role": "text",
@@ -273,7 +252,11 @@ snapshots["sbb-train-wagon should render as type wagon A11y tree Firefox"] =
   "children": [
     {
       "role": "text leaf",
-      "name": "Number,"
+      "name": "Number"
+    },
+    {
+      "role": "text leaf",
+      "name": ",   "
     },
     {
       "role": "text leaf",
@@ -293,3 +276,157 @@ snapshots["sbb-train-wagon should render as type wagon A11y tree Firefox"] =
 `;
 /* end snapshot sbb-train-wagon should render as type wagon A11y tree Firefox */
 
+snapshots["sbb-train-wagon should render as type wagon end with only one property DOM"] =
+`<sbb-train-wagon
+  type="wagon-end-right"
+  wagon-class="1"
+>
+</sbb-train-wagon>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon end with only one property DOM */
+
+snapshots["sbb-train-wagon should render as type wagon end with only one property Shadow DOM"] =
+`<div class="sbb-train-wagon">
+  <div class="sbb-train-wagon__compartment">
+    <span class="sbb-screen-reader-only">
+      Train coach
+    </span>
+    <span
+      aria-hidden="true"
+      class="sbb-train-wagon__label"
+    >
+    </span>
+    <span class="sbb-train-wagon__class">
+      <span class="sbb-screen-reader-only">
+        First Class
+      </span>
+      <span aria-hidden="true">
+        1
+      </span>
+    </span>
+  </div>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon end with only one property Shadow DOM */
+
+snapshots["sbb-train-wagon should render as type wagon end with only one property A11y tree Chrome"] =
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Train coach"
+    },
+    {
+      "role": "text",
+      "name": "First Class"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon end with only one property A11y tree Chrome */
+
+snapshots["sbb-train-wagon should render as type wagon end with only one property A11y tree Firefox"] =
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Train coach"
+    },
+    {
+      "role": "text leaf",
+      "name": "First Class"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon end with only one property A11y tree Firefox */
+
+snapshots["sbb-train-wagon should render as type wagon-end-right with only one property DOM"] = 
+`<sbb-train-wagon
+  type="wagon-end-right"
+  wagon-class="1"
+>
+</sbb-train-wagon>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon-end-right with only one property DOM */
+
+snapshots["sbb-train-wagon should render as type wagon-end-right with only one property Shadow DOM"] = 
+`<div class="sbb-train-wagon">
+  <div class="sbb-train-wagon__compartment">
+    <span class="sbb-screen-reader-only">
+      Train coach
+    </span>
+    <span
+      aria-hidden="true"
+      class="sbb-train-wagon__label"
+    >
+    </span>
+    <span class="sbb-train-wagon__class">
+      <span class="sbb-screen-reader-only">
+        First Class
+      </span>
+      <span aria-hidden="true">
+        1
+      </span>
+    </span>
+  </div>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon-end-right with only one property Shadow DOM */
+
+snapshots["sbb-train-wagon should render as type wagon-end-right with only one property A11y tree Chrome"] =
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Train coach"
+    },
+    {
+      "role": "text",
+      "name": "First Class"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon-end-right with only one property A11y tree Chrome */
+
+snapshots["sbb-train-wagon should render as type wagon-end-right with only one property A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Train coach"
+    },
+    {
+      "role": "text leaf",
+      "name": "First Class"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon-end-right with only one property A11y tree Firefox */
+
diff --git a/src/elements/train/train-wagon/readme.md b/src/elements/train/train-wagon/readme.md
index b328d0411d..bc42b4c76c 100644
--- a/src/elements/train/train-wagon/readme.md
+++ b/src/elements/train/train-wagon/readme.md
@@ -1,30 +1,35 @@
 THe `sbb-train-wagon` is a component which represents a train compartment.
 
-It is used inside the [sbb-train](/docs/timetable-sbb-train--docs) element.
+It is used inside the [sbb-train](/docs/elements-timetable-sbb-train--docs) element.
 
 ## Variants
 
-The component can visualize a locomotive or a wagon (possibly closed),
-so it has three different variants, based on the value of the `type` property.
+With the `type` property, the component can visualize different types of wagons and locomotives.
+Set the `blockedPassage` corresponding to the `type`.
+E.g. for `wagon-end-left` in between a train, `blockedPassage` should be `previous`.
+If the `wagon-end-left` is the very first compartment of the train, there should be the `additionalAccessibilityText` set like `Top of the train` but without any `blockedPassage` information.
 
 ```html
 <sbb-train-wagon type="wagon"></sbb-train-wagon>
-
+<sbb-train-wagon type="wagon-end-left"></sbb-train-wagon>
+<sbb-train-wagon type="wagon-end-right"></sbb-train-wagon>
+<sbb-train-wagon type="couchette"></sbb-train-wagon>
+<sbb-train-wagon type="sleeping"></sbb-train-wagon>
+<sbb-train-wagon type="restaurant"></sbb-train-wagon>
 <sbb-train-wagon type="locomotive"></sbb-train-wagon>
-
 <sbb-train-wagon type="closed"></sbb-train-wagon>
 ```
 
-The property `occupancy` sets the component's inner icon; available values are `high`, `medium`, `low` and `none`;
+The property `occupancy` sets the component's inner icon; available values are `high`, `medium`, `low`, `none` and `null`;
 it's also possible to display the wagon class at component's end using the `wagonClass` property
-and a `label` above the component with the self-named property.
+and a wagon number (property `label`) above the component.
 
 ```html
 <sbb-train-wagon type="wagon" label="38" occupancy="low" wagon-class="1"></sbb-train-wagon>
 ```
 
 **Note:**
-A `sbb-train-wagon` with `type="wagon"` has the possibilities of slotting icons.
+A `sbb-train-wagon` with `type="wagon"` has the possibilities of slotting attribute icons.
 They will be applied internally into a list (using `<ul>` and `<li>`) and requires an `aria-label` for each slotted icon.
 
 ```html
@@ -43,15 +48,15 @@ They will be applied internally into a list (using `<ul>` and `<li>`) and requir
 
 ## Properties
 
-| Name                          | Attribute                       | Privacy | Type                                       | Default   | Description                                                                |
-| ----------------------------- | ------------------------------- | ------- | ------------------------------------------ | --------- | -------------------------------------------------------------------------- |
-| `additionalAccessibilityText` | `additional-accessibility-text` | public  | `string`                                   | `''`      | Additional accessibility text which will be appended to the end.           |
-| `blockedPassage`              | `blocked-passage`               | public  | `'previous' \| 'next' \| 'both' \| 'none'` | `'none'`  | Accessibility text for blocked passages of the wagon.                      |
-| `label`                       | `label`                         | public  | `string`                                   | `''`      | Visible label for the wagon number. Not used by type locomotive or closed. |
-| `occupancy`                   | `occupancy`                     | public  | `SbbOccupancy`                             | `'none'`  | Occupancy of a wagon.                                                      |
-| `sector`                      | `sector`                        | public  | `string`                                   | `''`      | Sector in which to wagon stops.                                            |
-| `type`                        | `type`                          | public  | `'locomotive' \| 'closed' \| 'wagon'`      | `'wagon'` | Wagon type.                                                                |
-| `wagonClass`                  | `wagon-class`                   | public  | `'1' \| '2' \| null`                       | `null`    | Visible class label of a wagon.                                            |
+| Name                          | Attribute                       | Privacy | Type                                                                                                                        | Default   | Description                                                                                                                  |
+| ----------------------------- | ------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `additionalAccessibilityText` | `additional-accessibility-text` | public  | `string`                                                                                                                    | `''`      | Additional accessibility text which will be appended to the end.                                                             |
+| `blockedPassage`              | `blocked-passage`               | public  | `'previous' \| 'next' \| 'both' \| 'none'`                                                                                  | `'none'`  | Accessibility text for blocked passages of the wagon.                                                                        |
+| `label`                       | `label`                         | public  | `string`                                                                                                                    | `''`      | Wagon number                                                                                                                 |
+| `occupancy`                   | `occupancy`                     | public  | `SbbOccupancy \| null`                                                                                                      | `null`    | Occupancy of a wagon.                                                                                                        |
+| `sector`                      | `sector`                        | public  | `string`                                                                                                                    | `''`      | Sector in which to wagon stops.                                                                                              |
+| `type`                        | `type`                          | public  | `'wagon' \| 'wagon-end-left' \| 'wagon-end-right' \| 'couchette' \| 'sleeping' \| 'restaurant' \| 'locomotive' \| 'closed'` | `'wagon'` | Wagon type. For `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property. |
+| `wagonClass`                  | `wagon-class`                   | public  | `'1' \| '2' \| null`                                                                                                        | `null`    | Class label                                                                                                                  |
 
 ## Slots
 
diff --git a/src/elements/train/train-wagon/train-wagon.scss b/src/elements/train/train-wagon/train-wagon.scss
index 00cb619e78..ae5c55cf8f 100644
--- a/src/elements/train/train-wagon/train-wagon.scss
+++ b/src/elements/train/train-wagon/train-wagon.scss
@@ -8,19 +8,59 @@
 
   --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-icons-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-train-wagon-icons-height: #{sbb.px-to-rem-build(14)};
+  --sbb-train-wagon-main-icon-height: #{sbb.px-to-rem-build(20)};
+  --sbb-train-wagon-main-icon-margin-block-start: #{sbb.px-to-rem-build(10)};
+  --sbb-train-wagon-attribute-icon-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-train-wagon-attribute-icon-height: #{sbb.px-to-rem-build(14)};
+  --sbb-train-wagon-attribute-icon-color: var(--sbb-color-granite);
+  --sbb-train-wagon-occupancy-height: #{sbb.px-to-rem-build(12)};
 
   @include sbb.if-forced-colors {
-    --sbb-train-wagon-shape-color-closed: CanvasText;
+    --sbb-train-wagon-shape-color: CanvasText;
   }
 }
 
+:host(
+    :is([type='closed'], [type='locomotive'], [type='wagon-end-left'], [type='wagon-end-right'])
+  ) {
+  --sbb-train-wagon-shape-color: var(--sbb-color-metal);
+
+  @include sbb.if-forced-colors {
+    --sbb-train-wagon-shape-color: CanvasText;
+  }
+}
+
+:host([type='closed']) {
+  @include sbb.if-forced-colors {
+    --sbb-train-wagon-shape-color: GrayText;
+  }
+}
+
+:host(:is([type='sleeping'], [type='couchette'])) {
+  --sbb-train-wagon-main-icon-margin-block-start: #{sbb.px-to-rem-build(6.25)};
+}
+
+:host(:is([type='wagon'], [type='restaurant'], [type='sleeping'], [type='couchette'])) {
+  --sbb-train-wagon-shape: var(--sbb-train-formation-wagon-shape);
+}
+
+:host([type='closed']) {
+  --sbb-train-wagon-shape: var(--sbb-train-formation-wagon-closed-shape);
+}
+
+:host([type='locomotive']) {
+  --sbb-train-wagon-shape: var(--sbb-train-formation-locomotive-shape);
+}
+
+:host([type='wagon-end-left']) {
+  --sbb-train-wagon-shape: var(--sbb-train-formation-wagon-end-left-shape);
+}
+
+:host([type='wagon-end-right']) {
+  --sbb-train-wagon-shape: var(--sbb-train-formation-wagon-end-right-shape);
+}
+
 .sbb-train-wagon {
   display: flex;
   flex-direction: column;
@@ -36,48 +76,33 @@
   grid-template:
     'label label' auto
     'occupancy class' 1fr / 1fr 1fr;
-  position: relative;
-  width: 100%;
 
-  // Reserve space because there is no content in the closed wagon
+  // Type shape
   &::before {
-    :host([type='closed']) &,
-    :host(:not([data-has-visible-wagon-content])) & {
-      content: '';
-      grid-area: occupancy / span 2;
-      height: var(--sbb-train-wagon-height);
-    }
-  }
-
-  &::after {
     content: '';
-    display: block;
-    position: absolute;
-    inset-inline: 0;
-    inset-block: auto 0;
+    grid-column: occupancy / class;
+    grid-row: occupancy;
+    pointer-events: none;
     width: var(--sbb-train-wagon-width);
     height: var(--sbb-train-wagon-height);
-    border-radius: var(--sbb-train-wagon-shape-border-radius);
-
-    :host([type='wagon']) & {
-      border: var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color);
-    }
+    background-color: var(--sbb-train-wagon-shape-color);
 
-    :host([type='closed']) & {
-      border: var(--sbb-train-wagon-shape-width) solid var(--sbb-train-wagon-shape-color-closed);
-    }
+    // Using mask-image takes the background-color as stroke color
+    mask-image: var(--sbb-train-wagon-shape);
   }
 }
 
-.sbb-train-wagon__occupancy,
-.sbb-train-wagon__class {
-  height: var(--sbb-train-wagon-height);
-  display: flex;
-  align-items: center;
+.sbb-train-wagon__main-icon {
+  --sbb-icon-svg-height: var(--sbb-train-wagon-main-icon-height);
+
+  grid-column: occupancy / class;
+  grid-row: occupancy;
+  margin-block-start: var(--sbb-train-wagon-main-icon-margin-block-start);
+  justify-self: center;
 }
 
 .sbb-train-wagon__label {
-  @include sbb.text-xs--regular;
+  @include sbb.text-xxs--regular;
 
   grid-area: label;
   text-align: center;
@@ -85,46 +110,41 @@
   min-height: calc(1em * var(--sbb-typo-line-height-body-text));
 }
 
+.sbb-train-wagon__occupancy,
+.sbb-train-wagon__class {
+  height: var(--sbb-train-wagon-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .sbb-train-wagon__occupancy {
+  --sbb-icon-svg-height: var(--sbb-train-wagon-occupancy-height);
+
   grid-area: occupancy;
-  padding-inline-start: var(--sbb-train-wagon-inner-padding);
 }
 
 .sbb-train-wagon__class {
   @include sbb.title-6($exclude-spacing: true);
 
   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;
-
-  &[hidden] {
-    // Don't reserve any space in hidden case
-    position: absolute;
-  }
 }
 
-.sbb-train-wagon__icons-list {
+.sbb-train-wagon__attribute-icon-list {
   @include sbb.list-reset;
 
+  --sbb-icon-svg-height: var(--sbb-train-wagon-attribute-icon-height);
+
   display: flex;
   flex-wrap: wrap;
-  gap: var(--sbb-train-wagon-icons-gap);
   justify-content: center;
+  gap: var(--sbb-train-wagon-attribute-icon-gap);
+  color: var(--sbb-train-wagon-attribute-icon-color);
 }
 
 // Using ... li selector, because the li generation
 // is handled in the component base class.
-.sbb-train-wagon__icons-list > :is(li, span) {
+.sbb-train-wagon__attribute-icon-list > :is(li, span) {
   display: inline-flex;
 }
 
diff --git a/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts b/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
index 1d36445d5c..70773f08d6 100644
--- a/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
+++ b/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
@@ -36,6 +36,24 @@ describe(`sbb-train-wagon`, () => {
     testA11yTreeSnapshot();
   });
 
+  describe('should render as type wagon-end-right with only one property', async () => {
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-train-wagon wagon-class="1" type="wagon-end-right"></sbb-train-wagon>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
+
   describe('should render as type wagon with one icon', async () => {
     beforeEach(async () => {
       element = await fixture(
diff --git a/src/elements/train/train-wagon/train-wagon.spec.ts b/src/elements/train/train-wagon/train-wagon.spec.ts
index 7cd964caf7..fc1bcfe1e0 100644
--- a/src/elements/train/train-wagon/train-wagon.spec.ts
+++ b/src/elements/train/train-wagon/train-wagon.spec.ts
@@ -49,7 +49,7 @@ async function extractAriaLabels(
   // Select all accessibility relevant text parts
   return Array.from(
     element.shadowRoot!.querySelectorAll(
-      '[aria-hidden=false], [aria-label]:not(.sbb-train-wagon__icons-list), .sbb-screen-reader-only:not(.sbb-train-wagon__label > span)',
+      '[aria-hidden=false], [aria-label]:not(.sbb-train-wagon__attribute-icon-list), .sbb-screen-reader-only:not(.sbb-train-wagon__label > span)',
     ),
   ).map((entry) =>
     entry.hasAttribute('aria-label')
@@ -97,22 +97,24 @@ describe(`sbb-train-wagon`, () => {
   });
 
   it('should set aria labels correctly', async () => {
-    expect(await extractAriaLabels({})).to.be.eql([]);
+    expect(await extractAriaLabels({ type: 'wagon' })).to.be.eql(['Train coach']);
     expect(await extractAriaLabels({ type: 'locomotive' })).to.be.eql(['Locomotive']);
+    expect(await extractAriaLabels({ type: 'sleeping' })).to.be.eql(['Sleeping car']);
+    expect(await extractAriaLabels({ type: 'restaurant' })).to.be.eql(['Dining car']);
+
     expect(
       await extractAriaLabels({ type: 'closed', additionalAccessibilityText: `Don't enter` }),
     ).to.be.eql(['Closed train coach', `, Don't enter`]);
     expect(await extractAriaLabels({ type: 'wagon' })).to.be.eql(['Train coach']);
 
     expect(await extractAriaLabels({ sector: 'A', type: 'locomotive' })).to.be.eql([
-      'Locomotive , Sector, A',
+      'Locomotive, Sector, A',
     ]);
     expect(await extractAriaLabels({ sector: 'A', type: 'closed' })).to.be.eql([
-      'Closed train coach , Sector, A',
+      'Closed train coach, Sector, A',
     ]);
     expect(await extractAriaLabels({ sector: 'A', type: 'wagon' })).to.be.eql([
-      'Train coach',
-      'Sector, A',
+      'Train coach, Sector, A',
     ]);
 
     expect(
diff --git a/src/elements/train/train-wagon/train-wagon.stories.ts b/src/elements/train/train-wagon/train-wagon.stories.ts
index ab9d6dd422..124f1edd1d 100644
--- a/src/elements/train/train-wagon/train-wagon.stories.ts
+++ b/src/elements/train/train-wagon/train-wagon.stories.ts
@@ -7,31 +7,27 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 import './train-wagon.js';
+import '../train-formation.js';
+import '../train.js';
+
+const trainFormationWrapper = (content: TemplateResult): TemplateResult =>
+  html`<sbb-train-formation><sbb-train>${content}</sbb-train></sbb-train-formation>`;
 
 const Template = (args: Args): TemplateResult =>
-  html`<sbb-train-wagon ${sbbSpread(args)}></sbb-train-wagon>`;
-
-const WagonIconsTemplate = (args: Args): TemplateResult => html`
-  <sbb-train-wagon ${sbbSpread(args)}>
-    <sbb-icon aria-hidden="false" aria-label="wheelchair space" name="sa-rs"></sbb-icon>
-    <sbb-icon aria-hidden="false" aria-label="low-floor entry" name="sa-nf"></sbb-icon>
-    <sbb-icon
-      aria-hidden="false"
-      aria-label="Business zone in 1st class: Reservation possible"
-      name="sa-bz"
-    ></sbb-icon>
-  </sbb-train-wagon>
-`;
-
-const WagonOneIconTemplate = (args: Args): TemplateResult => html`
-  <sbb-train-wagon ${sbbSpread(args)}>
-    <sbb-icon
-      aria-hidden="false"
-      aria-label="Business zone in 1st class: Reservation possible"
-      name="sa-bz"
-    ></sbb-icon>
-  </sbb-train-wagon>
-`;
+  trainFormationWrapper(html`<sbb-train-wagon ${sbbSpread(args)}></sbb-train-wagon>`);
+
+const WagonIconsTemplate = (args: Args): TemplateResult =>
+  trainFormationWrapper(html`
+    <sbb-train-wagon ${sbbSpread(args)}>
+      <sbb-icon aria-hidden="false" aria-label="wheelchair space" name="sa-rs"></sbb-icon>
+      <sbb-icon aria-hidden="false" aria-label="low-floor entry" name="sa-nf"></sbb-icon>
+      <sbb-icon
+        aria-hidden="false"
+        aria-label="Business zone in 1st class: Reservation possible"
+        name="sa-bz"
+      ></sbb-icon>
+    </sbb-train-wagon>
+  `);
 
 const label: InputType = {
   control: {
@@ -49,21 +45,30 @@ const occupancy: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['high', 'medium', 'low', 'none'],
+  options: ['high', 'medium', 'low', 'none', null],
 };
 
 const type: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['locomotive', 'closed', 'wagon'],
+  options: [
+    'wagon',
+    'wagon-end-left',
+    'wagon-end-right',
+    'couchette',
+    'sleeping',
+    'restaurant',
+    'locomotive',
+    'closed',
+  ],
 };
 
 const wagonClass: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['1', '2'],
+  options: ['1', '2', null],
 };
 
 const defaultArgTypes: ArgTypes = {
@@ -76,10 +81,10 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   label: '36',
-  type: type.options![2],
+  type: type.options![0],
   occupancy: occupancy.options![2],
   'wagon-class': wagonClass.options![1],
-  'additional-accessibility-text': undefined,
+  'additional-accessibility-text': '',
 };
 
 export const wagonLowOccupancy: StoryObj = {
@@ -88,20 +93,22 @@ export const wagonLowOccupancy: StoryObj = {
   args: defaultArgs,
 };
 
-export const wagonMediumOccupancy: StoryObj = {
+export const wagonEndLeftMediumOccupancy: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
+    type: type.options![1],
     occupancy: occupancy.options![1],
   },
 };
 
-export const wagonHighOccupancy: StoryObj = {
+export const wagonEndRightHighOccupancy: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
+    type: type.options![2],
     occupancy: occupancy.options![0],
   },
 };
@@ -115,42 +122,45 @@ export const wagonNoneOccupancy: StoryObj = {
   },
 };
 
-export const wagonUndefinedOccupancy: StoryObj = {
+export const couchette: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    occupancy: '',
+    type: type.options![3],
+    'wagon-class': '',
+    occupancy: null,
   },
 };
 
-export const wagonOneIcon: StoryObj = {
-  render: WagonOneIconTemplate,
+export const sleeping: StoryObj = {
+  render: Template,
   argTypes: defaultArgTypes,
-  args: defaultArgs,
+  args: {
+    ...defaultArgs,
+    type: type.options![4],
+    'wagon-class': '',
+    occupancy: null,
+  },
 };
 
-export const wagonMultipleIcons: StoryObj = {
+export const RestaurantIcons: StoryObj = {
   render: WagonIconsTemplate,
   argTypes: defaultArgTypes,
-  args: defaultArgs,
-};
-
-export const wagonFirstClass: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'wagon-class': wagonClass.options![0],
+    type: type.options![5],
+    'wagon-class': '',
+    occupancy: null,
   },
 };
 
-export const wagonUndefinedClass: StoryObj = {
+export const wagonFirstClass: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    'wagon-class': undefined,
+    'wagon-class': wagonClass.options![0],
   },
 };
 
@@ -159,7 +169,9 @@ export const locomotive: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    type: type.options![0],
+    type: type.options![6],
+    'wagon-class': '',
+    occupancy: null,
   },
 };
 
@@ -168,7 +180,7 @@ export const closed: StoryObj = {
   argTypes: defaultArgTypes,
   args: {
     ...defaultArgs,
-    type: type.options![1],
+    type: type.options![7],
   },
 };
 
diff --git a/src/elements/train/train-wagon/train-wagon.ts b/src/elements/train/train-wagon/train-wagon.ts
index a29ab33b07..3c47cba9b2 100644
--- a/src/elements/train/train-wagon/train-wagon.ts
+++ b/src/elements/train/train-wagon/train-wagon.ts
@@ -1,12 +1,8 @@
-import {
-  type CSSResultGroup,
-  LitElement,
-  nothing,
-  type PropertyValues,
-  type TemplateResult,
-} from 'lit';
+import { type CSSResultGroup, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { html, unsafeStatic } from 'lit/static-html.js';
+import { choose } from 'lit/directives/choose.js';
+import { when } from 'lit/directives/when.js';
+import { html } from 'lit/static-html.js';
 
 import { SbbLanguageController } from '../../core/controllers.js';
 import { forceType, handleDistinctChange, omitEmptyConverter } from '../../core/decorators.js';
@@ -16,8 +12,11 @@ import {
   i18nBlockedPassage,
   i18nClass,
   i18nClosedCompartmentLabel,
+  i18nCouchetteWagonLabel,
   i18nLocomotiveLabel,
+  i18nRestaurantWagonLabel,
   i18nSector,
+  i18nSleepingWagonLabel,
   i18nWagonLabel,
   i18nWagonLabelNumber,
 } from '../../core/i18n.js';
@@ -44,13 +43,25 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
   public static readonly events = {
     sectorChange: 'sectorChange',
   } as const;
-  protected override readonly listChildLocalNames = ['sbb-icon'];
 
-  /** Wagon type. */
-  @property({ reflect: true }) public accessor type: 'locomotive' | 'closed' | 'wagon' = 'wagon';
+  /**
+   * Wagon type.
+   * For `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property.
+   */
+  @property({ reflect: true }) public accessor type:
+    | 'wagon'
+    | 'wagon-end-left'
+    | 'wagon-end-right'
+    | 'couchette'
+    | 'sleeping'
+    | 'restaurant'
+    | 'locomotive'
+    | 'closed' = 'wagon';
+
+  protected override readonly listChildLocalNames = ['sbb-icon'];
 
   /** Occupancy of a wagon. */
-  @property() public accessor occupancy: SbbOccupancy = 'none';
+  @property() public accessor occupancy: SbbOccupancy | null = null;
 
   /** Sector in which to wagon stops. */
   @forceType()
@@ -62,12 +73,12 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
   @property({ attribute: 'blocked-passage' })
   public accessor blockedPassage: 'previous' | 'next' | 'both' | 'none' = 'none';
 
-  /** Visible class label of a wagon. */
+  /** Class label */
   @property({ attribute: 'wagon-class' }) public accessor wagonClass: '1' | '2' | null = null;
 
-  /** Visible label for the wagon number. Not used by type locomotive or closed. */
+  /** Wagon number */
   @forceType()
-  @property()
+  @property({ reflect: true, converter: omitEmptyConverter })
   public accessor label: string = '';
 
   /** Additional accessibility text which will be appended to the end. */
@@ -90,72 +101,98 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
     },
   );
 
-  protected override willUpdate(changedProperties: PropertyValues<this>): void {
-    super.willUpdate(changedProperties);
-
-    if (
-      changedProperties.has('type') ||
-      changedProperties.has('occupancy') ||
-      changedProperties.has('wagonClass')
-    ) {
-      this.toggleAttribute(
-        'data-has-visible-wagon-content',
-        Boolean((this.type === 'wagon' && this.occupancy) || this.wagonClass),
-      );
-    }
-  }
-
   private _sectorChanged(): void {
     this._sectorChange.emit();
   }
 
   protected override render(): TemplateResult {
-    const label = (tagName: string): TemplateResult => {
-      const TAG_NAME = tagName;
-      /* eslint-disable lit/binding-positions */
-      return html`
-        <${unsafeStatic(TAG_NAME)} class="sbb-train-wagon__label" aria-hidden=${(!this
-          .label).toString()}>
-          ${
-            this.label
-              ? html` <span class="sbb-screen-reader-only">
-                    ${`${i18nWagonLabelNumber[this._language.current]},`}&nbsp;
-                  </span>
-                  ${this.label}`
-              : nothing
-          }
-        </${unsafeStatic(TAG_NAME)}>
-      `;
+    const typeLabel = (): string => {
+      if (
+        this.type === 'wagon' ||
+        this.type === 'wagon-end-left' ||
+        this.type === 'wagon-end-right'
+      ) {
+        return i18nWagonLabel[this._language.current];
+      } else if (this.type === 'closed') {
+        return i18nClosedCompartmentLabel(this.label ? parseInt(this.label) : undefined)[
+          this._language.current
+        ];
+      } else if (this.type === 'locomotive') {
+        return i18nLocomotiveLabel[this._language.current];
+      } else if (this.type === 'couchette') {
+        return i18nCouchetteWagonLabel[this._language.current];
+      } else if (this.type === 'sleeping') {
+        return i18nSleepingWagonLabel[this._language.current];
+      } else if (this.type === 'restaurant') {
+        return i18nRestaurantWagonLabel[this._language.current];
+      }
+      return '';
     };
 
+    // From accessibility perspective we cannot create a list with only one entry.
+    // We need to know what will be presented and switch semantics based on count.
+    const listEntriesCount =
+      +!!this.sector +
+      +(this.label && this.type !== 'closed') +
+      +(!!this.wagonClass && this.type !== 'closed') +
+      +(!!this.occupancy && this.type !== 'closed') +
+      +(this.blockedPassage && this.blockedPassage !== 'none');
+
     const sectorString = `${i18nSector[this._language.current]}, ${this.sector}`;
 
+    const labelContent =
+      this.label && this.type !== 'closed'
+        ? html`<span class="sbb-screen-reader-only">
+              ${i18nWagonLabelNumber[this._language.current]}, &nbsp
+            </span>
+            ${this.label}`
+        : nothing;
+
+    const wagonClassContent = html`<span class="sbb-screen-reader-only">
+        ${this.wagonClass === '1'
+          ? i18nClass['first'][this._language.current]
+          : i18nClass['second'][this._language.current]}
+      </span>
+      <span aria-hidden="true">${this.wagonClass}</span>`;
+
+    const mainIcon = choose(this.type, [
+      [
+        'couchette',
+        () => html`<sbb-icon name="sa-cc" class="sbb-train-wagon__main-icon"></sbb-icon>`,
+      ],
+      [
+        'sleeping',
+        () => html`<sbb-icon name="sa-wl" class="sbb-train-wagon__main-icon"></sbb-icon>`,
+      ],
+      [
+        'restaurant',
+        () => html`<sbb-icon name="sa-wr" class="sbb-train-wagon__main-icon"></sbb-icon>`,
+      ],
+    ]);
+
     return html`
       <div class="sbb-train-wagon">
-        ${this.type === 'wagon'
-          ? html`<ul
-              aria-label=${i18nWagonLabel[this._language.current]}
-              class="sbb-train-wagon__compartment"
-            >
+        ${when(
+          listEntriesCount > 1,
+          () =>
+            html`<ul aria-label=${typeLabel()} class="sbb-train-wagon__compartment">
               ${this.sector
                 ? html`<li class="sbb-screen-reader-only">${sectorString}</li>`
                 : nothing}
-              ${label('li')}
-              ${this.wagonClass
-                ? html`<li class="sbb-train-wagon__class">
-                    <span class="sbb-screen-reader-only">
-                      ${this.wagonClass === '1'
-                        ? i18nClass['first'][this._language.current]
-                        : i18nClass['second'][this._language.current]}
-                    </span>
-                    <span aria-hidden="true">${this.wagonClass}</span>
-                  </li>`
+              <li
+                class="sbb-train-wagon__label"
+                aria-hidden=${`${!this.label || this.type === 'closed'}`}
+              >
+                ${labelContent}
+              </li>
+              ${this.wagonClass && this.type !== 'closed'
+                ? html`<li class="sbb-train-wagon__class">${wagonClassContent}</li>`
                 : nothing}
-              ${this.occupancy
+              ${this.occupancy && this.type !== 'closed'
                 ? html`<sbb-timetable-occupancy-icon
                     class="sbb-train-wagon__occupancy"
                     role="listitem"
-                    .occupancy=${this.occupancy}
+                    occupancy=${this.occupancy}
                   ></sbb-timetable-occupancy-icon>`
                 : nothing}
               ${this.blockedPassage && this.blockedPassage !== 'none'
@@ -163,53 +200,44 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
                     ${i18nBlockedPassage[this.blockedPassage][this._language.current]}
                   </li>`
                 : nothing}
-            </ul>`
-          : nothing}
-        ${this.type === 'closed'
-          ? html`<span class="sbb-train-wagon__compartment">
+              ${mainIcon}
+            </ul>`,
+          () =>
+            html`<div class="sbb-train-wagon__compartment">
               <span class="sbb-screen-reader-only">
-                ${i18nClosedCompartmentLabel(this.label ? parseInt(this.label) : undefined)[
-                  this._language.current
-                ]}
-                ${this.sector ? `, ${sectorString}` : nothing}
+                ${typeLabel()}${this.sector ? html`, ${sectorString}` : nothing}
               </span>
-              ${label('span')}
-            </span>`
-          : nothing}
-        ${this.type === 'locomotive'
-          ? html`<span class="sbb-train-wagon__compartment">
-              <span class="sbb-screen-reader-only">
-                ${i18nLocomotiveLabel[this._language.current]}
-                ${this.sector ? `, ${sectorString}` : nothing}
-              </span>
-              ${label('span')}
-              <svg
-                class="sbb-train-wagon__locomotive"
-                aria-hidden="true"
-                width="80"
-                height="40"
-                viewBox="0 0 80 40"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                class="sbb-train-wagon__label"
+                aria-hidden=${`${!this.label || this.type === 'closed'}`}
               >
-                <path
-                  d="M17.7906 4.42719C19.9743 1.93152 23.129 0.5 26.4452 0.5H53.5548C56.871 0.5 60.0257 1.93152 62.2094 4.4272L76.2094 20.4272C82.7157 27.8629 77.4351 39.5 67.5548 39.5H12.4452C2.56489 39.5 -2.71566 27.8629 3.79058 20.4272L17.7906 4.42719Z"
-                  stroke="var(--sbb-train-wagon-shape-color-closed)"
-                />
-              </svg>
-            </span>`
-          : nothing}
+                ${labelContent}
+              </span>
+
+              ${this.wagonClass && this.type !== 'closed'
+                ? html`<span class="sbb-train-wagon__class">${wagonClassContent}</span>`
+                : nothing}
+              ${this.occupancy && this.type !== 'closed'
+                ? html`<sbb-timetable-occupancy-icon
+                    class="sbb-train-wagon__occupancy"
+                    occupancy=${this.occupancy}
+                  ></sbb-timetable-occupancy-icon>`
+                : nothing}
+              ${this.blockedPassage && this.blockedPassage !== 'none'
+                ? html`<span class="sbb-screen-reader-only">
+                    ${i18nBlockedPassage[this.blockedPassage][this._language.current]}
+                  </span>`
+                : nothing}
+              ${mainIcon}
+            </div> `,
+        )}
         ${this.additionalAccessibilityText
           ? html`<span class="sbb-screen-reader-only">, ${this.additionalAccessibilityText}</span>`
           : nothing}
-        ${this.type === 'wagon'
-          ? html`<span class="sbb-train-wagon__icons" ?hidden=${this.listChildren.length === 0}>
-              ${this.renderList({
-                class: 'sbb-train-wagon__icons-list',
-                ariaLabel: i18nAdditionalWagonInformationHeading[this._language.current],
-              })}
-            </span>`
-          : nothing}
+        ${this.renderList({
+          class: 'sbb-train-wagon__attribute-icon-list',
+          ariaLabel: i18nAdditionalWagonInformationHeading[this._language.current],
+        })}
       </div>
     `;
   }
diff --git a/src/elements/train/train-wagon/train-wagon.visual.spec.ts b/src/elements/train/train-wagon/train-wagon.visual.spec.ts
index 9c0f84a584..503e23be7b 100644
--- a/src/elements/train/train-wagon/train-wagon.visual.spec.ts
+++ b/src/elements/train/train-wagon/train-wagon.visual.spec.ts
@@ -1,53 +1,55 @@
-import { html, nothing } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 
-import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
 
 import './train-wagon.js';
+import '../train-formation.js';
+import '../train.js';
 
 describe(`sbb-train-wagon`, () => {
-  const occupancyCases = ['high', 'medium', 'low', 'none', undefined];
-  const typeCases = ['locomotive', 'closed', 'wagon'];
+  const wagonTypeCases = {
+    type: [
+      'wagon',
+      'wagon-end-left',
+      'wagon-end-right',
+      'couchette',
+      'sleeping',
+      'restaurant',
+      'locomotive',
+      'closed',
+    ],
+    view: ['side', 'top'],
+    forcedColors: [false, true],
+  };
+
+  const occupancyCases = ['high', 'medium', 'low', 'none', null];
   const wagonClassCases = [1, 2];
-  const labelCases = [undefined, '38'];
+
+  const trainFormationWrapper = (content: TemplateResult): TemplateResult =>
+    html`<sbb-train-formation><sbb-train>${content}</sbb-train></sbb-train-formation>`;
 
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
     for (const occupancy of occupancyCases) {
       it(
         `occupancy=${occupancy}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(html`
-            <sbb-train-wagon occupancy=${occupancy || nothing}></sbb-train-wagon>
-          `);
-        }),
-      );
-    }
-
-    for (const type of typeCases) {
-      it(
-        `type=${type}`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(html`<sbb-train-wagon type=${type}></sbb-train-wagon>`);
-        }),
-      );
-    }
-
-    for (const wagonClass of wagonClassCases) {
-      it(
-        `class=${wagonClass}`,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
-            html`<sbb-train-wagon wagon-class=${wagonClass}></sbb-train-wagon>`,
+            trainFormationWrapper(html`
+              <sbb-train-wagon occupancy=${occupancy || nothing}></sbb-train-wagon>
+            `),
           );
         }),
       );
     }
 
-    for (const label of labelCases) {
+    for (const wagonClass of wagonClassCases) {
       it(
-        `label=${label}`,
+        `class=${wagonClass}`,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
-            html`<sbb-train-wagon label=${label || nothing}></sbb-train-wagon>`,
+            trainFormationWrapper(
+              html`<sbb-train-wagon wagon-class=${wagonClass}></sbb-train-wagon>`,
+            ),
           );
         }),
       );
@@ -56,25 +58,53 @@ describe(`sbb-train-wagon`, () => {
     it(
       `one icon`,
       visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(html`
-          <sbb-train-wagon wagon-class="2" label="38">
-            <sbb-icon name="sa-bz"></sbb-icon>
-          </sbb-train-wagon>
-        `);
+        await setup.withFixture(
+          trainFormationWrapper(html`
+            <sbb-train-wagon wagon-class="2" label="38">
+              <sbb-icon name="sa-bz"></sbb-icon>
+            </sbb-train-wagon>
+          `),
+        );
       }),
     );
 
     it(
       `multiple icons`,
       visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(html`
-          <sbb-train-wagon wagon-class="2" label="38">
-            <sbb-icon name="sa-rs"></sbb-icon>
-            <sbb-icon name="sa-nf"></sbb-icon>
-            <sbb-icon name="sa-bz"></sbb-icon>
-          </sbb-train-wagon>
-        `);
+        await setup.withFixture(
+          trainFormationWrapper(html`
+            <sbb-train-wagon wagon-class="2" label="38">
+              <sbb-icon name="sa-rs"></sbb-icon>
+              <sbb-icon name="sa-nf"></sbb-icon>
+              <sbb-icon name="sa-bz"></sbb-icon>
+            </sbb-train-wagon>
+          `),
+        );
       }),
     );
   });
+
+  describeViewports({ viewports: ['zero'] }, () => {
+    describeEach(wagonTypeCases, ({ type, view, forcedColors }) => {
+      it(
+        '',
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`<sbb-train-formation view=${view}>
+              <sbb-train>
+                ${type === 'sleeping' || type === 'couchette' || type === 'restaurant'
+                  ? html`<sbb-train-wagon type=${type}></sbb-train-wagon>`
+                  : html`<sbb-train-wagon
+                      type=${type}
+                      occupancy="medium"
+                      wagon-class="2"
+                    ></sbb-train-wagon>`}
+              </sbb-train>
+            </sbb-train-formation>`,
+            { forcedColors },
+          );
+        }),
+      );
+    });
+  });
 });
diff --git a/src/elements/train/train/__snapshots__/train.snapshot.spec.snap.js b/src/elements/train/train/__snapshots__/train.snapshot.spec.snap.js
index 64ce5f81c3..09cfe96edd 100644
--- a/src/elements/train/train/__snapshots__/train.snapshot.spec.snap.js
+++ b/src/elements/train/train/__snapshots__/train.snapshot.spec.snap.js
@@ -16,35 +16,27 @@ snapshots["sbb-train renders Shadow DOM"] =
   <h6 class="sbb-train__direction-label-sr">
     Train, Driving direction Bern.
   </h6>
-  <span hidden="">
-    <slot>
-    </slot>
-  </span>
   <div
     aria-hidden="true"
-    class="sbb-train__direction"
+    class="sbb-train__direction-heading"
   >
-    <div class="sbb-train__direction-heading">
+    <span class="sbb-train__direction-sticky-wrapper">
+      <sbb-icon
+        aria-hidden="true"
+        data-namespace="default"
+        name="chevron-small-left-small"
+        role="img"
+      >
+      </sbb-icon>
       <span class="sbb-train__direction-label">
-        Driving direction
-      </span>
-      <span class="sbb-train__direction-station">
-        Bern
+        Driving direction Bern
       </span>
-    </div>
-    <div class="sbb-train__direction-indicator">
-      <div class="sbb-train__sticky-wrapper">
-        <sbb-icon
-          aria-hidden="true"
-          class="sbb-train__direction-arrow"
-          data-namespace="default"
-          name="chevron-small-left-small"
-          role="img"
-        >
-        </sbb-icon>
-      </div>
-    </div>
+    </span>
   </div>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
 </div>
 `;
 /* end snapshot sbb-train renders Shadow DOM */
diff --git a/src/elements/train/train/readme.md b/src/elements/train/train/readme.md
index 2531d78120..20647bd1ba 100644
--- a/src/elements/train/train/readme.md
+++ b/src/elements/train/train/readme.md
@@ -1,7 +1,7 @@
 A `sbb-train` is a component used as a container element for a collection of
-[sbb-train-wagon](/docs/timetable-sbb-train-wagon--docs)s
-or [sbb-train-blocked-passage](/docs/timetable-sbb-train-blocked-passage--docs)s,
-and it can be used within the [sbb-train-formation](/docs/timetable-sbb-train-formation--docs) component.
+[sbb-train-wagon](/docs/elements-timetable-sbb-train-wagon--docs)s
+or [sbb-train-blocked-passage](/docs/elements-timetable-sbb-train-blocked-passage--docs)s,
+and it can be used within the [sbb-train-formation](/docs/elements-timetable-sbb-train-formation--docs) component.
 
 ```html
 <sbb-train
diff --git a/src/elements/train/train/train.scss b/src/elements/train/train/train.scss
index 74b9f9b56b..126654a2b5 100644
--- a/src/elements/train/train/train.scss
+++ b/src/elements/train/train/train.scss
@@ -10,9 +10,19 @@
 }
 
 .sbb-train {
+  @include sbb.text-xs--regular;
+
   display: flex;
   flex-direction: column;
   gap: var(--sbb-train-formation-vertical-gap);
+  position: relative;
+
+  // Placeholder to reserve the height of the direction row
+  &::before {
+    content: '';
+    display: var(--sbb-train-formation-reserve-spacing-display, none);
+    height: calc(max(var(--sbb-size-icon-ui-small), 1em * var(--sbb-typo-line-height-body-text)));
+  }
 }
 
 .sbb-train__wagons {
@@ -23,9 +33,11 @@
 }
 
 .sbb-train__direction-heading {
-  @include sbb.text-xs--regular;
-
   display: flex;
+
+  // We have to position it absolute in order for the ellipsis to work
+  position: absolute;
+  width: 100%;
 }
 
 .sbb-train__direction-sticky-wrapper {
@@ -34,6 +46,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sbb-train-direction-label-spacing);
+  max-width: 100%;
 }
 
 .sbb-train__direction-label {
@@ -43,8 +56,3 @@
 .sbb-train__direction-label-sr {
   @include sbb.screen-reader-only;
 }
-
-.sbb-train__direction-placeholder {
-  display: var(--sbb-train-formation-reserve-spacing-display, none);
-  height: var(--sbb-size-icon-ui-small);
-}
diff --git a/src/elements/train/train/train.spec.ts b/src/elements/train/train/train.spec.ts
index 9478ca26e2..c40b14638b 100644
--- a/src/elements/train/train/train.spec.ts
+++ b/src/elements/train/train/train.spec.ts
@@ -56,9 +56,9 @@ describe(`sbb-train`, () => {
       ></sbb-train>`,
     );
 
-    expect(
-      element.shadowRoot!.querySelector('.sbb-train__direction-arrow')!.getAttribute('name'),
-    ).to.contain('-left-');
+    expect(element.shadowRoot!.querySelector('sbb-icon')!.getAttribute('name')).to.contain(
+      '-left-',
+    );
   });
 
   it('should display right indicator if direction is right', async () => {
@@ -70,9 +70,9 @@ describe(`sbb-train`, () => {
       ></sbb-train>`,
     );
 
-    expect(
-      element.shadowRoot!.querySelector('.sbb-train__direction-arrow')!.getAttribute('name'),
-    ).to.contain('-right-');
+    expect(element.shadowRoot!.querySelector('sbb-icon')!.getAttribute('name')).to.contain(
+      '-right-',
+    );
   });
 
   describe('accessibility label', () => {
diff --git a/src/elements/train/train/train.stories.ts b/src/elements/train/train/train.stories.ts
index 6b1f730474..016a87fb6d 100644
--- a/src/elements/train/train/train.stories.ts
+++ b/src/elements/train/train/train.stories.ts
@@ -62,7 +62,7 @@ const defaultArgTypes: ArgTypes = {
   'accessibility-label': accessibilityLabel,
   station,
   direction,
-  directionLabelLevel,
+  'direction-label-level': directionLabelLevel,
 };
 
 const defaultArgs: Args = {
diff --git a/src/elements/train/train/train.ts b/src/elements/train/train/train.ts
index 836a2963c7..e95b4bd2d4 100644
--- a/src/elements/train/train/train.ts
+++ b/src/elements/train/train/train.ts
@@ -130,7 +130,7 @@ class SbbTrainElement extends SbbNamedSlotListMixin<
                     : nothing}
                 </span>
               </div>`
-            : html`<div class="sbb-train__direction-placeholder"></div>`
+            : nothing
         }
         ${this.renderList({
           class: 'sbb-train__wagons',
diff --git a/src/elements/train/train/train.visual.spec.ts b/src/elements/train/train/train.visual.spec.ts
index 4a6f7673dc..e87ba18005 100644
--- a/src/elements/train/train/train.visual.spec.ts
+++ b/src/elements/train/train/train.visual.spec.ts
@@ -33,5 +33,19 @@ describe(`sbb-train`, () => {
         }),
       );
     });
+
+    it(
+      'display ellipsis with long label',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-train
+            direction="right"
+            station="Berne"
+            direction-label="Direction of travel"
+          ></sbb-train>`,
+          { maxWidth: '200px' },
+        );
+      }),
+    );
   });
 });
diff --git a/tools/web-test-runner/preload-icons.ts b/tools/web-test-runner/preload-icons.ts
index f647c2f9cc..04c7513b54 100644
--- a/tools/web-test-runner/preload-icons.ts
+++ b/tools/web-test-runner/preload-icons.ts
@@ -85,6 +85,7 @@ const preloadIconList = [
   'sa-abteilkinderwagen',
   'sa-b',
   'sa-bz',
+  'sa-cc',
   'sa-ci',
   'sa-fz',
   'sa-nf',
@@ -93,6 +94,7 @@ const preloadIconList = [
   'sa-rs',
   'sa-tg',
   'sa-vr',
+  'sa-wl',
   'sa-wr',
   'sa-z',
   'shopping-cart-small',

From a78fbef4b6846ad7c06060cdce38b7d7cd71cd57 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 7 Nov 2024 10:40:47 +0100
Subject: [PATCH 05/12] fix: optimize accessibility

---
 .../train-formation.snapshot.spec.snap.js     |  40 +------
 .../train-wagon.snapshot.spec.snap.js         | 113 ++++++++++++++----
 .../train-wagon/train-wagon.snapshot.spec.ts  |  16 +++
 .../train/train-wagon/train-wagon.spec.ts     | 101 ++++++++--------
 src/elements/train/train-wagon/train-wagon.ts |  16 +--
 5 files changed, 163 insertions(+), 123 deletions(-)

diff --git a/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js b/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
index a6119d8ebd..79a31b8aba 100644
--- a/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
+++ b/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
@@ -149,15 +149,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
     },
     {
       "role": "text",
-      "name": "Train coach"
-    },
-    {
-      "role": "text",
-      "name": ", "
-    },
-    {
-      "role": "text",
-      "name": "Sector, A"
+      "name": "Train coach, Sector, A"
     },
     {
       "role": "heading",
@@ -170,15 +162,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
     },
     {
       "role": "text",
-      "name": "Train coach"
-    },
-    {
-      "role": "text",
-      "name": ", "
-    },
-    {
-      "role": "text",
-      "name": "Sector, B"
+      "name": "Train coach, Sector, B"
     }
   ]
 }
@@ -203,15 +187,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Fire
     },
     {
       "role": "text leaf",
-      "name": "Train coach"
-    },
-    {
-      "role": "text leaf",
-      "name": ", "
-    },
-    {
-      "role": "text leaf",
-      "name": "Sector, A"
+      "name": "Train coach, Sector, A"
     },
     {
       "role": "heading",
@@ -224,15 +200,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Fire
     },
     {
       "role": "text leaf",
-      "name": "Train coach"
-    },
-    {
-      "role": "text leaf",
-      "name": ", "
-    },
-    {
-      "role": "text leaf",
-      "name": "Sector, B"
+      "name": "Train coach, Sector, B"
     }
   ]
 }
diff --git a/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js b/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
index e28c47e4db..684b1ec7fb 100644
--- a/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
+++ b/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
@@ -24,9 +24,11 @@ snapshots["sbb-train-wagon should render as type wagon Shadow DOM"] =
       class="sbb-train-wagon__label"
     >
       <span class="sbb-screen-reader-only">
-        Number,
+        Number, 38
+      </span>
+      <span aria-hidden="true">
+        38
       </span>
-      38
     </li>
     <li class="sbb-train-wagon__class">
       <span class="sbb-screen-reader-only">
@@ -212,7 +214,7 @@ snapshots["sbb-train-wagon should render as type closed wagon without number Sha
 `;
 /* end snapshot sbb-train-wagon should render as type closed wagon without number Shadow DOM */
 
-snapshots["sbb-train-wagon should render as type wagon A11y tree Chrome"] =
+snapshots["sbb-train-wagon should render as type wagon A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -220,15 +222,7 @@ snapshots["sbb-train-wagon should render as type wagon A11y tree Chrome"] =
   "children": [
     {
       "role": "text",
-      "name": "Number"
-    },
-    {
-      "role": "text",
-      "name": ",  "
-    },
-    {
-      "role": "text",
-      "name": "38"
+      "name": "Number, 38"
     },
     {
       "role": "text",
@@ -252,15 +246,7 @@ snapshots["sbb-train-wagon should render as type wagon A11y tree Firefox"] =
   "children": [
     {
       "role": "text leaf",
-      "name": "Number"
-    },
-    {
-      "role": "text leaf",
-      "name": ",   "
-    },
-    {
-      "role": "text leaf",
-      "name": "38"
+      "name": "Number, 38"
     },
     {
       "role": "text leaf",
@@ -276,7 +262,7 @@ snapshots["sbb-train-wagon should render as type wagon A11y tree Firefox"] =
 `;
 /* end snapshot sbb-train-wagon should render as type wagon A11y tree Firefox */
 
-snapshots["sbb-train-wagon should render as type wagon end with only one property DOM"] =
+snapshots["sbb-train-wagon should render as type wagon end with only one property DOM"] = 
 `<sbb-train-wagon
   type="wagon-end-right"
   wagon-class="1"
@@ -285,7 +271,7 @@ snapshots["sbb-train-wagon should render as type wagon end with only one propert
 `;
 /* end snapshot sbb-train-wagon should render as type wagon end with only one property DOM */
 
-snapshots["sbb-train-wagon should render as type wagon end with only one property Shadow DOM"] =
+snapshots["sbb-train-wagon should render as type wagon end with only one property Shadow DOM"] = 
 `<div class="sbb-train-wagon">
   <div class="sbb-train-wagon__compartment">
     <span class="sbb-screen-reader-only">
@@ -313,7 +299,7 @@ snapshots["sbb-train-wagon should render as type wagon end with only one propert
 `;
 /* end snapshot sbb-train-wagon should render as type wagon end with only one property Shadow DOM */
 
-snapshots["sbb-train-wagon should render as type wagon end with only one property A11y tree Chrome"] =
+snapshots["sbb-train-wagon should render as type wagon end with only one property A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -333,7 +319,7 @@ snapshots["sbb-train-wagon should render as type wagon end with only one propert
 `;
 /* end snapshot sbb-train-wagon should render as type wagon end with only one property A11y tree Chrome */
 
-snapshots["sbb-train-wagon should render as type wagon end with only one property A11y tree Firefox"] =
+snapshots["sbb-train-wagon should render as type wagon end with only one property A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -390,7 +376,7 @@ snapshots["sbb-train-wagon should render as type wagon-end-right with only one p
 `;
 /* end snapshot sbb-train-wagon should render as type wagon-end-right with only one property Shadow DOM */
 
-snapshots["sbb-train-wagon should render as type wagon-end-right with only one property A11y tree Chrome"] =
+snapshots["sbb-train-wagon should render as type wagon-end-right with only one property A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -430,3 +416,78 @@ snapshots["sbb-train-wagon should render as type wagon-end-right with only one p
 `;
 /* end snapshot sbb-train-wagon should render as type wagon-end-right with only one property A11y tree Firefox */
 
+snapshots["sbb-train-wagon should render with only label DOM"] = 
+`<sbb-train-wagon
+  label="1"
+  type="wagon"
+>
+</sbb-train-wagon>
+`;
+/* end snapshot sbb-train-wagon should render with only label DOM */
+
+snapshots["sbb-train-wagon should render with only label Shadow DOM"] = 
+`<div class="sbb-train-wagon">
+  <div class="sbb-train-wagon__compartment">
+    <span class="sbb-screen-reader-only">
+      Train coach
+    </span>
+    <span
+      aria-hidden="false"
+      class="sbb-train-wagon__label"
+    >
+      <span class="sbb-screen-reader-only">
+        Number, 1
+      </span>
+      <span aria-hidden="true">
+        1
+      </span>
+    </span>
+  </div>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot sbb-train-wagon should render with only label Shadow DOM */
+
+snapshots["sbb-train-wagon should render with only label A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Train coach"
+    },
+    {
+      "role": "text leaf",
+      "name": "Number, 1"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-train-wagon should render with only label A11y tree Firefox */
+
+snapshots["sbb-train-wagon should render with only label A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Train coach"
+    },
+    {
+      "role": "text",
+      "name": "Number, 1"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-train-wagon should render with only label A11y tree Chrome */
+
diff --git a/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts b/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
index 70773f08d6..eaf34c2a61 100644
--- a/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
+++ b/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
@@ -54,6 +54,22 @@ describe(`sbb-train-wagon`, () => {
     testA11yTreeSnapshot();
   });
 
+  describe('should render with only label', async () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-train-wagon label="1"></sbb-train-wagon>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
+
   describe('should render as type wagon with one icon', async () => {
     beforeEach(async () => {
       element = await fixture(
diff --git a/src/elements/train/train-wagon/train-wagon.spec.ts b/src/elements/train/train-wagon/train-wagon.spec.ts
index fc1bcfe1e0..d87c2d2c81 100644
--- a/src/elements/train/train-wagon/train-wagon.spec.ts
+++ b/src/elements/train/train-wagon/train-wagon.spec.ts
@@ -7,59 +7,58 @@ import type { SbbIconElement } from '../../icon.js';
 
 import { SbbTrainWagonElement } from './train-wagon.js';
 
-async function extractAriaLabels(
-  properties: Partial<
-    Pick<
-      SbbTrainWagonElement,
-      | 'type'
-      | 'occupancy'
-      | 'sector'
-      | 'blockedPassage'
-      | 'wagonClass'
-      | 'label'
-      | 'additionalAccessibilityText'
-    >
-  >,
-): Promise<string[]> {
-  const element = await fixture(html`<sbb-train-wagon></sbb-train-wagon>`);
-
-  // attributes
-  (
-    [
-      'type',
-      'occupancy',
-      'sector',
-      'blockedPassage',
-      'wagonClass',
-      'label',
-      'additionalAccessibilityText',
-    ] as const
-  ).forEach((attr) => {
-    const attributeValue = properties[attr];
-    // Convert camelCase to kebab-case
-    const attributeName = attr.replace(
-      /[A-Z]+(?![a-z])|[A-Z]/g,
-      ($, ofs) => (ofs ? '-' : '') + $.toLowerCase(),
-    );
-    element.setAttribute(attributeName, attributeValue ?? '');
-  });
+describe(`sbb-train-wagon`, () => {
+  let element: SbbTrainWagonElement;
 
-  await waitForLitRender(element);
+  async function extractAriaLabels(
+    properties: Partial<
+      Pick<
+        SbbTrainWagonElement,
+        | 'type'
+        | 'occupancy'
+        | 'sector'
+        | 'blockedPassage'
+        | 'wagonClass'
+        | 'label'
+        | 'additionalAccessibilityText'
+      >
+    >,
+  ): Promise<string[]> {
+    // attributes
+    (
+      [
+        'type',
+        'occupancy',
+        'sector',
+        'blockedPassage',
+        'wagonClass',
+        'label',
+        'additionalAccessibilityText',
+      ] as const
+    ).forEach((attr) => {
+      const attributeValue = properties[attr];
+      // Convert camelCase to kebab-case
+      const attributeName = attr.replace(
+        /[A-Z]+(?![a-z])|[A-Z]/g,
+        ($, ofs) => (ofs ? '-' : '') + $.toLowerCase(),
+      );
+      element.setAttribute(attributeName, attributeValue ?? '');
+    });
 
-  // Select all accessibility relevant text parts
-  return Array.from(
-    element.shadowRoot!.querySelectorAll(
-      '[aria-hidden=false], [aria-label]:not(.sbb-train-wagon__attribute-icon-list), .sbb-screen-reader-only:not(.sbb-train-wagon__label > span)',
-    ),
-  ).map((entry) =>
-    entry.hasAttribute('aria-label')
-      ? entry.getAttribute('aria-label')!
-      : entry.textContent!.replace(/\s+/g, ' ').trim(),
-  );
-}
+    await waitForLitRender(element);
 
-describe(`sbb-train-wagon`, () => {
-  let element: SbbTrainWagonElement;
+    // Select all accessibility relevant text parts
+    // The alternative of a11ySnapshot() does not work as the list title can't be extracted reliable.
+    return Array.from(
+      element.shadowRoot!.querySelectorAll(
+        '[aria-label]:not(.sbb-train-wagon__attribute-icon-list), .sbb-screen-reader-only',
+      ),
+    ).map((entry) =>
+      entry.hasAttribute('aria-label')
+        ? entry.getAttribute('aria-label')!
+        : entry.textContent!.replace(/\s+/g, ' ').trim(),
+    );
+  }
 
   it('renders', async () => {
     element = await fixture(html`<sbb-train-wagon></sbb-train-wagon>`);
@@ -97,6 +96,8 @@ describe(`sbb-train-wagon`, () => {
   });
 
   it('should set aria labels correctly', async () => {
+    element = await fixture(html`<sbb-train-wagon></sbb-train-wagon>`);
+
     expect(await extractAriaLabels({ type: 'wagon' })).to.be.eql(['Train coach']);
     expect(await extractAriaLabels({ type: 'locomotive' })).to.be.eql(['Locomotive']);
     expect(await extractAriaLabels({ type: 'sleeping' })).to.be.eql(['Sleeping car']);
diff --git a/src/elements/train/train-wagon/train-wagon.ts b/src/elements/train/train-wagon/train-wagon.ts
index 3c47cba9b2..ba141a4e1d 100644
--- a/src/elements/train/train-wagon/train-wagon.ts
+++ b/src/elements/train/train-wagon/train-wagon.ts
@@ -107,13 +107,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
 
   protected override render(): TemplateResult {
     const typeLabel = (): string => {
-      if (
-        this.type === 'wagon' ||
-        this.type === 'wagon-end-left' ||
-        this.type === 'wagon-end-right'
-      ) {
-        return i18nWagonLabel[this._language.current];
-      } else if (this.type === 'closed') {
+      if (this.type === 'closed') {
         return i18nClosedCompartmentLabel(this.label ? parseInt(this.label) : undefined)[
           this._language.current
         ];
@@ -126,7 +120,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
       } else if (this.type === 'restaurant') {
         return i18nRestaurantWagonLabel[this._language.current];
       }
-      return '';
+      return i18nWagonLabel[this._language.current];
     };
 
     // From accessibility perspective we cannot create a list with only one entry.
@@ -143,9 +137,9 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
     const labelContent =
       this.label && this.type !== 'closed'
         ? html`<span class="sbb-screen-reader-only">
-              ${i18nWagonLabelNumber[this._language.current]}, &nbsp
+              ${`${i18nWagonLabelNumber[this._language.current]}, ${this.label}`}
             </span>
-            ${this.label}`
+            <span aria-hidden="true">${this.label}</span>`
         : nothing;
 
     const wagonClassContent = html`<span class="sbb-screen-reader-only">
@@ -205,7 +199,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
           () =>
             html`<div class="sbb-train-wagon__compartment">
               <span class="sbb-screen-reader-only">
-                ${typeLabel()}${this.sector ? html`, ${sectorString}` : nothing}
+                ${`${typeLabel()}${this.sector ? `, ${sectorString}` : ''}`}
               </span>
               <span
                 class="sbb-train-wagon__label"

From 3399a5d96008aacd1f0a8397f0ecf893625b86b9 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 12 Nov 2024 14:34:24 +0100
Subject: [PATCH 06/12] fix: remove background color

---
 .../train-formation/train-formation.scss      | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/elements/train/train-formation/train-formation.scss b/src/elements/train/train-formation/train-formation.scss
index 46dfbdc221..b6a30539d2 100644
--- a/src/elements/train/train-formation/train-formation.scss
+++ b/src/elements/train/train-formation/train-formation.scss
@@ -6,8 +6,8 @@
 :host {
   display: block;
 
-  --sbb-train-formation-background-color: var(--sbb-color-white);
   --sbb-train-formation-sector-line-color: var(--sbb-color-cement);
+  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
   --sbb-train-formation-blocked-passage-width: #{sbb.px-to-rem-build(16)};
   --sbb-train-formation-text-color: var(--sbb-color-charcoal);
   --sbb-train-formation-vertical-gap: var(--sbb-spacing-fixed-2x);
@@ -17,6 +17,24 @@
   }
 }
 
+// TODO: Move to sbb-train-wagon after CSS refactoring
+:host([view='side']) {
+  --sbb-train-formation-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-formation-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-formation-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-formation-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-formation-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");
+}
+
+// TODO: Move to sbb-train-wagon after CSS refactoring
+:host([view='top']) {
+  --sbb-train-formation-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-formation-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-formation-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-formation-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-formation-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-train-formation {
   @include sbb.scrollbar;
 
@@ -71,28 +89,34 @@
 
   flex: 0 0 var(--_sector-width);
   text-align: center;
-  position: relative;
-  display: inline-block;
-  max-width: var(--_sector-width);
-
-  // Line behind the sector-label
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 50% 0;
-    height: 1px;
-    background-color: var(--sbb-train-formation-sector-line-color);
-  }
+  overflow-x: clip;
 }
 
 .sbb-train-formation__sector-sticky-wrapper {
-  background-color: var(--sbb-train-formation-background-color);
   position: sticky;
   inset: auto 0;
   padding: 0 var(--sbb-spacing-fixed-1x);
   margin: 0 var(--sbb-spacing-fixed-2x);
   overflow: hidden;
   white-space: nowrap;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset-block: calc(50% - var(--sbb-train-formation-sector-line-width) / 2);
+    border-block-end: var(--sbb-train-formation-sector-line-width) solid
+      var(--sbb-train-formation-sector-line-color);
+    width: calc(0.5 * var(--_sector-width));
+  }
+
+  &::before {
+    inset-inline-end: 100%;
+  }
+
+  &::after {
+    inset-inline-start: 100%;
+  }
 }
 
 .sbb-train-formation__trains {
@@ -111,20 +135,3 @@
 .sbb-train-formation__train-list > :is(li, span) {
   display: inline-flex;
 }
-
-// TODO: Move to sbb-train-wagon after CSS refactoring
-:host([view='side']) {
-  --sbb-train-formation-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-formation-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-formation-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-formation-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-formation-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");
-}
-
-:host([view='top']) {
-  --sbb-train-formation-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-formation-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-formation-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-formation-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-formation-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");
-}

From 0e3cf882fe819d6717a27c9d5c258d67cf911df7 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 12 Nov 2024 14:38:34 +0100
Subject: [PATCH 07/12] fix: fix color of wagon end

---
 src/elements/train/train-wagon/train-wagon.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/elements/train/train-wagon/train-wagon.scss b/src/elements/train/train-wagon/train-wagon.scss
index ae5c55cf8f..be7b72652f 100644
--- a/src/elements/train/train-wagon/train-wagon.scss
+++ b/src/elements/train/train-wagon/train-wagon.scss
@@ -21,9 +21,7 @@
   }
 }
 
-:host(
-    :is([type='closed'], [type='locomotive'], [type='wagon-end-left'], [type='wagon-end-right'])
-  ) {
+:host(:is([type='closed'], [type='locomotive'])) {
   --sbb-train-wagon-shape-color: var(--sbb-color-metal);
 
   @include sbb.if-forced-colors {

From 7a7d03469be6ea6a12bc02cab6b5e1687cae07af Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 12 Nov 2024 15:57:02 +0100
Subject: [PATCH 08/12] fix: review

---
 src/elements/train/train-wagon/readme.md      |  4 +-
 .../train/train-wagon/train-wagon.spec.ts     | 44 ++++++++++++++++-
 src/elements/train/train-wagon/train-wagon.ts | 48 +++++++++++--------
 src/elements/train/train/train.ts             |  1 -
 4 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/src/elements/train/train-wagon/readme.md b/src/elements/train/train-wagon/readme.md
index bc42b4c76c..40de957bed 100644
--- a/src/elements/train/train-wagon/readme.md
+++ b/src/elements/train/train-wagon/readme.md
@@ -5,9 +5,7 @@ It is used inside the [sbb-train](/docs/elements-timetable-sbb-train--docs) elem
 ## Variants
 
 With the `type` property, the component can visualize different types of wagons and locomotives.
-Set the `blockedPassage` corresponding to the `type`.
-E.g. for `wagon-end-left` in between a train, `blockedPassage` should be `previous`.
-If the `wagon-end-left` is the very first compartment of the train, there should be the `additionalAccessibilityText` set like `Top of the train` but without any `blockedPassage` information.
+For the types `wagon-end-left` and `wagon-end-right` the blocked passage information is set automatically.
 
 ```html
 <sbb-train-wagon type="wagon"></sbb-train-wagon>
diff --git a/src/elements/train/train-wagon/train-wagon.spec.ts b/src/elements/train/train-wagon/train-wagon.spec.ts
index d87c2d2c81..a9a803e28d 100644
--- a/src/elements/train/train-wagon/train-wagon.spec.ts
+++ b/src/elements/train/train-wagon/train-wagon.spec.ts
@@ -1,6 +1,7 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { setOrRemoveAttribute } from '../../core/dom.js';
 import { fixture } from '../../core/testing/private.js';
 import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
 import type { SbbIconElement } from '../../icon.js';
@@ -36,13 +37,23 @@ describe(`sbb-train-wagon`, () => {
         'additionalAccessibilityText',
       ] as const
     ).forEach((attr) => {
+      const defaultValueMap = new Map<string, string | null>();
+
+      defaultValueMap.set('type', 'wagon');
+      defaultValueMap.set('occupancy', null);
+      defaultValueMap.set('sector', '');
+      defaultValueMap.set('blockedPassage', 'none');
+      defaultValueMap.set('wagonClass', null);
+      defaultValueMap.set('label', '');
+      defaultValueMap.set('additionalAccessibilityText', '');
+
       const attributeValue = properties[attr];
       // Convert camelCase to kebab-case
       const attributeName = attr.replace(
         /[A-Z]+(?![a-z])|[A-Z]/g,
         ($, ofs) => (ofs ? '-' : '') + $.toLowerCase(),
       );
-      element.setAttribute(attributeName, attributeValue ?? '');
+      setOrRemoveAttribute(element, attributeName, attributeValue ?? defaultValueMap.get(attr));
     });
 
     await waitForLitRender(element);
@@ -165,5 +176,36 @@ describe(`sbb-train-wagon`, () => {
     expect(await extractAriaLabels({ type: 'wagon', blockedPassage: 'none' })).to.be.eql([
       'Train coach',
     ]);
+
+    expect(await extractAriaLabels({ type: 'wagon-end-left' })).to.be.eql([
+      'Train coach',
+      'No passage to the previous train coach',
+    ]);
+
+    expect(await extractAriaLabels({ type: 'wagon-end-right' })).to.be.eql([
+      'Train coach',
+      'No passage to the next train coach',
+    ]);
+
+    expect(await extractAriaLabels({ type: 'wagon-end-right', blockedPassage: 'both' })).to.be.eql([
+      'Train coach',
+      'No passage to the next and previous train coach',
+    ]);
+
+    expect(await extractAriaLabels({ type: 'wagon-end-left', sector: 'A' })).to.be.eql([
+      'Train coach',
+      'Sector, A',
+      'No passage to the previous train coach',
+    ]);
+
+    expect(await extractAriaLabels({ type: 'wagon-end-right', sector: 'A' })).to.be.eql([
+      'Train coach',
+      'Sector, A',
+      'No passage to the next train coach',
+    ]);
+
+    expect(
+      await extractAriaLabels({ type: 'wagon-end-right', blockedPassage: 'both', sector: 'A' }),
+    ).to.be.eql(['Train coach', 'Sector, A', 'No passage to the next and previous train coach']);
   });
 });
diff --git a/src/elements/train/train-wagon/train-wagon.ts b/src/elements/train/train-wagon/train-wagon.ts
index ba141a4e1d..2ac18c836c 100644
--- a/src/elements/train/train-wagon/train-wagon.ts
+++ b/src/elements/train/train-wagon/train-wagon.ts
@@ -1,6 +1,5 @@
 import { type CSSResultGroup, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { choose } from 'lit/directives/choose.js';
 import { when } from 'lit/directives/when.js';
 import { html } from 'lit/static-html.js';
 
@@ -29,6 +28,12 @@ import style from './train-wagon.scss?lit&inline';
 import '../../icon.js';
 import '../../timetable-occupancy-icon.js';
 
+const typeToIconMap: Record<string, string> = {
+  couchette: 'sa-cc',
+  sleeping: 'sa-wl',
+  restaurant: 'sa-wr',
+};
+
 /**
  * It displays a train compartment within a `sbb-train` component.
  *
@@ -63,7 +68,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
   /** Occupancy of a wagon. */
   @property() public accessor occupancy: SbbOccupancy | null = null;
 
-  /** Sector in which to wagon stops. */
+  /** Sector in which the wagon stops. */
   @forceType()
   @handleDistinctChange((e) => e._sectorChanged())
   @property({ reflect: true, converter: omitEmptyConverter })
@@ -123,6 +128,15 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
       return i18nWagonLabel[this._language.current];
     };
 
+    const blockedPassage =
+      this.type === 'wagon-end-left' && this.blockedPassage === 'none'
+        ? 'previous'
+        : this.type === 'wagon-end-right' && this.blockedPassage === 'none'
+          ? 'next'
+          : (this.blockedPassage ?? 'none');
+
+    const hasBlockedPassageEntry = blockedPassage !== 'none';
+
     // From accessibility perspective we cannot create a list with only one entry.
     // We need to know what will be presented and switch semantics based on count.
     const listEntriesCount =
@@ -130,7 +144,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
       +(this.label && this.type !== 'closed') +
       +(!!this.wagonClass && this.type !== 'closed') +
       +(!!this.occupancy && this.type !== 'closed') +
-      +(this.blockedPassage && this.blockedPassage !== 'none');
+      +hasBlockedPassageEntry;
 
     const sectorString = `${i18nSector[this._language.current]}, ${this.sector}`;
 
@@ -149,20 +163,12 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
       </span>
       <span aria-hidden="true">${this.wagonClass}</span>`;
 
-    const mainIcon = choose(this.type, [
-      [
-        'couchette',
-        () => html`<sbb-icon name="sa-cc" class="sbb-train-wagon__main-icon"></sbb-icon>`,
-      ],
-      [
-        'sleeping',
-        () => html`<sbb-icon name="sa-wl" class="sbb-train-wagon__main-icon"></sbb-icon>`,
-      ],
-      [
-        'restaurant',
-        () => html`<sbb-icon name="sa-wr" class="sbb-train-wagon__main-icon"></sbb-icon>`,
-      ],
-    ]);
+    const mainIcon = typeToIconMap[this.type]
+      ? html`<sbb-icon
+          name=${typeToIconMap[this.type]}
+          class="sbb-train-wagon__main-icon"
+        ></sbb-icon>`
+      : nothing;
 
     return html`
       <div class="sbb-train-wagon">
@@ -189,9 +195,9 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
                     occupancy=${this.occupancy}
                   ></sbb-timetable-occupancy-icon>`
                 : nothing}
-              ${this.blockedPassage && this.blockedPassage !== 'none'
+              ${hasBlockedPassageEntry
                 ? html`<li class="sbb-screen-reader-only">
-                    ${i18nBlockedPassage[this.blockedPassage][this._language.current]}
+                    ${i18nBlockedPassage[blockedPassage][this._language.current]}
                   </li>`
                 : nothing}
               ${mainIcon}
@@ -217,9 +223,9 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
                     occupancy=${this.occupancy}
                   ></sbb-timetable-occupancy-icon>`
                 : nothing}
-              ${this.blockedPassage && this.blockedPassage !== 'none'
+              ${hasBlockedPassageEntry
                 ? html`<span class="sbb-screen-reader-only">
-                    ${i18nBlockedPassage[this.blockedPassage][this._language.current]}
+                    ${i18nBlockedPassage[blockedPassage][this._language.current]}
                   </span>`
                 : nothing}
               ${mainIcon}
diff --git a/src/elements/train/train/train.ts b/src/elements/train/train/train.ts
index e95b4bd2d4..08b820cb19 100644
--- a/src/elements/train/train/train.ts
+++ b/src/elements/train/train/train.ts
@@ -43,7 +43,6 @@ class SbbTrainElement extends SbbNamedSlotListMixin<
 
   /** General label for "driving direction". */
   @forceType()
-  // Has to be reflected as it is used in core.scss as selector.
   @property({ attribute: 'direction-label', reflect: true, converter: omitEmptyConverter })
   public accessor directionLabel: string = '';
 

From 01db90c8735b02d80e9790481e719b51075b30b4 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 12 Nov 2024 16:31:46 +0100
Subject: [PATCH 09/12] fix: show label for closed coaches

---
 src/elements/core/i18n/i18n.ts                | 20 +---
 .../train-wagon.snapshot.spec.snap.js         | 98 ++++++++++++++++---
 src/elements/train/train-wagon/readme.md      |  2 +-
 .../train-wagon/train-wagon.snapshot.spec.ts  | 16 +++
 src/elements/train/train-wagon/train-wagon.ts | 29 ++----
 5 files changed, 117 insertions(+), 48 deletions(-)

diff --git a/src/elements/core/i18n/i18n.ts b/src/elements/core/i18n/i18n.ts
index cd26fbe20d..4b7f47a35d 100644
--- a/src/elements/core/i18n/i18n.ts
+++ b/src/elements/core/i18n/i18n.ts
@@ -78,21 +78,11 @@ export const i18nWagonLabelNumber: Record<string, string> = {
   it: `Numero`,
 };
 
-export const i18nClosedCompartmentLabel = (wagonNumber?: number): Record<string, string> => {
-  if (wagonNumber) {
-    return {
-      de: `Geschlossener Wagen mit der Nummer ${wagonNumber}`,
-      en: `Closed train coach with the number ${wagonNumber}`,
-      fr: `Wagon de train fermé avec le numéro ${wagonNumber}`,
-      it: `Carrozza del treno chiuso con il numero ${wagonNumber}`,
-    };
-  }
-  return {
-    de: 'Geschlossener Zugwaggon',
-    en: 'Closed train coach',
-    fr: 'Wagon de train fermé',
-    it: 'Carrozza del treno chiuso',
-  };
+export const i18nClosedCompartmentLabel: Record<string, string> = {
+  de: 'Geschlossener Zugwaggon',
+  en: 'Closed train coach',
+  fr: 'Wagon de train fermé',
+  it: 'Carrozza del treno chiuso',
 };
 
 export const i18nLocomotiveLabel: Record<string, string> = {
diff --git a/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js b/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
index 684b1ec7fb..23ff1daab2 100644
--- a/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
+++ b/src/elements/train/train-wagon/__snapshots__/train-wagon.snapshot.spec.snap.js
@@ -350,24 +350,27 @@ snapshots["sbb-train-wagon should render as type wagon-end-right with only one p
 
 snapshots["sbb-train-wagon should render as type wagon-end-right with only one property Shadow DOM"] = 
 `<div class="sbb-train-wagon">
-  <div class="sbb-train-wagon__compartment">
-    <span class="sbb-screen-reader-only">
-      Train coach
-    </span>
-    <span
+  <ul
+    aria-label="Train coach"
+    class="sbb-train-wagon__compartment"
+  >
+    <li
       aria-hidden="true"
       class="sbb-train-wagon__label"
     >
-    </span>
-    <span class="sbb-train-wagon__class">
+    </li>
+    <li class="sbb-train-wagon__class">
       <span class="sbb-screen-reader-only">
         First Class
       </span>
       <span aria-hidden="true">
         1
       </span>
-    </span>
-  </div>
+    </li>
+    <li class="sbb-screen-reader-only">
+      No passage to the next train coach
+    </li>
+  </ul>
   <span hidden="">
     <slot>
     </slot>
@@ -384,11 +387,11 @@ snapshots["sbb-train-wagon should render as type wagon-end-right with only one p
   "children": [
     {
       "role": "text",
-      "name": "Train coach"
+      "name": "First Class"
     },
     {
       "role": "text",
-      "name": "First Class"
+      "name": "No passage to the next train coach"
     }
   ]
 }
@@ -404,11 +407,11 @@ snapshots["sbb-train-wagon should render as type wagon-end-right with only one p
   "children": [
     {
       "role": "text leaf",
-      "name": "Train coach"
+      "name": "First Class"
     },
     {
       "role": "text leaf",
-      "name": "First Class"
+      "name": "No passage to the next train coach"
     }
   ]
 }
@@ -491,3 +494,72 @@ snapshots["sbb-train-wagon should render with only label A11y tree Chrome"] =
 `;
 /* end snapshot sbb-train-wagon should render with only label A11y tree Chrome */
 
+snapshots["sbb-train-wagon should render as type wagon-end-left DOM"] = 
+`<sbb-train-wagon type="wagon-end-left">
+</sbb-train-wagon>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon-end-left DOM */
+
+snapshots["sbb-train-wagon should render as type wagon-end-left Shadow DOM"] = 
+`<div class="sbb-train-wagon">
+  <div class="sbb-train-wagon__compartment">
+    <span class="sbb-screen-reader-only">
+      Train coach
+    </span>
+    <span
+      aria-hidden="true"
+      class="sbb-train-wagon__label"
+    >
+    </span>
+    <span class="sbb-screen-reader-only">
+      No passage to the previous train coach
+    </span>
+  </div>
+  <span hidden="">
+    <slot>
+    </slot>
+  </span>
+</div>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon-end-left Shadow DOM */
+
+snapshots["sbb-train-wagon should render as type wagon-end-left A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Train coach"
+    },
+    {
+      "role": "text",
+      "name": "No passage to the previous train coach"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon-end-left A11y tree Chrome */
+
+snapshots["sbb-train-wagon should render as type wagon-end-left A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Train coach"
+    },
+    {
+      "role": "text leaf",
+      "name": "No passage to the previous train coach"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-train-wagon should render as type wagon-end-left A11y tree Firefox */
+
diff --git a/src/elements/train/train-wagon/readme.md b/src/elements/train/train-wagon/readme.md
index 40de957bed..da460c539a 100644
--- a/src/elements/train/train-wagon/readme.md
+++ b/src/elements/train/train-wagon/readme.md
@@ -52,7 +52,7 @@ They will be applied internally into a list (using `<ul>` and `<li>`) and requir
 | `blockedPassage`              | `blocked-passage`               | public  | `'previous' \| 'next' \| 'both' \| 'none'`                                                                                  | `'none'`  | Accessibility text for blocked passages of the wagon.                                                                        |
 | `label`                       | `label`                         | public  | `string`                                                                                                                    | `''`      | Wagon number                                                                                                                 |
 | `occupancy`                   | `occupancy`                     | public  | `SbbOccupancy \| null`                                                                                                      | `null`    | Occupancy of a wagon.                                                                                                        |
-| `sector`                      | `sector`                        | public  | `string`                                                                                                                    | `''`      | Sector in which to wagon stops.                                                                                              |
+| `sector`                      | `sector`                        | public  | `string`                                                                                                                    | `''`      | Sector in which the wagon stops.                                                                                             |
 | `type`                        | `type`                          | public  | `'wagon' \| 'wagon-end-left' \| 'wagon-end-right' \| 'couchette' \| 'sleeping' \| 'restaurant' \| 'locomotive' \| 'closed'` | `'wagon'` | Wagon type. For `wagon-end-left` and `wagon-end-right`, please set the corresponding value of the `blockedPassage` property. |
 | `wagonClass`                  | `wagon-class`                   | public  | `'1' \| '2' \| null`                                                                                                        | `null`    | Class label                                                                                                                  |
 
diff --git a/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts b/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
index eaf34c2a61..7c4cdd334f 100644
--- a/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
+++ b/src/elements/train/train-wagon/train-wagon.snapshot.spec.ts
@@ -54,6 +54,22 @@ describe(`sbb-train-wagon`, () => {
     testA11yTreeSnapshot();
   });
 
+  describe('should render as type wagon-end-left', async () => {
+    beforeEach(async () => {
+      element = await fixture(html`<sbb-train-wagon type="wagon-end-left"></sbb-train-wagon>`);
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
+
   describe('should render with only label', async () => {
     beforeEach(async () => {
       element = await fixture(html`<sbb-train-wagon label="1"></sbb-train-wagon>`);
diff --git a/src/elements/train/train-wagon/train-wagon.ts b/src/elements/train/train-wagon/train-wagon.ts
index 2ac18c836c..48ebb00d60 100644
--- a/src/elements/train/train-wagon/train-wagon.ts
+++ b/src/elements/train/train-wagon/train-wagon.ts
@@ -113,9 +113,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
   protected override render(): TemplateResult {
     const typeLabel = (): string => {
       if (this.type === 'closed') {
-        return i18nClosedCompartmentLabel(this.label ? parseInt(this.label) : undefined)[
-          this._language.current
-        ];
+        return i18nClosedCompartmentLabel[this._language.current];
       } else if (this.type === 'locomotive') {
         return i18nLocomotiveLabel[this._language.current];
       } else if (this.type === 'couchette') {
@@ -141,20 +139,19 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
     // We need to know what will be presented and switch semantics based on count.
     const listEntriesCount =
       +!!this.sector +
-      +(this.label && this.type !== 'closed') +
+      +!!this.label +
       +(!!this.wagonClass && this.type !== 'closed') +
       +(!!this.occupancy && this.type !== 'closed') +
       +hasBlockedPassageEntry;
 
     const sectorString = `${i18nSector[this._language.current]}, ${this.sector}`;
 
-    const labelContent =
-      this.label && this.type !== 'closed'
-        ? html`<span class="sbb-screen-reader-only">
-              ${`${i18nWagonLabelNumber[this._language.current]}, ${this.label}`}
-            </span>
-            <span aria-hidden="true">${this.label}</span>`
-        : nothing;
+    const labelContent = this.label
+      ? html`<span class="sbb-screen-reader-only">
+            ${`${i18nWagonLabelNumber[this._language.current]}, ${this.label}`}
+          </span>
+          <span aria-hidden="true">${this.label}</span>`
+      : nothing;
 
     const wagonClassContent = html`<span class="sbb-screen-reader-only">
         ${this.wagonClass === '1'
@@ -179,10 +176,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
               ${this.sector
                 ? html`<li class="sbb-screen-reader-only">${sectorString}</li>`
                 : nothing}
-              <li
-                class="sbb-train-wagon__label"
-                aria-hidden=${`${!this.label || this.type === 'closed'}`}
-              >
+              <li class="sbb-train-wagon__label" aria-hidden=${`${!this.label}`}>
                 ${labelContent}
               </li>
               ${this.wagonClass && this.type !== 'closed'
@@ -207,10 +201,7 @@ class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement, typeof
               <span class="sbb-screen-reader-only">
                 ${`${typeLabel()}${this.sector ? `, ${sectorString}` : ''}`}
               </span>
-              <span
-                class="sbb-train-wagon__label"
-                aria-hidden=${`${!this.label || this.type === 'closed'}`}
-              >
+              <span class="sbb-train-wagon__label" aria-hidden=${`${!this.label}`}>
                 ${labelContent}
               </span>
 

From 38512d77e3d72b46d0840ef9274abe050bddb87f Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Tue, 12 Nov 2024 16:52:57 +0100
Subject: [PATCH 10/12] fix: review

---
 src/elements/train/train-formation/train-formation.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/elements/train/train-formation/train-formation.scss b/src/elements/train/train-formation/train-formation.scss
index b6a30539d2..081f556897 100644
--- a/src/elements/train/train-formation/train-formation.scss
+++ b/src/elements/train/train-formation/train-formation.scss
@@ -100,6 +100,7 @@
   overflow: hidden;
   white-space: nowrap;
 
+  // Lines beside the sector-label
   &::before,
   &::after {
     content: '';

From 3915a8ce843dbd29748202739d3cb421eeafd564 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Tue, 12 Nov 2024 16:53:05 +0100
Subject: [PATCH 11/12] fix: review

---
 src/elements/train/train-formation/train-formation.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/elements/train/train-formation/train-formation.scss b/src/elements/train/train-formation/train-formation.scss
index 081f556897..cf995ca042 100644
--- a/src/elements/train/train-formation/train-formation.scss
+++ b/src/elements/train/train-formation/train-formation.scss
@@ -105,6 +105,7 @@
   &::after {
     content: '';
     position: absolute;
+    // Exactly center the line by subtracting half of the border width
     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);

From 7c91a7ea7077523d16d16585d529b249ea3d8851 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Tue, 12 Nov 2024 16:56:05 +0100
Subject: [PATCH 12/12] fix: styling

---
 src/elements/train/train-formation/train-formation.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/elements/train/train-formation/train-formation.scss b/src/elements/train/train-formation/train-formation.scss
index cf995ca042..22595ef7d1 100644
--- a/src/elements/train/train-formation/train-formation.scss
+++ b/src/elements/train/train-formation/train-formation.scss
@@ -105,6 +105,7 @@
   &::after {
     content: '';
     position: absolute;
+
     // Exactly center the line by subtracting half of the border width
     inset-block: calc(50% - var(--sbb-train-formation-sector-line-width) / 2);
     border-block-end: var(--sbb-train-formation-sector-line-width) solid