srcdev-nuxt-components 9.6.17 → 9.6.19

package/app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue

@@ -2,9 +2,9 @@
   <div ref="rootEl" class="expanding-panel" :class="[elementClasses, { 'content-is-on-top': contentIsOnTop }]">
     <details class="expanding-panel-details" :name :open @toggle="onDetailsToggle">
       <summary
-        :id="`id-${name}-trigger`"
+        :id="`${panelId}-trigger`"
         class="expanding-panel-summary"
-        :aria-controls="`id-${name}-content`"
+        :aria-controls="`${panelId}-content`"
         :aria-expanded="open"
         @click.prevent.stop="handleToggle"
       >
@@ -18,9 +18,9 @@
         </div>
       </summary>
       <div
-        :id="`id-${name}-content`"
+        :id="`${panelId}-content`"
         class="expanding-panel-content"
-        :aria-labelledby="`id-${name}-trigger`"
+        :aria-labelledby="`${panelId}-trigger`"
         role="region"
       >
         <slot name="content"></slot>
@@ -49,6 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const fallbackName = useId();
+const panelId = useId();
 const name = computed(() => props.name || fallbackName);
 const isPanelOpen = defineModel<boolean>({ default: false });
 const animationDurationStr = computed(() => `${props.animationDuration}ms`);
@@ -69,7 +70,7 @@ if (import.meta.dev) {
   // reproducible in Chrome's device-emulation mode since that's still the Blink engine. An
   // earlier @supports-based fallback attempt (2026-08-22) turned out not to reliably kick in
   // either. Prefer ExpandingPanelClassic (or a consumer's own `classic` prop, where offered —
-  // see AccordianCore) for anything that needs to work correctly on real Apple devices today.
+  // see AccordionGroup) for anything that needs to work correctly on real Apple devices today.
   console.warn(
     `ExpandingPanel${props.name ? ` "${props.name}"` : ""}: this variant depends on ` +
       "::details-content, which WebKit (Safari/iOS) does not support — the animation and, more " +
@@ -110,6 +111,8 @@ const onDetailsToggle = (event: Event) => {
 <style lang="css">
 @layer components {
   .expanding-panel {
+    overflow-wrap: anywhere;
+
     .expanding-panel-details {
       &:hover {
         cursor: pointer;
@@ -117,7 +120,7 @@ const onDetailsToggle = (event: Event) => {
       .expanding-panel-summary {
         display: grid;
         align-items: center;
-        grid-template-columns: 1fr auto;
+        grid-template-columns: minmax(0, 1fr) auto;
         gap: var(--expanding-panel-summary-gap, 1rem);
         list-style: none;
         user-select: none;
@@ -133,6 +136,8 @@ const onDetailsToggle = (event: Event) => {
 
         .label-wrapper {
           display: inline-block;
+          min-inline-size: 0;
+          overflow-wrap: anywhere;
         }
         /* inline-size is reserved explicitly — the grid's align-items:center
            doesn't stretch this item to row height, so with only aspect-ratio:1

package/app/components/02.molecules/expandable/expanding-panel/stories/ExpandingPanel.stories.ts

@@ -1,13 +1,25 @@
 import ExpandingPanel from "../ExpandingPanel.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 const meta: Meta<typeof ExpandingPanel> = {
   title: "Molecules/Expandable/Expanding Panel",
   component: ExpandingPanel,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A single expand/collapse panel on native <details>/<summary>. To render a set of these from slots, optionally exclusive-open, use " +
+          "[AccordionGroup](?path=/story/molecules-expandable-accordiongroup--exclusive-open), which renders this panel for every item when `variant=\"modern\"`.",
+      },
+    },
+  },
   argTypes: {
     name: {
       control: { type: "text" },
-      description: "Unique name used for ARIA attributes and to group panels in a native <details> accordion",
+      description: "The <details> name: panels sharing it form an exclusive-open group. Element ids come from useId(), not from this.",
     },
     animationDuration: {
       control: { type: "number", min: 0, step: 50 },
@@ -290,3 +302,72 @@ export const WithStyleClassPassthrough: Story = {
     `,
   }),
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  render: (args) => ({
+    components: { ExpandingPanel },
+    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);
+      return { args, longUnbroken, longUrl, longCopy };
+    },
+    template: `
+      <div style="padding: 1.6rem; display: grid; gap: 1.6rem;">
+        <ExpandingPanel v-bind="args" name="stress-a">
+          <template #summary><span>{{ longUnbroken }}</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">{{ longUrl }}</p></template>
+        </ExpandingPanel>
+        <ExpandingPanel v-bind="args" name="stress-a">
+          <template #summary><span>{{ longCopy.slice(0, 220) }}</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">{{ longCopy }}</p></template>
+        </ExpandingPanel>
+        <ExpandingPanel v-bind="args">
+          <template #summary><span>🎉 Emoji first, then &lt;b&gt;html&lt;/b&gt; as text</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">&lt;script&gt;alert(1)&lt;/script&gt;</p></template>
+        </ExpandingPanel>
+        <ExpandingPanel v-bind="args" dir="rtl">
+          <template #summary><span>سؤال طويل من اليمين إلى اليسار للتحقق من الاتجاه</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">إجابة قصيرة.</p></template>
+        </ExpandingPanel>
+        <ExpandingPanel v-bind="args">
+          <template #summary><span>A</span></template>
+        </ExpandingPanel>
+        <ExpandingPanel v-bind="args">
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">No summary slot: only the icon is clickable.</p></template>
+        </ExpandingPanel>
+      </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: "640px" },
+      description: {
+        story:
+          "Open each panel at every canvas width. The long unbroken summary wraps and the caret stays visible (until 2026-10-20 it pushed the " +
+          "caret out of the clipped summary); long URLs and copy wrap in the content; the first two panels share a name, so opening one closes " +
+          "the other, and each keeps its own ids; emoji and HTML-like text render as text; the RTL panel puts the caret on the left; the " +
+          "single-letter, no-content and no-summary panels keep their shape.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/expandable/expanding-panel/tests/ExpandingPanel.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { nextTick } from "vue";
+import { nextTick, defineComponent } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import type { ComponentPublicInstance } from "vue";
 import ExpandingPanel from "../ExpandingPanel.vue";
@@ -156,18 +156,11 @@ describe("ExpandingPanel", () => {
 
   // ─── ARIA & IDs ───────────────────────────────────────────────────────────
 
-  it("sets id on summary to id-{name}-trigger", async () => {
+  it("points the summary's aria-controls at the content region", async () => {
     const wrapper = await mountSuspended(ExpandingPanel, {
       props: { name: "aria-panel" },
     });
-    expect(wrapper.find("summary").attributes("id")).toBe("id-aria-panel-trigger");
-  });
-
-  it("sets aria-controls on summary to id-{name}-content", async () => {
-    const wrapper = await mountSuspended(ExpandingPanel, {
-      props: { name: "aria-panel" },
-    });
-    expect(wrapper.find("summary").attributes("aria-controls")).toBe("id-aria-panel-content");
+    expect(wrapper.find("summary").attributes("aria-controls")).toBe(wrapper.find(".expanding-panel-content").attributes("id"));
   });
 
   it("sets aria-expanded to false when closed", async () => {
@@ -185,20 +178,11 @@ describe("ExpandingPanel", () => {
     expect(wrapper.find("summary").attributes("aria-expanded")).toBe("true");
   });
 
-  it("sets id on content region to id-{name}-content", async () => {
+  it("labels the content region by its summary", async () => {
     const wrapper = await mountSuspended(ExpandingPanel, {
       props: { name: "aria-panel" },
     });
-    expect(wrapper.find(".expanding-panel-content").attributes("id")).toBe("id-aria-panel-content");
-  });
-
-  it("sets aria-labelledby on content region to id-{name}-trigger", async () => {
-    const wrapper = await mountSuspended(ExpandingPanel, {
-      props: { name: "aria-panel" },
-    });
-    expect(wrapper.find(".expanding-panel-content").attributes("aria-labelledby")).toBe(
-      "id-aria-panel-trigger",
-    );
+    expect(wrapper.find(".expanding-panel-content").attributes("aria-labelledby")).toBe(wrapper.find("summary").attributes("id"));
   });
 
   it("sets role='region' on the content div", async () => {
@@ -482,33 +466,43 @@ describe("ExpandingPanel", () => {
 
   // ─── name prop / useId fallback ───────────────────────────────────────────
 
-  it("uses the provided name in ARIA attributes", async () => {
+  it("builds ids from useId, not from the name", async () => {
     const wrapper = await mountSuspended(ExpandingPanel, {
       props: { name: "my-panel" },
     });
-    expect(wrapper.find("summary").attributes("id")).toBe("id-my-panel-trigger");
-    expect(wrapper.find(".expanding-panel-content").attributes("id")).toBe("id-my-panel-content");
+    expect(wrapper.find("summary").attributes("id")).not.toContain("my-panel");
+    expect(wrapper.find(".expanding-panel-content").attributes("id")).not.toContain("my-panel");
   });
 
   it("generates ARIA ids when no name prop is supplied", async () => {
     const wrapper = await mountSuspended(ExpandingPanel);
     const summaryId = wrapper.find("summary").attributes("id") ?? "";
     const contentId = wrapper.find(".expanding-panel-content").attributes("id") ?? "";
-    expect(summaryId).toMatch(/^id-.+-trigger$/);
-    expect(contentId).toMatch(/^id-.+-content$/);
+    expect(summaryId).toMatch(/^.+-trigger$/);
+    expect(contentId).toMatch(/^.+-content$/);
   });
 
-  it("updates the details name and ARIA ids when the name prop changes after mount", async () => {
+  it("updates the details name when the name prop changes after mount, keeping its ids", async () => {
     const wrapper = await mountSuspended(ExpandingPanel, {
       props: { name: "panel-a" },
     });
+    const summaryId = wrapper.find("summary").attributes("id");
     expect(wrapper.find("details").attributes("name")).toBe("panel-a");
-    expect(wrapper.find("summary").attributes("id")).toBe("id-panel-a-trigger");
 
     await wrapper.setProps({ name: "panel-b" });
 
     expect(wrapper.find("details").attributes("name")).toBe("panel-b");
-    expect(wrapper.find("summary").attributes("id")).toBe("id-panel-b-trigger");
-    expect(wrapper.find(".expanding-panel-content").attributes("id")).toBe("id-panel-b-content");
+    expect(wrapper.find("summary").attributes("id")).toBe(summaryId);
+  });
+
+  it("gives panels that share a name distinct ids", async () => {
+    const Host = defineComponent({
+      components: { ExpandingPanel },
+      template: `<div><ExpandingPanel name="shared"></ExpandingPanel><ExpandingPanel name="shared"></ExpandingPanel></div>`,
+    });
+    const wrapper = await mountSuspended(Host);
+    const ids = wrapper.findAll("[id]").map((el) => el.attributes("id"));
+    expect(ids).toHaveLength(4);
+    expect(new Set(ids).size).toBe(4);
   });
 });

package/app/components/02.molecules/expandable/expanding-panel/tests/__snapshots__/ExpandingPanel.spec.ts.snap

@@ -3,11 +3,11 @@
 exports[`ExpandingPanel > renders correct HTML structure with all props set 1`] = `
 "<div class="expanding-panel extra-class">
   <details class="expanding-panel-details" name="snap-all" open="">
-    <summary id="id-snap-all-trigger" class="expanding-panel-summary" aria-controls="id-snap-all-content" aria-expanded="true">
+    <summary id="v-0-1-trigger" class="expanding-panel-summary" aria-controls="v-0-1-content" aria-expanded="true">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper icon-wrapper--hidden"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
-    <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region"></div>
+    <div id="v-0-1-content" class="expanding-panel-content" aria-labelledby="v-0-1-trigger" role="region"></div>
   </details>
 </div>"
 `;
@@ -15,11 +15,11 @@ exports[`ExpandingPanel > renders correct HTML structure with all props set 1`]
 exports[`ExpandingPanel > renders correct HTML structure with contentIsOnTop true 1`] = `
 "<div class="expanding-panel content-is-on-top">
   <details class="expanding-panel-details" name="snap-content-on-top">
-    <summary id="id-snap-content-on-top-trigger" class="expanding-panel-summary" aria-controls="id-snap-content-on-top-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
-    <div id="id-snap-content-on-top-content" class="expanding-panel-content" aria-labelledby="id-snap-content-on-top-trigger" role="region"></div>
+    <div id="v-0-1-content" class="expanding-panel-content" aria-labelledby="v-0-1-trigger" role="region"></div>
   </details>
 </div>"
 `;
@@ -27,11 +27,11 @@ exports[`ExpandingPanel > renders correct HTML structure with contentIsOnTop tru
 exports[`ExpandingPanel > renders correct HTML structure with default props 1`] = `
 "<div class="expanding-panel">
   <details class="expanding-panel-details" name="snap-default">
-    <summary id="id-snap-default-trigger" class="expanding-panel-summary" aria-controls="id-snap-default-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"></div>
       <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
     </summary>
-    <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region"></div>
+    <div id="v-0-1-content" class="expanding-panel-content" aria-labelledby="v-0-1-trigger" role="region"></div>
   </details>
 </div>"
 `;
@@ -39,11 +39,11 @@ exports[`ExpandingPanel > renders correct HTML structure with default props 1`]
 exports[`ExpandingPanel > renders correct HTML structure with populated slots 1`] = `
 "<div class="expanding-panel">
   <details class="expanding-panel-details" name="snap-slots">
-    <summary id="id-snap-slots-trigger" class="expanding-panel-summary" aria-controls="id-snap-slots-content" aria-expanded="false">
+    <summary id="v-0-1-trigger" class="expanding-panel-summary" aria-controls="v-0-1-content" aria-expanded="false">
       <div class="label-wrapper"><span>Summary text</span></div>
       <div class="icon-wrapper"><span>▸</span></div>
     </summary>
-    <div id="id-snap-slots-content" class="expanding-panel-content" aria-labelledby="id-snap-slots-trigger" role="region">
+    <div id="v-0-1-content" class="expanding-panel-content" aria-labelledby="v-0-1-trigger" role="region">
       <p>Content text</p>
     </div>
   </details>

package/app/components/02.molecules/expandable/expanding-panel-classic/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-classic-content-gap` and `--expanding-panel-classic-content-z-index` only take effect when
   `contentIsOnTop` is `true` — they're no-ops for the default (in-flow) layout.
 - Never set `background-color`, `padding`, `border`, or a shadow directly on `.inner`. `.inner`

package/app/components/02.molecules/expandable/expanding-panel-classic/ExpandingPanelClassic.vue

@@ -2,9 +2,9 @@
   <div ref="rootEl" class="expanding-panel-classic" :class="[elementClasses, { 'content-is-on-top': contentIsOnTop }]">
     <details class="expanding-panel-classic-details" :name :open @toggle="onDetailsToggle">
       <summary
-        :id="`id-${name}-trigger`"
+        :id="`${panelId}-trigger`"
         class="expanding-panel-classic-summary"
-        :aria-controls="`id-${name}-content`"
+        :aria-controls="`${panelId}-content`"
         :aria-expanded="open"
         @click.prevent.stop="handleToggle"
       >
@@ -19,9 +19,9 @@
       </summary>
     </details>
     <div
-      :id="`id-${name}-content`"
+      :id="`${panelId}-content`"
       class="expanding-panel-classic-content"
-      :aria-labelledby="`id-${name}-trigger`"
+      :aria-labelledby="`${panelId}-trigger`"
       role="region"
     >
       <div class="inner">
@@ -51,6 +51,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const fallbackName = useId();
+const panelId = useId();
 const name = computed(() => props.name || fallbackName);
 const isPanelOpen = defineModel<boolean>({ default: false });
 const animationDurationStr = computed(() => `${props.animationDuration}ms`);
@@ -98,6 +99,8 @@ const onDetailsToggle = (event: Event) => {
 <style lang="css">
 @layer components {
   .expanding-panel-classic {
+    overflow-wrap: anywhere;
+
     .expanding-panel-classic-details {
       &:hover {
         cursor: pointer;
@@ -105,7 +108,7 @@ const onDetailsToggle = (event: Event) => {
       .expanding-panel-classic-summary {
         display: grid;
         align-items: center;
-        grid-template-columns: 1fr auto;
+        grid-template-columns: minmax(0, 1fr) auto;
         gap: var(--expanding-panel-classic-summary-gap, 1rem);
         list-style: none;
         user-select: none;
@@ -121,6 +124,8 @@ const onDetailsToggle = (event: Event) => {
 
         .label-wrapper {
           display: inline-block;
+          min-inline-size: 0;
+          overflow-wrap: anywhere;
         }
         /* inline-size is reserved explicitly — the grid's align-items:center
            doesn't stretch this item to row height, so with only aspect-ratio:1

package/app/components/02.molecules/expandable/expanding-panel-classic/stories/ExpandingPanelClassic.stories.ts

@@ -1,13 +1,26 @@
 import ExpandingPanelClassic from "../ExpandingPanelClassic.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import CanvasSwitcher from "../../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
 const meta: Meta<typeof ExpandingPanelClassic> = {
   title: "Molecules/Expandable/Expanding Panel Classic",
   component: ExpandingPanelClassic,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A single expand/collapse panel on native <details>/<summary>. To render a set of these from slots, optionally exclusive-open, use " +
+          "[AccordionGroup](?path=/story/molecules-expandable-accordiongroup--exclusive-open), which renders this panel for every item when `variant=\"classic\"`. " +
+          "[AccordionChat](?path=/story/molecules-expandable-accordionchat--default) restyles it as a chat: the summary becomes a question bubble and the content an answer bubble.",
+      },
+    },
+  },
   argTypes: {
     name: {
       control: { type: "text" },
-      description: "Unique name used for ARIA attributes and to group panels in a native <details> accordion",
+      description: "The <details> name: panels sharing it form an exclusive-open group. Element ids come from useId(), not from this.",
     },
     animationDuration: {
       control: { type: "number", min: 0, step: 50 },
@@ -291,3 +304,72 @@ export const WithStyleClassPassthrough: Story = {
     `,
   }),
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  render: (args) => ({
+    components: { ExpandingPanelClassic },
+    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);
+      return { args, longUnbroken, longUrl, longCopy };
+    },
+    template: `
+      <div style="padding: 1.6rem; display: grid; gap: 1.6rem;">
+        <ExpandingPanelClassic v-bind="args" name="stress-a">
+          <template #summary><span>{{ longUnbroken }}</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">{{ longUrl }}</p></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args" name="stress-a">
+          <template #summary><span>{{ longCopy.slice(0, 220) }}</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">{{ longCopy }}</p></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args">
+          <template #summary><span>🎉 Emoji first, then &lt;b&gt;html&lt;/b&gt; as text</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">&lt;script&gt;alert(1)&lt;/script&gt;</p></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args" dir="rtl">
+          <template #summary><span>سؤال طويل من اليمين إلى اليسار للتحقق من الاتجاه</span></template>
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">إجابة قصيرة.</p></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args">
+          <template #summary><span>A</span></template>
+        </ExpandingPanelClassic>
+        <ExpandingPanelClassic v-bind="args">
+          <template #content><p style="margin: 0; padding-block: 0.8rem;">No summary slot: only the icon is clickable.</p></template>
+        </ExpandingPanelClassic>
+      </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: "640px" },
+      description: {
+        story:
+          "Open each panel at every canvas width. The long unbroken summary wraps and the caret stays visible (until 2026-10-20 it pushed the " +
+          "caret out of the clipped summary); long URLs and copy wrap in the content; the first two panels share a name, so opening one closes " +
+          "the other, and each keeps its own ids; emoji and HTML-like text render as text; the RTL panel puts the caret on the left; the " +
+          "single-letter, no-content and no-summary panels keep their shape.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/expandable/expanding-panel-classic/tests/ExpandingPanelClassic.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { nextTick } from "vue";
+import { nextTick, defineComponent } from "vue";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import type { ComponentPublicInstance } from "vue";
 import ExpandingPanelClassic from "../ExpandingPanelClassic.vue";
@@ -156,18 +156,11 @@ describe("ExpandingPanelClassic", () => {
 
   // ─── ARIA & IDs ───────────────────────────────────────────────────────────
 
-  it("sets id on summary to id-{name}-trigger", async () => {
+  it("points the summary's aria-controls at the content region", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic, {
       props: { name: "aria-panel" },
     });
-    expect(wrapper.find("summary").attributes("id")).toBe("id-aria-panel-trigger");
-  });
-
-  it("sets aria-controls on summary to id-{name}-content", async () => {
-    const wrapper = await mountSuspended(ExpandingPanelClassic, {
-      props: { name: "aria-panel" },
-    });
-    expect(wrapper.find("summary").attributes("aria-controls")).toBe("id-aria-panel-content");
+    expect(wrapper.find("summary").attributes("aria-controls")).toBe(wrapper.find(".expanding-panel-classic-content").attributes("id"));
   });
 
   it("sets aria-expanded to false when closed", async () => {
@@ -185,20 +178,11 @@ describe("ExpandingPanelClassic", () => {
     expect(wrapper.find("summary").attributes("aria-expanded")).toBe("true");
   });
 
-  it("sets id on content region to id-{name}-content", async () => {
+  it("labels the content region by its summary", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic, {
       props: { name: "aria-panel" },
     });
-    expect(wrapper.find(".expanding-panel-classic-content").attributes("id")).toBe("id-aria-panel-content");
-  });
-
-  it("sets aria-labelledby on content region to id-{name}-trigger", async () => {
-    const wrapper = await mountSuspended(ExpandingPanelClassic, {
-      props: { name: "aria-panel" },
-    });
-    expect(wrapper.find(".expanding-panel-classic-content").attributes("aria-labelledby")).toBe(
-      "id-aria-panel-trigger",
-    );
+    expect(wrapper.find(".expanding-panel-classic-content").attributes("aria-labelledby")).toBe(wrapper.find("summary").attributes("id"));
   });
 
   it("sets role='region' on the content div", async () => {
@@ -482,33 +466,43 @@ describe("ExpandingPanelClassic", () => {
 
   // ─── name prop / useId fallback ───────────────────────────────────────────
 
-  it("uses the provided name in ARIA attributes", async () => {
+  it("builds ids from useId, not from the name", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic, {
       props: { name: "my-panel" },
     });
-    expect(wrapper.find("summary").attributes("id")).toBe("id-my-panel-trigger");
-    expect(wrapper.find(".expanding-panel-classic-content").attributes("id")).toBe("id-my-panel-content");
+    expect(wrapper.find("summary").attributes("id")).not.toContain("my-panel");
+    expect(wrapper.find(".expanding-panel-classic-content").attributes("id")).not.toContain("my-panel");
   });
 
   it("generates ARIA ids when no name prop is supplied", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic);
     const summaryId = wrapper.find("summary").attributes("id") ?? "";
     const contentId = wrapper.find(".expanding-panel-classic-content").attributes("id") ?? "";
-    expect(summaryId).toMatch(/^id-.+-trigger$/);
-    expect(contentId).toMatch(/^id-.+-content$/);
+    expect(summaryId).toMatch(/^.+-trigger$/);
+    expect(contentId).toMatch(/^.+-content$/);
   });
 
-  it("updates the details name and ARIA ids when the name prop changes after mount", async () => {
+  it("updates the details name when the name prop changes after mount, keeping its ids", async () => {
     const wrapper = await mountSuspended(ExpandingPanelClassic, {
       props: { name: "panel-a" },
     });
+    const summaryId = wrapper.find("summary").attributes("id");
     expect(wrapper.find("details").attributes("name")).toBe("panel-a");
-    expect(wrapper.find("summary").attributes("id")).toBe("id-panel-a-trigger");
 
     await wrapper.setProps({ name: "panel-b" });
 
     expect(wrapper.find("details").attributes("name")).toBe("panel-b");
-    expect(wrapper.find("summary").attributes("id")).toBe("id-panel-b-trigger");
-    expect(wrapper.find(".expanding-panel-classic-content").attributes("id")).toBe("id-panel-b-content");
+    expect(wrapper.find("summary").attributes("id")).toBe(summaryId);
+  });
+
+  it("gives panels that share a name distinct ids", async () => {
+    const Host = defineComponent({
+      components: { ExpandingPanelClassic },
+      template: `<div><ExpandingPanelClassic name="shared"></ExpandingPanelClassic><ExpandingPanelClassic name="shared"></ExpandingPanelClassic></div>`,
+    });
+    const wrapper = await mountSuspended(Host);
+    const ids = wrapper.findAll("[id]").map((el) => el.attributes("id"));
+    expect(ids).toHaveLength(4);
+    expect(new Set(ids).size).toBe(4);
   });
 });