diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts index b38f3c042a..e9d3872c85 100644 --- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts +++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.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'; @@ -17,7 +16,7 @@ const addBreadcrumb = (event: Event): void => { .querySelector('sbb-breadcrumb-group'); const breadcrumb = document.createElement('sbb-breadcrumb'); breadcrumb.setAttribute('href', '/'); - breadcrumb.textContent = 'Breadcrumb ' + breadcrumbGroup.children.length; + breadcrumb.textContent = 'Link ' + breadcrumbGroup.children.length; breadcrumbGroup.append(breadcrumb); }; @@ -109,7 +108,7 @@ const defaultArgTypes: ArgTypes = { const defaultArgs: Args = { numberOfBreadcrumbs: 3, - text: 'Breadcrumb', + text: 'Link', href: 'https://github.com/lyne-design-system/lyne-components', target: '_blank', rel: undefined, @@ -133,7 +132,7 @@ const Template = (args): TemplateResult => html` ${createBreadcrumbs(args)} -
+
addBreadcrumb(event)} >Add @@ -159,7 +158,7 @@ export const CollapsedState: StoryObj = { const meta: Meta = { decorators: [ (story) => html` -
+
${story()}
Page content
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` + } + >`, ]; })}