srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/CONSUMER-STYLING.md

@@ -7,10 +7,10 @@
 | `--dashboard-quad-grid-gap` | `2rem` | Gap between the four slot panels |
 | `--dashboard-quad-grid-padding` | `2rem` | Padding inside each slot panel |
 | `--dashboard-quad-grid-outline-width` | `0.1rem` | Slot panel outline width |
-| `--dashboard-quad-grid-outline-colour` | `black` | Slot panel outline colour |
+| `--dashboard-quad-grid-outline-colour` | `var(--theme-border)` | Slot panel outline colour |
 | `--dashboard-quad-grid-outline-offset` | `0` | Slot panel outline offset |
 | `--dashboard-quad-grid-border-width` | `0` | Slot panel border width (off by default — the panel edge is drawn by the outline) |
-| `--dashboard-quad-grid-border-colour` | `black` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
+| `--dashboard-quad-grid-border-colour` | `var(--theme-border)` | Slot panel border colour, only visible once `--dashboard-quad-grid-border-width` is set |
 | `--dashboard-quad-grid-border-radius` | `0.5rem` | Slot panel corner radius |
 | `--dashboard-quad-grid-rule-width` | `0.1rem` | Width of the grid gap rule line (CSS Gap Decorations — see Notes) |
 | `--dashboard-quad-grid-rule-colour` | `transparent` | Colour of the grid gap rule line, invisible by default |
@@ -31,6 +31,16 @@ Or scope to a single instance via `styleClassPassthrough`:
 
 ---
 
+## State hooks
+
+No state attributes. Element classes: `.dashboard-quad-grid-wrapper` (root, the container),
+`.dashboard-quad-grid` (the grid), `.dashboard-quad-grid-cell` (each of the four cells) with
+`.dashboard-quad-grid-slot-1` to `-slot-4`. Cells wrap their content and the columns are
+`minmax(0, auto)`, so an unbroken string can't widen the grid.
+
+> Changed 2026-10-21: the cells were `.slot1` to `.slot4` (bare classes a consumer's own CSS could
+> match), styled through `& > div`; the outline and border colours defaulted to `black`.
+
 ## 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/dashboard-quad-grid/DashboardQuadGrid.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="dashboard-quad-grid-wrapper" :class="[elementClasses]">
     <div class="dashboard-quad-grid">
-      <div class="slot1">
+      <div class="dashboard-quad-grid-cell dashboard-quad-grid-slot-1">
         <slot name="slot1"></slot>
       </div>
-      <div class="slot2">
+      <div class="dashboard-quad-grid-cell dashboard-quad-grid-slot-2">
         <slot name="slot2"></slot>
       </div>
-      <div class="slot3">
+      <div class="dashboard-quad-grid-cell dashboard-quad-grid-slot-3">
         <slot name="slot3"></slot>
       </div>
-      <div class="slot4">
+      <div class="dashboard-quad-grid-cell dashboard-quad-grid-slot-4">
         <slot name="slot4"></slot>
       </div>
     </div>
@@ -50,61 +50,63 @@ watch(
       rule-break: intersection;
       rule-inset: var(--dashboard-quad-grid-rule-inset, 0);
 
-      & > div {
+      .dashboard-quad-grid-cell {
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
         padding: var(--dashboard-quad-grid-padding, 2rem);
         outline: var(--dashboard-quad-grid-outline-width, 0.1rem) solid
-          var(--dashboard-quad-grid-outline-colour, black);
+          var(--dashboard-quad-grid-outline-colour, var(--theme-border));
         outline-offset: var(--dashboard-quad-grid-outline-offset, 0);
         border: var(--dashboard-quad-grid-border-width, 0) solid
-          var(--dashboard-quad-grid-border-colour, black);
+          var(--dashboard-quad-grid-border-colour, var(--theme-border));
         border-radius: var(--dashboard-quad-grid-border-radius, 0.5rem);
       }
 
       @container (min-width: 768px) {
-        grid-template-columns: repeat(2, auto);
+        grid-template-columns: repeat(2, minmax(0, auto));
         grid-template-rows: repeat(3, auto);
 
-        .slot1 {
+        .dashboard-quad-grid-slot-1 {
           grid-column: 1 / span 2;
           grid-row: 1;
         }
 
-        .slot2 {
+        .dashboard-quad-grid-slot-2 {
           grid-column: 1 / span 2;
           grid-row: 2;
         }
 
-        .slot3 {
+        .dashboard-quad-grid-slot-3 {
           grid-column: 1;
           grid-row: 3;
         }
 
-        .slot4 {
+        .dashboard-quad-grid-slot-4 {
           grid-column: 2;
           grid-row: 3;
         }
       }
 
       @container (min-width: 1060px) {
-        grid-template-columns: repeat(3, auto);
+        grid-template-columns: repeat(3, minmax(0, auto));
         grid-template-rows: repeat(2, auto);
 
-        .slot1 {
+        .dashboard-quad-grid-slot-1 {
           grid-column: 1;
           grid-row: 1 / span 2;
         }
 
-        .slot2 {
+        .dashboard-quad-grid-slot-2 {
           grid-column: 2 / span 2;
           grid-row: 1;
         }
 
-        .slot3 {
+        .dashboard-quad-grid-slot-3 {
           grid-column: 2;
           grid-row: 2;
         }
 
-        .slot4 {
+        .dashboard-quad-grid-slot-4 {
           grid-column: 3;
           grid-row: 2;
         }

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/stories/DashboardQuadGrid.stories.ts

@@ -1,4 +1,6 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import CanvasSwitcher from "../../../../canvas-switcher/CanvasSwitcher.vue";
 import DashboardQuadGridComponent from "../DashboardQuadGrid.vue";
 import type { MediaCanvas } from "~/types/components";
 
@@ -530,3 +532,43 @@ ResponsiveComparison.parameters = {
     },
   },
 };
+
+export const StressTest: StoryFn = () => ({
+  components: { DashboardQuadGridComponent },
+  template: `
+    <DashboardQuadGridComponent>
+          <template #slot1><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 #slot2><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 #slot3><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 #slot4><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>
+        </DashboardQuadGridComponent>
+  `,
+});
+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. At tablet and wider, check the two- and three-column arrangements too.",
+      },
+    },
+  };

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

@@ -3,19 +3,6 @@ import { mountSuspended } from "@nuxt/test-utils/runtime";
 import type { DOMWrapper } from "@vue/test-utils";
 import DashboardQuadGrid from "../DashboardQuadGrid.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("DashboardQuadGrid", () => {
   let wrapper: ReturnType<typeof mountSuspended>;
 
@@ -35,19 +22,19 @@ describe("DashboardQuadGrid", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    mockElementClasses.value = "";
   });
 
   afterEach(() => {
     wrapper?.unmount();
+    vi.restoreAllMocks();
   });
 
   describe("Component Rendering", () => {
     it("mounts without error", async () => {
       await createWrapper();
 
-      expect(wrapper.find(".dashboard-quad-grid-wrapper")).toBeTruthy();
-      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid-wrapper").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-quad-grid").exists()).toBe(true);
     });
 
     it("renders all four slot containers", async () => {
@@ -56,10 +43,10 @@ describe("DashboardQuadGrid", () => {
       const slots = wrapper.findAll(".dashboard-quad-grid > div");
       expect(slots).toHaveLength(4);
 
-      expect(wrapper.find(".slot1")).toBeTruthy();
-      expect(wrapper.find(".slot2")).toBeTruthy();
-      expect(wrapper.find(".slot3")).toBeTruthy();
-      expect(wrapper.find(".slot4")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid-slot-1").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-quad-grid-slot-2").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-quad-grid-slot-3").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-quad-grid-slot-4").exists()).toBe(true);
     });
 
     it("has correct grid container structure", async () => {
@@ -83,7 +70,7 @@ describe("DashboardQuadGrid", () => {
         }
       );
 
-      const slot1 = wrapper.find(".slot1");
+      const slot1 = wrapper.find(".dashboard-quad-grid-slot-1");
       expect(slot1.exists()).toBe(true);
       expect(slot1.html()).toContain("Slot 1 Content");
       expect(slot1.html()).toContain("This is slot 1");
@@ -97,7 +84,7 @@ describe("DashboardQuadGrid", () => {
         }
       );
 
-      const slot2 = wrapper.find(".slot2");
+      const slot2 = wrapper.find(".dashboard-quad-grid-slot-2");
       expect(slot2.exists()).toBe(true);
       expect(slot2.html()).toContain("Slot 2 Content");
     });
@@ -110,7 +97,7 @@ describe("DashboardQuadGrid", () => {
         }
       );
 
-      const slot3 = wrapper.find(".slot3");
+      const slot3 = wrapper.find(".dashboard-quad-grid-slot-3");
       expect(slot3.exists()).toBe(true);
       expect(slot3.html()).toContain("Slot 3 Content");
     });
@@ -123,7 +110,7 @@ describe("DashboardQuadGrid", () => {
         }
       );
 
-      const slot4 = wrapper.find(".slot4");
+      const slot4 = wrapper.find(".dashboard-quad-grid-slot-4");
       expect(slot4.exists()).toBe(true);
       expect(slot4.html()).toContain("Slot 4 Content");
     });
@@ -139,10 +126,10 @@ describe("DashboardQuadGrid", () => {
         }
       );
 
-      expect(wrapper.find(".slot1").html()).toContain("Header");
-      expect(wrapper.find(".slot2").html()).toContain("Paragraph");
-      expect(wrapper.find(".slot3").html()).toContain("Division");
-      expect(wrapper.find(".slot4").html()).toContain("Span");
+      expect(wrapper.find(".dashboard-quad-grid-slot-1").html()).toContain("Header");
+      expect(wrapper.find(".dashboard-quad-grid-slot-2").html()).toContain("Paragraph");
+      expect(wrapper.find(".dashboard-quad-grid-slot-3").html()).toContain("Division");
+      expect(wrapper.find(".dashboard-quad-grid-slot-4").html()).toContain("Span");
     });
 
     it("handles empty slots gracefully", async () => {
@@ -171,7 +158,7 @@ describe("DashboardQuadGrid", () => {
       await createWrapper({ styleClassPassthrough: className });
 
       // Component should mount without error with string class
-      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid").exists()).toBe(true);
     });
 
     it("accepts array styleClassPassthrough", async () => {
@@ -179,14 +166,14 @@ describe("DashboardQuadGrid", () => {
       await createWrapper({ styleClassPassthrough: classNames });
 
       // Component should mount without error with array of classes
-      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid").exists()).toBe(true);
     });
 
     it("uses default empty array for styleClassPassthrough", async () => {
       await createWrapper();
 
       // Component should mount without error with default props
-      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid").exists()).toBe(true);
     });
 
     it("renders correctly with various props", async () => {
@@ -203,8 +190,8 @@ describe("DashboardQuadGrid", () => {
       await createWrapper({ styleClassPassthrough: ["initial"] });
 
       // Component should maintain its structure
-      expect(wrapper.find(".dashboard-quad-grid-wrapper")).toBeTruthy();
-      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid-wrapper").exists()).toBe(true);
+      expect(wrapper.find(".dashboard-quad-grid").exists()).toBe(true);
       expect(wrapper.findAll(".dashboard-quad-grid > div")).toHaveLength(4);
     });
   });
@@ -215,17 +202,17 @@ describe("DashboardQuadGrid", () => {
 
       const wrapper_element = wrapper.find(".dashboard-quad-grid-wrapper");
       const grid = wrapper.find(".dashboard-quad-grid");
-      const slot1 = wrapper.find(".slot1");
-      const slot2 = wrapper.find(".slot2");
-      const slot3 = wrapper.find(".slot3");
-      const slot4 = wrapper.find(".slot4");
+      const slot1 = wrapper.find(".dashboard-quad-grid-slot-1");
+      const slot2 = wrapper.find(".dashboard-quad-grid-slot-2");
+      const slot3 = wrapper.find(".dashboard-quad-grid-slot-3");
+      const slot4 = wrapper.find(".dashboard-quad-grid-slot-4");
 
       expect(wrapper_element.classes()).toContain("dashboard-quad-grid-wrapper");
       expect(grid.classes()).toContain("dashboard-quad-grid");
-      expect(slot1.classes()).toContain("slot1");
-      expect(slot2.classes()).toContain("slot2");
-      expect(slot3.classes()).toContain("slot3");
-      expect(slot4.classes()).toContain("slot4");
+      expect(slot1.classes()).toContain("dashboard-quad-grid-slot-1");
+      expect(slot2.classes()).toContain("dashboard-quad-grid-slot-2");
+      expect(slot3.classes()).toContain("dashboard-quad-grid-slot-3");
+      expect(slot4.classes()).toContain("dashboard-quad-grid-slot-4");
     });
 
     it("maintains correct DOM hierarchy", async () => {
@@ -241,7 +228,7 @@ describe("DashboardQuadGrid", () => {
 
       // Verify each slot is a direct child of the grid
       slots.forEach((slot: DOMWrapper<Element>, index: number) => {
-        const expectedClass = `slot${index + 1}`;
+        const expectedClass = `dashboard-quad-grid-slot-${index + 1}`;
         expect(slot.classes()).toContain(expectedClass);
       });
     });
@@ -305,7 +292,7 @@ describe("DashboardQuadGrid", () => {
         }
       );
 
-      const slot1 = wrapper.find(".slot1");
+      const slot1 = wrapper.find(".dashboard-quad-grid-slot-1");
       expect(slot1.find("header").exists()).toBe(true);
       expect(slot1.find("h1").text()).toBe("Complex Header");
       expect(slot1.find("nav").exists()).toBe(true);
@@ -320,7 +307,7 @@ describe("DashboardQuadGrid", () => {
         }
       );
 
-      const slot1 = wrapper.find(".slot1 p");
+      const slot1 = wrapper.find(".dashboard-quad-grid-slot-1 p");
       expect(slot1.exists()).toBe(true);
       // The HTML should be properly parsed
       expect(slot1.html()).toContain("&lt;Special&gt;");

package/app/components/01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/CONSUMER-STYLING.md

@@ -7,7 +7,7 @@
 | `--dashboard-stats-grid-gap` | `1.2rem` | Gap between panels, in every row |
 | `--dashboard-stats-grid-panel-padding` | `1.2rem` | Padding inside each panel |
 | `--dashboard-stats-grid-border-width` | `0.1rem` | Panel border width |
-| `--dashboard-stats-grid-border-colour` | `hsl(0, 29%, 3%)` | Panel border colour |
+| `--dashboard-stats-grid-border-colour` | `var(--theme-border)` | Panel border colour |
 | `--dashboard-stats-grid-border-radius` | `1.2rem` | Panel corner radius |
 | `--dashboard-stats-grid-rule-width` | `0.1rem` | Width of the grid gap rule line (CSS Gap Decorations — see Notes) |
 | `--dashboard-stats-grid-rule-colour` | `transparent` | Colour of the grid gap rule line, invisible by default |
@@ -28,6 +28,18 @@ Or scope to a single instance via `styleClassPassthrough`:
 
 ---
 
+## State hooks
+
+No state attributes. Element classes: `.dashboard-stats-grid` (root),
+`.dashboard-stats-grid-top-row`, `.dashboard-stats-grid-top-row-slot-1` (with its
+`-slot-1-inner` panel grid), `-top-row-slot-2`, `-top-row-slot-3`, `.dashboard-stats-grid-bottom-row`,
+and `.dashboard-stats-grid-panel` on every panel.
+
+> Changed 2026-10-21: these were `.top-row`, `.top-row-slot-1`, `.top-row-slot-1-inner`,
+> `.top-row-slot-2`, `.top-row-slot-3`, `.bottom-row` and `.panel`; the border colour defaulted to
+> `hsl(0, 29%, 3%)`. Tracks are `minmax(0, 1fr)` and panels wrap, so an unbroken string can't
+> widen the grid.
+
 ## 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/dashboard-stats-grid/DashboardStatsGrid.vue

@@ -1,28 +1,28 @@
 <template>
   <div class="dashboard-stats-grid" :class="[elementClasses]">
-    <section class="top-row">
-      <div class="top-row-slot-1">
-        <div class="top-row-slot-1-inner">
-          <div v-for="key in topRowSlot1ItemCount" :key="key" class="panel">
+    <section class="dashboard-stats-grid-top-row">
+      <div class="dashboard-stats-grid-top-row-slot-1">
+        <div class="dashboard-stats-grid-top-row-slot-1-inner">
+          <div v-for="key in topRowSlot1Count" :key="key" class="dashboard-stats-grid-panel">
             <slot :name="`top-row-slot1-${key}-content`"></slot>
           </div>
         </div>
       </div>
 
-      <div class="top-row-slot-2">
-        <div class="panel">
+      <div class="dashboard-stats-grid-top-row-slot-2">
+        <div class="dashboard-stats-grid-panel">
           <slot name="top-row-slot-2"></slot>
         </div>
       </div>
-      <div class="top-row-slot-3">
-        <div class="panel">
+      <div class="dashboard-stats-grid-top-row-slot-3">
+        <div class="dashboard-stats-grid-panel">
           <slot name="top-row-slot-3"></slot>
         </div>
       </div>
     </section>
 
-    <section class="bottom-row">
-      <div v-for="key in bottomRowItemCount" :key="key" class="panel">
+    <section class="dashboard-stats-grid-bottom-row">
+      <div v-for="key in bottomRowCount" :key="key" class="dashboard-stats-grid-panel">
         <slot :name="`bottom-row-${key}-content`"></slot>
       </div>
     </section>
@@ -42,6 +42,10 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+const toItemCount = (value: number) => (Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0);
+const topRowSlot1Count = computed(() => toItemCount(props.topRowSlot1ItemCount));
+const bottomRowCount = computed(() => toItemCount(props.bottomRowItemCount));
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -55,17 +59,9 @@ watch(
 <style lang="css">
 @layer components {
   .dashboard-stats-grid {
-    .panel {
-      border: var(--dashboard-stats-grid-border-width, 0.1rem) solid
-        var(--dashboard-stats-grid-border-colour, hsl(0, 29%, 3%));
-      border-radius: var(--dashboard-stats-grid-border-radius, 1.2rem);
-      padding: var(--dashboard-stats-grid-panel-padding, 1.2rem);
-      height: auto;
-    }
-
     container-type: inline-size;
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--dashboard-stats-grid-gap, 1.2rem);
     width: 100%;
     margin-inline: auto;
@@ -75,57 +71,70 @@ watch(
     rule-break: intersection;
     rule-inset: var(--dashboard-stats-grid-rule-inset, 0);
 
-    .top-row {
+    .dashboard-stats-grid-panel {
+      border: var(--dashboard-stats-grid-border-width, 0.1rem) solid
+        var(--dashboard-stats-grid-border-colour, var(--theme-border));
+      border-radius: var(--dashboard-stats-grid-border-radius, 1.2rem);
+      padding: var(--dashboard-stats-grid-panel-padding, 1.2rem);
+      height: auto;
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
+    }
+
+    .dashboard-stats-grid-top-row {
       display: grid;
       gap: var(--dashboard-stats-grid-gap, 1.2rem);
       width: 100%;
 
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
       grid-template-areas:
         "slot1"
         "slot2"
         "slot3";
 
       @container (min-width: 1024px) {
-        grid-template-columns: 1fr minmax(46rem, 33%);
+        grid-template-columns: minmax(0, 1fr) minmax(46rem, 33%);
         grid-template-areas:
           "slot1 slot2"
           "slot3 slot2";
       }
     }
 
-    .top-row-slot-1 {
+    .dashboard-stats-grid-top-row-slot-1 {
       grid-area: slot1;
       container-type: inline-size;
 
-      .top-row-slot-1-inner {
+      .dashboard-stats-grid-top-row-slot-1-inner {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, minmax(0, 1fr));
 
         gap: var(--dashboard-stats-grid-gap, 1.2rem);
 
         @container (min-width: 680px) {
-          grid-template-columns: repeat(3, 1fr);
+          grid-template-columns: repeat(3, minmax(0, 1fr));
         }
 
-        .panel {
+        .dashboard-stats-grid-panel {
           display: grid;
         }
       }
     }
 
-    .top-row-slot-2 {
+    .dashboard-stats-grid-top-row-slot-2 {
       grid-area: slot2;
       display: grid;
+      min-inline-size: 0;
     }
-    .top-row-slot-3 {
+
+    .dashboard-stats-grid-top-row-slot-3 {
       grid-area: slot3;
       display: grid;
+      min-inline-size: 0;
     }
 
-    .bottom-row {
+    .dashboard-stats-grid-bottom-row {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: var(--dashboard-stats-grid-gap, 1.2rem);
     }
   }

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

@@ -1,4 +1,6 @@
+import { ref } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import CanvasSwitcher from "../../../../canvas-switcher/CanvasSwitcher.vue";
 import DashboardStatsGridComponent from "../DashboardStatsGrid.vue";
 import type { MediaCanvas } from "~/types/components";
 
@@ -420,3 +422,48 @@ ResponsiveComparison.parameters = {
     },
   },
 };
+
+export const StressTest: StoryFn = () => ({
+  components: { DashboardStatsGridComponent },
+  template: `
+    <DashboardStatsGridComponent :top-row-slot1-item-count="4.7" :bottom-row-item-count="3">
+          <template #top-row-slot1-1-content><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 #top-row-slot1-2-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></div></template>
+          <template #top-row-slot1-3-content><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 #top-row-slot1-4-content><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 #top-row-slot-2><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;" dir="rtl">مرحبا بالعالم، نص طويل من اليمين إلى اليسار</p></div></template>
+          <template #top-row-slot-3><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"></div></template>
+          <template #bottom-row-1-content><div style="padding: 1.2rem; background: var(--theme-surface-subtle); outline: 1px dashed currentColor;"><p style="margin: 0;">x</p></div></template>
+          <template #bottom-row-2-content><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 #bottom-row-3-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></div></template>
+        </DashboardStatsGridComponent>
+  `,
+});
+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. `topRowSlot1ItemCount` is `4.7` here and renders 4 panels. Counts are floored, and negative or non-finite counts render none; until 2026-10-21 a fractional count rendered no panels at all.",
+      },
+    },
+  };