fix(sbb-flip-card): fix background and height transitions

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 */

src/elements/flip-card/flip-card-details/flip-card-details.scss

@@ -6,20 +6,37 @@
 :host {
   --sbb-flip-card-details-opacity: 0;
   --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
+  --sbb-flip-card-details-transition-delay: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-5x)
+  );
+  --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;
 }
 
-.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-spacing-responsive-s);
-  padding-block-end: calc(
-    var(--sbb-spacing-responsive-s) + var(--sbb-spacing-responsive-xs) + var(--sbb-size-element-m)
-  );
   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-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);
 }

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>
     `;
   }

src/elements/flip-card/flip-card-summary/flip-card-summary.scss

@@ -54,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;

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>
 `;

src/elements/flip-card/flip-card/flip-card.scss

@@ -3,22 +3,23 @@
 // 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-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)};
-  --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)
   );
-  --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)
   );
-  --sbb-flip-card-details-transition-delay: 0s;
 
   position: relative;
   display: block;
@@ -31,18 +32,17 @@
 :host(:hover) {
   @include sbb.hover-mq($hover: true) {
     --sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);
+    --sbb-flip-card-translate-title-y-hover: #{sbb.px-to-rem-build(-1)};
   }
 }
 
 :host([data-flipped]) {
-  --sbb-flip-card-background-color: var(--sbb-color-midnight);
+  --sbb-flip-card-toggle-icon-transform: rotate(45deg);
   --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-summary-transition-delay: 0s;
-  --sbb-flip-card-details-min-height: fit-content;
 
   ::slotted(sbb-flip-card-summary) {
     --sbb-flip-card-summary-opacity: 0;
@@ -95,6 +95,33 @@
       }
     }
   }
+
+  // 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);
+
+    // 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;
+
+    :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);
+      transition-duration: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x));
+    }
+  }
 }
 
 .sbb-flip-card--toggle-button {
@@ -107,6 +134,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;
 

src/elements/flip-card/flip-card/flip-card.ts

@@ -79,6 +79,7 @@ export class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
   public toggle(): void {
     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();
@@ -107,11 +108,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>
     `;
   }

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')!);
       }),
     );