srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/tests/DashboardStatsGrid.spec.ts

@@ -2,19 +2,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import DashboardStatsGrid from "../DashboardStatsGrid.vue";
 
-// Mock useStyleClassPassthrough composable
-const mockElementClasses = { value: "" };
-const mockResetElementClasses = vi.fn();
-
-const mockUseStyleClassPassthrough = vi.fn(() => ({
-  elementClasses: mockElementClasses,
-  resetElementClasses: mockResetElementClasses,
-}));
-
-vi.mock("#imports", () => ({
-  useStyleClassPassthrough: mockUseStyleClassPassthrough,
-}));
-
 describe("DashboardStatsGrid", () => {
   let wrapper: ReturnType<typeof mountSuspended>;
 
@@ -36,34 +23,34 @@ describe("DashboardStatsGrid", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    mockElementClasses.value = "";
   });
 
   afterEach(() => {
     wrapper?.unmount();
+    vi.restoreAllMocks();
   });
 
   describe("Component Rendering", () => {
     it("mounts without error", async () => {
       await createWrapper();
 
-      expect(wrapper.find(".dashboard-stats-grid-wrapper")).toBeTruthy();
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      expect(wrapper.classes()).toContain("dashboard-stats-grid");
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
     });
 
     it("renders top row structure correctly", async () => {
       await createWrapper();
 
-      expect(wrapper.find(".top-row")).toBeTruthy();
-      expect(wrapper.find(".top-row-slot-1")).toBeTruthy();
-      expect(wrapper.find(".top-row-slot-2")).toBeTruthy();
-      expect(wrapper.find(".top-row-slot-3")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid-top-row").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-top-row-slot-1").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-top-row-slot-2").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-top-row-slot-3").exists()).toBe(true);
     });
 
     it("renders bottom row correctly", async () => {
       await createWrapper();
 
-      expect(wrapper.find(".bottom-row")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid-bottom-row").exists()).toBe(true);
     });
 
     it("has correct grid container structure", async () => {
@@ -82,7 +69,7 @@ describe("DashboardStatsGrid", () => {
       await createWrapper({ topRowSlot1ItemCount: itemCount });
 
       // Component should render without error with custom item count
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
     });
 
     it("accepts bottomRowItemCount prop", async () => {
@@ -90,7 +77,7 @@ describe("DashboardStatsGrid", () => {
       await createWrapper({ bottomRowItemCount: itemCount });
 
       // Component should render without error with custom item count
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
     });
 
     it("uses default props when not provided", async () => {
@@ -100,7 +87,7 @@ describe("DashboardStatsGrid", () => {
       });
 
       // Should use default values (6 and 4)
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
     });
 
     it("accepts string styleClassPassthrough", async () => {
@@ -108,7 +95,7 @@ describe("DashboardStatsGrid", () => {
       await createWrapper({ styleClassPassthrough: className });
 
       // Component should mount without error with string class
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
     });
 
     it("accepts array styleClassPassthrough", async () => {
@@ -116,16 +103,27 @@ describe("DashboardStatsGrid", () => {
       await createWrapper({ styleClassPassthrough: classNames });
 
       // Component should mount without error with array of classes
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
     });
 
-    it("applies element classes to wrapper", async () => {
-      mockElementClasses.value = "test-class another-class";
+    it("applies styleClassPassthrough classes to the root", async () => {
+      await createWrapper({ styleClassPassthrough: ["test-class", "another-class"] });
+      expect(wrapper.classes()).toContain("test-class");
+      expect(wrapper.classes()).toContain("another-class");
+    });
+  });
 
-      await createWrapper();
+  describe("Item counts", () => {
+    it("floors fractional counts and treats negative or non-finite counts as zero", async () => {
+      const count = (w: typeof wrapper, selector: string) => w.findAll(`${selector} > .dashboard-stats-grid-panel`).length;
+
+      await createWrapper({ topRowSlot1ItemCount: 2.7, bottomRowItemCount: -3 });
+      expect(count(wrapper, ".dashboard-stats-grid-top-row-slot-1-inner")).toBe(2);
+      expect(count(wrapper, ".dashboard-stats-grid-bottom-row")).toBe(0);
 
-      // Check that the component renders
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      await wrapper.setProps({ topRowSlot1ItemCount: Number.NaN, bottomRowItemCount: 3 });
+      expect(count(wrapper, ".dashboard-stats-grid-top-row-slot-1-inner")).toBe(0);
+      expect(count(wrapper, ".dashboard-stats-grid-bottom-row")).toBe(3);
     });
   });
 
@@ -157,7 +155,7 @@ describe("DashboardStatsGrid", () => {
         const { unmount } = await createWrapper({ topRowSlot1ItemCount: count }, slots);
 
         // Should render without error
-        expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+        expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
 
         // Check that content is rendered
         for (let i = 1; i <= count; i++) {
@@ -239,7 +237,7 @@ describe("DashboardStatsGrid", () => {
         const { unmount } = await createWrapper({ bottomRowItemCount: count }, slots);
 
         // Should render without error
-        expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+        expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
 
         // Check that content is rendered
         for (let i = 1; i <= count; i++) {
@@ -294,9 +292,9 @@ describe("DashboardStatsGrid", () => {
       await createWrapper({ styleClassPassthrough: ["initial"] });
 
       // Component should maintain structure with different props
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
-      expect(wrapper.find(".top-row")).toBeTruthy();
-      expect(wrapper.find(".bottom-row")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-top-row").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-bottom-row").exists()).toBe(true);
     });
 
     it("handles different prop configurations", async () => {
@@ -315,7 +313,7 @@ describe("DashboardStatsGrid", () => {
       expect(wrapper.html()).toContain("Bottom 1");
 
       // Component should render properly
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
 
       unmount();
     });
@@ -326,29 +324,29 @@ describe("DashboardStatsGrid", () => {
       await createWrapper();
 
       const grid = wrapper.find(".dashboard-stats-grid");
-      const topRow = wrapper.find(".top-row");
-      const bottomRow = wrapper.find(".bottom-row");
+      const topRow = wrapper.find(".dashboard-stats-grid-top-row");
+      const bottomRow = wrapper.find(".dashboard-stats-grid-bottom-row");
 
       expect(grid.classes()).toContain("dashboard-stats-grid");
-      expect(topRow.classes()).toContain("top-row");
-      expect(bottomRow.classes()).toContain("bottom-row");
+      expect(topRow.classes()).toContain("dashboard-stats-grid-top-row");
+      expect(bottomRow.classes()).toContain("dashboard-stats-grid-bottom-row");
     });
 
     it("maintains correct DOM hierarchy", async () => {
       await createWrapper();
 
       const grid = wrapper.find(".dashboard-stats-grid");
-      const topRow = grid.find(".top-row");
-      const bottomRow = grid.find(".bottom-row");
+      const topRow = grid.find(".dashboard-stats-grid-top-row");
+      const bottomRow = grid.find(".dashboard-stats-grid-bottom-row");
 
       expect(grid.exists()).toBe(true);
       expect(topRow.exists()).toBe(true);
       expect(bottomRow.exists()).toBe(true);
 
       // Check top row slots exist
-      expect(topRow.find(".top-row-slot-1").exists()).toBe(true);
-      expect(topRow.find(".top-row-slot-2").exists()).toBe(true);
-      expect(topRow.find(".top-row-slot-3").exists()).toBe(true);
+      expect(topRow.find(".dashboard-stats-grid-top-row-slot-1").exists()).toBe(true);
+      expect(topRow.find(".dashboard-stats-grid-top-row-slot-2").exists()).toBe(true);
+      expect(topRow.find(".dashboard-stats-grid-top-row-slot-3").exists()).toBe(true);
     });
   });
 
@@ -359,9 +357,9 @@ describe("DashboardStatsGrid", () => {
         bottomRowItemCount: 0,
       });
 
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
-      expect(wrapper.find(".top-row")).toBeTruthy();
-      expect(wrapper.find(".bottom-row")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-top-row").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-bottom-row").exists()).toBe(true);
     });
 
     it("handles large item counts", async () => {
@@ -382,7 +380,7 @@ describe("DashboardStatsGrid", () => {
         slots
       );
 
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
       expect(wrapper.html()).toContain("Large Panel 1");
       expect(wrapper.html()).toContain("Large Bottom 1");
     });
@@ -436,9 +434,9 @@ describe("DashboardStatsGrid", () => {
         }
       );
 
-      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
-      expect(wrapper.find(".top-row")).toBeTruthy();
-      expect(wrapper.find(".bottom-row")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-top-row").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-stats-grid-bottom-row").exists()).toBe(true);
     });
   });
 

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/CONSUMER-STYLING.md

@@ -42,6 +42,9 @@ old container query. Fewer items than columns leave empty tracks, as before.
 The column-gap feeds that calculation, so it must be a single length (`gap: "1rem 2rem"` style
 shorthand isn't supported; use the row/column gap tokens instead).
 
+Each slotted item gets `min-inline-size: 0` (since 2026-10-21), so an item with an unbroken string
+shrinks to its column instead of overflowing it; wrapping the text is up to your own markup.
+
 ## 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/content-wrappers/layout-grid/layout-grid-by-cols/LayoutGridByCols.vue

@@ -66,6 +66,10 @@ watch(
       grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--_collapse), var(--_column-min))), 1fr));
       row-gap: var(--layout-grid-by-cols-row-gap, var(--layout-grid-by-cols-gap, 1rem));
       column-gap: var(--_column-gap);
+
+      > * {
+        min-inline-size: 0;
+      }
     }
   }
 }

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/stories/LayoutGridByCols.stories.ts

@@ -1,6 +1,8 @@
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import type { MediaCanvas } from "~/types/components";
+import CanvasSwitcher from "../../../../canvas-switcher/CanvasSwitcher.vue";
 import LayoutGridByCols from "../LayoutGridByCols.vue";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { Meta, StoryObj, StoryFn } from "@nuxtjs/storybook";
 
 type StoryArgs = InstanceType<typeof LayoutGridByCols>["$props"] & { itemCount?: number };
 
@@ -201,3 +203,46 @@ export const ZeroItems: Story = {
   },
   render: (args) => renderGrid(args),
 };
+
+export const StressTest: StoryFn = () => ({
+  components: { LayoutGridByCols },
+  template: `
+    <LayoutGridByCols :column-count="3">
+          <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>
+        </LayoutGridByCols>
+  `,
+});
+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.",
+      },
+    },
+  };

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-cols/tests/LayoutGridByCols.spec.ts

@@ -1,19 +1,32 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import LayoutGridByCols from "../LayoutGridByCols.vue";
 
+const mounted: Awaited<ReturnType<typeof mountSuspended>>[] = [];
+
+const mountComponent = async (options: Parameters<typeof mountSuspended<typeof LayoutGridByCols>>[1] = {}) => {
+  const wrapper = await mountSuspended(LayoutGridByCols, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
+
 describe("LayoutGridByCols", () => {
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols);
+    const wrapper = await mountComponent();
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Snapshots ───────────────────────────────────────────────────────────
 
   it("renders correct HTML structure (div, 2 items)", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       slots: {
         "item-0": "<p>First</p>",
         "item-1": "<p>Second</p>",
@@ -23,14 +36,14 @@ describe("LayoutGridByCols", () => {
   });
 
   it("renders correct HTML structure (section with label)", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { tag: "section", label: "Feature grid" },
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure with styleClassPassthrough", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: ["custom-class", "another-class"] },
     });
     expect(wrapper.html()).toMatchSnapshot();
@@ -39,12 +52,12 @@ describe("LayoutGridByCols", () => {
   // ─── Tag rendering ───────────────────────────────────────────────────────
 
   it("renders as <div> by default", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols);
+    const wrapper = await mountComponent();
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("renders as <section> when tag='section'", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { tag: "section" },
     });
     expect(wrapper.element.tagName).toBe("SECTION");
@@ -53,21 +66,21 @@ describe("LayoutGridByCols", () => {
   // ─── Base class ──────────────────────────────────────────────────────────
 
   it("always has the layout-grid-by-cols class", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols);
+    const wrapper = await mountComponent();
     expect(wrapper.classes()).toContain("layout-grid-by-cols");
   });
 
   // ─── Inner div ───────────────────────────────────────────────────────────
 
   it("renders a .layout-grid-by-cols-inner div", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols);
+    const wrapper = await mountComponent();
     expect(wrapper.find(".layout-grid-by-cols-inner").exists()).toBe(true);
   });
 
   // ─── Accessibility ───────────────────────────────────────────────────────
 
   it("renders sr-only label and aria-labelledby when tag is section", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { tag: "section", label: "Card grid" },
     });
     const srOnly = wrapper.find(".sr-only");
@@ -77,7 +90,7 @@ describe("LayoutGridByCols", () => {
   });
 
   it("does not render sr-only label or aria-labelledby when tag is div", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { tag: "div", label: "Ignored" },
     });
     expect(wrapper.find(".sr-only").exists()).toBe(false);
@@ -87,7 +100,7 @@ describe("LayoutGridByCols", () => {
   // ─── Dynamic slots ───────────────────────────────────────────────────────
 
   it("renders slot content for each item inside the inner div", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       slots: {
         "item-0": "<span>Alpha</span>",
         "item-1": "<span>Beta</span>",
@@ -101,21 +114,21 @@ describe("LayoutGridByCols", () => {
   });
 
   it("renders no slot content when no slots are provided", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols);
+    const wrapper = await mountComponent();
     expect(wrapper.find(".layout-grid-by-cols-inner").text().trim()).toBe("");
   });
 
   // ─── styleClassPassthrough ───────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: "my-class" },
     });
     expect(wrapper.classes()).toContain("my-class");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { styleClassPassthrough: ["class-a", "class-b"] },
     });
     expect(wrapper.classes()).toContain("class-a");
@@ -128,40 +141,40 @@ describe("LayoutGridByCols", () => {
     (wrapper.element as HTMLElement).style.getPropertyValue(name);
 
   it("writes no inline style when no layout props are passed", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols);
+    const wrapper = await mountComponent();
     expect(wrapper.attributes("style")).toBeUndefined();
   });
 
   it("writes columnCount to --layout-grid-by-cols-column-count", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { columnCount: 3 },
     });
     expect(inlineToken(wrapper, "--layout-grid-by-cols-column-count")).toBe("3");
   });
 
   it("clamps columnCount to a minimum of 2", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { columnCount: 1 as unknown as 2 },
     });
     expect(inlineToken(wrapper, "--layout-grid-by-cols-column-count")).toBe("2");
   });
 
   it("writes gap to --layout-grid-by-cols-gap", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { gap: "2rem" },
     });
     expect(inlineToken(wrapper, "--layout-grid-by-cols-gap")).toBe("2rem");
   });
 
   it("writes singleColBelow to --layout-grid-by-cols-single-col-below", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { singleColBelow: "600px" },
     });
     expect(inlineToken(wrapper, "--layout-grid-by-cols-single-col-below")).toBe("600px");
   });
 
   it("updates the inline token when a prop changes", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { columnCount: 3 },
     });
     await wrapper.setProps({ columnCount: 4 });
@@ -172,7 +185,7 @@ describe("LayoutGridByCols", () => {
 
   it("does not render placeholder text or aria-labelledby for a section without a label", async () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: { tag: "section" },
     });
     expect(wrapper.find(".sr-only").exists()).toBe(false);
@@ -185,7 +198,7 @@ describe("LayoutGridByCols", () => {
   // ─── Combined ────────────────────────────────────────────────────────────
 
   it("renders correctly with all props and slots combined", async () => {
-    const wrapper = await mountSuspended(LayoutGridByCols, {
+    const wrapper = await mountComponent({
       props: {
         tag: "section",
         label: "Services",

package/app/components/01.atoms/grids/auto-grid/AutoGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" class="auto-grid" :class="[elementClasses, { 'is-responsive': isResponsive }]">
+  <component :is="tag" class="auto-grid" :class="[elementClasses]" :data-responsive="isResponsive ? '' : undefined">
     <slot v-for="(_, name) in $slots" :key="name" :name="name"></slot>
   </component>
 </template>
@@ -31,11 +31,15 @@ watch(
     display: grid;
     gap: var(--auto-grid-gap, 1rem);
 
-    &:not(.is-responsive) {
+    > * {
+      min-inline-size: 0;
+    }
+
+    &:not([data-responsive]) {
       grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default, 300px), 100%), 1fr));
     }
 
-    &.is-responsive {
+    &[data-responsive] {
       grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-small, 250px), 100%), 1fr));
 
       @container (width >= 768px) {

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

@@ -26,7 +26,7 @@ No private `--_` tokens.
 | Hook | When | Effect |
 |---|---|---|
 | `.auto-grid` | Always | Root element |
-| `.auto-grid.is-responsive` | `is-responsive` prop is `true` | Column minimum steps small → default → large via `@container` queries at 768px and 1024px |
+| `.auto-grid[data-responsive]` | `is-responsive` prop is `true` (was the class `.is-responsive` until 2026-10-21) | Column minimum steps small → default → large via `@container` queries at 768px and 1024px |
 
 The breakpoints are container queries, so `is-responsive` needs an ancestor with
 `container-type: inline-size`. Without one, the small size applies at every width.

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

@@ -1,4 +1,6 @@
-import { computed } from "vue";
+import { computed, ref } from "vue";
+import type { MediaCanvas } from "~/types/components";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import AutoGridComponent from "../AutoGrid.vue";
 
@@ -289,3 +291,46 @@ SemanticSection.parameters = {
     },
   },
 };
+
+export const StressTest: StoryFn = () => ({
+  components: { AutoGridComponent },
+  template: `
+    <AutoGridComponent :is-responsive="true">
+          <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>
+        </AutoGridComponent>
+  `,
+});
+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.",
+      },
+    },
+  };