srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/02.molecules/profile-section/tests/__snapshots__/ProfileSection.spec.ts.snap

@@ -7,18 +7,12 @@ exports[`ProfileSection > renders correct HTML structure 1`] = `
     <!--v-if-->
   </header>
   <div class="profile-section-inner">
-    <div class="picture"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test profile picture" class="profile-picture" src="/_ipx/_/images/test.jpg"></div>
-    <div class="profile-info">
-      <div class="profile-info-content">
-        <div class="profile-info-block">
-          <p>Profile info content profile-info-1</p>
-        </div>
-        <div class="profile-info-block">
-          <p>Profile info content profile-info-2</p>
-        </div>
-        <div class="profile-info-block">
-          <p>Profile info content profile-info-3</p>
-        </div>
+    <div class="profile-section-picture"><img width="828" height="1104" data-nuxt-img="" srcset="/_ipx/s_828x1104/images/test.jpg 1x, /_ipx/s_1656x2208/images/test.jpg 2x" alt="Test profile picture" class="profile-section-image" src="/_ipx/s_828x1104/images/test.jpg"></div>
+    <div class="profile-section-info">
+      <div class="profile-section-info-content">
+        <div class="profile-section-info-block"></div>
+        <div class="profile-section-info-block"></div>
+        <div class="profile-section-info-block"></div>
       </div>
       <!--v-if-->
     </div>

package/app/components/02.molecules/prompt/CONSUMER-STYLING.md

@@ -0,0 +1,51 @@
+# DisplayPrompt — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--display-prompt-transition-duration` | `200ms` | Collapse/fade duration when the prompt closes (off under `prefers-reduced-motion: reduce`) |
+
+Everything visual inside the prompt (surface, text, accent strip, icon, dismiss button) is rendered
+by `AlertContent`, or `AlertMaskedContent` with `masked`, and styled by their tokens. See
+`02.molecules/alert-content/CONSUMER-STYLING.md` and `02.molecules/alert-masked-content/CONSUMER-STYLING.md`.
+The palette comes from the `data-theme` attribute on `.display-prompt-wrapper` (`--theme-*` tokens).
+
+> Changed 2026-09-28: `--display-prompt-transition-duration` is new (the transition was a hardcoded
+> `all 200ms`), and the transition now respects reduced motion.
+
+No private `--_` tokens.
+
+---
+
+## State hooks
+
+| Hook | Element | When |
+|---|---|---|
+| `.closed` | `.display-prompt` (root) | Dismissed without a parent `v-model`; the root is also `inert` |
+| `[data-theme="info\|success\|warning\|error"]` | `.display-prompt-wrapper` | The resolved `theme` |
+
+> Changed 2026-09-28: root class renamed from `.display-prompt-core`. A closed prompt is now `inert`
+> (its dismiss button used to stay in the tab order while invisible), and the root is only focusable
+> (`tabindex="-1"`) when `use-auto-focus` is on.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** `data-theme` on `.display-prompt-wrapper` re-declares the `--theme-*` palette on that
+element, so to recolour one prompt set `--theme-*` on the wrapper itself (e.g. via a passthrough
+class), not on an ancestor.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the inner `.display-prompt-wrapper`, not the root. Reactive
+after mount.

package/app/components/{01.atoms → 02.molecules}/prompt/DisplayPrompt.vue

@@ -1,10 +1,11 @@
 <template>
   <div
     ref="promptElementRef"
-    class="display-prompt-core"
+    class="display-prompt"
     :class="[{ closed: !componentOpen }]"
-    :data-test-id="`display-prompt-core-${resolved.theme}`"
-    tabindex="0"
+    :data-test-id="`display-prompt-${resolved.theme}`"
+    :tabindex="resolved.useAutoFocus ? -1 : undefined"
+    :inert="!componentOpen || undefined"
   >
     <div class="display-prompt-wrapper" :data-theme="resolved.theme" :class="[elementClasses]" data-test-id="display-prompt">
       <component
@@ -27,7 +28,7 @@
           <slot name="customCloseIcon"></slot>
         </template>
         <template #dismissLabel>
-          <slot name="customTitle">Close this prompt</slot>
+          <slot name="customTitle">{{ resolved.closeLabel }}</slot>
         </template>
       </component>
     </div>
@@ -44,6 +45,7 @@ interface Props {
   dismissible?: boolean;
   useAutoFocus?: boolean;
   masked?: boolean;
+  closeLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
@@ -53,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   dismissible: undefined,
   useAutoFocus: undefined,
   masked: undefined,
+  closeLabel: undefined,
 });
 
 const appConfig = useAppConfig();
@@ -64,6 +67,7 @@ const resolved = computed(() => {
     dismissible: props.dismissible ?? config?.dismissible ?? false,
     useAutoFocus: props.useAutoFocus ?? config?.useAutoFocus ?? false,
     masked: props.masked ?? config?.masked ?? false,
+    closeLabel: props.closeLabel ?? config?.closeLabel ?? "Close this prompt",
   } as const;
 });
 
@@ -73,7 +77,12 @@ const slots = useSlots();
 const promptElementRef = useTemplateRef<HTMLElement>("promptElementRef");
 const parentComponentState = defineModel<boolean>({ default: false });
 const componentOpen = ref(true);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 
 const updateComponentState = () => {
   if (parentComponentState.value) {
@@ -84,7 +93,7 @@ const updateComponentState = () => {
   componentOpen.value = false;
 };
 
-onMounted(async () => {
+onMounted(() => {
   if (resolved.value.useAutoFocus && promptElementRef.value) {
     promptElementRef.value.focus();
   }
@@ -93,11 +102,17 @@ onMounted(async () => {
 
 <style lang="css">
 @layer components {
-  .display-prompt-core {
+  .display-prompt {
     display: grid;
     grid-template-rows: 1fr;
     opacity: 1;
-    transition: all 200ms ease-in-out;
+    transition:
+      grid-template-rows var(--display-prompt-transition-duration, 200ms) ease-in-out,
+      opacity var(--display-prompt-transition-duration, 200ms) ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
 
     &.closed {
       grid-template-rows: 0fr;

package/app/components/{01.atoms → 02.molecules}/prompt/stories/DisplayPrompt.stories.ts

@@ -3,7 +3,7 @@ import { ref } from "vue";
 import StorybookComponent from "../DisplayPrompt.vue";
 
 export default {
-  title: "Atoms/DisplayPrompt",
+  title: "Molecules/DisplayPrompt",
   component: StorybookComponent,
   argTypes: {
     theme: {
@@ -22,6 +22,16 @@ export default {
       description: "Focuses the prompt element on mount",
       table: { category: "Behaviour" },
     },
+    masked: {
+      control: { type: "boolean" },
+      description: "Render with AlertMaskedContent instead of AlertContent",
+      table: { category: "Appearance" },
+    },
+    closeLabel: {
+      control: { type: "text" },
+      description: "Dismiss button label (screen-reader) — override for localisation",
+      table: { category: "Accessibility" },
+    },
     styleClassPassthrough: {
       control: { type: "object" },
       description: "Extra classes applied to the prompt wrapper",
@@ -33,6 +43,8 @@ export default {
     theme: "info",
     dismissible: false,
     useAutoFocus: false,
+    masked: false,
+    closeLabel: "Close this prompt",
     styleClassPassthrough: [],
   },
 } as Meta<typeof StorybookComponent>;
@@ -50,6 +62,8 @@ const Template: StoryFn<typeof StorybookComponent> = (args) => ({
         :theme="args.theme"
         :dismissible="args.dismissible"
         :use-auto-focus="args.useAutoFocus"
+        :masked="args.masked"
+        :close-label="args.closeLabel"
         :style-class-passthrough="args.styleClassPassthrough"
       >
         <template #title>Prompt title</template>
@@ -110,3 +124,6 @@ export const AllThemesDismissible: StoryFn<typeof StorybookComponent> = () => ({
     </div>
   `,
 });
+
+// Fixed showcase: hardcoded values, so Controls would do nothing here.
+AllThemesDismissible.parameters = { controls: { disable: true } };

package/app/components/{01.atoms → 02.molecules}/prompt/tests/DisplayPrompt.spec.ts

@@ -11,7 +11,7 @@ const { useAppConfigMock } = vi.hoisted(() => ({
 mockNuxtImport("useAppConfig", () => useAppConfigMock);
 
 function root(wrapper: Awaited<ReturnType<typeof mountSuspended<typeof DisplayPrompt>>>) {
-  return wrapper.find(".display-prompt-core");
+  return wrapper.find(".display-prompt");
 }
 
 function wrapper(w: Awaited<ReturnType<typeof mountSuspended<typeof DisplayPrompt>>>) {
@@ -28,7 +28,7 @@ describe("DisplayPrompt", () => {
 
   // ─── Root element ─────────────────────────────────────────────────────────
 
-  it("renders the root element with class display-prompt-core", async () => {
+  it("renders the root element with class display-prompt", async () => {
     const w = await mountSuspended(DisplayPrompt);
     expect(root(w).exists()).toBe(true);
   });
@@ -38,9 +38,14 @@ describe("DisplayPrompt", () => {
     expect(root(w).classes()).not.toContain("closed");
   });
 
-  it("has tabindex='0' on the root element", async () => {
+  it("is not in the tab order by default", async () => {
     const w = await mountSuspended(DisplayPrompt);
-    expect(root(w).attributes("tabindex")).toBe("0");
+    expect(root(w).attributes("tabindex")).toBeUndefined();
+  });
+
+  it("is programmatically focusable (tabindex=-1) when useAutoFocus is on", async () => {
+    const w = await mountSuspended(DisplayPrompt, { props: { useAutoFocus: true } });
+    expect(root(w).attributes("tabindex")).toBe("-1");
   });
 
   // ─── data-theme ───────────────────────────────────────────────────────────
@@ -64,7 +69,7 @@ describe("DisplayPrompt", () => {
     "sets data-test-id reflecting the theme on the root element",
     async (theme) => {
       const w = await mountSuspended(DisplayPrompt, { props: { theme } });
-      expect(root(w).attributes("data-test-id")).toBe(`display-prompt-core-${theme}`);
+      expect(root(w).attributes("data-test-id")).toBe(`display-prompt-${theme}`);
     }
   );
 
@@ -125,6 +130,31 @@ describe("DisplayPrompt", () => {
     expect(root(w).classes()).toContain("closed");
   });
 
+  it("makes the closed prompt inert so its controls leave the tab order", async () => {
+    const w = await mountSuspended(DisplayPrompt, { props: { dismissible: true } });
+    expect(root(w).attributes("inert")).toBeUndefined();
+    await w.find("[data-test-id='alert-dismiss']").trigger("click");
+    await nextTick();
+    expect(root(w).attributes("inert")).toBeDefined();
+  });
+
+  it("uses \"Close this prompt\" as the default dismiss label", async () => {
+    const w = await mountSuspended(DisplayPrompt, { props: { dismissible: true } });
+    expect(w.find("[data-test-id='alert-dismiss']").text()).toContain("Close this prompt");
+  });
+
+  it("uses the closeLabel prop as the dismiss label", async () => {
+    const w = await mountSuspended(DisplayPrompt, { props: { dismissible: true, closeLabel: "Fermer" } });
+    expect(w.find("[data-test-id='alert-dismiss']").text()).toContain("Fermer");
+  });
+
+  it("updates classes when styleClassPassthrough changes after mount", async () => {
+    const w = await mountSuspended(DisplayPrompt, { props: { styleClassPassthrough: ["original"] } });
+    await w.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper(w).classes()).not.toContain("original");
+    expect(wrapper(w).classes()).toContain("updated");
+  });
+
   // ─── Dismiss behaviour (with parent model) ────────────────────────────────
 
   it("emits update:modelValue=false when clicked with modelValue=true", async () => {
@@ -175,7 +205,7 @@ describe("DisplayPrompt", () => {
     it("uses hardcoded fallbacks when app.config has no displayPrompt key", async () => {
       const w = await mountSuspended(DisplayPrompt);
       expect(wrapper(w).attributes("data-theme")).toBe("info");
-      expect(root(w).attributes("data-test-id")).toBe("display-prompt-core-info");
+      expect(root(w).attributes("data-test-id")).toBe("display-prompt-info");
       expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
     });
 
@@ -186,7 +216,7 @@ describe("DisplayPrompt", () => {
       });
       const w = await mountSuspended(DisplayPrompt);
       expect(wrapper(w).attributes("data-theme")).toBe("success");
-      expect(root(w).attributes("data-test-id")).toBe("display-prompt-core-success");
+      expect(root(w).attributes("data-test-id")).toBe("display-prompt-success");
       expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
     });
 

package/app/components/02.molecules/qr-code/CONSUMER-STYLING.md

@@ -0,0 +1,66 @@
+# CaptureQrCode / DecodeQrCode — Consumer Styling Guide
+
+## Public token API
+
+### CaptureQrCode
+
+| Token | Default | Controls |
+|---|---|---|
+| `--capture-qr-code-aspect-ratio` | `1 / 1` | Root aspect ratio (the camera frame) |
+| `--capture-qr-code-error-gap` | `1.2rem` | Gap between the error message and the reset button |
+
+The reset button is `InputButton` (`variant="secondary"`), styled by its own tokens.
+
+### DecodeQrCode
+
+| Token | Default | Controls |
+|---|---|---|
+| `--decode-qr-code-gap` | `1.2rem` | Gap between upload, drop zone and results |
+| `--decode-qr-code-upload-gap` | `0.6rem` | Gap between the upload label text and the file input |
+| `--decode-qr-code-dropzone-min-height` | `3rem` | Drop zone minimum height |
+| `--decode-qr-code-dropzone-padding` | `1.2rem` | Drop zone padding |
+| `--decode-qr-code-dropzone-border-radius` | `0.5rem` | Drop zone corner rounding |
+| `--decode-qr-code-dropzone-border-width` | `2px` | Drop zone dashed border width |
+| `--decode-qr-code-dropzone-border-colour` | `gray` | Drop zone border colour |
+| `--decode-qr-code-dropzone-border-colour-active` | the border colour | Border colour while an image is dragged over |
+| `--decode-qr-code-dropzone-background-active` | `transparent` | Background while an image is dragged over |
+
+Private (not public API): `--_dropzone-border-colour`.
+
+> Changed 2026-09-28: all of these were hardcoded or missing. DecodeQrCode's root is no longer
+> forced to `aspect-ratio: 1 / 1`.
+
+---
+
+## State hooks
+
+| Hook | Component | When |
+|---|---|---|
+| `.capture-qr-code-stopped` | Capture | Camera stopped (tab hidden, route leave), no error |
+| `.capture-qr-code-error` (`role="alert"`) | Capture | Camera error; replaceable via the `#error` slot |
+| `.decode-qr-code-dropzone.is-dropping` | Decode | An image is dragged over the drop zone |
+
+Inner classes: Capture `.capture-qr-code-camera`, `.capture-qr-code-results`; Decode
+`.decode-qr-code-upload` (label), `.decode-qr-code-upload-label`, `.decode-qr-code-capture` (file
+input), `.decode-qr-code-dropzone`, `.decode-qr-code-dropzone-label`, `.decode-qr-code-results`.
+Both results wrappers are polite live regions and always rendered; the `<ul>` inside appears once a
+code is decoded.
+
+> Changed 2026-09-28: renamed from `.capture-qr-stream` (root), `.camera-stopped`, `.camera-error`,
+> `.scanned-results`, `.qr-code-capture` and `.qr-code-dropzone`.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to each component's root. Reactive after mount.

package/app/components/02.molecules/qr-code/CaptureQrCode.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class="capture-qr-stream" :class="[elementClasses]">
-    <div v-if="!state.error">
+  <div class="capture-qr-code" :class="[elementClasses]">
+    <div v-if="!state.error" class="capture-qr-code-camera">
       <QrcodeStream v-if="state.cameraOn" ref="qrcodeStreamRef" @error="onError" @detect="onDetect" />
-      <div v-else class="camera-stopped">
-        <p>Camera stopped</p>
+      <div v-else class="capture-qr-code-stopped">
+        <p>{{ cameraStoppedLabel }}</p>
       </div>
-      <div v-if="result?.length" class="scanned-results">
-        <ul>
+      <div class="capture-qr-code-results" aria-live="polite">
+        <ul v-if="result?.length">
           <li v-for="(r, i) in result" :key="i">
             <span>{{ r }}</span>
           </li>
         </ul>
       </div>
     </div>
-    <div v-else class="camera-error">
-      <p>{{ state.errorMsg }}</p>
-      <button @click="resetCamera">Reset camera</button>
+    <div v-else class="capture-qr-code-error" role="alert">
+      <slot name="error" :error="state.errorName" :message="state.errorMsg" :reset="resetCamera">
+        <p>{{ state.errorMsg }}</p>
+        <InputButton variant="secondary" :button-text="resetCameraLabel" @click="resetCamera" />
+      </slot>
     </div>
   </div>
 </template>
@@ -24,10 +26,14 @@
 import type { DetectedBarcode } from "nuxt-qrcode";
 
 interface Props {
+  cameraStoppedLabel?: string;
+  resetCameraLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  cameraStoppedLabel: "Camera stopped",
+  resetCameraLabel: "Reset camera",
   styleClassPassthrough: () => [],
 });
 
@@ -35,6 +41,7 @@ const qrcodeStreamRef = ref();
 const result = ref<string[]>();
 const state = reactive({
   errorMsg: "",
+  errorName: "",
   error: false,
   cameraOn: true,
 });
@@ -65,6 +72,7 @@ function onDetect(detectedCodes: DetectedBarcode[]) {
 
 function onError(err: Error) {
   state.error = true;
+  state.errorName = err.name;
   state.errorMsg = `[${err.name}]: ${err.message}`;
 }
 
@@ -130,13 +138,24 @@ onBeforeRouteLeave(() => {
   stopAllMediaStreams();
 });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 </script>
 
 <style lang="css">
 @layer components {
-  .capture-qr-stream {
-    aspect-ratio: 1 / 1;
+  .capture-qr-code {
+    aspect-ratio: var(--capture-qr-code-aspect-ratio, 1 / 1);
+
+    .capture-qr-code-error {
+      display: grid;
+      gap: var(--capture-qr-code-error-gap, 1.2rem);
+      justify-items: start;
+    }
   }
 }
 </style>

package/app/components/02.molecules/qr-code/DecodeQrCode.vue

@@ -1,9 +1,19 @@
 <template>
   <div class="decode-qr-code" :class="[elementClasses]">
-    <QrcodeCapture class="qr-code-capture" @detect="onDetect" />
-    <QrcodeDropZone class="qr-code-dropzone" @detect="onDetect" @dragover="onDropping" />
-    <div v-if="result?.length" class="scanned-results">
-      <ul>
+    <label class="decode-qr-code-upload">
+      <span class="decode-qr-code-upload-label">{{ uploadLabel }}</span>
+      <QrcodeCapture class="decode-qr-code-capture" @detect="onDetect" />
+    </label>
+    <QrcodeDropZone
+      class="decode-qr-code-dropzone"
+      :class="{ 'is-dropping': isDropping }"
+      @detect="onDetect"
+      @dragover="onDropping"
+    >
+      <p class="decode-qr-code-dropzone-label">{{ dropLabel }}</p>
+    </QrcodeDropZone>
+    <div class="decode-qr-code-results" aria-live="polite">
+      <ul v-if="result?.length">
         <li v-for="(r, i) in result" :key="i">
           <span>{{ r }}</span>
         </li>
@@ -13,43 +23,69 @@
 </template>
 
 <script setup lang="ts">
-import type { DetectedBarcode } from "nuxt-qrcode"
+import type { DetectedBarcode } from "nuxt-qrcode";
 
 interface Props {
+  uploadLabel?: string;
+  dropLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  uploadLabel: "Upload a QR code image",
+  dropLabel: "Or drop a QR code image here",
   styleClassPassthrough: () => [],
 });
 
-const result = ref<string[]>()
-const isDropping = ref(false)
+const result = ref<string[]>();
+const isDropping = ref(false);
 
 function onDropping(dropping: boolean) {
-  isDropping.value = dropping
+  isDropping.value = dropping;
 }
 
 function onDetect(detectedCodes: DetectedBarcode[]) {
-  result.value = detectedCodes.map((code) => code.rawValue)
+  result.value = detectedCodes.map((code) => code.rawValue);
 }
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 </script>
 
 <style lang="css">
 @layer components {
-.decode-qr-code {
-  aspect-ratio: 1 / 1;
+  .decode-qr-code {
+    display: grid;
+    gap: var(--decode-qr-code-gap, 1.2rem);
 
-  .qr-code-capture {
-  }
+    .decode-qr-code-upload {
+      display: grid;
+      gap: var(--decode-qr-code-upload-gap, 0.6rem);
+    }
+
+    .decode-qr-code-dropzone {
+      --_dropzone-border-colour: var(--decode-qr-code-dropzone-border-colour, gray);
 
-  .qr-code-dropzone {
-    min-height: 3rem;
-    border-radius: 0.5rem;
-    border: 2px dashed gray;
+      display: grid;
+      place-items: center;
+      min-height: var(--decode-qr-code-dropzone-min-height, 3rem);
+      padding: var(--decode-qr-code-dropzone-padding, 1.2rem);
+      border-radius: var(--decode-qr-code-dropzone-border-radius, 0.5rem);
+      border: var(--decode-qr-code-dropzone-border-width, 2px) dashed var(--_dropzone-border-colour);
+
+      &.is-dropping {
+        border-color: var(--decode-qr-code-dropzone-border-colour-active, var(--_dropzone-border-colour));
+        background-color: var(--decode-qr-code-dropzone-background-active, transparent);
+      }
+
+      .decode-qr-code-dropzone-label {
+        margin: 0;
+      }
+    }
   }
 }
-}
 </style>

package/app/components/02.molecules/qr-code/stories/CaptureQrCode.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import CaptureQrCodeComponent from "../CaptureQrCode.vue";
+
+const meta: Meta<typeof CaptureQrCodeComponent> = {
+  title: "Molecules/QR Code/CaptureQrCode",
+  component: CaptureQrCodeComponent,
+  argTypes: {
+    cameraStoppedLabel: {
+      control: { type: "text" },
+      description: "Message shown while the camera is stopped (e.g. the tab is hidden)",
+      table: { category: "Content" },
+    },
+    resetCameraLabel: {
+      control: { type: "text" },
+      description: "Reset button text in the error state",
+      table: { category: "Content" },
+    },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    cameraStoppedLabel: "Camera stopped",
+    resetCameraLabel: "Reset camera",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Live QR code scanner using the device camera. Needs camera permission; the camera stops when the tab is hidden or the route changes. Results are announced through a polite live region.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<typeof CaptureQrCodeComponent> = (args) => ({
+  components: { CaptureQrCodeComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; max-width: 600px; margin: 0 auto;">
+      <p style="margin: 0 0 16px; font-size: 14px; opacity: 0.8;">
+        Allow camera access when prompted, then hold a QR code up to the camera.
+      </p>
+      <CaptureQrCodeComponent
+        :camera-stopped-label="args.cameraStoppedLabel"
+        :reset-camera-label="args.resetCameraLabel"
+        :style-class-passthrough="args.styleClassPassthrough"
+      />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});