srcdev-nuxt-components 9.6.13 → 9.6.15

package/app/components/01.atoms/qr-code/CONSUMER-STYLING.md

@@ -4,7 +4,7 @@
 
 | Token | Default | Controls |
 |---|---|---|
-| `--display-qr-code-size` | the `size` prop (`256px`) | Width of the code; height follows via `aspect-ratio: 1 / 1` |
+| `--display-qr-code-size` | the `size` prop (`256px`) | Width of the code; height follows via `aspect-ratio: 1 / 1`. Capped at `max-inline-size: 100%`, so it never overflows its container |
 
 Module colours are props, not tokens: `black-color` (default `currentColor`) and `white-color`
 (default `transparent`). They're written into the SVG by `nuxt-qrcode`. Because the dark modules
@@ -20,7 +20,19 @@ No private `--_` tokens.
 ## State hooks
 
 The root is the `nuxt-qrcode` SVG with class `.display-qr-code`, `role="img"` and an
-`aria-label` (the `aria-label` prop, default `"QR code"`). There are no state classes.
+`aria-label` (the `aria-label` prop, default `"QR code"`).
+
+When the value is too long to encode, the root is instead a `<span>` with classes
+`.display-qr-code.display-qr-code-fallback` and a `data-error` attribute, holding the `fallback`
+slot. It keeps the same size and passthrough classes, centres its content, and has no role or
+label (the slot content speaks for itself).
+
+| Hook | Meaning |
+|---|---|
+| `.display-qr-code-fallback`, `[data-error]` | The value couldn't be encoded; the `fallback` slot is showing |
+
+> Changed 2026-10-19: the fallback root is new (an over-capacity value used to throw during
+> render), and the code is now capped at its container's width.
 
 ---
 
@@ -45,4 +57,5 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ## Class passthrough
 
-`style-class-passthrough` adds classes to the root SVG. Reactive after mount.
+`style-class-passthrough` adds classes to the root SVG, or to the fallback `<span>` when the value
+can't be encoded. Reactive after mount.

package/app/components/01.atoms/qr-code/DisplayQrCode.vue

@@ -1,5 +1,6 @@
 <template>
   <Qrcode
+    v-if="!hasEncodeError"
     :value="qrValue"
     class="display-qr-code"
     :variant
@@ -10,6 +11,9 @@
     :aria-label="ariaLabel"
     :class="[elementClasses]"
   />
+  <span v-else class="display-qr-code display-qr-code-fallback" :class="[elementClasses]" data-error>
+    <slot name="fallback"></slot>
+  </span>
 </template>
 
 <script setup lang="ts">
@@ -36,6 +40,26 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+const emit = defineEmits<{
+  error: [error: Error];
+}>();
+
+// The encoder throws while rendering when a value exceeds QR capacity (about 2.9KB).
+const hasEncodeError = ref(false);
+
+onErrorCaptured((error) => {
+  hasEncodeError.value = true;
+  emit("error", error instanceof Error ? error : new Error(String(error)));
+  return false;
+});
+
+watch(
+  () => props.qrValue,
+  () => {
+    hasEncodeError.value = false;
+  }
+);
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -49,6 +73,13 @@ watch(
   .display-qr-code {
     aspect-ratio: 1 / 1;
     width: var(--display-qr-code-size, v-bind(size));
+    max-inline-size: 100%;
+
+    &.display-qr-code-fallback {
+      display: inline-grid;
+      place-items: center;
+      overflow-wrap: anywhere;
+    }
   }
 }
 </style>

package/app/components/01.atoms/qr-code/stories/DisplayQrCode.stories.ts

@@ -1,214 +1,247 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import DisplayQrCodeComponent from "../DisplayQrCode.vue";
+import { computed } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import DisplayQrCode from "../DisplayQrCode.vue";
 import type { QrCodeVariant } from "../../../../types/components";
 
-const meta: Meta<typeof DisplayQrCodeComponent> = {
+type SvgVariant = QrCodeVariant["pixel"];
+
+interface StoryArgs {
+  qrValue: string;
+  size: string;
+  radius: number;
+  blackColor: string;
+  whiteColor: string;
+  ariaLabel: string;
+  variantInner: SvgVariant;
+  variantMarker: SvgVariant;
+  variantPixel: SvgVariant;
+}
+
+const variantOptions: SvgVariant[] = ["default", "circle", "rounded", "dots", "pixelated"];
+
+const variantArgType = (part: string) => ({
+  control: { type: "select" as const },
+  options: variantOptions,
+  description: `Story-only: sets \`variant.${part}\` on the \`variant\` prop.`,
+  table: { category: "Variant (story-only)" },
+});
+
+const meta: Meta<StoryArgs> = {
   title: "Atoms/QR Code/DisplayQrCode",
-  component: DisplayQrCodeComponent,
+  component: DisplayQrCode,
   argTypes: {
     qrValue: {
       control: { type: "text" },
-      description: "The value/content to encode in the QR code",
+      description: "The value to encode. Over about 2.9KB it can't be encoded, and the `fallback` slot renders instead.",
       table: { category: "Content" },
     },
     size: {
       control: { type: "text" },
-      description: "Size of the QR code (CSS value like '256px', '10rem')",
+      description: "Width of the code as any CSS length; `--display-qr-code-size` overrides it. Never wider than its container.",
       table: { category: "Appearance" },
     },
     radius: {
-      control: { type: "range", min: 0, max: 20, step: 1 },
-      description: "Border radius of the QR code corners",
+      control: { type: "range", min: 0, max: 1, step: 0.05 },
+      description: "Corner rounding for the rounded, circle and dots shapes, from 0 to 1 (the library clamps anything outside).",
       table: { category: "Appearance" },
     },
     blackColor: {
       control: { type: "color" },
-      description: "Color of the QR code foreground elements",
+      description: "Colour of the dark modules. Defaults to `currentColor`.",
       table: { category: "Appearance" },
     },
     whiteColor: {
       control: { type: "color" },
-      description: "Color of the QR code background",
+      description: "Colour of the light modules. Defaults to `transparent`.",
       table: { category: "Appearance" },
     },
     ariaLabel: {
       control: { type: "text" },
-      description: "Accessible name for the QR image (override for a more specific or translated label)",
+      description: "Accessible name for the QR image (override with a more specific or translated label)",
       table: { category: "Accessibility" },
     },
-    variant: { table: { disable: true } },
-    styleClassPassthrough: { table: { disable: true } },
+    variantInner: variantArgType("inner"),
+    variantMarker: variantArgType("marker"),
+    variantPixel: variantArgType("pixel"),
   },
   args: {
-    qrValue: "https://github.com/srcdev/nuxt-components",
+    qrValue: "https://example.com",
     size: "256px",
     radius: 0,
     blackColor: "#000000",
     whiteColor: "transparent",
     ariaLabel: "QR code",
-    styleClassPassthrough: [],
+    variantInner: "default",
+    variantMarker: "default",
+    variantPixel: "default",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renders a value as an SVG QR code with `role=\"img\"` and an `ariaLabel`. `size`, `radius`, `blackColor`, `whiteColor` and `variant` (separate shapes for the inner markers, outer markers and pixels) style it. A value too long to encode renders the `fallback` slot and emits `error` instead of breaking the page.",
+      },
+    },
   },
 };
 
 export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const storySetup = (args: StoryArgs) => {
+  const componentArgs = computed(() => {
+    const { variantInner, variantMarker, variantPixel, ...rest } = args;
+    return { ...rest, variant: { inner: variantInner, marker: variantMarker, pixel: variantPixel } };
+  });
+  return { componentArgs };
+};
 
-interface QrStoryArgs {
-  qrValue: string;
-  size: string;
-  radius: number;
-  blackColor: string;
-  whiteColor: string;
-  ariaLabel: string;
-  styleClassPassthrough: string[];
-}
-
-const DisplayTemplate: StoryFn<QrStoryArgs> = (args, { parameters }) => ({
-  components: { DisplayQrCodeComponent },
-  setup() {
-    const variant: QrCodeVariant = parameters?.variant || {
-      inner: "default",
-      marker: "default",
-      pixel: "default",
-    };
-    return { args, variant };
-  },
+const render: Story["render"] = (args) => ({
+  components: { DisplayQrCode },
+  setup: () => storySetup(args),
   template: `
-    <div style="padding: 40px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 8px;">
-      <DisplayQrCodeComponent
-        :qr-value="args.qrValue"
-        :variant="variant"
-        :radius="args.radius"
-        :black-color="args.blackColor"
-        :white-color="args.whiteColor"
-        :size="args.size"
-        :aria-label="args.ariaLabel"
-        :style-class-passthrough="args.styleClassPassthrough"
-      />
+    <div style="padding: 4rem; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 0.8rem;">
+      <DisplayQrCode v-bind="componentArgs" />
     </div>
   `,
 });
 
-export const Default = DisplayTemplate.bind({});
+const story = (description: string, args: Partial<StoryArgs> = {}): Story => ({
+  render,
+  args,
+  parameters: { docs: { description: { story: description } } },
+});
 
-export const Website = DisplayTemplate.bind({});
-Website.args = { qrValue: "https://nuxt.com", radius: 8, blackColor: "#000000" };
-Website.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
+export const Default = story("Default styling. Use the Controls panel to try every prop, including the three variant shapes.");
 
-export const VariantDefault = DisplayTemplate.bind({});
-VariantDefault.args = { qrValue: "Default variant style", radius: 4 };
-VariantDefault.parameters = { variant: { inner: "default", marker: "default", pixel: "default" } };
+export const Website = story("A URL with circle inner markers, rounded outer markers and dot pixels.", {
+  qrValue: "https://nuxt.com",
+  radius: 0.5,
+  variantInner: "circle",
+  variantMarker: "rounded",
+  variantPixel: "dots",
+});
 
-export const VariantCircle = DisplayTemplate.bind({});
-VariantCircle.args = { qrValue: "Circle variant style", radius: 8, blackColor: "#1e40af" };
-VariantCircle.parameters = { variant: { inner: "circle", marker: "circle", pixel: "circle" } };
+export const VariantCircle = story("Every part in the circle shape.", {
+  qrValue: "Circle variant style",
+  radius: 0.5,
+  blackColor: "#1e40af",
+  variantInner: "circle",
+  variantMarker: "circle",
+  variantPixel: "circle",
+});
 
-export const VariantRounded = DisplayTemplate.bind({});
-VariantRounded.args = { qrValue: "Rounded variant style", radius: 12, blackColor: "#059669" };
-VariantRounded.parameters = { variant: { inner: "rounded", marker: "rounded", pixel: "rounded" } };
+export const VariantRounded = story("Every part in the rounded shape, at full radius.", {
+  qrValue: "Rounded variant style",
+  radius: 1,
+  blackColor: "#059669",
+  variantInner: "rounded",
+  variantMarker: "rounded",
+  variantPixel: "rounded",
+});
 
-export const VariantDots = DisplayTemplate.bind({});
-VariantDots.args = { qrValue: "Dots variant style", radius: 6, blackColor: "#dc2626" };
-VariantDots.parameters = { variant: { inner: "dots", marker: "dots", pixel: "dots" } };
+export const VariantDots = story("Every part in the dots shape.", {
+  qrValue: "Dots variant style",
+  radius: 0.5,
+  blackColor: "#dc2626",
+  variantInner: "dots",
+  variantMarker: "dots",
+  variantPixel: "dots",
+});
 
-export const VariantMixed = DisplayTemplate.bind({});
-VariantMixed.args = { qrValue: "Mixed variants for creative styling", radius: 10, blackColor: "#7c3aed" };
-VariantMixed.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
+export const VariantPixelated = story("Every part in the pixelated shape.", {
+  qrValue: "Pixelated variant style",
+  blackColor: "#7c3aed",
+  variantInner: "pixelated",
+  variantMarker: "pixelated",
+  variantPixel: "pixelated",
+});
 
-export const WiFiConnection = DisplayTemplate.bind({});
-WiFiConnection.args = { qrValue: "WIFI:T:WPA;S:MyHomeNetwork;P:mySecurePassword123;H:false;", blackColor: "#1e40af", radius: 4 };
-WiFiConnection.parameters = { variant: { inner: "rounded", marker: "circle", pixel: "default" } };
+export const WiFiConnection = story("A Wi-Fi join string, which phone cameras offer to connect to.", {
+  qrValue: "WIFI:T:WPA;S:NorthtownGuest;P:example-password;H:false;",
+  blackColor: "#1e40af",
+  radius: 0.25,
+  variantInner: "rounded",
+  variantMarker: "circle",
+});
 
-export const VCardContact = DisplayTemplate.bind({});
-VCardContact.args = {
-  qrValue: "BEGIN:VCARD\\nVERSION:3.0\\nFN:John Doe\\nORG:Acme Corp\\nTITLE:Software Engineer\\nTEL:+1234567890\\nEMAIL:john.doe@acme.com\\nURL:https://johndoe.dev\\nEND:VCARD",
+export const VCardContact = story("A vCard contact. Longer values produce a denser code.", {
+  qrValue:
+    "BEGIN:VCARD\nVERSION:3.0\nFN:Alex Morgan\nORG:Northtown Studio\nTEL:+441234567890\nEMAIL:alex@example.com\nURL:https://example.com\nEND:VCARD",
   blackColor: "#059669",
-  radius: 12,
-};
-VCardContact.parameters = { variant: { inner: "dots", marker: "rounded", pixel: "circle" } };
-
-export const SmallSize = DisplayTemplate.bind({});
-SmallSize.args = { qrValue: "Small QR for tight spaces", size: "128px", radius: 2, blackColor: "#f59e0b" };
-SmallSize.parameters = { variant: { inner: "dots", marker: "circle", pixel: "rounded" } };
-
-export const LargeSize = DisplayTemplate.bind({});
-LargeSize.args = { qrValue: "Large QR for posters and signage", size: "400px", radius: 16, blackColor: "#0ea5e9" };
-LargeSize.parameters = { variant: { inner: "circle", marker: "rounded", pixel: "dots" } };
-
-export const HighContrast = DisplayTemplate.bind({});
-HighContrast.args = { qrValue: "High contrast for accessibility", blackColor: "#000000", whiteColor: "#ffffff", radius: 0, size: "256px" };
-HighContrast.parameters = { variant: { inner: "default", marker: "default", pixel: "default" } };
-
-const PlaygroundTemplate: StoryFn<QrStoryArgs> = (args) => ({
-  components: { DisplayQrCodeComponent },
-  setup() {
-    const qrValue = ref(args.qrValue);
-    const variant = ref<QrCodeVariant>({ inner: "circle", marker: "rounded", pixel: "dots" });
-    const radius = ref(args.radius);
-    const blackColor = ref(args.blackColor);
-    const whiteColor = ref(args.whiteColor);
-    const sizeValue = ref(256);
-    const size = computed(() => `${sizeValue.value}px`);
-    const presetValues = [
-      { label: "Website URL", value: "https://nuxt.com" },
-      { label: "WiFi Network", value: "WIFI:T:WPA;S:MyNetwork;P:password123;" },
-      { label: "Phone Number", value: "tel:+1234567890" },
-      { label: "Email", value: "mailto:hello@example.com" },
-      { label: "SMS", value: "sms:+1234567890?body=Hello!" },
-      { label: "Location", value: "geo:40.7128,-74.0060" },
-    ];
-    const variantOptions = ["default", "circle", "rounded", "dots"];
-    return { qrValue, variant, radius, blackColor, whiteColor, sizeValue, size, presetValues, variantOptions };
-  },
-  template: `
-    <div style="padding: 40px;">
-      <div style="display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start;">
-        <div style="display: flex; align-items: center; justify-content: center; min-height: 400px; background: #f8fafc; border-radius: 8px; padding: 40px;">
-          <DisplayQrCodeComponent :qrValue="qrValue" :variant="variant" :radius="radius" :blackColor="blackColor" :whiteColor="whiteColor" :size="size" />
+  radius: 0.75,
+  variantInner: "dots",
+  variantMarker: "rounded",
+  variantPixel: "circle",
+});
+
+export const SmallSize = story("`size` at 128px.", { size: "128px" });
+
+export const LargeSize = story("`size` at 400px. In a narrower container the code shrinks to fit.", {
+  size: "400px",
+  radius: 0.5,
+  blackColor: "#0ea5e9",
+  variantInner: "circle",
+  variantMarker: "rounded",
+  variantPixel: "dots",
+});
+
+export const HighContrast = story("Black on an opaque white background, the most reliable combination for scanning.", {
+  whiteColor: "#ffffff",
+});
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  render: () => ({
+    components: { DisplayQrCode },
+    setup() {
+      const nearCapacity = "x".repeat(2900);
+      const overCapacity = "https://example.com/?q=" + "x".repeat(4000);
+      return { nearCapacity, overCapacity };
+    },
+    template: `
+      <div style="display: grid; gap: 2.4rem; padding: 2.4rem; font-size: 1.4rem;">
+        <p style="margin: 0;">An empty value, a single character, and emoji with right-to-left text: each still renders a code.</p>
+        <div style="display: flex; flex-wrap: wrap; gap: 2.4rem;">
+          <DisplayQrCode qr-value="" size="12rem"></DisplayQrCode>
+          <DisplayQrCode qr-value="a" size="12rem"></DisplayQrCode>
+          <DisplayQrCode qr-value="😀 التوصيل المجاني" size="12rem"></DisplayQrCode>
         </div>
-        <div style="background: white; padding: 24px; border-radius: 8px; border: 1px solid #e5e7eb;">
-          <h3 style="margin: 0 0 20px 0; color: #374151; font-size: 18px;">QR Code Playground</h3>
-          <div style="margin-bottom: 20px;">
-            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Quick Presets:</label>
-            <select @change="qrValue = $event.target.value" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
-              <option value="">Select a preset...</option>
-              <option v-for="preset in presetValues" :key="preset.label" :value="preset.value">{{ preset.label }}</option>
-            </select>
-          </div>
-          <div style="margin-bottom: 20px;">
-            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Custom Content:</label>
-            <textarea v-model="qrValue" rows="3" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 12px;" placeholder="Enter QR code content..." />
-          </div>
-          <div style="margin-bottom: 20px;">
-            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Style Variants:</label>
-            <div style="display: grid; gap: 8px;">
-              <div><label style="font-size: 12px; color: #6b7280;">Inner:</label><select v-model="variant.inner" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
-              <div><label style="font-size: 12px; color: #6b7280;">Marker:</label><select v-model="variant.marker" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
-              <div><label style="font-size: 12px; color: #6b7280;">Pixel:</label><select v-model="variant.pixel" style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;"><option v-for="option in variantOptions" :key="option" :value="option">{{ option }}</option></select></div>
-            </div>
-          </div>
-          <div style="margin-bottom: 20px;">
-            <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">Appearance:</label>
-            <div style="display: grid; gap: 12px;">
-              <div><label style="font-size: 12px; color: #6b7280;">Size: {{ sizeValue }}px</label><input v-model.number="sizeValue" type="range" min="128" max="400" step="16" style="width: 100%;" /></div>
-              <div><label style="font-size: 12px; color: #6b7280;">Radius: {{ radius }}px</label><input v-model.number="radius" type="range" min="0" max="20" step="1" style="width: 100%;" /></div>
-              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
-                <div><label style="font-size: 12px; color: #6b7280;">Foreground:</label><input v-model="blackColor" type="color" style="width: 100%; height: 32px; border: 1px solid #d1d5db; border-radius: 4px;" /></div>
-                <div><label style="font-size: 12px; color: #6b7280;">Background:</label><input v-model="whiteColor" type="color" style="width: 100%; height: 32px; border: 1px solid #d1d5db; border-radius: 4px;" /></div>
-              </div>
-            </div>
-          </div>
+
+        <p style="margin: 0;">2,900 characters, just under capacity: the densest code the encoder makes.</p>
+        <DisplayQrCode :qr-value="nearCapacity" size="32rem"></DisplayQrCode>
+
+        <p style="margin: 0;">Over capacity: the <code>fallback</code> slot renders in place of the code (left), or nothing (right) when the slot is empty.</p>
+        <div style="display: flex; flex-wrap: wrap; gap: 2.4rem; align-items: start;">
+          <DisplayQrCode :qr-value="overCapacity" size="16rem" style="outline: 0.1rem dashed currentColor;">
+            <template #fallback>
+              <span style="padding: 1.2rem; text-align: center;">Thislinkistoolongtoshowasaqrcodepleaseusethebuttonbelow</span>
+            </template>
+          </DisplayQrCode>
+          <DisplayQrCode :qr-value="overCapacity" size="16rem" style="outline: 0.1rem dashed currentColor;"></DisplayQrCode>
         </div>
-      </div>
-    </div>
-  `,
-});
 
-export const InteractivePlayground = PlaygroundTemplate.bind({});
-InteractivePlayground.args = {
-  qrValue: "https://github.com/srcdev/nuxt-components",
-  radius: 8,
-  blackColor: "#000000",
-  whiteColor: "transparent",
-  size: "256px",
-  styleClassPassthrough: [],
+        <p style="margin: 0;">An 80rem <code>size</code> inside an 18rem column: the code shrinks to the column.</p>
+        <div style="inline-size: 18rem; outline: 0.1rem dashed currentColor;">
+          <DisplayQrCode qr-value="https://example.com" size="80rem"></DisplayQrCode>
+        </div>
+
+        <p style="margin: 0;">Out-of-range radius (-1 and 5): the library clamps it to 0 and 1.</p>
+        <div style="display: flex; flex-wrap: wrap; gap: 2.4rem;">
+          <DisplayQrCode qr-value="https://example.com" size="12rem" :radius="-1" :variant="{ inner: 'rounded', marker: 'rounded', pixel: 'rounded' }"></DisplayQrCode>
+          <DisplayQrCode qr-value="https://example.com" size="12rem" :radius="5" :variant="{ inner: 'rounded', marker: 'rounded', pixel: 'rounded' }"></DisplayQrCode>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      story: { inline: false, height: "1400px" },
+      description: {
+        story:
+          "Worst-case values. Check: empty, single-character, emoji and right-to-left values all render a code; the near-capacity code renders without errors; an over-capacity value shows the `fallback` slot (with its unbroken text wrapping inside the box) or an empty box, never an error; an oversized `size` shrinks to its container; an out-of-range radius renders as 0 and 1.",
+      },
+    },
+  },
 };

package/app/components/01.atoms/qr-code/tests/DisplayQrCode.spec.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from "vitest";
+import { defineComponent, h, nextTick } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import DisplayQrCode from "../DisplayQrCode.vue";
 import type { QrCodeVariant } from "~/types/components";
@@ -152,3 +153,60 @@ describe("DisplayQrCode accessibility", () => {
     expect(wrapper.attributes("aria-label")).toBe("Scan to open our booking page");
   });
 });
+
+// Stands in for nuxt-qrcode, whose encoder throws "Data too long" while rendering over-capacity values.
+const QrcodeStub = defineComponent({
+  props: { value: { type: String, required: true } },
+  setup(stubProps) {
+    return () => {
+      if (stubProps.value.length > 2953) throw new Error("Data too long");
+      return h("svg");
+    };
+  },
+});
+
+const mountWithEncoder = (props: { qrValue: string; styleClassPassthrough?: string }, slots: Record<string, string> = {}) =>
+  mountSuspended(DisplayQrCode, { props, slots, global: { stubs: { Qrcode: QrcodeStub } } });
+
+describe("DisplayQrCode worst-case values", () => {
+  const tooLong = "x".repeat(5000);
+
+  it("renders an empty value without throwing", async () => {
+    const wrapper = await mountWithEncoder({ qrValue: "" });
+    expect(wrapper.attributes("role")).toBe("img");
+    expect(wrapper.attributes("data-error")).toBeUndefined();
+  });
+
+  it("encodes emoji and right-to-left text", async () => {
+    const wrapper = await mountWithEncoder({ qrValue: "😀 التوصيل المجاني" });
+    expect(wrapper.attributes("role")).toBe("img");
+  });
+
+  it("renders the fallback instead of throwing when the value exceeds QR capacity", async () => {
+    const wrapper = await mountWithEncoder({ qrValue: tooLong, styleClassPassthrough: "extra" }, { fallback: '<span class="custom-fallback">Too long to encode</span>' });
+    await nextTick();
+    expect(wrapper.find(".display-qr-code-fallback").exists()).toBe(true);
+    expect(wrapper.attributes("data-error")).toBeDefined();
+    expect(wrapper.attributes("role")).toBeUndefined();
+    expect(wrapper.classes()).toContain("extra");
+    expect(wrapper.find(".custom-fallback").text()).toBe("Too long to encode");
+  });
+
+  it("emits error when the value exceeds QR capacity", async () => {
+    const wrapper = await mountWithEncoder({ qrValue: tooLong });
+    await nextTick();
+    const events = wrapper.emitted("error");
+    expect(events).toHaveLength(1);
+    expect(events?.[0]?.[0]).toBeInstanceOf(Error);
+  });
+
+  it("recovers when the value changes to one that fits", async () => {
+    const wrapper = await mountWithEncoder({ qrValue: tooLong });
+    await nextTick();
+    expect(wrapper.find(".display-qr-code-fallback").exists()).toBe(true);
+    await wrapper.setProps({ qrValue: "https://example.com" });
+    await nextTick();
+    expect(wrapper.find(".display-qr-code-fallback").exists()).toBe(false);
+    expect(wrapper.attributes("role")).toBe("img");
+  });
+});

package/app/components/01.atoms/tabbed-content/CONSUMER-STYLING.md

@@ -58,7 +58,7 @@ box.
 | `--tabs-underline-indicator-height` | `0.4rem` | Thickness of the underline (`axis="x"`), also its width on `axis="y"` |
 | `--tabs-hover-underline-indicator-colour` | `--tabs-underline-indicator-colour` | Colour of the thin underline/sideline that follows the hovered tab (`trackHover` and `trackIndicator`) |
 | `--tabs-hover-underline-indicator-height` | `0.1rem` | Its thickness; `0` hides it. Sits under the active underline where they overlap |
-| `--tabs-hover-indicator-stretch` | `1` | Stretch of the hover highlight and hover underline as they move: `1` stretches (leading edge first, trailing edge catches up), `0` slides both edges together. Values in between shorten the stretch |
+| `--tabs-indicator-stretch` | `1` | Stretch of every indicator (hover, active and both underlines) as it moves: `1` stretches (leading edge first, trailing edge catches up), `0` slides both edges together. Values in between shorten the stretch |
 
 ### More menu (`overflowMode="menu"`, `axis="x"`)
 
@@ -100,7 +100,7 @@ insets from the bar's start and end along the axis), `--_{kind}-duration`,
 `--_{kind}-start-delay` / `--_{kind}-end-delay`; each indicator reads them through its own
 `--_start` / `--_end` / `--_duration` / `--_start-delay` / `--_end-delay`. Not public API; use the
 `transitionDuration` prop for indicator speed (one edge moves for that long, then the other), and
-`--tabs-hover-indicator-stretch` to turn the hover stretch off. The More menu also uses
+`--tabs-indicator-stretch` to turn the stretch off. The More menu also uses
 `--_anchor-name` (a per-instance anchor name) and the `--_anchor-*` position values
 `useAnchoredPopover` writes for browsers without CSS anchor positioning.
 
@@ -169,6 +169,19 @@ before.
 
 ---
 
+## Indicator motion and reduced motion
+
+The indicators slide with `useSlidingIndicator` (shared with `SlidingToggle`): the leading edge
+moves first and the trailing edge catches up. Under `prefers-reduced-motion` they snap.
+
+> **Changed 2026-10-19**: the indicators used to slide even under `prefers-reduced-motion`.
+>
+> **Changed 2026-10-19**: `--tabs-hover-indicator-stretch` (hover only) is now
+> `--tabs-indicator-stretch` and covers the active indicator and underline too. Rename it in your
+> CSS; `0` now turns the stretch off for every indicator.
+
+---
+
 ## Indicator visibility is prop-driven
 
 Whether each indicator renders is set by `trackHover` / `trackActive` / `trackIndicator`, not

package/app/components/01.atoms/tabbed-content/TabbedContent.vue

@@ -354,8 +354,8 @@ watch(
         --_start: var(--_hovered-start, 0px);
         --_end: var(--_hovered-end, 100%);
         --_duration: var(--_hovered-duration, 0ms);
-        --_start-delay: calc(var(--_hovered-start-delay, 0ms) * var(--tabs-hover-indicator-stretch, 1));
-        --_end-delay: calc(var(--_hovered-end-delay, 0ms) * var(--tabs-hover-indicator-stretch, 1));
+        --_start-delay: calc(var(--_hovered-start-delay, 0ms) * var(--tabs-indicator-stretch, 1));
+        --_end-delay: calc(var(--_hovered-end-delay, 0ms) * var(--tabs-indicator-stretch, 1));
       }
 
       .tabbed-content-indicator-active,
@@ -363,8 +363,8 @@ watch(
         --_start: var(--_active-start, 0px);
         --_end: var(--_active-end, 100%);
         --_duration: var(--_active-duration, 0ms);
-        --_start-delay: var(--_active-start-delay, 0ms);
-        --_end-delay: var(--_active-end-delay, 0ms);
+        --_start-delay: calc(var(--_active-start-delay, 0ms) * var(--tabs-indicator-stretch, 1));
+        --_end-delay: calc(var(--_active-end-delay, 0ms) * var(--tabs-indicator-stretch, 1));
       }
 
       .tabbed-content-indicator-hover,