@sbb-esta/lyne-elements-dev 4.7.0-dev.1773208987 → 4.7.0-dev.1773213760

package/core/styles/core.scss

@@ -110,6 +110,9 @@ $theme: 'standard' !default;
 @use '../../icon-sidebar/icon-sidebar/icon-sidebar.global' as icon-sidebar with (
   $theme: $theme
 );
+@use '../../lead-container/lead-container.global' as lead-container with (
+  $theme: $theme
+);
 @use '../../option/option/option.global' as option with (
   $theme: $theme
 );
@@ -183,6 +186,7 @@ $theme: 'standard' !default;
   @include flip-card-details.base;
   @include footer.base;
   @include icon-sidebar.base;
+  @include lead-container.base;
   @include option.base;
   @include option-hint.base;
   @include optgroup.base;
@@ -303,6 +307,8 @@ $theme: 'standard' !default;
 
   @include mediaqueries.mq($from: ultra) {
     @include sbb-css-tokens.breakpoint-ultra;
+
+    @include lead-container.base-breakpoint-ultra;
   }
 }
 
@@ -316,6 +322,7 @@ $theme: 'standard' !default;
 @include dialog-title.rules;
 @include flip-card-summary.rules;
 @include icon-sidebar.rules;
+@include lead-container.rules;
 @include option.rules;
 @include tab-nav-bar.rules;
 
@@ -530,17 +537,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// 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),
-  > [slot='image'] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
-    --sbb-image-object-fit: cover;
-
-    border-radius: var(--sbb-lead-container-image-border-radius);
-  }
-}
-
 // TODO: Move back to the sbb-message components when the global CSS refactoring happens
 sbb-message {
   > [slot='image']:is(sbb-image, img),

package/core.css

@@ -1478,6 +1478,14 @@
   --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
   --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
   --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-lead-container-background-color: var(--sbb-background-color-1);
+  --sbb-lead-container-image-ratio: 2 / 1;
+  --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
+  --sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
+  --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
+  --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
+  --sbb-lead-container-image-border-radius: 0;
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -1733,6 +1741,8 @@
     --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
     --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
+    --sbb-lead-container-image-ratio: 21 / 9;
+    --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
   }
 }
 
@@ -1809,6 +1819,13 @@ sbb-icon-sidebar-content + sbb-icon-sidebar {
   border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
 }
 
+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);
+  --sbb-image-object-fit: cover;
+  border-radius: var(--sbb-lead-container-image-border-radius);
+}
+
 :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));
@@ -2099,13 +2116,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-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);
-  --sbb-image-object-fit: cover;
-  border-radius: var(--sbb-lead-container-image-border-radius);
-}
-
 sbb-message > [slot=image]:is(sbb-image, img),
 sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: var(--sbb-message-image-border-radius);