srcdev-nuxt-components 9.6.17 → 9.6.19

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.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,172 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { defineComponent, nextTick, ref } from "vue";
+import type { VueWrapper } from "@vue/test-utils";
+import AccordionGroup from "../AccordionGroup.vue";
+
+type Wrapper = VueWrapper;
+
+const threeItems = {
+  "item-0-summary": "<span>Summary 0</span>",
+  "item-0-content": "<p>Content 0</p>",
+  "item-1-summary": "<span>Summary 1</span>",
+  "item-1-content": "<p>Content 1</p>",
+  "item-2-summary": "<span>Summary 2</span>",
+  "item-2-content": "<p>Content 2</p>",
+};
+
+describe("AccordionGroup", () => {
+  let wrapper: Wrapper | undefined;
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.restoreAllMocks();
+  });
+
+  // ─── Mount and root ───────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { slots: threeItems });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    wrapper = await mountSuspended(AccordionGroup, {
+      props: { name: "faq" },
+      slots: { ...threeItems, "item-1-icon": "<span>+</span>" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("has the accordion-group root class", async () => {
+    wrapper = await mountSuspended(AccordionGroup);
+    expect(wrapper.classes()).toContain("accordion-group");
+  });
+
+  // ─── Panel count inferred from slots ──────────────────────────────────────
+
+  it("renders one panel per item-{n}-summary slot", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { slots: threeItems });
+    expect(wrapper.findAll(".accordion-group-item")).toHaveLength(3);
+  });
+
+  it("renders no panels when no summary slots are given", async () => {
+    wrapper = await mountSuspended(AccordionGroup);
+    expect(wrapper.findAll(".accordion-group-item")).toHaveLength(0);
+  });
+
+  it("ignores icon and content slots that have no matching summary", async () => {
+    wrapper = await mountSuspended(AccordionGroup, {
+      slots: { "item-0-summary": "<span>Only</span>", "item-5-content": "<p>Orphan</p>", "item-6-icon": "<span>!</span>" },
+    });
+    expect(wrapper.findAll(".accordion-group-item")).toHaveLength(1);
+    expect(wrapper.text()).not.toContain("Orphan");
+  });
+
+  it("renders gapped indexes in numeric order", async () => {
+    wrapper = await mountSuspended(AccordionGroup, {
+      slots: {
+        "item-10-summary": "<span>Ten</span>",
+        "item-2-summary": "<span>Two</span>",
+        "item-0-summary": "<span>Zero</span>",
+      },
+    });
+    const summaries = wrapper.findAll(".accordion-group-item summary").map((s) => s.text());
+    expect(summaries).toEqual(["Zero", "Two", "Ten"]);
+  });
+
+  it("adds a panel when a summary slot appears after mount", async () => {
+    const Host = defineComponent({
+      components: { AccordionGroup },
+      setup() {
+        const showSecond = ref(false);
+        return { showSecond };
+      },
+      template: `
+        <AccordionGroup>
+          <template #item-0-summary>First</template>
+          <template v-if="showSecond" #item-1-summary>Second</template>
+        </AccordionGroup>
+      `,
+    });
+    wrapper = await mountSuspended(Host);
+    expect(wrapper.findAll(".accordion-group-item")).toHaveLength(1);
+    (wrapper.vm as unknown as { showSecond: boolean }).showSecond = true;
+    await nextTick();
+    expect(wrapper.findAll(".accordion-group-item")).toHaveLength(2);
+  });
+
+  // ─── Slot content ─────────────────────────────────────────────────────────
+
+  it("places summary and content in the matching panel", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { slots: threeItems });
+    const second = wrapper.findAll(".accordion-group-item")[1]!;
+    expect(second.find("summary").text()).toContain("Summary 1");
+    expect(second.text()).toContain("Content 1");
+  });
+
+  it("keeps the panel's default caret when no icon slot is given", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { slots: threeItems });
+    expect(wrapper.findAll(".accordion-group-item .icon-wrapper svg, .accordion-group-item .icon-wrapper .icon")).not.toHaveLength(0);
+  });
+
+  it("replaces the caret with the item's icon slot", async () => {
+    wrapper = await mountSuspended(AccordionGroup, {
+      slots: { "item-0-summary": "<span>S</span>", "item-0-icon": "<span class='custom-icon'>+</span>" },
+    });
+    const iconWrapper = wrapper.find(".accordion-group-item .icon-wrapper");
+    expect(iconWrapper.find(".custom-icon").exists()).toBe(true);
+    expect(iconWrapper.find(".icon").exists()).toBe(false);
+  });
+
+  // ─── Props forwarded to panels ────────────────────────────────────────────
+
+  it("renders ExpandingPanelClassic by default", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { slots: threeItems });
+    expect(wrapper.findAll(".accordion-group-item.expanding-panel-classic")).toHaveLength(3);
+  });
+
+  it("renders ExpandingPanel when variant='modern'", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { props: { variant: "modern" }, slots: threeItems });
+    expect(wrapper.findAll(".accordion-group-item.expanding-panel")).toHaveLength(3);
+    expect(wrapper.findAll(".expanding-panel-classic")).toHaveLength(0);
+  });
+
+  it("gives every panel's <details> the shared name", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { props: { name: "faq" }, slots: threeItems });
+    const names = wrapper.findAll("details").map((d) => d.attributes("name"));
+    expect(names).toEqual(["faq", "faq", "faq"]);
+  });
+
+  it("gives each panel unique ids even when they share a name", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { props: { name: "faq" }, slots: threeItems });
+    const ids = wrapper.findAll("[id]").map((el) => el.attributes("id"));
+    expect(new Set(ids).size).toBe(ids.length);
+    for (const summary of wrapper.findAll("summary")) {
+      const contentId = summary.attributes("aria-controls")!;
+      expect(wrapper.find(`[id="${contentId}"]`).attributes("aria-labelledby")).toBe(summary.attributes("id"));
+    }
+  });
+
+  it("passes only declared props to the panels (no stray attributes)", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { slots: threeItems });
+    const panel = wrapper.find(".accordion-group-item");
+    expect(panel.attributes("icon-size")).toBeUndefined();
+    expect(panel.attributes("animation-duration")).toBeUndefined();
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies styleClassPassthrough classes to the root", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { props: { styleClassPassthrough: ["faq", "compact"] } });
+    expect(wrapper.classes()).toContain("faq");
+    expect(wrapper.classes()).toContain("compact");
+  });
+
+  it("updates classes when styleClassPassthrough changes", async () => {
+    wrapper = await mountSuspended(AccordionGroup, { props: { styleClassPassthrough: ["faq"] } });
+    await wrapper.setProps({ styleClassPassthrough: ["compact"] });
+    expect(wrapper.classes()).not.toContain("faq");
+    expect(wrapper.classes()).toContain("compact");
+  });
+});

package/app/components/02.molecules/expandable/accordion-group/tests/__snapshots__/AccordionGroup.spec.ts.snap

@@ -0,0 +1,45 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AccordionGroup > renders correct HTML structure 1`] = `
+"<div class="accordion-group">
+  <div class="expanding-panel-classic accordion-group-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>Summary 0</span></div>
+        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></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">
+        <p>Content 0</p>
+      </div>
+    </div>
+  </div>
+  <div class="expanding-panel-classic accordion-group-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>Summary 1</span></div>
+        <div class="icon-wrapper"><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">
+        <p>Content 1</p>
+      </div>
+    </div>
+  </div>
+  <div class="expanding-panel-classic accordion-group-item">
+    <details class="expanding-panel-classic-details" name="faq">
+      <summary id="v-0-0-5-trigger" class="expanding-panel-classic-summary" aria-controls="v-0-0-5-content" aria-expanded="false">
+        <div class="label-wrapper"><span>Summary 2</span></div>
+        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
+      </summary>
+    </details>
+    <div id="v-0-0-5-content" class="expanding-panel-classic-content" aria-labelledby="v-0-0-5-trigger" role="region">
+      <div class="inner">
+        <p>Content 2</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

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

@@ -93,6 +93,7 @@ visual style, pass a modifier class:
 
 ## Notes
 
+- Long unbroken summaries wrap (`overflow-wrap: anywhere` on the root, summary track `minmax(0, 1fr) auto`) rather than pushing the icon out of the clipped summary. Changed 2026-10-20.
 - `--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.
 - `background-color`, `padding`, `border`, and shadow are all safe to set directly on