srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/03.organisms/site-header/SiteHeader.vue

@@ -1,8 +1,8 @@
 <template>
-  <PageRow tag="div" :variant="pageRowVariant" :style-class-passthrough="styleClassPassthrough">
+  <PageRow tag="div" class="site-header-row" :variant="pageRowVariant" :style-class-passthrough="styleClassPassthrough">
     <template #default>
       <header class="site-header">
-        <nav class="home-navigation" :aria-label="homeNavAriaLabel">
+        <nav class="site-header-home-nav" :aria-label="homeNavAriaLabel">
           <SkipLinks>
             <template #homeLink>
               <slot name="branding"></slot>
@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ResponsiveHeaderProp } from "../../../types/components";
+import type { ResponsiveHeaderProp } from "~/types/components";
 import PageRow from "../../01.atoms/page-row/PageRow.vue";
 import SkipLinks from "../../01.atoms/navigation/skip-links/SkipLinks.vue";
 import ResponsiveHeader from "../responsive-header/ResponsiveHeader.vue";
@@ -75,7 +75,7 @@ withDefaults(defineProps<Props>(), {
   pageRowVariant: "content",
   styleClassPassthrough: () => [],
   navStyleClassPassthrough: () => [],
-  homeNavAriaLabel: "Home Navigation",
+  homeNavAriaLabel: "Home navigation",
   mainNavAriaLabel: "Main navigation",
   secondaryNavAriaLabel: "Secondary navigation",
   overflowMenuAriaLabel: "Overflow navigation menu",
@@ -88,32 +88,27 @@ const slots = useSlots();
 
 <style lang="css">
 @layer components {
-  /* ─── Public CSS tokens ─────────────────────────────────────────────────
-     Override on the consumer's scope class (via styleClassPassthrough).
-     Nested --responsive-header-* / --overflow-nav-* tokens still apply —
-     forward a scope class via navStyleClassPassthrough to reach them.
-
-     --site-header-gap             (default: 2.4rem)
-     --site-header-padding-inline  (default: 2.4rem)
-     --site-header-padding-block   (default: 0px)
-     --site-header-bg              (default: transparent)
-     --site-header-position        (default: static)
-     --site-header-sticky-offset   (default: 0px)
-     --site-header-z-index         (default: 9)
-  ──────────────────────────────────────────────────────────────────────── */
+  .site-header-row {
+    position: var(--site-header-position, static);
+    top: var(--site-header-sticky-offset, 0px);
+    z-index: var(--site-header-z-index, 9);
+  }
 
   .site-header {
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: fit-content(var(--site-header-branding-max-width, 50%)) minmax(0, 1fr);
     align-items: center;
     gap: var(--site-header-gap, 2.4rem);
     padding-block: var(--site-header-padding-block, 0px);
     padding-inline: var(--site-header-padding-inline, 2.4rem);
     background-color: var(--site-header-bg, transparent);
-    position: var(--site-header-position, static);
-    top: var(--site-header-sticky-offset, 0px);
-    z-index: var(--site-header-z-index, 9);
     width: 100%;
+    min-inline-size: 0;
+
+    .site-header-home-nav {
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
+    }
   }
 }
 </style>

package/app/components/03.organisms/site-header/stories/SiteHeader.stories.ts

@@ -1,5 +1,8 @@
+import { ref } from "vue";
 import SiteHeader from "../SiteHeader.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { MediaCanvas } from "~/types/components";
 
 const meta: Meta<typeof SiteHeader> = {
   title: "Organisms/Site Header",
@@ -34,6 +37,16 @@ const meta: Meta<typeof SiteHeader> = {
       control: "object",
       description: "Extra CSS classes applied to the nested ResponsiveHeader (targets its own token API)",
     },
+    homeNavAriaLabel: {
+      control: "text",
+      description: "Accessible name of the branding nav landmark",
+      table: { category: "Accessibility", defaultValue: { summary: "Home navigation" } },
+    },
+    overflowButtonLabel: {
+      control: "text",
+      description: "Accessible name of the burger button (forwarded to ResponsiveHeader)",
+      table: { category: "Accessibility", defaultValue: { summary: "More navigation" } },
+    },
   },
   args: {
     pageRowVariant: "content",
@@ -43,6 +56,16 @@ const meta: Meta<typeof SiteHeader> = {
     styleClassPassthrough: [],
     navStyleClassPassthrough: [],
   },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Site header row: a `#branding` slot inside a skip-links nav, then `ResponsiveHeader` for the main navigation, all inside a `PageRow`. " +
+          "Props: `responsiveNavLinks` (nav groups), `pageRowVariant`, collapse options forwarded to `ResponsiveHeader`, and label props for every landmark and button. " +
+          "Slots: `branding`, `secondaryNavigation`. Make it sticky with `--site-header-position: sticky` on the passthrough class.",
+      },
+    },
+  },
 };
 
 export default meta;
@@ -133,3 +156,118 @@ export const WithSecondaryNavigationSlot: Story = {
     `,
   }),
 };
+
+const brandingTemplate = `<a href="/" style="color:inherit;text-decoration:none;font-weight:600">{{ brand }}</a>`;
+
+export const Sticky: Story = {
+  name: "Sticky (--site-header-position)",
+  args: {
+    styleClassPassthrough: ["site-header-sticky-demo"],
+    responsiveNavLinks: {
+      main: [
+        { name: "Home", path: "/" },
+        { name: "About", path: "/about" },
+        { name: "Contact", path: "/contact" },
+      ],
+    },
+  },
+  render: (args) => ({
+    components: { SiteHeader },
+    setup() {
+      return { args, brand: "Brand" };
+    },
+    template: `
+      <div>
+        <SiteHeader
+          v-bind="args"
+          style="--site-header-position: sticky; --site-header-bg: var(--theme-surface-subtle); --site-header-padding-block: 1.2rem;"
+        >
+          <template #branding>${brandingTemplate}</template>
+        </SiteHeader>
+        <div style="padding: 2.4rem; display: grid; gap: 1.6rem;">
+          <p v-for="n in 40" :key="n" style="margin: 0;">Scroll the page: the header stays pinned to the top. Paragraph {{ n }}.</p>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      story: { inline: false, height: "480px" },
+      description: {
+        story:
+          "`--site-header-position: sticky` on the root. Until 2026-10-21 the sticky rule sat on the inner `<header>`, whose parent is exactly its height, so it never stuck; it now sits on the outer `.site-header-row`.",
+      },
+    },
+  },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    responsiveNavLinks: {
+      firstNav: [
+        { name: "Dienstleistungsübersicht", path: "/a" },
+        {
+          name: "Behandlungen und Pflegeangebote",
+          childLinksTitle: "Alle Behandlungen in Northtown",
+          childLinks: [
+            { name: "Supercalifragilisticexpialidociousandthensome", path: "/b1" },
+            { name: "🙂 Emoji link", path: "/b2" },
+            { name: "<b>Not bold</b>", path: "/b3" },
+          ],
+        },
+        { name: "مرحبا", path: "/c" },
+        { name: "x", path: "/d" },
+        ...Array.from({ length: 8 }, (_, i) => ({ name: `Item ${i + 1}`, path: `/item-${i + 1}` })),
+      ],
+      secondNav: [
+        { name: "Contact", path: "/contact" },
+        { name: "Contact", path: "/contact" },
+      ],
+    },
+    collapseAtMainNavIntersection: true,
+  },
+  render: (args) => ({
+    components: { SiteHeader },
+    setup() {
+      return { args, brand: "Alex Morgan Hair, Beauty and Wellbeing Studio of Northtown" };
+    },
+    template: `
+      <SiteHeader v-bind="args">
+        <template #branding>${brandingTemplate}</template>
+      </SiteHeader>
+    `,
+  }),
+  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; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    initialCanvas: "tabletCanvas",
+    docs: {
+      story: { inline: false, height: "520px" },
+      description: {
+        story:
+          "A long brand name and 14 hostile nav items at every `CanvasSwitcher` width, with `collapseAtMainNavIntersection` on. Check that: the brand column takes at most half the row " +
+          "(`--site-header-branding-max-width`) and wraps instead of squeezing the nav to nothing; the nav collapses into the burger rather than overflowing; " +
+          "the long German, emoji, `<b>` and right-to-left labels render as text and wrap in the dropdown; the duplicate `Contact` links both render. " +
+          "Set `responsiveNavLinks` to `{}` in Controls: the header shows just the brand.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/site-header/tests/SiteHeader.spec.ts

@@ -1,7 +1,7 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import SiteHeader from "../SiteHeader.vue";
-import type { ResponsiveHeaderProp } from "../../../../types/components";
+import type { ResponsiveHeaderProp } from "~/types/components";
 
 const navLinks: ResponsiveHeaderProp = {
   firstNav: [{ name: "Home", path: "/" }],
@@ -21,39 +21,49 @@ const responsiveHeaderStub = {
   template: `<div class="responsive-header-stub"><slot name="secondaryNavigation"></slot></div>`,
 };
 
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountHeader = async (options: { props?: Record<string, unknown>; slots?: Record<string, string> } = {}) => {
+  const wrapper = await mountSuspended(SiteHeader, {
+    ...options,
+    global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+  });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("SiteHeader", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
-    });
+    const wrapper = await mountHeader();
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders the branding slot inside SkipLinks' homeLink slot", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
+    const wrapper = await mountHeader({
       slots: { branding: "<a href='/' class='brand-link'>Brand</a>" },
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
     });
     expect(wrapper.find(".skip-links__home .brand-link").exists()).toBe(true);
   });
 
   it("does not render the secondaryNavigation slot when not provided", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
-    });
+    const wrapper = await mountHeader();
     expect(wrapper.text()).not.toContain("Extra nav");
   });
 
   it("forwards the secondaryNavigation slot through to ResponsiveHeader", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
+    const wrapper = await mountHeader({
       slots: { secondaryNavigation: "<span>Extra nav</span>" },
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
     });
     expect(wrapper.text()).toContain("Extra nav");
   });
 
   it("forwards responsiveNavLinks and other nav props to ResponsiveHeader", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
+    const wrapper = await mountHeader({
       props: {
         responsiveNavLinks: navLinks,
         gapBetweenFirstAndSecondNav: 24,
@@ -61,7 +71,6 @@ describe("SiteHeader", () => {
         allowExpandOnGesture: false,
         navStyleClassPassthrough: ["site-header-nav"],
       },
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
     });
     const responsiveHeader = wrapper.findComponent(responsiveHeaderStub);
     expect(responsiveHeader.props("responsiveNavLinks")).toEqual(navLinks);
@@ -72,32 +81,50 @@ describe("SiteHeader", () => {
   });
 
   it("passes pageRowVariant through to the root PageRow", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
+    const wrapper = await mountHeader({
       props: { pageRowVariant: "full" },
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
     });
-    expect(wrapper.find(".page-row.full").exists()).toBe(true);
+    expect(wrapper.find(".page-row[data-variant=\"full\"]").exists()).toBe(true);
   });
 
   it("defaults pageRowVariant to content", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
-    });
-    expect(wrapper.find(".page-row.content").exists()).toBe(true);
+    const wrapper = await mountHeader();
+    expect(wrapper.find(".page-row[data-variant=\"content\"]").exists()).toBe(true);
   });
 
   it("applies styleClassPassthrough to the root PageRow", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
+    const wrapper = await mountHeader({
       props: { styleClassPassthrough: ["header"] },
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
     });
     expect(wrapper.find(".page-row.header").exists()).toBe(true);
   });
 
-  it("renders correct HTML structure with default props", async () => {
-    const wrapper = await mountSuspended(SiteHeader, {
-      global: { stubs: { ResponsiveHeader: responsiveHeaderStub } },
+  it("puts the sticky hook on the outer row, not the inner header", async () => {
+    const wrapper = await mountHeader({ props: { styleClassPassthrough: ["header"] } });
+    expect(wrapper.classes()).toContain("site-header-row");
+    expect(wrapper.classes()).toContain("header");
+    expect(wrapper.find("header.site-header").classes()).not.toContain("site-header-row");
+  });
+
+  it("labels the branding nav landmark, defaulting to Home navigation", async () => {
+    const fallback = await mountHeader();
+    expect(fallback.find("nav.site-header-home-nav").attributes("aria-label")).toBe("Home navigation");
+
+    const custom = await mountHeader({ props: { homeNavAriaLabel: "Startseite" } });
+    expect(custom.find("nav.site-header-home-nav").attributes("aria-label")).toBe("Startseite");
+  });
+
+  it("renders the brand alone when there are no nav links", async () => {
+    const wrapper = await mountHeader({
+      props: { responsiveNavLinks: {} },
+      slots: { branding: "<a href='/' class='brand-link'>Brand</a>" },
     });
+    expect(wrapper.find(".brand-link").exists()).toBe(true);
+    expect(wrapper.findComponent(responsiveHeaderStub).props("responsiveNavLinks")).toEqual({});
+  });
+
+  it("renders correct HTML structure with default props", async () => {
+    const wrapper = await mountHeader();
     expect(wrapper.html()).toMatchSnapshot();
   });
 });

package/app/components/03.organisms/site-header/tests/__snapshots__/SiteHeader.spec.ts.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SiteHeader > renders correct HTML structure with default props 1`] = `
-"<div class="page-row content">
+"<div class="page-row site-header-row" data-variant="content">
   <header class="site-header">
-    <nav class="home-navigation" aria-label="Home Navigation">
+    <nav class="site-header-home-nav" aria-label="Home navigation">
       <div class="skip-links">
         <div class="skip-links__home"></div>
         <nav class="skip-links__nav" aria-label="Skip navigation"><a href="#main-content" class="skip-links__link">Skip to main content</a><a href="#footer-content" class="skip-links__link">Skip to footer</a></nav>

package/app/types/components/qr-code.d.ts

@@ -5,3 +5,15 @@ export interface QrCodeVariant {
   marker: SVGVariant
   pixel: SVGVariant
 }
+
+export type CaptureQrCodeErrorName =
+  | "NotAllowedError"
+  | "NotFoundError"
+  | "NotSupportedError"
+  | "NotReadableError"
+  | "OverconstrainedError"
+  | "StreamApiNotSupportedError"
+  | "InsecureContextError"
+  | "StreamLoadTimeoutError"
+
+export type CaptureQrCodeErrorMessages = Partial<Record<CaptureQrCodeErrorName | "default", string>>

package/app/utils/graphemes.ts

@@ -0,0 +1,8 @@
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : null;
+
+// User-perceived characters, so a typewriter never shows half an emoji or a stray combining mark.
+export function splitGraphemes(text: string): string[] {
+  if (!segmenter) return Array.from(text);
+  return Array.from(segmenter.segment(text), (segment) => segment.segment);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.18",
+  "version": "9.6.20",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/.claude/skills/components/accordian-core.md

@@ -1,180 +0,0 @@
-# AccordianCore Component
-
-## Overview
-
-`AccordianCore` renders a group of `ExpandingPanel` components (or `ExpandingPanelClassic`, via the `variant` prop). When a shared `name` prop is supplied, the native `<details>` behaviour ensures only one panel can be open at a time. Content is filled via **indexed dynamic slots** — one set per panel, driven by `itemCount`.
-
----
-
-## Dynamic slot pattern
-
-For `itemCount="3"` the following slots exist:
-
-| Slot | Purpose |
-|------|---------|
-| `#accordian-0-summary` | Clickable label for panel 0 |
-| `#accordian-0-icon` | Custom toggle icon for panel 0 (optional) |
-| `#accordian-0-content` | Expandable content for panel 0 |
-| `#accordian-1-summary` | Clickable label for panel 1 |
-| `#accordian-1-icon` | Custom toggle icon for panel 1 (optional) |
-| `#accordian-1-content` | Expandable content for panel 1 |
-| … | … |
-
-**Rules:**
-- Slots are **zero-indexed**: first panel = `accordian-0-*`, last = `accordian-{itemCount - 1}-*`.
-- `accordian-{n}-summary` and `accordian-{n}-content` are the primary slots — always provide these.
-- `accordian-{n}-icon` is optional. When omitted, the default `ExpandingPanel` caret icon is used.
-- Always keep `itemCount` in sync with the number of slot sets you provide.
-
----
-
-## Props reference
-
-| Prop | Type | Default | Notes |
-|------|------|---------|-------|
-| `name` | `string` | `undefined` | Shared `name` passed to every `ExpandingPanel`. When set, native `<details>` grouping means only one panel can be open at a time. Omit for independent panels. |
-| `itemCount` | `number` | `0` | Number of `ExpandingPanel` components to render. |
-| `animationDuration` | `number` | `300` | Expand/collapse animation duration in ms, forwarded to every panel. |
-| `variant` | `"modern" \| "classic"` | `"classic"` | `"classic"` renders each panel as `ExpandingPanelClassic` (`grid-template-rows`-based, animates identically in every browser). `"modern"` renders `ExpandingPanel` instead (`::details-content`-based) — **known not to work correctly on WebKit (Safari/iOS)**, confirmed via real-device testing (2026-08); the animation silently fails and, worse, `contentIsOnTop` positioning never applies there. `"modern"` is opt-in for consumers who've confirmed it works for their audience, not the safe default. Applies to every panel in the group — mixing variants within one `AccordianCore` isn't supported. See [expanding-panel-classic.md](expanding-panel-classic.md) and CLAUDE.md pitfall #19. |
-| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.display-accordian` element. |
-
----
-
-## Usage examples
-
-### Basic accordion (exclusive open)
-
-```vue
-<AccordianCore name="faq" :item-count="3" :animation-duration="300">
-  <template #accordian-0-summary><span>What is your returns policy?</span></template>
-  <template #accordian-0-content>
-    <p>You can return any item within 30 days of purchase.</p>
-  </template>
-
-  <template #accordian-1-summary><span>How long does delivery take?</span></template>
-  <template #accordian-1-content>
-    <p>Standard delivery takes 3–5 working days.</p>
-  </template>
-
-  <template #accordian-2-summary><span>Do you ship internationally?</span></template>
-  <template #accordian-2-content>
-    <p>Yes — we ship to over 40 countries.</p>
-  </template>
-</AccordianCore>
-```
-
-Passing `name="faq"` groups all panels so only one can be open at a time.
-
-### Independent panels (no name — each opens freely)
-
-```vue
-<AccordianCore :item-count="2">
-  <template #accordian-0-summary><span>Panel A</span></template>
-  <template #accordian-0-content><p>Content A</p></template>
-
-  <template #accordian-1-summary><span>Panel B</span></template>
-  <template #accordian-1-content><p>Content B</p></template>
-</AccordianCore>
-```
-
-### Custom icons per panel
-
-```vue
-<AccordianCore :item-count="2">
-  <template #accordian-0-summary><span>Section one</span></template>
-  <template #accordian-0-icon><span>＋</span></template>
-  <template #accordian-0-content><p>Content one</p></template>
-
-  <template #accordian-1-summary><span>Section two</span></template>
-  <template #accordian-1-icon><span>＋</span></template>
-  <template #accordian-1-content><p>Content two</p></template>
-</AccordianCore>
-```
-
-### Modern variant (opt-in, not WebKit-safe)
-
-```vue
-<AccordianCore name="faq" :item-count="2" variant="modern">
-  <template #accordian-0-summary><span>Question one?</span></template>
-  <template #accordian-0-content><p>Answer one.</p></template>
-
-  <template #accordian-1-summary><span>Question two?</span></template>
-  <template #accordian-1-content><p>Answer two.</p></template>
-</AccordianCore>
-```
-
-### Programmatic slot rendering (many items)
-
-```vue
-<AccordianCore :item-count="items.length">
-  <template v-for="(item, i) in items" #[`accordian-${i}-summary`] :key="i">
-    <span>{{ item.title }}</span>
-  </template>
-  <template v-for="(item, i) in items" #[`accordian-${i}-content`] :key="i">
-    <p>{{ item.body }}</p>
-  </template>
-</AccordianCore>
-```
-
----
-
-## CSS custom properties
-
-`AccordianCore` has no `--accordian-*` tokens of its own — its panels are `ExpandingPanel`
-(or `ExpandingPanelClassic`, per `variant`) underneath, so `--expanding-panel-*` tokens apply
-directly. See `CONSUMER-STYLING.md` in the component directory for the full override reference,
-including the `.accordian-item` hook and the variant-dependent root class.
-
-Override in a consuming component or theme block:
-
-| Property | Effect |
-|----------|--------|
-| Applied via `accordian-item` class on each panel | Panels animate `margin-block-end` and `border-radius` alongside the expand transition — duration follows `animationDuration`. |
-
----
-
-## Local style override scaffold
-
-When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
-
-See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
-
-```vue
-<AccordianCore :style-class-passthrough="['my-accordian']" :item-count="3">
-  ...
-</AccordianCore>
-
-<style>
-/* ─── AccordianCore local overrides ────────────────────────────────
-   Colours, borders, geometry only — do not override behaviour.
-   Delete this block if no overrides are needed.
-   ─────────────────────────────────────────────────────────────────── */
-.display-accordian {
-  &.my-accordian {
-    /* Geometry */
-    /* max-width: none; */ /* default is 600px — remove the width cap */
-
-    /* Panel-level overrides via the .accordian-item hook — .expanding-panel-classic is
-       the root class rendered by the default "classic" variant; swap in .expanding-panel
-       if this instance uses variant="modern" */
-    .accordian-item.expanding-panel-classic {
-      /* Border */
-      /* border-block-end: 1px solid currentColor; */
-
-      /* Geometry */
-      /* border-radius: 0.8rem; */
-    }
-  }
-}
-</style>
-```
-
----
-
-## Notes
-
-- `AccordianCore` always passes `style-class-passthrough="['accordian-item']"` to every inner panel — use `.accordian-item` as the hook for per-panel styling overrides.
-- `variant` applies to the whole group — every panel in a given `AccordianCore` renders as the same component. Switching `variant` at runtime swaps every panel's underlying component (via `<component :is>`), which resets each panel's open/closed state.
-- For a single standalone expand/collapse panel, use `ExpandingPanel` (or `ExpandingPanelClassic`) directly instead.
-- Auto-imported in Nuxt — no manual import needed.
-- File: `app/components/02.molecules/expandable/accordian/AccordianCore.vue`