srcdev-nuxt-components 9.6.17 → 9.6.19

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

@@ -0,0 +1,347 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import AccordionChat from "../AccordionChat.vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  name?: string;
+  animationDuration?: number;
+  avatarLabel?: string;
+  showAvatar?: boolean;
+  radius?: string;
+  bubbleMaxWidth?: string;
+  gap?: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const tokenCategory = "CSS tokens (story only, set in your CSS)";
+
+const meta: Meta<StoryArgs> = {
+  title: "Molecules/Expandable/AccordionChat",
+  component: AccordionChat,
+  argTypes: {
+    name: {
+      control: { type: "text" },
+      description: "Shared `name` on every panel's `<details>`: only one answer open at a time. Leave empty for independent panels.",
+    },
+    animationDuration: {
+      control: { type: "number", min: 0, step: 50 },
+      description: "Open/close (row height) animation in milliseconds, passed to every panel.",
+    },
+    avatarLabel: {
+      control: { type: "text" },
+      description: "Initials in the avatar circle (first two characters). Used when no `#avatar` or `item-{n}-avatar` slot is filled.",
+    },
+    showAvatar: {
+      control: { type: "boolean" },
+      description: "`false` removes the avatar column entirely, even when an avatar slot is filled.",
+    },
+    radius: {
+      control: { type: "select" },
+      options: ["0.8rem", "1.2rem", "2rem", "3rem"],
+      description: "**Story control, not a prop.** Sets `--accordion-chat-radius`. In your CSS: `.faq { --accordion-chat-radius: 1.2rem; }`",
+      table: { category: tokenCategory },
+    },
+    bubbleMaxWidth: {
+      control: { type: "select" },
+      options: ["60%", "82%", "100%"],
+      description: "**Story control, not a prop.** Sets `--accordion-chat-bubble-max-width`. In your CSS: `.faq { --accordion-chat-bubble-max-width: 70%; }`",
+      table: { category: tokenCategory },
+    },
+    gap: {
+      control: { type: "select" },
+      options: ["0.8rem", "1.4rem", "2.4rem"],
+      description: "**Story control, not a prop.** Sets `--accordion-chat-gap`. In your CSS: `.faq { --accordion-chat-gap: 2rem; }`",
+      table: { category: tokenCategory },
+    },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    name: "",
+    animationDuration: 300,
+    avatarLabel: "S",
+    showAvatar: true,
+    radius: "2rem",
+    bubbleMaxWidth: "82%",
+    gap: "1.4rem",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An accordion drawn as a chat: each `item-{n}-summary` slot is a question bubble on the right, and its `item-{n}-content` slot is the " +
+          "answer bubble on the left, which can hold any rich content. The avatar beside each answer comes from `item-{n}-avatar`, then the " +
+          "group `#avatar` slot, then `avatarLabel`; with none of them there's no avatar column. `name` makes it exclusive-open. Built on " +
+          "[ExpandingPanelClassic](?path=/story/molecules-expandable-expanding-panel-classic--default), so it opens and closes, and animates, in every browser. " +
+          "Every colour, size, radius, font and duration is a `--accordion-chat-*` token: the Default and Dark Theme stories are two token sets for the same markup.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const richItems = [
+  {
+    q: "Delivery & Returns",
+    a: "<p style='margin: 0;'>Free standard delivery on orders over £50. Returns accepted within 30 days.</p>",
+  },
+  {
+    q: "Materials & Care",
+    a:
+      "<ul style='margin: 0; padding-inline-start: 1.8rem;'><li>100% organic cotton</li><li>Machine wash at 30°C</li><li>Do not tumble dry</li></ul>",
+  },
+  {
+    q: "Sizing Guide",
+    a: "<p style='margin: 0;'>Our pieces run true to size. If you're between sizes, we recommend sizing up.</p>",
+  },
+];
+
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => ({
+    name: args.name || undefined,
+    animationDuration: args.animationDuration,
+    avatarLabel: args.avatarLabel,
+    showAvatar: args.showAvatar,
+  }));
+  const tokenStyle = computed(() => ({
+    "--accordion-chat-radius": args.radius,
+    "--accordion-chat-bubble-max-width": args.bubbleMaxWidth,
+    "--accordion-chat-gap": args.gap,
+  }));
+  return { componentArgs, tokenStyle, items: richItems };
+}
+
+const itemsTemplate = `
+  <template v-for="(item, i) in items" :key="'s' + i" #[\`item-\${i}-summary\`]>{{ item.q }}</template>
+  <template v-for="(item, i) in items" :key="'c' + i" #[\`item-\${i}-content\`]><div v-html="item.a"></div></template>
+`;
+
+const stage = "padding: 3.2rem 2.4rem; max-inline-size: 64rem; margin-inline: auto;";
+
+const lightTokens = {
+  background: "#f9f9f9",
+  "--accordion-chat-question-surface": "#ececec",
+  "--accordion-chat-question-colour": "#1d1d1f",
+  "--accordion-chat-question-surface-open": "#1d1d1f",
+  "--accordion-chat-question-colour-open": "#ffffff",
+  "--accordion-chat-answer-surface": "#ffffff",
+  "--accordion-chat-answer-border": "#e6e4e1",
+  "--accordion-chat-answer-colour": "#2a2a2c",
+  "--accordion-chat-avatar-surface": "#1d1d1f",
+  "--accordion-chat-avatar-colour": "#ffffff",
+};
+
+const darkTokens = {
+  background: "#0f0e0d",
+  "--accordion-chat-question-font-family": "'Playfair Display', Georgia, serif",
+  "--accordion-chat-question-font-size": "1.9rem",
+  "--accordion-chat-question-font-weight": "400",
+  "--accordion-chat-question-surface": "#1a1615",
+  "--accordion-chat-question-colour": "#f2ece2",
+  "--accordion-chat-question-border": "#2b2422",
+  "--accordion-chat-question-surface-open": "#c9a961",
+  "--accordion-chat-question-colour-open": "#14100f",
+  "--accordion-chat-question-border-open": "#c9a961",
+  "--accordion-chat-icon-surface": "rgb(255 255 255 / 0.08)",
+  "--accordion-chat-icon-surface-open": "rgb(0 0 0 / 0.12)",
+  "--accordion-chat-answer-surface": "#1a1615",
+  "--accordion-chat-answer-border": "#2b2422",
+  "--accordion-chat-answer-colour": "#cbbfb4",
+  "--accordion-chat-answer-font-family": "Poppins, system-ui, sans-serif",
+  "--accordion-chat-answer-font-weight": "300",
+  "--accordion-chat-answer-font-size": "1.45rem",
+  "--accordion-chat-answer-line-height": "1.7",
+  "--accordion-chat-avatar-surface": "#c9a961",
+  "--accordion-chat-avatar-colour": "#14100f",
+  "--accordion-chat-avatar-font-family": "'Playfair Display', Georgia, serif",
+  "--accordion-chat-avatar-font-weight": "400",
+  "--accordion-chat-avatar-font-size": "1.4rem",
+  "--accordion-chat-focus-ring-colour": "#c9a961",
+};
+
+const renderWith = (extraStyle: Record<string, string> = {}, slotsTemplate = itemsTemplate) => (args: StoryArgs) => ({
+  components: { AccordionChat },
+  setup() {
+    return { ...useStorySetup(args), extraStyle };
+  },
+  template: `
+    <div style="${stage}" :style="[extraStyle, tokenStyle]">
+      <AccordionChat v-bind="componentArgs">${slotsTemplate}</AccordionChat>
+    </div>
+  `,
+});
+
+export const Default: Story = {
+  render: renderWith(lightTokens),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The neutral light look: token values set to match the design reference. Without them, the colours come from the `--theme-*` tokens " +
+          "(see Theme Defaults). Click a question to open its answer.",
+      },
+    },
+  },
+};
+
+export const ThemeDefaults: Story = {
+  name: "Theme Defaults (no tokens set)",
+  render: renderWith(),
+  parameters: {
+    docs: { description: { story: "No `--accordion-chat-*` colour tokens set: every colour falls back to the active theme's `--theme-*` slots." } },
+  },
+};
+
+export const DarkTheme: Story = {
+  name: "Dark Theme (tokens only)",
+  args: { avatarLabel: "N" },
+  render: renderWith(darkTokens),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The same markup with only token overrides: serif questions, gold open state and avatar, light-weight answers on dark bubbles, " +
+          "and a question border that turns gold when open. Copy the token set from the story source.",
+      },
+    },
+  },
+};
+
+const monogramSvg = `<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30" fill="#2f6f5e"></rect><path d="M8 21 L15 8 L22 21 Z" fill="#dce9e2"></path></svg>`;
+
+export const LogoAvatar: Story = {
+  name: "Logo Avatar (#avatar slot)",
+  render: renderWith(lightTokens, `${itemsTemplate}<template #avatar>${monogramSvg}</template>`),
+  parameters: {
+    docs: { description: { story: "A group-wide `#avatar` slot (here an inline SVG logo; a `NuxtImg` works the same) fills the circle beside every answer, overriding `avatarLabel`." } },
+  },
+};
+
+export const IconAvatar: Story = {
+  name: "Icon Avatar (#avatar slot)",
+  render: renderWith(lightTokens, `${itemsTemplate}<template #avatar><Icon name="lucide:sparkles" style="font-size: 1.6rem;" /></template>`),
+};
+
+export const NoAvatar: Story = {
+  name: "No Avatar",
+  args: { avatarLabel: "" },
+  render: renderWith(lightTokens),
+  parameters: {
+    docs: { description: { story: "No avatar slot and an empty `avatarLabel`: no avatar column, and the answer bubble sits flush left. `showAvatar=false` does the same even when a slot is filled." } },
+  },
+};
+
+export const PerPanelAvatar: Story = {
+  name: "Per-Panel Avatar Override",
+  render: renderWith(lightTokens, `${itemsTemplate}<template #item-1-avatar><Icon name="lucide:shirt" style="font-size: 1.6rem;" /></template>`),
+  parameters: {
+    docs: { description: { story: "`item-1-avatar` replaces the avatar for the second answer only; the others keep `avatarLabel`." } },
+  },
+};
+
+export const ExclusiveOpen: Story = {
+  name: "Exclusive Open (shared name)",
+  args: { name: "faq" },
+  render: renderWith(lightTokens),
+  parameters: {
+    docs: { description: { story: "With `name` set, opening one question closes the others (native `<details name>` grouping)." } },
+  },
+};
+
+export const RichContent: Story = {
+  name: "Rich Answer Content",
+  render: renderWith(
+    lightTokens,
+    `
+      <template #item-0-summary>What does a consultation include?</template>
+      <template #item-0-content>
+        <p style="margin: 0 0 0.8rem;">A 30-minute chat about your goals, then a written plan. It covers:</p>
+        <ol style="margin: 0 0 0.8rem; padding-inline-start: 1.8rem;"><li>Your history and routine</li><li>A patch test</li><li>Pricing for the full course</li></ol>
+        <p style="margin: 0;"><a href="#">Book a consultation</a> or call <strong>01234 567890</strong>.</p>
+      </template>
+      <template #item-1-summary>Where are you?</template>
+      <template #item-1-content>
+        <p style="margin: 0 0 0.8rem;">12 High Street, Northtown. Here's the studio:</p>
+        <img src="/images/rotating-carousel/image-1.webp" alt="The Northtown studio" width="600" height="400" style="border-radius: 1rem; display: block;">
+      </template>
+    `
+  ),
+  parameters: {
+    docs: { description: { story: "Answers take any markup: paragraphs, lists, links, images (capped to the bubble width)." } },
+  },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: { avatarLabel: "Alexandra" },
+  render: (args) => ({
+    components: { AccordionChat },
+    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(6);
+      const many = Array.from({ length: 12 }, (_, i) => ({
+        question: `Question ${i + 6}`,
+        summarySlot: `item-${i + 6}-summary`,
+        contentSlot: `item-${i + 6}-content`,
+      }));
+      return { ...useStorySetup(args), longUnbroken, longUrl, longCopy, many, lightTokens };
+    },
+    template: `
+      <div style="padding: 1.6rem; display: grid; gap: 3.2rem;" :style="[lightTokens, tokenStyle]">
+        <AccordionChat v-bind="componentArgs">
+          <template #item-0-summary>{{ longUnbroken }}</template>
+          <template #item-0-content><p style="margin: 0;">{{ longUrl }}</p></template>
+          <template #item-1-summary>{{ longCopy.slice(0, 200) }}</template>
+          <template #item-1-content><p style="margin: 0;">{{ longCopy }}</p></template>
+          <template #item-2-summary>🎉 Emoji first, then &lt;b&gt;html&lt;/b&gt; as text</template>
+          <template #item-2-content><img src="/images/banners/banner-ginger.webp" alt="Wide banner, wider than the bubble" width="1600" height="400"></template>
+          <template #item-3-summary>A</template>
+          <template #item-4-summary>No content slot: opens to nothing</template>
+          <template v-for="item in many" :key="item.summarySlot" #[item.summarySlot]>{{ item.question }}</template>
+          <template v-for="item in many" :key="item.contentSlot" #[item.contentSlot]><p style="margin: 0;">Answer to {{ item.question }}.</p></template>
+        </AccordionChat>
+
+        <div dir="rtl">
+          <AccordionChat v-bind="componentArgs" avatar-label="👩‍🔬">
+            <template #item-0-summary>سؤال طويل من اليمين إلى اليسار للتحقق من الاتجاه</template>
+            <template #item-0-content><p style="margin: 0;">إجابة قصيرة. يجب أن تنعكس زوايا الفقاعات.</p></template>
+          </AccordionChat>
+        </div>
+      </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: "760px" },
+      description: {
+        story:
+          "Open every question at each canvas width. Long unbroken words and URLs wrap inside both bubbles and the icon stays visible; the " +
+          "avatar shows \"Al\" for the label \"Alexandra\"; the wide image shrinks to the bubble; the single-letter and no-content panels still " +
+          "look like bubbles; 12 more panels follow item-4 after a gap in the indexes; in the RTL group the question sits on the left, the " +
+          "answer on the right, the tail corners flip, and the emoji avatar label stays whole.",
+      },
+    },
+  },
+};

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>"
+`;