From bd405ab083815b3a3fd19c284a1c2a0f367a6368 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 31 Jul 2024 11:11:32 +0200
Subject: [PATCH 01/13] feat: fix animation

---
 .../flip-card-details/flip-card-details.scss  | 26 ++++++++++++++-----
 .../flip-card/flip-card/flip-card.scss        |  2 +-
 src/elements/flip-card/flip-card/flip-card.ts |  5 ++++
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/elements/flip-card/flip-card-details/flip-card-details.scss b/src/elements/flip-card/flip-card-details/flip-card-details.scss
index 4101932e3a..5eddc1e871 100644
--- a/src/elements/flip-card/flip-card-details/flip-card-details.scss
+++ b/src/elements/flip-card/flip-card-details/flip-card-details.scss
@@ -6,20 +6,32 @@
 :host {
   --sbb-flip-card-details-opacity: 0;
   --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
+  --sbb-flip-card-details-max-height: var(--sbb-flip-card-details-min-height);
+  --sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-details-padding-block-end: calc(
+    var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
+  );
 
   display: contents;
 }
 
+:host([data-flipped]) {
+  --sbb-flip-card-details-max-height: calc(
+    var(--sbb-flip-card-details-min-height) + var(--sbb-flip-card-details-padding) +
+      var(--sbb-flip-card-details-padding-block-end)
+  );
+}
+
 .sbb-flip-card-details {
   pointer-events: none;
   color: var(--sbb-color-milk);
   opacity: var(--sbb-flip-card-details-opacity);
-  padding: var(--sbb-spacing-responsive-s);
-  padding-block-end: calc(
-    var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
-  );
+  padding: var(--sbb-flip-card-details-padding);
+  padding-block-end: var(--sbb-flip-card-details-padding-block-end);
+  max-height: var(--sbb-flip-card-details-max-height);
   transform: translateY(var(--sbb-flip-card-details-translate-y));
-  transition: var(--sbb-flip-card-details-transition-duration) ease-out;
-  transition-delay: var(--sbb-flip-card-details-transition-delay);
-  max-height: var(--sbb-flip-card-details-min-height);
+
+  // transition: var(--sbb-flip-card-details-transition-duration) ease-out;
+  // transition-delay: var(--sbb-flip-card-details-transition-delay);
+  transition: all var(--sbb-flip-card-details-transition-duration) ease-out;
 }
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index 399525bc32..8761a702a5 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -42,7 +42,7 @@
   );
   --sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);
   --sbb-flip-card-summary-transition-delay: 0s;
-  --sbb-flip-card-details-min-height: fit-content;
+  --sbb-flip-card-details-min-height: var(--sbb-flip-card-details-scroll-height);
 
   ::slotted(sbb-flip-card-summary) {
     --sbb-flip-card-summary-opacity: 0;
diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts
index 80e1ceb6db..5973ea6186 100644
--- a/src/elements/flip-card/flip-card/flip-card.ts
+++ b/src/elements/flip-card/flip-card/flip-card.ts
@@ -77,8 +77,13 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
 
   /** Toggles the state of the sbb-flip-card. */
   public toggle(): void {
+    this.style?.setProperty(
+      '--sbb-flip-card-details-scroll-height',
+      `${this.details!.shadowRoot?.firstElementChild?.scrollHeight}px`,
+    );
     this._flipped = !this._flipped;
     this.toggleAttribute('data-flipped', this._flipped);
+    this.details!.toggleAttribute('data-flipped', this._flipped);
     this.summary!.inert = this._flipped;
     this.details!.inert = !this._flipped;
     this.flip.emit();

From 6f008b0e146ef85a3c760a5154fb06e40953c829 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 15 Aug 2024 15:13:38 +0200
Subject: [PATCH 02/13] feat: add flip and height animation

---
 .../flip-card-details/flip-card-details.scss  | 10 +++--
 .../flip-card/flip-card/flip-card.scss        | 38 +++++++++++++------
 src/elements/flip-card/flip-card/flip-card.ts | 11 +++++-
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/elements/flip-card/flip-card-details/flip-card-details.scss b/src/elements/flip-card/flip-card-details/flip-card-details.scss
index 5eddc1e871..401026fc12 100644
--- a/src/elements/flip-card/flip-card-details/flip-card-details.scss
+++ b/src/elements/flip-card/flip-card-details/flip-card-details.scss
@@ -7,6 +7,7 @@
   --sbb-flip-card-details-opacity: 0;
   --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-flip-card-details-max-height: var(--sbb-flip-card-details-min-height);
+  --sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-6x);
   --sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);
   --sbb-flip-card-details-padding-block-end: calc(
     var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
@@ -30,8 +31,11 @@
   padding-block-end: var(--sbb-flip-card-details-padding-block-end);
   max-height: var(--sbb-flip-card-details-max-height);
   transform: translateY(var(--sbb-flip-card-details-translate-y));
+  transition-property: max-height, transform, opacity;
+  transition-duration: var(--sbb-flip-card-details-transition-duration);
 
-  // transition: var(--sbb-flip-card-details-transition-duration) ease-out;
-  // transition-delay: var(--sbb-flip-card-details-transition-delay);
-  transition: all var(--sbb-flip-card-details-transition-duration) ease-out;
+  :host([data-flipped]) & {
+    transition-delay: 0s, var(--sbb-flip-card-details-transition-delay),
+      var(--sbb-flip-card-details-transition-delay);
+  }
 }
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index 8761a702a5..a168a8bd63 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -3,7 +3,6 @@
 // Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
 @include sbb.box-sizing;
 
-// TODO: improve component's animation
 :host {
   --sbb-flip-card-background-color: var(--sbb-color-cloud);
   --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
@@ -14,11 +13,7 @@
     var(--sbb-animation-duration-5x)
   );
   --sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);
-  --sbb-flip-card-details-transition-duration: var(
-    --sbb-disable-animation-zero-time,
-    var(--sbb-animation-duration-4x)
-  );
-  --sbb-flip-card-details-transition-delay: 0s;
+  --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-4x);
 
   position: relative;
   display: block;
@@ -35,12 +30,7 @@
 }
 
 :host([data-flipped]) {
-  --sbb-flip-card-background-color: var(--sbb-color-midnight);
-  --sbb-flip-card-details-transition-duration: var(
-    --sbb-disable-animation-zero-time,
-    var(--sbb-animation-duration-2x)
-  );
-  --sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-5x);
+  --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-2x);
   --sbb-flip-card-summary-transition-delay: 0s;
   --sbb-flip-card-details-min-height: var(--sbb-flip-card-details-scroll-height);
 
@@ -95,6 +85,30 @@
       }
     }
   }
+
+  // Expanding dark background from the button when flipped.
+  &::before {
+    content: '';
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: var(--sbb-spacing-responsive-s);
+    inset-block-end: var(--sbb-spacing-responsive-s);
+    background-color: var(--sbb-color-midnight);
+    width: var(--sbb-size-element-xs);
+    height: var(--sbb-size-element-xs);
+    border-radius: var(--sbb-size-element-xs);
+    transition: var(--sbb-animation-duration-5x) ease-out;
+
+    :host([data-flipped]) & {
+      opacity: 1;
+      inset-inline-start: 0;
+      inset-block-end: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: var(--sbb-flip-card-border-radius);
+    }
+  }
 }
 
 .sbb-flip-card--toggle-button {
diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts
index 5973ea6186..24e9549770 100644
--- a/src/elements/flip-card/flip-card/flip-card.ts
+++ b/src/elements/flip-card/flip-card/flip-card.ts
@@ -7,6 +7,7 @@ import { SbbConnectedAbortController, SbbLanguageController } from '../../core/c
 import { EventEmitter } from '../../core/eventing.js';
 import { i18nFlipCard, i18nReverseCard } from '../../core/i18n.js';
 import { SbbHydrationMixin } from '../../core/mixins.js';
+import { AgnosticResizeObserver } from '../../core/observers.js';
 import type { SbbFlipCardDetailsElement } from '../flip-card-details.js';
 import type { SbbFlipCardSummaryElement } from '../flip-card-summary.js';
 
@@ -58,9 +59,11 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
 
   private _abort = new SbbConnectedAbortController(this);
   private _language = new SbbLanguageController(this);
+  private _flipCardResizeObserver = new AgnosticResizeObserver(() => this._setFlipCardHeight());
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    this._flipCardResizeObserver.observe(this);
     this.addEventListener(
       'click',
       (event: Event) => {
@@ -75,12 +78,16 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
     );
   }
 
-  /** Toggles the state of the sbb-flip-card. */
-  public toggle(): void {
+  private _setFlipCardHeight(): void {
     this.style?.setProperty(
       '--sbb-flip-card-details-scroll-height',
       `${this.details!.shadowRoot?.firstElementChild?.scrollHeight}px`,
     );
+  }
+
+  /** Toggles the state of the sbb-flip-card. */
+  public toggle(): void {
+    this._setFlipCardHeight();
     this._flipped = !this._flipped;
     this.toggleAttribute('data-flipped', this._flipped);
     this.details!.toggleAttribute('data-flipped', this._flipped);

From 71d08e4be79cbfc0447df4aec14ffb2e8ff7963f Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 15 Aug 2024 15:37:30 +0200
Subject: [PATCH 03/13] feat: add button animation

---
 src/elements/flip-card/flip-card/flip-card.scss |  7 +++++++
 src/elements/flip-card/flip-card/flip-card.ts   | 12 +++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index a168a8bd63..c251c45e1c 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -4,6 +4,7 @@
 @include sbb.box-sizing;
 
 :host {
+  --sbb-flip-card-toggle-icon-transform: rotate(0);
   --sbb-flip-card-background-color: var(--sbb-color-cloud);
   --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-flip-card-min-height: #{sbb.px-to-rem-build(280)};
@@ -30,6 +31,7 @@
 }
 
 :host([data-flipped]) {
+  --sbb-flip-card-toggle-icon-transform: rotate(45deg);
   --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-2x);
   --sbb-flip-card-summary-transition-delay: 0s;
   --sbb-flip-card-details-min-height: var(--sbb-flip-card-details-scroll-height);
@@ -121,6 +123,11 @@
   }
 }
 
+.sbb-flip-card--toggle-button-icon {
+  transform: var(--sbb-flip-card-toggle-icon-transform);
+  transition: transform var(--sbb-flip-card-summary-transition-duration) ease-out;
+}
+
 .sbb-flip-card-button {
   @include sbb.button-reset;
 
diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts
index 24e9549770..bb37ae5f4b 100644
--- a/src/elements/flip-card/flip-card/flip-card.ts
+++ b/src/elements/flip-card/flip-card/flip-card.ts
@@ -119,11 +119,13 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
         </button>
         <slot name="summary" @slotchange=${() => (this.summary!.inert = this._flipped)}></slot>
         <slot name="details" @slotchange=${() => (this.details!.inert = !this._flipped)}></slot>
-        <sbb-secondary-button-static
-          class="sbb-flip-card--toggle-button"
-          icon-name=${this._flipped ? 'cross-small' : 'plus-small'}
-          size="s"
-        ></sbb-secondary-button-static>
+        <sbb-secondary-button-static class="sbb-flip-card--toggle-button" size="s">
+          <sbb-icon
+            class="sbb-flip-card--toggle-button-icon"
+            slot="icon"
+            name="plus-small"
+          ></sbb-icon>
+        </sbb-secondary-button-static>
       </div>
     `;
   }

From 9f1a1c600e3d520b51bfd429414881f0c859a7a5 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 15 Aug 2024 15:40:40 +0200
Subject: [PATCH 04/13] fix: review

---
 src/elements/flip-card/flip-card/flip-card.scss | 10 ++++++++--
 src/elements/flip-card/flip-card/flip-card.ts   |  5 +++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index c251c45e1c..ac76042f4d 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -14,7 +14,10 @@
     var(--sbb-animation-duration-5x)
   );
   --sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);
-  --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-4x);
+  --sbb-flip-card-details-transition-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-4x)
+  );
 
   position: relative;
   display: block;
@@ -32,7 +35,10 @@
 
 :host([data-flipped]) {
   --sbb-flip-card-toggle-icon-transform: rotate(45deg);
-  --sbb-flip-card-details-transition-duration: var(--sbb-animation-duration-2x);
+  --sbb-flip-card-details-transition-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-flip-card-summary-transition-delay: 0s;
   --sbb-flip-card-details-min-height: var(--sbb-flip-card-details-scroll-height);
 
diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts
index bb37ae5f4b..70b80e2827 100644
--- a/src/elements/flip-card/flip-card/flip-card.ts
+++ b/src/elements/flip-card/flip-card/flip-card.ts
@@ -78,6 +78,11 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
     );
   }
 
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._flipCardResizeObserver.disconnect();
+  }
+
   private _setFlipCardHeight(): void {
     this.style?.setProperty(
       '--sbb-flip-card-details-scroll-height',

From a04df0aa66dbfd1667185fbe94cea2e98f631341 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Thu, 15 Aug 2024 15:57:32 +0200
Subject: [PATCH 05/13] fix: snapshot file

---
 .../__snapshots__/flip-card.snapshot.spec.snap.js     | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js b/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js
index e6bfe4d7c6..0d61573e68 100644
--- a/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js
+++ b/src/elements/flip-card/flip-card/__snapshots__/flip-card.snapshot.spec.snap.js
@@ -91,10 +91,19 @@ snapshots["sbb-flip-card Shadow DOM"] =
     class="sbb-flip-card--toggle-button"
     data-action=""
     data-sbb-button=""
+    data-slot-names="icon"
     dir="ltr"
-    icon-name="plus-small"
     size="s"
   >
+    <sbb-icon
+      aria-hidden="true"
+      class="sbb-flip-card--toggle-button-icon"
+      data-namespace="default"
+      name="plus-small"
+      role="img"
+      slot="icon"
+    >
+    </sbb-icon>
   </sbb-secondary-button-static>
 </div>
 `;

From cd4a859df54527ad0665dc26fefcc0b2480e51a8 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 15 Aug 2024 15:59:28 +0200
Subject: [PATCH 06/13] fix: disable animation

---
 .../flip-card/flip-card-details/flip-card-details.scss     | 5 ++++-
 src/elements/flip-card/flip-card/flip-card.scss            | 7 +++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/elements/flip-card/flip-card-details/flip-card-details.scss b/src/elements/flip-card/flip-card-details/flip-card-details.scss
index 401026fc12..cce7015e36 100644
--- a/src/elements/flip-card/flip-card-details/flip-card-details.scss
+++ b/src/elements/flip-card/flip-card-details/flip-card-details.scss
@@ -7,7 +7,10 @@
   --sbb-flip-card-details-opacity: 0;
   --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-flip-card-details-max-height: var(--sbb-flip-card-details-min-height);
-  --sbb-flip-card-details-transition-delay: var(--sbb-animation-duration-6x);
+  --sbb-flip-card-details-transition-delay: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-6x)
+  );
   --sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);
   --sbb-flip-card-details-padding-block-end: calc(
     var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index ac76042f4d..a473812d89 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -13,7 +13,10 @@
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-5x)
   );
-  --sbb-flip-card-summary-transition-delay: var(--sbb-animation-duration-2x);
+  --sbb-flip-card-summary-transition-delay: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-2x)
+  );
   --sbb-flip-card-details-transition-duration: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-4x)
@@ -106,7 +109,7 @@
     width: var(--sbb-size-element-xs);
     height: var(--sbb-size-element-xs);
     border-radius: var(--sbb-size-element-xs);
-    transition: var(--sbb-animation-duration-5x) ease-out;
+    transition: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x)) ease-out;
 
     :host([data-flipped]) & {
       opacity: 1;

From 2c8d32057c05e408c4c8546fdc5a3ba608f18ef9 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Fri, 16 Aug 2024 09:48:57 +0200
Subject: [PATCH 07/13] fix: visual review

---
 .../flip-card/flip-card-details/flip-card-details.scss      | 2 +-
 .../flip-card/flip-card-summary/flip-card-summary.scss      | 3 +++
 src/elements/flip-card/flip-card/flip-card.scss             | 6 ++++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/elements/flip-card/flip-card-details/flip-card-details.scss b/src/elements/flip-card/flip-card-details/flip-card-details.scss
index cce7015e36..5a9b33ad20 100644
--- a/src/elements/flip-card/flip-card-details/flip-card-details.scss
+++ b/src/elements/flip-card/flip-card-details/flip-card-details.scss
@@ -9,7 +9,7 @@
   --sbb-flip-card-details-max-height: var(--sbb-flip-card-details-min-height);
   --sbb-flip-card-details-transition-delay: var(
     --sbb-disable-animation-zero-time,
-    var(--sbb-animation-duration-6x)
+    var(--sbb-animation-duration-5x)
   );
   --sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);
   --sbb-flip-card-details-padding-block-end: calc(
diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
index 465e9cfddf..68c3b60c5d 100644
--- a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
+++ b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
@@ -42,6 +42,9 @@
   padding-block: var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);
   margin: 0;
   grid-area: 1 / 1 / 2 / 2;
+  transform: translateY(var(--sbb-flip-card-title-translate-y-hover, #{sbb.px-to-rem-build(0)}));
+  transition: transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))
+    var(--sbb-animation-easing);
 
   :host([image-alignment='after']) & {
     @include sbb.mq($from: small) {
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index a473812d89..98ad68ebd6 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -33,6 +33,7 @@
 :host(:hover) {
   @include sbb.hover-mq($hover: true) {
     --sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);
+    --sbb-flip-card-title-translate-y-hover: #{sbb.px-to-rem-build(-1)};
   }
 }
 
@@ -108,8 +109,8 @@
     background-color: var(--sbb-color-midnight);
     width: var(--sbb-size-element-xs);
     height: var(--sbb-size-element-xs);
-    border-radius: var(--sbb-size-element-xs);
-    transition: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x)) ease-out;
+    border-radius: #{sbb.px-to-rem-build(256)};
+    transition: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x)) ease-out;
 
     :host([data-flipped]) & {
       opacity: 1;
@@ -118,6 +119,7 @@
       width: 100%;
       height: 100%;
       border-radius: var(--sbb-flip-card-border-radius);
+      transition-duration: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x));
     }
   }
 }

From c4925b41ab766d016ffa162c0c12831ed5f9e37a Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Fri, 16 Aug 2024 10:33:23 +0200
Subject: [PATCH 08/13] fix: visual tests

---
 .../flip-card/flip-card/flip-card.visual.spec.ts         | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/elements/flip-card/flip-card/flip-card.visual.spec.ts b/src/elements/flip-card/flip-card/flip-card.visual.spec.ts
index 48f968a68c..2fe8894c54 100644
--- a/src/elements/flip-card/flip-card/flip-card.visual.spec.ts
+++ b/src/elements/flip-card/flip-card/flip-card.visual.spec.ts
@@ -22,12 +22,13 @@ const content = (
   title: string = 'Summary',
   imageAlignment: SbbFlipCardImageAlignment = 'after',
   longContent: boolean = false,
+  flipped = false,
 ): TemplateResult =>
   html`<sbb-flip-card-summary image-alignment=${imageAlignment}>
       <sbb-title level="4">${title}</sbb-title>
       <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
     </sbb-flip-card-summary>
-    <sbb-flip-card-details>
+    <sbb-flip-card-details ?data-flipped=${flipped}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum.
       Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis in nibh.
       ${longContent
@@ -66,7 +67,11 @@ describe(`sbb-flip-card`, () => {
     it(
       'flipped',
       visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(html`<sbb-flip-card data-flipped> ${content()}</sbb-flip-card>`);
+        await setup.withFixture(
+          html`<sbb-flip-card data-flipped>
+            ${content('Summary', 'after', false, true)}</sbb-flip-card
+          >`,
+        );
         await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
       }),
     );

From 0227380dd12f925eb30dc7eb329d866ce990c924 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Fri, 16 Aug 2024 13:24:29 +0200
Subject: [PATCH 09/13] refactor: change var name

---
 src/elements/flip-card/flip-card-summary/flip-card-summary.scss | 2 +-
 src/elements/flip-card/flip-card/flip-card.scss                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
index 68c3b60c5d..c17012f370 100644
--- a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
+++ b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
@@ -42,7 +42,7 @@
   padding-block: var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);
   margin: 0;
   grid-area: 1 / 1 / 2 / 2;
-  transform: translateY(var(--sbb-flip-card-title-translate-y-hover, #{sbb.px-to-rem-build(0)}));
+  transform: translateY(var(--sbb-flip-card-translate-title-y-hover, #{sbb.px-to-rem-build(0)}));
   transition: transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))
     var(--sbb-animation-easing);
 
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index 98ad68ebd6..28dc7da17b 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -33,7 +33,7 @@
 :host(:hover) {
   @include sbb.hover-mq($hover: true) {
     --sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);
-    --sbb-flip-card-title-translate-y-hover: #{sbb.px-to-rem-build(-1)};
+    --sbb-flip-card-translate-title-y-hover: #{sbb.px-to-rem-build(-1)};
   }
 }
 

From 1a25810c8921920cfa36ef3bd8a15b30c005f3cf Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 20 Aug 2024 10:57:59 +0200
Subject: [PATCH 10/13] fix: review

---
 .../flip-card/flip-card-summary/flip-card-summary.scss   | 9 ++++++---
 src/elements/flip-card/flip-card/flip-card.scss          | 2 ++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
index c17012f370..bc4d3d1a14 100644
--- a/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
+++ b/src/elements/flip-card/flip-card-summary/flip-card-summary.scss
@@ -42,9 +42,6 @@
   padding-block: var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);
   margin: 0;
   grid-area: 1 / 1 / 2 / 2;
-  transform: translateY(var(--sbb-flip-card-translate-title-y-hover, #{sbb.px-to-rem-build(0)}));
-  transition: transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))
-    var(--sbb-animation-easing);
 
   :host([image-alignment='after']) & {
     @include sbb.mq($from: small) {
@@ -57,6 +54,12 @@
   }
 }
 
+::slotted(*:not([slot='image'])) {
+  transform: translateY(var(--sbb-flip-card-translate-title-y-hover, #{sbb.px-to-rem-build(0)}));
+  transition: transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))
+    var(--sbb-animation-easing);
+}
+
 .sbb-flip-card-summary--image-wrapper {
   max-height: var(--sbb-flip-card-min-height);
   grid-area: 2 / 1 / 3 / 2;
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index 28dc7da17b..c49ca08b01 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -109,6 +109,8 @@
     background-color: var(--sbb-color-midnight);
     width: var(--sbb-size-element-xs);
     height: var(--sbb-size-element-xs);
+
+    // Use this large border radius to improve the appearance of the expanding dark background.
     border-radius: #{sbb.px-to-rem-build(256)};
     transition: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x)) ease-out;
 

From c410c7cf299f0dbf1317ff8d8a8e3584fde8f293 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 22 Aug 2024 14:24:18 +0200
Subject: [PATCH 11/13] refactor: use grid for height animation

---
 .../flip-card-details/flip-card-details.scss  | 24 +++++++++----------
 .../flip-card-details/flip-card-details.ts    |  6 +++--
 .../flip-card/flip-card/flip-card.scss        |  2 --
 src/elements/flip-card/flip-card/flip-card.ts | 12 ----------
 4 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/src/elements/flip-card/flip-card-details/flip-card-details.scss b/src/elements/flip-card/flip-card-details/flip-card-details.scss
index 5a9b33ad20..62b9beaa89 100644
--- a/src/elements/flip-card/flip-card-details/flip-card-details.scss
+++ b/src/elements/flip-card/flip-card-details/flip-card-details.scss
@@ -6,7 +6,6 @@
 :host {
   --sbb-flip-card-details-opacity: 0;
   --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
-  --sbb-flip-card-details-max-height: var(--sbb-flip-card-details-min-height);
   --sbb-flip-card-details-transition-delay: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-5x)
@@ -19,26 +18,25 @@
   display: contents;
 }
 
-:host([data-flipped]) {
-  --sbb-flip-card-details-max-height: calc(
-    var(--sbb-flip-card-details-min-height) + var(--sbb-flip-card-details-padding) +
-      var(--sbb-flip-card-details-padding-block-end)
-  );
-}
-
-.sbb-flip-card-details {
+.sbb-flip-card-details--wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
   pointer-events: none;
   color: var(--sbb-color-milk);
   opacity: var(--sbb-flip-card-details-opacity);
-  padding: var(--sbb-flip-card-details-padding);
-  padding-block-end: var(--sbb-flip-card-details-padding-block-end);
-  max-height: var(--sbb-flip-card-details-max-height);
   transform: translateY(var(--sbb-flip-card-details-translate-y));
-  transition-property: max-height, transform, opacity;
+  transition-property: grid-template-rows, transform, opacity;
   transition-duration: var(--sbb-flip-card-details-transition-duration);
 
   :host([data-flipped]) & {
+    grid-template-rows: 1fr;
     transition-delay: 0s, var(--sbb-flip-card-details-transition-delay),
       var(--sbb-flip-card-details-transition-delay);
   }
 }
+
+.sbb-flip-card-details {
+  overflow: hidden;
+  padding: var(--sbb-flip-card-details-padding);
+  padding-block-end: var(--sbb-flip-card-details-padding-block-end);
+}
diff --git a/src/elements/flip-card/flip-card-details/flip-card-details.ts b/src/elements/flip-card/flip-card-details/flip-card-details.ts
index b5ee5ee118..85b2da2cf5 100644
--- a/src/elements/flip-card/flip-card-details/flip-card-details.ts
+++ b/src/elements/flip-card/flip-card-details/flip-card-details.ts
@@ -53,8 +53,10 @@ export class SbbFlipCardDetailsElement extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <div class="sbb-flip-card-details">
-        <slot></slot>
+      <div class="sbb-flip-card-details--wrapper">
+        <div class="sbb-flip-card-details">
+          <slot></slot>
+        </div>
       </div>
     `;
   }
diff --git a/src/elements/flip-card/flip-card/flip-card.scss b/src/elements/flip-card/flip-card/flip-card.scss
index c49ca08b01..432b02e863 100644
--- a/src/elements/flip-card/flip-card/flip-card.scss
+++ b/src/elements/flip-card/flip-card/flip-card.scss
@@ -8,7 +8,6 @@
   --sbb-flip-card-background-color: var(--sbb-color-cloud);
   --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-flip-card-min-height: #{sbb.px-to-rem-build(280)};
-  --sbb-flip-card-details-min-height: var(--sbb-flip-card-min-height);
   --sbb-flip-card-summary-transition-duration: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-5x)
@@ -44,7 +43,6 @@
     var(--sbb-animation-duration-2x)
   );
   --sbb-flip-card-summary-transition-delay: 0s;
-  --sbb-flip-card-details-min-height: var(--sbb-flip-card-details-scroll-height);
 
   ::slotted(sbb-flip-card-summary) {
     --sbb-flip-card-summary-opacity: 0;
diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts
index 70b80e2827..d9a3ad62ae 100644
--- a/src/elements/flip-card/flip-card/flip-card.ts
+++ b/src/elements/flip-card/flip-card/flip-card.ts
@@ -7,7 +7,6 @@ import { SbbConnectedAbortController, SbbLanguageController } from '../../core/c
 import { EventEmitter } from '../../core/eventing.js';
 import { i18nFlipCard, i18nReverseCard } from '../../core/i18n.js';
 import { SbbHydrationMixin } from '../../core/mixins.js';
-import { AgnosticResizeObserver } from '../../core/observers.js';
 import type { SbbFlipCardDetailsElement } from '../flip-card-details.js';
 import type { SbbFlipCardSummaryElement } from '../flip-card-summary.js';
 
@@ -59,11 +58,9 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
 
   private _abort = new SbbConnectedAbortController(this);
   private _language = new SbbLanguageController(this);
-  private _flipCardResizeObserver = new AgnosticResizeObserver(() => this._setFlipCardHeight());
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    this._flipCardResizeObserver.observe(this);
     this.addEventListener(
       'click',
       (event: Event) => {
@@ -80,19 +77,10 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
 
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
-    this._flipCardResizeObserver.disconnect();
-  }
-
-  private _setFlipCardHeight(): void {
-    this.style?.setProperty(
-      '--sbb-flip-card-details-scroll-height',
-      `${this.details!.shadowRoot?.firstElementChild?.scrollHeight}px`,
-    );
   }
 
   /** Toggles the state of the sbb-flip-card. */
   public toggle(): void {
-    this._setFlipCardHeight();
     this._flipped = !this._flipped;
     this.toggleAttribute('data-flipped', this._flipped);
     this.details!.toggleAttribute('data-flipped', this._flipped);

From 2c0a7fd06ce62175c80c67e5a6804a8c90af42f3 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 22 Aug 2024 14:44:19 +0200
Subject: [PATCH 12/13] fix: review

---
 src/elements/flip-card/flip-card/flip-card.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts
index d9a3ad62ae..0d697b0887 100644
--- a/src/elements/flip-card/flip-card/flip-card.ts
+++ b/src/elements/flip-card/flip-card/flip-card.ts
@@ -75,10 +75,6 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
     );
   }
 
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-  }
-
   /** Toggles the state of the sbb-flip-card. */
   public toggle(): void {
     this._flipped = !this._flipped;

From 7b0050c275bfb550f25b46b6f8d454bfa44a4be7 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 22 Aug 2024 15:44:06 +0200
Subject: [PATCH 13/13] fix: snapshots

---
 .../__snapshots__/flip-card-details.snapshot.spec.snap.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/elements/flip-card/flip-card-details/__snapshots__/flip-card-details.snapshot.spec.snap.js b/src/elements/flip-card/flip-card-details/__snapshots__/flip-card-details.snapshot.spec.snap.js
index 68caec6273..913fb1316b 100644
--- a/src/elements/flip-card/flip-card-details/__snapshots__/flip-card-details.snapshot.spec.snap.js
+++ b/src/elements/flip-card/flip-card-details/__snapshots__/flip-card-details.snapshot.spec.snap.js
@@ -25,9 +25,11 @@ snapshots["sbb-flip-card-details DOM"] =
 /* end snapshot sbb-flip-card-details DOM */
 
 snapshots["sbb-flip-card-details Shadow DOM"] = 
-`<div class="sbb-flip-card-details">
-  <slot>
-  </slot>
+`<div class="sbb-flip-card-details--wrapper">
+  <div class="sbb-flip-card-details">
+    <slot>
+    </slot>
+  </div>
 </div>
 `;
 /* end snapshot sbb-flip-card-details Shadow DOM */