Merge branch 'refs/heads/main' into docs-sass

# Conflicts:
#	src/elements/core/styles/core.scss

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.0.1](https://github.com/sbb-design-systems/lyne-components/compare/v2.0.0...v2.0.1) (2024-12-12)
+
+
+### Features
+
+* add class generic type param in manifest ([#3292](https://github.com/sbb-design-systems/lyne-components/issues/3292)) ([3d872c1](https://github.com/sbb-design-systems/lyne-components/commit/3d872c11fa6e8bd9be3750cce1a8d42458064d30))
+
+
+### Bug Fixes
+
+* **sbb-message:** support the use of `figure` as image ([#3294](https://github.com/sbb-design-systems/lyne-components/issues/3294)) ([1d64853](https://github.com/sbb-design-systems/lyne-components/commit/1d64853ad20155c07f8c07af76bbe774b519aa58))
+* **sbb-radio-button-panel:** remove extension clause in mixin which cause incorrect manifest generation ([#3288](https://github.com/sbb-design-systems/lyne-components/issues/3288)) ([b5457a7](https://github.com/sbb-design-systems/lyne-components/commit/b5457a77f260d48e3a151c88b6c815c81df241c8))
+* **sbb-teaser:** fix image related issues ([#3293](https://github.com/sbb-design-systems/lyne-components/issues/3293)) ([e6f517b](https://github.com/sbb-design-systems/lyne-components/commit/e6f517bbf8b42b96777193347860c315c457a6be))
+
+
+### Miscellaneous Chores
+
+* release 2.0.1 ([2a43d06](https://github.com/sbb-design-systems/lyne-components/commit/2a43d0688e95c8bbfd87c91025eea59dd66bd769))
+
 ## [2.0.0](https://github.com/sbb-design-systems/lyne-components/compare/v1.14.0...v2.0.0) (2024-12-11)
 
 

package.json

@@ -132,7 +132,7 @@
     "prettier": "3.4.2",
     "react": "19.0.0",
     "rollup-plugin-postcss-lit": "2.1.0",
-    "sass": "1.82.0",
+    "sass": "1.83.0",
     "sinon": "19.0.2",
     "storybook": "8.4.7",
     "stylelint": "16.11.0",

src/elements/core/mixins/form-associated-mixin.ts

@@ -3,7 +3,7 @@ import { property, state } from 'lit/decorators.js';
 
 import type { AbstractConstructor } from './constructor.js';
 
-export declare abstract class SbbFormAssociatedMixinType<V = string> extends LitElement {
+export declare abstract class SbbFormAssociatedMixinType<V = string> {
   public get form(): HTMLFormElement | null;
   public get name(): string;
   public set name(value: string);

src/elements/core/styles/core.scss

@@ -162,8 +162,8 @@ img {
 
 // 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) {
+  > [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);
@@ -174,8 +174,8 @@ sbb-container {
 
 // 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) {
+  > [slot='image']:is(sbb-image, img),
+  > [slot='image'] :is(sbb-image, img) {
     --sbb-image-aspect-ratio: auto;
     --sbb-image-object-fit: cover;
 
@@ -187,15 +187,23 @@ sbb-flip-card-summary {
 
 // 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) {
+  > [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);
   }
 }
 
+// TODO: Move back to the sbb-message components when the global CSS refactoring happens
+sbb-message {
+  > [slot='image']:is(sbb-image, img),
+  > [slot='image'] :is(sbb-image, img) {
+    border-radius: var(--sbb-message-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
@@ -213,8 +221,7 @@ sbb-lead-container {
     }
   }
 
-  [slot='image']:is(sbb-image, img),
-  [slot='image'] :is(sbb-image, img) {
+  :is(sbb-image, img) {
     will-change: filter;
     filter: brightness(var(--sbb-teaser-image-brightness, 1));
     transition: filter var(--sbb-teaser-image-animation-duration)
@@ -237,18 +244,13 @@ sbb-lead-container {
 }
 
 // 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);
-  }
+sbb-teaser :is(sbb-image, img) {
+  --sbb-image-object-fit: cover;
+  --sbb-image-aspect-ratio: 4 / 3;
 
-  :is(sbb-image, img) {
-    --sbb-image-object-fit: cover;
-    --sbb-image-aspect-ratio: 4 / 3;
-  }
+  transition-property: filter, scale;
+  will-change: filter, scale;
+  scale: var(--sbb-teaser-scale, 1);
 }
 
 // TODO: Move back to the teaser-hero components when the global CSS refactoring happens

src/elements/message/message.scss

@@ -6,6 +6,7 @@
 :host {
   --sbb-message-subtitle-color: var(--sbb-color-granite);
   --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
+  --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
   --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
   --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
 
@@ -26,7 +27,8 @@
 }
 
 ::slotted([slot='image']) {
-  margin-block: var(--sbb-message-image-margin-block);
+  display: block;
+  margin-block: var(--sbb-message-image-margin-block) !important; // overrides '.sbb-figure' margin
   width: 100%;
 }
 

src/elements/message/message.visual.spec.ts

@@ -4,32 +4,66 @@ import { describeViewports, visualDiffDefault } from '../core/testing/private.js
 import { waitForImageReady } from '../core/testing.js';
 
 import './message.js';
+import '../chip-label.js';
 import '../image.js';
 import '../button/secondary-button.js';
 
 const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png');
 
+const imgTestCases = [
+  {
+    title: 'with sbb-image',
+    imgSelector: 'sbb-image',
+    imgTemplate: () => html`<sbb-image slot="image" image-src=${imageUrl}></sbb-image>`,
+  },
+  {
+    title: 'with img tag',
+    imgSelector: 'img',
+    imgTemplate: () => html`<img slot="image" src=${imageUrl} alt="" />`,
+  },
+  {
+    title: 'with figure_sbb-image',
+    imgSelector: 'sbb-image',
+    imgTemplate: () =>
+      html`<figure class="sbb-figure" slot="image">
+        <sbb-image image-src=${imageUrl}></sbb-image>
+        <sbb-chip-label class="sbb-figure-overlap-start-end">AI generated</sbb-chip-label>
+      </figure>`,
+  },
+  {
+    title: 'with figure_img',
+    imgSelector: 'img',
+    imgTemplate: () =>
+      html`<figure class="sbb-figure" slot="image">
+        <img slot="image" src=${imageUrl} alt="" />
+        <sbb-chip-label class="sbb-figure-overlap-start-end">AI generated</sbb-chip-label>
+      </figure>`,
+  },
+];
+
 describe(`sbb-message`, () => {
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    it(
-      'default',
-      visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(html`
-          <sbb-message title-content="Unfortunately, an error has occurred.">
-            <sbb-image slot="image" image-src=${imageUrl}></sbb-image>
-            <p slot="subtitle">Please reload the page or try your search again later.</p>
-            <p slot="legend">Error code: 0001</p>
-            <sbb-secondary-button
-              slot="action"
-              icon-name="arrows-circle-small"
-              size="m"
-            ></sbb-secondary-button>
-          </sbb-message>
-        `);
+    for (const testCase of imgTestCases) {
+      it(
+        `default ${testCase.title}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-message title-content="Unfortunately, an error has occurred.">
+              ${testCase.imgTemplate()}
+              <p slot="subtitle">Please reload the page or try your search again later.</p>
+              <p slot="legend">Error code: 0001</p>
+              <sbb-secondary-button
+                slot="action"
+                icon-name="arrows-circle-small"
+                size="m"
+              ></sbb-secondary-button>
+            </sbb-message>
+          `);
 
-        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
-      }),
-    );
+          await waitForImageReady(setup.snapshotElement.querySelector(testCase.imgSelector)!);
+        }),
+      );
+    }
 
     it(
       'no image',

src/elements/radio-button/common/radio-button-common.spec.ts

@@ -604,7 +604,9 @@ describe(`radio-button common behaviors`, () => {
             });
 
             it('should be sorted in DOM order', async () => {
-              const group1Set = radioButtonRegistry.get(form)!.get('sbb-group-1')!;
+              const group1Set = radioButtonRegistry
+                .get(form)!
+                .get('sbb-group-1')! as unknown as Set<Element>;
               let group1Radios = Array.from(form.querySelectorAll(selector));
 
               // Assert the order is the correct

src/elements/radio-button/radio-button-panel/radio-button-panel.ts

@@ -12,7 +12,6 @@ import { getOverride, slotState } from '../../core/decorators.js';
 import { isLean } from '../../core/dom.js';
 import {
   panelCommonStyle,
-  type SbbFormAssociatedRadioButtonMixinType,
   SbbPanelMixin,
   type SbbPanelSize,
   SbbUpdateSchedulerMixin,
@@ -87,9 +86,7 @@ class SbbRadioButtonPanelElement extends SbbPanelMixin(
   /**
    * As an exception, radio-panels with an expansion-panel attached are not checked automatically when navigating by keyboard
    */
-  protected override async navigateByKeyboard(
-    next: SbbFormAssociatedRadioButtonMixinType,
-  ): Promise<void> {
+  protected override async navigateByKeyboard(next: SbbRadioButtonPanelElement): Promise<void> {
     if (!this._hasSelectionExpansionPanelElement) {
       await super.navigateByKeyboard(next);
     } else {

src/elements/teaser/readme.md

@@ -9,9 +9,7 @@ Simple teaser example:
   title-content="Title"
   chip-content="Chip label"
 >
-  <figure slot="image" class="sbb-figure">
-    <img src="..." alt="400x300" />
-  </figure>
+  <img slot="image" src="..." alt="400x300" />
   A brief description.
 </sbb-teaser>
 ```

src/elements/teaser/teaser.scss

@@ -89,16 +89,17 @@
 
 ::slotted([slot='image']) {
   width: #{sbb.px-to-rem-build(300)};
+  display: block;
 }
 
 .sbb-teaser__image-wrapper {
   flex-shrink: 0;
   overflow: hidden;
   border-radius: var(--sbb-teaser-border-radius);
-  transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing);
+  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);
 
   @include sbb.hover-mq($hover: true) {
-    .sbb-teaser__wrapper:hover & {
+    :host(:hover) & {
       @include sbb.shadow-level-9-hard;
     }
   }

src/elements/teaser/teaser.stories.ts

@@ -102,9 +102,7 @@ const TemplateDefault = ({ description, ...remainingArgs }: Args): TemplateResul
 const TemplateDefaultFixedWidth = ({ description, ...remainingArgs }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)} style="width:400px">
-      <figure slot="image" class="sbb-figure">
-        <img src=${placeholderImage} alt="400x300" />
-      </figure>
+      <img src=${placeholderImage} alt="400x300" slot="image" />
       ${description}
     </sbb-teaser>
   `;
@@ -113,9 +111,13 @@ const TemplateDefaultFixedWidth = ({ description, ...remainingArgs }: Args): Tem
 const TemplateCustom = ({ description, ...remainingArgs }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)}>
-      <figure slot="image" class="sbb-figure" style="width: 200px;">
-        <img src=${placeholderImage} alt="200x100" class="sbb-image-2-1" />
-      </figure>
+      <img
+        src=${placeholderImage}
+        alt="200x100"
+        class="sbb-image-2-1"
+        style="width: 200px;"
+        slot="image"
+      />
       ${description}
     </sbb-teaser>
   `;
@@ -129,9 +131,7 @@ const TemplateSlots = ({
 }: Args): TemplateResult => {
   return html`
     <sbb-teaser ${sbbSpread(remainingArgs)}>
-      <figure slot="image" class="sbb-figure">
-        <img src=${placeholderImage} alt="400x300" />
-      </figure>
+      <img src=${placeholderImage} alt="400x300" slot="image" />
       <span slot="chip">${chipContent}</span>
       <span slot="title">${titleContent}</span>
       ${description}