srcdev-nuxt-components 9.1.28 → 9.1.30

package/app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts

@@ -0,0 +1,350 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import BannerVideo from "../BannerVideo.vue";
+
+const defaultProps = {
+  src: "/images/banners/video/lake-banner.mp4",
+  poster: "/images/banners/video/lake-banner.jpg",
+};
+
+describe("BannerVideo", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (all props set)", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: {
+        ...defaultProps,
+        tag: "header",
+        alt: "Lake banner",
+        imgWidth: 1280,
+        imgHeight: 720,
+        depth: "xl",
+        aspectRatio: "16/9",
+        styleClassPassthrough: ["full-bleed"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ────────────────────────────────────────────────────────
+
+  it("renders a <section> as the root element by default", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  it("renders the specified tag as root", async () => {
+    for (const tag of ["div", "header", "main", "article"] as const) {
+      const wrapper = await mountSuspended(BannerVideo, {
+        props: { ...defaultProps, tag },
+      });
+      expect(wrapper.element.tagName).toBe(tag.toUpperCase());
+    }
+  });
+
+  it("always has the banner-video class", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.classes()).toContain("banner-video");
+  });
+
+  // ─── Video element ───────────────────────────────────────────────────────
+
+  it("renders a video element", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").exists()).toBe(true);
+  });
+
+  it("video has the video class", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").classes()).toContain("video");
+  });
+
+  it("video has autoplay attribute", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").attributes()).toHaveProperty("autoplay");
+  });
+
+  it("video has muted attribute", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").attributes()).toHaveProperty("muted");
+  });
+
+  it("video has loop attribute", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").attributes()).toHaveProperty("loop");
+  });
+
+  it("video has playsinline attribute", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").attributes()).toHaveProperty("playsinline");
+  });
+
+  it("video has the poster attribute set to the poster prop", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").attributes("poster")).toBe(defaultProps.poster);
+  });
+
+  it("video element has preload=auto", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("video").attributes("preload")).toBe("auto");
+  });
+
+  it("source element has the correct src", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("source").attributes("src")).toBe(defaultProps.src);
+  });
+
+  it("source element has type video/mp4", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("source").attributes("type")).toBe("video/mp4");
+  });
+
+  it("calls play() when loadeddata fires", async () => {
+    const play = vi.fn().mockResolvedValue(undefined);
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    (wrapper.find("video").element as HTMLVideoElement).play = play;
+    await wrapper.find("video").trigger("loadeddata");
+    expect(play).toHaveBeenCalled();
+  });
+
+  it("calls play() when canplay fires", async () => {
+    const play = vi.fn().mockResolvedValue(undefined);
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    (wrapper.find("video").element as HTMLVideoElement).play = play;
+    await wrapper.find("video").trigger("canplay");
+    expect(play).toHaveBeenCalled();
+  });
+
+  // ─── Fallback image ──────────────────────────────────────────────────────
+
+  it("renders a NuxtImg fallback element", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("img[data-nuxt-img]").exists()).toBe(true);
+  });
+
+  it("fallback image has the fallback class", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("img[data-nuxt-img]").classes()).toContain("fallback");
+  });
+
+  it("fallback image src contains the poster filename", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const src = wrapper.find("img[data-nuxt-img]").attributes("src") ?? "";
+    expect(src).toContain("lake-banner.jpg");
+  });
+
+  it("fallback image alt defaults to empty string", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("alt")).toBe("");
+  });
+
+  it("fallback image alt reflects the alt prop", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, alt: "A serene lake" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("alt")).toBe("A serene lake");
+  });
+
+  it("fallback image width defaults to 1920", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("width")).toBe("1920");
+  });
+
+  it("fallback image height defaults to 1080", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("height")).toBe("1080");
+  });
+
+  it("fallback image uses custom imgWidth and imgHeight when provided", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, imgWidth: 1280, imgHeight: 720 },
+    });
+    const img = wrapper.find("img[data-nuxt-img]");
+    expect(img.attributes("width")).toBe("1280");
+    expect(img.attributes("height")).toBe("720");
+  });
+
+  it("fallback image has loading=eager", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("loading")).toBe("eager");
+  });
+
+  it("fallback image has decoding=async", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("decoding")).toBe("async");
+  });
+
+  // ─── depth / data-depth ──────────────────────────────────────────────────
+
+  it("sets data-depth to md by default", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    expect(wrapper.attributes("data-depth")).toBe("md");
+  });
+
+  it.each(["xs", "sm", "md", "lg", "xl"] as const)(
+    "sets data-depth to %s when depth prop is %s",
+    async (depth) => {
+      const wrapper = await mountSuspended(BannerVideo, {
+        props: { ...defaultProps, depth },
+      });
+      expect(wrapper.attributes("data-depth")).toBe(depth);
+    }
+  );
+
+  // ─── CSS custom properties ───────────────────────────────────────────────
+
+  it("sets --_aspect-ratio to 21/9 by default", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_aspect-ratio")).toBe("21/9");
+  });
+
+  it("reflects aspectRatio prop in --_aspect-ratio", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, aspectRatio: "16/9" },
+    });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_aspect-ratio")).toBe("16/9");
+  });
+
+  it("sets object-fit to cover on the video element by default", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const style = (wrapper.find("video").element as HTMLElement).style;
+    expect(style.objectFit).toBe("cover");
+  });
+
+  it("reflects objectFit prop on the video element", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, objectFit: "contain" },
+    });
+    const style = (wrapper.find("video").element as HTMLElement).style;
+    expect(style.objectFit).toBe("contain");
+  });
+
+  it("sets object-fit to cover on the fallback image by default", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
+    expect(style.objectFit).toBe("cover");
+  });
+
+  it("reflects objectFit prop on the fallback image", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, objectFit: "contain" },
+    });
+    const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
+    expect(style.objectFit).toBe("contain");
+  });
+
+  it("video element does not have object-position style", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const style = (wrapper.find("video").element as HTMLElement).style;
+    expect(style.objectPosition).toBe("");
+  });
+
+  it("sets --_align-self to center by default", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_align-self")).toBe("center");
+  });
+
+  it("reflects verticalPosition prop in --_align-self", async () => {
+    for (const [prop, expected] of [["start", "start"], ["end", "end"]] as const) {
+      const wrapper = await mountSuspended(BannerVideo, {
+        props: { ...defaultProps, verticalPosition: prop },
+      });
+      expect((wrapper.element as HTMLElement).style.getPropertyValue("--_align-self")).toBe(expected);
+    }
+  });
+
+  it("sets --_justify-self to center by default", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const style = (wrapper.element as HTMLElement).style;
+    expect(style.getPropertyValue("--_justify-self")).toBe("center");
+  });
+
+  it("reflects horizontalPosition prop in --_justify-self", async () => {
+    for (const [prop, expected] of [["start", "start"], ["end", "end"]] as const) {
+      const wrapper = await mountSuspended(BannerVideo, {
+        props: { ...defaultProps, horizontalPosition: prop },
+      });
+      expect((wrapper.element as HTMLElement).style.getPropertyValue("--_justify-self")).toBe(expected);
+    }
+  });
+
+  it("fallback image object-position defaults to center center", async () => {
+    const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
+    const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
+    expect(style.objectPosition).toBe("center center");
+  });
+
+  it("fallback image object-position reflects verticalPosition", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, verticalPosition: "start" },
+    });
+    const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
+    expect(style.objectPosition).toBe("center top");
+  });
+
+  it("fallback image object-position reflects horizontalPosition", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, horizontalPosition: "end" },
+    });
+    const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
+    expect(style.objectPosition).toBe("right center");
+  });
+
+  it("fallback image object-position reflects both verticalPosition and horizontalPosition", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, verticalPosition: "end", horizontalPosition: "start" },
+    });
+    const style = (wrapper.find("img[data-nuxt-img]").element as HTMLElement).style;
+    expect(style.objectPosition).toBe("left bottom");
+  });
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string to the root", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, styleClassPassthrough: "full-bleed" },
+    });
+    expect(wrapper.classes()).toContain("full-bleed");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, styleClassPassthrough: ["full-bleed", "mbe-0"] },
+    });
+    expect(wrapper.classes()).toContain("full-bleed");
+    expect(wrapper.classes()).toContain("mbe-0");
+  });
+
+  it("does not apply styleClassPassthrough to the video element", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, styleClassPassthrough: "full-bleed" },
+    });
+    expect(wrapper.find("video").classes()).not.toContain("full-bleed");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, 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/banner-video/tests/__snapshots__/BannerVideo.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BannerVideo > renders correct HTML structure (all props set) 1`] = `
+"<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+    <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
+  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
+`;
+
+exports[`BannerVideo > renders correct HTML structure (default props) 1`] = `
+"<section class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+    <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
+  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></section>"
+`;

package/app/components/01.atoms/grid-stack/GridStack.vue

@@ -0,0 +1,34 @@
+<template>
+  <component :is="tag" class="grid-stack" :class="[elementClasses]">
+    <div v-for="(_, name) in $slots" :key="name" class="grid-stack__layer">
+      <slot :name="name"></slot>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+  .grid-stack {
+    display: grid;
+    grid-template-areas: "stack";
+
+    .grid-stack__layer {
+      grid-area: stack;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/grid-stack/stories/GridStack.stories.ts

@@ -0,0 +1,162 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import GridStackComponent from "../GridStack.vue";
+import BannerVideoComponent from "../../banner-video/BannerVideo.vue";
+
+interface GridStackArgs {
+  tag: "div" | "section" | "article" | "main";
+  styleClassPassthrough: string[];
+}
+
+export default {
+  title: "Atoms/Layout/GridStack",
+  component: GridStackComponent,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "HTML element rendered as the root",
+      table: { category: "Markup" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "div",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Stacks slot content in the z-axis using `grid-template-areas` — no `position: absolute`. All named slots share a single grid area (`stack`), so they overlap in DOM order: the last slot renders on top. The container sizes to the tallest child (usually the base layer). Slot names are free-form; `layer-1`, `layer-2`, etc. is the conventional pattern.",
+      },
+    },
+  },
+} as Meta<GridStackArgs>;
+
+// ── Two layers ──────────────────────────────────────────────────────────────
+
+const TwoLayersTemplate: StoryFn<GridStackArgs> = (args) => ({
+  components: { GridStackComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <GridStackComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+      <template #layer-1>
+        <div style="display: flex; align-items: center; justify-content: center; min-block-size: 24rem; background: #e2e8f0; border-radius: 0.8rem; font-size: 1.4rem; font-weight: 600; color: #475569;">
+          layer-1 (base)
+        </div>
+      </template>
+      <template #layer-2>
+        <div style="display: flex; align-items: flex-end; justify-content: flex-start; padding: 2rem; background: linear-gradient(to top, rgba(15,23,42,0.6) 0%, transparent 60%); border-radius: 0.8rem; pointer-events: none; color: white; font-size: 1.4rem; font-weight: 600;">
+          layer-2 (overlay)
+        </div>
+      </template>
+    </GridStackComponent>
+  `,
+});
+
+export const TwoLayers = TwoLayersTemplate.bind({});
+TwoLayers.args = {};
+TwoLayers.parameters = {
+  docs: {
+    description: {
+      story:
+        "The most common use: a base layer that drives the container height, with a second layer overlaid on top. The overlay uses `pointer-events: none` so the base layer remains interactive.",
+    },
+  },
+};
+
+// ── Three layers ─────────────────────────────────────────────────────────────
+
+const ThreeLayersTemplate: StoryFn<GridStackArgs> = (args) => ({
+  components: { GridStackComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <GridStackComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+      <template #layer-1>
+        <div style="display: flex; align-items: center; justify-content: center; min-block-size: 28rem; background: #e2e8f0; border-radius: 0.8rem; font-size: 1.4rem; font-weight: 600; color: #475569;">
+          layer-1 (base)
+        </div>
+      </template>
+      <template #layer-2>
+        <div style="display: flex; align-items: center; justify-content: center; margin: 2rem; border-radius: 0.6rem; border: 2px dashed #f97316; background: rgba(249,115,22,0.1); color: #c2410c; font-size: 1.4rem; font-weight: 600;">
+          layer-2 (mid)
+        </div>
+      </template>
+      <template #layer-3>
+        <div style="display: flex; align-items: flex-end; justify-content: flex-start; padding: 2rem; background: linear-gradient(to top, rgba(15,23,42,0.6) 0%, transparent 50%); border-radius: 0.8rem; pointer-events: none; color: white; font-size: 1.4rem; font-weight: 600;">
+          layer-3 (top)
+        </div>
+      </template>
+    </GridStackComponent>
+  `,
+});
+
+export const ThreeLayers = ThreeLayersTemplate.bind({});
+ThreeLayers.args = {};
+ThreeLayers.parameters = {
+  docs: {
+    description: {
+      story:
+        "Three layers stacked in the same grid area. DOM order is z-order — layer-3 is always on top regardless of z-index. The dashed mid-layer shows how intermediate layers behave.",
+    },
+  },
+};
+
+// ── BannerVideo with overlay ──────────────────────────────────────────────────
+
+const VideoOverlayTemplate: StoryFn<GridStackArgs> = (args) => ({
+  components: { GridStackComponent, BannerVideoComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <GridStackComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+      <template #layer-1>
+        <BannerVideoComponent
+          src="/images/banners/video/lake-banner.mp4"
+          poster="/images/banners/video/lake-banner.jpg"
+          alt="A serene lake landscape"
+          :img-width="1920"
+          :img-height="1080"
+          max-height="56rem"
+          aspect-ratio="21/9"
+          object-fit="cover"
+          vertical-position="center"
+          horizontal-position="center"
+        />
+      </template>
+      <template #layer-2>
+        <div style="display: grid; place-items: center; pointer-events: none;">
+          <div style="text-align: center; padding: 2.4rem; pointer-events: auto;">
+            <p style="font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: white; margin-block-end: 0.8rem; opacity: 0.8;">
+              GridStack layer-2
+            </p>
+            <h2 style="font-size: 4rem; font-weight: 700; color: white; margin-block-end: 1.2rem; text-shadow: 0 2px 12px rgba(0,0,0,0.5);">
+              Content over video
+            </h2>
+            <p style="font-size: 1.6rem; color: white; opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,0.4);">
+              No <code style="font-family: monospace; background: rgba(0,0,0,0.3); padding: 0.1em 0.4em; border-radius: 0.3rem;">position: absolute</code> required.
+            </p>
+          </div>
+        </div>
+      </template>
+    </GridStackComponent>
+  `,
+});
+
+export const WithVideoOverlay = VideoOverlayTemplate.bind({});
+WithVideoOverlay.args = {};
+WithVideoOverlay.parameters = {
+  docs: {
+    description: {
+      story:
+        "The primary intended use case: a BannerVideo as the base layer with a content overlay on top. The overlay container uses `pointer-events: none` so the video remains interactive; `pointer-events: auto` is restored on the text content itself.",
+    },
+  },
+};

package/app/components/01.atoms/grid-stack/tests/GridStack.spec.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import GridStack from "../GridStack.vue";
+
+describe("GridStack", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(GridStack);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders as div by default", async () => {
+    const wrapper = await mountSuspended(GridStack);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders a different tag when provided", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      props: { tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  it("renders slot content", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      slots: {
+        "layer-1": "<div>Layer 1</div>",
+      },
+    });
+    expect(wrapper.text()).toContain("Layer 1");
+  });
+
+  it("renders multiple slots as stacked layers", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      slots: {
+        "layer-1": "<div>Layer 1</div>",
+        "layer-2": "<div>Layer 2</div>",
+        "layer-3": "<div>Layer 3</div>",
+      },
+    });
+    const layers = wrapper.findAll(".grid-stack__layer");
+    expect(layers).toHaveLength(3);
+    expect(layers[0]!.text()).toBe("Layer 1");
+    expect(layers[1]!.text()).toBe("Layer 2");
+    expect(layers[2]!.text()).toBe("Layer 3");
+  });
+
+  it("renders no layers when no slots are provided", async () => {
+    const wrapper = await mountSuspended(GridStack);
+    expect(wrapper.findAll(".grid-stack__layer")).toHaveLength(0);
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      props: { styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(GridStack, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+});