srcdev-nuxt-components 9.3.0 → 9.3.2

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/__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.

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

@@ -0,0 +1,191 @@
+<template>
+  <div ref="rootEl" class="expanding-panel-classic" :class="[elementClasses, { 'content-is-on-top': contentIsOnTop }]">
+    <details class="expanding-panel-classic-details" :name :open @toggle="onDetailsToggle">
+      <summary
+        :id="`id-${name}-trigger`"
+        class="expanding-panel-classic-summary"
+        :aria-controls="`id-${name}-content`"
+        :aria-expanded="open"
+        @click.prevent.stop="handleToggle"
+      >
+        <div class="label-wrapper">
+          <slot name="summary"></slot>
+        </div>
+        <div class="icon-wrapper" :class="{ 'icon-wrapper--hidden': forceOpened }">
+          <slot name="icon">
+            <Icon name="bi:caret-down-fill" class="icon mi-12" />
+          </slot>
+        </div>
+      </summary>
+    </details>
+    <div
+      :id="`id-${name}-content`"
+      class="expanding-panel-classic-content"
+      :aria-labelledby="`id-${name}-trigger`"
+      role="region"
+    >
+      <div class="inner">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+
+interface Props {
+  name?: string;
+  animationDuration?: number;
+  forceOpened?: boolean;
+  contentIsOnTop?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: undefined,
+  animationDuration: 400,
+  forceOpened: false,
+  contentIsOnTop: false,
+  styleClassPassthrough: () => [],
+});
+
+const fallbackName = useId();
+const name = computed(() => props.name || fallbackName);
+const isPanelOpen = defineModel<boolean>({ default: false });
+const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+const open = computed(() => props.forceOpened || isPanelOpen.value);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const rootEl = ref<HTMLElement | null>(null);
+onClickOutside(rootEl, () => {
+  if (props.contentIsOnTop && !props.forceOpened && isPanelOpen.value) {
+    isPanelOpen.value = false;
+  }
+});
+
+if (import.meta.dev) {
+  watch(
+    () => props.contentIsOnTop,
+    (value) => {
+      if (!value) return;
+      console.warn(
+        `ExpandingPanelClassic${props.name ? ` "${props.name}"` : ""}: contentIsOnTop is enabled. ` +
+          "The content overlay is absolutely positioned and does not reserve space, so a sibling " +
+          "element (e.g. another ExpandingPanelClassic) placed directly after this one will be visually " +
+          "covered when this panel opens. Intended for a single panel overlaying unrelated trailing " +
+          "page content — avoid stacking multiple contentIsOnTop panels as direct siblings."
+      );
+    },
+    { immediate: true }
+  );
+}
+
+const handleToggle = (event: Event) => {
+  if (props.forceOpened) {
+    event.preventDefault();
+  }
+  isPanelOpen.value = !isPanelOpen.value;
+};
+
+const onDetailsToggle = (event: Event) => {
+  if (props.forceOpened) return;
+  isPanelOpen.value = (event.target as HTMLDetailsElement).open;
+};
+</script>
+
+<style lang="css">
+@layer components {
+  .expanding-panel-classic {
+    .expanding-panel-classic-details {
+      &:hover {
+        cursor: pointer;
+      }
+      .expanding-panel-classic-summary {
+        display: grid;
+        align-items: center;
+        grid-template-columns: 1fr auto;
+        gap: var(--expanding-panel-classic-summary-gap, 1rem);
+        list-style: none;
+        user-select: none;
+
+        padding-block: var(--expanding-panel-classic-summary-padding-block, 0.5rem);
+
+        &::-webkit-details-marker,
+        &::marker {
+          display: none;
+        }
+
+        overflow: hidden;
+
+        .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-classic-icon-size, 1.2rem);
+          aspect-ratio: 1;
+          overflow: hidden;
+
+          &.icon-wrapper--hidden {
+            visibility: hidden;
+          }
+
+          .icon {
+            display: block;
+            transform: scaleY(1);
+            transition: transform v-bind(animationDurationStr) ease-in-out;
+            font-size: var(--expanding-panel-classic-icon-size, 1.2rem);
+            will-change: transform;
+          }
+        }
+      }
+
+      &[open] {
+        .expanding-panel-classic-summary {
+          .icon-wrapper {
+            .icon {
+              transform: scaleY(-1);
+            }
+          }
+        }
+        + .expanding-panel-classic-content {
+          grid-template-rows: 1fr;
+        }
+      }
+    }
+
+    .expanding-panel-classic-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;
+      }
+    }
+
+    &.content-is-on-top {
+      position: relative;
+
+      .expanding-panel-classic-content {
+        position: absolute;
+        top: calc(100% + var(--expanding-panel-classic-content-gap, 0px));
+        inset-inline: 0;
+        z-index: var(--expanding-panel-classic-content-z-index, 10);
+      }
+    }
+  }
+}
+</style>