srcdev-nuxt-components 9.6.19 → 9.6.20

package/app/components/01.atoms/grids/masonry-grid/MasonryGrid.vue

@@ -1,7 +1,7 @@
 <template>
   <component :is="tag" class="masonry-grid" :class="[elementClasses]">
-    <div ref="gridWrapper" class="masonry-grid-wrapper" :class="{ 'multiple-cols': !isSingleColumn }">
-      <div v-for="name in slotNames" :key="name" ref="gridItemRefs" class="masonry-grid-item">
+    <div ref="gridWrapper" class="masonry-grid-wrapper" :data-multiple-cols="isSingleColumn ? undefined : ''">
+      <div v-for="name in slotNames()" :key="name" class="masonry-grid-item">
         <slot :name="name"></slot>
       </div>
     </div>
@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { useElementSize } from "@vueuse/core";
+import { useElementSize, useResizeObserver } from "@vueuse/core";
 
 interface Props {
   tag?: "div" | "section" | "article" | "main";
@@ -37,14 +37,15 @@ const props = withDefaults(defineProps<Props>(), {
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const slots = useSlots();
-// Consumer-provided slot names, in natural authoring/DOM order — this is both the "data" this
-// component works with (no separate gridData/itemCount prop needed) and the order items are
-// measured and packed in, so reading order is always preserved: unlike a CSS `columns`-based
-// masonry, this never needs to reorder the DOM to keep visual and reading order in sync.
-const slotNames = computed(() => Object.keys(slots));
+// Slot names in authoring order; a function, not a computed, because slots aren't reactive.
+const slotNames = () => Object.keys(slots);
 
 const gridWrapper = ref<HTMLElement | null>(null);
-const gridItemRefs = ref<HTMLElement[]>([]);
+// Read from the DOM: a v-for ref array isn't guaranteed to follow DOM order, and packing depends on it.
+const gridItems = shallowRef<HTMLElement[]>([]);
+const readItems = () => {
+  gridItems.value = Array.from(gridWrapper.value?.children ?? []) as HTMLElement[];
+};
 // Resize-reactive — useElementSize wires up its own ResizeObserver internally.
 const { width } = useElementSize(gridWrapper);
 
@@ -63,13 +64,13 @@ const itemMinWidthPx = computed(() => `${props.itemMinWidth}px`);
 // order. Because placement follows DOM order directly, no reordering is ever needed here.
 function updateGrid() {
   if (gridWrapper.value === null || columnCount.value <= 1) {
-    gridItemRefs.value.forEach((item) => {
-      item?.style.removeProperty("--_position");
-      item?.style.removeProperty("--_position-top");
-      item?.style.removeProperty("--_position-left");
-      item?.style.removeProperty("--_element-width");
+    gridItems.value.forEach((item) => {
+      item?.style.removeProperty("--_masonry-grid-item-position");
+      item?.style.removeProperty("--_masonry-grid-item-top");
+      item?.style.removeProperty("--_masonry-grid-item-left");
+      item?.style.removeProperty("--_masonry-grid-item-width");
     });
-    gridWrapper.value?.style.removeProperty("--_wrapper-height");
+    gridWrapper.value?.style.removeProperty("--_masonry-grid-height");
     return;
   }
 
@@ -92,30 +93,47 @@ function updateGrid() {
 
   const colHeights = Array(columnCount.value).fill(0);
 
-  gridItemRefs.value.forEach((item) => {
+  gridItems.value.forEach((item) => {
     const minHeight = Math.min(...colHeights);
     const minIndex = colHeights.indexOf(minHeight);
 
-    item?.style.setProperty("--_position", "absolute");
-    item?.style.setProperty("--_position-top", `${minHeight}px`);
-    item?.style.setProperty("--_position-left", `${startX + minIndex * (itemWidth + props.gap)}px`);
-    item?.style.setProperty("--_element-width", `${itemWidth}px`);
+    item?.style.setProperty("--_masonry-grid-item-position", "absolute");
+    item?.style.setProperty("--_masonry-grid-item-top", `${minHeight}px`);
+    item?.style.setProperty("--_masonry-grid-item-left", `${startX + minIndex * (itemWidth + props.gap)}px`);
+    item?.style.setProperty("--_masonry-grid-item-width", `${itemWidth}px`);
 
     colHeights[minIndex] += Math.floor((item?.offsetHeight ?? 0) + props.gap);
   });
 
   const maxHeight = Math.max(...colHeights);
-  gridWrapper.value.style.setProperty("--_wrapper-height", `${maxHeight}px`);
+  gridWrapper.value.style.setProperty("--_masonry-grid-height", `${maxHeight}px`);
 }
 
 // Re-pack whenever the measured width changes (useElementSize already wires up its own
 // ResizeObserver — a second explicit useResizeObserver call here would just duplicate it).
+let frame = 0;
+const scheduleUpdate = () => {
+  cancelAnimationFrame(frame);
+  frame = requestAnimationFrame(() => updateGrid());
+};
+
 watch(width, () => nextTick(() => updateGrid()));
 
+// A tile that changes height (an image loading, text wrapping) re-packs without a width change.
+useResizeObserver(() => gridItems.value, scheduleUpdate);
+
 onMounted(() => {
+  readItems();
   nextTick(() => updateGrid());
 });
 
+onUpdated(() => {
+  readItems();
+  scheduleUpdate();
+});
+
+onBeforeUnmount(() => cancelAnimationFrame(frame));
+
 watch(
   () => [props.fixedWidth, props.justify, props.itemMinWidth, props.gap],
   () => updateGrid()
@@ -142,30 +160,32 @@ watch(
        (minmax(itemMinWidth, 1fr)) only ever hurt: on a narrow container it fights the container
        for space instead of just filling it. itemMinWidth starts governing column width once
        there's an actual choice to make, from two columns up (below). */
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
 
-    height: var(--_wrapper-height, auto);
+    height: var(--_masonry-grid-height, auto);
 
     @container (min-width: 768px) {
-      grid-template-columns: repeat(2, minmax(v-bind(itemMinWidthPx), 1fr));
+      grid-template-columns: repeat(2, minmax(min(100%, v-bind(itemMinWidthPx)), 1fr));
     }
     @container (min-width: 1024px) {
-      grid-template-columns: repeat(3, minmax(v-bind(itemMinWidthPx), 1fr));
+      grid-template-columns: repeat(3, minmax(min(100%, v-bind(itemMinWidthPx)), 1fr));
     }
     @container (min-width: 1280px) {
-      grid-template-columns: repeat(4, minmax(v-bind(itemMinWidthPx), 1fr));
+      grid-template-columns: repeat(4, minmax(min(100%, v-bind(itemMinWidthPx)), 1fr));
     }
 
     .masonry-grid-item {
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
       outline: 0.1rem solid var(--masonry-grid-item-border-colour, var(--theme-border));
       padding: var(--masonry-grid-item-padding, 1.2rem);
     }
 
-    &.multiple-cols .masonry-grid-item {
-      position: var(--_position, static);
-      top: var(--_position-top, auto);
-      left: var(--_position-left, auto);
-      width: var(--_element-width, auto);
+    &[data-multiple-cols] .masonry-grid-item {
+      position: var(--_masonry-grid-item-position, static);
+      top: var(--_masonry-grid-item-top, auto);
+      left: var(--_masonry-grid-item-left, auto);
+      width: var(--_masonry-grid-item-width, auto);
 
       @media (prefers-reduced-motion: no-preference) {
         transition:

package/app/components/01.atoms/grids/masonry-grid/stories/MasonryGrid.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 MasonryGrid from "../MasonryGrid.vue";
 
 interface MasonryGridArgs {
@@ -197,3 +200,48 @@ export const TwoItems: StoryFn<MasonryGridArgs> = (args) => ({
   `,
 });
 TwoItems.storyName = "Two Items (no count prop needed)";
+
+export const StressTest: StoryFn = () => ({
+  components: { MasonryGrid },
+  template: `
+    <MasonryGrid :item-min-width="220" :gap="12">
+          <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>
+          <template #item-8><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-9><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>
+        </MasonryGrid>
+  `,
+});
+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. When a tile changes height after the first layout (a late-loading font or image, or text re-wrapping), the tiles below it re-pack instead of overlapping; until 2026-10-21 only a container width change re-packed.",
+      },
+    },
+  };

package/app/components/01.atoms/grids/masonry-grid/tests/MasonryGrid.spec.ts

@@ -1,6 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { nextTick } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import MasonryGrid from "../MasonryGrid.vue";
 
 // useElementSize/useResizeObserver (from @vueuse/core) require ResizeObserver, which jsdom
@@ -9,9 +9,9 @@ import MasonryGrid from "../MasonryGrid.vue";
 // way to feed the component a non-zero measured width.
 // Vitest 4: a mock's implementation must be a regular function (not an arrow function)
 // to remain constructible via `new`.
-let resizeCallback: ResizeObserverCallback | undefined;
+const resizeCallbacks: ResizeObserverCallback[] = [];
 const mockResizeObserver = vi.fn(function (callback: ResizeObserverCallback) {
-  resizeCallback = callback;
+  resizeCallbacks.push(callback);
   return {
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -20,16 +20,18 @@ const mockResizeObserver = vi.fn(function (callback: ResizeObserverCallback) {
 });
 
 beforeEach(() => {
-  resizeCallback = undefined;
+  resizeCallbacks.length = 0;
   vi.stubGlobal("ResizeObserver", mockResizeObserver);
   // ⚠️ Do NOT call vi.unstubAllGlobals() in afterEach — it removes global stubs from
   // vitest.setup.ts ($fetch, etc.)
 });
 
 function simulateResizeTo(width: number) {
-  resizeCallback?.(
-    [{ contentBoxSize: [{ inlineSize: width, blockSize: 0 }], contentRect: { width } } as unknown as ResizeObserverEntry],
+  resizeCallbacks.forEach((callback) =>
+    callback(
+      [{ contentBoxSize: [{ inlineSize: width, blockSize: 0 }], contentRect: { width } } as unknown as ResizeObserverEntry],
     {} as ResizeObserver
+    )
   );
 }
 
@@ -37,26 +39,39 @@ function stubOffsetHeight(el: Element, height: number) {
   Object.defineProperty(el, "offsetHeight", { value: height, configurable: true });
 }
 
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountGrid = async (options: Parameters<typeof mountSuspended<typeof MasonryGrid>>[1] = {}) => {
+  const wrapper = await mountSuspended(MasonryGrid, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("MasonryGrid", () => {
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(MasonryGrid);
+    const wrapper = await mountGrid();
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders as div by default", async () => {
-    const wrapper = await mountSuspended(MasonryGrid);
+    const wrapper = await mountGrid();
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("renders a different tag when provided", async () => {
-    const wrapper = await mountSuspended(MasonryGrid, {
+    const wrapper = await mountGrid({
       props: { tag: "section" },
     });
     expect(wrapper.element.tagName).toBe("SECTION");
   });
 
   it("renders slot content in natural authoring order", async () => {
-    const wrapper = await mountSuspended(MasonryGrid, {
+    const wrapper = await mountGrid({
       slots: {
         "item-1": "<div>Item 1</div>",
         "item-2": "<div>Item 2</div>",
@@ -67,23 +82,23 @@ describe("MasonryGrid", () => {
   });
 
   it("renders no items when no slots are provided", async () => {
-    const wrapper = await mountSuspended(MasonryGrid);
+    const wrapper = await mountGrid();
     expect(wrapper.findAll(".masonry-grid-item")).toHaveLength(0);
   });
 
   it("does not absolutely position items when only one column fits (single-column fallback)", async () => {
-    const wrapper = await mountSuspended(MasonryGrid, {
+    const wrapper = await mountGrid({
       slots: { "item-1": "<div>Item 1</div>", "item-2": "<div>Item 2</div>" },
     });
     await nextTick();
     await nextTick();
-    expect(wrapper.find(".masonry-grid-wrapper").classes()).not.toContain("multiple-cols");
+    expect(wrapper.find(".masonry-grid-wrapper").attributes("data-multiple-cols")).toBeUndefined();
     const item = wrapper.find(".masonry-grid-item").element as HTMLElement;
-    expect(item.style.getPropertyValue("--_position")).toBe("");
+    expect(item.style.getPropertyValue("--_masonry-grid-item-position")).toBe("");
   });
 
   it("packs items into whichever column is currently shortest", async () => {
-    const wrapper = await mountSuspended(MasonryGrid, {
+    const wrapper = await mountGrid({
       // itemMinWidth (300, default) + gap (12, default) = 312 -> floor(700/312) = 2 columns
       slots: {
         "item-1": "<div>Item 1</div>",
@@ -107,16 +122,16 @@ describe("MasonryGrid", () => {
     const el1 = items[0]!.element as HTMLElement;
     const el2 = items[1]!.element as HTMLElement;
     const el3 = items[2]!.element as HTMLElement;
-    expect(el1.style.getPropertyValue("--_position-top")).toBe("0px");
-    expect(el1.style.getPropertyValue("--_position-left")).toBe("0px");
-    expect(el2.style.getPropertyValue("--_position-top")).toBe("0px");
-    expect(el2.style.getPropertyValue("--_position-left")).toBe("356px");
-    expect(el3.style.getPropertyValue("--_position-top")).toBe("62px");
-    expect(el3.style.getPropertyValue("--_position-left")).toBe("356px");
+    expect(el1.style.getPropertyValue("--_masonry-grid-item-top")).toBe("0px");
+    expect(el1.style.getPropertyValue("--_masonry-grid-item-left")).toBe("0px");
+    expect(el2.style.getPropertyValue("--_masonry-grid-item-top")).toBe("0px");
+    expect(el2.style.getPropertyValue("--_masonry-grid-item-left")).toBe("356px");
+    expect(el3.style.getPropertyValue("--_masonry-grid-item-top")).toBe("62px");
+    expect(el3.style.getPropertyValue("--_masonry-grid-item-left")).toBe("356px");
   });
 
   it("uses a fixed item width when fixedWidth is set, ignoring stretch sizing", async () => {
-    const wrapper = await mountSuspended(MasonryGrid, {
+    const wrapper = await mountGrid({
       props: { fixedWidth: true, itemMinWidth: 200 },
       slots: { "item-1": "<div>Item 1</div>", "item-2": "<div>Item 2</div>" },
     });
@@ -124,11 +139,11 @@ describe("MasonryGrid", () => {
     await nextTick();
     await nextTick();
     const item = wrapper.find(".masonry-grid-item").element as HTMLElement;
-    expect(item.style.getPropertyValue("--_element-width")).toBe("200px");
+    expect(item.style.getPropertyValue("--_masonry-grid-item-width")).toBe("200px");
   });
 
   it("spaces fixed-width columns by exactly itemWidth + gap, and centers the block via justify", async () => {
-    const wrapper = await mountSuspended(MasonryGrid, {
+    const wrapper = await mountGrid({
       props: { fixedWidth: true, itemMinWidth: 200, gap: 20, justify: "center" },
       slots: {
         "item-1": "<div>Item 1</div>",
@@ -144,15 +159,55 @@ describe("MasonryGrid", () => {
     // available -> 30px leftover on each side.
     const items = wrapper.findAll(".masonry-grid-item");
     const [el1, el2, el3] = items.map((item) => item.element as HTMLElement);
-    expect(el1!.style.getPropertyValue("--_position-left")).toBe("30px");
-    expect(el2!.style.getPropertyValue("--_position-left")).toBe("250px");
-    expect(el3!.style.getPropertyValue("--_position-left")).toBe("470px");
+    expect(el1!.style.getPropertyValue("--_masonry-grid-item-left")).toBe("30px");
+    expect(el2!.style.getPropertyValue("--_masonry-grid-item-left")).toBe("250px");
+    expect(el3!.style.getPropertyValue("--_masonry-grid-item-left")).toBe("470px");
   });
 
   it("applies styleClassPassthrough", async () => {
-    const wrapper = await mountSuspended(MasonryGrid, {
+    const wrapper = await mountGrid({
       props: { styleClassPassthrough: "custom-class" },
     });
     expect(wrapper.classes()).toContain("custom-class");
   });
+
+  it("re-packs when a tile changes height without a width change", async () => {
+    const wrapper = await mountGrid({
+      slots: { "item-1": "<div>1</div>", "item-2": "<div>2</div>", "item-3": "<div>3</div>" },
+    });
+    const items = wrapper.findAll(".masonry-grid-item");
+    stubOffsetHeight(items[0]!.element, 100);
+    stubOffsetHeight(items[1]!.element, 50);
+    stubOffsetHeight(items[2]!.element, 80);
+    simulateResizeTo(700);
+    await nextTick();
+    await nextTick();
+    const el3 = items[2]!.element as HTMLElement;
+    expect(el3.style.getPropertyValue("--_masonry-grid-item-left")).toBe("356px");
+
+    stubOffsetHeight(items[0]!.element, 10);
+    resizeCallbacks.at(-1)!([], {} as ResizeObserver);
+    vi.advanceTimersByTime(20);
+    await nextTick();
+    expect(el3.style.getPropertyValue("--_masonry-grid-item-top")).toBe("22px");
+    expect(el3.style.getPropertyValue("--_masonry-grid-item-left")).toBe("0px");
+  });
+
+  it("renders a slot that appears after mount", async () => {
+    const showSecond = ref(false);
+    const Host = defineComponent({
+      setup: () => () =>
+        h(MasonryGrid, null, {
+          "item-1": () => h("div", "First"),
+          ...(showSecond.value ? { "item-2": () => h("div", "Second") } : {}),
+        }),
+    });
+    const wrapper = await mountSuspended(Host);
+    mounted.push(wrapper);
+    expect(wrapper.findAll(".masonry-grid-item")).toHaveLength(1);
+
+    showSecond.value = true;
+    await nextTick();
+    expect(wrapper.findAll(".masonry-grid-item").map((item) => item.text())).toEqual(["First", "Second"]);
+  });
 });

package/app/components/01.atoms/page-row/CONSUMER-STYLING.md

@@ -27,7 +27,7 @@ computed tracks `--_full-track-min`, `--_full-track`, `--_popout-track`, `--_con
 
 | Hook | When |
 |---|---|
-| `.page-row.full`, `.popout`, `.content`, `.inset-content` | The `variant` prop (default `content`). Sets the row's own track when nested, and the default track for its direct non-PageRow children |
+| `.page-row[data-variant="full"]`, `"popout"`, `"content"`, `"inset-content"` | The `variant` prop (default `content`). Sets the row's own track when nested, and the default track for its direct non-PageRow children |
 | `[data-align="start"]`, `[data-align="end"]` | The `align` prop on a nested row: bleeds to the left or right edge instead of centring |
 
 Direct children of a `.page-row` are grid items placed on a named track (`full`, `popout`,
@@ -35,6 +35,11 @@ Direct children of a `.page-row` are grid items placed on a named track (`full`,
 
 ---
 
+> Changed 2026-10-21: the variant was a bare class on the root (`.page-row.full`, `.content`, ...);
+> it is now the `data-variant` attribute. A consumer's own `.content` or `.full` CSS no longer
+> matches page rows, and selectors like `.page-row.full` need updating to
+> `.page-row[data-variant="full"]`.
+
 ## Global theming
 
 Create `assets/styles/setup/07.components/page-row.css` in the consuming app and set tokens on

package/app/components/01.atoms/page-row/PageRow.vue

@@ -3,7 +3,8 @@
     :is="tag"
     :id
     class="page-row"
-    :class="[elementClasses, variant]"
+    :class="[elementClasses]"
+    :data-variant="variant"
     :data-align="align || undefined"
     :aria-labelledby="ariaLabelledby"
   >
@@ -42,7 +43,7 @@ watch(
   /*
    * Page layout grid — https://layout-breakouts-builder.vercel.app
    * Each .page-row is both a CSS grid container and a grid item when nested.
-   * Direct children default to the content column; nest a .page-row.{variant}
+   * Direct children default to the content column; nest a .page-row[data-variant]
    * to break out to a wider or narrower track.
    */
   .page-row {
@@ -99,13 +100,13 @@ watch(
    * its own children span full width, not just control placement when nested.
    * Specificity (0,2,0) — nested .page-row variant overrides below win at (0,3,0).
    */
-  .page-row.full > * {
+  .page-row[data-variant="full"] > * {
     grid-column: full;
   }
-  .page-row.popout > * {
+  .page-row[data-variant="popout"] > * {
     grid-column: popout;
   }
-  .page-row.inset-content > * {
+  .page-row[data-variant="inset-content"] > * {
     grid-column: inset-content;
   }
 
@@ -118,16 +119,16 @@ watch(
   .page-row > .page-row {
     align-content: start;
 
-    &.full {
+    &[data-variant="full"] {
       grid-column: full;
     }
-    &.popout {
+    &[data-variant="popout"] {
       grid-column: popout;
     }
-    &.content {
+    &[data-variant="content"] {
       grid-column: content;
     }
-    &.inset-content {
+    &[data-variant="inset-content"] {
       grid-column: inset-content;
     }
   }
@@ -138,25 +139,25 @@ watch(
    * Specificity (0,4,0) beats the symmetric rules above at (0,3,0).
    */
   .page-row > .page-row[data-align="start"] {
-    &.popout {
+    &[data-variant="popout"] {
       grid-column: full-start / popout-end;
     }
-    &.content {
+    &[data-variant="content"] {
       grid-column: full-start / content-end;
     }
-    &.inset-content {
+    &[data-variant="inset-content"] {
       grid-column: full-start / inset-content-end;
     }
   }
 
   .page-row > .page-row[data-align="end"] {
-    &.popout {
+    &[data-variant="popout"] {
       grid-column: popout-start / full-end;
     }
-    &.content {
+    &[data-variant="content"] {
       grid-column: content-start / full-end;
     }
-    &.inset-content {
+    &[data-variant="inset-content"] {
       grid-column: inset-content-start / full-end;
     }
   }

package/app/components/01.atoms/page-row/stories/PageRow.stories.ts

@@ -351,3 +351,26 @@ AriaLabelledBy.parameters = {
     },
   },
 };
+
+export const StressTest: StoryFn = () => ({
+  components: { PageRowComponent },
+  template: `
+    <PageRowComponent variant="full">
+          <PageRowComponent variant="popout"><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></PageRowComponent>
+          <PageRowComponent variant="content"><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><img src="/images/banners/banner-1.webp" width="1600" height="400" alt="" style="display: block; max-inline-size: 100%; block-size: auto;"></div></PageRowComponent>
+          <PageRowComponent variant="inset-content" align="end"><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><p style="margin: 0;" dir="rtl">مرحبا بالعالم، نص طويل من اليمين إلى اليسار</p></div></PageRowComponent>
+          <PageRowComponent variant="full"><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;">x</p></div></PageRowComponent>
+        </PageRowComponent>
+  `,
+});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+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. Each nested row uses a different variant; every one keeps its track instead of pushing the page wider.",
+      },
+    },
+  };

package/app/components/01.atoms/page-row/tests/PageRow.spec.ts

@@ -23,6 +23,7 @@ describe("PageRow", () => {
 
   afterEach(() => {
     wrapper?.unmount();
+    vi.restoreAllMocks();
   });
 
   describe("Rendering", () => {
@@ -62,12 +63,12 @@ describe("PageRow", () => {
   describe("Props — variant", () => {
     it("applies content class by default", async () => {
       await createWrapper();
-      expect(wrapper.classes()).toContain("content");
+      expect(wrapper.attributes("data-variant")).toBe("content");
     });
 
     it.each(["full", "popout", "content", "inset-content"])("applies variant class %s", async (variant) => {
       await createWrapper({ variant });
-      expect(wrapper.classes()).toContain(variant);
+      expect(wrapper.attributes("data-variant")).toBe(variant);
     });
   });
 
@@ -121,7 +122,7 @@ describe("PageRow", () => {
 
     it("combines variant and align on the same element", async () => {
       await createWrapper({ variant: "content", align: "start" });
-      expect(wrapper.classes()).toContain("content");
+      expect(wrapper.attributes("data-variant")).toBe("content");
       expect(wrapper.attributes("data-align")).toBe("start");
     });
   });
@@ -199,13 +200,13 @@ describe("PageRow", () => {
     it("includes both base class and variant class", async () => {
       await createWrapper({ variant: "full" });
       expect(wrapper.classes()).toContain("page-row");
-      expect(wrapper.classes()).toContain("full");
+      expect(wrapper.attributes("data-variant")).toBe("full");
     });
 
     it("includes elementClasses from styleClassPassthrough alongside other classes", async () => {
       await createWrapper({ variant: "popout", styleClassPassthrough: ["extra-class"] });
       expect(wrapper.classes()).toContain("page-row");
-      expect(wrapper.classes()).toContain("popout");
+      expect(wrapper.attributes("data-variant")).toBe("popout");
       expect(wrapper.classes()).toContain("extra-class");
     });
   });