fix(sbb-clock): treat a specific date consistently

src/elements/clock/__snapshots__/clock.snapshot.spec.snap.js

@@ -35,7 +35,7 @@ snapshots["sbb-clock renders with fixed time DOM"] =
 `<sbb-clock
   data-initialized=""
   now="12:30:00"
-  style="--sbb-clock-hours-animation-start-angle: 15deg; --sbb-clock-hours-animation-duration: 41400s; --sbb-clock-seconds-animation-start-angle: 0deg; --sbb-clock-seconds-animation-duration: 60s; --sbb-clock-animation-play-state: running;"
+  style="--sbb-clock-animation-play-state: paused; --sbb-clock-hours-animation-start-angle: 15deg; --sbb-clock-hours-animation-duration: 41400s; --sbb-clock-seconds-animation-start-angle: 0deg; --sbb-clock-seconds-animation-duration: 60s;"
 >
 </sbb-clock>
 `;

src/elements/clock/clock.ts

@@ -185,7 +185,6 @@ export class SbbClockElement extends LitElement {
 
     this._clockHandSeconds?.classList.add('sbb-clock__hand-seconds--initial-minute');
     this._clockHandHours?.classList.add('sbb-clock__hand-hours--initial-hour');
-    this.style?.setProperty('--sbb-clock-animation-play-state', 'running');
 
     this.toggleAttribute('data-initialized', true);
   }
@@ -234,19 +233,35 @@ export class SbbClockElement extends LitElement {
   private async _stopClock(): Promise<void> {
     clearInterval(this._handMovement);
 
-    if (this.now) {
-      this._setHandsStartingPosition();
-    } else {
-      this._removeSecondsAnimationStyles();
-      this._removeHoursAnimationStyles();
-    }
+    this._removeSecondsAnimationStyles();
+    this._removeHoursAnimationStyles();
 
     this._clockHandHours?.removeEventListener('animationend', this._moveHoursHandFn);
     this._clockHandSeconds?.removeEventListener('animationend', this._moveMinutesHandFn);
 
     this._clockHandMinutes?.classList.add('sbb-clock__hand-minutes--no-transition');
 
     this.style?.setProperty('--sbb-clock-animation-play-state', 'paused');
+
+    if (this.now) {
+      this._resetSecondsHandAnimation();
+      this._setHandsStartingPosition();
+    }
+  }
+
+  /**
+   * Removing animation by overriding with empty string,
+   * then triggering a reflow and re add original animation by removing override.
+   * @private
+   */
+  private _resetSecondsHandAnimation(): void {
+    if (!this._clockHandSeconds) {
+      return;
+    }
+    this._clockHandSeconds.style.animation = '';
+    // Hack to trigger reflow
+    this._clockHandSeconds.offsetHeight;
+    this._clockHandSeconds.style.removeProperty('animation');
   }
 
   /** Starts the clock by defining the hands starting position then starting the animations. */
@@ -263,7 +278,11 @@ export class SbbClockElement extends LitElement {
     );
 
     await new Promise(() =>
-      setTimeout(() => this._setHandsStartingPosition(), INITIAL_TIMEOUT_DURATION),
+      setTimeout(() => {
+        this._setHandsStartingPosition();
+
+        this.style?.setProperty('--sbb-clock-animation-play-state', 'running');
+      }, INITIAL_TIMEOUT_DURATION),
     );
   }