srcdev-nuxt-components 9.1.28 → 9.1.29

package/app/components/01.atoms/scroll-reveal-frame/tests/ScrollRevealFrame.spec.ts

@@ -0,0 +1,148 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ScrollRevealFrame from "../ScrollRevealFrame.vue";
+
+describe("ScrollRevealFrame", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (all props set)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      props: {
+        frameHeight: "400px",
+        parallaxOffset: "20rem",
+        radius: "1.6rem",
+        styleClassPassthrough: ["custom-class"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ────────────────────────────────────────────────────────
+
+  it("renders a <figure> as the root element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame);
+    expect(wrapper.element.tagName).toBe("FIGURE");
+  });
+
+  it("always has the reveal-frame class", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame);
+    expect(wrapper.classes()).toContain("reveal-frame");
+  });
+
+  // ─── Inner content wrapper ───────────────────────────────────────────────
+
+  it("renders a .reveal-content child element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame);
+    expect(wrapper.find(".reveal-content").exists()).toBe(true);
+  });
+
+  // ─── Slot ────────────────────────────────────────────────────────────────
+
+  it("renders slot content inside .reveal-content", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      slots: { default: "<p class='slot-child'>Hello</p>" },
+    });
+    const content = wrapper.find(".reveal-content");
+    expect(content.find(".slot-child").exists()).toBe(true);
+    expect(content.find(".slot-child").text()).toBe("Hello");
+  });
+
+  it("renders multiple slot children inside .reveal-content", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      slots: { default: "<div class='child-a'></div><div class='child-b'></div>" },
+    });
+    const content = wrapper.find(".reveal-content");
+    expect(content.find(".child-a").exists()).toBe(true);
+    expect(content.find(".child-b").exists()).toBe(true);
+  });
+
+  // ─── CSS custom properties ───────────────────────────────────────────────
+
+  it("sets --_frame-height to 540px by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame);
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_frame-height")).toBe("540px");
+  });
+
+  it("sets --_parallax-offset to 36rem by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame);
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_parallax-offset")).toBe("36rem");
+  });
+
+  it("sets --_radius to 0px by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame);
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_radius")).toBe("0px");
+  });
+
+  it("reflects frameHeight prop in --_frame-height", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      props: { frameHeight: "80vh" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_frame-height")).toBe("80vh");
+  });
+
+  it("reflects parallaxOffset prop in --_parallax-offset", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      props: { parallaxOffset: "48rem" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_parallax-offset")).toBe("48rem");
+  });
+
+  it("reflects radius prop in --_radius", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      props: { radius: "2.4rem" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_radius")).toBe("2.4rem");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string to the root", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      props: { styleClassPassthrough: "hero-frame" },
+    });
+    expect(wrapper.classes()).toContain("hero-frame");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      props: { styleClassPassthrough: ["hero-frame", "mbe-32"] },
+    });
+    expect(wrapper.classes()).toContain("hero-frame");
+    expect(wrapper.classes()).toContain("mbe-32");
+  });
+
+  it("does not apply styleClassPassthrough to .reveal-content", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      props: { styleClassPassthrough: "hero-frame" },
+    });
+    expect(wrapper.find(".reveal-content").classes()).not.toContain("hero-frame");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(ScrollRevealFrame, {
+      props: { styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/01.atoms/scroll-reveal-frame/tests/__snapshots__/ScrollRevealFrame.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ScrollRevealFrame > renders correct HTML structure (all props set) 1`] = `
+"<figure class="reveal-frame custom-class" style="--_frame-height: 400px; --_parallax-offset: 20rem; --_radius: 1.6rem;">
+  <div class="reveal-content"></div>
+</figure>"
+`;
+
+exports[`ScrollRevealFrame > renders correct HTML structure (default props) 1`] = `
+"<figure class="reveal-frame" style="--_frame-height: 540px; --_parallax-offset: 36rem; --_radius: 0px;">
+  <div class="reveal-content"></div>
+</figure>"
+`;

package/app/components/01.atoms/scroll-reveal-image/ScrollRevealImage.vue

@@ -0,0 +1,96 @@
+<template>
+  <ScrollRevealFrame
+    :frame-height="frameHeight"
+    :parallax-offset="parallaxOffset"
+    :radius="radius"
+    :style-class-passthrough="styleClassPassthrough"
+    :style="{ '--_focal-x': focalX }"
+  >
+    <NuxtImg
+      class="reveal-image"
+      :src="src"
+      :alt="alt"
+      :width="imgWidth"
+      :height="imgHeight"
+      loading="lazy"
+      decoding="async"
+    />
+  </ScrollRevealFrame>
+</template>
+
+<script setup lang="ts">
+/**
+ * ScrollRevealImage
+ *
+ * A single-image convenience wrapper around ScrollRevealFrame.
+ * Adds NuxtImg optimisation (src, alt, intrinsic dimensions) and horizontal
+ * focal-point control (focalX → CSS object-position x-axis).
+ *
+ * For a grid of images or arbitrary slot content use ScrollRevealFrame directly.
+ */
+
+interface Props {
+  src: string;
+  alt?: string;
+  /** Intrinsic width of the source image — required for NuxtImg optimisation. */
+  imgWidth?: number;
+  /** Intrinsic height of the source image — required for NuxtImg optimisation. */
+  imgHeight?: number;
+  /** Height of the visible clipping frame. */
+  frameHeight?: string;
+  /**
+   * How far the image travels vertically as the frame scrolls through the
+   * viewport. Larger = more image revealed = stronger parallax feel.
+   */
+  parallaxOffset?: string;
+  /**
+   * Horizontal focal point — CSS `object-position` x-axis value.
+   * Controls which horizontal slice of the image is kept in view.
+   * Examples: "50%", "left", "30%".
+   */
+  focalX?: string;
+  /** Optional rounded corners on the frame. */
+  radius?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+withDefaults(defineProps<Props>(), {
+  alt: "",
+  imgWidth: 1920,
+  imgHeight: 1080,
+  frameHeight: "540px",
+  parallaxOffset: "36rem",
+  focalX: "50%",
+  radius: "0px",
+  styleClassPassthrough: () => [],
+});
+</script>
+
+<style lang="css">
+@layer components {
+  .reveal-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    /*
+     * Y is always 0% — ScrollRevealFrame's translateY handles vertical travel.
+     * focalX (--_focal-x) lets the consumer pin the horizontal crop point.
+     */
+    object-position: var(--_focal-x, 50%) 0%;
+  }
+
+  /* ── Fallback: centre the crop vertically when there is no animation ── */
+  @supports not (animation-timeline: scroll()) {
+    .reveal-image {
+      object-position: var(--_focal-x, 50%) 50%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .reveal-image {
+      object-position: var(--_focal-x, 50%) 50%;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/scroll-reveal-image/stories/ScrollRevealImage.stories.ts

@@ -0,0 +1,181 @@
+import ScrollRevealImage from "../ScrollRevealImage.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof ScrollRevealImage> = {
+  title: "Atoms/Effects/ScrollRevealImage",
+  component: ScrollRevealImage,
+  argTypes: {
+    src: {
+      control: "text",
+      description: "Image source path",
+      table: { category: "Image" },
+    },
+    alt: {
+      control: "text",
+      description: "Alt text for the image",
+      table: { category: "Image" },
+    },
+    imgWidth: {
+      control: { type: "number" },
+      description: "Intrinsic width of the source image — required for NuxtImg optimisation",
+      table: { category: "Image" },
+    },
+    imgHeight: {
+      control: { type: "number" },
+      description: "Intrinsic height of the source image — required for NuxtImg optimisation",
+      table: { category: "Image" },
+    },
+    frameHeight: {
+      control: "text",
+      description: "Height of the visible clipping frame",
+      table: { category: "Layout" },
+    },
+    parallaxOffset: {
+      control: "text",
+      description: "Distance the image travels vertically as the frame scrolls through the viewport",
+      table: { category: "Layout" },
+    },
+    focalX: {
+      control: "text",
+      description: "Horizontal focal point — CSS object-position x-axis value (e.g. '50%', 'left', '30%')",
+      table: { category: "Layout" },
+    },
+    radius: {
+      control: "text",
+      description: "Border-radius applied to the clipping frame",
+      table: { category: "Appearance" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Single-image parallax reveal built on ScrollRevealFrame. Adds NuxtImg optimisation (src, alt, intrinsic dimensions) and a horizontal focal-point prop (focalX). For arbitrary slot content — grids, video, etc. — use ScrollRevealFrame directly.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollRevealImage>;
+
+const scrollWrapper = (inner: string) => `
+  <div style="padding-block: 60vh; max-width: 860px; margin-inline: auto;">
+    <p style="text-align: center; font-size: 1.4rem; opacity: 0.5; margin-block-end: 4rem;">Scroll to see the parallax effect</p>
+    ${inner}
+  </div>
+`;
+
+export const Default: Story = {
+  args: {
+    src: "/images/page/hero/hero-blonde.jpg",
+    alt: "Blonde hair portrait",
+    imgWidth: 1280,
+    imgHeight: 1920,
+    frameHeight: "540px",
+    parallaxOffset: "36rem",
+    focalX: "50%",
+    radius: "0px",
+  },
+  render: (args) => ({
+    components: { ScrollRevealImage },
+    setup() {
+      return { args };
+    },
+    template: scrollWrapper(`<ScrollRevealImage v-bind="args" />`),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "All props at their default values. A portrait image panning from top to bottom as the frame crosses the viewport.",
+      },
+    },
+  },
+};
+
+export const ShortFrame: Story = {
+  args: {
+    src: "/images/banners/banner-mid-brown.webp",
+    alt: "Mid brown hair banner",
+    imgWidth: 1920,
+    imgHeight: 800,
+    frameHeight: "320px",
+    parallaxOffset: "24rem",
+    focalX: "50%",
+    radius: "0px",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "A shallow banner frame with a wide landscape image. parallaxOffset is reduced proportionally to match the shorter frame height.",
+      },
+    },
+  },
+};
+
+export const RoundedCorners: Story = {
+  args: {
+    src: "/images/banners/banner-ginger.webp",
+    alt: "Ginger hair banner",
+    imgWidth: 1920,
+    imgHeight: 800,
+    frameHeight: "480px",
+    parallaxOffset: "36rem",
+    focalX: "50%",
+    radius: "2.4rem",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "The radius prop applies border-radius to the clipping frame. The image reveal stays contained within the rounded shape.",
+      },
+    },
+  },
+};
+
+export const FocalPoint: Story = {
+  args: {
+    src: "/images/page/hero/hero-red.jpg",
+    alt: "Red hair portrait",
+    imgWidth: 1280,
+    imgHeight: 1920,
+    frameHeight: "540px",
+    parallaxOffset: "36rem",
+    focalX: "75%",
+    radius: "0px",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "focalX pins the horizontal crop axis. Here it is pushed right to keep the subject centred in a narrower frame.",
+      },
+    },
+  },
+};
+
+export const TallFrame: Story = {
+  args: {
+    src: "/images/page/hero/hero-hair.jpg",
+    alt: "Hair portrait",
+    imgWidth: 1280,
+    imgHeight: 1920,
+    frameHeight: "70vh",
+    parallaxOffset: "60rem",
+    focalX: "50%",
+    radius: "0px",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "A tall frame combined with a large parallaxOffset creates the most dramatic reveal — nearly the full image height is traversed as you scroll.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/scroll-reveal-image/tests/ScrollRevealImage.spec.ts

@@ -0,0 +1,235 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ScrollRevealImage from "../ScrollRevealImage.vue";
+
+describe("ScrollRevealImage", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", alt: "Test image" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (all props set)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: {
+        src: "/images/test.jpg",
+        alt: "All props",
+        imgWidth: 800,
+        imgHeight: 600,
+        frameHeight: "400px",
+        parallaxOffset: "20rem",
+        focalX: "30%",
+        radius: "1.6rem",
+        styleClassPassthrough: ["custom-class"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ────────────────────────────────────────────────────────
+
+  it("renders a <figure> as the root element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.element.tagName).toBe("FIGURE");
+  });
+
+  it("always has the reveal-frame class", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.classes()).toContain("reveal-frame");
+  });
+
+  // ─── CSS custom properties ───────────────────────────────────────────────
+
+  it("sets --_frame-height to 540px by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_frame-height")).toBe("540px");
+  });
+
+  it("sets --_parallax-offset to 36rem by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_parallax-offset")).toBe("36rem");
+  });
+
+  it("sets --_radius to 0px by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_radius")).toBe("0px");
+  });
+
+  it("sets --_focal-x to 50% by default", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_focal-x")).toBe("50%");
+  });
+
+  it("reflects frameHeight prop in --_frame-height", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", frameHeight: "80vh" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_frame-height")).toBe("80vh");
+  });
+
+  it("reflects parallaxOffset prop in --_parallax-offset", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", parallaxOffset: "48rem" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_parallax-offset")).toBe("48rem");
+  });
+
+  it("reflects radius prop in --_radius", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", radius: "2.4rem" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_radius")).toBe("2.4rem");
+  });
+
+  it("reflects focalX prop in --_focal-x", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", focalX: "75%" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_focal-x")).toBe("75%");
+  });
+
+  // ─── Image element ───────────────────────────────────────────────────────
+
+  it("renders an img child element with the reveal-image class", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    // NuxtImg resolves to a real <img> element in the Nuxt test environment,
+    // identified by the data-nuxt-img attribute it injects.
+    const img = wrapper.find("img[data-nuxt-img]");
+    expect(img.exists()).toBe(true);
+    expect(img.classes()).toContain("reveal-image");
+  });
+
+  it("passes src through to the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/hero.jpg" },
+    });
+    // NuxtImg transforms the URL via /_ipx/, so check the original path is present.
+    const src = wrapper.find("img[data-nuxt-img]").attributes("src") ?? "";
+    expect(src).toContain("hero.jpg");
+  });
+
+  it("passes alt to the image element (default empty string)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("alt")).toBe("");
+  });
+
+  it("passes alt to the image element when provided", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", alt: "A hair portrait" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("alt")).toBe("A hair portrait");
+  });
+
+  it("passes imgWidth to the image element (default 1920)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("width")).toBe("1920");
+  });
+
+  it("passes imgHeight to the image element (default 1080)", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("height")).toBe("1080");
+  });
+
+  it("passes custom imgWidth and imgHeight to the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", imgWidth: 1280, imgHeight: 1920 },
+    });
+    const img = wrapper.find("img[data-nuxt-img]");
+    expect(img.attributes("width")).toBe("1280");
+    expect(img.attributes("height")).toBe("1920");
+  });
+
+  it("sets loading=lazy on the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("loading")).toBe("lazy");
+  });
+
+  it("sets decoding=async on the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("decoding")).toBe("async");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string to the root", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", styleClassPassthrough: "hero-image" },
+    });
+    expect(wrapper.classes()).toContain("hero-image");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: {
+        src: "/images/test.jpg",
+        styleClassPassthrough: ["hero-image", "mbe-32"],
+      },
+    });
+    expect(wrapper.classes()).toContain("hero-image");
+    expect(wrapper.classes()).toContain("mbe-32");
+  });
+
+  it("does not apply styleClassPassthrough to the image element", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: {
+        src: "/images/test.jpg",
+        styleClassPassthrough: "hero-image",
+      },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").classes()).not.toContain("hero-image");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/01.atoms/scroll-reveal-image/tests/__snapshots__/ScrollRevealImage.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ScrollRevealImage > renders correct HTML structure (all props set) 1`] = `
+"<figure class="reveal-frame custom-class" style="--_frame-height: 400px; --_parallax-offset: 20rem; --_radius: 1.6rem; --_focal-x: 30%;">
+  <div class="reveal-content"><img width="800" height="600" data-nuxt-img="" srcset="/_ipx/s_800x600/images/test.jpg 1x, /_ipx/s_1600x1200/images/test.jpg 2x" class="reveal-image" alt="All props" loading="lazy" decoding="async" src="/_ipx/s_800x600/images/test.jpg"></div>
+</figure>"
+`;
+
+exports[`ScrollRevealImage > renders correct HTML structure (default props) 1`] = `
+"<figure class="reveal-frame" style="--_frame-height: 540px; --_parallax-offset: 36rem; --_radius: 0px; --_focal-x: 50%;">
+  <div class="reveal-content"><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/test.jpg 1x, /_ipx/s_3840x2160/images/test.jpg 2x" class="reveal-image" alt="Test image" loading="lazy" decoding="async" src="/_ipx/s_1920x1080/images/test.jpg"></div>
+</figure>"
+`;