srcdev-nuxt-components 9.4.6 → 9.4.8

package/app/components/01.atoms/grids/masonry-grid/stories/MasonryGrid.stories.ts

@@ -0,0 +1,199 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import MasonryGrid from "../MasonryGrid.vue";
+
+interface MasonryGridArgs {
+  tag: "div" | "section" | "article" | "main";
+  itemMinWidth: number;
+  gap: number;
+  fixedWidth: boolean;
+  justify: "left" | "center" | "right";
+  styleClassPassthrough: string[];
+}
+
+const meta: Meta<MasonryGridArgs> = {
+  title: "Atoms/Grids/MasonryGrid",
+  component: MasonryGrid,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "article", "main"],
+      description: "HTML tag to render as",
+      table: { category: "Props" },
+    },
+    itemMinWidth: {
+      control: { type: "select" },
+      options: [160, 200, 240, 300, 360, 450],
+      description: "Minimum tile width in pixels — also the fixed tile width when fixedWidth is set",
+      table: { category: "Props" },
+    },
+    gap: {
+      control: { type: "select" },
+      options: [0, 4, 8, 12, 16, 24, 32],
+      description: "Gap between tiles in pixels",
+      table: { category: "Props" },
+    },
+    fixedWidth: {
+      control: { type: "boolean" },
+      description: "Keep every tile at exactly itemMinWidth instead of stretching to fill each column",
+      table: { category: "Props" },
+    },
+    justify: {
+      control: { type: "select" },
+      options: ["left", "center", "right"],
+      description: "How the block of tiles aligns within the wrapper — only visible when fixedWidth is set",
+      table: { category: "Props" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "div",
+    itemMinWidth: 300,
+    gap: 12,
+    fixedWidth: false,
+    justify: "left",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A real masonry layout: each item is measured and placed into whichever column is " +
+          "currently shortest (a greedy bin-pack), not CSS `columns`' column-fill. Renders " +
+          "whatever slots the consumer passes, in natural DOM/reading order — no count/data prop " +
+          "needed, and no reordering trick required (unlike a `columns`-based masonry) since " +
+          "placement already follows the order items were authored in. Resize-reactive: items " +
+          "animate into their new position (respecting `prefers-reduced-motion`) as the container " +
+          "resizes. See `ColumnFlowGrid` for the lighter, non-measuring CSS `columns` alternative.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const itemStyle =
+  "padding: 1.6rem; background: white; border-radius: 0.6rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08);";
+const badgeStyle =
+  "display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; " +
+  "margin-bottom: 0.8rem; border-radius: 50%; background: #111827; color: white; font-weight: 700; " +
+  "font-size: 1.3rem; font-family: monospace;";
+
+// Each item shows its DOM/reading order as a numbered badge. Unlike a reading-order effect based
+// on rearranging DOM order to match a visual grid, here the number is simply the authoring order —
+// tab/screen-reader order always reads 1, 2, 3... regardless of which column an item's measured
+// height ends up placing it in visually.
+const paragraphPool = [
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio praesent libero sed cursus ante.",
+  "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+  "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+];
+
+const itemBadge = (n: number) => `<span style="${badgeStyle}">${n}</span><br />`;
+
+interface DemoItem {
+  slotName: string;
+  index: number;
+  bodyHtml: string;
+}
+
+// Built once per mount (not on every render) so a Controls-panel change doesn't reshuffle the
+// demo content underneath it. Random paragraph counts (1-4) give genuinely uneven heights —
+// necessary to actually see the shortest-column packing at work, unlike uniform-height tiles.
+function buildDemoItems(count: number): DemoItem[] {
+  return Array.from({ length: count }, (_, i) => {
+    const paragraphCount = Math.floor(Math.random() * 4) + 1; // 1-4
+    const bodyHtml = Array.from(
+      { length: paragraphCount },
+      () => `<p style="margin: 0 0 0.8rem;">${paragraphPool[Math.floor(Math.random() * paragraphPool.length)]}</p>`
+    ).join("");
+    return { slotName: `item-${i + 1}`, index: i + 1, bodyHtml };
+  });
+}
+
+const Template: StoryFn<MasonryGridArgs> = (args) => ({
+  components: { MasonryGrid },
+  setup() {
+    const items = buildDemoItems(12);
+    return { args, items };
+  },
+  template: `
+    <div style="padding: 3.2rem; background: #f9fafb;">
+      <MasonryGrid v-bind="args">
+        <template v-for="item in items" :key="item.slotName" #[item.slotName]>
+          <div style="${itemStyle}">
+            <span style="${badgeStyle}">{{ item.index }}</span><br />
+            <div v-html="item.bodyHtml"></div>
+          </div>
+        </template>
+      </MasonryGrid>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.parameters = {
+  docs: {
+    description: {
+      story:
+        "12 numbered items with 1-4 random paragraphs each, flowing into whichever column is " +
+        "currently shortest. Resize the preview panel — items animate into their new positions, " +
+        "and DOM/tab order always stays 1, 2, 3... regardless of which column each ends up in.",
+    },
+  },
+};
+
+export const NarrowColumns = Template.bind({});
+NarrowColumns.args = { itemMinWidth: 160, gap: 8 };
+NarrowColumns.parameters = {
+  docs: {
+    description: { story: "A smaller `itemMinWidth` fits more, narrower columns." },
+  },
+};
+
+export const WideColumns = Template.bind({});
+WideColumns.args = { itemMinWidth: 450, gap: 16 };
+WideColumns.parameters = {
+  docs: {
+    description: { story: "A larger `itemMinWidth` fits fewer, wider columns." },
+  },
+};
+
+export const FixedWidthCentered = Template.bind({});
+FixedWidthCentered.storyName = "Fixed Width, Centered";
+FixedWidthCentered.args = { fixedWidth: true, justify: "center", itemMinWidth: 240 };
+FixedWidthCentered.parameters = {
+  docs: {
+    description: {
+      story:
+        "`fixedWidth` keeps every tile at exactly `itemMinWidth` instead of stretching to fill " +
+        "each column — `justify` then controls how the resulting (narrower) block of tiles " +
+        "aligns within the available width.",
+    },
+  },
+};
+
+export const TwoItems: StoryFn<MasonryGridArgs> = (args) => ({
+  components: { MasonryGrid },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 3.2rem; background: #f9fafb;">
+      <MasonryGrid v-bind="args">
+        <template #item-1>
+          <div style="${itemStyle}">${itemBadge(1)}Only two items provided</div>
+        </template>
+        <template #item-2>
+          <div style="${itemStyle}">
+            ${itemBadge(2)}No count prop to keep in sync — the grid just renders whichever
+            slots you give it.
+          </div>
+        </template>
+      </MasonryGrid>
+    </div>
+  `,
+});
+TwoItems.storyName = "Two Items (no count prop needed)";

package/app/components/01.atoms/grids/masonry-grid/tests/MasonryGrid.spec.ts

@@ -0,0 +1,158 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
+import MasonryGrid from "../MasonryGrid.vue";
+
+// useElementSize/useResizeObserver (from @vueuse/core) require ResizeObserver, which jsdom
+// doesn't implement. Mock it and capture the callback so tests can simulate a real resize event —
+// jsdom also never actually measures layout (offsetWidth/offsetHeight stay 0), so this is the only
+// way to feed the component a non-zero measured width.
+// Vitest 4: a mock's implementation must be a regular function (not an arrow function)
+// to remain constructible via `new`.
+let resizeCallback: ResizeObserverCallback | undefined;
+const mockResizeObserver = vi.fn(function (callback: ResizeObserverCallback) {
+  resizeCallback = callback;
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
+
+beforeEach(() => {
+  resizeCallback = undefined;
+  vi.stubGlobal("ResizeObserver", mockResizeObserver);
+  // ⚠️ Do NOT call vi.unstubAllGlobals() in afterEach — it removes global stubs from
+  // vitest.setup.ts ($fetch, etc.)
+});
+
+function simulateResizeTo(width: number) {
+  resizeCallback?.(
+    [{ contentBoxSize: [{ inlineSize: width, blockSize: 0 }], contentRect: { width } } as unknown as ResizeObserverEntry],
+    {} as ResizeObserver
+  );
+}
+
+function stubOffsetHeight(el: Element, height: number) {
+  Object.defineProperty(el, "offsetHeight", { value: height, configurable: true });
+}
+
+describe("MasonryGrid", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(MasonryGrid);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders as div by default", async () => {
+    const wrapper = await mountSuspended(MasonryGrid);
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders a different tag when provided", async () => {
+    const wrapper = await mountSuspended(MasonryGrid, {
+      props: { tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  it("renders slot content in natural authoring order", async () => {
+    const wrapper = await mountSuspended(MasonryGrid, {
+      slots: {
+        "item-1": "<div>Item 1</div>",
+        "item-2": "<div>Item 2</div>",
+      },
+    });
+    const items = wrapper.findAll(".masonry-grid-item");
+    expect(items.map((item) => item.text())).toEqual(["Item 1", "Item 2"]);
+  });
+
+  it("renders no items when no slots are provided", async () => {
+    const wrapper = await mountSuspended(MasonryGrid);
+    expect(wrapper.findAll(".masonry-grid-item")).toHaveLength(0);
+  });
+
+  it("does not absolutely position items when only one column fits (single-column fallback)", async () => {
+    const wrapper = await mountSuspended(MasonryGrid, {
+      slots: { "item-1": "<div>Item 1</div>", "item-2": "<div>Item 2</div>" },
+    });
+    await nextTick();
+    await nextTick();
+    expect(wrapper.find(".masonry-grid-wrapper").classes()).not.toContain("multiple-cols");
+    const item = wrapper.find(".masonry-grid-item").element as HTMLElement;
+    expect(item.style.getPropertyValue("--_position")).toBe("");
+  });
+
+  it("packs items into whichever column is currently shortest", async () => {
+    const wrapper = await mountSuspended(MasonryGrid, {
+      // itemMinWidth (300, default) + gap (12, default) = 312 -> floor(700/312) = 2 columns
+      slots: {
+        "item-1": "<div>Item 1</div>",
+        "item-2": "<div>Item 2</div>",
+        "item-3": "<div>Item 3</div>",
+      },
+    });
+    const items = wrapper.findAll(".masonry-grid-item");
+    stubOffsetHeight(items[0]!.element, 100);
+    stubOffsetHeight(items[1]!.element, 50);
+    stubOffsetHeight(items[2]!.element, 80);
+
+    simulateResizeTo(700);
+    await nextTick();
+    await nextTick(); // updateGrid is itself wrapped in an extra nextTick()
+
+    // col heights start [0, 0]. item-1 (h=100) -> shortest is col 0 -> col becomes 112.
+    // item-2 (h=50) -> shortest is now col 1 (0 < 112) -> col becomes 62.
+    // item-3 (h=80) -> shortest is still col 1 (62 < 112) -> placed below item-2.
+    // itemWidth (stretch) = floor((700 - 1*12) / 2) = 344; column steps are itemWidth+gap = 356px.
+    const el1 = items[0]!.element as HTMLElement;
+    const el2 = items[1]!.element as HTMLElement;
+    const el3 = items[2]!.element as HTMLElement;
+    expect(el1.style.getPropertyValue("--_position-top")).toBe("0px");
+    expect(el1.style.getPropertyValue("--_position-left")).toBe("0px");
+    expect(el2.style.getPropertyValue("--_position-top")).toBe("0px");
+    expect(el2.style.getPropertyValue("--_position-left")).toBe("356px");
+    expect(el3.style.getPropertyValue("--_position-top")).toBe("62px");
+    expect(el3.style.getPropertyValue("--_position-left")).toBe("356px");
+  });
+
+  it("uses a fixed item width when fixedWidth is set, ignoring stretch sizing", async () => {
+    const wrapper = await mountSuspended(MasonryGrid, {
+      props: { fixedWidth: true, itemMinWidth: 200 },
+      slots: { "item-1": "<div>Item 1</div>", "item-2": "<div>Item 2</div>" },
+    });
+    simulateResizeTo(700); // (200 + 12) -> floor(700/212) = 3 columns
+    await nextTick();
+    await nextTick();
+    const item = wrapper.find(".masonry-grid-item").element as HTMLElement;
+    expect(item.style.getPropertyValue("--_element-width")).toBe("200px");
+  });
+
+  it("spaces fixed-width columns by exactly itemWidth + gap, and centers the block via justify", async () => {
+    const wrapper = await mountSuspended(MasonryGrid, {
+      props: { fixedWidth: true, itemMinWidth: 200, gap: 20, justify: "center" },
+      slots: {
+        "item-1": "<div>Item 1</div>",
+        "item-2": "<div>Item 2</div>",
+        "item-3": "<div>Item 3</div>",
+      },
+    });
+    simulateResizeTo(700); // (200 + 20) -> floor(700/220) = 3 columns
+    await nextTick();
+    await nextTick();
+
+    // 3 columns * 200px + 2 gaps * 20px = 640px total content width, centered in 700px
+    // available -> 30px leftover on each side.
+    const items = wrapper.findAll(".masonry-grid-item");
+    const [el1, el2, el3] = items.map((item) => item.element as HTMLElement);
+    expect(el1!.style.getPropertyValue("--_position-left")).toBe("30px");
+    expect(el2!.style.getPropertyValue("--_position-left")).toBe("250px");
+    expect(el3!.style.getPropertyValue("--_position-left")).toBe("470px");
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(MasonryGrid, {
+      props: { styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+});

package/app/components/01.atoms/navigation/skip-links/CONSUMER-STYLING.md

@@ -0,0 +1,31 @@
+# SkipLinks — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--skip-links-z-index` | `1000` | Stacking context of the revealed skip-nav panel |
+| `--skip-links-gap` | `0.2rem` | Gap between stacked skip links |
+| `--skip-links-background-colour` | `black` | Skip-nav panel background |
+| `--skip-links-border-colour` | `white` | Skip-nav panel border colour |
+| `--skip-links-border-width` | `1px` | Skip-nav panel border width |
+| `--skip-links-padding` | `0.2rem` | Skip-nav panel padding |
+| `--skip-links-text-colour` | `white` | Skip link text colour |
+| `--skip-links-link-padding-block` | `0.8rem` | Skip link vertical padding |
+| `--skip-links-link-padding-inline` | `1.2rem` | Skip link horizontal padding |
+| `--skip-links-transition-duration` | `0.3s` | Duration of the reveal transition when a link is focused |
+| `--skip-links-focus-outline-width` | `2px` | Focus outline width on a skip link |
+| `--skip-links-focus-outline-colour` | `white` | Focus outline colour on a skip link |
+
+```css
+.my-page {
+  --skip-links-background-colour: #111;
+  --skip-links-border-colour: #ffd700;
+  --skip-links-focus-outline-colour: #ffd700;
+}
+```
+
+## Links are prop-driven
+
+The set of skip links is provided via the `links` prop (`{ href, label }[]`), not slots — see the
+skill doc for the default value and localisation notes.

package/app/components/01.atoms/navigation/skip-links/SkipLinks.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="skip-links" :class="[elementClasses]">
+    <div v-if="$slots.homeLink" class="skip-links__home">
+      <slot name="homeLink"></slot>
+    </div>
+    <nav class="skip-links__nav" :aria-label="ariaLabel">
+      <a v-for="link in links" :key="link.href" :href="link.href" class="skip-links__link">{{ link.label }}</a>
+    </nav>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { SkipLink } from "~/types/components"
+
+interface Props {
+  links?: SkipLink[]
+  /** aria-label on the nav landmark — override for localisation. */
+  ariaLabel?: string
+  styleClassPassthrough?: string | string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  links: () => [
+    { href: "#main-content", label: "Skip to main content" },
+    { href: "#footer-content", label: "Skip to footer" },
+  ],
+  ariaLabel: "Skip navigation",
+  styleClassPassthrough: () => [],
+})
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough)
+  }
+)
+</script>
+
+<style lang="css">
+@layer components {
+  .skip-links {
+    position: relative;
+
+    .skip-links__nav {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: var(--skip-links-z-index, 1000);
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--skip-links-gap, 0.2rem);
+      background-color: var(--skip-links-background-colour, black);
+      border: var(--skip-links-border-width, 1px) solid var(--skip-links-border-colour, white);
+      padding: var(--skip-links-padding, 0.2rem);
+      margin: 0;
+
+      /* Hidden off-screen via transform — does NOT break keyboard focusability */
+      opacity: 0;
+      transform: translateY(-100%);
+      transition:
+        transform var(--skip-links-transition-duration, 0.3s) ease-in-out,
+        opacity var(--skip-links-transition-duration, 0.3s) ease-in-out;
+
+      &:focus-within {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .skip-links__link {
+      display: block;
+      color: var(--skip-links-text-colour, white);
+      text-decoration: none;
+      padding: var(--skip-links-link-padding-block, 0.8rem) var(--skip-links-link-padding-inline, 1.2rem);
+      text-wrap: nowrap;
+
+      &:focus-visible {
+        outline: var(--skip-links-focus-outline-width, 2px) solid var(--skip-links-focus-outline-colour, white);
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skip-links .skip-links__nav {
+      transition: none;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/navigation/skip-links/stories/SkipLinks.stories.ts

@@ -0,0 +1,113 @@
+import SkipLinks from "../SkipLinks.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { SkipLink } from "~/types/components";
+
+const meta: Meta<typeof SkipLinks> = {
+  title: "Atoms/Navigation/SkipLinks",
+  component: SkipLinks,
+  argTypes: {
+    links: {
+      control: "object",
+      description: "Ordered list of { href, label } skip targets",
+    },
+    ariaLabel: {
+      control: "text",
+      description: "aria-label on the nav landmark — override for localisation",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    ariaLabel: "Skip navigation",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An accessibility utility that renders a set of visually-hidden links revealed only on keyboard focus, letting keyboard/screen-reader users jump past repeated navigation straight to main content, the footer, or any other in-page target. The links are placed first in the DOM — consumers should place `<SkipLinks>` at the very top of their page layout.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SkipLinks>;
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { SkipLinks },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <p style="padding: 2rem; text-align: center;">
+          The skip links below are visually hidden until focused. Click into this preview, then
+          press <kbd>Tab</kbd> to reveal them.
+        </p>
+        <SkipLinks v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+const customLinks: SkipLink[] = [
+  { href: "#site-navigation", label: "Skip to navigation" },
+  { href: "#main-content", label: "Skip to main content" },
+  { href: "#footer-content", label: "Skip to footer" },
+];
+
+export const CustomLinks: Story = {
+  name: "Custom Links",
+  args: { links: customLinks },
+  render: (args) => ({
+    components: { SkipLinks },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <p style="padding: 2rem; text-align: center;">
+          Press <kbd>Tab</kbd> after clicking into this preview to reveal three custom skip links.
+        </p>
+        <SkipLinks v-bind="args" />
+      </div>
+    `,
+  }),
+};
+
+export const AlwaysVisible: Story = {
+  name: "Always Visible (for review)",
+  parameters: {
+    docs: {
+      description: {
+        story: "Forces the skip-nav panel open via `:focus-within` emulation so it can be inspected without tabbing — for visual review only, not representative of real usage.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { SkipLinks },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+        <style>
+          .always-visible-demo .skip-links__nav {
+            opacity: 1 !important;
+            transform: translateY(0) !important;
+            position: static !important;
+          }
+        </style>
+        <div class="always-visible-demo">
+          <SkipLinks v-bind="args" />
+        </div>
+      </div>
+    `,
+  }),
+};

package/app/components/01.atoms/navigation/skip-links/tests/SkipLinks.spec.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import SkipLinks from "../SkipLinks.vue";
+import type { SkipLink } from "~/types/components";
+
+describe("SkipLinks", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(SkipLinks);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(SkipLinks);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure (all props set)", async () => {
+    const wrapper = await mountSuspended(SkipLinks, {
+      props: {
+        links: [{ href: "#content", label: "Skip to content" }],
+        ariaLabel: "Custom skip nav",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders the default main-content and footer links", async () => {
+    const wrapper = await mountSuspended(SkipLinks);
+    const links = wrapper.findAll(".skip-links__link");
+    expect(links).toHaveLength(2);
+    expect(links[0]!.attributes("href")).toBe("#main-content");
+    expect(links[0]!.text()).toBe("Skip to main content");
+    expect(links[1]!.attributes("href")).toBe("#footer-content");
+    expect(links[1]!.text()).toBe("Skip to footer");
+  });
+
+  it("renders custom links when the links prop is provided", async () => {
+    const customLinks: SkipLink[] = [
+      { href: "#nav", label: "Skip to navigation" },
+      { href: "#search", label: "Skip to search" },
+      { href: "#content", label: "Skip to content" },
+    ];
+    const wrapper = await mountSuspended(SkipLinks, { props: { links: customLinks } });
+    const links = wrapper.findAll(".skip-links__link");
+    expect(links).toHaveLength(3);
+    expect(links.map((link) => link.text())).toEqual(["Skip to navigation", "Skip to search", "Skip to content"]);
+  });
+
+  it("defaults the nav aria-label to 'Skip navigation'", async () => {
+    const wrapper = await mountSuspended(SkipLinks);
+    expect(wrapper.find(".skip-links__nav").attributes("aria-label")).toBe("Skip navigation");
+  });
+
+  it("uses a custom ariaLabel when provided", async () => {
+    const wrapper = await mountSuspended(SkipLinks, { props: { ariaLabel: "Custom skip nav" } });
+    expect(wrapper.find(".skip-links__nav").attributes("aria-label")).toBe("Custom skip nav");
+  });
+
+  it("does not render the home-link slot wrapper when the slot is unused", async () => {
+    const wrapper = await mountSuspended(SkipLinks);
+    expect(wrapper.find(".skip-links__home").exists()).toBe(false);
+  });
+
+  it("renders the homeLink slot content when provided", async () => {
+    const wrapper = await mountSuspended(SkipLinks, {
+      slots: { homeLink: "<a href='/' class='logo-link'>Home</a>" },
+    });
+    expect(wrapper.find(".skip-links__home").exists()).toBe(true);
+    expect(wrapper.find(".logo-link").exists()).toBe(true);
+  });
+});

package/app/components/01.atoms/navigation/skip-links/tests/__snapshots__/SkipLinks.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SkipLinks > renders correct HTML structure (all props set) 1`] = `
+"<div class="skip-links">
+  <!--v-if-->
+  <nav class="skip-links__nav" aria-label="Custom skip nav"><a href="#content" class="skip-links__link">Skip to content</a></nav>
+</div>"
+`;
+
+exports[`SkipLinks > renders correct HTML structure (default props) 1`] = `
+"<div class="skip-links">
+  <!--v-if-->
+  <nav class="skip-links__nav" aria-label="Skip navigation"><a href="#main-content" class="skip-links__link">Skip to main content</a><a href="#footer-content" class="skip-links__link">Skip to footer</a></nav>
+</div>"
+`;