srcdev-nuxt-components 9.4.11 → 9.5.0

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import DecodeQrCodeComponent from "../DecodeQrCode.vue";
+
+const meta: Meta<typeof DecodeQrCodeComponent> = {
+  title: "Molecules/QR Code/DecodeQrCode",
+  component: DecodeQrCodeComponent,
+  argTypes: {
+    uploadLabel: {
+      control: { type: "text" },
+      description: "Visible label for the file input",
+      table: { category: "Content" },
+    },
+    dropLabel: {
+      control: { type: "text" },
+      description: "Instruction text inside the drop zone",
+      table: { category: "Content" },
+    },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    uploadLabel: "Upload a QR code image",
+    dropLabel: "Or drop a QR code image here",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Decodes QR codes from an uploaded or dropped image (PNG, JPEG, WEBP and other common formats). Results are announced through a polite live region.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<typeof DecodeQrCodeComponent> = (args) => ({
+  components: { DecodeQrCodeComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="padding: 40px; max-width: 600px; margin: 0 auto;">
+      <DecodeQrCodeComponent
+        :upload-label="args.uploadLabel"
+        :drop-label="args.dropLabel"
+        :style-class-passthrough="args.styleClassPassthrough"
+      />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});

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

@@ -16,7 +16,7 @@ describe("CaptureQrCode", () => {
   // jsdom defines HTMLCanvasElement but returns null for getContext, which
   // causes the library to throw. We provide a minimal non-null mock.
   beforeEach(() => {
-    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({} as any);
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({} as unknown as RenderingContext);
   });
 
   afterEach(() => {
@@ -37,9 +37,9 @@ describe("CaptureQrCode", () => {
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
-  it("always has the capture-qr-stream class", async () => {
+  it("always has the capture-qr-code class", async () => {
     const wrapper = await mountSuspended(CaptureQrCode);
-    expect(wrapper.classes()).toContain("capture-qr-stream");
+    expect(wrapper.classes()).toContain("capture-qr-code");
   });
 
   // ─── Initial state ────────────────────────────────────────────────────────
@@ -52,17 +52,17 @@ describe("CaptureQrCode", () => {
 
   it("does not show camera-stopped on mount", async () => {
     const wrapper = await mountSuspended(CaptureQrCode);
-    expect(wrapper.find(".camera-stopped").exists()).toBe(false);
+    expect(wrapper.find(".capture-qr-code-stopped").exists()).toBe(false);
   });
 
   it("does not show scanned results initially", async () => {
     const wrapper = await mountSuspended(CaptureQrCode);
-    expect(wrapper.find(".scanned-results").exists()).toBe(false);
+    expect(wrapper.find(".capture-qr-code-results ul").exists()).toBe(false);
   });
 
   it("does not show the error state initially", async () => {
     const wrapper = await mountSuspended(CaptureQrCode);
-    expect(wrapper.find(".camera-error").exists()).toBe(false);
+    expect(wrapper.find(".capture-qr-code-error").exists()).toBe(false);
   });
 
   // ─── Camera off ───────────────────────────────────────────────────────────
@@ -73,7 +73,7 @@ describe("CaptureQrCode", () => {
     vm.state.cameraOn = false;
     await nextTick();
     expect(vm.state.cameraOn).toBe(false);
-    expect(wrapper.find(".camera-stopped").exists()).toBe(true);
+    expect(wrapper.find(".capture-qr-code-stopped").exists()).toBe(true);
   });
 
   // ─── Error state ──────────────────────────────────────────────────────────
@@ -83,7 +83,7 @@ describe("CaptureQrCode", () => {
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("Permission denied"));
     await nextTick();
-    expect(wrapper.find(".camera-error").exists()).toBe(true);
+    expect(wrapper.find(".capture-qr-code-error").exists()).toBe(true);
   });
 
   it("shows the error message in the error state", async () => {
@@ -91,7 +91,7 @@ describe("CaptureQrCode", () => {
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("Permission denied"));
     await nextTick();
-    expect(wrapper.find(".camera-error p").text()).toContain("Permission denied");
+    expect(wrapper.find(".capture-qr-code-error p").text()).toContain("Permission denied");
   });
 
   it("sets state.error when onError is called, hiding the stream", async () => {
@@ -100,7 +100,7 @@ describe("CaptureQrCode", () => {
     vm.onError(new Error("test"));
     await nextTick();
     expect(vm.state.error).toBe(true);
-    expect(wrapper.find(".camera-error").exists()).toBe(true);
+    expect(wrapper.find(".capture-qr-code-error").exists()).toBe(true);
   });
 
   it("shows a reset button in the error state", async () => {
@@ -108,7 +108,7 @@ describe("CaptureQrCode", () => {
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("test"));
     await nextTick();
-    expect(wrapper.find(".camera-error button").exists()).toBe(true);
+    expect(wrapper.find(".capture-qr-code-error button").exists()).toBe(true);
   });
 
   // ─── Reset camera ─────────────────────────────────────────────────────────
@@ -120,7 +120,7 @@ describe("CaptureQrCode", () => {
     await nextTick();
     vm.resetCamera();
     await nextTick();
-    expect(wrapper.find(".camera-error").exists()).toBe(false);
+    expect(wrapper.find(".capture-qr-code-error").exists()).toBe(false);
     expect(vm.state.cameraOn).toBe(true);
   });
 
@@ -129,8 +129,8 @@ describe("CaptureQrCode", () => {
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onError(new Error("test"));
     await nextTick();
-    await wrapper.find(".camera-error button").trigger("click");
-    expect(wrapper.find(".camera-error").exists()).toBe(false);
+    await wrapper.find(".capture-qr-code-error button").trigger("click");
+    expect(wrapper.find(".capture-qr-code-error").exists()).toBe(false);
   });
 
   // ─── Detect ───────────────────────────────────────────────────────────────
@@ -140,7 +140,7 @@ describe("CaptureQrCode", () => {
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
-    expect(wrapper.find(".scanned-results").exists()).toBe(true);
+    expect(wrapper.find(".capture-qr-code-results ul").exists()).toBe(true);
   });
 
   it("shows the detected value in the results list", async () => {
@@ -148,7 +148,7 @@ describe("CaptureQrCode", () => {
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
-    expect(wrapper.find(".scanned-results").text()).toContain("https://example.com");
+    expect(wrapper.find(".capture-qr-code-results").text()).toContain("https://example.com");
   });
 
   it("shows all detected values when multiple codes are scanned", async () => {
@@ -156,7 +156,7 @@ describe("CaptureQrCode", () => {
     const vm = wrapper.vm as unknown as CaptureVM;
     vm.onDetect([{ rawValue: "https://one.com" }, { rawValue: "https://two.com" }]);
     await nextTick();
-    const items = wrapper.findAll(".scanned-results li");
+    const items = wrapper.findAll(".capture-qr-code-results li");
     expect(items).toHaveLength(2);
     expect(items[0]!.text()).toBe("https://one.com");
     expect(items[1]!.text()).toBe("https://two.com");
@@ -169,7 +169,7 @@ describe("CaptureQrCode", () => {
     await nextTick();
     vm.onDetect([{ rawValue: "second" }]);
     await nextTick();
-    const items = wrapper.findAll(".scanned-results li");
+    const items = wrapper.findAll(".capture-qr-code-results li");
     expect(items).toHaveLength(1);
     expect(items[0]!.text()).toBe("second");
   });
@@ -202,11 +202,59 @@ describe("CaptureQrCode", () => {
     expect(wrapper.classes()).toContain("class-b");
   });
 
-  it("retains capture-qr-stream class alongside styleClassPassthrough", async () => {
+  it("retains capture-qr-code class alongside styleClassPassthrough", async () => {
     const wrapper = await mountSuspended(CaptureQrCode, {
       props: { styleClassPassthrough: "extra" },
     });
-    expect(wrapper.classes()).toContain("capture-qr-stream");
+    expect(wrapper.classes()).toContain("capture-qr-code");
     expect(wrapper.classes()).toContain("extra");
   });
 });
+
+describe("CaptureQrCode labels and a11y", () => {
+  beforeEach(() => {
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({} as unknown as RenderingContext);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("uses cameraStoppedLabel for the stopped message", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, { props: { cameraStoppedLabel: "Caméra arrêtée" } });
+    (wrapper.vm as unknown as CaptureVM).state.cameraOn = false;
+    await nextTick();
+    expect(wrapper.find(".capture-qr-code-stopped").text()).toBe("Caméra arrêtée");
+  });
+
+  it("uses resetCameraLabel for the reset button and marks the error as an alert", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, { props: { resetCameraLabel: "Réinitialiser" } });
+    (wrapper.vm as unknown as CaptureVM).onError(new Error("test"));
+    await nextTick();
+    expect(wrapper.find(".capture-qr-code-error").attributes("role")).toBe("alert");
+    expect(wrapper.find(".capture-qr-code-error button").text()).toContain("Réinitialiser");
+  });
+
+  it("lets the error slot replace the default error content", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, {
+      slots: { error: ({ error }: { error: string }) => `Custom: ${error}` },
+    });
+    const err = new Error("denied");
+    err.name = "NotAllowedError";
+    (wrapper.vm as unknown as CaptureVM).onError(err);
+    await nextTick();
+    expect(wrapper.find(".capture-qr-code-error").text()).toBe("Custom: NotAllowedError");
+  });
+
+  it("keeps a polite live region for results", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode);
+    expect(wrapper.find(".capture-qr-code-results").attributes("aria-live")).toBe("polite");
+  });
+
+  it("updates classes when styleClassPassthrough changes after mount", async () => {
+    const wrapper = await mountSuspended(CaptureQrCode, { props: { styleClassPassthrough: ["original"] } });
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/02.molecules/qr-code/tests/DecodeQrCode.spec.ts

@@ -34,17 +34,17 @@ describe("DecodeQrCode", () => {
 
   it("renders the file capture element", async () => {
     const wrapper = await mountSuspended(DecodeQrCode);
-    expect(wrapper.find(".qr-code-capture").exists()).toBe(true);
+    expect(wrapper.find(".decode-qr-code-capture").exists()).toBe(true);
   });
 
   it("renders the drop zone element", async () => {
     const wrapper = await mountSuspended(DecodeQrCode);
-    expect(wrapper.find(".qr-code-dropzone").exists()).toBe(true);
+    expect(wrapper.find(".decode-qr-code-dropzone").exists()).toBe(true);
   });
 
   it("does not show scanned results initially", async () => {
     const wrapper = await mountSuspended(DecodeQrCode);
-    expect(wrapper.find(".scanned-results").exists()).toBe(false);
+    expect(wrapper.find(".decode-qr-code-results ul").exists()).toBe(false);
   });
 
   // ─── Detect ───────────────────────────────────────────────────────────────
@@ -54,7 +54,7 @@ describe("DecodeQrCode", () => {
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
-    expect(wrapper.find(".scanned-results").exists()).toBe(true);
+    expect(wrapper.find(".decode-qr-code-results ul").exists()).toBe(true);
   });
 
   it("shows the detected value in the results list", async () => {
@@ -62,7 +62,7 @@ describe("DecodeQrCode", () => {
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDetect([{ rawValue: "https://example.com" }]);
     await nextTick();
-    expect(wrapper.find(".scanned-results").text()).toContain("https://example.com");
+    expect(wrapper.find(".decode-qr-code-results").text()).toContain("https://example.com");
   });
 
   it("shows all detected values when multiple codes are decoded", async () => {
@@ -70,7 +70,7 @@ describe("DecodeQrCode", () => {
     const vm = wrapper.vm as unknown as DecodeVM;
     vm.onDetect([{ rawValue: "https://one.com" }, { rawValue: "https://two.com" }]);
     await nextTick();
-    const items = wrapper.findAll(".scanned-results li");
+    const items = wrapper.findAll(".decode-qr-code-results li");
     expect(items).toHaveLength(2);
     expect(items[0]!.text()).toBe("https://one.com");
     expect(items[1]!.text()).toBe("https://two.com");
@@ -83,7 +83,7 @@ describe("DecodeQrCode", () => {
     await nextTick();
     vm.onDetect([{ rawValue: "second" }]);
     await nextTick();
-    const items = wrapper.findAll(".scanned-results li");
+    const items = wrapper.findAll(".decode-qr-code-results li");
     expect(items).toHaveLength(1);
     expect(items[0]!.text()).toBe("second");
   });
@@ -95,7 +95,7 @@ describe("DecodeQrCode", () => {
     await nextTick();
     vm.onDetect([]);
     await nextTick();
-    expect(wrapper.find(".scanned-results").exists()).toBe(false);
+    expect(wrapper.find(".decode-qr-code-results ul").exists()).toBe(false);
   });
 
   // ─── Dropping state ───────────────────────────────────────────────────────
@@ -143,3 +143,39 @@ describe("DecodeQrCode", () => {
     expect(wrapper.classes()).toContain("extra");
   });
 });
+
+describe("DecodeQrCode labels, drop state and a11y", () => {
+  it("wraps the file input in a label with the default upload text", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    const label = wrapper.find("label.decode-qr-code-upload");
+    expect(label.text()).toContain("Upload a QR code image");
+    expect(label.find(".decode-qr-code-capture").exists()).toBe(true);
+  });
+
+  it("uses uploadLabel and dropLabel when given", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode, {
+      props: { uploadLabel: "Téléverser", dropLabel: "Déposer ici" },
+    });
+    expect(wrapper.find(".decode-qr-code-upload-label").text()).toBe("Téléverser");
+    expect(wrapper.find(".decode-qr-code-dropzone-label").text()).toBe("Déposer ici");
+  });
+
+  it("adds is-dropping to the drop zone while an image is dragged over it", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    (wrapper.vm as unknown as DecodeVM).onDropping(true);
+    await nextTick();
+    expect(wrapper.find(".decode-qr-code-dropzone").classes()).toContain("is-dropping");
+  });
+
+  it("keeps a polite live region for results", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode);
+    expect(wrapper.find(".decode-qr-code-results").attributes("aria-live")).toBe("polite");
+  });
+
+  it("updates classes when styleClassPassthrough changes after mount", async () => {
+    const wrapper = await mountSuspended(DecodeQrCode, { props: { styleClassPassthrough: ["original"] } });
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

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

@@ -0,0 +1,118 @@
+# SamaritanPrompt — Consumer Styling Guide
+
+`SamaritanPrompt` and `SamaritanPromptMixed` render the same markup: an animated line of
+uppercase monospace text over an underline, with a pulsing cursor glyph below it. They share one
+class set and one token API, so everything here applies to both.
+
+## Public token API
+
+### Text
+
+| Token | Default | Controls |
+|---|---|---|
+| `--samaritan-prompt-font-family` | `"Mono MMM 5", "Nova Mono", "Courier New", monospace` | Font stack |
+| `--samaritan-prompt-font-size` | `2rem` | Text size (the underline and gaps don't scale with it) |
+| `--samaritan-prompt-letter-spacing` | `0.08em` | Letter spacing |
+| `--samaritan-prompt-text-transform` | `uppercase` | Text case (`none` keeps messages as written) |
+| `--samaritan-prompt-text-colour` | `#ffffff` | Text colour |
+
+### Underline
+
+| Token | Default | Controls |
+|---|---|---|
+| `--samaritan-prompt-underline-colour` | `#ffffff` | Underline colour |
+| `--samaritan-prompt-underline-height` | `0.15rem` | Underline thickness |
+| `--samaritan-prompt-underline-gap` | `0.6rem` | Space between text and underline |
+
+### Cursor
+
+| Token | Default | Controls |
+|---|---|---|
+| `--samaritan-prompt-cursor-colour` | `#cc0000` | Cursor colour at the peak of the pulse |
+| `--samaritan-prompt-cursor-colour-off` | `transparent` | Cursor colour at the trough of the pulse |
+| `--samaritan-prompt-cursor-size` | `2.4rem` | Cursor glyph size |
+| `--samaritan-prompt-cursor-pulse-duration` | `2.5s` | One full pulse cycle |
+| `--samaritan-prompt-cursor-gap` | `0.6rem` | Space between underline and cursor |
+
+Private, not public API: `--_fade-duration` (set inline on the root from the `fadeDuration` prop,
+or the current message's `fadeDuration` in `SamaritanPromptMixed`).
+
+> **Changed 2026-09-27**: all tokens were renamed from `--samaritan-*` to `--samaritan-prompt-*`,
+> and `color` became `colour` (`--samaritan-color-text` is now `--samaritan-prompt-text-colour`,
+> `--samaritan-color-cursor-off` is now `--samaritan-prompt-cursor-colour-off`, and so on). The
+> old names no longer do anything. The underline height, both gaps, cursor size, pulse duration
+> and text transform were hardcoded and are new tokens.
+
+---
+
+## State hooks
+
+| Hook | Where | When |
+|---|---|---|
+| `data-paused` | `.samaritan-prompt` | Pointer is over the component; the sequence and cursor pulse are paused |
+
+Inner element classes, safe to target:
+
+| Class | Element |
+|---|---|
+| `.samaritan-prompt` | Root |
+| `.samaritan-prompt__content` | Text and underline wrapper; its opacity animates for word-pulse. `aria-hidden` |
+| `.samaritan-prompt__stage` | Centres the text and reserves one line of height |
+| `.samaritan-prompt__text` | The animated text |
+| `.samaritan-prompt__underline` | Underline bar |
+| `.samaritan-prompt__cursor` | Cursor glyph (the `cursor` slot, `▲` by default). `aria-hidden` |
+| `.samaritan-prompt__sr-text` | Visually hidden live region; don't restyle it visible |
+
+---
+
+## Motion
+
+- The cursor pulses between `--samaritan-prompt-cursor-colour` and `-colour-off`; set both to the
+  same value for a steady cursor.
+- `prefers-reduced-motion: reduce` removes the cursor pulse and the word-pulse fade transition.
+  The text sequence itself keeps running (it is the content), and pauses on hover like always.
+
+---
+
+## Global theming
+
+The defaults assume a dark page. For a site that switches colour scheme, point the colours at the
+theme tokens once:
+
+```css
+:where(html) {
+  --samaritan-prompt-text-colour: var(--theme-text);
+  --samaritan-prompt-underline-colour: var(--theme-text);
+}
+```
+
+---
+
+## 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` (string or string array) adds classes to the root `.samaritan-prompt`
+element. Reactive: changing the prop replaces the previous classes.
+
+---
+
+## Notes
+
+- The component brings no page layout of its own. Centre it in its container yourself (e.g.
+  `display: grid; place-items: center` on the parent).
+
+  > **Changed 2026-09-27**: `SamaritanPromptMixed`'s styles used to apply only inside a
+  > `.samaritan-stage` ancestor, which also forced `min-block-size: 100dvh` and flex centring on
+  > that ancestor. Its styles now apply wherever it's used, and `.samaritan-stage` means nothing
+  > to the library.
+
+- The `Mono MMM 5` font loads from `/fonts/monoMMM_5.ttf`, shipped in this layer's `public/`.