srcdev-nuxt-components 9.4.12 → 9.5.1

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/`.

package/app/components/02.molecules/samaritan-prompt/SamaritanPrompt.vue

@@ -1,19 +1,34 @@
 <template>
-  <div :class="['samaritan-prompt', elementClasses]">
-    <div class="samaritan-prompt__content" :style="effect === 'word-pulse' ? { opacity: textOpacity } : undefined">
+  <div
+    :class="['samaritan-prompt', elementClasses]"
+    :style="{ '--_fade-duration': fadeDurationCss }"
+    :data-paused="isPaused || undefined"
+    @pointerenter="pause"
+    @pointerleave="resume"
+  >
+    <div
+      class="samaritan-prompt__content"
+      :style="effect === 'word-pulse' ? { opacity: textOpacity } : undefined"
+      aria-hidden="true"
+    >
       <div class="samaritan-prompt__stage">
         <span class="samaritan-prompt__text">{{ displayText }}</span>
       </div>
       <div class="samaritan-prompt__underline"></div>
     </div>
-    <span class="samaritan-prompt__cursor" :style="{ opacity: cursorOpacity }" aria-hidden="true">▲</span>
+    <span class="samaritan-prompt__cursor" :style="{ opacity: cursorOpacity }" aria-hidden="true">
+      <slot name="cursor">▲</slot>
+    </span>
+    <span class="samaritan-prompt__sr-text" aria-live="polite" aria-atomic="true">{{ announcedText }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { SamaritanPromptEffect } from "~/types/components/samaritan-prompt";
+
 interface Props {
   messages: string[];
-  effect?: "typewriter" | "word-pulse";
+  effect?: SamaritanPromptEffect;
   typeSpeed?: number;
   deleteSpeed?: number;
   holdDuration?: number;
@@ -36,19 +51,38 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 
 const displayText = ref("");
+const announcedText = ref("");
 const textOpacity = ref(1);
 const cursorVisible = ref(true);
+const isPaused = ref(false);
 const fadeDurationCss = computed(() => `${props.fadeDuration}ms`);
 const cursorOpacity = computed(() => (props.hideCursorInCycle && !cursorVisible.value ? 0 : 1));
 
-const { wait, schedule, stop, start } = useCancellableTimer();
+const timer = useCancellableTimer();
+const { wait, schedule, stop, start } = timer;
+
+const pause = () => {
+  isPaused.value = true;
+  timer.pause();
+};
+
+const resume = () => {
+  isPaused.value = false;
+  timer.resume();
+};
 
 const startEffect = () => {
   start();
   displayText.value = "";
+  announcedText.value = "";
   textOpacity.value = 1;
   cursorVisible.value = true;
   phase.value = "typing";
@@ -79,12 +113,14 @@ const typeTick = () => {
         schedule(typeTick, props.typeSpeed);
       } else {
         phase.value = "holding";
+        announcedText.value = message;
         schedule(typeTick, props.holdDuration);
       }
       break;
 
     case "holding":
       phase.value = "deleting";
+      announcedText.value = "";
       schedule(typeTick, props.deleteSpeed);
       break;
 
@@ -111,12 +147,10 @@ const typeTick = () => {
 const runWordPulse = async () => {
   try {
     while (true) {
-      // Underline and cursor visible during the pre-cycle pause
       await wait(props.pauseDuration);
 
       if (props.hideCursorInCycle) cursorVisible.value = false;
 
-      // Fade out the underline before the first word appears
       textOpacity.value = 0;
       await wait(props.fadeDuration);
 
@@ -126,13 +160,14 @@ const runWordPulse = async () => {
         await wait(120);
 
         textOpacity.value = 1;
+        announcedText.value = message;
         await wait(props.wordDuration);
 
+        announcedText.value = "";
         textOpacity.value = 0;
         await wait(props.fadeDuration);
       }
 
-      // Reset between cycles — underline and cursor visible again for next pause
       displayText.value = "";
       textOpacity.value = 1;
       if (props.hideCursorInCycle) cursorVisible.value = true;
@@ -165,67 +200,89 @@ onUnmounted(stop);
   font-display: swap;
 }
 
-.samaritan-prompt {
-  --_font-size: var(--samaritan-font-size, 2rem);
-  --_color-text: var(--samaritan-color-text, #ffffff);
-  --_color-underline: var(--samaritan-color-underline, #ffffff);
-  --_color-cursor: var(--samaritan-color-cursor, #cc0000);
-  --_color-cursor-off: var(--samaritan-color-cursor-off, transparent);
-  --_font-family: var(--samaritan-font-family, "Mono MMM 5", "Nova Mono", "Courier New", monospace);
-  --_letter-spacing: var(--samaritan-letter-spacing, 0.08em);
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 0.6rem;
-  font-family: var(--_font-family);
-  font-size: var(--_font-size);
-  letter-spacing: var(--_letter-spacing);
-
-  .samaritan-prompt__content {
+@layer components {
+  .samaritan-prompt {
     display: flex;
     flex-direction: column;
     align-items: center;
-    row-gap: 0.6rem;
-    width: 100%;
-    transition: opacity v-bind(fadeDurationCss) ease;
+    row-gap: var(--samaritan-prompt-cursor-gap, 0.6rem);
+    font-family: var(--samaritan-prompt-font-family, "Mono MMM 5", "Nova Mono", "Courier New", monospace);
+    font-size: var(--samaritan-prompt-font-size, 2rem);
+    letter-spacing: var(--samaritan-prompt-letter-spacing, 0.08em);
 
-    .samaritan-prompt__stage {
+    .samaritan-prompt__content {
       display: flex;
-      justify-content: center;
-      min-height: 1.2em;
+      flex-direction: column;
+      align-items: center;
+      row-gap: var(--samaritan-prompt-underline-gap, 0.6rem);
+      width: 100%;
+      transition: opacity var(--_fade-duration, 400ms) ease;
 
-      .samaritan-prompt__text {
-        color: var(--_color-text);
-        white-space: nowrap;
-        text-transform: uppercase;
+      .samaritan-prompt__stage {
+        display: flex;
+        justify-content: center;
+        min-height: 1.2em;
+
+        .samaritan-prompt__text {
+          color: var(--samaritan-prompt-text-colour, #ffffff);
+          white-space: nowrap;
+          text-transform: var(--samaritan-prompt-text-transform, uppercase);
+        }
+      }
+
+      .samaritan-prompt__underline {
+        width: 100%;
+        min-width: 4ch;
+        height: var(--samaritan-prompt-underline-height, 0.15rem);
+        background: var(--samaritan-prompt-underline-colour, #ffffff);
       }
     }
 
-    .samaritan-prompt__underline {
-      width: 100%;
-      min-width: 4ch;
-      height: 0.15rem;
-      background: var(--_color-underline);
+    .samaritan-prompt__cursor {
+      color: var(--samaritan-prompt-cursor-colour, #cc0000);
+      font-size: var(--samaritan-prompt-cursor-size, 2.4rem);
+      line-height: 1;
+      animation: samaritan-prompt-pulse var(--samaritan-prompt-cursor-pulse-duration, 2.5s) ease-in-out infinite;
+      transition: opacity 400ms ease;
+    }
+
+    &[data-paused] .samaritan-prompt__cursor {
+      animation-play-state: paused;
+    }
+
+    .samaritan-prompt__sr-text {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
     }
   }
 
-  .samaritan-prompt__cursor {
-    color: var(--_color-cursor);
-    font-size: 2.4rem;
-    line-height: 1;
-    animation: samaritan-pulse 2.5s ease-in-out infinite;
-    transition: opacity 400ms ease;
+  @media (prefers-reduced-motion: reduce) {
+    .samaritan-prompt {
+      .samaritan-prompt__content {
+        transition: none;
+      }
+
+      .samaritan-prompt__cursor {
+        animation: none;
+      }
+    }
   }
 }
 
-@keyframes samaritan-pulse {
+@keyframes samaritan-prompt-pulse {
   0%,
   100% {
-    color: var(--_color-cursor);
+    color: var(--samaritan-prompt-cursor-colour, #cc0000);
   }
   50% {
-    color: var(--_color-cursor-off);
+    color: var(--samaritan-prompt-cursor-colour-off, transparent);
   }
 }
 </style>