srcdev-nuxt-components 9.2.11 → 9.3.1

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/app.config.ts

@@ -1,4 +1,4 @@
-import type { SemanticTheme, DisplayPromptTheme, DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "~/types/components";
+import type { SemanticTheme, DisplayPromptTheme, DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "./types/components";
 
 export default defineAppConfig({
   srcdev: {

package/app/assets/styles/setup/01.config/index.css

@@ -1,2 +1,2 @@
-@import "./_normalise";
-@import "./_head";
+@import "./_normalise.css";
+@import "./_head.css";

package/app/assets/styles/setup/02.colours/index.css

@@ -1,8 +1,8 @@
-@import "./_theme-params";
-@import "./_amber";
-@import "./_blue";
-@import "./_green";
-@import "./_orange";
-@import "./_red";
-@import "./_slate";
-@import "./_sunset";
+@import "./_theme-params.css";
+@import "./_amber.css";
+@import "./_blue.css";
+@import "./_green.css";
+@import "./_orange.css";
+@import "./_red.css";
+@import "./_slate.css";
+@import "./_sunset.css";

package/app/assets/styles/setup/03.theming/index.css

@@ -1,6 +1,6 @@
-@import "./theme-ramp";
-@import "./_theme-slots";
-@import "./_default";
-@import "./_error";
-@import "./_success";
-@import "./_warning";
+@import "./theme-ramp.css";
+@import "./_theme-slots.css";
+@import "./_default.css";
+@import "./_error.css";
+@import "./_success.css";
+@import "./_warning.css";

package/app/assets/styles/setup/04.elements/forms/index.css

@@ -1,7 +1,7 @@
-@import "./00.element-defaults";
+@import "./00.element-defaults.css";
 @import "./01.field-layout-container-level.css";
 @import "./02.typography.css";
-@import "./03.generic-input-geometry";
+@import "./03.generic-input-geometry.css";
 @import "./04.slot-icon-system.css";
 @import "./05.checkbox-radio-geometry.css";
 @import "./06.button-geometry.css";

package/app/assets/styles/setup/04.elements/index.css

@@ -1 +1 @@
-@import "./forms/";
+@import "./forms/index.css";

package/app/assets/styles/setup/05.typography/01.tokens/index.css

@@ -1,3 +1,3 @@
-@import "./_font-family";
-@import "./_reponsive-font-sizes";
-@import "./_timing-functions";
+@import "./_font-family.css";
+@import "./_reponsive-font-sizes.css";
+@import "./_timing-functions.css";

package/app/assets/styles/setup/05.typography/02.utility-classes/index.css

@@ -1,9 +1,9 @@
-@import "./_font-classes-page-heading";
-@import "./_font-classes-page-body";
-@import "./_font-classes-page-link";
-@import "./_font-classes-section";
-@import "./_font-classes-article";
-@import "./_font-classes-card";
+@import "./_font-classes-page-heading.css";
+@import "./_font-classes-page-body.css";
+@import "./_font-classes-page-link.css";
+@import "./_font-classes-section.css";
+@import "./_font-classes-article.css";
+@import "./_font-classes-card.css";
 @import "./_generic-font-classes.css";
 @import "./_generic-font-variation-settings.css";
 @import "./_generic-font-weights.css";

package/app/assets/styles/setup/05.typography/index.css

@@ -1,2 +1,2 @@
-@import "./01.tokens";
-@import "./02.utility-classes";
+@import "./01.tokens/index.css";
+@import "./02.utility-classes/index.css";

package/app/assets/styles/setup/06.utility-classes/animations/index.css

@@ -1,5 +1,5 @@
-@import "./_entry-zoom-reveal";
-@import "./_entry-slide-in";
-@import "./_entry-exit-blur";
-@import "./_auto-rotate";
+@import "./_entry-zoom-reveal.css";
+@import "./_entry-slide-in.css";
+@import "./_entry-exit-blur.css";
+@import "./_auto-rotate.css";
 @import "./_animation-scroller-x.css";

package/app/assets/styles/setup/06.utility-classes/index.css

@@ -1,4 +1,4 @@
-@import "./animations/";
-@import "./spacing/";
+@import "./animations/index.css";
+@import "./spacing/index.css";
 /* @import "./layout/"; */
-@import "./_a11y";
+@import "./_a11y.css";

package/app/assets/styles/setup/06.utility-classes/spacing/index.css

@@ -1,3 +1,3 @@
-@import "./_fluid-spacing";
-@import "./_margin";
-@import "./_padding";
+@import "./_fluid-spacing.css";
+@import "./_margin.css";
+@import "./_padding.css";

package/app/assets/styles/setup/a11y/index.css

@@ -1 +1 @@
-@import "./_variables";
+@import "./_variables.css";

package/app/assets/styles/setup/index.css

@@ -1,9 +1,9 @@
 @layer reset, colours, theming, form-tokens, typography, a11y, components, utilities, consumer;
 
-@import "./01.config/" layer(reset);
-@import "./02.colours/" layer(colours);
-@import "./03.theming/" layer(theming);
-@import "./04.elements/" layer(form-tokens);
-@import "./05.typography/" layer(typography);
-@import "./a11y/" layer(a11y);
-@import "./06.utility-classes/" layer(utilities);
+@import "./01.config/index.css" layer(reset);
+@import "./02.colours/index.css" layer(colours);
+@import "./03.theming/index.css" layer(theming);
+@import "./04.elements/index.css" layer(form-tokens);
+@import "./05.typography/index.css" layer(typography);
+@import "./a11y/index.css" layer(a11y);
+@import "./06.utility-classes/index.css" layer(utilities);

package/app/components/01.atoms/content-wrappers/docs-pages/tests/ContentDocs.spec.ts

@@ -9,7 +9,9 @@ beforeEach(() => {
   resizeCallback = null;
   vi.stubGlobal(
     "ResizeObserver",
-    vi.fn((callback: ResizeObserverCallback) => {
+    // Vitest 4: a mock's implementation must be a regular function (not an
+    // arrow function) to remain constructible via `new`.
+    vi.fn(function (callback: ResizeObserverCallback) {
       resizeCallback = callback;
       return {
         observe: vi.fn(),

package/app/components/02.molecules/alert-masked-content/tests/AlertMaskedContent.spec.ts

@@ -2,11 +2,15 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import AlertMaskedContent from "../AlertMaskedContent.vue";
 
-const mockResizeObserver = vi.fn(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+// Vitest 4: a mock's implementation must be a regular function (not an
+// arrow function) to remain constructible via `new`.
+const mockResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
 
 vi.stubGlobal("ResizeObserver", mockResizeObserver);
 

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,