srcdev-nuxt-components 9.6.19 → 9.6.20

package/.claude/skills/index.md

@@ -86,7 +86,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
     ├── hero-text.md            — HeroText props, usage patterns, styling
     ├── layout-grid-by-cols.md  — LayoutGridByCols dynamic slots (item-{n}), column/gap/collapse props that write public --layout-grid-by-cols-* tokens (CSS-settable), section label
-    ├── page-row.md             — PageRow layout primitive: CSS grid named lines, nesting pattern, align prop, aria-labelledby, CSS token API
+    ├── page-row.md             — PageRow layout primitive: CSS grid named lines, nesting pattern, align prop, data-variant hook, aria-labelledby, CSS token API
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
     ├── header-block.md         — HeaderBlock: tagLevel/classLevel semantic-vs-visual heading decoupling, page-heading-N utility classes
     ├── text-block.md           — TextBlock: vertical-rhythm text wrapper, --text-block-padding-block-start/-end tokens, heading-id slot prop for section/article aria-labelledby
@@ -120,9 +120,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── rotating-carousel-image.md — RotatingCarouselImage: 3D rotating image carousel, scroll-parallax tilt, focus/keyboard/hover pause, reduced-motion, CSS tokens
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names (dark ones vanish on dark backgrounds; mono alternatives), showLabel + scoped icon/label slots, per-item brandColour (set brand-colour tokens on .social-icons-list-item), tile/circle/label tokens, four recipes (mono tiles, dark dock, pills, overlapping stack), unsafe hrefs skipped
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
-    ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
-    ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
-    ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-gap/min-col-size-{small,default,large} tokens, is-responsive, semantic tag + aria
+    ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, localisable errorMessages, error slot, restarts when the tab is shown again, own-root media stream cleanup, wrapping results
+    ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, no-result/read-error messages, data-dropping state hook, CSS override points
+    ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-gap/min-col-size-{small,default,large} tokens, is-responsive (data-responsive hook), semantic tag + aria
     ├── display-avatar.md       — DisplayAvatar (02.molecules): circular avatar with image/initials fallback (alt announced), broken-image fallback, data-size scale tokens, image-size, --display-avatar-* colours, chip badge, icon slot
     ├── profile-section.md      — ProfileSection (02.molecules): picture + numbered profile-info-N slots, eyebrow/hero header (above, or over the picture top/bottom on a scrim via header-placement), profileLinks, container-query two-column layout, .location/.services highlight tokens
     ├── display-theme-switch.md — DisplayThemeSwitch: system/light/dark picker wrapping SegmentedControl, wired to useSettingsStore, labels/icons props, small sizing variant
@@ -132,18 +132,18 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, InputButton close button, viewport-capped panel with wrapping title/content/footer, aria-label fallthrough when untitled, CSS token API
     ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
     ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, --display-pill-* tokens (variants fall back to base colour/border/ring tokens); data-size/data-variant/data-reversed hooks (2026-10-08, were bare classes), label line-clamp token, -02 ring and outlined-monochrome recipes, StressTest story
-    ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
-    ├── samaritan-prompt.md — SamaritanPrompt + SamaritanPromptMixed: animated text prompts, typewriter/word-pulse effects, MessageConfig API, pause on hover, aria-live, CSS tokens
+    ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay/track-edges), button align/offset/edge-inset tokens, InputButton prev/next, prefixed classes + data-* state hooks, empty/single-item handling, CSS tokens
+    ├── samaritan-prompt.md — SamaritanPrompt + SamaritanPromptMixed: animated text prompts, typewriter/word-pulse effects, MessageConfig API, grapheme-safe typing, instant typing under reduced motion, pause on hover, aria-live, theme-default colours, wrapping + line-clamp, CSS tokens
     ├── display-toast.md          — DisplayToast (standalone v-model) + DisplayToastProvider + useToastQueue (app-wide queue): stacking, FLIP dismiss, maxVisible, SemanticTheme × 4, masked SVG glass variant
     ├── display-prompt.md         — DisplayPrompt: inline notification banner, SemanticTheme × 4, local vs parent-controlled dismiss, outlined modifier, CSS token override
     ├── expanding-panel-classic.md — ExpandingPanelClassic: grid-template-rows animation (no Baseline-2025 dependency), same API as ExpandingPanel, cross-browser animation parity trade-off
-    ├── site-header.md            — SiteHeader: PageRow + SkipLinks + ResponsiveHeader composition, #branding/#secondaryNavigation slots, dual styleClassPassthrough hooks
+    ├── site-header.md            — SiteHeader: PageRow + SkipLinks + ResponsiveHeader composition, #branding/#secondaryNavigation slots, dual styleClassPassthrough hooks, sticky on the outer row, capped branding column
     ├── responsive-header.md      — ResponsiveHeader: overflow-collapsing adaptive nav, measurement-pipeline gotchas (unsized icons, vw font-size drift), full CSS token API
     ├── navigation-items.md       — NavigationItems: internal overflow-panel renderer for ResponsiveHeader, complement-visibility logic, not used standalone
     ├── cookie-consent-banner.md  — CookieConsentBanner: fixed non-modal Accept/Reject banner built on AlertContent, driven by useCookieConsent; title/message slots, acceptLabel/rejectLabel/icon/showIcon/ariaLabel props, InputButton (inline) actions, position/button tokens (panel via --alert-content-*), teleported so tokens go on html/passthrough
     ├── display-banner.md         — DisplayBanner: canvas/content stacked overlay banner, conditional slot wrappers, CSS token API
-    ├── deep-expanding-menu.md         — DeepExpandingMenu: anchor-positioned popover nav panels, browser support caveat, CSS token API
-    ├── deep-expanding-menu-classic.md — DeepExpandingMenuClassic: <details>-based fallback nav, click-outside close, CSS token API
+    ├── deep-expanding-menu.md         — DeepExpandingMenu: anchor-positioned popover nav panels, browser support caveat, ariaLabel, prefixed classes, wrapping/flip/scroll stress handling, CSS token API
+    ├── deep-expanding-menu-classic.md — DeepExpandingMenuClassic: <details>-based fallback nav, per-instance exclusive groups, outside-click/Escape/link-follow close, ariaLabel, prefixed classes, container-width panels, CSS token API
     ├── display-tooltip.md         — DisplayTooltip: anchor-positioned popover trigger, browser support caveat, triggerIcon prop, type="button" trigger, hideTrigger removes it from tab order (data-hidden), CSS token API
     ├── display-tooltip-rich.md    — DisplayTooltipRich (Material 3 rich tooltip, renamed from DisplayTooltipDefined 2026-10-18): structured title/body/action content with InputButton close button, per-field line-clamp tokens, composes DisplayTooltip
     ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
@@ -169,13 +169,13 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── sliding-toggle.md       — SlidingToggle: single-choice segmented radiogroup with text labels of any width, measured sliding + hover indicators (useSlidingIndicator), roving tabindex/arrow keys, corner-shape token, CSS token API
     ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer
     ├── column-flow-grid.md        — ColumnFlowGrid (renamed from MasonryGrid): CSS multi-column text-flow layout, named dynamic slots (no count/data prop), itemMinWidth/gap/unit sizing, CSS token API; not a true masonry, see "which one do I want?"
-    ├── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
+    ├── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize, re-packs on any tile resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
     ├── glowing-border.md          — GlowingBorder: animated conic-gradient glow border, 5 colour variants, tag prop, full CSS token API for width/radius/surface/duration/per-variant colour stops, reduced-motion guard
     ├── sparkle-effect.md          — SparkleEffect: slot wrapper sending sparkles along its rounded border (offset-path) plus a glow on hover/focus-visible, count prop (1 to 12, preset table), continuous prop (loop while hovered/focused), radius prop/token, blur token, disabled suppression, reduced-motion and old-Safari glow-only fallback, CSS token API
     ├── section-parallax.md        — SectionParallax: CSS fixed-background parallax section, iOS Safari limitation, when to use vs ScrollRevealImage, CSS token API, reduced-motion guard
     ├── container-glow.md          — ContainerGlow (renamed from ContainerGlowCore): pointer-proximity glow-border cards, named dynamic slots (one card per slot), config-prop-driven layout/interaction, full CSS token API for static visuals, reduced-motion guard
-    ├── dashboard-quad-grid.md      — DashboardQuadGrid (renamed from LayoutGridA): fixed 4-slot dashboard grid, container-query breakpoints, CSS token API
-    └── dashboard-stats-grid.md     — DashboardStatsGrid (renamed from LayoutGridB): top-row panel cluster + bottom-row panel strip dashboard grid, topRowSlot1ItemCount/bottomRowItemCount, CSS token API
+    ├── dashboard-quad-grid.md      — DashboardQuadGrid (renamed from LayoutGridA): fixed 4-slot dashboard grid, prefixed cell classes, container-query breakpoints, CSS token API
+    └── dashboard-stats-grid.md     — DashboardStatsGrid (renamed from LayoutGridB): top-row panel cluster + bottom-row panel strip dashboard grid, topRowSlot1ItemCount/bottomRowItemCount (floored, clamped at 0), prefixed classes, CSS token API
 ```
 
 ## Skill file template

package/.claude/skills/storybook-add-story.md

@@ -313,6 +313,31 @@ prop and try to pass it. Make it unmistakable:
 
 `PriceList.stories.ts` and `GoogleReviews.stories.ts` (line-clamp controls) follow this.
 
+## Where shared story helpers can live
+
+Nowhere shared, so far. Stories ship in the package (`app/` is in `package.json` `files`) but
+`.storybook/` doesn't, so a story importing from `.storybook/` breaks in a consumer's type-check;
+and any `.ts` under `app/components/` is registered as a component (`pathPrefix: false` scan).
+Repeat small fixtures per story instead (the grid `StressTest` stories, 2026-10-21, each carry their
+own oversized-content block).
+
+## Simulating hardware or library events in a stress story
+
+When a component's data only arrives from hardware or a third-party child (a camera, a file
+decoder), a story can't feed it worst-case data through props. Add story-only buttons that call the
+component's own handlers through its internal instance, and say so in the story text:
+
+```ts
+const cmpRef = ref<ComponentPublicInstance | null>(null);
+const internals = () =>
+  (cmpRef.value?.$ as unknown as { setupState: { onDetect: (codes: { rawValue: string }[]) => void } } | undefined)
+    ?.setupState;
+```
+
+`setupState` is internal (not on the public type, hence the cast) but present in every build.
+Don't `defineExpose` handlers just for a story. `CaptureQrCode` and `DecodeQrCode` (2026-10-21)
+follow this.
+
 ## Dynamic slot names in template strings
 
 A dynamic slot argument can't contain spaces: `` #[`item-${i + 6}-summary`] `` is cut at the first space

package/.claude/skills/testing-add-unit-test.md

@@ -346,6 +346,32 @@ be resolved from the ends and never reaches it. Mount with two items sharing the
 then `setProps` with the first and last items swapped, and assert the rendered labels in order
 (`SkipLinks.spec.ts`). With an `href`-only key that test rendered five links instead of four.
 
+## Stub third-party children that hold shared state
+
+When a component renders a library child whose behaviour the spec doesn't need (the spec drives
+the parent's own handlers), stub the child in the mount helper. Unmounting doesn't isolate a
+library that keeps module-level state: `QrcodeStream` queues every camera start/stop on one shared
+promise chain, so a start left from an earlier test failed mid-test and emitted `error` into the
+next `CaptureQrCode`, but only under full-suite load and only with `SRCDEV_STANDALONE=true`
+(2026-10-21).
+
+```typescript
+const qrcodeStreamStub = { name: "QrcodeStream", emits: ["detect", "error"], template: `<div class="qrcode-stream-stub"></div>` };
+
+const mountCapture = async (options: CaptureMountOptions = {}) => {
+  const wrapper = await mountSuspended(CaptureQrCode, {
+    ...options,
+    global: { ...options?.global, stubs: { QrcodeStream: qrcodeStreamStub, ...options?.global?.stubs } },
+  });
+  mounted.push(wrapper);
+  return wrapper;
+};
+```
+
+Assert against the stub's class, not the component's tag name (see
+`.claude/rules/test-no-vacuous-assertions.md`). Run the spec with `npm run test:run` so
+standalone-only modules load.
+
 ## Mocking browser APIs
 
 ### Global constructors (ResizeObserver, IntersectionObserver, etc.)

package/.vscode/srcdev-component-capture-decode-qr-code.code-snippets

@@ -3,7 +3,11 @@
     "description": "CaptureQrCode live camera scanner with localisable copy",
     "scope": "vue,html",
     "body": [
-      "<CaptureQrCode camera-stopped-label=\"${1:Camera stopped}\" reset-camera-label=\"${2:Reset camera}\" />"
+      "<CaptureQrCode",
+      "  camera-stopped-label=\"${1:Camera stopped}\"",
+      "  reset-camera-label=\"${2:Reset camera}\"",
+      "  :error-messages=\"{ NotAllowedError: '${3:Camera access was blocked.}', default: '${4:The camera could not be started.}' }\"",
+      "/>"
     ]
   },
   "SRCDEV CaptureQrCode Custom Error": {
@@ -22,7 +26,12 @@
     "description": "DecodeQrCode image upload / drop decoder",
     "scope": "vue,html",
     "body": [
-      "<DecodeQrCode upload-label=\"${1:Upload a QR code image}\" drop-label=\"${2:Or drop a QR code image here}\" />"
+      "<DecodeQrCode",
+      "  upload-label=\"${1:Upload a QR code image}\"",
+      "  drop-label=\"${2:Or drop a QR code image here}\"",
+      "  no-result-label=\"${3:No QR code was found in that image.}\"",
+      "  read-error-label=\"${4:That file couldn't be read as an image.}\"",
+      "/>"
     ]
   }
 }

package/.vscode/srcdev-component-carousel-flip.code-snippets

@@ -3,7 +3,7 @@
     "description": "CarouselFlip with looped item slots",
     "scope": "vue,html",
     "body": [
-      "<CarouselFlip :carousel-data-ids=\"$1items.map((item) => item.id)\">",
+      "<CarouselFlip :carousel-data-ids=\"$1items.map((item) => item.id)\" aria-label=\"${4:Image carousel}\">",
       "  <template v-for=\"$2item in $1items\" :key=\"$2item.id\" #[$2item.id]>",
       "    $3",
       "  </template>",
@@ -25,15 +25,33 @@
       "</CarouselFlip>"
     ]
   },
+  "SRCDEV CarouselFlip Track Edges": {
+    "description": "CarouselFlip with prev/next overlaid on the ends of the visible track",
+    "scope": "vue,html",
+    "body": [
+      "<CarouselFlip",
+      "  :carousel-data-ids=\"$1items.map((item) => item.id)\"",
+      "  button-layout=\"track-edges\"",
+      "  :allow-carousel-overflow=\"true\"",
+      ">",
+      "  <template v-for=\"$2item in $1items\" :key=\"$2item.id\" #[$2item.id]>",
+      "    $3",
+      "  </template>",
+      "</CarouselFlip>"
+    ]
+  },
   "SRCDEV CarouselFlip CSS Override": {
     "description": "CSS override scaffold for CarouselFlip tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
       "  .carousel-flip {",
-      "    --carousel-flip-gap: $2;",
-      "    --carousel-flip-marker-active-colour: $3;",
-      "    --carousel-flip-button-background-colour: $4;",
+      "    --carousel-flip-gap: ${2:1rem};",
+      "    --carousel-flip-marker-active-colour: ${3:var(--theme-surface)};",
+      "    --carousel-flip-button-background-colour: ${4:var(--theme-surface-subtle)};",
+      "    --carousel-flip-button-icon-colour: ${5:var(--theme-text)};",
+      "    --carousel-flip-button-align: ${6:center};",
+      "    --carousel-flip-button-inline-offset: ${7:0px};",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-deep-expanding-menu-classic.code-snippets

@@ -1,9 +1,39 @@
 {
   "SRCDEV DeepExpandingMenuClassic Basic": {
-    "description": "DeepExpandingMenuClassic — <details>-based fallback nav",
+    "description": "DeepExpandingMenuClassic — <details>-based nav",
     "scope": "vue,html",
+    "prefix": "srcdev-deep-expanding-menu-classic",
     "body": [
-      "<DeepExpandingMenuClassic :nav-links=\"$1navLinks\" />"
+      "<DeepExpandingMenuClassic :nav-links=\"${1:navLinks}\" aria-label=\"${2:Main}\" />"
+    ]
+  },
+  "SRCDEV DeepExpandingMenuClassic Nav Links": {
+    "description": "DeepExpandingMenuClassic — navLinks data (ResponsiveHeaderNavItem[])",
+    "scope": "typescript,vue",
+    "prefix": "srcdev-deep-expanding-menu-classic-links",
+    "body": [
+      "const ${1:navLinks}: ResponsiveHeaderNavItem[] = [",
+      "  { name: \"${2:Home}\", path: \"${3:/}\" },",
+      "  {",
+      "    name: \"${4:Services}\",",
+      "    childLinksTitle: \"${5:Our services}\",",
+      "    childLinks: [",
+      "      { name: \"${6:Haircuts}\", path: \"${7:/services/haircuts}\" },",
+      "    ],",
+      "  },",
+      "];"
+    ]
+  },
+  "SRCDEV DeepExpandingMenuClassic Style Override": {
+    "description": "DeepExpandingMenuClassic — unlayered token override scaffold",
+    "scope": "css,vue",
+    "prefix": "srcdev-deep-expanding-menu-classic-css",
+    "body": [
+      ".${1:site-nav} {",
+      "  --deep-expanding-menu-classic-item-gap: ${2:2.4rem};",
+      "  --deep-expanding-menu-classic-panel-background-colour: ${3:var(--theme-surface-subtle)};",
+      "  --deep-expanding-menu-classic-panel-heading-line-clamp: ${4:none};",
+      "}"
     ]
   }
 }

package/.vscode/srcdev-component-deep-expanding-menu.code-snippets

@@ -2,8 +2,38 @@
   "SRCDEV DeepExpandingMenu Basic": {
     "description": "DeepExpandingMenu — anchor-positioned popover nav panels",
     "scope": "vue,html",
+    "prefix": "srcdev-deep-expanding-menu",
     "body": [
-      "<DeepExpandingMenu :nav-links=\"$1navLinks\" />"
+      "<DeepExpandingMenu :nav-links=\"${1:navLinks}\" aria-label=\"${2:Main}\" />"
+    ]
+  },
+  "SRCDEV DeepExpandingMenu Nav Links": {
+    "description": "DeepExpandingMenu — navLinks data (ResponsiveHeaderNavItem[])",
+    "scope": "typescript,vue",
+    "prefix": "srcdev-deep-expanding-menu-links",
+    "body": [
+      "const ${1:navLinks}: ResponsiveHeaderNavItem[] = [",
+      "  { name: \"${2:Home}\", path: \"${3:/}\" },",
+      "  {",
+      "    name: \"${4:Services}\",",
+      "    childLinksTitle: \"${5:Our services}\",",
+      "    childLinks: [",
+      "      { name: \"${6:Haircuts}\", path: \"${7:/services/haircuts}\" },",
+      "    ],",
+      "  },",
+      "];"
+    ]
+  },
+  "SRCDEV DeepExpandingMenu Style Override": {
+    "description": "DeepExpandingMenu — unlayered token override scaffold",
+    "scope": "css,vue",
+    "prefix": "srcdev-deep-expanding-menu-css",
+    "body": [
+      ".${1:site-nav} {",
+      "  --deep-expanding-menu-gap: ${2:2.4rem};",
+      "  --deep-expanding-menu-panel-background-colour: ${3:var(--theme-surface-subtle)};",
+      "  --deep-expanding-menu-panel-heading-line-clamp: ${4:none};",
+      "}"
     ]
   }
 }

package/.vscode/srcdev-component-samaritan-prompt.code-snippets

@@ -48,13 +48,14 @@
     ]
   },
   "SRCDEV SamaritanPrompt Tokens": {
-    "description": "SamaritanPrompt / SamaritanPromptMixed CSS token overrides",
+    "description": "SamaritanPrompt / SamaritanPromptMixed CSS token overrides (classic white-on-black look)",
     "scope": "css,vue",
     "body": [
       "--samaritan-prompt-font-size: ${1:2rem};",
-      "--samaritan-prompt-text-colour: ${2:var(--theme-text)};",
-      "--samaritan-prompt-underline-colour: ${3:var(--theme-text)};",
-      "--samaritan-prompt-cursor-colour: ${4:#cc0000};"
+      "--samaritan-prompt-text-colour: ${2:#fff};",
+      "--samaritan-prompt-underline-colour: ${3:#fff};",
+      "--samaritan-prompt-cursor-colour: ${4:#cc0000};",
+      "--samaritan-prompt-text-line-clamp: ${5:none};"
     ]
   }
 }

package/.vscode/srcdev-component-site-header.code-snippets

@@ -14,6 +14,18 @@
       "</SiteHeader>"
     ]
   },
+  "SRCDEV SiteHeader Sticky Tokens": {
+    "description": "SiteHeader sticky + layout token overrides (set on the styleClassPassthrough class)",
+    "scope": "css",
+    "body": [
+      ".${1:header} {",
+      "  --site-header-position: ${2:sticky};",
+      "  --site-header-sticky-offset: ${3:0px};",
+      "  --site-header-bg: ${4:var(--theme-surface-subtle)};",
+      "  --site-header-branding-max-width: ${5:50%};",
+      "}"
+    ]
+  },
   "SRCDEV SiteHeader With Secondary Navigation": {
     "description": "SiteHeader with the secondaryNavigation slot (e.g. a settings icon link)",
     "scope": "vue,html",
@@ -36,7 +48,7 @@
     "body": [
       "<SiteHeader",
       "  :responsive-nav-links=\"$1responsiveNavLinks\"",
-      "  home-nav-aria-label=\"${2:Home Navigation}\"",
+      "  home-nav-aria-label=\"${2:Home navigation}\"",
       "  main-nav-aria-label=\"${3:Main navigation}\"",
       "  secondary-nav-aria-label=\"${4:Secondary navigation}\"",
       "  overflow-menu-aria-label=\"${5:Overflow navigation menu}\"",

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/CONSUMER-STYLING.md

@@ -7,10 +7,10 @@
 | `--dashboard-quad-grid-gap` | `2rem` | Gap between the four slot panels |
 | `--dashboard-quad-grid-padding` | `2rem` | Padding inside each slot panel |
 | `--dashboard-quad-grid-outline-width` | `0.1rem` | Slot panel outline width |
-| `--dashboard-quad-grid-outline-colour` | `black` | Slot panel outline colour |
+| `--dashboard-quad-grid-outline-colour` | `var(--theme-border)` | Slot panel outline colour |
 | `--dashboard-quad-grid-outline-offset` | `0` | Slot panel outline offset |
 | `--dashboard-quad-grid-border-width` | `0` | Slot panel border width (off by default — the panel edge is drawn by the outline) |
-| `--dashboard-quad-grid-border-colour` | `black` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
+| `--dashboard-quad-grid-border-colour` | `var(--theme-border)` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
 | `--dashboard-quad-grid-border-radius` | `0.5rem` | Slot panel corner radius |
 | `--dashboard-quad-grid-rule-width` | `0.1rem` | Width of the grid gap rule line (CSS Gap Decorations — see Notes) |
 | `--dashboard-quad-grid-rule-colour` | `transparent` | Colour of the grid gap rule line, invisible by default |
@@ -31,6 +31,16 @@ Or scope to a single instance via `styleClassPassthrough`:
 
 ---
 
+## State hooks
+
+No state attributes. Element classes: `.dashboard-quad-grid-wrapper` (root, the container),
+`.dashboard-quad-grid` (the grid), `.dashboard-quad-grid-cell` (each of the four cells) with
+`.dashboard-quad-grid-slot-1` to `-slot-4`. Cells wrap their content and the columns are
+`minmax(0, auto)`, so an unbroken string can't widen the grid.
+
+> Changed 2026-10-21: the cells were `.slot1` to `.slot4` (bare classes a consumer's own CSS could
+> match), styled through `& > div`; the outline and border colours defaulted to `black`.
+
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/DashboardQuadGrid.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="dashboard-quad-grid-wrapper" :class="[elementClasses]">
     <div class="dashboard-quad-grid">
-      <div class="slot1">
+      <div class="dashboard-quad-grid-cell dashboard-quad-grid-slot-1">
         <slot name="slot1"></slot>
       </div>
-      <div class="slot2">
+      <div class="dashboard-quad-grid-cell dashboard-quad-grid-slot-2">
         <slot name="slot2"></slot>
       </div>
-      <div class="slot3">
+      <div class="dashboard-quad-grid-cell dashboard-quad-grid-slot-3">
         <slot name="slot3"></slot>
       </div>
-      <div class="slot4">
+      <div class="dashboard-quad-grid-cell dashboard-quad-grid-slot-4">
         <slot name="slot4"></slot>
       </div>
     </div>
@@ -50,61 +50,63 @@ watch(
       rule-break: intersection;
       rule-inset: var(--dashboard-quad-grid-rule-inset, 0);
 
-      & > div {
+      .dashboard-quad-grid-cell {
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
         padding: var(--dashboard-quad-grid-padding, 2rem);
         outline: var(--dashboard-quad-grid-outline-width, 0.1rem) solid
-          var(--dashboard-quad-grid-outline-colour, black);
+          var(--dashboard-quad-grid-outline-colour, var(--theme-border));
         outline-offset: var(--dashboard-quad-grid-outline-offset, 0);
         border: var(--dashboard-quad-grid-border-width, 0) solid
-          var(--dashboard-quad-grid-border-colour, black);
+          var(--dashboard-quad-grid-border-colour, var(--theme-border));
         border-radius: var(--dashboard-quad-grid-border-radius, 0.5rem);
       }
 
       @container (min-width: 768px) {
-        grid-template-columns: repeat(2, auto);
+        grid-template-columns: repeat(2, minmax(0, auto));
         grid-template-rows: repeat(3, auto);
 
-        .slot1 {
+        .dashboard-quad-grid-slot-1 {
           grid-column: 1 / span 2;
           grid-row: 1;
         }
 
-        .slot2 {
+        .dashboard-quad-grid-slot-2 {
           grid-column: 1 / span 2;
           grid-row: 2;
         }
 
-        .slot3 {
+        .dashboard-quad-grid-slot-3 {
           grid-column: 1;
           grid-row: 3;
         }
 
-        .slot4 {
+        .dashboard-quad-grid-slot-4 {
           grid-column: 2;
           grid-row: 3;
         }
       }
 
       @container (min-width: 1060px) {
-        grid-template-columns: repeat(3, auto);
+        grid-template-columns: repeat(3, minmax(0, auto));
         grid-template-rows: repeat(2, auto);
 
-        .slot1 {
+        .dashboard-quad-grid-slot-1 {
           grid-column: 1;
           grid-row: 1 / span 2;
         }
 
-        .slot2 {
+        .dashboard-quad-grid-slot-2 {
           grid-column: 2 / span 2;
           grid-row: 1;
         }
 
-        .slot3 {
+        .dashboard-quad-grid-slot-3 {
           grid-column: 2;
           grid-row: 2;
         }
 
-        .slot4 {
+        .dashboard-quad-grid-slot-4 {
           grid-column: 3;
           grid-row: 2;
         }

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/stories/DashboardQuadGrid.stories.ts

@@ -1,4 +1,6 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import CanvasSwitcher from "../../../../canvas-switcher/CanvasSwitcher.vue";
 import DashboardQuadGridComponent from "../DashboardQuadGrid.vue";
 import type { MediaCanvas } from "~/types/components";
 
@@ -530,3 +532,43 @@ ResponsiveComparison.parameters = {
     },
   },
 };
+
+export const StressTest: StoryFn = () => ({
+  components: { DashboardQuadGridComponent },
+  template: `
+    <DashboardQuadGridComponent>
+          <template #slot1><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><h3 style="margin: 0;">Supercalifragilisticexpialidociousandthensomemoretextwithoutanyspaces</h3><p style="margin: 0;">https://example.com/a/very/long/unbroken/path/that/never/wraps/on/its/own</p></div></template>
+          <template #slot2><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;">Ein sehr langer Beschreibungstext aus Northtown, der auf schmalen Bildschirmen mehrfach umbrechen muss, ohne das Raster zu sprengen oder die Nachbarspalten zusammenzudrücken.</p></div></template>
+          <template #slot3><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><img src="/images/banners/banner-1.webp" width="1600" height="400" alt="" style="display: block; max-inline-size: 100%; block-size: auto;"></div></template>
+          <template #slot4><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;">🙂 👍🏽 👨‍👩‍👧 &lt;b&gt;Not bold&lt;/b&gt;</p></div></template>
+        </DashboardQuadGridComponent>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.decorators = [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "mobileCanvas");
+        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>
+      `,
+    }),
+  ];
+StressTest.parameters = {
+    layout: "fullscreen",
+    docs: {
+      story: { inline: false, height: "720px" },
+      description: {
+        story:
+          "Oversized and hostile slot content at every `CanvasSwitcher` width. Check that: the unbroken heading and URL wrap inside their cell instead of widening it; the German paragraph wraps; the 1600px image scales down to its cell; emoji, `<b>` and right-to-left text render as text; the empty and one-character cells keep their place; no neighbouring cell is squeezed to nothing and nothing scrolls sideways. At tablet and wider, check the two- and three-column arrangements too.",
+      },
+    },
+  };