srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/02.molecules/expandable/expanding-panel-classic/stories/ExpandingPanelClassic.stories.ts

@@ -1,13 +1,26 @@
 import ExpandingPanelClassic from "../ExpandingPanelClassic.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 const meta: Meta<typeof ExpandingPanelClassic> = {
   title: "Molecules/Expandable/Expanding Panel Classic",
   component: ExpandingPanelClassic,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A single expand/collapse panel on native <details>/<summary>. To render a set of these from slots, optionally exclusive-open, use " +
+          "[AccordionGroup](?path=/story/molecules-expandable-accordiongroup--exclusive-open), which renders this panel for every item when `variant=\"classic\"`. " +
+          "[AccordionChat](?path=/story/molecules-expandable-accordionchat--default) restyles it as a chat: the summary becomes a question bubble and the content an answer bubble.",
+      },
+    },
+  },
   argTypes: {
     name: {
       control: { type: "text" },
-      description: "Unique name used for ARIA attributes and to group panels in a native <details> accordion",
+      description: "The <details> name: panels sharing it form an exclusive-open group. Element ids come from useId(), not from this.",
     },
     animationDuration: {
       control: { type: "number", min: 0, step: 50 },
@@ -291,3 +304,72 @@ export const WithStyleClassPassthrough: Story = {
     `,
   }),
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  render: (args) => ({
+    components: { ExpandingPanelClassic },
+    setup() {
+      const longUnbroken = "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft";
+      const longUrl = "https://example.com/" + "a-very-long-path-segment-without-spaces".repeat(4);
+      const longCopy = "Unsere Behandlungen werden individuell auf Ihre Bedürfnisse abgestimmt, damit Sie sich rundum wohlfühlen. ".repeat(6);
+      return { args, longUnbroken, longUrl, longCopy };
+    },
+    template: `
+      <div style="padding: 1.6rem; display: grid; gap: 1.6rem;">
+        <ExpandingPanelClassic v-bind="args" name="stress-a">
+          <template #summary><span>{{ longUnbroken }}</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">{{ longUrl }}</p></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args" name="stress-a">
+          <template #summary><span>{{ longCopy.slice(0, 220) }}</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">{{ longCopy }}</p></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args">
+          <template #summary><span>🎉 Emoji first, then &lt;b&gt;html&lt;/b&gt; as text</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">&lt;script&gt;alert(1)&lt;/script&gt;</p></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args" dir="rtl">
+          <template #summary><span>سؤال طويل من اليمين إلى اليسار للتحقق من الاتجاه</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">إجابة قصيرة.</p></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args">
+          <template #summary><span>A</span></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args">
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">No summary slot: only the icon is clickable.</p></template>
+        </ExpandingPanelClassic>
+      </div>
+    `,
+  }),
+  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; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "640px" },
+      description: {
+        story:
+          "Open each panel at every canvas width. The long unbroken summary wraps and the caret stays visible (until 2026-10-20 it pushed the " +
+          "caret out of the clipped summary); long URLs and copy wrap in the content; the first two panels share a name, so opening one closes " +
+          "the other, and each keeps its own ids; emoji and HTML-like text render as text; the RTL panel puts the caret on the left; the " +
+          "single-letter, no-content and no-summary panels keep their shape.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/expandable/expanding-panel-classic/tests/ExpandingPanelClassic.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { nextTick } from "vue";
+import { nextTick, defineComponent } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import type { ComponentPublicInstance } from "vue";
 import ExpandingPanelClassic from "../ExpandingPanelClassic.vue";
@@ -156,18 +156,11 @@ describe("ExpandingPanelClassic", () => {
 
   // ─── ARIA & IDs ───────────────────────────────────────────────────────────
 
-  it("sets id on summary to id-{name}-trigger", async () => {
+  it("points the summary's aria-controls at the content region", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic, {
       props: { name: "aria-panel" },
     });
-    expect(wrapper.find("summary").attributes("id")).toBe("id-aria-panel-trigger");
-  });
-
-  it("sets aria-controls on summary to id-{name}-content", async () => {
-    const wrapper = await mountSuspended(ExpandingPanelClassic, {
-      props: { name: "aria-panel" },
-    });
-    expect(wrapper.find("summary").attributes("aria-controls")).toBe("id-aria-panel-content");
+    expect(wrapper.find("summary").attributes("aria-controls")).toBe(wrapper.find(".expanding-panel-classic-content").attributes("id"));
   });
 
   it("sets aria-expanded to false when closed", async () => {
@@ -185,20 +178,11 @@ describe("ExpandingPanelClassic", () => {
     expect(wrapper.find("summary").attributes("aria-expanded")).toBe("true");
   });
 
-  it("sets id on content region to id-{name}-content", async () => {
+  it("labels the content region by its summary", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic, {
       props: { name: "aria-panel" },
     });
-    expect(wrapper.find(".expanding-panel-classic-content").attributes("id")).toBe("id-aria-panel-content");
-  });
-
-  it("sets aria-labelledby on content region to id-{name}-trigger", async () => {
-    const wrapper = await mountSuspended(ExpandingPanelClassic, {
-      props: { name: "aria-panel" },
-    });
-    expect(wrapper.find(".expanding-panel-classic-content").attributes("aria-labelledby")).toBe(
-      "id-aria-panel-trigger",
-    );
+    expect(wrapper.find(".expanding-panel-classic-content").attributes("aria-labelledby")).toBe(wrapper.find("summary").attributes("id"));
   });
 
   it("sets role='region' on the content div", async () => {
@@ -482,33 +466,43 @@ describe("ExpandingPanelClassic", () => {
 
   // ─── name prop / useId fallback ───────────────────────────────────────────
 
-  it("uses the provided name in ARIA attributes", async () => {
+  it("builds ids from useId, not from the name", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic, {
       props: { name: "my-panel" },
     });
-    expect(wrapper.find("summary").attributes("id")).toBe("id-my-panel-trigger");
-    expect(wrapper.find(".expanding-panel-classic-content").attributes("id")).toBe("id-my-panel-content");
+    expect(wrapper.find("summary").attributes("id")).not.toContain("my-panel");
+    expect(wrapper.find(".expanding-panel-classic-content").attributes("id")).not.toContain("my-panel");
   });
 
   it("generates ARIA ids when no name prop is supplied", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic);
     const summaryId = wrapper.find("summary").attributes("id") ?? "";
     const contentId = wrapper.find(".expanding-panel-classic-content").attributes("id") ?? "";
-    expect(summaryId).toMatch(/^id-.+-trigger$/);
-    expect(contentId).toMatch(/^id-.+-content$/);
+    expect(summaryId).toMatch(/^.+-trigger$/);
+    expect(contentId).toMatch(/^.+-content$/);
   });
 
-  it("updates the details name and ARIA ids when the name prop changes after mount", async () => {
+  it("updates the details name when the name prop changes after mount, keeping its ids", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic, {
       props: { name: "panel-a" },
     });
+    const summaryId = wrapper.find("summary").attributes("id");
     expect(wrapper.find("details").attributes("name")).toBe("panel-a");
-    expect(wrapper.find("summary").attributes("id")).toBe("id-panel-a-trigger");
 
     await wrapper.setProps({ name: "panel-b" });
 
     expect(wrapper.find("details").attributes("name")).toBe("panel-b");
-    expect(wrapper.find("summary").attributes("id")).toBe("id-panel-b-trigger");
-    expect(wrapper.find(".expanding-panel-classic-content").attributes("id")).toBe("id-panel-b-content");
+    expect(wrapper.find("summary").attributes("id")).toBe(summaryId);
+  });
+
+  it("gives panels that share a name distinct ids", async () => {
+    const Host = defineComponent({
+      components: { ExpandingPanelClassic },
+      template: `<div><ExpandingPanelClassic name="shared"></ExpandingPanelClassic><ExpandingPanelClassic name="shared"></ExpandingPanelClassic></div>`,
+    });
+    const wrapper = await mountSuspended(Host);
+    const ids = wrapper.findAll("[id]").map((el) => el.attributes("id"));
+    expect(ids).toHaveLength(4);
+    expect(new Set(ids).size).toBe(4);
   });
 });

package/app/components/02.molecules/expandable/expanding-panel-classic/tests/__snapshots__/ExpandingPanelClassic.spec.ts.snap

@@ -3,12 +3,12 @@
 exports[`ExpandingPanelClassic > renders correct HTML structure with all props set 1`] = `
 "<div class="expanding-panel-classic extra-class">
   <details class="expanding-panel-classic-details" name="snap-all" open="">
-    <summary id="id-snap-all-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-all-content" aria-expanded="true">
+    <summary id="v-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-1-content" aria-expanded="true">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper icon-wrapper--hidden"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
   </details>
-  <div id="id-snap-all-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-all-trigger" role="region">
+  <div id="v-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-1-trigger" role="region">
     <div class="inner"></div>
   </div>
 </div>"
@@ -17,12 +17,12 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with all props s
 exports[`ExpandingPanelClassic > renders correct HTML structure with contentIsOnTop true 1`] = `
 "<div class="expanding-panel-classic content-is-on-top">
   <details class="expanding-panel-classic-details" name="snap-content-on-top">
-    <summary id="id-snap-content-on-top-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-content-on-top-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
   </details>
-  <div id="id-snap-content-on-top-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-content-on-top-trigger" role="region">
+  <div id="v-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-1-trigger" role="region">
     <div class="inner"></div>
   </div>
 </div>"
@@ -31,12 +31,12 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with contentIsOn
 exports[`ExpandingPanelClassic > renders correct HTML structure with default props 1`] = `
 "<div class="expanding-panel-classic">
   <details class="expanding-panel-classic-details" name="snap-default">
-    <summary id="id-snap-default-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-default-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
   </details>
-  <div id="id-snap-default-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-default-trigger" role="region">
+  <div id="v-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-1-trigger" role="region">
     <div class="inner"></div>
   </div>
 </div>"
@@ -45,12 +45,12 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with default pro
 exports[`ExpandingPanelClassic > renders correct HTML structure with populated slots 1`] = `
 "<div class="expanding-panel-classic">
   <details class="expanding-panel-classic-details" name="snap-slots">
-    <summary id="id-snap-slots-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-slots-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"><span>Summary text</span></div>
       <div class="icon-wrapper"><span>▸</span></div>
     </summary>
   </details>
-  <div id="id-snap-slots-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-slots-trigger" role="region">
+  <div id="v-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-1-trigger" role="region">
     <div class="inner">
       <p>Content text</p>
     </div>

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>
+