srcdev-nuxt-components 9.6.2 → 9.6.4

package/.vscode/srcdev-component-pricing-card.code-snippets

@@ -4,97 +4,65 @@
     "scope": "vue,html",
     "body": [
       "<PricingCard",
-      "  planName=\"$1Single Site\"",
+      "  plan-name=\"$1Single Site\"",
       "  :price=\"$2199\"",
-      "  billingPeriod=\"$3one-time\"",
-      "  description=\"$4Perfect for freelancers and solo practitioners.\"",
-      "  :features=\"[",
-      "    '$5Feature 1',",
-      "    '$6Feature 2',",
-      "    '$7Feature 3',",
-      "  ]\"",
-      "  @select=\"$8handleSelect\"",
+      "  currency-symbol=\"$3£\"",
+      "  billing-period=\"$4one-time\"",
+      "  description=\"$5Perfect for freelancers and solo practitioners.\"",
+      "  :features=\"['$6Feature 1', '$7Feature 2', '$8Feature 3']\"",
+      "  @select=\"$9handleSelect\"",
       "/>"
     ]
   },
   "SRCDEV PricingCard Highlighted": {
-    "description": "PricingCard with 'Most Popular' highlight and custom button",
+    "description": "PricingCard with 'Most Popular' highlight",
     "scope": "vue,html",
     "body": [
       "<PricingCard",
-      "  planName=\"$1Agency\"",
+      "  plan-name=\"$1Agency\"",
       "  :price=\"$2499\"",
-      "  billingPeriod=\"$3one-time\"",
+      "  billing-period=\"$3one-time\"",
       "  description=\"$4Best for growing teams.\"",
-      "  :is-highlighted=\"true\"",
-      "  :features=\"[",
-      "    '$5Feature 1',",
-      "    '$6Feature 2',",
-      "    '$7Feature 3',",
-      "  ]\"",
-      "  @select=\"$8handleSelect\"",
-      ">",
-      "  <template #cta=\"{ ctaText, isDisabled, onSelect }\">",
-      "    <InputButton",
-      "      :button-text=\"ctaText\"",
-      "      variant=\"$9primary\"",
-      "      :readonly=\"isDisabled\"",
-      "      @click=\"onSelect\"",
-      "    />",
-      "  </template>",
-      "</PricingCard>"
+      "  is-highlighted",
+      "  badge-text=\"$5Most Popular\"",
+      "  :features=\"['$6Feature 1', '$7Feature 2', '$8Feature 3']\"",
+      "  @select=\"$9handleSelect\"",
+      "/>"
     ]
   },
   "SRCDEV PricingCard Grid": {
-    "description": "Three-card pricing comparison grid",
+    "description": "Pricing comparison grid from a plans array",
     "scope": "vue,html",
     "body": [
-      "<div class=\"pricing-cards-grid\">",
-      "  <PricingCard",
-      "    planName=\"Single Site\"",
-      "    :price=\"$1199\"",
-      "    billingPeriod=\"one-time\"",
-      "    description=\"$2For freelancers.\"",
-      "    :features=\"['$3Feature 1', '$4Feature 2']\"",
-      "    @select=\"handleSelect\"",
-      "  />",
-      "  <PricingCard",
-      "    planName=\"Agency\"",
-      "    :price=\"$5499\"",
-      "    billingPeriod=\"one-time\"",
-      "    description=\"$6For growing teams.\"",
-      "    :is-highlighted=\"true\"",
-      "    :features=\"['$7Feature 1', '$8Feature 2', '$9Feature 3']\"",
-      "    @select=\"handleSelect\"",
-      "  />",
+      "<div class=\"$1pricing-grid\">",
       "  <PricingCard",
-      "    planName=\"Unlimited\"",
-      "    :price=\"$10999\"",
-      "    billingPeriod=\"one-time\"",
-      "    description=\"$11Enterprise plan.\"",
-      "    :features=\"['$12Feature 1', '$13Feature 2', '$14Feature 3', '$15Feature 4']\"",
-      "    @select=\"handleSelect\"",
+      "    v-for=\"plan in $2plans\"",
+      "    :key=\"plan.id\"",
+      "    :plan-name=\"plan.name\"",
+      "    :price=\"plan.price\"",
+      "    :description=\"plan.description\"",
+      "    :features=\"plan.features\"",
+      "    :is-highlighted=\"plan.id === '$3pro'\"",
+      "    heading-tag=\"$4h2\"",
+      "    @select=\"$5handleSelect\"",
       "  />",
       "</div>"
     ]
   },
   "SRCDEV PricingCard Custom Button": {
-    "description": "PricingCard with custom button variant via #cta slot",
+    "description": "PricingCard with custom button via #cta slot",
     "scope": "vue,html",
     "body": [
       "<PricingCard",
-      "  planName=\"$1Premium\"",
+      "  plan-name=\"$1Premium\"",
       "  :price=\"$2799\"",
-      "  billingPeriod=\"$3one-time\"",
-      "  description=\"$4All features included.\"",
-      "  :features=\"['$5Feature 1', '$6Feature 2']\"",
-      "  @select=\"$7handleSelect\"",
+      "  :features=\"['$3Feature 1', '$4Feature 2']\"",
+      "  @select=\"$5handleSelect\"",
       ">",
       "  <template #cta=\"{ ctaText, isDisabled, onSelect }\">",
       "    <InputButton",
       "      :button-text=\"ctaText\"",
-      "      variant=\"$8secondary\"",
-      "      theme=\"$9default\"",
+      "      variant=\"$6secondary\"",
       "      :readonly=\"isDisabled\"",
       "      @click=\"onSelect\"",
       "    />",
@@ -107,17 +75,12 @@
     "scope": "vue,html",
     "body": [
       "<PricingCard",
-      "  planName=\"$1Annual\"",
+      "  plan-name=\"$1Annual\"",
       "  :price=\"$249\"",
-      "  billingPeriod=\"$3per year\"",
-      "  description=\"$4Early adopter pricing on the annual plan.\"",
-      "  ribbonText=\"$5EARLYBIRD50 · 50% off\"",
-      "  :features=\"[",
-      "    '$6Feature 1',",
-      "    '$7Feature 2',",
-      "    '$8Feature 3',",
-      "  ]\"",
-      "  @select=\"$9handleSelect\"",
+      "  billing-period=\"$3per year\"",
+      "  ribbon-text=\"$4EARLYBIRD50 · 50% off\"",
+      "  :features=\"['$5Feature 1', '$6Feature 2']\"",
+      "  @select=\"$7handleSelect\"",
       "/>"
     ]
   },
@@ -127,21 +90,20 @@
     "body": [
       ".$1pricing-page {",
       "  .pricing-card {",
-      "    --pricing-card-border-radius: $2;",
-      "    --pricing-card-padding: $3;",
-      "    --pricing-card-gap: $4;",
-      "    --pricing-card-shadow: $5;",
+      "    --pricing-card-background: $2;",
+      "    --pricing-card-border-radius: $3;",
+      "    --pricing-card-padding: $4;",
+      "    --pricing-card-gap: $5;",
       "    --pricing-card-name-color: $6;",
-      "    --pricing-card-amount-color: $7;",
-      "    --pricing-card-cta-bg: $8;",
-      "    --pricing-card-cta-bg-hover: $9;",
-      "    --pricing-card-ribbon-bg: $10;",
-      "    --pricing-card-ribbon-text: $11;",
+      "    --pricing-card-description-line-clamp: $7;",
+      "    --pricing-card-feature-icon-color: $8;",
+      "    --pricing-card-ribbon-bg: $9;",
+      "    --input-button-primary-surface: $10;",
       "",
       "    &.is-highlighted {",
-      "      --pricing-card-highlight-border: $12;",
-      "      --pricing-card-highlight-shadow: $13;",
-      "      --pricing-card-highlight-scale: $14;",
+      "      --pricing-card-highlight-border: $11;",
+      "      --pricing-card-highlight-scale: $12;",
+      "      --pricing-card-badge-bg: $13;",
       "    }",
       "  }",
       "}"

package/README.md

@@ -25,12 +25,12 @@ defineNuxtConfig({
 
 ## Claude Code Skills
 
-This package ships Claude Code skills — reference docs for components and development tasks — in the `.claude/` directory.
+This package ships Claude Code skills (reference docs for components and development tasks) and a curated set of Claude Code rules (short constraints for working with the layer: CSS nesting, overrides, props, NuxtImg, Storybook args) in the `.claude/` directory.
 
 To make them available in your project, add this script to your `package.json`:
 
 ```json
-"setup:claude": "cp -r node_modules/srcdev-nuxt-components/.claude/skills .claude/skills/srcdev-nuxt-components"
+"setup:claude": "rm -rf .claude/skills/srcdev-nuxt-components .claude/rules/srcdev-nuxt-components && mkdir -p .claude/skills/srcdev-nuxt-components .claude/rules/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/skills/. .claude/skills/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/rules/consumer/. .claude/rules/srcdev-nuxt-components"
 ```
 
 Then run it after install:
@@ -39,7 +39,7 @@ Then run it after install:
 npm run setup:claude
 ```
 
-Skills are copied into `.claude/skills/srcdev-nuxt-components/` so they never conflict with or overwrite skills your own project defines. Re-running the script after a package update is safe.
+Skills are copied into `.claude/skills/srcdev-nuxt-components/` and rules into `.claude/rules/srcdev-nuxt-components/`, so they never conflict with or overwrite your own project's. Re-running the script after a package update is safe: it replaces only those two `srcdev-nuxt-components` folders, so skills and rules dropped or renamed upstream are removed too, and your own skills and rules are never touched.
 
 ### Automate with postinstall (recommended)
 
@@ -47,7 +47,7 @@ To ensure skills are always up to date, VSCode snippets are installed, and `nuxt
 
 ```json
 "scripts": {
-  "setup:claude": "mkdir -p .claude/skills/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/skills/. .claude/skills/srcdev-nuxt-components",
+  "setup:claude": "rm -rf .claude/skills/srcdev-nuxt-components .claude/rules/srcdev-nuxt-components && mkdir -p .claude/skills/srcdev-nuxt-components .claude/rules/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/skills/. .claude/skills/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/rules/consumer/. .claude/rules/srcdev-nuxt-components",
   "postinstall": "node node_modules/srcdev-nuxt-components/scripts/copy-snippets.mjs && nuxt prepare && npm run setup:claude"
 }
 ```
@@ -56,7 +56,7 @@ To ensure skills are always up to date, VSCode snippets are installed, and `nuxt
 
 1. `copy-snippets.mjs` — copies VSCode snippets (`.code-snippets` files) from the layer to your `.vscode/` folder
 2. `nuxt prepare` — generates Nuxt type declarations
-3. `setup:claude` — copies skills into `.claude/skills/srcdev-nuxt-components/`
+3. `setup:claude` — copies skills into `.claude/skills/srcdev-nuxt-components/` and rules into `.claude/rules/srcdev-nuxt-components/`
 
 > **Note**: The snippet copy must run from your consumer app's postinstall, not the layer's. npm doesn't invoke postinstall hooks for dependencies, so each consumer app is responsible for copying snippets into its own `.vscode/` folder. Don't set `SRCDEV_STANDALONE` in a consumer app: that flag is only for running this layer on its own (it enables dev-only modules and the ramp watcher).
 

package/app/components/01.atoms/animations/scroll-reveal-frame/stories/ScrollRevealFrame.stories.ts

@@ -25,7 +25,9 @@ const meta: Meta<typeof ScrollRevealFrame> = {
     },
   },
   parameters: {
+    // Own iframe on the Docs page: the effect depends on page scroll.
     docs: {
+      story: { inline: false, height: "600px" },
       description: {
         component:
           "Generic clipping frame that pans any slot content vertically as it scrolls through the viewport — driven entirely by CSS Scroll-driven Animations. No scroll listeners, no JS. Use this when you need the parallax reveal with arbitrary content (grids, video, etc.). For a single NuxtImg with optimisation and focal-point control, use ScrollRevealImage instead.",

package/app/components/01.atoms/animations/scroll-reveal-image/stories/ScrollRevealImage.stories.ts

@@ -50,7 +50,9 @@ const meta: Meta<typeof ScrollRevealImage> = {
     },
   },
   parameters: {
+    // Own iframe on the Docs page: the effect depends on page scroll.
     docs: {
+      story: { inline: false, height: "600px" },
       description: {
         component:
           "Single-image parallax reveal built on ScrollRevealFrame. Adds NuxtImg optimisation (src, alt, intrinsic dimensions) and a horizontal focal-point prop (focalX). For arbitrary slot content — grids, video, etc. — use ScrollRevealFrame directly.",

package/app/components/01.atoms/animations/section-parallax/stories/SectionParallax.stories.ts

@@ -45,6 +45,10 @@ export default {
     showOverlay: true,
     overlayText: "A quiet moment.",
   },
+  parameters: {
+    // Own iframe on the Docs page: the effect depends on page scroll and vh heights.
+    docs: { story: { inline: false, height: "600px" } },
+  },
 } as Meta<StoryArgs>;
 
 const Template: StoryFn<StoryArgs> = (args) => ({

package/app/components/01.atoms/animations/view-timeline/stories/WipeAwayVertical.stories.ts

@@ -20,7 +20,9 @@ const meta: Meta<typeof WipeAwayVertical> = {
     styleClassPassthrough: { table: { disable: true } },
   },
   parameters: {
+    // Own iframe on the Docs page: the effect depends on page scroll and vh heights.
     docs: {
+      story: { inline: false, height: "600px" },
       description: {
         component:
           "Scroll-driven vertical wipe effect: each sticky panel wipes away to reveal the next as its paired scrolling section crosses the viewport. Pure CSS — a single-column grid overlays `.sticky-items-container` across all `.scrolling-section` rows via `animation-timeline: view()`, so there's no scroll listener or JS measurement involved. Consumers supply `stickyItem-{n}` slots for each of `itemCount` panels, and `scrollingItem-{n}` slots for only the first `itemCount - 1` — the last panel has nothing left to reveal, so it has no wipe animation or scrolling section of its own, just a small built-in trailing buffer to release cleanly. The sticky panel's own visible height is `--wipe-away-vertical-height` (default `100vh`) — leave the root's own `height` unset (`auto`) so it sizes itself from its children. Browsers without `animation-timeline: view()` support (via `@supports not (...)`) just get the sticky items stacked in normal document flow instead.",

package/app/components/02.molecules/cookie-consent-banner/CONSUMER-STYLING.md

@@ -6,6 +6,11 @@ colour, border, radius, padding, accent stripe, icon, title and message sizes, a
 `app/components/02.molecules/alert-content/CONSUMER-STYLING.md`. This guide covers what the banner
 adds: position, motion and the two buttons.
 
+> **Changed 2026-10-15**: the closed state class `.closed` is now `.cookie-consent-banner-closed`,
+> and the buttons are `InputButton`s (`variant="inline"`, so the banner's tokens still style them):
+> each button is `.cookie-consent-banner-accept.input-button` / `.cookie-consent-banner-reject.input-button`
+> with the label in an inner `.button-text`. The button tokens below are unchanged.
+>
 > **Changed 2026-09-27**: rebuilt on `AlertContent`. The banner's own panel tokens
 > (`--cookie-consent-banner-padding`, `-gap`, `-border-radius`, `-border`, `-accent-border-width`,
 > `-background`, `-text-colour`, `-actions-gap`) are gone; use the matching `--alert-content-*`
@@ -41,7 +46,10 @@ adds: position, motion and the two buttons.
 | `--cookie-consent-banner-accept-text-colour` | `var(--theme-on-surface)` | Accept button text |
 
 The gap between the buttons and their alignment (right by default) are `AlertContent`'s
-`--alert-content-actions-gap` and `--alert-content-actions-justify`.
+`--alert-content-actions-gap` and `--alert-content-actions-justify`. Long labels wrap inside the
+buttons (`InputButton`'s `.button-text`), and the buttons wrap onto their own lines when the row is full.
+The label keeps the banner's font size and case: `InputButton`'s `--button-font-size` and
+`--button-text-transform` don't apply here.
 
 Private tokens (not public API): `--_gutter`, `--_transition-duration`, `--_accent` on the root,
 each resolving a public token once for reuse.
@@ -50,11 +58,12 @@ each resolving a public token once for reuse.
 
 - `data-theme` on the root and on the inner `.alert-content`, from the `theme` prop or `app.config`
   (default `info`). It drives every `--theme-*` default, for the panel and the buttons.
-- `.closed` on the root once consent is granted or denied. The banner fades out and becomes
+- `.cookie-consent-banner-closed` on the root once consent is granted or denied. The banner fades out and becomes
   `visibility: hidden`, so its buttons leave the tab order and the accessibility tree.
 - Classes: `.cookie-consent-banner` > `.cookie-consent-banner-inner` (the `role="region"`) >
   `.alert-content` (see its guide for the inner structure); the buttons are
-  `.cookie-consent-banner-reject` and `.cookie-consent-banner-accept` inside `.alert-content-actions`.
+  `InputButton`s with `.cookie-consent-banner-reject` and `.cookie-consent-banner-accept` (plus
+  `.input-button.inline`) inside `.alert-content-actions`.
 - `data-test-id`: `cookie-consent-banner`, `cookie-consent-banner-reject`, `cookie-consent-banner-accept`,
   plus `AlertContent`'s `alert-icon`, `alert-title`, `alert-content`, `alert-actions`.
 
@@ -91,5 +100,5 @@ The pre-2026-09-27 look (white panel, dark text, no tint), scoped to the banner:
 ## Class passthrough
 
 `style-class-passthrough` adds classes to the teleported root `.cookie-consent-banner`, next to
-`data-theme` and `.closed`. It's reachable in normal use and is the most reliable place to set
+`data-theme` and `.cookie-consent-banner-closed`. It's reachable in normal use and is the most reliable place to set
 tokens for this component, since ancestor wrappers don't contain it.

package/app/components/02.molecules/cookie-consent-banner/CookieConsentBanner.vue

@@ -2,7 +2,7 @@
   <Teleport to="body">
     <div
       class="cookie-consent-banner"
-      :class="[{ closed: isClosed }, elementClasses]"
+      :class="[{ 'cookie-consent-banner-closed': isClosed }, elementClasses]"
       :data-theme="resolved.theme"
       data-test-id="cookie-consent-banner"
     >
@@ -15,22 +15,22 @@
             <slot name="message">This site uses cookies to understand how it's used. You can accept or reject them.</slot>
           </template>
           <template #actions>
-            <button
+            <InputButton
               type="button"
+              variant="inline"
               class="cookie-consent-banner-reject"
               data-test-id="cookie-consent-banner-reject"
+              :button-text="rejectLabel"
               @click="rejectAll()"
-            >
-              <slot name="rejectLabel">Reject</slot>
-            </button>
-            <button
+            />
+            <InputButton
               type="button"
+              variant="inline"
               class="cookie-consent-banner-accept"
               data-test-id="cookie-consent-banner-accept"
+              :button-text="acceptLabel"
               @click="acceptAll()"
-            >
-              <slot name="acceptLabel">Accept</slot>
-            </button>
+            />
           </template>
         </AlertContent>
       </div>
@@ -44,6 +44,8 @@ import type { CookieConsentBannerProps } from "../../../types/components";
 const props = withDefaults(defineProps<CookieConsentBannerProps>(), {
   theme: undefined,
   ariaLabel: "Cookie consent",
+  acceptLabel: "Accept",
+  rejectLabel: "Reject",
   icon: "material-symbols:cookie-outline",
   showIcon: true,
   styleClassPassthrough: () => [],
@@ -91,7 +93,7 @@ const isClosed = computed(() => status.value !== "unset");
       opacity var(--_transition-duration) ease-in-out,
       visibility var(--_transition-duration);
 
-    &.closed {
+    &.cookie-consent-banner-closed {
       grid-template-rows: 0fr;
       opacity: 0;
       visibility: hidden;
@@ -107,8 +109,10 @@ const isClosed = computed(() => status.value !== "unset");
       overflow: hidden;
     }
 
-    .cookie-consent-banner-reject,
-    .cookie-consent-banner-accept {
+    .cookie-consent-banner-reject.input-button,
+    .cookie-consent-banner-accept.input-button {
+      box-sizing: border-box;
+      min-height: auto;
       padding: var(--cookie-consent-banner-button-padding, 0.8rem 1.6rem);
       border-radius: var(--cookie-consent-banner-button-border-radius, 0.4rem);
       border: 0.1rem solid transparent;
@@ -122,9 +126,14 @@ const isClosed = computed(() => status.value !== "unset");
         outline: 0.2rem solid var(--cookie-consent-banner-focus-ring, var(--theme-border-focus));
         outline-offset: 0.2rem;
       }
+
+      .button-text {
+        font-size: inherit;
+        text-transform: none;
+      }
     }
 
-    .cookie-consent-banner-reject {
+    .cookie-consent-banner-reject.input-button {
       background-color: transparent;
       color: inherit;
       border-color: var(--cookie-consent-banner-reject-border-colour, var(--theme-border));
@@ -135,7 +144,7 @@ const isClosed = computed(() => status.value !== "unset");
       }
     }
 
-    .cookie-consent-banner-accept {
+    .cookie-consent-banner-accept.input-button {
       background-color: var(--cookie-consent-banner-accept-background, var(--_accent));
       color: var(--cookie-consent-banner-accept-text-colour, var(--theme-on-surface));
 

package/app/components/02.molecules/cookie-consent-banner/stories/CookieConsentBanner.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../CookieConsentBanner.vue";
 
 export default {
@@ -21,6 +22,16 @@ export default {
       description: "Render the icon column",
       table: { category: "Appearance" },
     },
+    acceptLabel: {
+      control: "text",
+      description: "Accept button text",
+      table: { category: "Content" },
+    },
+    rejectLabel: {
+      control: "text",
+      description: "Reject button text",
+      table: { category: "Content" },
+    },
     ariaLabel: {
       control: "text",
       description: "Accessible name for the banner region",
@@ -35,19 +46,26 @@ export default {
   args: {
     theme: "info",
     ariaLabel: "Cookie consent",
+    acceptLabel: "Accept",
+    rejectLabel: "Reject",
     icon: "material-symbols:cookie-outline",
     showIcon: true,
     styleClassPassthrough: [],
   },
   parameters: {
+    // Own iframe on the Docs page: the banner is fixed to the viewport.
     docs: {
+      story: { inline: false, height: "400px" },
       description: {
         // Drives itself from the real useCookieConsent()/useCookie() state, so
         // once accepted/rejected in this browser it stays hidden across story
         // reloads. Each story below has "Show banner again" (resets state
         // in-place) and "Delete cookie" (clears document.cookie directly, for
         // verifying the cookie itself is actually gone, e.g. in devtools).
-        component: "Reads/writes a real 'privacy-notice-consent' cookie via useCookieConsent(). Use the story's reset controls to bring the banner back.",
+        component:
+          "Fixed, non-modal cookie consent banner built on AlertContent, with Accept/Reject InputButtons wired to useCookieConsent(). " +
+          "Copy comes from the title and message slots and the acceptLabel, rejectLabel and ariaLabel props; theme, icon and showIcon set the look. " +
+          "It reads/writes a real 'privacy-notice-consent' cookie, so use the story's reset controls to bring the banner back.",
       },
     },
   },
@@ -82,7 +100,7 @@ const Template: StoryFn<typeof StorybookComponent> = (args) => ({
     <div style="padding: 2rem; min-height: 240px; position: relative;">
       <button type="button" @click="showAgain">Show banner again</button>
       <button type="button" @click="deleteCookie" style="margin-inline-start: 0.8rem;">Delete cookie</button>
-      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :style-class-passthrough="args.styleClassPassthrough">
+      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :accept-label="args.acceptLabel" :reject-label="args.rejectLabel" :style-class-passthrough="args.styleClassPassthrough">
         <template #message>This site uses cookies for analytics. You can accept or reject them.</template>
       </StorybookComponent>
     </div>
@@ -101,12 +119,97 @@ export const CustomCopy: StoryFn<typeof StorybookComponent> = (args) => ({
     <div style="padding: 2rem; min-height: 240px; position: relative;">
       <button type="button" @click="showAgain">Show banner again</button>
       <button type="button" @click="deleteCookie" style="margin-inline-start: 0.8rem;">Delete cookie</button>
-      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel">
+      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :accept-label="args.acceptLabel" :reject-label="args.rejectLabel">
         <template #title>Your privacy</template>
         <template #message>We use cookies to understand traffic to this site. No personal data is sold.</template>
-        <template #acceptLabel>Allow cookies</template>
-        <template #rejectLabel>No thanks</template>
       </StorybookComponent>
     </div>
   `,
 });
+CustomCopy.args = { acceptLabel: "Allow cookies", rejectLabel: "No thanks" };
+
+const stressCases = {
+  german: {
+    title: "Datenschutzeinstellungen",
+    message:
+      "Diese Website verwendet Cookies, um zu verstehen, wie sie genutzt wird, und um Ihnen ein besseres Erlebnis zu bieten. Weitere Informationen finden Sie in unserer Datenschutzerklärung.",
+    acceptLabel: "Alle Cookies akzeptieren und fortfahren",
+    rejectLabel: "Alle nicht notwendigen Cookies ablehnen",
+    dir: "ltr",
+  },
+  unbroken: {
+    title: "Datenschutzgrundverordnungskonformitätsbestätigungseinstellungen",
+    message: "https://example.com/a-very-long-path-segment-without-any-spaces-at-all-in-it/privacy-and-cookie-policy",
+    acceptLabel: "Cookieeinwilligungsbestätigung",
+    rejectLabel: "Cookieeinwilligungsablehnung",
+    dir: "ltr",
+  },
+  emojiHtml: {
+    title: "🍪 <strong>Cookies</strong>",
+    message: "<script>alert('xss')</script> We use cookies 🍪🍪🍪 & <em>similar</em> technologies.",
+    acceptLabel: "✅ <b>Yes</b>",
+    rejectLabel: "❌ <i>No</i>",
+    dir: "ltr",
+  },
+  rtl: {
+    title: "ملفات تعريف الارتباط",
+    message: "يستخدم هذا الموقع ملفات تعريف الارتباط لفهم كيفية استخدامه. يمكنك قبولها أو رفضها.",
+    acceptLabel: "قبول",
+    rejectLabel: "رفض",
+    dir: "rtl",
+  },
+  minimal: {
+    title: "",
+    message: "C",
+    acceptLabel: "✓",
+    rejectLabel: "✗",
+    dir: "ltr",
+  },
+} as const;
+
+type StressCase = keyof typeof stressCases;
+
+export const StressTest: StoryFn<typeof StorybookComponent> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const { showAgain, deleteCookie } = useResetConsent();
+    const copy = computed(() => stressCases[(args as { stressCase?: StressCase }).stressCase ?? "german"]);
+    return { args, copy, showAgain, deleteCookie };
+  },
+  template: `
+    <div style="padding: 2rem; min-height: 320px; position: relative;">
+      <button type="button" @click="showAgain">Show banner again</button>
+      <button type="button" @click="deleteCookie" style="margin-inline-start: 0.8rem;">Delete cookie</button>
+      <StorybookComponent :theme="args.theme" :icon="args.icon" :show-icon="args.showIcon" :aria-label="args.ariaLabel" :accept-label="copy.acceptLabel" :reject-label="copy.rejectLabel" :style-class-passthrough="args.styleClassPassthrough">
+        <template #title><span :dir="copy.dir">{{ copy.title }}</span></template>
+        <template #message><span :dir="copy.dir">{{ copy.message }}</span></template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.argTypes = {
+  stressCase: {
+    name: "Stress case",
+    control: { type: "select" },
+    options: Object.keys(stressCases),
+    description:
+      "**Story control, not a prop.** Picks which worst-case copy fills the title and message slots and the acceptLabel/rejectLabel props (overriding their controls).",
+    table: { category: "Story only" },
+  },
+} as Meta<typeof StorybookComponent>["argTypes"];
+StressTest.args = { stressCase: "german" } as typeof StressTest.args;
+StressTest.parameters = {
+  docs: {
+    story: { inline: false, height: "480px" },
+    description: {
+      story:
+        "Hostile slot content, switched with the Stress case control: long German copy and button labels, an unbroken compound title " +
+        "with a long URL as the message and unbroken button labels, emoji and HTML-like text (must render as text, never as markup), " +
+        "right-to-left Arabic, and a minimal case with an empty title and one-character copy. The banner is fixed to the viewport, so " +
+        "use Storybook's viewport toolbar (not a canvas width) to check narrow screens. Check that the banner stays inside the gutter " +
+        "and caps at 64rem, unbroken text wraps instead of being clipped (including inside the buttons), and the buttons wrap onto " +
+        "their own lines rather than overflowing.",
+    },
+  },
+};