srcdev-nuxt-components 9.6.19 → 9.6.20

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

@@ -1,6 +1,8 @@
+import { computed, ref } from "vue";
 import DeepExpandingMenuClassic from "../DeepExpandingMenuClassic.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
-import type { ResponsiveHeaderNavItem } from "~/types/components";
+import type { MediaCanvas, ResponsiveHeaderNavItem } from "~/types/components";
 
 const navLinks: ResponsiveHeaderNavItem[] = [
   { name: "Home", path: "/" },
@@ -16,63 +18,181 @@ const navLinks: ResponsiveHeaderNavItem[] = [
   { name: "Contact", path: "/contact" },
 ];
 
-const meta: Meta<typeof DeepExpandingMenuClassic> = {
+const stressNavLinks: ResponsiveHeaderNavItem[] = [
+  { name: "H", path: "/" },
+  {
+    name: "Dienstleistungsangebotsübersichtsseite",
+    childLinksTitle:
+      "Unsere vollständige Übersicht aller Dienstleistungen, Behandlungen und Pflegeangebote für Haut und Haar in Northtown",
+    childLinks: [
+      { name: "Haarschnitt", path: "/services/haircuts" },
+      { name: "https://example.com/a/very/long/unbroken/path/that/never/wraps/on/its/own", path: "/long-url" },
+      { name: "🎨 Colouring", path: "/services/colouring" },
+      { name: "Styling", path: "/services/styling-1" },
+      { name: "Styling", path: "/services/styling-2" },
+      { name: "<b>Not bold</b>", path: "/services/html" },
+      { name: "قص الشعر", path: "/services/rtl" },
+      ...Array.from({ length: 24 }, (_, i) => ({ name: `Treatment ${i + 1}`, path: `/services/treatment-${i + 1}` })),
+    ],
+  },
+  { name: "Gruppe ohne Titel", childLinks: [{ name: "Only link", path: "/only" }] },
+  { name: "Empty group", childLinksTitle: "Nothing here yet", childLinks: [] },
+  { name: "Supercalifragilisticexpialidociousandthensomemoretext", path: "/unbroken" },
+  { name: "🙂", path: "/emoji" },
+  { name: "Contact", path: "/contact" },
+  { name: "Contact", path: "/contact" },
+  {
+    name: "About us and our story",
+    childLinksTitle: "About Alex Morgan",
+    childLinks: [
+      { name: "Team", path: "/about/team" },
+      { name: "History", path: "/about/history" },
+    ],
+  },
+];
+
+type LineClamp = "none" | "1" | "2" | "3";
+
+// Story-only arg: drives a CSS token, not a DeepExpandingMenuClassic prop. See the argTypes entry.
+type StoryArgs = InstanceType<typeof DeepExpandingMenuClassic>["$props"] & {
+  headingLineClamp: LineClamp;
+};
+
+const meta: Meta<StoryArgs> = {
   title: "Molecules/DeepExpandingMenuClassic",
   component: DeepExpandingMenuClassic,
   argTypes: {
+    headingLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--deep-expanding-menu-classic-panel-heading-line-clamp` CSS token on a wrapper so you can try it here. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.site-nav { --deep-expanding-menu-classic-panel-heading-line-clamp: 1; }`. " +
+        "`1` is single-line ellipsis, `none` (the default) shows everything.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "none" } },
+    },
     tag: {
       control: { type: "select" },
-      options: ["div", "section", "nav", "ul", "ol"],
+      options: ["div", "section", "nav"],
       description: "Root element tag",
+      table: { category: "Basic", defaultValue: { summary: "nav" } },
+    },
+    ariaLabel: {
+      control: "text",
+      description: "Accessible name for the root. Set it when the page has more than one `<nav>`",
       table: { category: "Basic" },
     },
-    navLinks: { table: { disable: true } },
+    navLinks: {
+      control: "object",
+      description: "Top-level items: `path` renders a link, `childLinks` renders a toggle and panel",
+      table: { category: "Content" },
+    },
     styleClassPassthrough: { table: { disable: true } },
   },
   args: {
     tag: "nav",
     navLinks,
+    headingLineClamp: "none",
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
   parameters: {
+    layout: "fullscreen",
     docs: {
       description: {
         component:
-          "`<details>`/`<summary>`-based fallback implementation of `DeepExpandingMenu`, using `onClickOutside` to close an open group instead of CSS anchor-positioning/Popover API — use this when the modern implementation's browser support (see its own docs) isn't acceptable.",
+          "`<details>`/`<summary>`-based version of `DeepExpandingMenu`: each item is a direct link (`path`) or a native `<details>` group showing its child links (`childLinks`, with an optional `childLinksTitle` heading). " +
+          "Groups in one menu are exclusive; outside click, Escape and following a child link close the open group. No Popover API or anchor positioning involved. Props: `navLinks`, `tag`, `ariaLabel`. " +
+          "Prefer `DeepExpandingMenu` unless you need this simpler fallback.",
       },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof DeepExpandingMenuClassic>;
+type Story = StoryObj<StoryArgs>;
+
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => {
+    const { headingLineClamp: _headingLineClamp, ...rest } = args;
+    return rest;
+  });
+  const tokenStyles = computed(() => ({
+    "--deep-expanding-menu-classic-panel-heading-line-clamp": args.headingLineClamp,
+  }));
+  return { componentArgs, tokenStyles };
+}
+
+const render = (args: StoryArgs) => ({
+  components: { DeepExpandingMenuClassic },
+  setup() {
+    return useStorySetup(args);
+  },
+  template: `<div :style="tokenStyles"><DeepExpandingMenuClassic v-bind="componentArgs" /></div>`,
+});
 
 export const Default: Story = {
-  render: (args) => ({
-    components: { DeepExpandingMenuClassic },
-    setup() {
-      return { args };
-    },
-    template: `<DeepExpandingMenuClassic v-bind="args" style="padding: 4rem;" />`,
-  }),
+  render,
 };
 
 export const CustomColours: Story = {
+  name: "Custom Colours",
   render: (args) => ({
     components: { DeepExpandingMenuClassic },
     setup() {
-      return { args };
+      return useStorySetup(args);
     },
     template: `
-      <DeepExpandingMenuClassic
-        v-bind="args"
-        style="padding: 4rem; --deep-expanding-menu-classic-panel-background-colour: #1a1a1a; --deep-expanding-menu-classic-panel-border-colour: transparent; --deep-expanding-menu-classic-group-link-colour: white; --deep-expanding-menu-classic-panel-heading-colour: #aaaaaa;"
-      />
+      <div
+        :style="tokenStyles"
+        style="--deep-expanding-menu-classic-panel-background-colour: #1a1a1a; --deep-expanding-menu-classic-panel-border-colour: transparent; --deep-expanding-menu-classic-group-link-colour: white; --deep-expanding-menu-classic-group-link-border-colour-hover: white; --deep-expanding-menu-classic-panel-heading-colour: #aaaaaa;"
+      >
+        <DeepExpandingMenuClassic v-bind="componentArgs" />
+      </div>
     `,
   }),
   parameters: {
     docs: {
       description: {
-        story: "Overriding the public tokens via inline `--deep-expanding-menu-classic-*` custom properties.",
+        story: "Overriding the public `--deep-expanding-menu-classic-*` tokens on a wrapper element.",
+      },
+    },
+  },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    navLinks: stressNavLinks,
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "720px" },
+      description: {
+        story:
+          "Hostile nav data at every `CanvasSwitcher` width. Check that: the top-level row wraps instead of overflowing; " +
+          "the long German label and the unbroken word break inside the canvas; the caret stays beside a wrapped toggle label; " +
+          "the first panel's long heading wraps (try the story-only `headingLineClamp` CSS token control), its unbroken URL link stays inside the panel, " +
+          "`<b>Not bold</b>` renders as text, the right-to-left link reads correctly, and its 31 links stay inside the panel; " +
+          "duplicate `Styling` and `Contact` items both render; a group without a title shows its list only; " +
+          "an empty group opens with its heading and no list; panels are never wider than the menu itself (they open from their toggle, so one near the right edge can still overrun it: `DeepExpandingMenu` flips instead).",
       },
     },
   },

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