srcdev-nuxt-components 9.2.11 → 9.3.1

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

@@ -8,6 +8,7 @@ interface AccordianCoreInstance extends ComponentPublicInstance {
   name: string | undefined;
   itemCount: number;
   animationDuration: number;
+  variant: "modern" | "classic";
   styleClassPassthrough: string | string[];
 }
 
@@ -92,6 +93,35 @@ describe("AccordianCore", () => {
     expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(0);
   });
 
+  // ─── variant ──────────────────────────────────────────────────────────────
+
+  it("renders ExpandingPanel by default (variant: modern)", async () => {
+    const wrapper = await mountSuspended(AccordianCore, {
+      props: { itemCount: 2 },
+    });
+    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).toHaveLength(2);
+    expect(wrapper.findAllComponents({ name: "ExpandingPanelClassic" })).toHaveLength(0);
+  });
+
+  it("renders ExpandingPanelClassic when variant is classic", async () => {
+    const wrapper = await mountSuspended(AccordianCore, {
+      props: { itemCount: 2, variant: "classic" },
+    });
+    expect(wrapper.findAllComponents({ name: "ExpandingPanelClassic" })).toHaveLength(2);
+    expect(wrapper.findAllComponents({ name: "ExpandingPanel" })).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" },
+    });
+    wrapper.findAllComponents({ name: "ExpandingPanelClassic" }).forEach((panel) => {
+      expect(panel.props("name")).toBe("classic-accordian");
+      expect(panel.props("animationDuration")).toBe(500);
+      expect(panel.props("styleClassPassthrough")).toEqual(["accordian-item"]);
+    });
+  });
+
   // ─── Props forwarded to ExpandingPanel ───────────────────────────────────
 
   it("forwards animationDuration to every ExpandingPanel", async () => {
@@ -137,6 +167,7 @@ describe("AccordianCore", () => {
     expect(vm.name).toBeUndefined();
     expect(vm.itemCount).toBe(0);
     expect(vm.animationDuration).toBe(300);
+    expect(vm.variant).toBe("modern");
     expect(vm.styleClassPassthrough).toEqual([]);
   });
 

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

@@ -8,10 +8,8 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
         <div class="label-wrapper"></div>
         <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" 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>
     </details>
-    <div id="id-snapshot-accordian-content" class="expanding-panel-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">
@@ -19,10 +17,8 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
         <div class="label-wrapper"></div>
         <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" 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>
     </details>
-    <div id="id-snapshot-accordian-content" class="expanding-panel-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">
@@ -30,10 +26,8 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
         <div class="label-wrapper"></div>
         <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" 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>
     </details>
-    <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
-      <div class="inner"></div>
-    </div>
   </div>
 </div>"
 `;
@@ -46,10 +40,8 @@ exports[`AccordianCore > 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 mi-12" 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>
     </details>
-    <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>
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="v-0-0-1">
@@ -57,10 +49,8 @@ exports[`AccordianCore > 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 mi-12" 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>
     </details>
-    <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>
   </div>
 </div>"
 `;
@@ -73,10 +63,8 @@ exports[`AccordianCore > renders correct HTML structure with populated slots 1`]
         <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"><span>Content 0</span></div>
     </details>
-    <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>
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="v-0-0-1">
@@ -84,10 +72,8 @@ exports[`AccordianCore > renders correct HTML structure with populated slots 1`]
         <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"><span>Content 1</span></div>
     </details>
-    <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>
   </div>
 </div>"
 `;

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

@@ -13,9 +13,10 @@ All `--expanding-panel-*` tokens are the stable override surface. Set them at an
 | `--expanding-panel-content-z-index` | `10` | Stacking order of the content region when `contentIsOnTop` is `true` |
 | `--expanding-panel-content-gap` | `0px` | Space between the summary and the content region when `contentIsOnTop` is `true` |
 
-Note: `background-color`, `padding`, and shadow are **not** tokenised, and must never be applied
-to `.inner` itself — see [expanding-panel.md](../../../../.claude/skills/components/expanding-panel.md#styling-the-content-when-contentisontop)
-for why, and style a wrapper *inside* the `#content` slot instead.
+Note: `background-color`, `padding`, and shadow are **not** tokenised. They can be applied directly
+to `.expanding-panel-content`, or to a wrapper inside the `#content` slot — see
+[expanding-panel.md](../../../../.claude/skills/components/expanding-panel.md#styling-the-content-when-contentisontop)
+for why both are safe.
 
 ---
 
@@ -64,7 +65,6 @@ visual style, pass a modifier class:
 >
   <template #summary>...</template>
   <template #content>
-    <!-- Wrapper INSIDE the slot carries the visual styling — never .inner itself -->
     <div class="promo-panel-body">...</div>
   </template>
 </ExpandingPanel>
@@ -89,12 +89,12 @@ 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.
-- Never set `background-color`, `padding`, `border`, or a shadow directly on `.inner`. `.inner`
-  has no explicit height when collapsed (`grid-template-rows: 0fr`) and relies on
-  `overflow: hidden` to clip its *children* to 0px — but padding/border/background on `.inner`'s
-  own box are not "overflow content", so they'd still render as a visible gap under the summary
-  while closed. Always style a wrapper element placed *inside* the `#content` slot instead; that
-  wrapper is a child of `.inner` and gets clipped correctly.
+- `background-color`, `padding`, `border`, and shadow are all safe to set directly on
+  `.expanding-panel-content`. The open/close animation clips via `overflow: clip` on
+  `::details-content` (the native anonymous box wrapping everything after `<summary>`), and
+  `.expanding-panel-content` is a child of that box — 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.
 - 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

@@ -17,17 +17,15 @@
           </slot>
         </div>
       </summary>
-    </details>
-    <div
-      :id="`id-${name}-content`"
-      class="expanding-panel-content"
-      :aria-labelledby="`id-${name}-trigger`"
-      role="region"
-    >
-      <div class="inner">
+      <div
+        :id="`id-${name}-content`"
+        class="expanding-panel-content"
+        :aria-labelledby="`id-${name}-trigger`"
+        role="region"
+      >
         <slot name="content"></slot>
       </div>
-    </div>
+    </details>
   </div>
 </template>
 
@@ -58,10 +56,6 @@ const open = computed(() => props.forceOpened || isPanelOpen.value);
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-// contentIsOnTop panels behave like a dropdown/overlay (e.g. ContentDocs' mobile nav) rather
-// than an inline accordion — clicking outside is the expected way to dismiss those, matching
-// native <select>/menu behaviour. Not wanted for ordinary accordions (forceOpened is always
-// false here too — a forceOpened panel isn't meant to be dismissible by any interaction).
 const rootEl = ref<HTMLElement | null>(null);
 onClickOutside(rootEl, () => {
   if (props.contentIsOnTop && !props.forceOpened && isPanelOpen.value) {
@@ -94,9 +88,6 @@ const handleToggle = (event: Event) => {
 };
 
 const onDetailsToggle = (event: Event) => {
-  // forceOpened drives the native `open` attribute directly, which fires its own
-  // 'toggle' event — ignore it here or it leaks into isPanelOpen and gets stuck
-  // once forceOpened later reverts to false.
   if (props.forceOpened) return;
   isPanelOpen.value = (event.target as HTMLDetailsElement).open;
 };
@@ -129,16 +120,20 @@ const onDetailsToggle = (event: Event) => {
         .label-wrapper {
           display: inline-block;
         }
+        /* inline-size is reserved explicitly — the grid's align-items:center
+           doesn't stretch this item to row height, so with only aspect-ratio:1
+           and no content yet (icon SVG not loaded), the wrapper has nothing to
+           size itself against and collapses to 0 until the icon arrives, then
+           pops in and shifts the "auto" grid column's width. */
         .icon-wrapper {
           display: flex;
           align-items: center;
           justify-content: space-between;
 
+          inline-size: var(--expanding-panel-icon-size, 1.2rem);
           aspect-ratio: 1;
           overflow: hidden;
 
-          /* Space is always reserved (not v-if'd away) so a forceOpened panel's summary
-             row stays the same height as a toggleable sibling's — only the glyph hides. */
           &.icon-wrapper--hidden {
             visibility: hidden;
           }
@@ -161,32 +156,35 @@ const onDetailsToggle = (event: Event) => {
             }
           }
         }
-        + .expanding-panel-content {
-          grid-template-rows: 1fr;
-        }
       }
-    }
 
-    .expanding-panel-content {
-      display: grid;
-      grid-template-rows: 0fr;
-      transition: grid-template-rows v-bind(animationDurationStr) ease-in-out;
-      will-change: grid-template-rows;
+      &::details-content {
+        overflow: clip;
+        height: 0;
+        transition:
+          height v-bind(animationDurationStr) ease-in-out,
+          content-visibility v-bind(animationDurationStr) ease-in-out allow-discrete;
+      }
 
-      .inner {
-        overflow: hidden;
-        margin-top: 0;
+      @supports (interpolate-size: allow-keywords) {
+        interpolate-size: allow-keywords;
+
+        &[open]::details-content {
+          height: auto;
+        }
       }
     }
 
     &.content-is-on-top {
-      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);
+      .expanding-panel-details {
+        position: relative;
+
+        &::details-content {
+          position: absolute;
+          top: calc(100% + var(--expanding-panel-content-gap, 0px));
+          inset-inline: 0;
+          z-index: var(--expanding-panel-content-z-index, 10);
+        }
       }
     }
   }

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

@@ -242,12 +242,11 @@ export const ContentIsOnTop: Story = {
           </template>
           <template #content>
             <!--
-              The background/border/shadow live on this wrapper — never on .inner
-              itself. .inner has no explicit height when collapsed (grid-template-rows: 0fr)
-              and relies on overflow:hidden to clip its children to 0px; but padding/border/
-              background set directly on .inner are part of ITS OWN box, not overflow content,
-              so they'd still render as a visible gap under the summary while closed. Styling
-              a wrapper *inside* the slot keeps it clipped correctly by .inner's overflow:hidden.
+              Background/border/shadow can go directly on .expanding-panel-content (or, as
+              here, a wrapper inside the slot — either works). ::details-content (the native
+              anonymous box wrapping this content) is what clips to 0 height when collapsed,
+              via overflow:clip on the parent — so this element's own box, including padding
+              and background, is clipped correctly regardless of where the styling lives.
             -->
             <div style="color: #808080; background-color:#fff;border:1px solid #ddd;border-radius:0.4rem;padding:1rem;box-shadow:0 4px 12px rgb(0 0 0 / 15%)">
               <p style="margin:0">

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

@@ -437,6 +437,12 @@ describe("ExpandingPanel", () => {
     await wrapper.find("summary").trigger("click");
     expect(vm.isPanelOpen).toBe(true);
 
+    // vueuse's onClickOutside debounces re-entrant clicks via a real setTimeout(0) that
+    // flips an internal "isProcessingClick" flag back off. With fake timers active
+    // (test/vitest.setup.ts) that flag never resets on its own, so the summary click
+    // above would otherwise permanently suppress the very next click. Advance past it.
+    vi.advanceTimersByTime(0);
+
     document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     await nextTick();
 

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

@@ -7,10 +7,8 @@ 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 mi-12" 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>
   </details>
-  <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region">
-    <div class="inner"></div>
-  </div>
 </div>"
 `;
 
@@ -21,10 +19,8 @@ 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 mi-12" 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>
   </details>
-  <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>"
 `;
 
@@ -35,10 +31,8 @@ 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 mi-12" 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>
   </details>
-  <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region">
-    <div class="inner"></div>
-  </div>
 </div>"
 `;
 
@@ -49,11 +43,9 @@ exports[`ExpandingPanel > renders correct HTML structure with populated slots 1`
       <div class="label-wrapper"><span>Summary text</span></div>
       <div class="icon-wrapper"><span>▸</span></div>
     </summary>
-  </details>
-  <div id="id-snap-slots-content" class="expanding-panel-content" aria-labelledby="id-snap-slots-trigger" role="region">
-    <div class="inner">
+    <div id="id-snap-slots-content" class="expanding-panel-content" aria-labelledby="id-snap-slots-trigger" role="region">
       <p>Content text</p>
     </div>
-  </div>
+  </details>
 </div>"
 `;

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

@@ -0,0 +1,103 @@
+# ExpandingPanelClassic — Consumer Styling Guide
+
+## Public token API
+
+All `--expanding-panel-classic-*` tokens are the stable override surface. Set them at any scope
+(global, page, or instance) without touching the component itself.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--expanding-panel-classic-summary-gap` | `1rem` | Gap between the summary label and the toggle icon |
+| `--expanding-panel-classic-summary-padding-block` | `0.5rem` | Vertical padding on the clickable summary row |
+| `--expanding-panel-classic-icon-size` | `1.2rem` | Toggle icon `font-size` |
+| `--expanding-panel-classic-content-z-index` | `10` | Stacking order of the content region when `contentIsOnTop` is `true` |
+| `--expanding-panel-classic-content-gap` | `0px` | Space between the summary and the content region when `contentIsOnTop` is `true` |
+
+Note: `background-color`, `padding`, and shadow are **not** tokenised, and must never be applied
+to `.inner` itself — see [expanding-panel-classic.md](../../../../.claude/skills/components/expanding-panel-classic.md#styling-the-content-when-contentisontop)
+for why, and style a wrapper *inside* the `#content` slot instead.
+
+---
+
+## Global theming — recommended approach
+
+Create `assets/styles/setup/07.components/expanding-panel-classic.css` in the consuming app and set
+tokens on `:root`. This applies to every `ExpandingPanelClassic` across the site.
+
+```css
+/* assets/styles/setup/07.components/expanding-panel-classic.css */
+:root {
+  --expanding-panel-classic-summary-gap: 1.6rem;
+  --expanding-panel-classic-summary-padding-block: 1.2rem;
+  --expanding-panel-classic-icon-size: 1.4rem;
+}
+```
+
+---
+
+## Page-scoped overrides
+
+Override tokens for a specific section by scoping them under the page or layout wrapper.
+No `:deep()` is required (component styles are unscoped).
+
+```css
+/* In the consuming page's unscoped <style> block */
+.faq-section {
+  .expanding-panel-classic {
+    --expanding-panel-classic-summary-padding-block: 1.6rem;
+  }
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
+visual style, pass a modifier class:
+
+```vue
+<ExpandingPanelClassic
+  name="promo"
+  :content-is-on-top="true"
+  :style-class-passthrough="['promo-panel']"
+>
+  <template #summary>...</template>
+  <template #content>
+    <!-- Wrapper INSIDE the slot carries the visual styling — never .inner itself -->
+    <div class="promo-panel-body">...</div>
+  </template>
+</ExpandingPanelClassic>
+```
+
+```css
+.expanding-panel-classic.promo-panel {
+  --expanding-panel-classic-content-gap: 0.4rem;
+  --expanding-panel-classic-content-z-index: 20;
+}
+
+.promo-panel-body {
+  background-color: white;
+  padding: 1rem;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+}
+```
+
+---
+
+## Notes
+
+- `--expanding-panel-classic-content-gap` and `--expanding-panel-classic-content-z-index` only take effect when
+  `contentIsOnTop` is `true` — they're no-ops for the default (in-flow) layout.
+- Never set `background-color`, `padding`, `border`, or a shadow directly on `.inner`. `.inner`
+  has no explicit height when collapsed (`grid-template-rows: 0fr`) and relies on
+  `overflow: hidden` to clip its *children* to 0px — but padding/border/background on `.inner`'s
+  own box are not "overflow content", so they'd still render as a visible gap under the summary
+  while closed. Always style a wrapper element placed *inside* the `#content` slot instead; that
+  wrapper is a child of `.inner` and gets clipped correctly.
+- 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 `ExpandingPanelClassic` placed right after it sits exactly where the overlay renders,
+  and gets visually covered when the first panel opens. `contentIsOnTop` is for a single panel
+  overlaying unrelated trailing page content, not for grouped/stacked accordion panels — use the
+  default in-flow layout for those.