fix: chromatic

src/components/navigation/navigation-marker/navigation-marker.ts

@@ -2,7 +2,6 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { NamedSlotListElement, type WithListChildren } from '../../core/common-behaviors';
-import { setAttribute } from '../../core/dom';
 import { AgnosticResizeObserver } from '../../core/observers';
 import type { SbbNavigationActionElement } from '../navigation-action';
 
@@ -31,10 +30,10 @@ export class SbbNavigationMarkerElement extends NamedSlotListElement<SbbNavigati
 
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
-    setAttribute(this, 'data-has-active-action', !!this._currentActiveAction);
     if (changedProperties.has('size') || changedProperties.has('listChildren')) {
       this._updateMarkerActions();
     }
+    this.toggleAttribute('data-has-active-action', !!this._currentActiveAction);
   }
 
   private _updateMarkerActions(): void {
@@ -63,6 +62,11 @@ export class SbbNavigationMarkerElement extends NamedSlotListElement<SbbNavigati
     setTimeout(() => this._setMarkerPosition());
   }
 
+  protected override firstUpdated(changedProperties: PropertyValues<WithListChildren<this>>): void {
+    super.firstUpdated(changedProperties);
+    setTimeout(() => this._setMarkerPosition());
+  }
+
   public reset(): void {
     if (this._currentActiveAction) {
       this._currentActiveAction.active = false;
@@ -71,14 +75,16 @@ export class SbbNavigationMarkerElement extends NamedSlotListElement<SbbNavigati
   }
 
   private _setMarkerPosition(): void {
-    if (this._currentActiveAction) {
-      const index = this.listChildren.indexOf(this._currentActiveAction)!;
-      this.style?.setProperty(
-        '--sbb-navigation-marker-position-y',
-        `${
-          this.shadowRoot!.querySelector<HTMLLIElement>(`li:nth-child(${index + 1})`)!.offsetTop
-        }px`,
-      );
+    if (!this._currentActiveAction) {
+      return;
+    }
+
+    const index = this.listChildren.indexOf(this._currentActiveAction)!;
+    const value = this.shadowRoot!.querySelector<HTMLLIElement>(
+      `li:nth-child(${index + 1})`,
+    )?.offsetTop;
+    if (value != null) {
+      this.style?.setProperty('--sbb-navigation-marker-position-y', `${value}px`);
     }
   }
 

src/components/train/train-formation/train-formation.scss

@@ -106,6 +106,8 @@
   gap: var(--sbb-train-formation-wagon-gap);
 }
 
-.sbb-train-formation__train-list-item {
+// Using ... li selector, because the li generation
+// is handled in the component base class.
+.sbb-train-formation__train-list li {
   display: inline-flex;
 }

src/components/train/train-formation/train-formation.stories.ts

@@ -15,7 +15,6 @@ import './train-formation';
 const MountedFormationTemplate = (args: Args): TemplateResult => html`
   <sbb-train-formation ${sbbSpread(args)}>
     <sbb-train
-      directionLabel="This attribute seems to be necessary due to a bug"
       direction-label="Direction of travel"
       station="Bern"
       direction="left"
@@ -125,7 +124,6 @@ const MountedFormationTemplate = (args: Args): TemplateResult => html`
       ></sbb-train-wagon>
     </sbb-train>
     <sbb-train
-      directionLabel="This attribute seems to be necessary due to a bug"
       direction-label="Direction of travel"
       station="Luzern"
       direction="left"
@@ -217,7 +215,6 @@ const MountedFormationTemplate = (args: Args): TemplateResult => html`
 const SingleFormationTemplate = (args: Args): TemplateResult => html`
   <sbb-train-formation ${sbbSpread(args)}>
     <sbb-train
-      directionLabel="This attribute seems to be necessary due to a bug"
       direction-label="Direction of travel"
       station=""
       direction="left"