srcdev-nuxt-components 9.5.7 → 9.6.1

package/app/components/03.organisms/image-galleries/slider-gallery/SliderGallery.vue

@@ -25,7 +25,14 @@
           :data-text-brightness="item.textBrightness"
           :data-has-text="hasSlideText(item) ? '' : undefined"
         >
-          <NuxtImg :src="item.src" :alt="item.alt" @load="handleImageLoad(index)" @error="handleImageError(index)" />
+          <NuxtImg
+            :src="item.src"
+            :alt="item.alt"
+            width="1920"
+            height="1080"
+            @load="handleImageLoad(index)"
+            @error="handleImageError(index)"
+          />
           <div class="slider-gallery-item-content" :class="item.textBrightness">
             <div v-if="item.stylist" class="slider-gallery-author">{{ item.stylist }}</div>
             <div v-if="item.title" class="slider-gallery-title">{{ item.title }}</div>
@@ -41,7 +48,7 @@
       <div ref="sliderGalleryThumbnailsList" class="slider-gallery-thumbnails" aria-hidden="true">
         <div v-for="(item, index) in galleryData" :key="index" class="slider-gallery-item">
           <div class="slider-gallery-thumbnail-overlay">
-            <NuxtImg :src="item.src" alt="" loading="lazy" />
+            <NuxtImg :src="item.src" alt="" width="640" height="940" loading="lazy" />
             <div class="slider-gallery-item-content" :class="item.textBrightness">
               <div v-if="item.thumbnail?.title" class="slider-gallery-title">{{ item.thumbnail.title }}</div>
               <div v-if="item.thumbnail?.description" class="slider-gallery-description">
@@ -138,6 +145,12 @@ const prefersReducedMotion = () =>
   typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 const shouldAutoRun = () => props.autoRun && !prefersReducedMotion();
 
+const finiteOr = (value: number, fallback: number) => (Number.isFinite(value) ? value : fallback);
+const safeAnimationDuration = computed(() => Math.max(0, finiteOr(props.animationDuration, 3000)));
+const safeAutoRunInterval = computed(() =>
+  Math.max(1000, safeAnimationDuration.value, finiteOr(props.autoRunInterval, 7000))
+);
+
 onMounted(async () => {
   await nextTick();
 
@@ -203,12 +216,12 @@ function scheduleAutoRun() {
   if (runNextAuto) clearTimeout(runNextAuto);
   runNextAuto = setTimeout(() => {
     if (!shouldAutoRun() || isLoading.value) return;
-    if (isPaused.value) {
+    if (isPaused.value || transitionRunning.value) {
       scheduleAutoRun();
       return;
     }
     doNext();
-  }, props.autoRunInterval);
+  }, safeAutoRunInterval.value);
 }
 
 function showSlider(type: "next" | "prev") {
@@ -249,7 +262,7 @@ function showSlider(type: "next" | "prev") {
       sliderGalleryWrapper.value.querySelectorAll(".is-prepended").forEach((el) => el.classList.remove("is-prepended"));
     }
     transitionRunning.value = false;
-  }, props.animationDuration);
+  }, safeAnimationDuration.value);
 
   scheduleAutoRun();
 }
@@ -286,13 +299,13 @@ onBeforeUnmount(() => {
 <style lang="css">
 @layer components {
   .slider-gallery {
-    --_animation-duration: v-bind(animationDuration + "ms");
+    --_animation-duration: v-bind(safeAnimationDuration + "ms");
     --_accent: var(--slider-gallery-accent, #f1683a);
     --_thumbnail-width: var(--slider-gallery-thumbnail-width, 100px);
     --_thumbnail-height: var(--slider-gallery-thumbnail-height, 165px);
 
     height: var(--slider-gallery-height, 100svh);
-    width: 100vw;
+    width: var(--slider-gallery-width, 100vw);
     overflow: hidden;
     position: absolute;
     inset: 0;
@@ -333,6 +346,10 @@ onBeforeUnmount(() => {
       p {
         font-size: 1.2em;
         font-weight: 500;
+        max-inline-size: 100%;
+        padding-inline: 1.6rem;
+        text-align: center;
+        overflow-wrap: anywhere;
       }
     }
 
@@ -435,14 +452,41 @@ onBeforeUnmount(() => {
           padding-right: 30%;
           box-sizing: border-box;
           text-shadow: 0 5px 10px #0004;
+          overflow-wrap: anywhere;
 
           @container (width < 678px) {
             padding-right: 0;
           }
 
+          .slider-gallery-author,
+          .slider-gallery-title,
+          .slider-gallery-topic,
+          .slider-gallery-description {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+
           .slider-gallery-author {
             font-weight: bold;
             letter-spacing: 10px;
+            -webkit-line-clamp: var(--slider-gallery-author-line-clamp, none);
+            line-clamp: var(--slider-gallery-author-line-clamp, none);
+          }
+
+          .slider-gallery-title {
+            -webkit-line-clamp: var(--slider-gallery-title-line-clamp, none);
+            line-clamp: var(--slider-gallery-title-line-clamp, none);
+          }
+
+          .slider-gallery-topic {
+            -webkit-line-clamp: var(--slider-gallery-topic-line-clamp, none);
+            line-clamp: var(--slider-gallery-topic-line-clamp, none);
+          }
+
+          .slider-gallery-description {
+            -webkit-line-clamp: var(--slider-gallery-description-line-clamp, none);
+            line-clamp: var(--slider-gallery-description-line-clamp, none);
           }
 
           .slider-gallery-title,
@@ -466,7 +510,9 @@ onBeforeUnmount(() => {
               place-items: center;
               min-width: 130px;
               min-height: 40px;
+              max-inline-size: 100%;
               padding-inline: 1.2rem;
+              box-sizing: border-box;
               background-color: var(--slider-gallery-cta-background, #99999975);
               border: 1px solid var(--slider-gallery-cta-border-colour, #fff);
               color: var(--slider-gallery-cta-colour, #fff);
@@ -528,13 +574,25 @@ onBeforeUnmount(() => {
           bottom: 10px;
           left: 10px;
           right: 10px;
+          overflow-wrap: anywhere;
+
+          .slider-gallery-title,
+          .slider-gallery-description {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
 
           .slider-gallery-title {
             font-weight: 500;
+            -webkit-line-clamp: var(--slider-gallery-thumbnail-title-line-clamp, 2);
+            line-clamp: var(--slider-gallery-thumbnail-title-line-clamp, 2);
           }
 
           .slider-gallery-description {
             font-weight: 300;
+            -webkit-line-clamp: var(--slider-gallery-thumbnail-description-line-clamp, 2);
+            line-clamp: var(--slider-gallery-thumbnail-description-line-clamp, 2);
           }
         }
       }

package/app/components/03.organisms/image-galleries/slider-gallery/stories/SliderGallery.stories.ts

@@ -1,11 +1,54 @@
+import { computed, ref } from "vue";
 import SliderGallery from "../SliderGallery.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
-import type { IGalleryData } from "~/types/components";
+import type { IGalleryData, MediaCanvas } from "~/types/components";
 
-const meta: Meta<typeof SliderGallery> = {
+type LineClamp = "none" | "1" | "2" | "3" | "4";
+
+// Story-only args: each drives a CSS token, not a SliderGallery prop. See the argTypes entries.
+const lineClampTokens = {
+  authorLineClamp: { token: "--slider-gallery-author-line-clamp", label: "Author (stylist)", fallback: "none" },
+  titleLineClamp: { token: "--slider-gallery-title-line-clamp", label: "Title", fallback: "none" },
+  topicLineClamp: { token: "--slider-gallery-topic-line-clamp", label: "Topic (category)", fallback: "none" },
+  descriptionLineClamp: { token: "--slider-gallery-description-line-clamp", label: "Description", fallback: "none" },
+  thumbnailTitleLineClamp: { token: "--slider-gallery-thumbnail-title-line-clamp", label: "Thumbnail title", fallback: "2" },
+  thumbnailDescriptionLineClamp: {
+    token: "--slider-gallery-thumbnail-description-line-clamp",
+    label: "Thumbnail description",
+    fallback: "2",
+  },
+} as const;
+
+type LineClampArg = keyof typeof lineClampTokens;
+
+type StoryArgs = InstanceType<typeof SliderGallery>["$props"] & Record<LineClampArg, LineClamp>;
+
+const lineClampArgTypes = Object.fromEntries(
+  Object.entries(lineClampTokens).map(([arg, { token, label, fallback }]) => [
+    arg,
+    {
+      name: `${label} line clamp`,
+      control: "select",
+      options: ["none", "1", "2", "3", "4"] satisfies LineClamp[],
+      description:
+        `**Story control, not a prop.** Sets the \`${token}\` CSS token on a wrapper so you can try it here. ` +
+        `To use it in an app, set the token in your own CSS, e.g. \`.hero { ${token}: 2; }\`. ` +
+        `\`1\` is single-line ellipsis, \`none\` shows everything.`,
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: fallback } },
+    },
+  ])
+);
+
+const lineClampArgs = Object.fromEntries(
+  Object.entries(lineClampTokens).map(([arg, { fallback }]) => [arg, fallback])
+) as Record<LineClampArg, LineClamp>;
+
+const meta: Meta<StoryArgs> = {
   title: "Organisms/Image Galleries/Slider Gallery",
   component: SliderGallery,
   argTypes: {
+    ...lineClampArgTypes,
     autoRun: {
       control: { type: "boolean" },
       description: "Automatically advance to the next slide",
@@ -40,6 +83,7 @@ const meta: Meta<typeof SliderGallery> = {
     },
   },
   args: {
+    ...lineClampArgs,
     autoRun: true,
     autoRunInterval: 7000,
     animationDuration: 3000,
@@ -64,7 +108,7 @@ const meta: Meta<typeof SliderGallery> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof SliderGallery>;
+type Story = StoryObj<StoryArgs>;
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
@@ -123,17 +167,105 @@ const sampleSlides: IGalleryData[] = [
   },
 ];
 
+const longGerman =
+  "Donaudampfschifffahrtsgesellschaftskapitänsmützenbandherstellungsbetriebsgenossenschaftsvorsitzender";
+const longUrl =
+  "https://example.com/a/very/long/path/that/never/breaks/because/it/has/no/spaces/at/all?utm_source=newsletter&utm_medium=email&utm_campaign=autumn-collection-2026-final-final-v3";
+const longParagraph =
+  "Eine ausgesprochen lange Beschreibung, wie sie ein CMS liefert, wenn niemand die Zeichenanzahl prüft. ".repeat(8);
+
+const stressSlides: IGalleryData[] = [
+  {
+    src: "https://picsum.photos/seed/stress1/1920/1080",
+    alt: "Long German copy in every field",
+    stylist: `STYLISTIN ${longGerman.toUpperCase()}`,
+    title: `${longGerman} und Freunde`,
+    category: "Haarverlängerungen, Strähnchen und vollständige Farbkorrekturen",
+    description: longParagraph,
+    thumbnail: { title: longGerman, description: longParagraph },
+    textBrightness: "light",
+    href: longUrl,
+  },
+  {
+    src: "https://picsum.photos/seed/stress2/1920/1080",
+    alt: "Emoji and HTML-like text",
+    stylist: "💇‍♀️✨ SALON 🎉",
+    title: "<script>alert('xss')</script>",
+    category: "<b>not bold</b> &amp; &lt;tags&gt;",
+    description: "🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈",
+    thumbnail: { title: "😀 Emoji first", description: "<img src=x onerror=alert(1)>" },
+    textBrightness: "dark",
+    href: "#emoji",
+  },
+  {
+    src: "https://picsum.photos/seed/stress3/1920/1080",
+    alt: "صورة لصالون تصفيف الشعر",
+    stylist: "مصففة الشعر",
+    title: "تسريحات شعر جديدة لموسم الخريف",
+    category: "تلوين الشعر",
+    description: "وصف طويل باللغة العربية يمتد عبر عدة أسطر للتحقق من أن النص من اليمين إلى اليسار يعرض بشكل صحيح.",
+    thumbnail: { title: "تسريحات", description: "تلوين الشعر" },
+    textBrightness: "light",
+  },
+  {
+    src: "https://example.invalid/this-image-does-not-exist.jpg",
+    alt: "Broken image URL: the alt text should show instead",
+    stylist: "A",
+    title: "B",
+    category: "C",
+    description: "",
+    thumbnail: { title: "", description: "" },
+    textBrightness: "dark",
+    href: "",
+  },
+  {
+    src: "https://picsum.photos/seed/stress5/1920/1080",
+    alt: "",
+    textBrightness: "light",
+  },
+  {
+    src: "https://picsum.photos/seed/stress6/1920/1080",
+    alt: "Unbroken URL as description",
+    title: "Link soup",
+    description: longUrl,
+    thumbnail: { title: longUrl, description: longUrl },
+    textBrightness: "light",
+    href: "#link-soup",
+  },
+  ...Array.from({ length: 24 }, (_, index): IGalleryData => ({
+    src: `https://picsum.photos/seed/stress-many-${index}/1920/1080`,
+    alt: `Filler slide ${index + 7}`,
+    title: `Slide ${index + 7}`,
+    thumbnail: { title: `Slide ${index + 7}`, description: "Filler" },
+    textBrightness: "light",
+  })),
+];
+
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() =>
+    Object.fromEntries(Object.entries(args).filter(([arg]) => !(arg in lineClampTokens)))
+  );
+  const tokenStyles = computed(() =>
+    Object.fromEntries(
+      Object.entries(lineClampTokens).map(([arg, { token }]) => [token, args[arg as LineClampArg]])
+    )
+  );
+  return { componentArgs, tokenStyles };
+}
+
+const renderWith = (slides: IGalleryData[]) => (args: StoryArgs) => ({
+  components: { SliderGallery },
+  setup() {
+    const galleryData = ref<IGalleryData[]>(slides);
+    return { ...useStorySetup(args), galleryData };
+  },
+  template: `<div :style="tokenStyles"><SliderGallery v-bind="componentArgs" v-model:gallery-data="galleryData" /></div>`,
+});
+
 export const Default: Story = {
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>(sampleSlides);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith(sampleSlides),
 };
 
 export const AutoRunDisabled: Story = {
@@ -141,14 +273,7 @@ export const AutoRunDisabled: Story = {
   args: {
     autoRun: false,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>(sampleSlides);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith(sampleSlides),
   parameters: {
     docs: {
       description: {
@@ -164,14 +289,7 @@ export const FastTransition: Story = {
     animationDuration: 500,
     autoRunInterval: 3000,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>(sampleSlides);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith(sampleSlides),
 };
 
 export const SlowTransition: Story = {
@@ -180,14 +298,7 @@ export const SlowTransition: Story = {
     animationDuration: 5000,
     autoRunInterval: 10000,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>(sampleSlides);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith(sampleSlides),
 };
 
 export const SingleSlide: Story = {
@@ -195,14 +306,7 @@ export const SingleSlide: Story = {
   args: {
     autoRun: false,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>([sampleSlides[0]!]);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith([sampleSlides[0]!]),
   parameters: {
     docs: {
       description: {
@@ -217,18 +321,11 @@ export const MinimalSlideData: Story = {
   args: {
     autoRun: false,
   },
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>([
-        { src: "https://picsum.photos/seed/min1/1920/1080", alt: "Image one", textBrightness: "light" },
-        { src: "https://picsum.photos/seed/min2/1920/1080", alt: "Image two", textBrightness: "dark" },
-        { src: "https://picsum.photos/seed/min3/1920/1080", alt: "Image three", textBrightness: "light" },
-      ]);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith([
+    { src: "https://picsum.photos/seed/min1/1920/1080", alt: "Image one", textBrightness: "light" },
+    { src: "https://picsum.photos/seed/min2/1920/1080", alt: "Image two", textBrightness: "dark" },
+    { src: "https://picsum.photos/seed/min3/1920/1080", alt: "Image three", textBrightness: "light" },
+  ]),
   parameters: {
     docs: {
       description: {
@@ -240,14 +337,7 @@ export const MinimalSlideData: Story = {
 
 export const EmptyGallery: Story = {
   name: "Empty Gallery",
-  render: (args) => ({
-    components: { SliderGallery },
-    setup() {
-      const galleryData = ref<IGalleryData[]>([]);
-      return { args, galleryData };
-    },
-    template: `<SliderGallery v-bind="args" v-model:gallery-data="galleryData" />`,
-  }),
+  render: renderWith([]),
   parameters: {
     docs: {
       description: {
@@ -256,3 +346,51 @@ export const EmptyGallery: Story = {
     },
   },
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    autoRunInterval: 0,
+    loadingText: "Die Galerie wird geladen, bitte haben Sie einen Augenblick Geduld...",
+    seeMoreText: "WEITERE INFORMATIONEN ZU DIESEM BEITRAG ANZEIGEN",
+    ariaLabel: "",
+  },
+  render: renderWith(stressSlides),
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div
+          :class="canvasName"
+          style="position: relative; block-size: 80svh; margin-inline: auto; outline: 1px dashed currentColor; --slider-gallery-width: 100%; --slider-gallery-height: 100%;"
+        >
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage, sized to the canvas with `--slider-gallery-width: 100%` and " +
+          "`--slider-gallery-height: 100%`: long German copy and unbroken strings (a 100-character compound word, a long URL) " +
+          "in every field including the see-more and loading copy, emoji (including first), HTML-like text (must render as text), " +
+          "right-to-left Arabic, a broken image URL (its alt text shows), single characters, empty strings (no empty elements or " +
+          "empty link are rendered), a slide with an empty alt and no text, an empty carousel label, and 30 slides. " +
+          "`autoRunInterval` is 0: auto-advance is floored to the transition length (minimum 1s), so it keeps cycling rather than " +
+          "stalling; try a negative `animationDuration` too. Hover the gallery to pause it while you look. " +
+          "Check at every canvas width: no text runs off the slide, thumbnail text stays inside its card (2 lines each by default), " +
+          "and the arrows stay usable. Try the line clamp controls too: they set CSS tokens, they are not props.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/image-galleries/slider-gallery/tests/SliderGallery.spec.ts

@@ -43,9 +43,13 @@ type MockImageInstance = {
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 /** Mount the gallery and simulate the first image loading successfully. */
-async function mountAndLoad(galleryData: IGalleryData[], mockImage: MockImageInstance) {
+async function mountAndLoad(
+  galleryData: IGalleryData[],
+  mockImage: MockImageInstance,
+  props: Record<string, unknown> = {}
+) {
   const wrapper = await mountSuspended(SliderGallery, {
-    props: { galleryData },
+    props: { galleryData, ...props },
   });
   mockImage.onload?.();
   await nextTick(); // let onMounted resume after Promise.race resolves
@@ -310,4 +314,39 @@ describe("SliderGallery", () => {
     await nextTick();
     expect(wrapper.classes()).not.toContain("is-next");
   });
+
+  // ─── Worst-case numbers ─────────────────────────────────────────────────
+
+  const activeAlt = (wrapper: Awaited<ReturnType<typeof mountAndLoad>>) =>
+    wrapper.find(".slider-gallery-list .slider-gallery-item img").attributes("alt");
+
+  // Mount with motion allowed, then let the load chain settle so the first auto-run timer is queued.
+  async function mountForAutoRun(props: Record<string, unknown>) {
+    vi.stubGlobal("matchMedia", vi.fn(() => ({ matches: false })));
+    const wrapper = await mountAndLoad(mockGalleryData, mockImage, props);
+    vi.advanceTimersByTime(1000);
+    await nextTick();
+    return wrapper;
+  }
+
+  it("keeps auto-advancing when autoRunInterval is shorter than the transition", async () => {
+    const wrapper = await mountForAutoRun({ autoRunInterval: 0, animationDuration: 3000 });
+    expect(activeAlt(wrapper)).toBe("Slide 1");
+    vi.advanceTimersByTime(3000);
+    await nextTick();
+    expect(activeAlt(wrapper)).toBe("Slide 2");
+    vi.advanceTimersByTime(3000);
+    await nextTick();
+    expect(activeAlt(wrapper)).toBe("Slide 3");
+  });
+
+  it("floors auto-advance at 1s when both timings are zero or negative", async () => {
+    const wrapper = await mountForAutoRun({ autoRunInterval: 0, animationDuration: -500 });
+    vi.advanceTimersByTime(999);
+    await nextTick();
+    expect(activeAlt(wrapper)).toBe("Slide 1");
+    vi.advanceTimersByTime(1);
+    await nextTick();
+    expect(activeAlt(wrapper)).toBe("Slide 2");
+  });
 });

package/app/components/03.organisms/image-galleries/slider-gallery/tests/__snapshots__/SliderGallery.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
   </div>
   <div class="slider-gallery-content">
     <div class="slider-gallery-list">
-      <div class="slider-gallery-item" data-text-brightness="light" data-has-text=""><img data-nuxt-img="" srcset="/_ipx/_/images/slide-1.jpg 1x, /_ipx/_/images/slide-1.jpg 2x" alt="Slide 1" src="/_ipx/_/images/slide-1.jpg">
+      <div class="slider-gallery-item" data-text-brightness="light" data-has-text=""><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/slide-1.jpg 1x, /_ipx/s_3840x2160/images/slide-1.jpg 2x" alt="Slide 1" src="/_ipx/s_1920x1080/images/slide-1.jpg">
         <div class="slider-gallery-item-content light">
           <div class="slider-gallery-author">Stylist One</div>
           <div class="slider-gallery-title">First Slide</div>
@@ -17,7 +17,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
           <!--v-if-->
         </div>
       </div>
-      <div class="slider-gallery-item" data-text-brightness="dark" data-has-text=""><img data-nuxt-img="" srcset="/_ipx/_/images/slide-2.jpg 1x, /_ipx/_/images/slide-2.jpg 2x" alt="Slide 2" src="/_ipx/_/images/slide-2.jpg">
+      <div class="slider-gallery-item" data-text-brightness="dark" data-has-text=""><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/slide-2.jpg 1x, /_ipx/s_3840x2160/images/slide-2.jpg 2x" alt="Slide 2" src="/_ipx/s_1920x1080/images/slide-2.jpg">
         <div class="slider-gallery-item-content dark">
           <!--v-if-->
           <div class="slider-gallery-title">Second Slide</div>
@@ -26,7 +26,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
           <!--v-if-->
         </div>
       </div>
-      <div class="slider-gallery-item" data-text-brightness="light"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-3.jpg 1x, /_ipx/_/images/slide-3.jpg 2x" alt="Slide 3" src="/_ipx/_/images/slide-3.jpg">
+      <div class="slider-gallery-item" data-text-brightness="light"><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/slide-3.jpg 1x, /_ipx/s_3840x2160/images/slide-3.jpg 2x" alt="Slide 3" src="/_ipx/s_1920x1080/images/slide-3.jpg">
         <div class="slider-gallery-item-content light">
           <!--v-if-->
           <!--v-if-->
@@ -38,7 +38,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
     </div>
     <div class="slider-gallery-thumbnails" aria-hidden="true">
       <div class="slider-gallery-item">
-        <div class="slider-gallery-thumbnail-overlay"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-1.jpg 1x, /_ipx/_/images/slide-1.jpg 2x" alt="" loading="lazy" src="/_ipx/_/images/slide-1.jpg">
+        <div class="slider-gallery-thumbnail-overlay"><img width="640" height="940" data-nuxt-img="" srcset="/_ipx/s_640x940/images/slide-1.jpg 1x, /_ipx/s_1280x1880/images/slide-1.jpg 2x" alt="" loading="lazy" src="/_ipx/s_640x940/images/slide-1.jpg">
           <div class="slider-gallery-item-content light">
             <div class="slider-gallery-title">Thumb 1</div>
             <div class="slider-gallery-description">Thumb desc 1</div>
@@ -46,7 +46,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
         </div>
       </div>
       <div class="slider-gallery-item">
-        <div class="slider-gallery-thumbnail-overlay"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-2.jpg 1x, /_ipx/_/images/slide-2.jpg 2x" alt="" loading="lazy" src="/_ipx/_/images/slide-2.jpg">
+        <div class="slider-gallery-thumbnail-overlay"><img width="640" height="940" data-nuxt-img="" srcset="/_ipx/s_640x940/images/slide-2.jpg 1x, /_ipx/s_1280x1880/images/slide-2.jpg 2x" alt="" loading="lazy" src="/_ipx/s_640x940/images/slide-2.jpg">
           <div class="slider-gallery-item-content dark">
             <div class="slider-gallery-title">Thumb 2</div>
             <div class="slider-gallery-description">Thumb desc 2</div>
@@ -54,7 +54,7 @@ exports[`SliderGallery > renders correct HTML structure after load 1`] = `
         </div>
       </div>
       <div class="slider-gallery-item">
-        <div class="slider-gallery-thumbnail-overlay"><img data-nuxt-img="" srcset="/_ipx/_/images/slide-3.jpg 1x, /_ipx/_/images/slide-3.jpg 2x" alt="" loading="lazy" src="/_ipx/_/images/slide-3.jpg">
+        <div class="slider-gallery-thumbnail-overlay"><img width="640" height="940" data-nuxt-img="" srcset="/_ipx/s_640x940/images/slide-3.jpg 1x, /_ipx/s_1280x1880/images/slide-3.jpg 2x" alt="" loading="lazy" src="/_ipx/s_640x940/images/slide-3.jpg">
           <div class="slider-gallery-item-content light">
             <!--v-if-->
             <!--v-if-->