srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/02.molecules/expandable/accordion-chat/tests/AccordionChat.spec.ts

@@ -0,0 +1,205 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import type { VueWrapper } from "@vue/test-utils";
+import { defineComponent, nextTick, ref } from "vue";
+import AccordionChat from "../AccordionChat.vue";
+
+const twoItems = {
+  "item-0-summary": "<span>Question 0</span>",
+  "item-0-content": "<p class='answer-0'>Answer 0</p>",
+  "item-1-summary": "<span>Question 1</span>",
+  "item-1-content": "<p class='answer-1'>Answer 1</p>",
+};
+
+describe("AccordionChat", () => {
+  let wrapper: VueWrapper | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.restoreAllMocks();
+  });
+
+  // ─── Mount and root ───────────────────────────────────────────────────────
+
+  it("mounts with the accordion-chat root class", async () => {
+    wrapper = await mountSuspended(AccordionChat, { slots: twoItems });
+    expect(wrapper.classes()).toContain("accordion-chat");
+  });
+
+  it("renders correct HTML structure", async () => {
+    wrapper = await mountSuspended(AccordionChat, {
+      props: { name: "faq", avatarLabel: "AM" },
+      slots: twoItems,
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Panels inferred from slots ───────────────────────────────────────────
+
+  it("renders one panel per item-{n}-summary slot", async () => {
+    wrapper = await mountSuspended(AccordionChat, { slots: twoItems });
+    expect(wrapper.findAll(".accordion-chat-item")).toHaveLength(2);
+  });
+
+  it("renders gapped indexes in numeric order and ignores orphan content", async () => {
+    wrapper = await mountSuspended(AccordionChat, {
+      slots: {
+        "item-7-summary": "<span>Seven</span>",
+        "item-2-summary": "<span>Two</span>",
+        "item-4-content": "<p>Orphan</p>",
+      },
+    });
+    expect(wrapper.findAll("summary").map((s) => s.text())).toEqual(["Two", "Seven"]);
+    expect(wrapper.text()).not.toContain("Orphan");
+  });
+
+  it("adds a panel when a summary slot appears after mount", async () => {
+    const Host = defineComponent({
+      components: { AccordionChat },
+      setup() {
+        const showSecond = ref(false);
+        return { showSecond };
+      },
+      template: `
+        <AccordionChat>
+          <template #item-0-summary>First</template>
+          <template v-if="showSecond" #item-1-summary>Second</template>
+        </AccordionChat>
+      `,
+    });
+    wrapper = await mountSuspended(Host);
+    expect(wrapper.findAll(".accordion-chat-item")).toHaveLength(1);
+    (wrapper.vm as unknown as { showSecond: boolean }).showSecond = true;
+    await nextTick();
+    expect(wrapper.findAll(".accordion-chat-item")).toHaveLength(2);
+  });
+
+  // ─── Bubbles ──────────────────────────────────────────────────────────────
+
+  it("puts the summary in the question bubble and the content in the answer bubble", async () => {
+    wrapper = await mountSuspended(AccordionChat, { slots: twoItems });
+    const second = wrapper.findAll(".accordion-chat-item")[1]!;
+    expect(second.find("summary").text()).toContain("Question 1");
+    expect(second.find(".accordion-chat-bubble .answer-1").exists()).toBe(true);
+  });
+
+  it("renders no answer bubble for a panel without a content slot", async () => {
+    wrapper = await mountSuspended(AccordionChat, {
+      props: { avatarLabel: "A" },
+      slots: { "item-0-summary": "<span>No answer</span>" },
+    });
+    expect(wrapper.find(".accordion-chat-answer").exists()).toBe(false);
+  });
+
+  it("shows the default plus icon, and an item-{n}-icon slot replaces it", async () => {
+    wrapper = await mountSuspended(AccordionChat, {
+      slots: { ...twoItems, "item-1-icon": "<span class='custom-icon'>?</span>" },
+    });
+    const [first, second] = wrapper.findAll(".accordion-chat-item");
+    expect(first!.find(".accordion-chat-icon").attributes("aria-hidden")).toBe("true");
+    expect(second!.find(".accordion-chat-icon").exists()).toBe(false);
+    expect(second!.find(".custom-icon").exists()).toBe(true);
+  });
+
+  // ─── Avatar precedence ────────────────────────────────────────────────────
+
+  it("uses the avatarLabel when no avatar slot is given", async () => {
+    wrapper = await mountSuspended(AccordionChat, { props: { avatarLabel: "S" }, slots: twoItems });
+    expect(wrapper.findAll(".accordion-chat-avatar").map((a) => a.text())).toEqual(["S", "S"]);
+  });
+
+  it("prefers the group #avatar slot over the label", async () => {
+    wrapper = await mountSuspended(AccordionChat, {
+      props: { avatarLabel: "S" },
+      slots: { ...twoItems, avatar: "<span class='group-avatar'>G</span>" },
+    });
+    expect(wrapper.findAll(".accordion-chat-avatar .group-avatar")).toHaveLength(2);
+    expect(wrapper.find(".accordion-chat-avatar").text()).toBe("G");
+  });
+
+  it("prefers a per-panel avatar slot over the group slot", async () => {
+    wrapper = await mountSuspended(AccordionChat, {
+      slots: {
+        ...twoItems,
+        avatar: "<span class='group-avatar'>G</span>",
+        "item-1-avatar": "<span class='panel-avatar'>P</span>",
+      },
+    });
+    const avatars = wrapper.findAll(".accordion-chat-avatar");
+    expect(avatars[0]!.find(".group-avatar").exists()).toBe(true);
+    expect(avatars[1]!.find(".panel-avatar").exists()).toBe(true);
+    expect(avatars[1]!.find(".group-avatar").exists()).toBe(false);
+  });
+
+  it("renders no avatar column when there is no slot and no label", async () => {
+    wrapper = await mountSuspended(AccordionChat, { slots: twoItems });
+    expect(wrapper.find(".accordion-chat-avatar").exists()).toBe(false);
+  });
+
+  it("only gives an avatar to the panel that has its own avatar slot", async () => {
+    wrapper = await mountSuspended(AccordionChat, {
+      slots: { ...twoItems, "item-0-avatar": "<span>P</span>" },
+    });
+    const [first, second] = wrapper.findAll(".accordion-chat-item");
+    expect(first!.find(".accordion-chat-avatar").exists()).toBe(true);
+    expect(second!.find(".accordion-chat-avatar").exists()).toBe(false);
+  });
+
+  it("removes the avatar column when showAvatar is false", async () => {
+    wrapper = await mountSuspended(AccordionChat, {
+      props: { avatarLabel: "S", showAvatar: false },
+      slots: { ...twoItems, avatar: "<span>G</span>" },
+    });
+    expect(wrapper.find(".accordion-chat-avatar").exists()).toBe(false);
+  });
+
+  it("hides the avatar from assistive tech", async () => {
+    wrapper = await mountSuspended(AccordionChat, { props: { avatarLabel: "S" }, slots: twoItems });
+    expect(wrapper.find(".accordion-chat-avatar").attributes("aria-hidden")).toBe("true");
+  });
+
+  it.each([
+    ["Alexandra", "Al"],
+    ["  Sam ", "Sa"],
+    ["👩‍🔬 Lab", "👩‍🔬 "],
+    ["N", "N"],
+  ])("trims avatarLabel %j to two characters", async (avatarLabel, expected) => {
+    wrapper = await mountSuspended(AccordionChat, { props: { avatarLabel }, slots: twoItems });
+    expect(wrapper.find(".accordion-chat-avatar").text()).toBe(expected.trim());
+  });
+
+  // ─── Panel behaviour from ExpandingPanelClassic ───────────────────────────
+
+  it("gives every panel's <details> the shared name", async () => {
+    wrapper = await mountSuspended(AccordionChat, { props: { name: "faq" }, slots: twoItems });
+    expect(wrapper.findAll("details").map((d) => d.attributes("name"))).toEqual(["faq", "faq"]);
+  });
+
+  it("keeps the panel's aria-expanded and unique aria-controls pairing", async () => {
+    wrapper = await mountSuspended(AccordionChat, { props: { name: "faq" }, slots: twoItems });
+    const summaries = wrapper.findAll("summary");
+    expect(summaries.map((s) => s.attributes("aria-expanded"))).toEqual(["false", "false"]);
+    const ids = wrapper.findAll("[id]").map((el) => el.attributes("id"));
+    expect(new Set(ids).size).toBe(ids.length);
+    for (const summary of summaries) {
+      const region = wrapper.find(`[id="${summary.attributes("aria-controls")}"]`);
+      expect(region.attributes("aria-labelledby")).toBe(summary.attributes("id"));
+    }
+  });
+
+  it("toggles aria-expanded when a question is clicked", async () => {
+    wrapper = await mountSuspended(AccordionChat, { slots: twoItems });
+    await wrapper.find("summary").trigger("click");
+    expect(wrapper.find("summary").attributes("aria-expanded")).toBe("true");
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies and updates styleClassPassthrough classes on the root", async () => {
+    wrapper = await mountSuspended(AccordionChat, { props: { styleClassPassthrough: ["faq"] } });
+    expect(wrapper.classes()).toContain("faq");
+    await wrapper.setProps({ styleClassPassthrough: ["help"] });
+    expect(wrapper.classes()).not.toContain("faq");
+    expect(wrapper.classes()).toContain("help");
+  });
+});

package/app/components/02.molecules/expandable/accordion-chat/tests/__snapshots__/AccordionChat.spec.ts.snap

@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AccordionChat > renders correct HTML structure 1`] = `
+"<div class="accordion-chat">
+  <div class="expanding-panel-classic accordion-chat-item">
+    <details class="expanding-panel-classic-details" name="faq">
+      <summary id="v-0-0-1-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-0-1-content" aria-expanded="false">
+        <div class="label-wrapper"><span>Question 0</span></div>
+        <div class="icon-wrapper"><span class="accordion-chat-icon" aria-hidden="true"><span class="iconify i-lucide:plus accordion-chat-icon-glyph" aria-hidden="true"></span></span></div>
+      </summary>
+    </details>
+    <div id="v-0-0-1-content" class="expanding-panel-classic-content" aria-labelledby="v-0-0-1-trigger" role="region">
+      <div class="inner">
+        <div class="accordion-chat-answer"><span class="accordion-chat-avatar" aria-hidden="true">AM</span>
+          <div class="accordion-chat-bubble">
+            <p class="answer-0">Answer 0</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="expanding-panel-classic accordion-chat-item">
+    <details class="expanding-panel-classic-details" name="faq">
+      <summary id="v-0-0-3-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-0-3-content" aria-expanded="false">
+        <div class="label-wrapper"><span>Question 1</span></div>
+        <div class="icon-wrapper"><span class="accordion-chat-icon" aria-hidden="true"><span class="iconify i-lucide:plus accordion-chat-icon-glyph" aria-hidden="true"></span></span></div>
+      </summary>
+    </details>
+    <div id="v-0-0-3-content" class="expanding-panel-classic-content" aria-labelledby="v-0-0-3-trigger" role="region">
+      <div class="inner">
+        <div class="accordion-chat-answer"><span class="accordion-chat-avatar" aria-hidden="true">AM</span>
+          <div class="accordion-chat-bubble">
+            <p class="answer-1">Answer 1</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/02.molecules/expandable/{accordian/AccordianCore.vue → accordion-group/AccordionGroup.vue}

@@ -1,22 +1,21 @@
 <template>
-  <div class="display-accordian" :class="[elementClasses]">
+  <div class="accordion-group" :class="elementClasses">
     <component
       :is="panelComponent"
-      v-for="(item, key) in itemCount"
-      :key="key"
+      v-for="index in panelIndexes()"
+      :key="index"
       :name
       :animation-duration="animationDuration"
-      icon-size="medium"
-      :style-class-passthrough="['accordian-item']"
+      :style-class-passthrough="['accordion-group-item']"
     >
       <template #summary>
-        <slot :name="`accordian-${key}-summary`"></slot>
+        <slot :name="`item-${index}-summary`"></slot>
       </template>
-      <template #icon>
-        <slot :name="`accordian-${key}-icon`"></slot>
+      <template v-if="slots[`item-${index}-icon`]" #icon>
+        <slot :name="`item-${index}-icon`"></slot>
       </template>
       <template #content>
-        <slot :name="`accordian-${key}-content`"></slot>
+        <slot :name="`item-${index}-content`"></slot>
       </template>
     </component>
   </div>
@@ -28,36 +27,49 @@ import ExpandingPanelClassic from "../expanding-panel-classic/ExpandingPanelClas
 
 interface Props {
   name?: string;
-  itemCount?: number;
   animationDuration?: number;
   variant?: "modern" | "classic";
   styleClassPassthrough?: string | string[];
 }
 
-// Defaults to "classic" (not "modern") — ExpandingPanel's animation/positioning relies on
-// ::details-content, which WebKit (Safari/iOS) doesn't support (see ExpandingPanel's own dev-mode
-// warning and CLAUDE.md pitfall #19). "modern" is opt-in for consumers who've confirmed it works
-// for their audience, not the safe default.
+// "classic" by default: "modern" relies on ::details-content, which WebKit lacks (pitfall #19).
 const props = withDefaults(defineProps<Props>(), {
   name: undefined,
-  itemCount: 0,
   animationDuration: 300,
   variant: "classic",
   styleClassPassthrough: () => [],
 });
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots();
+const SUMMARY_SLOT = /^item-(\d+)-summary$/;
+
+const panelIndexes = () =>
+  Object.keys(slots)
+    .map((slotName) => SUMMARY_SLOT.exec(slotName)?.[1])
+    .filter((index): index is string => index !== undefined)
+    .map(Number)
+    .sort((a, b) => a - b);
+
 const animationDurationStr = computed(() => `${props.animationDuration}ms`);
 const panelComponent = computed(() => (props.variant === "classic" ? ExpandingPanelClassic : ExpandingPanel));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-  .display-accordian {
-    max-width: 600px;
-    margin: 0 auto;
+  .accordion-group {
+    max-inline-size: var(--accordion-group-max-width, 60rem);
+    margin-inline: auto;
 
-    .accordian-item {
+    .accordion-group-item {
       &.expanding-panel,
       &.expanding-panel-classic {
         transition:

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

@@ -0,0 +1,66 @@
+# AccordionGroup — Consumer Styling Guide
+
+> Renamed 2026-10-20: `AccordianCore` → `AccordionGroup`, root class `.display-accordian` →
+> `.accordion-group`, panel class `.accordian-item` → `.accordion-group-item`.
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--accordion-group-max-width` | `60rem` | Maximum width of the group (it centres itself with `margin-inline: auto`). Use `100%` to fill the container. |
+
+> Changed 2026-10-20: the width was a hardcoded `max-width: 600px`; it's now this token, same
+> default.
+
+Everything else (summary padding and gap, icon size, colours, borders) belongs to the panel
+component the group renders, so set those panels' tokens; they reach every panel in the group:
+
+- `variant="classic"` (default): `ExpandingPanelClassic`, see
+  [../expanding-panel-classic/CONSUMER-STYLING.md](../expanding-panel-classic/CONSUMER-STYLING.md)
+- `variant="modern"`: `ExpandingPanel`, see
+  [../expanding-panel/CONSUMER-STYLING.md](../expanding-panel/CONSUMER-STYLING.md)
+
+Private tokens: none. The animation duration reaches the CSS through `v-bind()` from the
+`animationDuration` prop.
+
+## State hooks
+
+| Selector | Meaning |
+|---|---|
+| `.accordion-group` | Root element. |
+| `.accordion-group-item` | Every panel in the group (added through each panel's `style-class-passthrough`). |
+| `.accordion-group-item.expanding-panel-classic` | A panel, `variant="classic"`. |
+| `.accordion-group-item.expanding-panel` | A panel, `variant="modern"`. |
+
+The panel root class depends on `variant`, so a selector written for one variant won't match the
+other.
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+## Recipe: dividers between panels
+
+```css
+.faq-section {
+  --accordion-group-max-width: 72rem;
+
+  .accordion-group-item:not(:last-child) {
+    border-block-end: 0.1rem solid var(--theme-border);
+  }
+}
+```
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `.accordion-group` (reactive after mount). The
+panels always get `.accordion-group-item`; there's no per-panel passthrough.
+
+## Notes
+
+- `contentIsOnTop` isn't exposed: it's for a single panel overlaying the content after it, not
+  stacked panels. Use `ExpandingPanel`/`ExpandingPanelClassic` directly for that.

package/app/components/02.molecules/expandable/accordion-group/stories/AccordionGroup.stories.ts

@@ -0,0 +1,238 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import AccordionGroup from "../AccordionGroup.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  name?: string;
+  animationDuration?: number;
+  variant?: "modern" | "classic";
+  panelCount?: number;
+  maxWidth?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Molecules/Expandable/AccordionGroup",
+  component: AccordionGroup,
+  argTypes: {
+    name: {
+      control: { type: "text" },
+      description:
+        "Shared `name` on every panel's `<details>`, so the browser keeps only one open at a time. Leave empty for independent panels.",
+    },
+    animationDuration: {
+      control: { type: "number", min: 0, step: 50 },
+      description: "Open/close animation duration in milliseconds, passed to every panel.",
+    },
+    variant: {
+      control: { type: "inline-radio" },
+      options: ["classic", "modern"],
+      description:
+        "`classic` (ExpandingPanelClassic, default, works in every browser) or `modern` (ExpandingPanel, needs `::details-content`, so not WebKit).",
+    },
+    panelCount: {
+      control: { type: "range", min: 0, max: 8, step: 1 },
+      description: "**Story control, not a prop.** How many `item-{n}-summary` slots the story fills; the component counts them itself.",
+      table: { category: "Slot content (story only)" },
+    },
+    maxWidth: {
+      control: { type: "select" },
+      options: ["40rem", "60rem", "100%"],
+      description:
+        "**Story control, not a prop.** Sets `--accordion-group-max-width`. In your CSS: `.faq { --accordion-group-max-width: 80rem; }`",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
+    },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    name: "",
+    animationDuration: 300,
+    variant: "classic",
+    panelCount: 3,
+    maxWidth: "60rem",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A group of expanding panels. Each panel is defined by `item-{n}-summary`, `item-{n}-content` and an optional `item-{n}-icon` slot; " +
+          "the group renders one panel per `item-{n}-summary` slot, in numeric order, so there's no count to keep in sync. " +
+          "Pass `name` to make it exclusive (one panel open at a time). `variant` picks the panel implementation, `classic` by default " +
+          "because `modern` relies on `::details-content`, which WebKit lacks.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const faqs = [
+  { q: "How long does a first appointment take?", a: "Allow about an hour, including a short consultation before we start." },
+  { q: "Can I change or cancel a booking?", a: "Yes, up to 24 hours before your appointment, from the link in your confirmation email." },
+  { q: "Do you offer gift vouchers?", a: "Vouchers are available in any amount and are valid for twelve months." },
+  { q: "Is there parking nearby?", a: "There's free on-street parking on Northtown Road and a pay car park two minutes away." },
+  { q: "Which payment methods do you accept?", a: "Card, contactless and cash." },
+  { q: "Do I need to bring anything?", a: "Just yourself. Wear something comfortable." },
+  { q: "Is the studio accessible?", a: "Everything is on the ground floor, with step-free access from the street." },
+  { q: "Can I bring a friend?", a: "Of course, there's a seating area in reception." },
+];
+
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => ({
+    name: args.name || undefined,
+    animationDuration: args.animationDuration,
+    variant: args.variant,
+  }));
+  const tokenStyle = computed(() => ({ "--accordion-group-max-width": args.maxWidth }));
+  const items = computed(() => faqs.slice(0, args.panelCount ?? 3));
+  return { componentArgs, tokenStyle, items };
+}
+
+const faqTemplate = `
+  <AccordionGroup v-bind="componentArgs" :style="tokenStyle">
+    <template v-for="(item, i) in items" :key="i" #[\`item-\${i}-summary\`]>{{ item.q }}</template>
+    <template v-for="(item, i) in items" :key="'c' + i" #[\`item-\${i}-content\`]><p style="margin: 0; padding-block: 0.8rem;">{{ item.a }}</p></template>
+  </AccordionGroup>
+`;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { AccordionGroup },
+    setup() {
+      return useStorySetup(args);
+    },
+    template: `<div style="padding: 2.4rem;">${faqTemplate}</div>`,
+  }),
+  parameters: {
+    docs: { description: { story: "Independent panels: any number can be open. Change the panel count control to add or remove `item-{n}-summary` slots." } },
+  },
+};
+
+export const ExclusiveOpen: Story = {
+  name: "Exclusive Open (shared name)",
+  args: { name: "faq", panelCount: 4 },
+  render: Default.render,
+  parameters: {
+    docs: { description: { story: "With `name` set, opening one panel closes the others (native `<details name>` grouping). Each panel still gets its own ids." } },
+  },
+};
+
+export const ModernVariant: Story = {
+  name: "Modern Variant",
+  args: { variant: "modern" },
+  render: Default.render,
+  parameters: {
+    docs: { description: { story: "`variant=\"modern\"` renders `ExpandingPanel`, animated with `::details-content`. It doesn't animate in WebKit (Safari, every iOS browser)." } },
+  },
+};
+
+export const CustomIcons: Story = {
+  name: "Custom Icons",
+  render: (args) => ({
+    components: { AccordionGroup },
+    setup() {
+      return useStorySetup(args);
+    },
+    template: `
+      <div style="padding: 2.4rem;">
+        <AccordionGroup v-bind="componentArgs" :style="tokenStyle">
+          <template #item-0-summary>Default caret (no icon slot)</template>
+          <template #item-0-content><p style="margin: 0; padding-block: 0.8rem;">This panel keeps the panel's own caret.</p></template>
+          <template #item-1-summary>Custom icon</template>
+          <template #item-1-icon><Icon name="lucide:plus" /></template>
+          <template #item-1-content><p style="margin: 0; padding-block: 0.8rem;">This panel's caret is replaced by its <code>item-1-icon</code> slot.</p></template>
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: { description: { story: "`item-{n}-icon` is optional per panel. Without it the panel keeps its default caret." } },
+  },
+};
+
+export const SlowAnimation: Story = {
+  name: "Slow Animation (800ms)",
+  args: { animationDuration: 800 },
+  render: Default.render,
+};
+
+export const NoPanels: Story = {
+  name: "No Panels",
+  args: { panelCount: 0 },
+  render: Default.render,
+  parameters: {
+    docs: { description: { story: "With no `item-{n}-summary` slots the group renders an empty wrapper." } },
+  },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: { name: "stress", maxWidth: "100%" },
+  render: (args) => ({
+    components: { AccordionGroup },
+    setup() {
+      const longUnbroken = "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft";
+      const longUrl = "https://example.com/" + "a-very-long-path-segment-without-spaces".repeat(4);
+      const longCopy =
+        "Unsere Behandlungen werden individuell auf Ihre Bedürfnisse abgestimmt, damit Sie sich rundum wohlfühlen. ".repeat(8);
+      return { ...useStorySetup(args), longUnbroken, longUrl, longCopy };
+    },
+    template: `
+      <div style="padding: 1.6rem;">
+        <AccordionGroup v-bind="componentArgs" :style="tokenStyle">
+          <template #item-0-summary>{{ longUnbroken }}</template>
+          <template #item-0-content><p style="margin: 0; padding-block: 0.8rem;">{{ longUrl }}</p></template>
+
+          <template #item-1-summary>{{ longCopy.slice(0, 220) }}</template>
+          <template #item-1-content><p style="margin: 0; padding-block: 0.8rem;">{{ longCopy }}</p></template>
+
+          <template #item-2-summary>🎉 Emoji first, then &lt;b&gt;html&lt;/b&gt; as text</template>
+          <template #item-2-content><p style="margin: 0; padding-block: 0.8rem;">&lt;script&gt;alert(1)&lt;/script&gt;</p></template>
+
+          <template #item-3-summary><span dir="rtl">سؤال طويل من اليمين إلى اليسار للتحقق من الاتجاه</span></template>
+          <template #item-3-content><p dir="rtl" style="margin: 0; padding-block: 0.8rem;">إجابة قصيرة.</p></template>
+
+          <template #item-4-summary>A</template>
+          <template #item-4-content></template>
+
+          <template #item-9-summary>Gapped index (item-9 after item-4)</template>
+          <template #item-9-content><p style="margin: 0; padding-block: 0.8rem;">Indexes needn't be contiguous; panels render in numeric order.</p></template>
+
+          <template #item-7-content><p>Orphan content with no summary: never rendered.</p></template>
+        </AccordionGroup>
+      </div>
+    `,
+  }),
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "mobileCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "720px" },
+      description: {
+        story:
+          "Open each panel at every canvas width. Long unbroken words and URLs should wrap inside the summary and content, the caret should " +
+          "stay visible beside a three-line summary, emoji and HTML-like text render as text, the RTL summary reads right to left, the empty " +
+          "content panel opens to nothing, item-9 follows item-4, and the orphan item-7 content never appears.",
+      },
+    },
+  },
+};