srcdev-nuxt-components 9.3.6 → 9.3.8

package/.claude/skills/qa-panel.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-A collapsible panel that lets you toggle component props live on a page — without touching the component or breaking the visual layout. Uses a native `<details>`/`<summary>` so it takes up no space when collapsed. Every page under `app/pages/ui/` in this library is a demo-only page already, so the panel always renders there — no `isDev` gate needed. If you add one to a page in a consuming app that also serves real production traffic, gate it behind that app's own dev/staging check.
+A collapsible panel that lets you toggle component props live on a page — without touching the component or breaking the visual layout. Uses a native `<details>`/`<summary>` so it takes up no space when collapsed. This library no longer ships its own demo pages (`app/pages/`) — component demos live entirely in Storybook now, which has its own live prop-toggling via args/controls, so this panel isn't needed there. It's still useful in a **consuming app's own pages**: gate it behind that app's dev/staging check unless the page is genuinely demo-only.
 
 ## Structure
 
@@ -218,7 +218,7 @@ Scope inside your page body class (e.g. `.my-page`) so styles don't bleed. The p
 
 ## Notes
 
-- **Consuming apps on real production traffic**: if the page hosting the panel isn't demo-only (unlike everything under `app/pages/ui/` in this library), gate the panel with that app's own dev/staging check, e.g. `v-if="isDev"` with `const isDev = import.meta.dev;`. `import.meta.dev` is `false` in production builds, so the gated block is tree-shaken with no runtime cost.
+- **Consuming apps on real production traffic**: if the page hosting the panel isn't demo-only, gate the panel with that app's own dev/staging check, e.g. `v-if="isDev"` with `const isDev = import.meta.dev;`. `import.meta.dev` is `false` in production builds, so the gated block is tree-shaken with no runtime cost.
 - **Consuming apps**: The active chip color (`oklch(55% 0.18 240)`) is a neutral blue. Replace with a brand accent token if preferred: `background: var(--color-brand-accent)`.
 - **Panel placement**: Outside any `overflow: hidden` or clipping container, otherwise the panel may be clipped or push layout unexpectedly. Placing it as a direct sibling of the component row works well.
 - **Computed CSS vars**: When a prop controls a CSS custom property (e.g. max-height tiers), use a `computed` that returns a style object and bind it with `:style` on the component wrapper:

package/.vscode/srcdev-component-breadcrumb.code-snippets

@@ -0,0 +1,14 @@
+{
+  "SRCDEV Breadcrumb": {
+    "description": "Breadcrumb trail — items without a `to` render as plain current-page text",
+    "scope": "vue,html",
+    "body": [
+      "<Breadcrumb",
+      "  :items=\"[",
+      "    { label: '$1Services', to: '$2/services' },",
+      "    { label: '$3${TM_FILENAME_BASE}' },",
+      "  ]\"",
+      "/>"
+    ]
+  }
+}

package/.vscode/srcdev-component-service-detail.code-snippets

@@ -0,0 +1,49 @@
+{
+  "SRCDEV ServiceDetail": {
+    "description": "ServiceDetail full page — hero banner, content, sticky sidebar, closing CTA",
+    "scope": "vue,html",
+    "body": [
+      "<ServiceDetail",
+      "  :service-data=\"$1service\"",
+      "  location=\"$2Mobile — across Bath\"",
+      "  :related-services=\"$3relatedServices\"",
+      ">",
+      "  <template #book-cta>",
+      "    <button type=\"button\">$4Book Now</button>",
+      "  </template>",
+      "  <template #sidebar-note>",
+      "    $5",
+      "  </template>",
+      "  <template #final-cta>",
+      "    <button type=\"button\">$6Book Now</button>",
+      "  </template>",
+      "</ServiceDetail>"
+    ]
+  },
+  "SRCDEV ServiceDetail Custom Breadcrumb": {
+    "description": "ServiceDetail with explicit breadcrumb routes instead of the auto-built category/title trail",
+    "scope": "vue,html",
+    "body": [
+      "<ServiceDetail",
+      "  :service-data=\"$1service\"",
+      "  :breadcrumb-items=\"[",
+      "    { label: '$2Services', to: '$3/services' },",
+      "    { label: '$4${TM_FILENAME_BASE}' },",
+      "  ]\"",
+      ">",
+      "  <template #book-cta>",
+      "    <button type=\"button\">$5Book Now</button>",
+      "  </template>",
+      "</ServiceDetail>"
+    ]
+  },
+  "SRCDEV ServiceDetail Related Service Link Slot": {
+    "description": "ServiceDetail related-service scoped slot — wraps each related item in a real link",
+    "scope": "vue,html",
+    "body": [
+      "<template #related-service=\"{ service }\">",
+      "  <NuxtLink :to=\"`/services/${service.slug}`\">$1{{ service.title }}</NuxtLink>",
+      "</template>"
+    ]
+  }
+}

package/.vscode/srcdev-component-services-card.code-snippets

@@ -0,0 +1,108 @@
+{
+  "SRCDEV ServicesCard Basic": {
+    "description": "ServicesCard basic usage with actions slot",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard :service-data=\"$1service\">",
+      "  <template #actions=\"{ serviceData }\">",
+      "    <InputButtonCore",
+      "      variant=\"secondary\"",
+      "      :button-text=\"`More about ${serviceData.title}`\"",
+      "      :href=\"`/services/${serviceData.slug}`\"",
+      "    >",
+      "      <template #right>",
+      "        <Icon name=\"mdi:arrow-right\" class=\"icon\" />",
+      "      </template>",
+      "    </InputButtonCore>",
+      "  </template>",
+      "</ServicesCard>"
+    ]
+  },
+  "SRCDEV ServicesCard Whole Card Clickable": {
+    "description": "ServicesCard with href and no actions slot — whole card is clickable",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard :service-data=\"$1service\" :href=\"`/services/${$1service.slug}`\" />"
+    ]
+  },
+  "SRCDEV ServicesCard With Config Overrides": {
+    "description": "ServicesCard with eyebrowConfig/heroConfig overrides",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard",
+      "  :service-data=\"$1service\"",
+      "  :eyebrow-config=\"{ fontSize: '$2small' }\"",
+      "  :hero-config=\"{ tag: '$3h3', fontSize: '$4title' }\"",
+      ">",
+      "  <template #actions=\"{ serviceData }\">",
+      "    <InputButtonCore variant=\"secondary\" button-text=\"$5Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
+      "  </template>",
+      "</ServicesCard>"
+    ]
+  },
+  "SRCDEV ServicesCard With Custom Meta Row": {
+    "description": "ServicesCard with custom duration/price slot content (e.g. icons)",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCard :service-data=\"$1service\">",
+      "  <template #duration=\"{ serviceData }\">",
+      "    <Icon name=\"mdi:clock-time-four-outline\" class=\"icon\" />",
+      "    <span>{{ serviceData.duration }}</span>",
+      "  </template>",
+      "  <template #price=\"{ serviceData }\">",
+      "    <Icon name=\"mdi:currency-gbp\" class=\"icon\" />",
+      "    <span>From {{ serviceData.price }}</span>",
+      "  </template>",
+      "  <template #actions=\"{ serviceData }\">",
+      "    <InputButtonCore variant=\"secondary\" button-text=\"$2Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
+      "  </template>",
+      "</ServicesCard>"
+    ]
+  },
+  "SRCDEV ServicesCard CSS Override": {
+    "description": "CSS override scaffold for ServicesCard — scope to a page or section class. See CONSUMER-STYLING.md for the full token list.",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .services-card {",
+      "    /* Public tokens — could also be set globally on :root instead */",
+      "    /* Interaction states — only visible in whole-card-clickable mode (is-clickable) */",
+      "    --services-card-border-radius: ;",
+      "    --services-card-border-width: ;",
+      "    --services-card-border-colour: ;",
+      "    --services-card-border-colour-hover: ;",
+      "    --services-card-outline-width: ;",
+      "    --services-card-outline-colour: ;",
+      "    --services-card-outline-colour-hover: ;",
+      "    --services-card-outline-offset: ;",
+      "    --services-card-outline-offset-hover: ;",
+      "",
+      "    --services-card-gap: ;",
+      "    --image-wrapper-aspect-ratio: ;",
+      "    --image-wrapper-border-radius: ;",
+      "    --image-wrapper-padding-block: ;",
+      "    --image-wrapper-padding-inline: ;",
+      "    --image-wrapper-border-image-zoom-transform: ;",
+      "    --details-wrapper-grid-gap: ;",
+      "    --details-wrapper-padding-block: ;",
+      "    --details-wrapper-padding-inline: ;",
+      "    --description-padding-block: ;",
+      "    --description-line-height: ;",
+      "    --description-line-clamp: ;",
+      "    --meta-padding-block: ;",
+      "    --meta-text-transform: ;",
+      "    --footer-padding-block: ;",
+      "    --footer-wrapper-grid-gap: ;",
+      "",
+      "    /* Local-only tokens — page-scoped override only, no :root fallback */",
+      "    --_eyebrow-text-padding-block: ;",
+      "    --_hero-text-padding-block: ;",
+      "    --_description-text-colour: ;",
+      "    --_meta-border-colour: ;",
+      "    --_meta-text-colour: ;",
+      "    --_meta-font-size: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/app/components/01.atoms/content-wrappers/docs-pages/ContentDocs.vue

@@ -5,7 +5,8 @@
         <slot name="docsContent"></slot>
       </div>
       <div v-if="hasDocsNav" class="docs-nav">
-        <ExpandingPanel
+        <component
+          :is="panelComponent"
           v-model="docsNavPanelOpen"
           :name="docsNavPanelName"
           :animation-duration="200"
@@ -37,10 +38,11 @@
               </ul>
             </nav>
           </template>
-        </ExpandingPanel>
+        </component>
       </div>
       <div v-if="hasDocsPageNav" class="docs-page-nav">
-        <ExpandingPanel
+        <component
+          :is="panelComponent"
           v-model="docsPageNavPanelOpen"
           :name="docsPageNavPanelName"
           :animation-duration="200"
@@ -72,7 +74,7 @@
               </ul>
             </nav>
           </template>
-        </ExpandingPanel>
+        </component>
       </div>
     </div>
   </component>
@@ -80,6 +82,8 @@
 
 <script setup lang="ts">
 import type { DocsNavItem } from "~/types/components";
+import ExpandingPanel from "~/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue";
+import ExpandingPanelClassic from "~/components/02.molecules/expandable/expanding-panel-classic/ExpandingPanelClassic.vue";
 
 interface Props {
   tag?: "div" | "section" | "article" | "main";
@@ -87,6 +91,7 @@ interface Props {
   docsPageNavItems?: DocsNavItem[];
   docsNavLabel?: string;
   docsPageNavLabel?: string;
+  panelVariant?: "modern" | "classic";
   styleClassPassthrough?: string | string[];
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -95,9 +100,16 @@ const props = withDefaults(defineProps<Props>(), {
   docsPageNavItems: () => [],
   docsNavLabel: "Navigation",
   docsPageNavLabel: "On this page",
+  // Defaults to "classic" — the docs/admin nav toggle relies on contentIsOnTop on mobile, and
+  // ExpandingPanel's ::details-content-based positioning silently fails on WebKit (Safari/iOS),
+  // making the nav unreachable there. See AccordianCore's own variant prop and CLAUDE.md
+  // pitfall #19 for the full mechanism. "modern" is opt-in.
+  panelVariant: "classic",
   styleClassPassthrough: () => [],
 });
 
+const panelComponent = computed(() => (props.panelVariant === "modern" ? ExpandingPanel : ExpandingPanelClassic));
+
 const activeNavItem = defineModel<string | undefined>("activeNavItem");
 const activePageNavItem = defineModel<string | undefined>("activePageNavItem");
 
@@ -238,12 +250,9 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
         align-items: start;
 
         @container contentDocs (width >= 1024px) {
-          .expanding-panel {
-            & .expanding-panel-details {
-              .expanding-panel-summary {
-                cursor: default;
-              }
-            }
+          .expanding-panel-summary,
+          .expanding-panel-classic-summary {
+            cursor: default;
           }
         }
       }
@@ -256,12 +265,9 @@ const docsPageNavPanelName = computed(() => (isMobile.value ? panelGroupId : `${
         align-items: start;
 
         @container contentDocs (width >= 768px) {
-          .expanding-panel {
-            & .expanding-panel-details {
-              .expanding-panel-summary {
-                cursor: default;
-              }
-            }
+          .expanding-panel-summary,
+          .expanding-panel-classic-summary {
+            cursor: default;
           }
         }
       }

package/app/components/01.atoms/navigation/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,94 @@
+<template>
+  <nav class="breadcrumb" :class="[elementClasses]" aria-label="Breadcrumb">
+    <ol class="breadcrumb__list">
+      <li v-for="(item, index) in items" :key="`${item.label}-${index}`" class="breadcrumb__item">
+        <NuxtLink v-if="item.to" :to="item.to" class="breadcrumb__link">{{ item.label }}</NuxtLink>
+        <span v-else class="breadcrumb__label" :aria-current="index === items.length - 1 ? 'page' : undefined">{{
+          item.label
+        }}</span>
+        <span v-if="index < items.length - 1" class="breadcrumb__separator" aria-hidden="true">{{ separator }}</span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import type { BreadcrumbItem } from "~/types/components/breadcrumb";
+
+interface Props {
+  items: BreadcrumbItem[];
+  separator?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  separator: "/",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .breadcrumb {
+    --_font-size: var(--breadcrumb-font-size, 1.3rem);
+    --_gap: var(--breadcrumb-gap, 0.8rem);
+    --_text-transform: var(--breadcrumb-text-transform, uppercase);
+    --_letter-spacing: var(--breadcrumb-letter-spacing, 0.05em);
+    --_colour: var(--breadcrumb-colour, currentColor);
+    --_colour-current: var(--breadcrumb-colour-current, var(--breadcrumb-colour, currentColor));
+    --_link-decoration-hover: var(--breadcrumb-link-decoration-hover, underline);
+
+    font-size: var(--_font-size);
+    text-transform: var(--_text-transform);
+    letter-spacing: var(--_letter-spacing);
+
+    .breadcrumb__list {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--_gap);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .breadcrumb__item {
+      display: flex;
+      align-items: center;
+      gap: var(--_gap);
+    }
+
+    .breadcrumb__link,
+    .breadcrumb__label {
+      color: var(--_colour);
+    }
+
+    .breadcrumb__label[aria-current="page"] {
+      color: var(--_colour-current);
+    }
+
+    .breadcrumb__link {
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: var(--_link-decoration-hover);
+      }
+    }
+
+    .breadcrumb__separator {
+      color: var(--_colour);
+      opacity: 0.6;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/navigation/breadcrumb/CONSUMER-STYLING.md

@@ -0,0 +1,32 @@
+# Breadcrumb — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--breadcrumb-font-size` | `1.3rem` | Font size of the whole trail |
+| `--breadcrumb-gap` | `0.8rem` | Gap between an item's label and its separator, and between items |
+| `--breadcrumb-text-transform` | `uppercase` | Text transform of the whole trail |
+| `--breadcrumb-letter-spacing` | `0.05em` | Letter spacing of the whole trail |
+| `--breadcrumb-colour` | `currentColor` | Colour of links, separators, and non-current labels |
+| `--breadcrumb-colour-current` | `currentColor` | Colour of the current-page item (the one without a `to`) |
+| `--breadcrumb-link-decoration-hover` | `underline` | `text-decoration` on link hover/focus |
+
+```css
+.breadcrumb {
+  --breadcrumb-colour: white;
+  --breadcrumb-colour-current: var(--colour-text-accent);
+}
+```
+
+## Text content — props, not CSS
+
+`items` and `separator` are props. There is no hardcoded copy to override in CSS.
+
+## Notes
+
+- An item renders as a `NuxtLink` when it has a `to`, otherwise as `<span aria-current="page">` —
+  omit `to` on whichever item represents the current page (usually the last one).
+- The separator (`aria-hidden="true"`) is only rendered between items, never after the last one.
+- `--breadcrumb-colour` is what `ServiceDetail` overrides internally (to `white` by default) so
+  the breadcrumb reads over its hero image — see `ServiceDetail`'s `CONSUMER-STYLING.md`.

package/app/components/01.atoms/navigation/breadcrumb/stories/Breadcrumb.stories.ts

@@ -0,0 +1,87 @@
+import Breadcrumb from "../Breadcrumb.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { BreadcrumbItem } from "~/types/components/breadcrumb";
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: "Atoms/Navigation/Breadcrumb",
+  component: Breadcrumb,
+  argTypes: {
+    items: {
+      control: "object",
+      description: "Ordered list of { label, to? } — items without `to` render as plain text (typically the last, current-page item)",
+    },
+    separator: {
+      control: "text",
+      description: "Character or short string rendered between items",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+    },
+  },
+  args: {
+    separator: "/",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renders a `<nav aria-label=\"Breadcrumb\">` trail from an items array. Any item with a `to` renders as a NuxtLink; an item without one renders as plain text marked `aria-current=\"page\"` — routing decisions stay with the consumer, same as the rest of this library.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const items: BreadcrumbItem[] = [
+  { label: "Services", to: "/services" },
+  { label: "Balayage" },
+];
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  args: { items },
+  render: (args) => ({
+    components: { Breadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `<Breadcrumb v-bind="args" />`,
+  }),
+};
+
+export const ThreeLevels: Story = {
+  name: "Three Levels",
+  args: {
+    items: [
+      { label: "Home", to: "/" },
+      { label: "Services", to: "/services" },
+      { label: "Balayage" },
+    ],
+  },
+  render: (args) => ({
+    components: { Breadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `<Breadcrumb v-bind="args" />`,
+  }),
+};
+
+export const CustomSeparator: Story = {
+  name: "Custom Separator",
+  args: { items, separator: ">" },
+  render: (args) => ({
+    components: { Breadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `<Breadcrumb v-bind="args" />`,
+  }),
+};

package/app/components/01.atoms/navigation/breadcrumb/tests/Breadcrumb.spec.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import Breadcrumb from "../Breadcrumb.vue";
+import type { BreadcrumbItem } from "~/types/components/breadcrumb";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const items: BreadcrumbItem[] = [
+  { label: "Services", to: "/services" },
+  { label: "Balayage", to: "/services/balayage" },
+  { label: "Highlights" },
+];
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("Breadcrumb", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders a nav with the Breadcrumb aria-label", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    expect(wrapper.attributes("aria-label")).toBe("Breadcrumb");
+  });
+
+  it("renders every item's label", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    expect(wrapper.text()).toContain("Services");
+    expect(wrapper.text()).toContain("Balayage");
+    expect(wrapper.text()).toContain("Highlights");
+  });
+
+  it("renders a link for items with a to prop", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    const links = wrapper.findAll("a");
+    expect(links.length).toBe(2);
+    expect(links[0]?.text()).toBe("Services");
+    expect(links[1]?.text()).toBe("Balayage");
+  });
+
+  it("renders the last item without a to prop as plain text marked as current page", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    const current = wrapper.find('[aria-current="page"]');
+    expect(current.exists()).toBe(true);
+    expect(current.text()).toBe("Highlights");
+  });
+
+  it("does not render a separator after the last item", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items } });
+    const separators = wrapper.findAll(".breadcrumb__separator");
+    expect(separators.length).toBe(items.length - 1);
+  });
+
+  it("uses a custom separator", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items, separator: ">" } });
+    expect(wrapper.find(".breadcrumb__separator").text()).toBe(">");
+  });
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, { props: { items, styleClassPassthrough: "custom-class" } });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, {
+      props: { items, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(Breadcrumb, {
+      props: { items, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/01.atoms/navigation/breadcrumb/tests/__snapshots__/Breadcrumb.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Breadcrumb > renders correct HTML structure 1`] = `
+"<nav class="breadcrumb" aria-label="Breadcrumb">
+  <ol class="breadcrumb__list">
+    <li class="breadcrumb__item"><a href="/services" class="breadcrumb__link">Services</a><span class="breadcrumb__separator" aria-hidden="true">/</span></li>
+    <li class="breadcrumb__item"><a href="/services/balayage" class="breadcrumb__link">Balayage</a><span class="breadcrumb__separator" aria-hidden="true">/</span></li>
+    <li class="breadcrumb__item"><span class="breadcrumb__label" aria-current="page">Highlights</span>
+      <!--v-if-->
+    </li>
+  </ol>
+</nav>"
+`;

package/app/components/02.molecules/expandable/accordian/AccordianCore.vue

@@ -34,11 +34,15 @@ interface Props {
   styleClassPassthrough?: string | string[];
 }
 
+// Defaults to "classic" (not "modern") — ExpandingPanel's animation/positioning relies on
+// ::details-content, which WebKit (Safari/iOS) doesn't support (see ExpandingPanel's own dev-mode
+// warning and CLAUDE.md pitfall #19). "modern" is opt-in for consumers who've confirmed it works
+// for their audience, not the safe default.
 const props = withDefaults(defineProps<Props>(), {
   name: undefined,
   itemCount: 0,
   animationDuration: 300,
-  variant: "modern",
+  variant: "classic",
   styleClassPassthrough: () => [],
 });