srcdev-nuxt-components 9.3.0 → 9.3.2

package/.vscode/srcdev-component-expanding-panel-classic.code-snippets

@@ -0,0 +1,121 @@
+{
+  "SRCDEV ExpandingPanelClassic Basic": {
+    "description": "Basic uncontrolled ExpandingPanelClassic with summary and content slots",
+    "scope": "vue,html",
+    "body": [
+      "<ExpandingPanelClassic name=\"$1delivery\">",
+      "  <template #summary>",
+      "    <span>$2Delivery &amp; Returns</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$3Free standard delivery on orders over £50.</p>",
+      "  </template>",
+      "</ExpandingPanelClassic>"
+    ]
+  },
+  "SRCDEV ExpandingPanelClassic Controlled": {
+    "description": "ExpandingPanelClassic controlled via v-model with external toggle",
+    "scope": "vue,html",
+    "body": [
+      "<ExpandingPanelClassic name=\"$1faq-1\" v-model=\"$2isOpen\">",
+      "  <template #summary>",
+      "    <span>$3What is your returns policy?</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$4You can return any item within 30 days.</p>",
+      "  </template>",
+      "</ExpandingPanelClassic>"
+    ]
+  },
+  "SRCDEV ExpandingPanelClassic Accordion Group": {
+    "description": "Multiple ExpandingPanelClassic panels grouped into a native accordion (shared name, only one open at a time)",
+    "scope": "vue,html",
+    "body": [
+      "<ExpandingPanelClassic name=\"$1faq\">",
+      "  <template #summary>",
+      "    <span>$2Question one?</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$3Answer one.</p>",
+      "  </template>",
+      "</ExpandingPanelClassic>",
+      "<ExpandingPanelClassic name=\"$1faq\">",
+      "  <template #summary>",
+      "    <span>$4Question two?</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$5Answer two.</p>",
+      "  </template>",
+      "</ExpandingPanelClassic>"
+    ]
+  },
+  "SRCDEV ExpandingPanelClassic Force Opened": {
+    "description": "ExpandingPanelClassic locked open, no toggle icon, cannot be collapsed",
+    "scope": "vue,html",
+    "body": [
+      "<ExpandingPanelClassic name=\"$1notice\" :force-opened=\"true\">",
+      "  <template #summary>",
+      "    <strong>$2Important notice</strong>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$3This panel cannot be collapsed.</p>",
+      "  </template>",
+      "</ExpandingPanelClassic>"
+    ]
+  },
+  "SRCDEV ExpandingPanelClassic Content Is On Top": {
+    "description": "ExpandingPanelClassic with content overlaying page content instead of pushing layout down",
+    "scope": "vue,html",
+    "body": [
+      "<ExpandingPanelClassic",
+      "  name=\"$1overlay\"",
+      "  :content-is-on-top=\"true\"",
+      "  :style-class-passthrough=\"['$2my-overlay-panel']\"",
+      ">",
+      "  <template #summary>",
+      "    <span>$3Open me — content overlays what's below</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <div class=\"$2my-overlay-panel-body\">",
+      "      <p>$4Positioned absolutely below the summary, doesn't push page content down.</p>",
+      "    </div>",
+      "  </template>",
+      "</ExpandingPanelClassic>"
+    ]
+  },
+  "SRCDEV ExpandingPanelClassic Custom Icon": {
+    "description": "ExpandingPanelClassic with a custom toggle icon via #icon slot",
+    "scope": "vue,html",
+    "body": [
+      "<ExpandingPanelClassic name=\"$1custom-icon\">",
+      "  <template #summary>",
+      "    <span>$2Section title</span>",
+      "  </template>",
+      "  <template #icon>",
+      "    <span style=\"font-size:1.2rem\">$3+</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$4Content here.</p>",
+      "  </template>",
+      "</ExpandingPanelClassic>"
+    ]
+  },
+  "SRCDEV ExpandingPanelClassic CSS Override": {
+    "description": "CSS override scaffold for ExpandingPanelClassic tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-panel {",
+      "  .expanding-panel-classic {",
+      "    --expanding-panel-classic-summary-gap: $2;",
+      "    --expanding-panel-classic-summary-padding-block: $3;",
+      "    --expanding-panel-classic-icon-size: $4;",
+      "",
+      "    &.content-is-on-top {",
+      "      --expanding-panel-classic-content-gap: $5;",
+      "      --expanding-panel-classic-content-z-index: $6;",
+      "    }",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-expanding-panel.code-snippets

@@ -64,7 +64,7 @@
     ]
   },
   "SRCDEV ExpandingPanel Content Is On Top": {
-    "description": "ExpandingPanel with content overlaying page content instead of pushing layout down — styling must go on a wrapper INSIDE #content, never on .inner",
+    "description": "ExpandingPanel with content overlaying page content instead of pushing layout down",
     "scope": "vue,html",
     "body": [
       "<ExpandingPanel",
@@ -76,8 +76,6 @@
       "    <span>$3Open me — content overlays what's below</span>",
       "  </template>",
       "  <template #content>",
-      "    <!-- Wrapper INSIDE the slot carries background/padding/shadow — never .inner itself,",
-      "         which must stay visually unstyled or it renders while the panel is closed. -->",
       "    <div class=\"$2my-overlay-panel-body\">",
       "      <p>$4Positioned absolutely below the summary, doesn't push page content down.</p>",
       "    </div>",

package/.vscode/srcdev-component-responsive-header.code-snippets

@@ -0,0 +1,46 @@
+{
+  "SRCDEV ResponsiveHeader Basic": {
+    "description": "ResponsiveHeader with dropdown groups and a secondaryNavigation slot",
+    "scope": "vue,html",
+    "body": [
+      "<ResponsiveHeader",
+      "  :responsive-nav-links=\"$1responsiveNavLinks\"",
+      "  :style-class-passthrough=\"['site-header-nav']\"",
+      ">",
+      "  <template #secondaryNavigation>",
+      "    <NuxtLink to=\"$2/settings\" aria-label=\"$3Settings\">",
+      "      <Icon name=\"$4material-symbols:settings-outline-rounded\" />",
+      "    </NuxtLink>",
+      "  </template>",
+      "</ResponsiveHeader>"
+    ]
+  },
+  "SRCDEV ResponsiveHeader Nav Data (with dropdown)": {
+    "description": "responsiveNavLinks data with a dropdown group",
+    "scope": "typescript,vue",
+    "body": [
+      "const $1responsiveNavLinks = {",
+      "  firstNav: [",
+      "    { name: \"$2Home\", path: \"$3/\" },",
+      "    {",
+      "      name: \"$4Components\",",
+      "      childLinksTitle: \"$5UI Components\",",
+      "      childLinks: [{ name: \"$6Item\", path: \"$7/path\" }],",
+      "    },",
+      "  ],",
+      "};"
+    ]
+  },
+  "SRCDEV ResponsiveHeader CSS Override": {
+    "description": "CSS override scaffold for ResponsiveHeader token styling — sets a fixed (non-fluid) link font-size",
+    "scope": "css",
+    "body": [
+      ".$1site-header-nav {",
+      "  --responsive-header-link-color: $2inherit;",
+      "  --responsive-header-bg: $3transparent;",
+      "  /* Fixed, NOT var(--step-*) — see responsive-header.md's measurement-pipeline note. */",
+      "  --responsive-header-link-font-size: ${4:1.4rem};",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-site-header.code-snippets

@@ -0,0 +1,74 @@
+{
+  "SRCDEV SiteHeader Basic": {
+    "description": "SiteHeader wrapping PageRow + SkipLinks + ResponsiveHeader, with a branding slot",
+    "scope": "vue,html",
+    "body": [
+      "<SiteHeader",
+      "  :responsive-nav-links=\"$1responsiveNavLinks\"",
+      "  :style-class-passthrough=\"['header']\"",
+      "  :nav-style-class-passthrough=\"['site-header-nav']\"",
+      ">",
+      "  <template #branding>",
+      "    <NuxtLink to=\"/\" class=\"home-link\">$2Brand</NuxtLink>",
+      "  </template>",
+      "</SiteHeader>"
+    ]
+  },
+  "SRCDEV SiteHeader With Secondary Navigation": {
+    "description": "SiteHeader with the secondaryNavigation slot (e.g. a settings icon link)",
+    "scope": "vue,html",
+    "body": [
+      "<SiteHeader :responsive-nav-links=\"$1responsiveNavLinks\">",
+      "  <template #branding>",
+      "    <NuxtLink to=\"/\" class=\"home-link\">$2Brand</NuxtLink>",
+      "  </template>",
+      "  <template #secondaryNavigation>",
+      "    <NuxtLink to=\"$3/settings\" aria-label=\"$4Settings\">",
+      "      <Icon name=\"$5material-symbols:settings-outline-rounded\" />",
+      "    </NuxtLink>",
+      "  </template>",
+      "</SiteHeader>"
+    ]
+  },
+  "SRCDEV SiteHeader Nav Data (flat)": {
+    "description": "Simple flat responsiveNavLinks data with no dropdowns, for a few-page site",
+    "scope": "typescript,vue",
+    "body": [
+      "const $1responsiveNavLinks = {",
+      "  main: [",
+      "    { name: \"$2Home\", path: \"$3/\" },",
+      "    { name: \"$4About\", path: \"$5/about\" },",
+      "    { name: \"$6Contact\", path: \"$7/contact\" },",
+      "  ],",
+      "};"
+    ]
+  },
+  "SRCDEV SiteHeader Nav Data (with dropdown)": {
+    "description": "responsiveNavLinks data with a dropdown group, for the full overflow-nav experience",
+    "scope": "typescript,vue",
+    "body": [
+      "const $1responsiveNavLinks = {",
+      "  firstNav: [",
+      "    {",
+      "      name: \"$2Components\",",
+      "      childLinksTitle: \"$3UI Components\",",
+      "      childLinks: [{ name: \"$4Item\", path: \"$5/path\" }],",
+      "    },",
+      "    { name: \"$6Typography\", path: \"$7/typography\" },",
+      "  ],",
+      "};"
+    ]
+  },
+  "SRCDEV SiteHeader CSS Override": {
+    "description": "CSS override scaffold for SiteHeader token styling",
+    "scope": "css",
+    "body": [
+      ".$1header {",
+      "  --site-header-gap: $2 2.4rem;",
+      "  --site-header-padding-inline: $3 2.4rem;",
+      "  --site-header-bg: $4transparent;",
+      "  /* --site-header-position: sticky; */",
+      "}"
+    ]
+  }
+}

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

@@ -1,6 +1,7 @@
 <template>
   <div class="display-accordian" :class="[elementClasses]">
-    <ExpandingPanel
+    <component
+      :is="panelComponent"
       v-for="(item, key) in itemCount"
       :key="key"
       :name
@@ -17,15 +18,19 @@
       <template #content>
         <slot :name="`accordian-${key}-content`"></slot>
       </template>
-    </ExpandingPanel>
+    </component>
   </div>
 </template>
 
 <script setup lang="ts">
+import ExpandingPanel from "../expanding-panel/ExpandingPanel.vue";
+import ExpandingPanelClassic from "../expanding-panel-classic/ExpandingPanelClassic.vue";
+
 interface Props {
   name?: string;
   itemCount?: number;
   animationDuration?: number;
+  variant?: "modern" | "classic";
   styleClassPassthrough?: string | string[];
 }
 
@@ -33,26 +38,29 @@ const props = withDefaults(defineProps<Props>(), {
   name: undefined,
   itemCount: 0,
   animationDuration: 300,
+  variant: "modern",
   styleClassPassthrough: () => [],
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+const panelComponent = computed(() => (props.variant === "classic" ? ExpandingPanelClassic : ExpandingPanel));
 </script>
 
 <style lang="css">
 @layer components {
-.display-accordian {
-  max-width: 600px;
-  margin: 0 auto;
+  .display-accordian {
+    max-width: 600px;
+    margin: 0 auto;
 
-  .accordian-item {
-    &.expanding-panel {
-      transition:
-        margin-block-end v-bind(animationDurationStr) ease-in-out,
-        border-radius v-bind(animationDurationStr) ease-in-out;
+    .accordian-item {
+      &.expanding-panel,
+      &.expanding-panel-classic {
+        transition:
+          margin-block-end v-bind(animationDurationStr) ease-in-out,
+          border-radius v-bind(animationDurationStr) ease-in-out;
+      }
     }
   }
 }
-}
 </style>

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

@@ -0,0 +1,93 @@
+# AccordianCore — Consumer Styling Guide
+
+## No tokens of its own
+
+`AccordianCore` doesn't define any `--accordian-*` custom properties. It's a thin wrapper that
+renders `itemCount` copies of a panel component (`ExpandingPanel` by default, or
+`ExpandingPanelClassic` when `variant="classic"`) and forwards `name`/`animationDuration` to each
+one — all real styling surface lives on whichever panel component is active. See that
+component's own `CONSUMER-STYLING.md`:
+
+- [../expanding-panel/CONSUMER-STYLING.md](../expanding-panel/CONSUMER-STYLING.md) (default, `variant="modern"`)
+- [../expanding-panel-classic/CONSUMER-STYLING.md](../expanding-panel-classic/CONSUMER-STYLING.md) (`variant="classic"`)
+
+`--expanding-panel-*` tokens set at any scope (global, page) apply to `AccordianCore`'s panels
+too, since they're the same underlying component — no `AccordianCore`-specific override is
+needed for summary gap, icon size, etc.
+
+---
+
+## The `.accordian-item` hook
+
+Every panel gets `style-class-passthrough="['accordian-item']"` automatically — this is the one
+`AccordianCore`-specific override surface, used to target *all* panels in the group without
+reaching into `ExpandingPanel`/`ExpandingPanelClassic` internals.
+
+```css
+/* In the consuming page's unscoped <style> block */
+.display-accordian {
+  .accordian-item.expanding-panel {
+    /* modern variant (default) */
+    border-block-end: 1px solid var(--theme-border, #e0e0e0);
+  }
+
+  /* If this instance uses variant="classic", target the classic root class instead: */
+  .accordian-item.expanding-panel-classic {
+    border-block-end: 1px solid var(--theme-border, #e0e0e0);
+  }
+}
+```
+
+Note the root class differs by variant (`.expanding-panel` vs `.expanding-panel-classic`) — a
+selector written for one won't match the other. If you switch `variant` on an existing instance,
+check any `.accordian-item.expanding-panel*` overrides still target the right class.
+
+---
+
+## Page-scoped overrides
+
+No `:deep()` is required (component styles are unscoped).
+
+```css
+.faq-section {
+  .display-accordian {
+    max-width: 480px;
+
+    .accordian-item.expanding-panel {
+      --expanding-panel-summary-padding-block: 1.6rem;
+    }
+  }
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+Use sparingly — prefer global or page-scoped CSS. `styleClassPassthrough` on `AccordianCore`
+targets the root `.display-accordian` element, not the individual panels (those already get
+`.accordian-item` automatically):
+
+```vue
+<AccordianCore name="faq" :item-count="3" :style-class-passthrough="['compact-faq']">
+  ...
+</AccordianCore>
+```
+
+```css
+.display-accordian.compact-faq {
+  max-width: 400px;
+}
+```
+
+---
+
+## Notes
+
+- `variant` is group-wide: every panel in one `AccordianCore` renders the same component, so
+  there's no per-panel styling divergence caused by variant — just remember which root class
+  (`.expanding-panel` vs `.expanding-panel-classic`) your `.accordian-item` selectors need.
+- `contentIsOnTop` isn't exposed on `AccordianCore` — it isn't meaningful for a grouped accordion
+  (see `ExpandingPanel`'s own docs for why: it's for a single panel overlaying trailing page
+  content, not stacked/grouped panels). Use `ExpandingPanel`/`ExpandingPanelClassic` directly if
+  you need an overlay panel.

package/app/components/02.molecules/expandable/accordian/stories/AccordianCore.stories.ts

@@ -18,6 +18,14 @@ const meta: Meta<typeof AccordianCore> = {
       control: { type: "number", min: 0, step: 50 },
       description: "Expand/collapse animation duration in milliseconds",
     },
+    variant: {
+      control: { type: "radio" },
+      options: ["modern", "classic"],
+      description:
+        "Which panel implementation to render: 'modern' (ExpandingPanel, ::details-content based) or " +
+        "'classic' (ExpandingPanelClassic, grid-template-rows based) — use classic when the open/close " +
+        "animation must run identically in every browser today",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -27,6 +35,7 @@ const meta: Meta<typeof AccordianCore> = {
     name: undefined,
     itemCount: 3,
     animationDuration: 300,
+    variant: "modern",
     styleClassPassthrough: [],
   },
 };
@@ -71,6 +80,28 @@ export const Default: Story = {
   }),
 };
 
+export const ClassicVariant: Story = {
+  name: "Classic Variant",
+  args: {
+    itemCount: 3,
+    animationDuration: 300,
+    variant: "classic",
+  },
+  render: (args) => ({
+    components: { AccordianCore },
+    setup() {
+      return { args, slots: buildGenericSlots(args.itemCount ?? 3) };
+    },
+    template: `
+      <AccordianCore v-bind="args">
+        <template v-for="(content, name) in slots" #[name] :key="name">
+          <span v-html="content" />
+        </template>
+      </AccordianCore>
+    `,
+  }),
+};
+
 export const SinglePanel: Story = {
   args: {
     itemCount: 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,