srcdev-nuxt-components 9.6.19 → 9.6.20

package/app/components/02.molecules/navigation/deep-expanding-menu/CONSUMER-STYLING.md

@@ -2,65 +2,76 @@
 
 ## Public token API
 
+> Changed 2026-10-21: colour defaults now come from `--theme-*` tokens (were `--blue-10`, `white`,
+> `black`, `--slate-10`), and the structural classes are prefixed (see State hooks).
+
+### Top-level row
+
 | Token | Default | Controls |
 |---|---|---|
-| `--deep-expanding-menu-gap` | `2.4rem` | Gap between top-level items |
-| `--deep-expanding-menu-link-border-width` | `0.2rem` | Bottom border width on links and group toggles |
+| `--deep-expanding-menu-gap` | `2.4rem` | Gap between top-level items (row and column, the row wraps) |
+| `--deep-expanding-menu-link-border-width` | `0.2rem` | Bottom border width on links, group toggles and child links |
 | `--deep-expanding-menu-link-padding-block` | `0.8rem` | Vertical padding on links and group toggles |
-| `--deep-expanding-menu-link-border-colour-hover` | `var(--blue-10)` | Bottom border colour on hover/focus |
+| `--deep-expanding-menu-link-border-colour-hover` | `var(--theme-border)` | Bottom border colour on hover/focus |
+| `--deep-expanding-menu-focus-outline-width` | `0.2rem` | Keyboard focus ring width on links and toggles |
+| `--deep-expanding-menu-focus-outline-colour` | `var(--theme-ring, currentcolor)` | Keyboard focus ring colour |
 | `--deep-expanding-menu-icon-size` | `1.2rem` | Caret icon size |
-| `--deep-expanding-menu-panel-width` | `min(100%, 50vw)` | Popover panel width |
-| `--deep-expanding-menu-panel-background-colour` | `white` | Popover panel background |
-| `--deep-expanding-menu-panel-border-width` | `0.1rem` | Popover panel border width |
-| `--deep-expanding-menu-panel-border-colour` | `black` | Popover panel border colour |
-| `--deep-expanding-menu-panel-border-radius` | `1.2rem` | Popover panel corner radius |
-| `--deep-expanding-menu-panel-shadow` | `0 0 1rem rgba(0, 0, 0, 0.1)` | Popover panel box-shadow |
-| `--deep-expanding-menu-panel-padding` | `1.2rem` | Popover panel padding |
-| `--deep-expanding-menu-panel-heading-colour` | `var(--slate-10)` | `childLinksTitle` heading colour inside the panel |
-| `--deep-expanding-menu-panel-list-gap` | `1.2rem` | Gap between child link grid items |
-| `--deep-expanding-menu-group-link-colour` | `var(--slate-10)` | Child link text colour |
-| `--deep-expanding-menu-group-link-border-colour-hover` | `var(--slate-10)` | Child link bottom border colour on hover/focus |
-| `--deep-expanding-menu-panel-z-index` | `999999` | Panel stacking order in browsers without CSS anchor positioning. Ignored where the panel renders in the top layer |
 
-```css
-.my-page {
-  --deep-expanding-menu-panel-background-colour: #1a1a1a;
-  --deep-expanding-menu-panel-border-colour: transparent;
-  --deep-expanding-menu-group-link-colour: white;
-}
-```
+### Panel
 
-Or scope to a single instance via `styleClassPassthrough`:
-
-```vue
-<DeepExpandingMenu style-class-passthrough="main-nav">...</DeepExpandingMenu>
-```
-
----
-
-## Not tokenised
+| Token | Default | Controls |
+|---|---|---|
+| `--deep-expanding-menu-panel-width` | `min(100%, 50vw)` | Panel width |
+| `--deep-expanding-menu-panel-max-height` | `70dvh` | Panel max height; longer lists scroll inside it |
+| `--deep-expanding-menu-panel-text-colour` | `var(--theme-text)` | Panel text colour |
+| `--deep-expanding-menu-panel-background-colour` | `var(--theme-surface-subtle)` | Panel background |
+| `--deep-expanding-menu-panel-border-width` | `0.1rem` | Panel border width |
+| `--deep-expanding-menu-panel-border-colour` | `var(--theme-border)` | Panel border colour |
+| `--deep-expanding-menu-panel-border-radius` | `1.2rem` | Panel corner radius |
+| `--deep-expanding-menu-panel-shadow` | `0 0 1rem rgba(0, 0, 0, 0.1)` | Panel box-shadow |
+| `--deep-expanding-menu-panel-padding` | `1.2rem` | Panel padding |
+| `--deep-expanding-menu-panel-heading-colour` | `var(--theme-text)` | `childLinksTitle` heading colour |
+| `--deep-expanding-menu-panel-heading-line-clamp` | `none` | Lines of `childLinksTitle` before an ellipsis. `1` is single-line ellipsis, `none` shows everything |
+| `--deep-expanding-menu-panel-list-gap` | `1.2rem` | Gap between child link grid items |
+| `--deep-expanding-menu-group-link-colour` | `var(--theme-text)` | Child link text colour |
+| `--deep-expanding-menu-group-link-border-colour-hover` | `var(--theme-text)` | Child link bottom border colour on hover/focus |
+| `--deep-expanding-menu-panel-z-index` | `999999` | Panel stacking order in browsers without CSS anchor positioning. Ignored where the panel renders in the top layer |
 
-- The `1rem` gap between a toggle and its panel.
-- Anchor names and popover target ids are generated per-instance via `useId()` and are not
-  consumer-configurable — they only need to be unique, not meaningful.
+Private tokens (not public API): `--_anchor-name` (per-group anchor, set inline),
+`--_icon-transform` (caret flip), and `--_anchor-bottom`, `--_anchor-left`,
+`--_anchor-top-inverse` (written by `useAnchoredPopover` in the fallback).
 
----
+Not tokenised: the `1rem` gap between a toggle and its panel, and the `12rem` minimum child link
+column. Anchor names and popover target ids come from `useId()`.
 
-## Open state and older browsers
+## State hooks
 
 | Hook | Meaning |
 |---|---|
-| `.navigation-group-toggle[aria-expanded="true"]` | Group open, every browser (flips the caret) |
-| `.navigation-group-panel:popover-open` | Panel open, Popover API browsers |
+| `.deep-expanding-menu-group-toggle[aria-expanded="true"]` | Group open, every browser (flips the caret) |
+| `.deep-expanding-menu-group-panel:popover-open` | Panel open, Popover API browsers |
 | `.deep-expanding-menu-panel-open` | Panel open, browsers without the Popover API (Safari 16 and older). Style it in a **separate rule** from `:popover-open`: a selector list containing `:popover-open` is dropped whole where it's unsupported |
-| `.navigation-group-panel[data-placement="top"]` | Flipped above the toggle, browsers without CSS anchor positioning only |
+| `.deep-expanding-menu-group-panel[data-placement="top"]` | Flipped above the toggle, browsers without CSS anchor positioning only |
+
+Inner elements: `.deep-expanding-menu-inner` (the flex row), `.deep-expanding-menu-link` (direct
+link), `.deep-expanding-menu-group`, `.deep-expanding-menu-group-toggle`,
+`.deep-expanding-menu-group-label`, `.deep-expanding-menu-group-icon`,
+`.deep-expanding-menu-group-panel`, `.deep-expanding-menu-group-heading`,
+`.deep-expanding-menu-group-list`, `.deep-expanding-menu-group-item`,
+`.deep-expanding-menu-group-link`.
 
-Without CSS anchor positioning (e.g. Safari 17–18) the panel is placed with `position: fixed` from
-the toggle's measured position. Without the Popover API (Safari 16) the panel also opens and closes
-in JS and isn't in the top layer, so `--deep-expanding-menu-panel-z-index` applies, and an ancestor
-with `transform`, `filter` or `contain` becomes its containing block and can misplace it.
+> Changed 2026-10-21: these were `.inner`, `.navigation-link`, `.navigation-group`,
+> `.navigation-group-toggle`, `.icon`, `.navigation-group-panel`, `.navigation-group-list`,
+> `.navigation-group-item` and `.navigation-group-link`. The heading had no class of its own.
 
----
+## Browser support and placement
+
+Where CSS anchor positioning is supported, a panel that would overflow the right edge flips to
+align with its toggle's right edge (`position-try-fallbacks: flip-inline`). Without anchor
+positioning (e.g. Safari 17–18) the panel is placed with `position: fixed` from the toggle's
+measured position. Without the Popover API (Safari 16) the panel also opens and closes in JS and
+isn't in the top layer, so `--deep-expanding-menu-panel-z-index` applies, and an ancestor with
+`transform`, `filter` or `contain` becomes its containing block and can misplace it.
 
 ## Local overrides
 
@@ -69,3 +80,11 @@ Set the tokens above on an element you own (a page or section class, or a class
 `@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
 `<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
 `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** in browsers with the Popover API the panel renders in the top layer but stays a DOM
+descendant of the menu, so tokens set on an ancestor still reach it.
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root element (the `<nav>` by default). It's the
+usual place to scope token overrides to one instance.

package/app/components/02.molecules/navigation/deep-expanding-menu/DeepExpandingMenu.vue

@@ -1,26 +1,26 @@
 <template>
-  <component :is="tag" ref="rootRef" class="deep-expanding-menu" :class="[elementClasses]">
-    <div class="inner">
+  <component :is="tag" ref="rootRef" class="deep-expanding-menu" :class="[elementClasses]" :aria-label="ariaLabel">
+    <div class="deep-expanding-menu-inner">
       <template v-for="(link, key) in navLinks" :key="key">
-        <NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
+        <NuxtLink v-if="link.path" :to="link.path" class="deep-expanding-menu-link">{{ link.name }}</NuxtLink>
 
-        <div v-else class="navigation-group" :style="`--_anchor-name: --anchor-${uid}-${key};`">
+        <div v-else class="deep-expanding-menu-group" :style="`--_anchor-name: --anchor-${uid}-${key};`">
           <button
             :ref="(el) => setElement(triggerEls, key, el)"
             type="button"
             :popovertarget="`popovertarget-${uid}-${key}`"
-            class="navigation-group-toggle"
+            class="deep-expanding-menu-group-toggle"
             :aria-expanded="isOpen && activeKey === key"
             @click="handleGroupClick(key)"
           >
-            <span>{{ link.name }}</span>
-            <Icon name="bi:caret-down-fill" class="icon" />
+            <span class="deep-expanding-menu-group-label">{{ link.name }}</span>
+            <Icon name="bi:caret-down-fill" class="deep-expanding-menu-group-icon" aria-hidden="true" />
           </button>
 
           <div
             :id="`popovertarget-${uid}-${key}`"
             :ref="(el) => setElement(panelEls, key, el)"
-            class="navigation-group-panel"
+            class="deep-expanding-menu-group-panel"
             :class="{ 'deep-expanding-menu-panel-open': usesFallbackPopover && isOpen && activeKey === key }"
             :style="activeKey === key ? positionStyle : undefined"
             :data-placement="activeKey === key ? popoverPlacement : undefined"
@@ -28,10 +28,16 @@
             @beforetoggle="handlePanelBeforeToggle(key, $event)"
             @toggle="handlePanelToggle(key, $event)"
           >
-            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
-            <ul class="navigation-group-list">
-              <li v-for="childLink in link.childLinks" :key="childLink.name" class="navigation-group-item">
-                <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
+            <h4 v-if="link.childLinksTitle" class="deep-expanding-menu-group-heading page-heading-4 mb-6">
+              {{ link.childLinksTitle }}
+            </h4>
+            <ul v-if="link.childLinks?.length" class="deep-expanding-menu-group-list" role="list">
+              <li
+                v-for="(childLink, childIndex) in link.childLinks"
+                :key="`${childIndex}-${childLink.name}`"
+                class="deep-expanding-menu-group-item"
+              >
+                <NuxtLink :to="childLink.path" class="deep-expanding-menu-group-link">{{ childLink.name }}</NuxtLink>
               </li>
             </ul>
           </div>
@@ -41,19 +47,22 @@
   </component>
 </template>
 
+
 <script setup lang="ts">
 import type { ComponentPublicInstance } from "vue";
 import type { ResponsiveHeaderNavItem } from "~/types/components";
 
 interface Props {
-  tag?: "div" | "section" | "nav" | "ul" | "ol";
+  tag?: "div" | "section" | "nav";
   navLinks?: ResponsiveHeaderNavItem[];
+  ariaLabel?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "nav",
   navLinks: () => [],
+  ariaLabel: undefined,
   styleClassPassthrough: () => [],
 });
 
@@ -126,15 +135,19 @@ watch(
       display: grid;
       grid-template-areas: "element-stack";
 
-      .inner {
+      .deep-expanding-menu-inner {
         grid-area: element-stack;
         display: flex;
+        flex-wrap: wrap;
         gap: var(--deep-expanding-menu-gap, 2.4rem);
         align-items: center;
+        min-inline-size: 0;
 
-        .navigation-link,
-        .navigation-group-toggle {
+        .deep-expanding-menu-link,
+        .deep-expanding-menu-group-toggle {
           all: unset;
+          min-inline-size: 0;
+          overflow-wrap: anywhere;
           border-bottom: var(--deep-expanding-menu-link-border-width, 0.2rem) solid transparent;
           padding-block: var(--deep-expanding-menu-link-padding-block, 0.8rem);
 
@@ -144,26 +157,35 @@ watch(
           &:focus,
           &:focus-visible {
             cursor: pointer;
-            border-color: var(
-              --deep-expanding-menu-link-border-colour-hover,
-              var(--blue-10)
-            );
+            border-color: var(--deep-expanding-menu-link-border-colour-hover, var(--theme-border));
+          }
+
+          &:focus-visible {
+            outline: var(--deep-expanding-menu-focus-outline-width, 0.2rem) solid
+              var(--deep-expanding-menu-focus-outline-colour, var(--theme-ring, currentcolor));
+            outline-offset: 0.2rem;
           }
         }
 
-        .navigation-group {
+        .deep-expanding-menu-group {
           --_icon-transform: scaleY(1);
           position: relative;
+          min-inline-size: 0;
 
-          .navigation-group-toggle {
+          .deep-expanding-menu-group-toggle {
             anchor-name: var(--_anchor-name);
 
             display: flex;
             align-items: center;
             gap: 1.2rem;
 
-            .icon {
+            .deep-expanding-menu-group-label {
+              min-inline-size: 0;
+            }
+
+            .deep-expanding-menu-group-icon {
               display: block;
+              flex-shrink: 0;
               font-size: var(--deep-expanding-menu-icon-size, 1.2rem);
 
               transform: var(--_icon-transform);
@@ -171,10 +193,11 @@ watch(
             }
           }
 
-          .navigation-group-panel {
+          .deep-expanding-menu-group-panel {
             display: none;
             position: absolute;
             position-anchor: var(--_anchor-name);
+            position-try-fallbacks: flip-inline;
             margin: 0;
             top: calc(anchor(bottom) + 1rem);
             left: calc(anchor(left) + 0rem);
@@ -187,14 +210,17 @@ watch(
             transition-behavior: allow-discrete;
 
             width: var(--deep-expanding-menu-panel-width, min(100%, 50vw));
+            max-block-size: var(--deep-expanding-menu-panel-max-height, 70dvh);
 
-            background-color: var(--deep-expanding-menu-panel-background-colour, white);
+            color: var(--deep-expanding-menu-panel-text-colour, var(--theme-text));
+            background-color: var(--deep-expanding-menu-panel-background-colour, var(--theme-surface-subtle));
             border: var(--deep-expanding-menu-panel-border-width, 0.1rem) solid
-              var(--deep-expanding-menu-panel-border-colour, black);
+              var(--deep-expanding-menu-panel-border-colour, var(--theme-border));
             border-radius: var(--deep-expanding-menu-panel-border-radius, 1.2rem);
             box-shadow: var(--deep-expanding-menu-panel-shadow, 0 0 1rem rgba(0, 0, 0, 0.1));
             padding: var(--deep-expanding-menu-panel-padding, 1.2rem);
-            overflow: clip;
+            overflow-x: clip;
+            overflow-y: auto;
 
             &:popover-open {
               display: block;
@@ -224,23 +250,33 @@ watch(
               }
             }
 
-            h4 {
-              color: var(--deep-expanding-menu-panel-heading-colour, var(--slate-10));
+            .deep-expanding-menu-group-heading {
+              color: var(--deep-expanding-menu-panel-heading-colour, var(--theme-text));
+              overflow-wrap: anywhere;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              -webkit-line-clamp: var(--deep-expanding-menu-panel-heading-line-clamp, none);
+              line-clamp: var(--deep-expanding-menu-panel-heading-line-clamp, none);
             }
 
-            .navigation-group-list {
+            .deep-expanding-menu-group-list {
               display: grid;
-              grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+              grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
               gap: var(--deep-expanding-menu-panel-list-gap, 1.2rem);
+              list-style: none;
               padding-inline-start: 0;
-              margin-block-end: 0.8rem;
+              margin-block: 0 0.8rem;
 
-              .navigation-group-item {
+              .deep-expanding-menu-group-item {
                 display: block;
+                min-inline-size: 0;
 
-                a.navigation-group-link {
+                a.deep-expanding-menu-group-link {
                   display: inline-block;
-                  color: var(--deep-expanding-menu-group-link-colour, var(--slate-10));
+                  max-inline-size: 100%;
+                  overflow-wrap: anywhere;
+                  color: var(--deep-expanding-menu-group-link-colour, var(--theme-text));
                   text-decoration: none;
                   padding-block: 0.8rem;
 
@@ -251,14 +287,14 @@ watch(
                   &:hover,
                   &:focus-visible {
                     cursor: pointer;
-                    border-color: var(--deep-expanding-menu-group-link-border-colour-hover, var(--slate-10));
+                    border-color: var(--deep-expanding-menu-group-link-border-colour-hover, var(--theme-text));
                   }
                 }
               }
             }
           }
 
-          &:has(> .navigation-group-toggle[aria-expanded="true"]) {
+          &:has(> .deep-expanding-menu-group-toggle[aria-expanded="true"]) {
             --_icon-transform: scaleY(-1);
           }
         }
@@ -267,3 +303,4 @@ watch(
   }
 }
 </style>
+

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

@@ -1,6 +1,8 @@
+import { computed, ref } from "vue";
 import DeepExpandingMenu from "../DeepExpandingMenu.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 DeepExpandingMenu> = {
+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 DeepExpandingMenu prop. See the argTypes entry.
+type StoryArgs = InstanceType<typeof DeepExpandingMenu>["$props"] & {
+  headingLineClamp: LineClamp;
+};
+
+const meta: Meta<StoryArgs> = {
   title: "Molecules/DeepExpandingMenu",
   component: DeepExpandingMenu,
   argTypes: {
+    headingLineClamp: {
+      control: "select",
+      options: ["none", "1", "2", "3"] satisfies LineClamp[],
+      description:
+        "**Story control, not a prop.** Sets the `--deep-expanding-menu-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-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:
-          "Modern implementation of a top-level nav with expanding child-link panels, using CSS anchor-positioning and the Popover API. See `DeepExpandingMenuClassic` for a `<details>`-based fallback with wider browser support.",
+          "Top-level nav row where each item is a direct link (`path`) or a toggle that opens a panel of child links (`childLinks`, with an optional `childLinksTitle` heading). " +
+          "Built on CSS anchor positioning and the Popover API, with a JS fallback for Safari 16-18. Props: `navLinks`, `tag`, `ariaLabel`. " +
+          "See `DeepExpandingMenuClassic` for the `<details>`-based alternative.",
       },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof DeepExpandingMenu>;
+type Story = StoryObj<StoryArgs>;
+
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => {
+    const { headingLineClamp: _headingLineClamp, ...rest } = args;
+    return rest;
+  });
+  const tokenStyles = computed(() => ({
+    "--deep-expanding-menu-panel-heading-line-clamp": args.headingLineClamp,
+  }));
+  return { componentArgs, tokenStyles };
+}
+
+const render = (args: StoryArgs) => ({
+  components: { DeepExpandingMenu },
+  setup() {
+    return useStorySetup(args);
+  },
+  template: `<div :style="tokenStyles"><DeepExpandingMenu v-bind="componentArgs" /></div>`,
+});
 
 export const Default: Story = {
-  render: (args) => ({
-    components: { DeepExpandingMenu },
-    setup() {
-      return { args };
-    },
-    template: `<DeepExpandingMenu v-bind="args" style="padding: 4rem;" />`,
-  }),
+  render,
 };
 
 export const CustomColours: Story = {
+  name: "Custom Colours",
   render: (args) => ({
     components: { DeepExpandingMenu },
     setup() {
-      return { args };
+      return useStorySetup(args);
     },
     template: `
-      <DeepExpandingMenu
-        v-bind="args"
-        style="padding: 4rem; --deep-expanding-menu-panel-background-colour: #1a1a1a; --deep-expanding-menu-panel-border-colour: transparent; --deep-expanding-menu-group-link-colour: white; --deep-expanding-menu-panel-heading-colour: #aaaaaa;"
-      />
+      <div
+        :style="tokenStyles"
+        style="--deep-expanding-menu-panel-background-colour: #1a1a1a; --deep-expanding-menu-panel-border-colour: transparent; --deep-expanding-menu-group-link-colour: white; --deep-expanding-menu-group-link-border-colour-hover: white; --deep-expanding-menu-panel-heading-colour: #aaaaaa;"
+      >
+        <DeepExpandingMenu v-bind="componentArgs" />
+      </div>
     `,
   }),
   parameters: {
     docs: {
       description: {
-        story: "Overriding the public tokens via inline `--deep-expanding-menu-*` custom properties.",
+        story: "Overriding the public `--deep-expanding-menu-*` 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 scroll 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; the last group's panel flips to stay on screen near the right edge.",
       },
     },
   },