feat(sbb-image): support overlapping sbb-chip-label

src/elements/container/container/container.scss

@@ -4,6 +4,8 @@
 @include sbb.box-sizing;
 
 :host {
+  --sbb-container-background-border-radius: 0;
+
   display: block;
 }
 
@@ -28,6 +30,12 @@
   position: relative;
 }
 
+:host(:not([expanded], [background-expanded])) {
+  @include sbb.mq($from: ultra) {
+    --sbb-container-background-border-radius: var(--sbb-border-radius-4x);
+  }
+}
+
 .sbb-container {
   background-color: var(--sbb-container-background-color);
   padding: var(--sbb-container-padding);
@@ -62,22 +70,8 @@
 }
 
 ::slotted([slot='image']) {
-  --sbb-image-border-radius: 0;
-
   position: absolute;
   inset: 0;
-
-  :host(:not([expanded], [background-expanded])) & {
-    @include sbb.mq($from: ultra) {
-      --sbb-image-border-radius: var(--sbb-border-radius-4x);
-
-      border-radius: var(--sbb-border-radius-4x);
-    }
-  }
-}
-
-::slotted(img[slot='image']) {
-  object-fit: cover;
   height: 100%;
   width: 100%;
 }

src/elements/container/container/container.visual.spec.ts

@@ -11,6 +11,7 @@ import { waitForImageReady } from '../../core/testing.js';
 
 import '../../button.js';
 import '../../card.js';
+import '../../chip-label.js';
 import '../../image.js';
 import '../../title.js';
 import './container.js';
@@ -25,17 +26,35 @@ describe(`sbb-container`, () => {
 
   const images = [
     {
+      name: 'sbb-image',
       selector: 'sbb-image',
       image: html`<sbb-image slot="image" image-src=${imageUrl}></sbb-image>`,
     },
     {
+      name: 'figure-sbb-image',
+      selector: 'sbb-image',
+      image: html`<figure slot="image" class="sbb-figure">
+        <sbb-image image-src=${imageUrl}></sbb-image>
+        <sbb-chip-label class="sbb-figure-overlap-start-end">AI generated</sbb-chip-label>
+      </figure>`,
+    },
+    {
+      name: 'img',
       selector: 'img',
       image: html`<img
       slot="image"
       src=${imageBase64}
       alt=''
     ></img>`,
     },
+    {
+      name: 'figure-img',
+      selector: 'img',
+      image: html`<figure slot="image" class="sbb-figure">
+        <img src=${imageBase64} alt="" />
+        <sbb-chip-label class="sbb-figure-overlap-start-end">AI generated</sbb-chip-label>
+      </figure>`,
+    },
   ];
 
   const containerContent = (): TemplateResult => html`
@@ -88,7 +107,7 @@ describe(`sbb-container`, () => {
         describe(`expanded=${expanded}`, () => {
           for (const image of images) {
             it(
-              `slotted=${image.selector}`,
+              `slotted=${image.name}`,
               visualDiffDefault.with(async (setup) => {
                 await setup.withFixture(
                   html`<sbb-container ?expanded=${expanded}>
@@ -146,23 +165,24 @@ describe(`sbb-container`, () => {
         }),
       );
 
-      it(
-        `background-image`,
-        visualDiffDefault.with(async (setup) => {
-          await setup.withFixture(
-            html`
-              <sbb-container ?background-expanded=${backgroundExpanded}>
-                ${backgroundImageContent}
-                <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
-              </sbb-container>
-            `,
-            wrapperStyles,
-          );
+      for (const image of images) {
+        it(
+          `background-image slotted=${image.name}`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(
+              html`
+                <sbb-container ?background-expanded=${backgroundExpanded}>
+                  ${backgroundImageContent} ${image.image}
+                </sbb-container>
+              `,
+              wrapperStyles,
+            );
 
-          await setViewport(viewport);
-          await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-        }),
-      );
+            await setViewport(viewport);
+            await waitForImageReady(setup.snapshotElement.querySelector(image.selector)!);
+          }),
+        );
+      }
     });
   }
 });

src/elements/container/container/readme.md

@@ -19,6 +19,21 @@ use CSS object-position for slotted `img`, or `--sbb-image-object-position` vari
 If an image is present, the container receives a pre-defined padding.
 It's possible to override the padding by using the CSS variable `--sbb-container-padding`.
 
+Optionally, you can add an overlapping `sbb-chip-label` by wrapping the `sbb-image` in a `figure` tag (see [sbb-image doc](/docs/elements-sbb-image--docs#utility%classes)).
+
+```html
+<sbb-container>
+  <figure class="sbb-figure" slot="image">
+    <sbb-image
+      image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Bahnhof-Luzern.jpg"
+      alt="Station of Lucerne from outside"
+    ></sbb-image>
+    <sbb-chip-label class="sbb-figure-overlap-start-start">...</sbb-chip-label>
+  </figure>
+  ...
+</sbb-container>
+```
+
 ## Style
 
 By default `sbb-container` uses the `page spacing` defined in the [layout documentation](/docs/styles-layout--docs). Optionally the user can use the `expanded` property (default: `false`) to switch to the `page spacing expanded` layout.

src/elements/core/styles/_index.scss

@@ -9,6 +9,7 @@
 @forward './mixins/chip';
 @forward './mixins/font-face';
 @forward './mixins/helpers';
+@forward './mixins/image';
 @forward './mixins/inputs';
 @forward './mixins/layout';
 @forward './mixins/link';

src/elements/core/styles/core.scss

@@ -154,6 +154,121 @@ input[data-sbb-time-input] {
   }
 }
 
+img {
+  aspect-ratio: var(--sbb-image-aspect-ratio);
+  object-fit: var(--sbb-image-object-fit);
+  object-position: var(--sbb-image-object-position);
+}
+
+// TODO: Move back to the sbb-container components when the global css refactoring happens
+sbb-container {
+  [slot='image']:is(sbb-image, img),
+  [slot='image'] :is(sbb-image, img) {
+    --sbb-image-object-fit: cover;
+
+    border-radius: var(--sbb-container-background-border-radius);
+    height: 100%;
+    position: absolute;
+  }
+}
+
+// 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) {
+    --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),
+  [slot='image'] :is(sbb-image, img, picture) {
+    --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
+    --sbb-image-object-fit: cover;
+
+    border-radius: var(--sbb-lead-container-image-border-radius);
+  }
+}
+
+// Target the slotted `sbb-image` which are generally wrapped by a <figure> (therefore are not reachable with the :slotted)
+// Apply the brightness effect on mouse hover
+// TODO: Move back to the teaser components when the global css refactoring happens
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
+  --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
+  --sbb-teaser-image-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
+
+  &:hover {
+    @include mediaqueries.hover-mq($hover: true) {
+      --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
+    }
+  }
+
+  [slot='image']:is(sbb-image, img),
+  [slot='image'] :is(sbb-image, img) {
+    will-change: filter;
+    filter: brightness(var(--sbb-teaser-image-brightness, 1));
+    transition: filter var(--sbb-teaser-image-animation-duration)
+      var(--sbb-teaser-image-animation-easing);
+  }
+}
+
+// TODO: Move back to the teaser components when the global css refactoring happens
+:is(sbb-teaser-product, sbb-teaser-product-static) {
+  :is(sbb-image, img) {
+    border-radius: 0; // Reset sbb-image border radius in order to control it from teaser product.
+
+    --sbb-image-object-fit: cover;
+    --sbb-image-aspect-ratio: 16 / 9;
+  }
+
+  img {
+    place-self: stretch;
+  }
+}
+
+// TODO: Move back to the teaser components when the global css refactoring happens
+:is(sbb-teaser) {
+  [slot='image']:is(sbb-image, img),
+  [slot='image'] :is(sbb-image, img) {
+    transition-property: filter, scale;
+    will-change: filter, scale;
+    scale: var(--sbb-teaser-scale, 1);
+  }
+
+  :is(sbb-image, img) {
+    --sbb-image-object-fit: cover;
+    --sbb-image-aspect-ratio: 4 / 3;
+  }
+}
+
+// TODO: Move back to the teaser-hero components when the global css refactoring happens
+:is(sbb-teaser-hero) {
+  :is(sbb-image, img) {
+    --sbb-image-aspect-ratio: 1 / 1;
+
+    border-radius: 0;
+
+    @include mediaqueries.mq($from: small) {
+      --sbb-image-aspect-ratio: 16 / 9;
+    }
+  }
+
+  img {
+    width: 100%;
+    display: block;
+  }
+}
+
 // TODO: move to train formation after css refactoring
 sbb-train-formation:has(sbb-train[direction-label]) {
   --sbb-train-formation-reserve-spacing-display: block;

src/elements/core/styles/image.scss

@@ -0,0 +1,66 @@
+@use './mixins/typo';
+@use './mixins/image';
+
+.sbb-figure {
+  @include image.figure;
+
+  :is(img, sbb-image, .sbb-image) {
+    @include image.figure-image;
+  }
+
+  :is(figcaption, .sbb-caption) {
+    @include image.figure-caption;
+  }
+
+  // Utility classes for placing elements over an image (eg. 'sbb-figure-overlap-start-start')
+  :is(
+    .sbb-figure-overlap-start-start,
+    .sbb-figure-overlap-start-end,
+    .sbb-figure-overlap-end-start,
+    .sbb-figure-overlap-end-end
+  ) {
+    @include image.figure-overlap-base;
+  }
+
+  $alignments: start, end;
+  @each $row-alignment in $alignments {
+    @each $column-alignment in $alignments {
+      .sbb-figure-overlap-#{$row-alignment}-#{$column-alignment} {
+        @include image.figure-overlap($row-alignment, $column-alignment);
+      }
+    }
+  }
+}
+
+// Utility classes for the aspect ratio (eg. 'sbb-image-16-9')
+$aspects-ratio: (
+  'free': 'auto',
+  '1-1': '1 / 1',
+  '1-2': '1 / 2',
+  '2-1': '2 / 1',
+  '2-3': '2 / 3',
+  '3-2': '3 / 2',
+  '3-4': '3 / 4',
+  '4-3': '4 / 3',
+  '4-5': '4 / 5',
+  '5-4': '5 / 4',
+  '9-16': '9 / 16',
+  '16-9': '16 / 9',
+);
+@each $name, $ratio in $aspects-ratio {
+  :is(sbb-image, img).sbb-image-#{$name} {
+    --sbb-image-aspect-ratio: #{$ratio};
+  }
+}
+
+// Utility classes for the border radius (eg. 'sbb-image-border-radius-none')
+$border-radius: (
+  'default': 'var(--sbb-border-radius-4x)',
+  'none': '0',
+  'round': 'var(--sbb-border-radius-infinity)',
+);
+@each $name, $radius in $border-radius {
+  :is(img, sbb-image).sbb-image-border-radius-#{$name} {
+    border-radius: #{$radius};
+  }
+}

src/elements/core/styles/mixins/image.scss

@@ -0,0 +1,34 @@
+@use './typo';
+
+@mixin figure {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 100%;
+  grid-auto-rows: auto;
+  margin: 0;
+}
+
+@mixin figure-image {
+  grid-row: 1;
+  grid-column: 1;
+  width: 100%;
+}
+
+@mixin figure-caption {
+  grid-row: 2;
+  grid-column: 1;
+  padding-block-start: var(--sbb-spacing-fixed-4x);
+  @include typo.text-xs--regular;
+}
+
+@mixin figure-overlap-base {
+  position: relative;
+  order: 1; // Alternative to z-index
+  grid-row: 1;
+  grid-column: 1;
+  margin: var(--sbb-spacing-responsive-xxxs);
+}
+
+@mixin figure-overlap($row-alignment, $column-alignment) {
+  place-self: #{$row-alignment} #{$column-alignment};
+}