srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/01.atoms/grids/auto-grid/tests/AutoGrid.spec.ts

@@ -1,24 +1,37 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import AutoGrid from "../AutoGrid.vue";
 
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountComponent = async (options: Parameters<typeof mountSuspended<typeof AutoGrid>>[1] = {}) => {
+  const wrapper = await mountSuspended(AutoGrid, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("AutoGrid", () => {
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(AutoGrid);
+    const wrapper = await mountComponent();
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Snapshots ───────────────────────────────────────────────────────────
 
   it("renders correct HTML structure (default props)", async () => {
-    const wrapper = await mountSuspended(AutoGrid);
+    const wrapper = await mountComponent();
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure (all props and slots set)", async () => {
-    const wrapper = await mountSuspended(AutoGrid, {
+    const wrapper = await mountComponent({
       props: {
         tag: "section",
         isResponsive: true,
@@ -36,29 +49,29 @@ describe("AutoGrid", () => {
   // ─── Root element ────────────────────────────────────────────────────────
 
   it("renders a <div> as the root element by default", async () => {
-    const wrapper = await mountSuspended(AutoGrid);
+    const wrapper = await mountComponent();
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("always has the auto-grid class", async () => {
-    const wrapper = await mountSuspended(AutoGrid);
+    const wrapper = await mountComponent();
     expect(wrapper.classes()).toContain("auto-grid");
   });
 
   // ─── Tag prop ────────────────────────────────────────────────────────────
 
   it("renders a <section> when tag is section", async () => {
-    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "section" } });
+    const wrapper = await mountComponent({ props: { tag: "section" } });
     expect(wrapper.element.tagName).toBe("SECTION");
   });
 
   it("renders an <article> when tag is article", async () => {
-    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "article" } });
+    const wrapper = await mountComponent({ props: { tag: "article" } });
     expect(wrapper.element.tagName).toBe("ARTICLE");
   });
 
   it("renders a <main> when tag is main", async () => {
-    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "main" } });
+    const wrapper = await mountComponent({ props: { tag: "main" } });
     expect(wrapper.element.tagName).toBe("MAIN");
   });
 
@@ -71,13 +84,13 @@ describe("AutoGrid", () => {
   it.each(["div", "section", "article", "main"] as const)(
     "does not set aria-labelledby when tag is %s",
     async (tag) => {
-      const wrapper = await mountSuspended(AutoGrid, { props: { tag } });
+      const wrapper = await mountComponent({ props: { tag } });
       expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
     }
   );
 
   it("passes a consumer aria-label through to the root", async () => {
-    const wrapper = await mountSuspended(AutoGrid, {
+    const wrapper = await mountComponent({
       props: { tag: "section" },
       attrs: { "aria-label": "Practice stats" },
     });
@@ -86,27 +99,27 @@ describe("AutoGrid", () => {
 
   // ─── isResponsive ────────────────────────────────────────────────────────
 
-  it("does not have is-responsive class by default", async () => {
-    const wrapper = await mountSuspended(AutoGrid);
-    expect(wrapper.classes()).not.toContain("is-responsive");
+  it("does not have data-responsive by default", async () => {
+    const wrapper = await mountComponent();
+    expect(wrapper.attributes("data-responsive")).toBeUndefined();
   });
 
-  it("adds is-responsive class when isResponsive is true", async () => {
-    const wrapper = await mountSuspended(AutoGrid, { props: { isResponsive: true } });
-    expect(wrapper.classes()).toContain("is-responsive");
+  it("adds data-responsive when isResponsive is true", async () => {
+    const wrapper = await mountComponent({ props: { isResponsive: true } });
+    expect(wrapper.attributes("data-responsive")).toBe("");
   });
 
-  it("removes is-responsive class when isResponsive changes to false", async () => {
-    const wrapper = await mountSuspended(AutoGrid, { props: { isResponsive: true } });
-    expect(wrapper.classes()).toContain("is-responsive");
+  it("removes data-responsive when isResponsive changes to false", async () => {
+    const wrapper = await mountComponent({ props: { isResponsive: true } });
+    expect(wrapper.attributes("data-responsive")).toBe("");
     await wrapper.setProps({ isResponsive: false });
-    expect(wrapper.classes()).not.toContain("is-responsive");
+    expect(wrapper.attributes("data-responsive")).toBeUndefined();
   });
 
   // ─── Slots ───────────────────────────────────────────────────────────────
 
   it("renders a named slot", async () => {
-    const wrapper = await mountSuspended(AutoGrid, {
+    const wrapper = await mountComponent({
       slots: { "item-1": "<div class='card'>Card 1</div>" },
     });
     expect(wrapper.find(".card").exists()).toBe(true);
@@ -114,7 +127,7 @@ describe("AutoGrid", () => {
   });
 
   it("renders multiple named slots", async () => {
-    const wrapper = await mountSuspended(AutoGrid, {
+    const wrapper = await mountComponent({
       slots: {
         "item-1": "<div class='card-1'>Card 1</div>",
         "item-2": "<div class='card-2'>Card 2</div>",
@@ -127,21 +140,21 @@ describe("AutoGrid", () => {
   });
 
   it("renders no slot content when no slots are provided", async () => {
-    const wrapper = await mountSuspended(AutoGrid);
+    const wrapper = await mountComponent();
     expect(wrapper.text()).toBe("");
   });
 
   // ─── styleClassPassthrough ───────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string to the root", async () => {
-    const wrapper = await mountSuspended(AutoGrid, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: "my-grid" },
     });
     expect(wrapper.classes()).toContain("my-grid");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(AutoGrid, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: ["my-grid", "mbe-32"] },
     });
     expect(wrapper.classes()).toContain("my-grid");
@@ -149,7 +162,7 @@ describe("AutoGrid", () => {
   });
 
   it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(AutoGrid, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: ["original"] },
     });
     expect(wrapper.classes()).toContain("original");

package/app/components/01.atoms/grids/auto-grid/tests/__snapshots__/AutoGrid.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AutoGrid > renders correct HTML structure (all props and slots set) 1`] = `
-"<section class="auto-grid custom-class is-responsive">
+"<section class="auto-grid custom-class" data-responsive="">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>

package/app/components/01.atoms/grids/column-flow-grid/CONSUMER-STYLING.md

@@ -24,6 +24,15 @@ part of the public token API. See `.claude/skills/components/column-flow-grid.md
 
 ---
 
+## State hooks
+
+No state attributes. Element classes: `.column-flow-grid-wrapper` (root, the multi-column box) and
+`.column-flow-grid-item` (each slot, `break-inside: avoid`, wraps long words since 2026-10-21).
+
+Private (not public API): `--_column-flow-grid-gap` and `--_column-flow-grid-item-min-width`, set
+inline from the `gap`/`unit` and `itemMinWidth` props. The second was `--_item-min-width` until
+2026-10-21, a generic name that leaked into slotted components.
+
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with

package/app/components/01.atoms/grids/column-flow-grid/ColumnFlowGrid.vue

@@ -3,7 +3,7 @@
     :is="tag"
     class="column-flow-grid-wrapper"
     :class="[elementClasses]"
-    :style="`--_column-flow-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
+    :style="`--_column-flow-grid-gap: ${gap}${unit}; --_column-flow-grid-item-min-width: ${itemMinWidth}px`"
   >
     <div v-for="(_, name) in $slots" :key="name" class="column-flow-grid-item">
       <slot :name="name"></slot>
@@ -41,11 +41,12 @@ watch(
 <style lang="css">
 @layer components {
   .column-flow-grid-wrapper {
-    columns: auto var(--_item-min-width);
+    columns: auto var(--_column-flow-grid-item-min-width);
     column-gap: var(--_column-flow-grid-gap);
 
     .column-flow-grid-item {
       break-inside: avoid;
+      overflow-wrap: anywhere;
       outline: 0.1rem solid var(--column-flow-grid-item-border-colour, var(--theme-border));
       padding: var(--column-flow-grid-item-padding, 1.2rem);
       margin-block-end: var(--_column-flow-grid-gap);

package/app/components/01.atoms/grids/column-flow-grid/stories/ColumnFlowGrid.stories.ts

@@ -1,4 +1,7 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import type { MediaCanvas } from "~/types/components";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
 import ColumnFlowGrid from "../ColumnFlowGrid.vue";
 
 interface ColumnFlowGridArgs {
@@ -176,3 +179,46 @@ export const TwoItems: StoryFn<ColumnFlowGridArgs> = (args) => ({
   `,
 });
 TwoItems.storyName = "Two Items (no count prop needed)";
+
+export const StressTest: StoryFn = () => ({
+  components: { ColumnFlowGrid },
+  template: `
+    <ColumnFlowGrid :item-min-width="240">
+          <template #item-1><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><h3 style="margin: 0;">Supercalifragilisticexpialidociousandthensomemoretextwithoutanyspaces</h3><p style="margin: 0;">https://example.com/a/very/long/unbroken/path/that/never/wraps/on/its/own</p></div></template>
+          <template #item-2><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;">Ein sehr langer Beschreibungstext aus Northtown, der auf schmalen Bildschirmen mehrfach umbrechen muss, ohne das Raster zu sprengen oder die Nachbarspalten zusammenzudrücken.</p></div></template>
+          <template #item-3><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><img src="/images/banners/banner-1.webp" width="1600" height="400" alt="" style="display: block; max-inline-size: 100%; block-size: auto;"></div></template>
+          <template #item-4><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;">🙂 👍🏽 👨‍👩‍👧 &lt;b&gt;Not bold&lt;/b&gt;</p></div></template>
+          <template #item-5><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;" dir="rtl">مرحبا بالعالم، نص طويل من اليمين إلى اليسار</p></div></template>
+          <template #item-6><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"></div></template>
+          <template #item-7><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;">x</p></div></template>
+        </ColumnFlowGrid>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.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; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ];
+StressTest.parameters = {
+    layout: "fullscreen",
+    docs: {
+      story: { inline: false, height: "720px" },
+      description: {
+        story:
+          "Oversized and hostile slot content at every `CanvasSwitcher` width. Check that: the unbroken heading and URL wrap inside their cell instead of widening it; the German paragraph wraps; the 1600px image scales down to its cell; emoji, `<b>` and right-to-left text render as text; the empty and one-character cells keep their place; no neighbouring cell is squeezed to nothing and nothing scrolls sideways. Items flow down each column, so reading order runs top to bottom, then across.",
+      },
+    },
+  };

package/app/components/01.atoms/grids/column-flow-grid/tests/ColumnFlowGrid.spec.ts

@@ -1,27 +1,40 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ColumnFlowGrid from "../ColumnFlowGrid.vue";
 
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountComponent = async (options: Parameters<typeof mountSuspended<typeof ColumnFlowGrid>>[1] = {}) => {
+  const wrapper = await mountSuspended(ColumnFlowGrid, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("ColumnFlowGrid", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid);
+    const wrapper = await mountComponent();
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders as div by default", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid);
+    const wrapper = await mountComponent();
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("renders a different tag when provided", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid, {
+    const wrapper = await mountComponent({
       props: { tag: "section" },
     });
     expect(wrapper.element.tagName).toBe("SECTION");
   });
 
   it("renders slot content", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid, {
+    const wrapper = await mountComponent({
       slots: {
         "item-1": "<div>Item 1</div>",
       },
@@ -30,7 +43,7 @@ describe("ColumnFlowGrid", () => {
   });
 
   it("renders each provided slot as its own column-flow-grid-item", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid, {
+    const wrapper = await mountComponent({
       slots: {
         "item-1": "<div>Item 1</div>",
         "item-2": "<div>Item 2</div>",
@@ -45,28 +58,28 @@ describe("ColumnFlowGrid", () => {
   });
 
   it("renders no items when no slots are provided", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid);
+    const wrapper = await mountComponent();
     expect(wrapper.findAll(".column-flow-grid-item")).toHaveLength(0);
   });
 
   it("applies itemMinWidth and gap as inline CSS custom properties", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid, {
+    const wrapper = await mountComponent({
       props: { itemMinWidth: 250, gap: 2, unit: "em" },
     });
     const style = (wrapper.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_item-min-width")).toBe("250px");
+    expect(style.getPropertyValue("--_column-flow-grid-item-min-width")).toBe("250px");
     expect(style.getPropertyValue("--_column-flow-grid-gap")).toBe("2em");
   });
 
   it("applies styleClassPassthrough", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: "custom-class" },
     });
     expect(wrapper.classes()).toContain("custom-class");
   });
 
   it("applies multiple styleClassPassthrough classes", async () => {
-    const wrapper = await mountSuspended(ColumnFlowGrid, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: ["class-a", "class-b"] },
     });
     expect(wrapper.classes()).toContain("class-a");

package/app/components/01.atoms/grids/grid-stack/CONSUMER-STYLING.md

@@ -31,6 +31,9 @@ There are no `data-*` attributes or state classes.
 
 ---
 
+The stack's single column is `minmax(0, 1fr)` and each layer has `min-inline-size: 0` (since
+2026-10-21), so a layer with an unbroken string can't widen the stack past its container.
+
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with

package/app/components/01.atoms/grids/grid-stack/GridStack.vue

@@ -31,9 +31,11 @@ watch(
     display: grid;
     grid-template-areas: "stack";
     grid-template-rows: 100%;
+    grid-template-columns: minmax(0, 1fr);
 
     .grid-stack__layer {
       grid-area: stack;
+      min-inline-size: 0;
     }
   }
 }

package/app/components/01.atoms/grids/grid-stack/stories/GridStack.stories.ts

@@ -1,4 +1,7 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import type { MediaCanvas } from "~/types/components";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
 import GridStackComponent from "../GridStack.vue";
 import BannerVideoComponent from "../../../banner-video/BannerVideo.vue";
 
@@ -160,3 +163,41 @@ WithVideoOverlay.parameters = {
     },
   },
 };
+
+export const StressTest: StoryFn = () => ({
+  components: { GridStackComponent },
+  template: `
+    <GridStackComponent>
+          <template #background><img src="/images/banners/banner-1.webp" width="1600" height="400" alt="" style="display: block; max-inline-size: 100%; block-size: auto;"></template>
+          <template #overlay><div style="align-self: end; padding: 1.2rem; background: color-mix(in oklab, var(--theme-surface-subtle) 85%, transparent);"><h3 style="margin: 0;">Supercalifragilisticexpialidociousandthensomemoretextwithoutanyspaces</h3><p style="margin: 0;">https://example.com/a/very/long/unbroken/path/that/never/wraps/on/its/own</p><p style="margin: 0;">Ein sehr langer Beschreibungstext aus Northtown, der auf schmalen Bildschirmen mehrfach umbrechen muss, ohne das Raster zu sprengen oder die Nachbarspalten zusammenzudrücken.</p><p style="margin: 0;" dir="rtl">مرحبا بالعالم، نص طويل من اليمين إلى اليسار</p></div></template>
+        </GridStackComponent>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.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; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ];
+StressTest.parameters = {
+    layout: "fullscreen",
+    docs: {
+      story: { inline: false, height: "720px" },
+      description: {
+        story:
+          "Oversized and hostile slot content at every `CanvasSwitcher` width. Check that: the unbroken heading and URL wrap inside their cell instead of widening it; the German paragraph wraps; the 1600px image scales down to its cell; emoji, `<b>` and right-to-left text render as text; the empty and one-character cells keep their place; no neighbouring cell is squeezed to nothing and nothing scrolls sideways. Here the stress is one layer whose text is far wider than the image layer beneath it: both stay inside the stack.",
+      },
+    },
+  };

package/app/components/01.atoms/grids/grid-stack/tests/GridStack.spec.ts

@@ -1,27 +1,40 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import GridStack from "../GridStack.vue";
 
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountComponent = async (options: Parameters<typeof mountSuspended<typeof GridStack>>[1] = {}) => {
+  const wrapper = await mountSuspended(GridStack, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("GridStack", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(GridStack);
+    const wrapper = await mountComponent();
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders as div by default", async () => {
-    const wrapper = await mountSuspended(GridStack);
+    const wrapper = await mountComponent();
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("renders a different tag when provided", async () => {
-    const wrapper = await mountSuspended(GridStack, {
+    const wrapper = await mountComponent({
       props: { tag: "section" },
     });
     expect(wrapper.element.tagName).toBe("SECTION");
   });
 
   it("renders slot content", async () => {
-    const wrapper = await mountSuspended(GridStack, {
+    const wrapper = await mountComponent({
       slots: {
         "layer-1": "<div>Layer 1</div>",
       },
@@ -30,7 +43,7 @@ describe("GridStack", () => {
   });
 
   it("renders multiple slots as stacked layers", async () => {
-    const wrapper = await mountSuspended(GridStack, {
+    const wrapper = await mountComponent({
       slots: {
         "layer-1": "<div>Layer 1</div>",
         "layer-2": "<div>Layer 2</div>",
@@ -45,19 +58,19 @@ describe("GridStack", () => {
   });
 
   it("renders no layers when no slots are provided", async () => {
-    const wrapper = await mountSuspended(GridStack);
+    const wrapper = await mountComponent();
     expect(wrapper.findAll(".grid-stack__layer")).toHaveLength(0);
   });
 
   it("applies styleClassPassthrough", async () => {
-    const wrapper = await mountSuspended(GridStack, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: "custom-class" },
     });
     expect(wrapper.classes()).toContain("custom-class");
   });
 
   it("applies multiple styleClassPassthrough classes", async () => {
-    const wrapper = await mountSuspended(GridStack, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: ["class-a", "class-b"] },
     });
     expect(wrapper.classes()).toContain("class-a");
@@ -65,7 +78,7 @@ describe("GridStack", () => {
   });
 
   it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(GridStack, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: ["original"] },
     });
     await wrapper.setProps({ styleClassPassthrough: ["updated"] });
@@ -74,12 +87,12 @@ describe("GridStack", () => {
   });
 
   it("always has the grid-stack class", async () => {
-    const wrapper = await mountSuspended(GridStack);
+    const wrapper = await mountComponent();
     expect(wrapper.classes()).toContain("grid-stack");
   });
 
   it("passes a consumer aria-label through to the root", async () => {
-    const wrapper = await mountSuspended(GridStack, {
+    const wrapper = await mountComponent({
       props: { tag: "section" },
       attrs: { "aria-label": "Hero" },
     });
@@ -88,7 +101,7 @@ describe("GridStack", () => {
   });
 
   it("renders the base layer first so later slots paint on top", async () => {
-    const wrapper = await mountSuspended(GridStack, {
+    const wrapper = await mountComponent({
       slots: {
         "layer-1": "<div class='base'>Base</div>",
         "layer-2": "<div class='overlay'>Overlay</div>",

package/app/components/01.atoms/grids/masonry-grid/CONSUMER-STYLING.md

@@ -26,6 +26,21 @@ computed in JS from measured pixel values. See `.claude/skills/components/masonr
 
 ---
 
+## State hooks
+
+| Hook | Meaning |
+|---|---|
+| `.masonry-grid-wrapper[data-multiple-cols]` | More than one column fits, so tiles are absolutely positioned by script |
+
+Element classes: `.masonry-grid` (root), `.masonry-grid-wrapper`, `.masonry-grid-item`.
+
+Private (not public API), set inline by script: `--_masonry-grid-item-position`,
+`--_masonry-grid-item-top`, `--_masonry-grid-item-left` and `--_masonry-grid-item-width` on each tile and `--_masonry-grid-height` on the wrapper.
+
+> Changed 2026-10-21: the state was the class `.multiple-cols`, and the private tokens were
+> `--_position`, `--_position-top`, `--_position-left`, `--_element-width` and `--_wrapper-height`:
+> generic names that inherited into components placed inside a tile.
+
 ## Local overrides
 
 Set the tokens above on an element you own (a page or section class, or a class added with