srcdev-nuxt-components 9.1.36 → 9.1.37

package/.claude/settings.json

@@ -24,6 +24,7 @@
       "Bash(git add:*)",
       "Bash(gh release:*)",
       "Bash(node -e ':*)"
-    ]
+    ],
+    "additionalDirectories": []
   }
 }

package/.claude/settings.local.json

@@ -29,13 +29,13 @@
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",
       "/Users/simoncornforth/websites/nuxt-components/.claude/skills",
+      "/Users/simoncornforth/websites/nuxt-components/.claude/skills/components",
       "/Users/simoncornforth/websites/nuxt-components/app/components/02.molecules/navigation/site-navigation/tests",
       "/Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/app/pages",
       "/Users/simoncornforth/websites/nuxt-components/app/assets/styles/extends-layer",
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms",
       "/private/tmp",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/scroll-parallax-section"
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video"
     ]
   }
 }

package/.claude/skills/components/capture-qr-code.md

@@ -0,0 +1,84 @@
+# CaptureQrCode
+
+Live camera QR code scanner. Streams the device camera, detects QR codes in real time, and displays the decoded results inline. Handles camera errors, page visibility changes, and route navigation — stopping media streams cleanly in all cases.
+
+**File**: `app/components/02.molecules/qr-code/CaptureQrCode.vue`
+
+## Prerequisites
+
+The `nuxt-qrcode` Nuxt module must be registered in the consuming app's `nuxt.config.ts`:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["nuxt-qrcode"],
+});
+```
+
+Camera access requires a secure context (HTTPS or localhost) and the user granting camera permission.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.capture-qr-stream` | root | always present |
+| `.camera-stopped` | inner | shown when camera is off but no error |
+| `.camera-error` | inner | shown when an error has occurred |
+| `.scanned-results` | inner | shown when at least one code has been decoded |
+
+## Behaviour
+
+- Camera starts automatically on mount (`state.cameraOn = true`)
+- When the page becomes hidden (tab switch, minimize), the camera stops and media streams are released
+- On route leave (`onBeforeRouteLeave`), the camera stops and streams are released
+- On `<KeepAlive>` deactivate/activate, camera is stopped/restarted accordingly
+- If the user denies camera permission or another error occurs, the `.camera-error` state is shown with the error message and a **Reset camera** button
+- Detected QR codes replace the previous results — each scan is a fresh result set
+- Results are displayed as a `<ul>` inside `.scanned-results`
+
+## Usage
+
+Drop in where camera scanning is needed. No configuration required beyond the module being present:
+
+```vue
+<CaptureQrCode />
+```
+
+With styling:
+
+```vue
+<CaptureQrCode style-class-passthrough="my-scanner" />
+```
+
+## CSS override
+
+The root element is a square (`aspect-ratio: 1 / 1`) by default. Override in a consuming page or component:
+
+```css
+.my-scanner.capture-qr-stream {
+  aspect-ratio: auto;
+  max-width: 40rem;
+}
+
+.my-scanner .camera-error {
+  padding: 1.6rem;
+  border-radius: 0.8rem;
+  background-color: var(--theme-surface-error);
+}
+
+.my-scanner .scanned-results {
+  margin-block-start: 1.6rem;
+  font-size: 1.4rem;
+}
+```
+
+## Notes
+
+- The component does not emit the detected values — results are rendered inline. To act on scan results in a parent, extend the component or use `nuxt-qrcode`'s `QrcodeStream` directly with `@detect`.
+- Media streams are stopped via two strategies: via the `QrcodeStream` component ref and via a document-level `querySelectorAll("video")` sweep — the sweep acts as a safety net if the ref is unavailable.

package/.claude/skills/components/decode-qr-code.md

@@ -0,0 +1,84 @@
+# DecodeQrCode
+
+QR code decoder for static images. Accepts images via file picker or drag-and-drop, decodes any QR codes found, and displays the results inline.
+
+**File**: `app/components/02.molecules/qr-code/DecodeQrCode.vue`
+
+## Prerequisites
+
+The `nuxt-qrcode` Nuxt module must be registered in the consuming app's `nuxt.config.ts`:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["nuxt-qrcode"],
+});
+```
+
+No camera permission is required — this component works entirely with uploaded or dropped image files.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.decode-qr-code` | root | always present |
+| `.qr-code-capture` | file input | the `QrcodeCapture` file-picker element |
+| `.qr-code-dropzone` | drop zone | the `QrcodeDropZone` drag-and-drop area |
+| `.scanned-results` | inner | shown when at least one code has been decoded |
+
+## Behaviour
+
+- Two input methods are rendered side by side: a file picker (`.qr-code-capture`) and a drag-and-drop zone (`.qr-code-dropzone`)
+- Both share the same `onDetect` handler — results are displayed in the same `.scanned-results` list regardless of input method
+- Detected QR codes replace the previous results — each decode is a fresh result set
+- If the decoded array is empty, `.scanned-results` is hidden
+- The drop zone has a dashed border and minimum height by default — style with `.qr-code-dropzone` to customise
+
+## Usage
+
+Drop in where image-based QR decoding is needed:
+
+```vue
+<DecodeQrCode />
+```
+
+With styling:
+
+```vue
+<DecodeQrCode style-class-passthrough="my-decoder" />
+```
+
+## CSS override
+
+```css
+.my-decoder.decode-qr-code {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.my-decoder .qr-code-dropzone {
+  min-height: 12rem;
+  border-radius: 1rem;
+  border-color: var(--theme-input-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.my-decoder .scanned-results {
+  margin-block-start: 1.6rem;
+  font-size: 1.4rem;
+}
+```
+
+## Notes
+
+- Like `CaptureQrCode`, results are rendered inline and not emitted. To act on results in a parent, extend the component or use `nuxt-qrcode`'s `QrcodeCapture` / `QrcodeDropZone` primitives directly.
+- The component renders both input methods unconditionally. If only one is needed, use the underlying `QrcodeCapture` or `QrcodeDropZone` primitives directly.

package/.claude/skills/components/display-qr-code.md

@@ -0,0 +1,64 @@
+# DisplayQrCode
+
+Renders a styled QR code SVG from a string value. Supports colour, size, corner radius, and pixel/marker shape variants.
+
+**File**: `app/components/01.atoms/qr-code/DisplayQrCode.vue`
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `qr-value` | `string` | required | The string to encode into the QR code |
+| `variant` | `QrCodeVariant` | `{ inner: "default", marker: "default", pixel: "default" }` | Shape variants for inner markers, outer markers, and pixels |
+| `radius` | `number` | `0` | Corner rounding applied to pixels/markers (0–1 scale) |
+| `black-color` | `string` | `"currentColor"` | Colour for the dark modules |
+| `white-color` | `string` | `"transparent"` | Colour for the light modules |
+| `size` | `string` | `"256px"` | Width of the QR code (height matches via `aspect-ratio: 1 / 1`) |
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+### QrCodeVariant type
+
+```typescript
+import type { QrCodeVariant } from "srcdev-nuxt-components/types/components";
+
+// Each field accepts: "default" | "circle" | "rounded" | "dots" | "classy" | "classy-rounded"
+const variant: QrCodeVariant = {
+  inner: "circle",
+  marker: "rounded",
+  pixel: "dots",
+};
+```
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.display-qr-code` | root | always present |
+
+## Usage
+
+Minimal — encodes a URL with default styling:
+
+```vue
+<DisplayQrCode qr-value="https://example.com" />
+```
+
+Custom size, colour, and rounded pixels:
+
+```vue
+<DisplayQrCode
+  qr-value="https://example.com"
+  size="320px"
+  black-color="#1a1a2e"
+  white-color="#f5f5f5"
+  :radius="0.5"
+  :variant="{ inner: 'circle', marker: 'rounded', pixel: 'default' }"
+/>
+```
+
+## Notes
+
+- The component renders directly as the `Qrcode` element from `nuxt-qrcode` — there is no wrapper `<div>`. The `.display-qr-code` class is applied to the `Qrcode` root, which renders as an `<svg>`.
+- `size` is applied via CSS `v-bind()` — pass any valid CSS length value (`px`, `rem`, `%`, etc.).
+- `black-color` defaults to `currentColor`, so the QR code inherits the surrounding text colour automatically unless overridden.
+- `white-color` defaults to `transparent`, making the background of the QR code see-through by default.

package/.claude/skills/index.md

@@ -68,11 +68,13 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
     ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, reduced-motion fallback, CSS tokens
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
-    ├── scroll-parallax-section.md — ScrollParallaxSection: JS-driven parallax background section, parallaxStrength guide, height token, reduced-motion pattern
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
-    └── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
+    ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
+    ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
+    ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
+    └── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
 ```
 
 ## Skill file template

package/app/components/01.atoms/qr-code/DisplayQrCode.vue

@@ -0,0 +1,50 @@
+<template>
+  <Qrcode
+    :value="qrValue"
+    class="display-qr-code"
+    :variant
+    :radius
+    :black-color
+    :white-color
+    :class="[elementClasses]"
+  />
+</template>
+
+<script setup lang="ts">
+import type { QrCodeVariant } from "~/types/components";
+
+interface Props {
+  qrValue: string;
+  variant?: QrCodeVariant;
+  radius?: number;
+  blackColor?: string;
+  whiteColor?: string;
+  size?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: () => ({ inner: "default", marker: "default", pixel: "default" }),
+  radius: 0,
+  blackColor: "currentColor",
+  whiteColor: "transparent",
+  size: "256px",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .display-qr-code {
+    aspect-ratio: 1 / 1;
+    width: v-bind(size);
+  }
+}
+</style>

package/app/components/01.atoms/qr-code/stories/DisplayQrCode.stories.ts

@@ -0,0 +1,206 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import DisplayQrCodeComponent from "../DisplayQrCode.vue";
+import type { QrCodeVariant } from "../../../../types/components";
+
+const meta: Meta<typeof DisplayQrCodeComponent> = {
+  title: "Atoms/QR Code/DisplayQrCode",
+  component: DisplayQrCodeComponent,
+  argTypes: {
+    qrValue: {
+      control: { type: "text" },
+      description: "The value/content to encode in the QR code",
+      table: { category: "Content" },
+    },
+    size: {
+      control: { type: "text" },
+      description: "Size of the QR code (CSS value like '256px', '10rem')",
+      table: { category: "Appearance" },
+    },
+    radius: {
+      control: { type: "range", min: 0, max: 20, step: 1 },
+      description: "Border radius of the QR code corners",
+      table: { category: "Appearance" },
+    },
+    blackColor: {
+      control: { type: "color" },
+      description: "Color of the QR code foreground elements",
+      table: { category: "Appearance" },
+    },
+    whiteColor: {
+      control: { type: "color" },
+      description: "Color of the QR code background",
+      table: { category: "Appearance" },
+    },
+    variant: { table: { disable: true } },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    qrValue: "https://github.com/srcdev/nuxt-components",
+    size: "256px",
+    radius: 0,
+    blackColor: "#000000",
+    whiteColor: "transparent",
+    styleClassPassthrough: [],
+  },
+};
+
+export default meta;
+
+interface QrStoryArgs {
+  qrValue: string;
+  size: string;
+  radius: number;
+  blackColor: string;
+  whiteColor: string;
+  styleClassPassthrough: string[];
+}
+
+const DisplayTemplate: StoryFn<QrStoryArgs> = (args, { parameters }) => ({
+  components: { DisplayQrCodeComponent },
+  setup() {
+    const variant: QrCodeVariant = parameters?.variant || {
+      inner: "default",
+      marker: "default",
+      pixel: "default",
+    };
+    return { args, variant };
+  },
+  template: `
+    <div style="padding: 40px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 8px;">
+      <DisplayQrCodeComponent
+        :qrValue="args.qrValue"
+        :variant="variant"
+        :radius="args.radius"
+        :blackColor="args.blackColor"
+        :whiteColor="args.whiteColor"
+        :size="args.size"
+        :style-class-passthrough="args.styleClassPassthrough"
+      />
+    </div>
+  `,
+});
+
+export const Default = DisplayTemplate.bind({});
+
+export const Website = DisplayTemplate.bind({});
+Website.args = { qrValue: "https://nuxt.com", radius: 8, blackColor: "#000000" };
+Website.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
+
+export const VariantDefault = DisplayTemplate.bind({});
+VariantDefault.args = { qrValue: "Default variant style", radius: 4 };
+VariantDefault.parameters = { variant: { inner: "default", marker: "default", pixel: "default" } };
+
+export const VariantCircle = DisplayTemplate.bind({});
+VariantCircle.args = { qrValue: "Circle variant style", radius: 8, blackColor: "#1e40af" };
+VariantCircle.parameters = { variant: { inner: "circle", marker: "circle", pixel: "circle" } };
+
+export const VariantRounded = DisplayTemplate.bind({});
+VariantRounded.args = { qrValue: "Rounded variant style", radius: 12, blackColor: "#059669" };
+VariantRounded.parameters = { variant: { inner: "rounded", marker: "rounded", pixel: "rounded" } };
+
+export const VariantDots = DisplayTemplate.bind({});
+VariantDots.args = { qrValue: "Dots variant style", radius: 6, blackColor: "#dc2626" };
+VariantDots.parameters = { variant: { inner: "dots", marker: "dots", pixel: "dots" } };
+
+export const VariantMixed = DisplayTemplate.bind({});
+VariantMixed.args = { qrValue: "Mixed variants for creative styling", radius: 10, blackColor: "#7c3aed" };
+VariantMixed.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
+
+export const WiFiConnection = DisplayTemplate.bind({});
+WiFiConnection.args = { qrValue: "WIFI:T:WPA;S:MyHomeNetwork;P:mySecurePassword123;H:false;", blackColor: "#1e40af", radius: 4 };
+WiFiConnection.parameters = { variant: { inner: "rounded", marker: "circle", pixel: "default" } };
+
+export const VCardContact = DisplayTemplate.bind({});
+VCardContact.args = {
+  qrValue: "BEGIN:VCARD\\nVERSION:3.0\\nFN:John Doe\\nORG:Acme Corp\\nTITLE:Software Engineer\\nTEL:+1234567890\\nEMAIL:john.doe@acme.com\\nURL:https://johndoe.dev\\nEND:VCARD",
+  blackColor: "#059669",
+  radius: 12,
+};
+VCardContact.parameters = { variant: { inner: "dots", marker: "rounded", pixel: "circle" } };
+
+export const SmallSize = DisplayTemplate.bind({});
+SmallSize.args = { qrValue: "Small QR for tight spaces", size: "128px", radius: 2, blackColor: "#f59e0b" };
+SmallSize.parameters = { variant: { inner: "dots", marker: "circle", pixel: "rounded" } };
+
+export const LargeSize = DisplayTemplate.bind({});
+LargeSize.args = { qrValue: "Large QR for posters and signage", size: "400px", radius: 16, blackColor: "#0ea5e9" };
+LargeSize.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
+
+export const HighContrast = DisplayTemplate.bind({});
+HighContrast.args = { qrValue: "High contrast for accessibility", blackColor: "#000000", whiteColor: "#ffffff", radius: 0, size: "256px" };
+HighContrast.parameters = { variant: { inner: "default", marker: "default", pixel: "default" } };
+
+const PlaygroundTemplate: StoryFn<QrStoryArgs> = (args) => ({
+  components: { DisplayQrCodeComponent },
+  setup() {
+    const qrValue = ref(args.qrValue);
+    const variant = ref<QrCodeVariant>({ inner: "circle", marker: "rounded", pixel: "dots" });
+    const radius = ref(args.radius);
+    const blackColor = ref(args.blackColor);
+    const whiteColor = ref(args.whiteColor);
+    const sizeValue = ref(256);
+    const size = computed(() => `${sizeValue.value}px`);
+    const presetValues = [
+      { label: "Website URL", value: "https://nuxt.com" },
+      { label: "WiFi Network", value: "WIFI:T:WPA;S:MyNetwork;P:password123;" },
+      { label: "Phone Number", value: "tel:+1234567890" },
+      { label: "Email", value: "mailto:hello@example.com" },
+      { label: "SMS", value: "sms:+1234567890?body=Hello!" },
+      { label: "Location", value: "geo:40.7128,-74.0060" },
+    ];
+    const variantOptions = ["default", "circle", "rounded", "dots"];
+    return { qrValue, variant, radius, blackColor, whiteColor, sizeValue, size, presetValues, variantOptions };
+  },
+  template: `
+    <div style="padding: 40px;">
+      <div style="display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start;">
+        <div style="display: flex; align-items: center; justify-content: center; min-height: 400px; background: #f8fafc; border-radius: 8px; padding: 40px;">
+          <DisplayQrCodeComponent :qrValue="qrValue" :variant="variant" :radius="radius" :blackColor="blackColor" :whiteColor="whiteColor" :size="size" />
+        </div>
+        <div style="background: white; padding: 24px; border-radius: 8px; border: 1px solid #e5e7eb;">
+          <h3 style="margin: 0 0 20px 0; color: #374151; font-size: 18px;">QR Code Playground</h3>
+          <div style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Quick Presets:</label>
+            <select @change="qrValue = $event.target.value" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+              <option value="">Select a preset...</option>
+              <option v-for="preset in presetValues" :key="preset.label" :value="preset.value">{{ preset.label }}</option>
+            </select>
+          </div>
+          <div style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Custom Content:</label>
+            <textarea v-model="qrValue" rows="3" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 12px;" placeholder="Enter QR code content..." />
+          </div>
+          <div style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Style Variants:</label>
+            <div style="display: grid; gap: 8px;">
+              <div><label style="font-size: 12px; color: #6b7280;">Inner:</label><select v-model="variant.inner" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
+              <div><label style="font-size: 12px; color: #6b7280;">Marker:</label><select v-model="variant.marker" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
+              <div><label style="font-size: 12px; color: #6b7280;">Pixel:</label><select v-model="variant.pixel" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
+            </div>
+          </div>
+          <div style="margin-bottom: 20px;">
+            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Appearance:</label>
+            <div style="display: grid; gap: 12px;">
+              <div><label style="font-size: 12px; color: #6b7280;">Size: {{ sizeValue }}px</label><input v-model.number="sizeValue" type="range" min="128" max="400" step="16" style="width: 100%;" /></div>
+              <div><label style="font-size: 12px; color: #6b7280;">Radius: {{ radius }}px</label><input v-model.number="radius" type="range" min="0" max="20" step="1" style="width: 100%;" /></div>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+                <div><label style="font-size: 12px; color: #6b7280;">Foreground:</label><input v-model="blackColor" type="color" style="width: 100%; height: 32px; border: 1px solid #d1d5db; border-radius: 4px;" /></div>
+                <div><label style="font-size: 12px; color: #6b7280;">Background:</label><input v-model="whiteColor" type="color" style="width: 100%; height: 32px; border: 1px solid #d1d5db; border-radius: 4px;" /></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+export const InteractivePlayground = PlaygroundTemplate.bind({});
+InteractivePlayground.args = {
+  qrValue: "https://github.com/srcdev/nuxt-components",
+  radius: 8,
+  blackColor: "#000000",
+  whiteColor: "transparent",
+  size: "256px",
+  styleClassPassthrough: [],
+};

package/app/components/01.atoms/qr-code/tests/DisplayQrCode.spec.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayQrCode from "../DisplayQrCode.vue";
+import type { QrCodeVariant } from "~/types/components";
+
+const defaultProps = {
+  qrValue: "https://example.com",
+};
+
+describe("DisplayQrCode", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders a single root element", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.element).toBeTruthy();
+  });
+
+  it("always has the display-qr-code class", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    expect(wrapper.classes()).toContain("display-qr-code");
+  });
+
+  // ─── Default props ────────────────────────────────────────────────────────
+
+  it("defaults radius to 0", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { radius: number }
+    expect((wrapper.vm as unknown as VM).radius).toBe(0);
+  });
+
+  it("defaults blackColor to currentColor", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { blackColor: string }
+    expect((wrapper.vm as unknown as VM).blackColor).toBe("currentColor");
+  });
+
+  it("defaults whiteColor to transparent", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { whiteColor: string }
+    expect((wrapper.vm as unknown as VM).whiteColor).toBe("transparent");
+  });
+
+  it("defaults size to 256px", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { size: string }
+    expect((wrapper.vm as unknown as VM).size).toBe("256px");
+  });
+
+  it("defaults variant to all-default", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, { props: defaultProps });
+    interface VM { variant: QrCodeVariant }
+    expect((wrapper.vm as unknown as VM).variant).toEqual({ inner: "default", marker: "default", pixel: "default" });
+  });
+
+  // ─── Custom props ─────────────────────────────────────────────────────────
+
+  it("reflects a custom radius prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, radius: 12 },
+    });
+    interface VM { radius: number }
+    expect((wrapper.vm as unknown as VM).radius).toBe(12);
+  });
+
+  it("reflects a custom blackColor prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, blackColor: "#ff0000" },
+    });
+    interface VM { blackColor: string }
+    expect((wrapper.vm as unknown as VM).blackColor).toBe("#ff0000");
+  });
+
+  it("reflects a custom whiteColor prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, whiteColor: "#ffffff" },
+    });
+    interface VM { whiteColor: string }
+    expect((wrapper.vm as unknown as VM).whiteColor).toBe("#ffffff");
+  });
+
+  it("reflects a custom size prop", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, size: "128px" },
+    });
+    interface VM { size: string }
+    expect((wrapper.vm as unknown as VM).size).toBe("128px");
+  });
+
+  it("reflects a custom variant prop", async () => {
+    const variant: QrCodeVariant = { inner: "circle", marker: "rounded", pixel: "dots" };
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, variant },
+    });
+    interface VM { variant: QrCodeVariant }
+    expect((wrapper.vm as unknown as VM).variant).toEqual(variant);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("retains display-qr-code class alongside styleClassPassthrough", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      props: { ...defaultProps, styleClassPassthrough: "extra" },
+    });
+    expect(wrapper.classes()).toContain("display-qr-code");
+    expect(wrapper.classes()).toContain("extra");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DisplayQrCode, {
+      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");
+  });
+});