srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/tests/DeepExpandingMenuClassic.spec.ts

@@ -1,5 +1,6 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { defineComponent, h, nextTick } from "vue";
 import DeepExpandingMenuClassic from "../DeepExpandingMenuClassic.vue";
 import type { ResponsiveHeaderNavItem } from "~/types/components";
 
@@ -16,67 +17,184 @@ const defaultNavLinks: ResponsiveHeaderNavItem[] = [
   { name: "Contact", path: "/contact" },
 ];
 
+const twoGroups: ResponsiveHeaderNavItem[] = [
+  { name: "Services", childLinksTitle: "Our services", childLinks: [{ name: "Haircuts", path: "/haircuts" }] },
+  { name: "About", childLinksTitle: "About us", childLinks: [{ name: "Team", path: "/team" }] },
+];
+
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountMenu = async (options: { props?: Record<string, unknown>; attachTo?: HTMLElement } = {}) => {
+  const wrapper = await mountSuspended(DeepExpandingMenuClassic, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
+const groups = (wrapper: Awaited<ReturnType<typeof mountMenu>>) =>
+  wrapper.findAll("details").map((d) => d.element as HTMLDetailsElement);
+
 describe("DeepExpandingMenuClassic", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks } });
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders correct HTML structure", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks } });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders a <nav> by default", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks } });
     expect(wrapper.element.tagName.toLowerCase()).toBe("nav");
   });
 
   it("renders the given tag", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
-      props: { navLinks: defaultNavLinks, tag: "div" },
-    });
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks, tag: "div" } });
     expect(wrapper.element.tagName.toLowerCase()).toBe("div");
   });
 
+  it("labels the root when ariaLabel is set, and leaves it unlabelled otherwise", async () => {
+    const unlabelled = await mountMenu({ props: { navLinks: defaultNavLinks } });
+    expect(unlabelled.attributes("aria-label")).toBeUndefined();
+
+    const labelled = await mountMenu({ props: { navLinks: defaultNavLinks, ariaLabel: "Main" } });
+    expect(labelled.attributes("aria-label")).toBe("Main");
+  });
+
   it("renders a direct link for items with a path", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
-    const links = wrapper.findAll(".navigation-link");
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks } });
+    const links = wrapper.findAll(".deep-expanding-menu-classic-link");
     expect(links.map((l) => l.text())).toEqual(["Home", "Contact"]);
   });
 
   it("renders a <details> group for items with childLinks", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
-    expect(wrapper.find("details.navigation-group").exists()).toBe(true);
-    expect(wrapper.find(".navigation-group-toggle").text()).toContain("Services");
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find("details.deep-expanding-menu-classic-group").exists()).toBe(true);
+    expect(wrapper.find(".deep-expanding-menu-classic-group-toggle").text()).toContain("Services");
   });
 
   it("renders each child link inside the group panel", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
-    const childLinks = wrapper.findAll(".navigation-group-link");
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks } });
+    const childLinks = wrapper.findAll(".deep-expanding-menu-classic-group-link");
     expect(childLinks.map((l) => l.text())).toEqual(["Haircuts", "Colouring"]);
   });
 
   it("renders the childLinksTitle heading", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
-    expect(wrapper.find(".navigation-group-panel h4").text()).toBe("Our services");
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find(".deep-expanding-menu-classic-group-heading").text()).toBe("Our services");
   });
 
-  it("applies styleClassPassthrough classes", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
-      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["custom-class"] },
+  it("omits the heading when childLinksTitle is missing or empty", async () => {
+    const navLinks: ResponsiveHeaderNavItem[] = [
+      { name: "A", childLinks: [{ name: "A1", path: "/a1" }] },
+      { name: "B", childLinksTitle: "", childLinks: [{ name: "B1", path: "/b1" }] },
+    ];
+    const wrapper = await mountMenu({ props: { navLinks } });
+    expect(wrapper.find(".deep-expanding-menu-classic-group-heading").exists()).toBe(false);
+  });
+
+  it("omits the list when a group has no child links", async () => {
+    const navLinks: ResponsiveHeaderNavItem[] = [{ name: "Empty", childLinksTitle: "Empty", childLinks: [] }];
+    const wrapper = await mountMenu({ props: { navLinks } });
+    expect(wrapper.find(".deep-expanding-menu-classic-group-list").exists()).toBe(false);
+  });
+
+  it("gives the child link list a list role and hides the caret from assistive technology", async () => {
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find(".deep-expanding-menu-classic-group-list").attributes("role")).toBe("list");
+    expect(wrapper.find(".deep-expanding-menu-classic-group-icon").attributes("aria-hidden")).toBe("true");
+  });
+
+  it("keeps child links with duplicate names in step when the list is reordered", async () => {
+    const childLinks = [
+      { name: "Same", path: "/one" },
+      { name: "Same", path: "/two" },
+      { name: "Other", path: "/three" },
+    ];
+    const wrapper = await mountMenu({ props: { navLinks: [{ name: "Group", childLinks }] } });
+    await wrapper.setProps({ navLinks: [{ name: "Group", childLinks: [childLinks[2]!, childLinks[0]!] }] });
+    const links = wrapper.findAll(".deep-expanding-menu-classic-group-link");
+    expect(links.map((l) => l.attributes("href"))).toEqual(["/three", "/one"]);
+  });
+
+  it("shares a details name within one menu but not across menus", async () => {
+    const Host = defineComponent({
+      setup: () => () => [
+        h(DeepExpandingMenuClassic, { navLinks: twoGroups }),
+        h(DeepExpandingMenuClassic, { navLinks: twoGroups }),
+      ],
     });
+    const wrapper = await mountSuspended(Host);
+    mounted.push(wrapper);
+    const names = wrapper.findAll("details").map((d) => d.attributes("name"));
+    expect(names[0]).toBe(names[1]);
+    expect(names[2]).toBe(names[3]);
+    expect(names[0]).not.toBe(names[2]);
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks, styleClassPassthrough: ["custom-class"] } });
     expect(wrapper.classes()).toContain("custom-class");
   });
 
   it("resets classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
-      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["initial-class"] },
-    });
+    const wrapper = await mountMenu({ props: { navLinks: defaultNavLinks, styleClassPassthrough: ["initial-class"] } });
     expect(wrapper.classes()).toContain("initial-class");
 
     await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
     expect(wrapper.classes()).not.toContain("initial-class");
     expect(wrapper.classes()).toContain("updated-class");
   });
+
+  describe("closing", () => {
+    it("closes an open group when something else in the menu is clicked", async () => {
+      const wrapper = await mountMenu({ props: { navLinks: twoGroups } });
+      const [first] = groups(wrapper);
+      first!.open = true;
+
+      await wrapper.findAll("summary")[1]!.trigger("click");
+      expect(first!.open).toBe(false);
+    });
+
+    it("keeps a group open when its own panel is clicked, and closes it when a child link is followed", async () => {
+      const wrapper = await mountMenu({ props: { navLinks: twoGroups } });
+      const [first] = groups(wrapper);
+      first!.open = true;
+
+      await wrapper.find(".deep-expanding-menu-classic-group-heading").trigger("click");
+      expect(first!.open).toBe(true);
+
+      await wrapper.find(".deep-expanding-menu-classic-group-link").trigger("click");
+      expect(first!.open).toBe(false);
+    });
+
+    it("closes the group on Escape and returns focus to its toggle", async () => {
+      const wrapper = await mountMenu({ props: { navLinks: twoGroups }, attachTo: document.body });
+      const [first] = groups(wrapper);
+      first!.open = true;
+
+      const link = wrapper.find(".deep-expanding-menu-classic-group-link");
+      await link.trigger("keydown", { key: "Escape" });
+      expect(first!.open).toBe(false);
+      expect(document.activeElement).toBe(wrapper.findAll("summary")[0]!.element);
+    });
+
+    it("closes open groups on a click outside the menu", async () => {
+      const wrapper = await mountMenu({ props: { navLinks: twoGroups }, attachTo: document.body });
+      const [first] = groups(wrapper);
+      first!.open = true;
+      vi.advanceTimersByTime(1);
+
+      document.body.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+      document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await nextTick();
+      expect(first!.open).toBe(false);
+    });
+  });
 });

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/tests/__snapshots__/DeepExpandingMenuClassic.spec.ts.snap

@@ -2,17 +2,17 @@
 
 exports[`DeepExpandingMenuClassic > renders correct HTML structure 1`] = `
 "<nav class="deep-expanding-menu-classic">
-  <div class="inner"><a href="/" class="navigation-link">Home</a>
-    <details class="navigation-group" name="navigation-group">
-      <summary class="navigation-group-toggle"><span>Services</span><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></summary>
-      <div class="navigation-group-panel">
-        <h4 class="page-heading-4 mb-6">Our services</h4>
-        <ul class="navigation-group-list">
-          <li class="navigation-group-item"><a href="/services/haircuts" class="navigation-group-link">Haircuts</a></li>
-          <li class="navigation-group-item"><a href="/services/colouring" class="navigation-group-link">Colouring</a></li>
+  <div class="deep-expanding-menu-classic-inner"><a href="/" class="deep-expanding-menu-classic-link">Home</a>
+    <details class="deep-expanding-menu-classic-group" name="deep-expanding-menu-classic-v-0-0">
+      <summary class="deep-expanding-menu-classic-group-toggle"><span class="deep-expanding-menu-classic-group-label">Services</span><span class="iconify i-bi:caret-down-fill deep-expanding-menu-classic-group-icon" aria-hidden="true"></span></summary>
+      <div class="deep-expanding-menu-classic-group-panel">
+        <h4 class="deep-expanding-menu-classic-group-heading page-heading-4 mb-6">Our services</h4>
+        <ul class="deep-expanding-menu-classic-group-list" role="list">
+          <li class="deep-expanding-menu-classic-group-item"><a href="/services/haircuts" class="deep-expanding-menu-classic-group-link">Haircuts</a></li>
+          <li class="deep-expanding-menu-classic-group-item"><a href="/services/colouring" class="deep-expanding-menu-classic-group-link">Colouring</a></li>
         </ul>
       </div>
-    </details><a href="/contact" class="navigation-link">Contact</a>
+    </details><a href="/contact" class="deep-expanding-menu-classic-link">Contact</a>
   </div>
 </nav>"
 `;

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

@@ -8,6 +8,7 @@
 |---|---|---|
 | `--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 |
+| `--capture-qr-code-results-indent` | `2rem` | Inline-start padding of the results list (bullet indent) |
 
 The reset button is `InputButton` (`variant="secondary"`), styled by its own tokens.
 
@@ -20,13 +21,19 @@ The reset button is `InputButton` (`variant="secondary"`), styled by its own tok
 | `--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-width` | `0.2rem` | Drop zone dashed border width |
+| `--decode-qr-code-dropzone-border-colour` | `var(--theme-border)` | 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 |
+| `--decode-qr-code-dropzone-background-active` | `var(--theme-surface-subtle)` | Background while an image is dragged over |
+| `--decode-qr-code-results-indent` | `2rem` | Inline-start padding of the results list (bullet indent) |
 
-Private (not public API): `--_dropzone-border-colour`.
+Private (not public API): `--_decode-qr-code-dropzone-border-colour`.
 
+> Changed 2026-10-21: the drop zone border defaults to `var(--theme-border)` (was `gray`), its
+> width to `0.2rem` (was `2px`), and the active background to `var(--theme-surface-subtle)` (was
+> `transparent`, so dragging gave no feedback beyond the border). The private token was renamed
+> from `--_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`.
 
@@ -38,14 +45,22 @@ Private (not public API): `--_dropzone-border-colour`.
 |---|---|---|
 | `.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 |
+| `.decode-qr-code-dropzone[data-dropping]` | Decode | An image is dragged over the drop zone |
+| `.decode-qr-code-status` | Decode | No QR code found (`noResultLabel`), or with `[data-error]` the file couldn't be read (`readErrorLabel`) |
 
-Inner classes: Capture `.capture-qr-code-camera`, `.capture-qr-code-results`; Decode
+Inner classes: Capture `.capture-qr-code-camera`, `.capture-qr-code-results`,
+`.capture-qr-code-results-list`, `.capture-qr-code-result`, `.capture-qr-code-error-message`; 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`.
+input), `.decode-qr-code-dropzone`, `.decode-qr-code-dropzone-label`, `.decode-qr-code-results`,
+`.decode-qr-code-results-list`, `.decode-qr-code-result`. Results, error messages and labels wrap
+(`overflow-wrap: anywhere`), so a long decoded URL stays inside the component.
 Both results wrappers are polite live regions and always rendered; the `<ul>` inside appears once a
 code is decoded.
 
+> Changed 2026-10-21: `.decode-qr-code-dropzone.is-dropping` is now `[data-dropping]` (a bare state
+> class could collide with a consumer's own `.is-dropping`), and each result `<li>` lost its inner
+> `<span>` and gained a class.
+>
 > Changed 2026-09-28: renamed from `.capture-qr-stream` (root), `.camera-stopped`, `.camera-error`,
 > `.scanned-results`, `.qr-code-capture` and `.qr-code-dropzone`.
 

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

@@ -1,21 +1,19 @@
 <template>
-  <div class="capture-qr-code" :class="[elementClasses]">
+  <div ref="rootRef" 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" />
+      <QrcodeStream v-if="state.cameraOn" @error="onError" @detect="onDetect" />
       <div v-else class="capture-qr-code-stopped">
         <p>{{ cameraStoppedLabel }}</p>
       </div>
       <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 v-if="result?.length" class="capture-qr-code-results-list">
+          <li v-for="(r, i) in result" :key="i" class="capture-qr-code-result">{{ r }}</li>
         </ul>
       </div>
     </div>
     <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>
+        <p class="capture-qr-code-error-message">{{ state.errorMsg }}</p>
         <InputButton variant="secondary" :button-text="resetCameraLabel" @click="resetCamera" />
       </slot>
     </div>
@@ -23,21 +21,37 @@
 </template>
 
 <script setup lang="ts">
+import { useEventListener } from "@vueuse/core";
 import type { DetectedBarcode } from "nuxt-qrcode";
+import type { CaptureQrCodeErrorMessages, CaptureQrCodeErrorName } from "~/types/components";
 
 interface Props {
   cameraStoppedLabel?: string;
   resetCameraLabel?: string;
+  errorMessages?: CaptureQrCodeErrorMessages;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   cameraStoppedLabel: "Camera stopped",
   resetCameraLabel: "Reset camera",
+  errorMessages: () => ({}),
   styleClassPassthrough: () => [],
 });
 
-const qrcodeStreamRef = ref();
+const defaultErrorMessages: Required<CaptureQrCodeErrorMessages> = {
+  NotAllowedError: "Camera access was blocked. Allow it in your browser settings, then try again.",
+  NotFoundError: "No camera was found on this device.",
+  NotSupportedError: "This page needs a secure (HTTPS) connection to use the camera.",
+  NotReadableError: "The camera is already in use by another app or tab.",
+  OverconstrainedError: "No suitable camera was found on this device.",
+  StreamApiNotSupportedError: "This browser can't use the camera for scanning.",
+  InsecureContextError: "This page needs a secure (HTTPS) connection to use the camera.",
+  StreamLoadTimeoutError: "The camera took too long to start. Try again.",
+  default: "The camera couldn't be started. Try again.",
+};
+
+const rootRef = ref<HTMLElement | null>(null);
 const result = ref<string[]>();
 const state = reactive({
   errorMsg: "",
@@ -46,34 +60,19 @@ const state = reactive({
   cameraOn: true,
 });
 
-onMounted(() => {
-  state.cameraOn = true;
-  state.error = false;
-  state.errorMsg = "";
-  result.value = [];
-
-  const handleVisibilityChange = () => {
-    if (document.hidden) {
-      state.cameraOn = false;
-      stopAllMediaStreams();
-    }
-  };
-
-  document.addEventListener("visibilitychange", handleVisibilityChange);
-
-  onBeforeUnmount(() => {
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
-  });
-});
-
 function onDetect(detectedCodes: DetectedBarcode[]) {
   result.value = detectedCodes.map((code) => code.rawValue);
 }
 
 function onError(err: Error) {
+  const name = err.name as CaptureQrCodeErrorName;
   state.error = true;
   state.errorName = err.name;
-  state.errorMsg = `[${err.name}]: ${err.message}`;
+  state.errorMsg =
+    props.errorMessages[name] ??
+    defaultErrorMessages[name] ??
+    props.errorMessages.default ??
+    defaultErrorMessages.default;
 }
 
 function resetCamera() {
@@ -81,51 +80,38 @@ function resetCamera() {
   state.cameraOn = true;
 }
 
-function stopAllMediaStreams() {
-  if (qrcodeStreamRef.value) {
-    try {
-      const videoElement = qrcodeStreamRef.value.$el?.querySelector("video");
-      if (videoElement && videoElement.srcObject) {
-        const stream = videoElement.srcObject as MediaStream;
-        stream.getTracks().forEach((track) => track.stop());
-        videoElement.srcObject = null;
-      }
-    } catch (error) {
-      console.warn("Error stopping camera stream:", error);
-    }
-  }
+function stopMediaStreams() {
+  rootRef.value?.querySelectorAll("video").forEach((video) => {
+    if (!video.srcObject) return;
+    (video.srcObject as MediaStream).getTracks().forEach((track) => track.stop());
+    video.srcObject = null;
+  });
+}
 
-  try {
-    document.querySelectorAll("video").forEach((video) => {
-      if (video.srcObject) {
-        const stream = video.srcObject as MediaStream;
-        stream.getTracks().forEach((track) => track.stop());
-        video.srcObject = null;
-      }
-    });
-  } catch (error) {
-    console.warn("Error in global video cleanup:", error);
-  }
+function stopCamera() {
+  state.cameraOn = false;
+  stopMediaStreams();
 }
 
+useEventListener(
+  import.meta.client ? document : null,
+  "visibilitychange",
+  () => {
+    if (document.hidden) stopCamera();
+    else if (!state.error) state.cameraOn = true;
+  }
+);
+
 watch(
   () => state.cameraOn,
-  (newValue) => {
-    if (!newValue) {
-      nextTick(() => stopAllMediaStreams());
-    }
+  (cameraOn) => {
+    if (!cameraOn) nextTick(stopMediaStreams);
   }
 );
 
-onBeforeUnmount(() => {
-  state.cameraOn = false;
-  stopAllMediaStreams();
-});
-
-onDeactivated(() => {
-  state.cameraOn = false;
-  stopAllMediaStreams();
-});
+onBeforeUnmount(stopCamera);
+onDeactivated(stopCamera);
+onBeforeRouteLeave(stopCamera);
 
 onActivated(() => {
   state.cameraOn = true;
@@ -133,11 +119,6 @@ onActivated(() => {
   state.errorMsg = "";
 });
 
-onBeforeRouteLeave(() => {
-  state.cameraOn = false;
-  stopAllMediaStreams();
-});
-
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -150,6 +131,17 @@ watch(
 @layer components {
   .capture-qr-code {
     aspect-ratio: var(--capture-qr-code-aspect-ratio, 1 / 1);
+    min-inline-size: 0;
+
+    .capture-qr-code-results-list {
+      margin: 0;
+      padding-inline-start: var(--capture-qr-code-results-indent, 2rem);
+    }
+
+    .capture-qr-code-result,
+    .capture-qr-code-error-message {
+      overflow-wrap: anywhere;
+    }
 
     .capture-qr-code-error {
       display: grid;

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

@@ -6,18 +6,19 @@
     </label>
     <QrcodeDropZone
       class="decode-qr-code-dropzone"
-      :class="{ 'is-dropping': isDropping }"
+      :data-dropping="isDropping ? '' : undefined"
       @detect="onDetect"
       @dragover="onDropping"
+      @error="onDropError"
     >
       <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>
+      <ul v-if="result?.length" class="decode-qr-code-results-list">
+        <li v-for="(r, i) in result" :key="i" class="decode-qr-code-result">{{ r }}</li>
       </ul>
+      <p v-else-if="status === 'empty' && noResultLabel" class="decode-qr-code-status">{{ noResultLabel }}</p>
+      <p v-else-if="status === 'error' && readErrorLabel" class="decode-qr-code-status" data-error>{{ readErrorLabel }}</p>
     </div>
   </div>
 </template>
@@ -28,16 +29,21 @@ import type { DetectedBarcode } from "nuxt-qrcode";
 interface Props {
   uploadLabel?: string;
   dropLabel?: string;
+  noResultLabel?: string;
+  readErrorLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   uploadLabel: "Upload a QR code image",
   dropLabel: "Or drop a QR code image here",
+  noResultLabel: "No QR code was found in that image.",
+  readErrorLabel: "That file couldn't be read as an image.",
   styleClassPassthrough: () => [],
 });
 
 const result = ref<string[]>();
+const status = ref<"idle" | "found" | "empty" | "error">("idle");
 const isDropping = ref(false);
 
 function onDropping(dropping: boolean) {
@@ -46,6 +52,12 @@ function onDropping(dropping: boolean) {
 
 function onDetect(detectedCodes: DetectedBarcode[]) {
   result.value = detectedCodes.map((code) => code.rawValue);
+  status.value = result.value.length ? "found" : "empty";
+}
+
+function onDropError() {
+  result.value = [];
+  status.value = "error";
 }
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -61,31 +73,56 @@ watch(
   .decode-qr-code {
     display: grid;
     gap: var(--decode-qr-code-gap, 1.2rem);
+    min-inline-size: 0;
 
     .decode-qr-code-upload {
       display: grid;
       gap: var(--decode-qr-code-upload-gap, 0.6rem);
+      overflow-wrap: anywhere;
+
+      .decode-qr-code-capture {
+        max-inline-size: 100%;
+      }
     }
 
     .decode-qr-code-dropzone {
-      --_dropzone-border-colour: var(--decode-qr-code-dropzone-border-colour, gray);
+      --_decode-qr-code-dropzone-border-colour: var(--decode-qr-code-dropzone-border-colour, var(--theme-border));
 
       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);
+      border: var(--decode-qr-code-dropzone-border-width, 0.2rem) dashed var(--_decode-qr-code-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);
+      &[data-dropping] {
+        border-color: var(
+          --decode-qr-code-dropzone-border-colour-active,
+          var(--_decode-qr-code-dropzone-border-colour)
+        );
+        background-color: var(--decode-qr-code-dropzone-background-active, var(--theme-surface-subtle));
       }
 
       .decode-qr-code-dropzone-label {
         margin: 0;
+        overflow-wrap: anywhere;
+        text-align: center;
       }
     }
+
+    .decode-qr-code-results-list {
+      margin: 0;
+      padding-inline-start: var(--decode-qr-code-results-indent, 2rem);
+    }
+
+    .decode-qr-code-result,
+    .decode-qr-code-status {
+      overflow-wrap: anywhere;
+    }
+
+    .decode-qr-code-status {
+      margin: 0;
+    }
   }
 }
 </style>