srcdev-nuxt-components 9.3.6 → 9.3.7

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

@@ -35,7 +35,7 @@ For `itemCount="3"` the following slots exist:
 | `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"` | `"modern"` | `"modern"` renders each panel as `ExpandingPanel` (`::details-content`-based, Baseline "newly available" Sept 2025 — the animation itself only runs where `interpolate-size` is supported, Chromium only as of 2026). `"classic"` renders `ExpandingPanelClassic` instead (`grid-template-rows`-based, animates identically in every browser). Applies to every panel in the group — mixing variants within one `AccordianCore` isn't supported. See [expanding-panel-classic.md](expanding-panel-classic.md). |
+| `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. |
 
 ---
@@ -91,10 +91,10 @@ Passing `name="faq"` groups all panels so only one can be open at a time.
 </AccordianCore>
 ```
 
-### Classic variant (animation must run in every browser)
+### Modern variant (opt-in, not WebKit-safe)
 
 ```vue
-<AccordianCore name="faq" :item-count="2" variant="classic">
+<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>
 
@@ -154,10 +154,10 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
     /* Geometry */
     /* max-width: none; */ /* default is 600px — remove the width cap */
 
-    /* Panel-level overrides via the .accordian-item hook — .expanding-panel is the
-       root class rendered by the default "modern" variant; swap in
-       .expanding-panel-classic if this instance uses variant="classic" */
-    .accordian-item.expanding-panel {
+    /* 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; */
 

package/.claude/skills/components/content-docs.md

@@ -17,6 +17,7 @@
 | `docsPageNavItems` | `DocsNavItem[]` | `[]` | Items rendered in the `docsPageNav` panel. Panel omitted entirely when empty. |
 | `docsNavLabel` | `string` | `"Navigation"` | Heading text for the `docsNav` panel's `#summary`. |
 | `docsPageNavLabel` | `string` | `"On this page"` | Heading text for the `docsPageNav` panel's `#summary`. |
+| `panelVariant` | `"modern" \| "classic"` | `"classic"` | Which panel component renders `docsNav`/`docsPageNav`: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit — the mobile nav (which relies on `contentIsOnTop`) becomes unreachable there. See CLAUDE.md pitfall #19. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.content-docs` element. |
 
 `DocsNavItem` (from `~/types/components`):

package/.claude/skills/components/expanding-panel.md

@@ -4,9 +4,9 @@
 
 `ExpandingPanel` is a single expand/collapse panel built on the native `<details>`/`<summary>` element. It animates open/close by styling the `::details-content` pseudo-element (the browser's own anonymous box wrapping everything after `<summary>`) where supported, supports `v-model` for controlled state, and can be locked open with `forceOpened`. Multiple panels can be grouped into a native accordion by sharing the same `name` prop (see `AccordianCore`).
 
-**WebKit (Safari/iOS) does not support `::details-content`** as of 2026-08, confirmed via real-device testing — Chrome's device-emulation mode cannot catch this, since it's still the Blink engine underneath regardless of which browser UI it's simulating. WebKit silently drops the whole rule block: no console warning, no error, just no animation and (more seriously) `content-is-on-top`'s `position: absolute` never applying, so an overlay panel renders in normal document flow and can break the surrounding layout. Fixed 2026-08-22: `ExpandingPanel` now carries an `@supports not selector(::details-content)` fallback block that reproduces `ExpandingPanelClassic`'s `grid-template-rows` technique automatically — no consumer action needed, this works transparently on every browser. See pitfall #19 in the repo's `CLAUDE.md` for the full mechanism.
+**WebKit (Safari/iOS) does not support `::details-content`** as of 2026-08, confirmed via real-device testing — Chrome's device-emulation mode cannot catch this, since it's still the Blink engine underneath regardless of which browser UI it's simulating. WebKit silently drops the whole rule block: no animation and (more seriously) `content-is-on-top`'s `position: absolute` never applying, so an overlay panel renders in normal document flow and can break the surrounding layout. An `@supports not selector(::details-content)` CSS-only fallback was tried (2026-08-22) but didn't reliably kick in on real devices either and was reverted the same day — **do not reintroduce that approach**.
 
-`ExpandingPanelClassic` still exists as a standalone option — same props/model/slots API, always uses the `grid-template-rows` implementation with no pseudo-element dependency at all — but there's no longer a compatibility reason to prefer it over `ExpandingPanel`.
+**The actual fix is component-level, not CSS-level**: every consumer that gave `ExpandingPanel` a choice of implementation now defaults to `ExpandingPanelClassic` instead — see `AccordianCore`'s `variant` prop (default `"classic"`), `ContentDocs`'s `panelVariant` prop (default `"classic"`), and `ResponsiveHeader`/`NavigationItems`'s `panelVariant` prop (default `"classic"`). `ExpandingPanel` itself is unchanged (still `::details-content`-only, no fallback) and logs a `console.warn` in dev mode on every mount warning about this. Reach for `ExpandingPanel` directly, or pass `variant`/`panelVariant: "modern"` to one of the above, only once you've confirmed it's acceptable for your actual audience — it is **not** the safe default anywhere in this library anymore. See pitfall #19 in the repo's `CLAUDE.md` for the full history.
 
 ---
 
@@ -145,9 +145,9 @@ Always supply a meaningful `name` prop when using multiple panels on the same pa
 
 ## Styling the content when contentIsOnTop
 
-`background-color`, `padding`, and a shadow can be set directly on `.expanding-panel-content` (or on a wrapper inside the `#content` slot — either works) in browsers that support `::details-content`: the clipping boundary there is `::details-content` itself (`overflow: clip`, animated `height`), and `.expanding-panel-content` is a *child* of that box, so its own box is correctly clipped regardless of where the styling lives.
+`background-color`, `padding`, and a shadow can be set directly on `.expanding-panel-content` (or on a wrapper inside the `#content` slot — either works): the clipping boundary is `::details-content` itself (`overflow: clip`, animated `height`), and `.expanding-panel-content` is a *child* of that box, so its own box is correctly clipped regardless of where the styling lives.
 
-In the WebKit fallback path (no `::details-content` support), `.expanding-panel-content` itself is the animated grid track (`grid-template-rows: 0fr → 1fr`) and remains the element being sized — so styling placed directly on it is still clipped correctly there too. The one structural difference: the fallback wraps the `#content` slot in an internal `.inner` div (needed so a plain child's `min-height: auto` doesn't stop the row collapsing to true `0`) — this is purely an implementation detail for the collapse mechanism and isn't a styling hook; don't target `.inner` directly, style `.expanding-panel-content` or the slot's own markup instead, same as the `::details-content` path.
+If this needs to work correctly on WebKit too, use `ExpandingPanelClassic` instead (see the Overview section above) — its equivalent guidance lives in its own `CONSUMER-STYLING.md`, and its `.expanding-panel-classic-content > .inner` structure differs slightly.
 
 ---
 
@@ -213,7 +213,7 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 ## Notes
 
-- The open/close animation targets `::details-content` (`height: 0 → auto`, `overflow: clip`) where supported — no JS height measurement needed. Requires `interpolate-size: allow-keywords` for the height transition itself (Chromium only as of 2026; other browsers with `::details-content` support still toggle correctly, just instantly). WebKit has neither, and falls back to `ExpandingPanelClassic`'s `grid-template-rows` technique automatically (see the Overview section above) — that path animates in every browser regardless of `interpolate-size`.
+- The open/close animation targets `::details-content` (`height: 0 → auto`, `overflow: clip`) — no JS height measurement needed. Requires `interpolate-size: allow-keywords` for the height transition itself (Chromium only as of 2026; other browsers with `::details-content` support still toggle correctly, just instantly). WebKit has neither, and there is no automatic fallback — use `ExpandingPanelClassic` (see the Overview section above) for anything that needs to work correctly there.
 - `content-is-on-top` is applied to the root `.expanding-panel` element, not `.expanding-panel-content` — style overrides must scope through it, e.g. `.expanding-panel.my-panel .expanding-panel-content { ... }`.
 - When `forceOpened` is `true`, `open` stays `true` regardless of `v-model`, but `v-model` still updates internally on clicks (useful if you later set `forceOpened` back to `false`).
 - Group panels into a native accordion (only one open at a time) by passing the same `name` to multiple panels or use `AccordianCore` which handles this automatically.

package/.claude/skills/components/navigation-items.md

@@ -16,6 +16,7 @@ active-route highlighting, hover indicator).
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `mainNavigationState` | `ResponsiveHeaderState` | `{ clonedNavLinks: {}, navListVisibility: {}, hasSecondNav: false }` | Shared geometry/visibility state, normally supplied by the parent `ResponsiveHeader` — not something a consumer constructs by hand outside of tests/stories. |
+| `panelVariant` | `"modern" \| "classic"` | `"classic"` | Which panel component renders a dropdown's submenu: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit. Normally set via `ResponsiveHeader`'s own `panelVariant` prop rather than directly. See CLAUDE.md pitfall #19. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.overflow-navigation-wrapper` element. |
 
 ---

package/.claude/skills/components/responsive-header.md

@@ -106,6 +106,7 @@ buggy toggle-based version too.
 | `collapseBreakpoint` | `number \| null` | `null` | A fixed pixel width below which the whole main nav collapses into the overflow burger, instead of the default per-item responsive collapse. |
 | `collapseAtMainNavIntersection` | `boolean` | `false` | Like `collapseBreakpoint`, but the breakpoint is derived automatically from the main nav's own measured width rather than a fixed number. |
 | `allowExpandOnGesture` | `boolean` | `true` | When `true`, hovering/focusing a dropdown summary opens it (in addition to click). When `false`, only click toggles it. |
+| `panelVariant` | `"modern" \| "classic"` | `"classic"` | Forwarded to `NavigationItems` for its dropdown submenu panels: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit. See CLAUDE.md pitfall #19. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.navigation` element. |
 
 ## Slots

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/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: () => [],
 });
 

package/app/components/02.molecules/expandable/accordian/tests/AccordianCore.spec.ts

@@ -74,11 +74,11 @@ describe("AccordianCore", () => {
 
   // ─── Item count ───────────────────────────────────────────────────────────
 
-  it("renders the correct number of ExpandingPanel components", async () => {
+  it("renders the correct number of panel components", async () => {
     const wrapper = await mountSuspended(AccordianCore, {
       props: { itemCount: 4 },
     });
-    expect(wrapper.findAll(".expanding-panel")).toHaveLength(4);
+    expect(wrapper.findAll(".accordian-item")).toHaveLength(4);
   });
 
   it("renders no ExpandingPanel components when itemCount is 0", async () => {
@@ -95,15 +95,15 @@ describe("AccordianCore", () => {
 
   // ─── variant ──────────────────────────────────────────────────────────────
 
-  it("renders ExpandingPanel by default (variant: modern)", async () => {
+  it("renders ExpandingPanelClassic by default (variant: classic)", async () => {
     const wrapper = await mountSuspended(AccordianCore, {
       props: { itemCount: 2 },
     });
-    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(2);
-    expect(wrapper.findAllComponents({ name: "ExpandingPanelClassic" })).toHaveLength(0);
+    expect(wrapper.findAllComponents({ name: "ExpandingPanelClassic" })).toHaveLength(2);
+    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(0);
   });
 
-  it("renders ExpandingPanelClassic when variant is classic", async () => {
+  it("renders ExpandingPanelClassic when variant is classic (explicit)", async () => {
     const wrapper = await mountSuspended(AccordianCore, {
       props: { itemCount: 2, variant: "classic" },
     });
@@ -111,6 +111,14 @@ describe("AccordianCore", () => {
     expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(0);
   });
 
+  it("renders ExpandingPanel when variant is modern", async () => {
+    const wrapper = await mountSuspended(AccordianCore, {
+      props: { itemCount: 2, variant: "modern" },
+    });
+    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(2);
+    expect(wrapper.findAllComponents({ name: "ExpandingPanelClassic" })).toHaveLength(0);
+  });
+
   it("forwards props identically to ExpandingPanelClassic when variant is classic", async () => {
     const wrapper = await mountSuspended(AccordianCore, {
       props: { itemCount: 2, name: "classic-accordian", animationDuration: 500, variant: "classic" },
@@ -122,11 +130,11 @@ describe("AccordianCore", () => {
     });
   });
 
-  // ─── Props forwarded to ExpandingPanel ───────────────────────────────────
+  // ─── Props forwarded to ExpandingPanel (variant: modern) ─────────────────
 
   it("forwards animationDuration to every ExpandingPanel", async () => {
     const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 3, animationDuration: 500 },
+      props: { itemCount: 3, animationDuration: 500, variant: "modern" },
     });
     wrapper.findAllComponents({ name: "ExpandingPanel" }).forEach((panel) => {
       expect(panel.props("animationDuration")).toBe(500);
@@ -135,7 +143,7 @@ describe("AccordianCore", () => {
 
   it("forwards name to every ExpandingPanel", async () => {
     const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2, name: "test-accordian" },
+      props: { itemCount: 2, name: "test-accordian", variant: "modern" },
     });
     wrapper.findAllComponents({ name: "ExpandingPanel" }).forEach((panel) => {
       expect(panel.props("name")).toBe("test-accordian");
@@ -144,7 +152,7 @@ describe("AccordianCore", () => {
 
   it("passes accordian-item styleClassPassthrough to every ExpandingPanel", async () => {
     const wrapper = await mountSuspended(AccordianCore, {
-      props: { itemCount: 2 },
+      props: { itemCount: 2, variant: "modern" },
     });
     wrapper.findAllComponents({ name: "ExpandingPanel" }).forEach((panel) => {
       expect(panel.props("styleClassPassthrough")).toEqual(["accordian-item"]);
@@ -153,11 +161,11 @@ describe("AccordianCore", () => {
 
   // ─── Default prop values ──────────────────────────────────────────────────
 
-  it("defaults animationDuration to 300 on ExpandingPanel when not provided", async () => {
+  it("defaults animationDuration to 300 on ExpandingPanelClassic when not provided", async () => {
     const wrapper = await mountSuspended(AccordianCore, {
       props: { itemCount: 1 },
     });
-    const panel = wrapper.findComponent({ name: "ExpandingPanel" });
+    const panel = wrapper.findComponent({ name: "ExpandingPanelClassic" });
     expect(panel.props("animationDuration")).toBe(300);
   });
 
@@ -167,7 +175,7 @@ describe("AccordianCore", () => {
     expect(vm.name).toBeUndefined();
     expect(vm.itemCount).toBe(0);
     expect(vm.animationDuration).toBe(300);
-    expect(vm.variant).toBe("modern");
+    expect(vm.variant).toBe("classic");
     expect(vm.styleClassPassthrough).toEqual([]);
   });
 
@@ -241,7 +249,7 @@ describe("AccordianCore", () => {
         "accordian-2-summary": "<span>Gamma</span>",
       },
     });
-    const panels = wrapper.findAllComponents({ name: "ExpandingPanel" });
+    const panels = wrapper.findAllComponents({ name: "ExpandingPanelClassic" });
     expect(panels[0]?.text()).toContain("Alpha");
     expect(panels[1]?.text()).toContain("Beta");
     expect(panels[2]?.text()).toContain("Gamma");

package/app/components/02.molecules/expandable/accordian/tests/__snapshots__/AccordianCore.spec.ts.snap

@@ -2,78 +2,92 @@
 
 exports[`AccordianCore > renders correct HTML structure with all props set 1`] = `
 "<div class="display-accordian extra-class">
-  <div class="expanding-panel accordian-item" icon-size="medium">
-    <details class="expanding-panel-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
+  <div class="expanding-panel-classic accordian-item" icon-size="medium">
+    <details class="expanding-panel-classic-details" name="snapshot-accordian">
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-classic-summary" aria-controls="id-snapshot-accordian-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>
-      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"><div class="inner"></div></div>
     </details>
+    <div id="id-snapshot-accordian-content" class="expanding-panel-classic-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
+      <div class="inner"></div>
+    </div>
   </div>
-  <div class="expanding-panel accordian-item" icon-size="medium">
-    <details class="expanding-panel-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
+  <div class="expanding-panel-classic accordian-item" icon-size="medium">
+    <details class="expanding-panel-classic-details" name="snapshot-accordian">
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-classic-summary" aria-controls="id-snapshot-accordian-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>
-      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"><div class="inner"></div></div>
     </details>
+    <div id="id-snapshot-accordian-content" class="expanding-panel-classic-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
+      <div class="inner"></div>
+    </div>
   </div>
-  <div class="expanding-panel accordian-item" icon-size="medium">
-    <details class="expanding-panel-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
+  <div class="expanding-panel-classic accordian-item" icon-size="medium">
+    <details class="expanding-panel-classic-details" name="snapshot-accordian">
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-classic-summary" aria-controls="id-snapshot-accordian-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>
-      <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"><div class="inner"></div></div>
     </details>
+    <div id="id-snapshot-accordian-content" class="expanding-panel-classic-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
+      <div class="inner"></div>
+    </div>
   </div>
 </div>"
 `;
 
 exports[`AccordianCore > renders correct HTML structure with default props 1`] = `
 "<div class="display-accordian">
-  <div class="expanding-panel accordian-item" icon-size="medium">
-    <details class="expanding-panel-details" name="v-0-0-0">
-      <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false">
+  <div class="expanding-panel-classic accordian-item" icon-size="medium">
+    <details class="expanding-panel-classic-details" name="v-0-0-0">
+      <summary id="id-v-0-0-0-trigger" class="expanding-panel-classic-summary" aria-controls="id-v-0-0-0-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>
-      <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region"><div class="inner"></div></div>
     </details>
+    <div id="id-v-0-0-0-content" class="expanding-panel-classic-content" aria-labelledby="id-v-0-0-0-trigger" role="region">
+      <div class="inner"></div>
+    </div>
   </div>
-  <div class="expanding-panel accordian-item" icon-size="medium">
-    <details class="expanding-panel-details" name="v-0-0-1">
-      <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false">
+  <div class="expanding-panel-classic accordian-item" icon-size="medium">
+    <details class="expanding-panel-classic-details" name="v-0-0-1">
+      <summary id="id-v-0-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="id-v-0-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>
-      <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region"><div class="inner"></div></div>
     </details>
+    <div id="id-v-0-0-1-content" class="expanding-panel-classic-content" aria-labelledby="id-v-0-0-1-trigger" role="region">
+      <div class="inner"></div>
+    </div>
   </div>
 </div>"
 `;
 
 exports[`AccordianCore > renders correct HTML structure with populated slots 1`] = `
 "<div class="display-accordian">
-  <div class="expanding-panel accordian-item" icon-size="medium">
-    <details class="expanding-panel-details" name="v-0-0-0">
-      <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false">
+  <div class="expanding-panel-classic accordian-item" icon-size="medium">
+    <details class="expanding-panel-classic-details" name="v-0-0-0">
+      <summary id="id-v-0-0-0-trigger" class="expanding-panel-classic-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false">
         <div class="label-wrapper"><span>Summary 0</span></div>
         <div class="icon-wrapper"><span>Icon 0</span></div>
       </summary>
-      <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region"><div class="inner"><span>Content 0</span></div></div>
     </details>
+    <div id="id-v-0-0-0-content" class="expanding-panel-classic-content" aria-labelledby="id-v-0-0-0-trigger" role="region">
+      <div class="inner"><span>Content 0</span></div>
+    </div>
   </div>
-  <div class="expanding-panel accordian-item" icon-size="medium">
-    <details class="expanding-panel-details" name="v-0-0-1">
-      <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false">
+  <div class="expanding-panel-classic accordian-item" icon-size="medium">
+    <details class="expanding-panel-classic-details" name="v-0-0-1">
+      <summary id="id-v-0-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false">
         <div class="label-wrapper"><span>Summary 1</span></div>
         <div class="icon-wrapper"><span>Icon 1</span></div>
       </summary>
-      <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region"><div class="inner"><span>Content 1</span></div></div>
     </details>
+    <div id="id-v-0-0-1-content" class="expanding-panel-classic-content" aria-labelledby="id-v-0-0-1-trigger" role="region">
+      <div class="inner"><span>Content 1</span></div>
+    </div>
   </div>
 </div>"
 `;

package/app/components/02.molecules/expandable/expanding-panel/CONSUMER-STYLING.md

@@ -90,16 +90,14 @@ visual style, pass a modifier class:
 - `--expanding-panel-content-gap` and `--expanding-panel-content-z-index` only take effect when
   `contentIsOnTop` is `true` — they're no-ops for the default (in-flow) layout.
 - `background-color`, `padding`, `border`, and shadow are all safe to set directly on
-  `.expanding-panel-content`. Where `::details-content` is supported (not WebKit — see below), the
-  open/close animation clips via `overflow: clip` on that pseudo-element, and
-  `.expanding-panel-content` is a child of it, so its own box is correctly clipped to the animated
-  height while closed/closing. A wrapper inside the `#content` slot works equally well if you
-  prefer to keep the styling scoped to your own markup.
-- WebKit (Safari/iOS) doesn't support `::details-content` — `ExpandingPanel` falls back to
-  `ExpandingPanelClassic`'s `grid-template-rows` technique there automatically, no consumer action
-  needed. That path wraps the `#content` slot in an internal `.inner` div (an implementation
-  detail of the collapse mechanism, not a styling hook) but styling on `.expanding-panel-content`
-  itself still works correctly, same as the `::details-content` path.
+  `.expanding-panel-content`. The open/close animation clips via `overflow: clip` on
+  `::details-content`, and `.expanding-panel-content` is a child of it, so its own box is
+  correctly clipped to the animated height while closed/closing. A wrapper inside the `#content`
+  slot works equally well if you prefer to keep the styling scoped to your own markup.
+- **WebKit (Safari/iOS) doesn't support `::details-content` at all**, and `ExpandingPanel` has no
+  fallback for it (an `@supports`-based CSS fallback was tried and reverted 2026-08-22 — it didn't
+  reliably work). If this panel needs to work correctly on real Apple devices, use
+  `ExpandingPanelClassic` instead — see its own `CONSUMER-STYLING.md`.
 - Don't stack multiple `contentIsOnTop` panels as direct siblings (linked via a shared `name` or
   not). The overlay is absolutely positioned so it doesn't push the next element down — which
   means a sibling `ExpandingPanel` placed right after it sits exactly where the overlay renders,

package/app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue

@@ -23,9 +23,7 @@
         :aria-labelledby="`id-${name}-trigger`"
         role="region"
       >
-        <div class="inner">
-          <slot name="content"></slot>
-        </div>
+        <slot name="content"></slot>
       </div>
     </details>
   </div>
@@ -66,6 +64,20 @@ onClickOutside(rootEl, () => {
 });
 
 if (import.meta.dev) {
+  // ::details-content (the animation/positioning mechanism this component relies on) is not
+  // supported in WebKit (Safari/iOS) as of 2026-08 — confirmed via real-device testing, not
+  // reproducible in Chrome's device-emulation mode since that's still the Blink engine. An
+  // earlier @supports-based fallback attempt (2026-08-22) turned out not to reliably kick in
+  // either. Prefer ExpandingPanelClassic (or a consumer's own `classic` prop, where offered —
+  // see AccordianCore) for anything that needs to work correctly on real Apple devices today.
+  console.warn(
+    `ExpandingPanel${props.name ? ` "${props.name}"` : ""}: this variant depends on ` +
+      "::details-content, which WebKit (Safari/iOS) does not support — the animation and, more " +
+      "seriously, contentIsOnTop's overlay positioning silently fail there with no console error. " +
+      "Use ExpandingPanelClassic instead if this panel needs to work correctly on real Apple " +
+      "devices."
+  );
+
   watch(
     () => props.contentIsOnTop,
     (value) => {
@@ -189,50 +201,6 @@ const onDetailsToggle = (event: Event) => {
         }
       }
     }
-
-    /* ::details-content isn't supported in WebKit (Safari/iOS) as of 2026-08 — the two rule
-       blocks above are silently dropped there entirely (no error, no animation, and crucially
-       content-is-on-top's position: absolute never applies, so the overlay renders in normal
-       document flow instead). This reproduces both using ExpandingPanelClassic's
-       grid-template-rows technique (broadly supported, including Safari), targeting the real
-       .expanding-panel-content element (and its .inner child, matching Classic's structure —
-       .inner's own overflow:hidden is what lets the grid row actually collapse to 0, since a
-       plain block child's default min-height:auto would otherwise floor it at content height)
-       instead of the pseudo-element. */
-    @supports not selector(::details-content) {
-      .expanding-panel-details {
-        .expanding-panel-content {
-          display: grid;
-          grid-template-rows: 0fr;
-          transition: grid-template-rows v-bind(animationDurationStr) ease-in-out;
-          will-change: grid-template-rows;
-
-          .inner {
-            overflow: hidden;
-            margin-top: 0;
-          }
-        }
-
-        &[open] .expanding-panel-content {
-          grid-template-rows: 1fr;
-        }
-      }
-    }
-
-    &.content-is-on-top {
-      @supports not selector(::details-content) {
-        .expanding-panel-details {
-          position: relative;
-
-          .expanding-panel-content {
-            position: absolute;
-            top: calc(100% + var(--expanding-panel-content-gap, 0px));
-            inset-inline: 0;
-            z-index: var(--expanding-panel-content-z-index, 10);
-          }
-        }
-      }
-    }
   }
 }
 </style>

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

@@ -7,9 +7,7 @@ exports[`ExpandingPanel > renders correct HTML structure with all props set 1`]
       <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>
-    <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region">
-      <div class="inner"></div>
-    </div>
+    <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region"></div>
   </details>
 </div>"
 `;
@@ -21,9 +19,7 @@ exports[`ExpandingPanel > renders correct HTML structure with contentIsOnTop tru
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
-    <div id="id-snap-content-on-top-content" class="expanding-panel-content" aria-labelledby="id-snap-content-on-top-trigger" role="region">
-      <div class="inner"></div>
-    </div>
+    <div id="id-snap-content-on-top-content" class="expanding-panel-content" aria-labelledby="id-snap-content-on-top-trigger" role="region"></div>
   </details>
 </div>"
 `;
@@ -35,9 +31,7 @@ exports[`ExpandingPanel > renders correct HTML structure with default props 1`]
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
-    <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region">
-      <div class="inner"></div>
-    </div>
+    <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region"></div>
   </details>
 </div>"
 `;
@@ -50,9 +44,7 @@ exports[`ExpandingPanel > renders correct HTML structure with populated slots 1`
       <div class="icon-wrapper"><span>▸</span></div>
     </summary>
     <div id="id-snap-slots-content" class="expanding-panel-content" aria-labelledby="id-snap-slots-trigger" role="region">
-      <div class="inner">
-        <p>Content text</p>
-      </div>
+      <p>Content text</p>
     </div>
   </details>
 </div>"

package/app/components/03.organisms/responsive-header/NavigationItems.vue

@@ -56,7 +56,8 @@
           role="none"
           @mouseenter="hoveredItemKey = `${String(groupKey)}-${localIndex}`"
         >
-          <ExpandingPanel
+          <component
+            :is="panelComponent"
             v-model="panelOpenStates[`${String(groupKey)}-${localIndex}`]"
             name="overflow-navigation-group"
             :animation-duration="DETAILS_ANIMATION_DURATION"
@@ -96,7 +97,7 @@
                 <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
               </div>
             </template>
-          </ExpandingPanel>
+          </component>
         </li>
       </template>
     </ul>
@@ -107,17 +108,26 @@
 
 <script setup lang="ts">
 import type { ResponsiveHeaderState, ResponsiveHeaderNavItem } from "../../../types/components";
+import ExpandingPanel from "../../02.molecules/expandable/expanding-panel/ExpandingPanel.vue";
+import ExpandingPanelClassic from "../../02.molecules/expandable/expanding-panel-classic/ExpandingPanelClassic.vue";
 
 interface Props {
   mainNavigationState?: ResponsiveHeaderState;
+  panelVariant?: "modern" | "classic";
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   mainNavigationState: () => ({ clonedNavLinks: {}, navListVisibility: {}, hasSecondNav: false }),
+  // Defaults to "classic" — see ExpandingPanel's own dev-mode warning and CLAUDE.md pitfall #19:
+  // its ::details-content-based implementation doesn't work correctly on WebKit (Safari/iOS).
+  // "modern" is opt-in.
+  panelVariant: "classic",
   styleClassPassthrough: () => [],
 });
 
+const panelComponent = computed(() => (props.panelVariant === "modern" ? ExpandingPanel : ExpandingPanelClassic));
+
 const hoveredItemKey = ref<string | null>(null);
 const hoveredChildKey = ref<string | null>(null);
 
@@ -231,6 +241,12 @@ watch(
         }
 
         .overflow-navigation-details {
+          /* Two variants share this styling, one full block each rather than a merged
+             selector list — their DOM shapes differ (modern nests .expanding-panel-content
+             *inside* .expanding-panel-details; classic renders .expanding-panel-classic-content
+             as a *sibling* of .expanding-panel-classic-details), so the [open] + ... sibling
+             combinator below is only structurally correct for the classic block. See
+             ExpandingPanel vs ExpandingPanelClassic's own templates. */
           &.expanding-panel {
             margin-block-end: 0;
 
@@ -293,6 +309,69 @@ watch(
               }
             }
           }
+
+          &.expanding-panel-classic {
+            margin-block-end: 0;
+
+            .expanding-panel-classic-details {
+              .expanding-panel-classic-summary {
+                padding-block: var(--overflow-nav-items-padding-block, 0.8rem);
+                padding-inline: var(--overflow-nav-padding-inline, 0.8rem);
+                gap: 1rem;
+                color: var(--overflow-nav-link-color, inherit);
+                border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
+
+                .label-wrapper {
+                  .overflow-navigation-text {
+                    text-wrap: nowrap;
+                  }
+                }
+                .icon-wrapper {
+                  padding: 0;
+                }
+              }
+
+              &[open] {
+                .expanding-panel-classic-summary {
+                  border-bottom: 0.1rem solid transparent;
+                }
+                + .expanding-panel-classic-content {
+                  border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
+                  .overflow-navigation-sub-nav-inner {
+                    margin-top: var(--overflow-nav-items-gap, 0px);
+                  }
+                }
+              }
+            }
+
+            .expanding-panel-classic-content {
+              border-bottom: 0.1rem solid transparent;
+
+              .overflow-navigation-sub-nav-inner {
+                margin-top: 0;
+                position: relative;
+
+                .overflow-navigation-sub-nav-list {
+                  display: flex;
+                  flex-direction: column;
+                  gap: 2px;
+
+                  .overflow-navigation-sub-nav-item {
+                    padding-block: var(--overflow-nav-items-padding-block, 0.8rem);
+                    padding-inline: var(--overflow-nav-padding-inline, 0.8rem);
+                    font-size: var(--overflow-nav-sub-item-font-size, inherit);
+                    color: var(--overflow-nav-sub-item-color, inherit);
+
+                    .overflow-navigation-sub-nav-link {
+                      display: block;
+                      text-decoration: none;
+                      color: inherit;
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
     }
@@ -325,7 +404,11 @@ watch(
   .overflow-navigation-wrapper
     .overflow-navigation-item.is-hovered
     .overflow-navigation-details
-    .expanding-panel-summary {
+    .expanding-panel-summary,
+  .overflow-navigation-wrapper
+    .overflow-navigation-item.is-hovered
+    .overflow-navigation-details
+    .expanding-panel-classic-summary {
     anchor-name: --overflow-nav-indicator;
   }
 
@@ -340,7 +423,11 @@ watch(
   .overflow-navigation-wrapper:not(:has(.overflow-navigation-item.is-hovered))
     .overflow-navigation-item.is-active
     .overflow-navigation-details
-    .expanding-panel-summary {
+    .expanding-panel-summary,
+  .overflow-navigation-wrapper:not(:has(.overflow-navigation-item.is-hovered))
+    .overflow-navigation-item.is-active
+    .overflow-navigation-details
+    .expanding-panel-classic-summary {
     anchor-name: --overflow-nav-indicator;
   }
 

package/app/components/03.organisms/responsive-header/ResponsiveHeader.vue

@@ -100,7 +100,7 @@
           />
         </summary>
         <div class="overflow-details-nav" role="menu">
-          <NavigationItems :main-navigation-state="mainNavigationState" />
+          <NavigationItems :main-navigation-state="mainNavigationState" :panel-variant="panelVariant" />
         </div>
       </details>
       <slot v-if="slots.secondaryNavigation" name="secondaryNavigation"></slot>
@@ -125,6 +125,7 @@ interface Props {
   collapseAtMainNavIntersection?: boolean;
   styleClassPassthrough?: string | string[];
   allowExpandOnGesture?: boolean;
+  panelVariant?: "modern" | "classic";
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -138,6 +139,9 @@ const props = withDefaults(defineProps<Props>(), {
   collapseAtMainNavIntersection: false,
   styleClassPassthrough: () => [],
   allowExpandOnGesture: true,
+  // Forwarded to NavigationItems' overflow submenu panels — see its own default for why
+  // "classic" is the safe default (CLAUDE.md pitfall #19).
+  panelVariant: "classic",
 });
 
 const collapseNavigationBelowWidth = computed(

package/app/components/03.organisms/responsive-header/tests/NavigationItems.spec.ts

@@ -138,10 +138,10 @@ describe("NavigationItems", () => {
     const wrapper = await mountSuspended(NavigationItems, {
       props: { mainNavigationState },
     });
-    const details = wrapper.find(".expanding-panel-details");
+    const details = wrapper.find(".expanding-panel-classic-details");
     expect(details.attributes("open")).toBeUndefined();
 
-    await wrapper.find(".expanding-panel-summary").trigger("click");
+    await wrapper.find(".expanding-panel-classic-summary").trigger("click");
     await nextTick();
     expect(details.attributes("open")).toBe("");
   });

package/app/components/03.organisms/responsive-header/tests/__snapshots__/NavigationItems.spec.ts.snap

@@ -6,24 +6,24 @@ exports[`NavigationItems > renders correct HTML structure with default props 1`]
     <li class="overflow-navigation-item is-active" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="0" role="none"><a href="/" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Home</span></a></li>
     <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="1" role="none"><a href="/about" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">About</span></a></li>
     <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="2" role="none">
-      <div class="expanding-panel overflow-navigation-details">
-        <details class="expanding-panel-details" name="overflow-navigation-group">
-          <summary id="id-overflow-navigation-group-trigger" class="expanding-panel-summary" aria-controls="id-overflow-navigation-group-content" aria-expanded="false">
+      <div class="expanding-panel-classic overflow-navigation-details">
+        <details class="expanding-panel-classic-details" name="overflow-navigation-group">
+          <summary id="id-overflow-navigation-group-trigger" class="expanding-panel-classic-summary" aria-controls="id-overflow-navigation-group-content" aria-expanded="false">
             <div class="label-wrapper"><span class="overflow-navigation-text" aria-label="UI Components submenu" role="menuitem" aria-haspopup="true">UI Components</span></div>
             <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down icon" aria-hidden="true"></span></div>
           </summary>
-          <div id="id-overflow-navigation-group-content" class="expanding-panel-content" aria-labelledby="id-overflow-navigation-group-trigger" role="region">
-            <div class="inner">
-              <div class="overflow-navigation-sub-nav-inner">
-                <ul class="overflow-navigation-sub-nav-list">
-                  <li class="overflow-navigation-sub-nav-item"><a href="/forms/examples/buttons" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Buttons</span></a></li>
-                  <li class="overflow-navigation-sub-nav-item"><a href="/ui/tabs" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Tabs</span></a></li>
-                </ul>
-                <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
-              </div>
+        </details>
+        <div id="id-overflow-navigation-group-content" class="expanding-panel-classic-content" aria-labelledby="id-overflow-navigation-group-trigger" role="region">
+          <div class="inner">
+            <div class="overflow-navigation-sub-nav-inner">
+              <ul class="overflow-navigation-sub-nav-list">
+                <li class="overflow-navigation-sub-nav-item"><a href="/forms/examples/buttons" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Buttons</span></a></li>
+                <li class="overflow-navigation-sub-nav-item"><a href="/ui/tabs" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Tabs</span></a></li>
+              </ul>
+              <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
             </div>
           </div>
-        </details>
+        </div>
       </div>
     </li>
   </ul>

package/app/components/03.organisms/responsive-header/tests/__snapshots__/ResponsiveHeader.spec.ts.snap

@@ -39,24 +39,24 @@ exports[`ResponsiveHeader > renders correct HTML structure with default props 1`
             <li class="overflow-navigation-item visible is-active" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="0" role="none"><a href="/" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">Home</span></a></li>
             <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="1" role="none"><a href="/about" class="overflow-navigation-link" role="menuitem"><span class="overflow-navigation-text">About</span></a></li>
             <li class="overflow-navigation-item visible" style="--_main-navigation-item-width: 0px;" data-group-key="firstNav" data-local-index="2" role="none">
-              <div class="expanding-panel overflow-navigation-details">
-                <details class="expanding-panel-details" name="overflow-navigation-group">
-                  <summary id="id-overflow-navigation-group-trigger" class="expanding-panel-summary" aria-controls="id-overflow-navigation-group-content" aria-expanded="false">
+              <div class="expanding-panel-classic overflow-navigation-details">
+                <details class="expanding-panel-classic-details" name="overflow-navigation-group">
+                  <summary id="id-overflow-navigation-group-trigger" class="expanding-panel-classic-summary" aria-controls="id-overflow-navigation-group-content" aria-expanded="false">
                     <div class="label-wrapper"><span class="overflow-navigation-text" aria-label="UI Components submenu" role="menuitem" aria-haspopup="true">UI Components</span></div>
                     <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down icon" aria-hidden="true"></span></div>
                   </summary>
-                  <div id="id-overflow-navigation-group-content" class="expanding-panel-content" aria-labelledby="id-overflow-navigation-group-trigger" role="region">
-                    <div class="inner">
-                      <div class="overflow-navigation-sub-nav-inner">
-                        <ul class="overflow-navigation-sub-nav-list">
-                          <li class="overflow-navigation-sub-nav-item"><a href="/forms/examples/buttons" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Buttons</span></a></li>
-                          <li class="overflow-navigation-sub-nav-item"><a href="/ui/tabs" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Tabs</span></a></li>
-                        </ul>
-                        <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
-                      </div>
+                </details>
+                <div id="id-overflow-navigation-group-content" class="expanding-panel-classic-content" aria-labelledby="id-overflow-navigation-group-trigger" role="region">
+                  <div class="inner">
+                    <div class="overflow-navigation-sub-nav-inner">
+                      <ul class="overflow-navigation-sub-nav-list">
+                        <li class="overflow-navigation-sub-nav-item"><a href="/forms/examples/buttons" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Buttons</span></a></li>
+                        <li class="overflow-navigation-sub-nav-item"><a href="/ui/tabs" class="overflow-navigation-sub-nav-link" role="menuitem"><span class="overflow-navigation-sub-nav-text">Tabs</span></a></li>
+                      </ul>
+                      <div aria-hidden="true" class="overflow-sub-nav-indicator-hovered"></div>
                     </div>
                   </div>
-                </details>
+                </div>
               </div>
             </li>
           </ul>

package/app/components/03.organisms/services/services-section/ServicesSection.vue

@@ -318,6 +318,25 @@ watch(
               }
             }
           }
+
+          .accordian-item.expanding-panel-classic {
+            border-block-end: 1px solid var(--services-section-faq-divider-color, currentColor);
+            opacity: var(--services-section-faq-divider-opacity, 0.7);
+
+            &:first-child {
+              border-block-start: 1px solid var(--services-section-faq-divider-color, currentColor);
+            }
+
+            .expanding-panel-classic-details .expanding-panel-classic-summary {
+              padding-block: 1.2rem;
+            }
+
+            .expanding-panel-classic-content .inner {
+              .services-section__faq-answer {
+                line-height: var(--services-section-faq-answer-line-height, 1.6);
+              }
+            }
+          }
         }
       }
     }

package/app/components/03.organisms/services/services-section/tests/__snapshots__/ServicesSection.spec.ts.snap

@@ -61,18 +61,18 @@ exports[`ServicesSection > renders correct HTML structure 1`] = `
         <!--v-if--><span class="text-block-0 normal">Frequently Asked Questions</span>
       </h2>
       <div class="display-accordian services-section__faq" id="faq">
-        <div class="expanding-panel accordian-item" icon-size="medium">
-          <details class="expanding-panel-details" name="faq-v-0-0-0">
-            <summary id="id-faq-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-faq-v-0-0-0-content" aria-expanded="false">
+        <div class="expanding-panel-classic accordian-item" icon-size="medium">
+          <details class="expanding-panel-classic-details" name="faq-v-0-0-0">
+            <summary id="id-faq-v-0-0-0-trigger" class="expanding-panel-classic-summary" aria-controls="id-faq-v-0-0-0-content" aria-expanded="false">
               <div class="label-wrapper">FAQ question?</div>
               <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down" aria-hidden="true"></span></div>
             </summary>
-            <div id="id-faq-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-faq-v-0-0-0-trigger" role="region">
-              <div class="inner">
-                <p class="services-section__faq-answer">FAQ answer.</p>
-              </div>
-            </div>
           </details>
+          <div id="id-faq-v-0-0-0-content" class="expanding-panel-classic-content" aria-labelledby="id-faq-v-0-0-0-trigger" role="region">
+            <div class="inner">
+              <p class="services-section__faq-answer">FAQ answer.</p>
+            </div>
+          </div>
         </div>
       </div>
       <div class="glass-panel services-section__glass-panel p-24">

package/package.json

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