@@ -159,7 +158,7 @@ export const CollapsedState: StoryObj = {
const meta: Meta = {
decorators: [
(story) => html`
-
+
diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
index d442da8787..d4d834da53 100644
--- a/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
+++ b/src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts
@@ -1,7 +1,6 @@
import type { InputType } from '@storybook/types';
import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
import { html, TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
import { sbbSpread } from '../../core/dom';
@@ -131,9 +130,7 @@ export const LongContent: StoryObj = {
'icon-name': 'house-small',
text: 'This label name is so long that it needs ellipsis to fit.',
},
- decorators: [
- (story) => html`
${story()}
`,
- ],
+ decorators: [(story) => html`
${story()}
`],
};
export const NoLink: StoryObj = {
@@ -143,7 +140,7 @@ export const NoLink: StoryObj = {
};
const meta: Meta = {
- decorators: [(story) => html`
${story()}
`],
+ decorators: [(story) => html`
${story()}
`],
parameters: {
backgrounds: {
disable: true,
diff --git a/src/components/image/image.scss b/src/components/image/image.scss
index 4a2215fa44..97138c1fba 100644
--- a/src/components/image/image.scss
+++ b/src/components/image/image.scss
@@ -18,7 +18,6 @@
object-fit: cover;
}
-.image__lqip,
.image__img {
position: absolute;
inset: 0;
diff --git a/src/components/image/image.stories.ts b/src/components/image/image.stories.ts
index caa55b7eaf..11ba42f21c 100644
--- a/src/components/image/image.stories.ts
+++ b/src/components/image/image.stories.ts
@@ -2,7 +2,6 @@ import type { InputType } from '@storybook/types';
import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
import isChromatic from 'chromatic';
import { html, TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
import { sbbSpread } from '../core/dom';
import images from '../core/images';
@@ -186,9 +185,7 @@ export const NoCaptionNoRadius: StoryObj = {
};
const meta: Meta = {
- decorators: [
- (story) => html`
${story()}
`,
- ],
+ decorators: [(story) => html`
${story()}
`],
parameters: {
chromatic: { diffThreshold: 0.11, delay: 8000 },
docs: {
diff --git a/src/components/image/image.ts b/src/components/image/image.ts
index 007592ceba..bbeb979133 100644
--- a/src/components/image/image.ts
+++ b/src/components/image/image.ts
@@ -489,11 +489,13 @@ export class SbbImageElement extends LitElement {
html`
`,
+ srcset=${
+ `${imageUrlWithParams}&w=${imageWidth}&h=${imageHeight}&q=${this._config.nonRetinaQuality} ${imageWidth}w, ` +
+ `${imageUrlWithParams}&w=${imageWidth * 2}&h=${imageHeight * 2}&q=${
+ this._config.retinaQuality
+ } ${imageWidth * 2}w`
+ }
+ >`,
];
})}