srcdev-nuxt-components 9.3.6 → 9.3.8

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>