srcdev-nuxt-components 9.4.4 → 9.4.6

package/app/components/02.molecules/display-tooltip-defined/tests/DisplayTooltipDefined.spec.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayTooltipDefined from "../DisplayTooltipDefined.vue";
+import type { TooltipContentText } from "~/types/components";
+
+const contentText: TooltipContentText = {
+  tooltipTitle: { tag: "h4", text: "Title" },
+  tooltipContent: { tag: "p", text: "Body copy" },
+  tooltipAction: { tag: "span", text: "Learn more" },
+};
+
+describe("DisplayTooltipDefined", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayTooltipDefined);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText, tooltipId: "fixed" } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders the title, body, and action from contentText", async () => {
+    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText } });
+    expect(wrapper.find(".tooltip-title").text()).toBe("Title");
+    expect(wrapper.find(".tooltip-body").text()).toBe("Body copy");
+    expect(wrapper.find(".tooltip-action").text()).toBe("Learn more");
+  });
+
+  it("renders each contentText field with its given tag", async () => {
+    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { contentText } });
+    expect(wrapper.find(".tooltip-title").element.tagName.toLowerCase()).toBe("h4");
+    expect(wrapper.find(".tooltip-body").element.tagName.toLowerCase()).toBe("p");
+    expect(wrapper.find(".tooltip-action").element.tagName.toLowerCase()).toBe("span");
+  });
+
+  it("omits a field when not present in contentText", async () => {
+    const wrapper = await mountSuspended(DisplayTooltipDefined, {
+      props: { contentText: { tooltipTitle: { tag: "h4", text: "Only a title" } } },
+    });
+    expect(wrapper.find(".tooltip-title").exists()).toBe(true);
+    expect(wrapper.find(".tooltip-body").exists()).toBe(false);
+    expect(wrapper.find(".tooltip-action").exists()).toBe(false);
+  });
+
+  it("renders a close button wired to the tooltip id", async () => {
+    const wrapper = await mountSuspended(DisplayTooltipDefined, { props: { tooltipId: "my-tip" } });
+    const closeButton = wrapper.find(".display-tooltip-close-button");
+    expect(closeButton.attributes("popovertarget")).toBe("nuxt-tooltip-my-tip");
+    expect(closeButton.attributes("popovertargetaction")).toBe("hide");
+  });
+
+  it("renders the triggerContent slot", async () => {
+    const wrapper = await mountSuspended(DisplayTooltipDefined, {
+      slots: { triggerContent: "<span class='slot-trigger'>?</span>" },
+    });
+    expect(wrapper.find(".slot-trigger").text()).toBe("?");
+  });
+
+  it("applies styleClassPassthrough classes to the underlying DisplayTooltip", async () => {
+    const wrapper = await mountSuspended(DisplayTooltipDefined, {
+      props: { styleClassPassthrough: ["custom-class"] },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+});

package/app/components/02.molecules/display-tooltip-defined/tests/__snapshots__/DisplayTooltipDefined.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DisplayTooltipDefined > renders correct HTML structure 1`] = `
+"<div class="display-tooltip-core" style="--_anchor-name: --tooltip-anchor-v-0-0-0;">
+  <div class="display-tooltip-trigger-wrapper body-md">
+    <!--v-if--><button popovertarget="nuxt-tooltip-fixed" popovertargetaction="toggle" class="display-tooltip-trigger-button" aria-label="Toggle the popover"><span class="iconify i-fa7-solid:circle-question display-tooltip-trigger-icon" aria-hidden="true"></span></button>
+  </div>
+  <div id="nuxt-tooltip-fixed" popover="" class="display-tooltip-popover">
+    <div class="display-tooltip-popover-content">
+      <div class="popover-content-defined">
+        <h4 class="tooltip-title subtitle-sm">Title</h4>
+        <p class="tooltip-body body-sm">Body copy</p><span class="tooltip-action input-value">Learn more</span><button popovertarget="nuxt-tooltip-fixed" popovertargetaction="hide" class="display-tooltip-close-button" aria-label="Close tool tip">Close</button>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

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

@@ -0,0 +1,44 @@
+# DeepExpandingMenu — Consumer Styling Guide
+
+## Public token API
+
+| 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-link-padding-block` | `0.8rem` | Vertical padding on links and group toggles |
+| `--deep-expanding-menu-link-border-colour-hover` | `light-dark(var(--blue-10), var(--slate-00))` | Bottom border colour on hover/focus |
+| `--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 |
+
+```css
+.my-page {
+  --deep-expanding-menu-panel-background-colour: #1a1a1a;
+  --deep-expanding-menu-panel-border-colour: transparent;
+  --deep-expanding-menu-group-link-colour: white;
+}
+```
+
+Or scope to a single instance via `styleClassPassthrough`:
+
+```vue
+<DeepExpandingMenu style-class-passthrough="main-nav">...</DeepExpandingMenu>
+```
+
+## Not tokenised
+
+- The `@position-try` fallback offsets (`--anchor-left`/`--anchor-right`) are fixed at `1rem` —
+  these are CSS anchor-positioning fallback rules, not runtime custom properties, so they can't be
+  overridden per-instance without a new `@position-try` block.
+- 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.

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

@@ -4,13 +4,13 @@
       <template v-for="(link, key) in navLinks" :key="key">
         <NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
 
-        <div v-else ref="detailsRef" class="navigation-group" :style="`--_anchor-name: --anchor-nav-1-${key};`">
-          <button :popovertarget="`popovertarget-nav-1-${key}`" class="navigation-group-toggle">
+        <div v-else class="navigation-group" :style="`--_anchor-name: --anchor-${uid}-${key};`">
+          <button :popovertarget="`popovertarget-${uid}-${key}`" class="navigation-group-toggle">
             <span>{{ link.name }}</span>
             <Icon name="bi:caret-down-fill" class="icon" />
           </button>
 
-          <div :id="`popovertarget-nav-1-${key}`" class="navigation-group-panel" popover role="menu">
+          <div :id="`popovertarget-${uid}-${key}`" class="navigation-group-panel" popover role="menu">
             <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">
@@ -25,27 +25,24 @@
 </template>
 
 <script setup lang="ts">
-import type { ResponsiveHeaderNavItem } from "../../types/components";
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "nav",
-    validator(value: string) {
-      return ["div", "section", "nav", "ul", "ol"].includes(value);
-    },
-  },
-  navLinks: {
-    type: Array as PropType<ResponsiveHeaderNavItem[]>,
-    default: () => [],
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+interface Props {
+  tag?: "div" | "section" | "nav" | "ul" | "ol";
+  navLinks?: ResponsiveHeaderNavItem[];
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "nav",
+  navLinks: () => [],
+  styleClassPassthrough: () => [],
 });
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-// const detailsRef = useTemplateRef('detailsRef');
+
+// Scopes anchor-name/popovertarget ids so multiple instances on one page don't collide.
+const uid = useId();
 
 watch(
   () => props.styleClassPassthrough,
@@ -60,19 +57,17 @@ watch(
   @layer deep-expanding-menu-setup {
     @position-try --anchor-left {
       inset: auto;
-      top: calc(anchor(bottom) + 10px);
-      left: calc(anchor(left) + 10px);
+      top: calc(anchor(bottom) + 1rem);
+      left: calc(anchor(left) + 1rem);
     }
 
     @position-try-fallbacks --anchor-right {
       inset: auto;
-      top: calc(anchor(bottom) + 10px);
-      right: calc(anchor(right) + 10px);
+      top: calc(anchor(bottom) + 1rem);
+      right: calc(anchor(right) + 1rem);
     }
 
     .deep-expanding-menu {
-      --_gap-between-top-level-items: 24px;
-
       container-type: inline-size;
       display: grid;
       grid-template-areas: "element-stack";
@@ -80,28 +75,25 @@ watch(
       .inner {
         grid-area: element-stack;
         display: flex;
-        gap: var(--_gap-between-top-level-items);
+        gap: var(--deep-expanding-menu-gap, 2.4rem);
         align-items: center;
 
         .navigation-link,
         .navigation-group-toggle {
           all: unset;
-          border-bottom: 2px solid transparent;
-          padding-block: 8px;
+          border-bottom: var(--deep-expanding-menu-link-border-width, 0.2rem) solid transparent;
+          padding-block: var(--deep-expanding-menu-link-padding-block, 0.8rem);
 
           transition: border-color 200ms;
 
-          &:hover {
-            cursor: pointer;
-            border-color: light-dark(var(--blue-10), var(--slate-00));
-          }
-
-          &:focus {
-            border-color: light-dark(var(--blue-10), var(--slate-00));
-          }
-
+          &:hover,
+          &:focus,
           &:focus-visible {
-            border-color: light-dark(var(--blue-10), var(--slate-00));
+            cursor: pointer;
+            border-color: var(
+              --deep-expanding-menu-link-border-colour-hover,
+              light-dark(var(--blue-10), var(--slate-00))
+            );
           }
         }
 
@@ -114,11 +106,11 @@ watch(
 
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 1.2rem;
 
             .icon {
               display: block;
-              font-size: 1.2rem;
+              font-size: var(--deep-expanding-menu-icon-size, 1.2rem);
 
               transform: var(--_icon-transform);
               transition: transform 200ms;
@@ -130,9 +122,8 @@ watch(
             position: absolute;
             position-anchor: var(--_anchor-name);
             margin: 0;
-            /* inset: auto; */
-            top: calc(anchor(bottom) + 10px);
-            left: calc(anchor(left) + 0px);
+            top: calc(anchor(bottom) + 1rem);
+            left: calc(anchor(left) + 0rem);
 
             opacity: 0;
             transition:
@@ -141,13 +132,14 @@ watch(
               overlay 200ms;
             transition-behavior: allow-discrete;
 
-            width: min(100%, 50vw);
+            width: var(--deep-expanding-menu-panel-width, min(100%, 50vw));
 
-            background-color: white;
-            border: 1px solid black;
-            border-radius: 12px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            padding: 12px;
+            background-color: var(--deep-expanding-menu-panel-background-colour, white);
+            border: var(--deep-expanding-menu-panel-border-width, 0.1rem) solid
+              var(--deep-expanding-menu-panel-border-colour, black);
+            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;
 
             &:popover-open {
@@ -161,36 +153,33 @@ watch(
             }
 
             h4 {
-              color: var(--slate-10);
+              color: var(--deep-expanding-menu-panel-heading-colour, var(--slate-10));
             }
 
             .navigation-group-list {
               display: grid;
-              grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-              gap: 12px;
+              grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+              gap: var(--deep-expanding-menu-panel-list-gap, 1.2rem);
               padding-inline-start: 0;
-              margin-block-end: 8px;
+              margin-block-end: 0.8rem;
 
               .navigation-group-item {
                 display: block;
 
                 a.navigation-group-link {
                   display: inline-block;
-                  color: var(--slate-10);
+                  color: var(--deep-expanding-menu-group-link-colour, var(--slate-10));
                   text-decoration: none;
-                  padding-block: 8px;
+                  padding-block: 0.8rem;
 
-                  border-bottom: 2px solid transparent;
+                  border-bottom: var(--deep-expanding-menu-link-border-width, 0.2rem) solid transparent;
 
                   transition: border-color 200ms;
 
-                  &:hover {
-                    cursor: pointer;
-                    border-color: var(--slate-10);
-                  }
-
+                  &:hover,
                   &:focus-visible {
-                    border-color: var(--slate-10);
+                    cursor: pointer;
+                    border-color: var(--deep-expanding-menu-group-link-border-colour-hover, var(--slate-10));
                   }
                 }
               }

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

@@ -0,0 +1,79 @@
+import DeepExpandingMenu from "../DeepExpandingMenu.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+const navLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Services",
+    childLinksTitle: "Our services",
+    childLinks: [
+      { name: "Haircuts", path: "/services/haircuts" },
+      { name: "Colouring", path: "/services/colouring" },
+      { name: "Styling", path: "/services/styling" },
+    ],
+  },
+  { name: "Contact", path: "/contact" },
+];
+
+const meta: Meta<typeof DeepExpandingMenu> = {
+  title: "Molecules/DeepExpandingMenu",
+  component: DeepExpandingMenu,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "nav", "ul", "ol"],
+      description: "Root element tag",
+      table: { category: "Basic" },
+    },
+    navLinks: { table: { disable: true } },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    tag: "nav",
+    navLinks,
+  },
+  parameters: {
+    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.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DeepExpandingMenu>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { DeepExpandingMenu },
+    setup() {
+      return { args };
+    },
+    template: `<DeepExpandingMenu v-bind="args" style="padding: 4rem;" />`,
+  }),
+};
+
+export const CustomColours: Story = {
+  render: (args) => ({
+    components: { DeepExpandingMenu },
+    setup() {
+      return { 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;"
+      />
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Overriding the public tokens via inline `--deep-expanding-menu-*` custom properties.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,92 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DeepExpandingMenu from "../DeepExpandingMenu.vue";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+const defaultNavLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Services",
+    childLinksTitle: "Our services",
+    childLinks: [
+      { name: "Haircuts", path: "/services/haircuts" },
+      { name: "Colouring", path: "/services/colouring" },
+    ],
+  },
+  { name: "Contact", path: "/contact" },
+];
+
+describe("DeepExpandingMenu", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders a <nav> by default", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("nav");
+  });
+
+  it("renders the given tag", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, {
+      props: { navLinks: defaultNavLinks, tag: "div" },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("renders a direct link for items with a path", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: defaultNavLinks } });
+    const links = wrapper.findAll(".navigation-link");
+    expect(links.map((l) => l.text())).toEqual(["Home", "Contact"]);
+  });
+
+  it("renders a toggle group for items with childLinks", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find(".navigation-group-toggle").text()).toContain("Services");
+  });
+
+  it("renders each child link inside the group panel", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: defaultNavLinks } });
+    const childLinks = wrapper.findAll(".navigation-group-link");
+    expect(childLinks.map((l) => l.text())).toEqual(["Haircuts", "Colouring"]);
+  });
+
+  it("renders the childLinksTitle heading", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find(".navigation-group-panel h4").text()).toBe("Our services");
+  });
+
+  it("gives each group toggle a unique popovertarget", async () => {
+    const navLinks: ResponsiveHeaderNavItem[] = [
+      { name: "A", childLinksTitle: "A", childLinks: [{ name: "A1", path: "/a1" }] },
+      { name: "B", childLinksTitle: "B", childLinks: [{ name: "B1", path: "/b1" }] },
+    ];
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks } });
+    const toggles = wrapper.findAll(".navigation-group-toggle");
+    const targets = toggles.map((t) => t.attributes("popovertarget"));
+    expect(new Set(targets).size).toBe(2);
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, {
+      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["custom-class"] },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("resets classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, {
+      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["initial-class"] },
+    });
+    expect(wrapper.classes()).toContain("initial-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
+    expect(wrapper.classes()).not.toContain("initial-class");
+    expect(wrapper.classes()).toContain("updated-class");
+  });
+});

package/app/components/02.molecules/navigation/deep-expanding-menu/tests/__snapshots__/DeepExpandingMenu.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DeepExpandingMenu > renders correct HTML structure 1`] = `
+"<nav class="deep-expanding-menu">
+  <div class="inner"><a href="/" class="navigation-link">Home</a>
+    <div class="navigation-group" style="--_anchor-name: --anchor-v-0-0-1;"><button popovertarget="popovertarget-v-0-0-1" class="navigation-group-toggle"><span>Services</span><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></button>
+      <div id="popovertarget-v-0-0-1" class="navigation-group-panel" popover="" role="menu">
+        <h4 class="page-heading-4 mb-6">Our services</h4>
+        <ul class="navigation-group-list">
+          <li class="navigation-group-item"><a href="/services/haircuts" class="navigation-group-link">Haircuts</a></li>
+          <li class="navigation-group-item"><a href="/services/colouring" class="navigation-group-link">Colouring</a></li>
+        </ul>
+      </div>
+    </div><a href="/contact" class="navigation-link">Contact</a>
+  </div>
+</nav>"
+`;

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

@@ -0,0 +1,40 @@
+# DeepExpandingMenuClassic — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--deep-expanding-menu-classic-gap` | `1.2rem` | Gap on the root grid |
+| `--deep-expanding-menu-classic-item-gap` | `2.4rem` | Gap between top-level items |
+| `--deep-expanding-menu-classic-link-border-width` | `0.2rem` | Bottom border width on links and group toggles |
+| `--deep-expanding-menu-classic-link-padding-block` | `0.8rem` | Vertical padding on links and group toggles |
+| `--deep-expanding-menu-classic-link-border-colour-hover` | `light-dark(var(--blue-10), var(--slate-00))` | Bottom border colour on hover/focus |
+| `--deep-expanding-menu-classic-icon-size` | `1.2rem` | Caret icon size |
+| `--deep-expanding-menu-classic-panel-offset-top` | `4rem` | Panel offset from the toggle |
+| `--deep-expanding-menu-classic-panel-width` | `20rem` | Panel width below the `768px` breakpoint |
+| `--deep-expanding-menu-classic-panel-width-tablet` | `40rem` | Panel width from `768px` |
+| `--deep-expanding-menu-classic-panel-width-desktop` | `60rem` | Panel width from `1024px` |
+| `--deep-expanding-menu-classic-panel-background-colour` | `white` | Panel background |
+| `--deep-expanding-menu-classic-panel-border-width` | `0.1rem` | Panel border width |
+| `--deep-expanding-menu-classic-panel-border-colour` | `black` | Panel border colour |
+| `--deep-expanding-menu-classic-panel-border-radius` | `1.2rem` | Panel corner radius |
+| `--deep-expanding-menu-classic-panel-shadow` | `0 0 1rem rgba(0, 0, 0, 0.1)` | Panel box-shadow |
+| `--deep-expanding-menu-classic-panel-padding` | `1.2rem` | Panel padding |
+| `--deep-expanding-menu-classic-panel-heading-colour` | `var(--slate-10)` | `childLinksTitle` heading colour inside the panel |
+| `--deep-expanding-menu-classic-panel-list-gap` | `1.2rem` | Gap between child link grid items |
+| `--deep-expanding-menu-classic-group-link-colour` | `var(--slate-10)` | Child link text colour |
+| `--deep-expanding-menu-classic-group-link-border-colour-hover` | `var(--slate-10)` | Child link bottom border colour on hover/focus |
+
+```css
+.my-page {
+  --deep-expanding-menu-classic-panel-background-colour: #1a1a1a;
+  --deep-expanding-menu-classic-panel-border-colour: transparent;
+  --deep-expanding-menu-classic-group-link-colour: white;
+}
+```
+
+Or scope to a single instance via `styleClassPassthrough`:
+
+```vue
+<DeepExpandingMenuClassic style-class-passthrough="main-nav">...</DeepExpandingMenuClassic>
+```