@sbb-esta/lyne-elements-dev 4.7.0-dev.1773033279 → 4.7.0-dev.1773045546

package/core/styles/core.scss

@@ -95,6 +95,15 @@ $theme: 'standard' !default;
   expansion-panel-header with (
   $theme: $theme
 );
+@use '../../flip-card/flip-card/flip-card.global' as flip-card with (
+  $theme: $theme
+);
+@use '../../flip-card/flip-card-details/flip-card-details.global' as flip-card-details with (
+  $theme: $theme
+);
+@use '../../flip-card/flip-card-summary/flip-card-summary.global' as flip-card-summary with (
+  $theme: $theme
+);
 @use '../../footer/footer.global' as footer with (
   $theme: $theme
 );
@@ -167,6 +176,8 @@ $theme: 'standard' !default;
   @include expansion-panel.base;
   @include expansion-panel-content.base;
   @include expansion-panel-header.base;
+  @include flip-card.base;
+  @include flip-card-details.base;
   @include footer.base;
   @include option.base;
   @include option-hint.base;
@@ -265,6 +276,7 @@ $theme: 'standard' !default;
 
     @include chip-group.base-breakpoint-large;
     @include dialog.base-breakpoint-large;
+    @include flip-card.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -298,6 +310,7 @@ $theme: 'standard' !default;
 @include dialog-close-button.rules;
 @include dialog-content.rules;
 @include dialog-title.rules;
+@include flip-card-summary.rules;
 @include option.rules;
 @include tab-nav-bar.rules;
 
@@ -512,19 +525,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-flip-card-summary components when the global CSS refactoring happens
-sbb-flip-card-summary {
-  > [slot='image']:is(sbb-image, img),
-  > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: auto;
-    --sbb-image-object-fit: cover;
-
-    border-radius: 0;
-    display: block;
-    height: 100%;
-  }
-}
-
 // TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
 sbb-lead-container {
   > [slot='image']:is(sbb-image, img, picture),

package/core.css

@@ -1460,6 +1460,14 @@
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-flip-card-background-color: var(--sbb-background-color-4);
+  --sbb-flip-card-border: var(--sbb-border-width-2x);
+  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
+  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-flip-card-min-height: 17.5rem;
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-footer-background-color: var(--sbb-background-color-3);
   --sbb-footer-clock-width: 4.75rem;
   --sbb-footer-color: var(--sbb-color-granite);
@@ -1697,6 +1705,7 @@
     --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large);
     --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
     --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
+    --sbb-flip-card-min-height: 20rem;
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1780,6 +1789,15 @@ sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:sta
   padding-inline-end: 0;
 }
 
+sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
+sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+  --sbb-image-aspect-ratio: auto;
+  --sbb-image-object-fit: cover;
+  border-radius: 0;
+  display: block;
+  height: 100%;
+}
+
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
   --sbb-option-min-height: var(--sbb-size-element-xxs);
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
@@ -2070,15 +2088,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
-sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: auto;
-  --sbb-image-object-fit: cover;
-  border-radius: 0;
-  display: block;
-  height: 100%;
-}
-
 sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
 sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);