srcdev-nuxt-components 9.3.0 → 9.3.2

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

@@ -0,0 +1,514 @@
+import { describe, it, expect } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import type { ComponentPublicInstance } from "vue";
+import ExpandingPanelClassic from "../ExpandingPanelClassic.vue";
+
+interface ExpandingPanelClassicInstance extends ComponentPublicInstance {
+  animationDurationStr: string;
+  open: boolean;
+  isPanelOpen: boolean;
+}
+
+describe("ExpandingPanelClassic", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "test" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure with default props", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "snap-default" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with all props set", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: {
+        name: "snap-all",
+        animationDuration: 500,
+        forceOpened: true,
+        styleClassPassthrough: ["extra-class"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with contentIsOnTop true", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "snap-content-on-top", contentIsOnTop: true },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders correct HTML structure with populated slots", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "snap-slots" },
+      slots: {
+        summary: "<span>Summary text</span>",
+        icon: "<span>▸</span>",
+        content: "<p>Content text</p>",
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders the root .expanding-panel-classic element", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "root-test" },
+    });
+    expect(wrapper.find(".expanding-panel-classic").exists()).toBe(true);
+  });
+
+  it("renders a <details> element inside the root", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "details-test" },
+    });
+    expect(wrapper.find("details.expanding-panel-classic-details").exists()).toBe(true);
+  });
+
+  it("renders a <summary> element inside <details>", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "summary-test" },
+    });
+    expect(wrapper.find("summary.expanding-panel-classic-summary").exists()).toBe(true);
+  });
+
+  it("renders the content region div", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "content-test" },
+    });
+    expect(wrapper.find(".expanding-panel-classic-content").exists()).toBe(true);
+  });
+
+  // ─── Default prop values ──────────────────────────────────────────────────
+
+  it("uses correct default prop values on the component instance", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "defaults-test" },
+    });
+    expect(wrapper.props("animationDuration")).toBe(400);
+    expect(wrapper.props("forceOpened")).toBe(false);
+    expect(wrapper.props("contentIsOnTop")).toBe(false);
+    expect(wrapper.props("styleClassPassthrough")).toEqual([]);
+  });
+
+  it("defaults model value (isPanelOpen) to false", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "model-default" },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.isPanelOpen).toBe(false);
+  });
+
+  // ─── Computed ─────────────────────────────────────────────────────────────
+
+  it("computes animationDurationStr as '<value>ms'", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "anim-str", animationDuration: 750 },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.animationDurationStr).toBe("750ms");
+  });
+
+  it("computes animationDurationStr using the default duration", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "anim-str-default" },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.animationDurationStr).toBe("400ms");
+  });
+
+  it("open is false when forceOpened is false and model is false", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "open-false", forceOpened: false },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.open).toBe(false);
+  });
+
+  it("open is true when model is true", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "open-model" },
+      attrs: { modelValue: true },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.open).toBe(true);
+  });
+
+  it("open is true when forceOpened is true regardless of model", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "open-forced", forceOpened: true },
+      attrs: { modelValue: false },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.open).toBe(true);
+  });
+
+  // ─── ARIA & IDs ───────────────────────────────────────────────────────────
+
+  it("sets id on summary to id-{name}-trigger", 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");
+  });
+
+  it("sets aria-expanded to false when closed", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "aria-expanded" },
+    });
+    expect(wrapper.find("summary").attributes("aria-expanded")).toBe("false");
+  });
+
+  it("sets aria-expanded to true when open", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "aria-expanded-open" },
+      attrs: { modelValue: true },
+    });
+    expect(wrapper.find("summary").attributes("aria-expanded")).toBe("true");
+  });
+
+  it("sets id on content region to id-{name}-content", 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",
+    );
+  });
+
+  it("sets role='region' on the content div", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "role-test" },
+    });
+    expect(wrapper.find(".expanding-panel-classic-content").attributes("role")).toBe("region");
+  });
+
+  // ─── Toggle behaviour ─────────────────────────────────────────────────────
+
+  it("toggles open state when summary is clicked", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "toggle-test" },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.isPanelOpen).toBe(false);
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(false);
+  });
+
+  it("emits update:modelValue when summary is clicked", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "emit-test" },
+    });
+    await wrapper.find("summary").trigger("click");
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy();
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
+  });
+
+  it("syncs isPanelOpen to false when <details> is closed externally via toggle event", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "external-close" },
+      attrs: { modelValue: true },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.isPanelOpen).toBe(true);
+
+    // Simulate browser closing <details> externally (e.g. exclusive accordion name group)
+    const details = wrapper.find("details").element as HTMLDetailsElement;
+    details.open = false;
+    await wrapper.find("details").trigger("toggle");
+    await nextTick();
+
+    expect(vm.isPanelOpen).toBe(false);
+  });
+
+  it("syncs isPanelOpen to true when <details> is opened externally via toggle event", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "external-open" },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.isPanelOpen).toBe(false);
+
+    // Simulate browser opening <details> externally
+    const details = wrapper.find("details").element as HTMLDetailsElement;
+    details.open = true;
+    await wrapper.find("details").trigger("toggle");
+    await nextTick();
+
+    expect(vm.isPanelOpen).toBe(true);
+  });
+
+  it("updates aria-expanded after toggle", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "aria-toggle" },
+    });
+    expect(wrapper.find("summary").attributes("aria-expanded")).toBe("false");
+
+    await wrapper.find("summary").trigger("click");
+    await nextTick();
+    expect(wrapper.find("summary").attributes("aria-expanded")).toBe("true");
+  });
+
+  it("sets open attribute on <details> when panel is open", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "details-open" },
+      attrs: { modelValue: true },
+    });
+    expect(wrapper.find("details").attributes("open")).toBeDefined();
+  });
+
+  it("does not set open attribute on <details> when panel is closed", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "details-closed" },
+    });
+    expect(wrapper.find("details").attributes("open")).toBeUndefined();
+  });
+
+  // ─── forceOpened ──────────────────────────────────────────────────────────
+
+  it("visually hides the icon-wrapper when forceOpened is true, without removing it from layout", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "force-icon", forceOpened: true },
+    });
+    // Kept in the DOM (not v-if'd away) so the summary row height stays consistent
+    // with a toggleable sibling panel's — only visually hidden via the modifier class.
+    expect(wrapper.find(".icon-wrapper").exists()).toBe(true);
+    expect(wrapper.find(".icon-wrapper").classes()).toContain("icon-wrapper--hidden");
+  });
+
+  it("shows the icon-wrapper when forceOpened is false", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "icon-visible", forceOpened: false },
+    });
+    expect(wrapper.find(".icon-wrapper").exists()).toBe(true);
+    expect(wrapper.find(".icon-wrapper").classes()).not.toContain("icon-wrapper--hidden");
+  });
+
+  it("keeps open true after click when forceOpened is true", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "force-click", forceOpened: true },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    await wrapper.find("summary").trigger("click");
+    expect(vm.open).toBe(true);
+  });
+
+  it("does not leak forceOpened into isPanelOpen, so open reverts to false when forceOpened turns back off", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "force-then-unforce", forceOpened: true },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.open).toBe(true);
+
+    // The <details> element's `open` attribute changing (driven by forceOpened) fires
+    // its own native 'toggle' event, independent of any user click.
+    await wrapper.find("details").trigger("toggle");
+    await nextTick();
+    expect(vm.isPanelOpen).toBe(false);
+
+    await wrapper.setProps({ forceOpened: false });
+    expect(vm.open).toBe(false);
+  });
+
+  // ─── Slots ────────────────────────────────────────────────────────────────
+
+  it("renders summary slot content inside .label-wrapper", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "slot-summary" },
+      slots: { summary: '<span data-testid="sum">My Summary</span>' },
+    });
+    expect(wrapper.find('[data-testid="sum"]').text()).toBe("My Summary");
+  });
+
+  it("renders content slot content inside .inner", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "slot-content" },
+      slots: { content: '<p data-testid="body">My Content</p>' },
+    });
+    expect(wrapper.find('[data-testid="body"]').text()).toBe("My Content");
+  });
+
+  it("renders custom icon slot content inside .icon-wrapper", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "slot-icon" },
+      slots: { icon: '<span data-testid="custom-icon">▸</span>' },
+    });
+    expect(wrapper.find('[data-testid="custom-icon"]').exists()).toBe(true);
+  });
+
+  it("renders the default icon when no icon slot is provided", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "default-icon" },
+    });
+    expect(wrapper.find(".icon-wrapper").exists()).toBe(true);
+    expect(wrapper.find(".icon-wrapper .icon").exists()).toBe(true);
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a styleClassPassthrough array to the root element", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: {
+        name: "scp-array",
+        styleClassPassthrough: ["custom-class", "another-class"],
+      },
+    });
+    const root = wrapper.find(".expanding-panel-classic");
+    expect(root.classes()).toContain("custom-class");
+    expect(root.classes()).toContain("another-class");
+  });
+
+  it("applies a single styleClassPassthrough string to the root element", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "scp-string", styleClassPassthrough: "single-class" },
+    });
+    expect(wrapper.find(".expanding-panel-classic").classes()).toContain("single-class");
+  });
+
+  // ─── contentIsOnTop ───────────────────────────────────────────────────────
+
+  it("does not apply content-is-on-top class to root by default", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "content-on-top-default" },
+    });
+    expect(wrapper.find(".expanding-panel-classic").classes()).not.toContain("content-is-on-top");
+  });
+
+  it("applies content-is-on-top class to root when contentIsOnTop is true", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "content-on-top-true", contentIsOnTop: true },
+    });
+    expect(wrapper.find(".expanding-panel-classic").classes()).toContain("content-is-on-top");
+  });
+
+  it("does not apply content-is-on-top class to the content region itself", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "content-on-top-scope", contentIsOnTop: true },
+    });
+    expect(wrapper.find(".expanding-panel-classic-content").classes()).not.toContain("content-is-on-top");
+  });
+
+  it("still toggles open state when summary is clicked with contentIsOnTop true", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "content-on-top-click", contentIsOnTop: true },
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+    expect(vm.isPanelOpen).toBe(false);
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+  });
+
+  it("closes an open contentIsOnTop panel on outside click", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "content-on-top-outside-click", contentIsOnTop: true },
+      attachTo: document.body,
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+
+    // vueuse's onClickOutside debounces re-entrant clicks via a real setTimeout(0) that
+    // flips an internal "isProcessingClick" flag back off. With fake timers active
+    // (test/vitest.setup.ts) that flag never resets on its own, so the summary click
+    // above would otherwise permanently suppress the very next click. Advance past it.
+    vi.advanceTimersByTime(0);
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(vm.isPanelOpen).toBe(false);
+    wrapper.unmount();
+  });
+
+  it("does not close on outside click when contentIsOnTop is false (ordinary accordion)", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "content-on-top-outside-click-inline" },
+      attachTo: document.body,
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelClassicInstance;
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(vm.isPanelOpen).toBe(true);
+    wrapper.unmount();
+  });
+
+  it("does not close a forceOpened contentIsOnTop panel on outside click", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "content-on-top-outside-click-forced", contentIsOnTop: true, forceOpened: true },
+      attachTo: document.body,
+    });
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(wrapper.find("details").attributes("open")).toBeDefined();
+    wrapper.unmount();
+  });
+
+  // ─── name prop / useId fallback ───────────────────────────────────────────
+
+  it("uses the provided name in ARIA attributes", 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");
+  });
+
+  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$/);
+  });
+
+  it("updates the details name and ARIA ids when the name prop changes after mount", async () => {
+    const wrapper = await mountSuspended(ExpandingPanelClassic, {
+      props: { name: "panel-a" },
+    });
+    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");
+  });
+});

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

@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ExpandingPanelClassic > renders correct HTML structure with all props set 1`] = `
+"<div class="expanding-panel-classic extra-class">
+  <details class="expanding-panel-classic-details" name="snap-all" open="">
+    <summary id="id-snap-all-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-all-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 mi-12" aria-hidden="true"></span></div>
+    </summary>
+  </details>
+  <div id="id-snap-all-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-all-trigger" role="region">
+    <div class="inner"></div>
+  </div>
+</div>"
+`;
+
+exports[`ExpandingPanelClassic > renders correct HTML structure with contentIsOnTop true 1`] = `
+"<div class="expanding-panel-classic content-is-on-top">
+  <details class="expanding-panel-classic-details" name="snap-content-on-top">
+    <summary id="id-snap-content-on-top-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-content-on-top-content" aria-expanded="false">
+      <div class="label-wrapper"></div>
+      <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+    </summary>
+  </details>
+  <div id="id-snap-content-on-top-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-content-on-top-trigger" role="region">
+    <div class="inner"></div>
+  </div>
+</div>"
+`;
+
+exports[`ExpandingPanelClassic > renders correct HTML structure with default props 1`] = `
+"<div class="expanding-panel-classic">
+  <details class="expanding-panel-classic-details" name="snap-default">
+    <summary id="id-snap-default-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-default-content" aria-expanded="false">
+      <div class="label-wrapper"></div>
+      <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+    </summary>
+  </details>
+  <div id="id-snap-default-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-default-trigger" role="region">
+    <div class="inner"></div>
+  </div>
+</div>"
+`;
+
+exports[`ExpandingPanelClassic > renders correct HTML structure with populated slots 1`] = `
+"<div class="expanding-panel-classic">
+  <details class="expanding-panel-classic-details" name="snap-slots">
+    <summary id="id-snap-slots-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-slots-content" aria-expanded="false">
+      <div class="label-wrapper"><span>Summary text</span></div>
+      <div class="icon-wrapper"><span>▸</span></div>
+    </summary>
+  </details>
+  <div id="id-snap-slots-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-slots-trigger" role="region">
+    <div class="inner">
+      <p>Content text</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/03.organisms/responsive-header/CONSUMER-STYLING.md

@@ -0,0 +1,66 @@
+# ResponsiveHeader — Consumer Styling Guide
+
+## Public token API
+
+All `--responsive-header-*` / `--responsive-nav-*` / `--overflow-nav-*` tokens are the stable
+override surface. Set them at any scope (global, page, or instance) without touching the
+component itself. `--overflow-nav-*` tokens style `NavigationItems`' overflow-panel content and
+are documented alongside it since that's where they're consumed.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--responsive-header-link-font-size` | `inherit` | Nav-link font-size. **Always set this to a fixed value.** Leaving it `inherit` means a fluid ancestor font-size (`clamp()`/`vw`) can drift nav-item text width without ever re-triggering the overflow-collapse measurement — see the component skill doc's "measurement pipeline" section for the full mechanism. |
+| `--responsive-header-link-color` | `inherit` | Link/summary text colour. |
+| `--responsive-header-color` | `inherit` | Root element text colour. |
+| `--responsive-header-margin` | `0` | Root element margin. |
+| `--responsive-header-bg` | `transparent` | Root element background. |
+| `--responsive-header-border` | `none` | Root element border. |
+| `--responsive-header-border-radius` | `0` | Root element border-radius. |
+| `--responsive-header-padding-block` / `--responsive-header-padding-inline` | `0` | Root element padding. |
+| `--responsive-header-max-height` | `none` | Root element max-height. |
+| `--responsive-header-inline-size` | `100%` | Root element inline-size. |
+| `--responsive-header-sub-nav-bg` / `-border` / `-border-radius` / `-padding` | `Canvas` / `1px solid #efefef75` / `8px` / `12px` | Top-bar dropdown panel (`.main-navigation-sub-nav`). |
+| `--responsive-header-overflow-btn-bg` / `-size` / `-border` / `-outline` / `-icon-color` / `-hover-outline` | `Canvas` / `20px` / `1px solid #ffffff90` / `1px solid #ffffff10` / `inherit` / `1px solid #ffffff` | Overflow burger button. |
+| `--responsive-header-overflow-nav-bg` / `-border` / `-border-radius` / `-padding-block` | `Canvas` / `1px solid #ffffff90` / `8px` / `12px` | Overflow panel container. |
+| `--responsive-nav-decorator-indicator-color` | `currentColor` | Active-item indicator bar/underline. |
+| `--responsive-nav-decorator-hovered-indicator-color` | inherits the above | Indicator colour while hovering. |
+| `--responsive-nav-decorator-hovered-bg` | `oklch(100% 0 0 / 8%)` | Hover highlight background behind the hovered item. |
+
+---
+
+## Global theming — recommended approach
+
+Create `assets/styles/setup/07.components/responsive-header.css` in the consuming app and set
+tokens on a scope class matching the one passed via `styleClassPassthrough`:
+
+```css
+/* assets/styles/setup/07.components/responsive-header.css */
+.site-header-nav {
+  --responsive-header-link-color: var(--slate-00);
+  --responsive-header-bg: #efefef05;
+  --responsive-header-padding-inline: 1.2rem;
+
+  /* Fixed, NOT a fluid var(--step-*) token — see the token table above. */
+  --responsive-header-link-font-size: 1.4rem;
+  @media (min-width: 1024px) {
+    --responsive-header-link-font-size: 1.5rem;
+  }
+}
+```
+
+```vue
+<ResponsiveHeader :responsive-nav-links="responsiveNavLinks" :style-class-passthrough="['site-header-nav']" />
+```
+
+---
+
+## Notes
+
+- Anything with async-loaded content (an `iconName` icon on a nav item, a new decorator inside
+  a nav link) must reserve its own `width`/`height` in CSS — an unsized element measures at
+  `0` during the initial geometry pass and then pops in afterward with nothing to detect it.
+  See `.decorator-icon`/the chevron `.icon` in the component's own `<style>` block for the
+  pattern (`1.35em` square, `flex-shrink: 0`).
+- `NavigationItems`' own tokens (`--overflow-nav-*`) are documented in its own skill doc since
+  they style the overflow-panel's *content*, distinct from `ResponsiveHeader`'s own tokens
+  above which style the top bar and the overflow *button*/*container*.