srcdev-nuxt-components 9.4.8 → 9.4.10

package/app/components/01.atoms/animations/view-timeline/tests/WipeAwayVertical.spec.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import WipeAwayVertical from "../WipeAwayVertical.vue";
+
+describe("WipeAwayVertical", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, { props: { itemCount: 3 } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ────────────────────────────────────────────────────────
+
+  it("renders a <div> as the root element by default", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, { props: { itemCount: 2 } });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders the tag prop as the root element", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, {
+      props: { itemCount: 2, tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  it("always has the wipe-away-vertical class", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, { props: { itemCount: 2 } });
+    expect(wrapper.classes()).toContain("wipe-away-vertical");
+  });
+
+  // ─── Slots ───────────────────────────────────────────────────────────────
+
+  it("renders one sticky-item per itemCount but one fewer scrolling-section (the last item has no wipe of its own)", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, { props: { itemCount: 3 } });
+    expect(wrapper.findAll(".sticky-item")).toHaveLength(3);
+    expect(wrapper.findAll(".scrolling-section")).toHaveLength(2);
+  });
+
+  it("assigns each scrolling-section its own grid-row after the leading buffer", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, { props: { itemCount: 3 } });
+    const sections = wrapper.findAll(".scrolling-section");
+    expect((sections[0]!.element as HTMLElement).style.gridRow).toBe("2");
+    expect((sections[1]!.element as HTMLElement).style.gridRow).toBe("3");
+  });
+
+  it("renders a leading buffer spacer before the first scrolling section", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, { props: { itemCount: 3 } });
+    expect(wrapper.find(".leading-buffer").exists()).toBe(true);
+    expect(wrapper.find(".leading-buffer").attributes("aria-hidden")).toBe("true");
+  });
+
+  it("renders a trailing buffer spacer after the last scrolling section", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, { props: { itemCount: 3 } });
+    expect(wrapper.find(".trailing-buffer").exists()).toBe(true);
+    expect(wrapper.find(".trailing-buffer").attributes("aria-hidden")).toBe("true");
+    expect((wrapper.find(".trailing-buffer").element as HTMLElement).style.gridRow).toBe("4");
+  });
+
+  it("renders named stickyItem-{key} slot content", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, {
+      props: { itemCount: 2 },
+      slots: {
+        "stickyItem-0": "<p class='sticky-0'>First</p>",
+        "stickyItem-1": "<p class='sticky-1'>Second</p>",
+      },
+    });
+    expect(wrapper.find(".sticky-0").exists()).toBe(true);
+    expect(wrapper.find(".sticky-1").exists()).toBe(true);
+  });
+
+  it("renders named scrollingItem-{key} slot content for all but the last item", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, {
+      props: { itemCount: 3 },
+      slots: {
+        "scrollingItem-0": "<p class='scroll-0'>First</p>",
+        "scrollingItem-1": "<p class='scroll-1'>Second</p>",
+        "scrollingItem-2": "<p class='scroll-2'>Third</p>",
+      },
+    });
+    expect(wrapper.find(".scroll-0").exists()).toBe(true);
+    expect(wrapper.find(".scroll-1").exists()).toBe(true);
+    expect(wrapper.find(".scroll-2").exists()).toBe(false);
+  });
+
+  // ─── Per-item styles ─────────────────────────────────────────────────────
+
+  it("assigns descending z-index across sticky items", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, { props: { itemCount: 3 } });
+    const items = wrapper.findAll(".sticky-item");
+    expect((items[0]!.element as HTMLElement).style.zIndex).toBe("3");
+    expect((items[1]!.element as HTMLElement).style.zIndex).toBe("2");
+    expect((items[2]!.element as HTMLElement).style.zIndex).toBe("1");
+  });
+
+  // Note: `animation-timeline` and `timeline-scope` are experimental CSS
+  // properties that jsdom's CSSOM silently drops when set via style bindings
+  // (they never appear in the serialized style attribute), so they can't be
+  // asserted on directly in this test environment.
+
+  // ─── styleClassPassthrough ───────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string to the root", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, {
+      props: { itemCount: 2, styleClassPassthrough: "custom-timeline" },
+    });
+    expect(wrapper.classes()).toContain("custom-timeline");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, {
+      props: { itemCount: 2, styleClassPassthrough: ["a-class", "b-class"] },
+    });
+    expect(wrapper.classes()).toContain("a-class");
+    expect(wrapper.classes()).toContain("b-class");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(WipeAwayVertical, {
+      props: { itemCount: 2, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/01.atoms/canvas-switcher/CONSUMER-STYLING.md

@@ -22,6 +22,6 @@ CanvasSwitcher itself exposes the following public tokens:
 `.mobileCanvas`, `.tabletCanvas`, `.laptopCanvas`, `.desktopCanvas`, `.fullWidthCanvas` are also
 declared in this component's stylesheet (not scoped to `.canvas-switcher`) so a consumer can apply
 the same `MediaCanvas` value returned by `v-model:canvas-name` directly as a class on a preview
-wrapper to constrain its width — see `LayoutGridA`/`LayoutGridB` stories for the pattern. These are
+wrapper to constrain its width — see `DashboardQuadGrid`/`DashboardStatsGrid` stories for the pattern. These are
 plain global utility classes, not overridable via a CSS custom property; import `CanvasSwitcher`
 (or otherwise ensure its styles are bundled) wherever you rely on them.

package/app/components/01.atoms/canvas-switcher/stories/CanvasSwitcher.stories.ts

@@ -31,7 +31,7 @@ export default {
     docs: {
       description: {
         component:
-          "An icon button group for switching between MediaCanvas preview widths (mobile/tablet/laptop/desktop/full width). Also declares the `.mobileCanvas`/`.tabletCanvas`/etc. utility classes a consumer can apply to a preview wrapper to constrain it to the matching width — see LayoutGridA/LayoutGridB stories.",
+          "An icon button group for switching between MediaCanvas preview widths (mobile/tablet/laptop/desktop/full width). Also declares the `.mobileCanvas`/`.tabletCanvas`/etc. utility classes a consumer can apply to a preview wrapper to constrain it to the matching width — see DashboardQuadGrid/DashboardStatsGrid stories.",
       },
     },
   },

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

@@ -0,0 +1,42 @@
+# DashboardQuadGrid — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--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` | `light-dark(black, white)` | 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` | `light-dark(black, white)` | 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 |
+| `--dashboard-quad-grid-rule-inset` | `0` | Inset of the grid gap rule line from the panel edges |
+
+```css
+.my-page {
+  --dashboard-quad-grid-gap: 1.6rem;
+  --dashboard-quad-grid-outline-colour: var(--theme-border);
+}
+```
+
+Or scope to a single instance via `styleClassPassthrough`:
+
+```vue
+<DashboardQuadGrid style-class-passthrough="promo-quad-grid">...</DashboardQuadGrid>
+```
+
+## Notes
+
+- The four-panel layout (mobile stack → tablet 2×3 → desktop 3×2 with slot1 spanning vertically)
+  is structural, driven by fixed container-query breakpoints (`768px`, `1060px`) rather than
+  tokens/props — this is a fixed dashboard shape, not a general-purpose grid. Use
+  `LayoutGridByCols`/`LayoutGridByWidth` instead if you need an arbitrary column count.
+- Responds to its own container width (`container-type: inline-size`), not the viewport.
+- Also declares a `rule`/`rule-break`/`rule-inset` gap-decoration line between grid cells (the
+  CSS Gap Decorations spec) via `--dashboard-quad-grid-rule-*` tokens. Browser support is limited
+  as of 2026, so it's transparent by default and safe to ignore — set
+  `--dashboard-quad-grid-rule-colour` to opt in where supported.

package/app/components/{layout-grids/LayoutGridA.vue → 01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/DashboardQuadGrid.vue}

@@ -1,6 +1,6 @@
 <template>
-  <div class="layout-grid-a-wrapper" :class="[elementClasses]">
-    <div class="layout-grid-a">
+  <div class="dashboard-quad-grid-wrapper" :class="[elementClasses]">
+    <div class="dashboard-quad-grid">
       <div class="slot1">
         <slot name="slot1"></slot>
       </div>
@@ -18,11 +18,12 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
+interface Props {
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
 });
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -37,17 +38,26 @@ watch(
 
 <style lang="css">
 @layer components {
-  .layout-grid-a-wrapper {
+  .dashboard-quad-grid-wrapper {
     container-type: inline-size;
 
-    .layout-grid-a {
+    .dashboard-quad-grid {
       display: grid;
-      gap: 20px;
+      gap: var(--dashboard-quad-grid-gap, 2rem);
+
+      /* CSS Gap Decorations (rule/rule-break/rule-inset) — limited browser support as of 2026, transparent by default */
+      rule: var(--dashboard-quad-grid-rule-width, 0.1rem) solid var(--dashboard-quad-grid-rule-colour, transparent);
+      rule-break: intersection;
+      rule-inset: var(--dashboard-quad-grid-rule-inset, 0);
 
       & > div {
-        padding: 20px;
-        outline: 1px solid light-dark(black, white);
-        border-radius: 5px;
+        padding: var(--dashboard-quad-grid-padding, 2rem);
+        outline: var(--dashboard-quad-grid-outline-width, 0.1rem) solid
+          var(--dashboard-quad-grid-outline-colour, light-dark(black, white));
+        outline-offset: var(--dashboard-quad-grid-outline-offset, 0);
+        border: var(--dashboard-quad-grid-border-width, 0) solid
+          var(--dashboard-quad-grid-border-colour, light-dark(black, white));
+        border-radius: var(--dashboard-quad-grid-border-radius, 0.5rem);
       }
 
       @container (min-width: 768px) {

package/app/components/{layout-grids/stories/LayoutGridA.stories.ts → 01.atoms/content-wrappers/layout-grid/dashboard-quad-grid/stories/DashboardQuadGrid.stories.ts}

@@ -1,16 +1,16 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import LayoutGridAComponent from "../LayoutGridA.vue";
-import type { MediaCanvas } from "../../../types/components";
+import DashboardQuadGridComponent from "../DashboardQuadGrid.vue";
+import type { MediaCanvas } from "~/types/components";
 
 // Define the args interface
-interface LayoutGridAArgs {
+interface DashboardQuadGridArgs {
   mediaCanvas: MediaCanvas;
   styleClassPassthrough: string[];
 }
 
 export default {
-  title: "Components/Layouts/LayoutGridA",
-  component: LayoutGridAComponent,
+  title: "Atoms/Content Wrappers/Dashboard Quad Grid",
+  component: DashboardQuadGridComponent,
   argTypes: {
     // Canvas/Media Query Testing
     mediaCanvas: {
@@ -40,10 +40,10 @@ export default {
       },
     },
   },
-} as Meta<LayoutGridAArgs>;
+} as Meta<DashboardQuadGridArgs>;
 
-const Template: StoryFn<LayoutGridAArgs> = (args) => ({
-  components: { LayoutGridAComponent },
+const Template: StoryFn<DashboardQuadGridArgs> = (args) => ({
+  components: { DashboardQuadGridComponent },
   setup() {
     const sampleContent = {
       shortText: "Brief sample content for this slot.",
@@ -57,7 +57,7 @@ const Template: StoryFn<LayoutGridAArgs> = (args) => ({
   },
   template: `
     <div style="padding: 20px;" :class="args.mediaCanvas">
-      <LayoutGridAComponent :style-class-passthrough="[args.mediaCanvas, ...args.styleClassPassthrough]">
+      <DashboardQuadGridComponent :style-class-passthrough="[args.mediaCanvas, ...args.styleClassPassthrough]">
         <template #slot1>
           <h3 style="margin: 0 0 16px 0; color: #374151; font-size: 18px;">Primary Content</h3>
           <p style="margin: 0 0 12px 0; color: #6b7280; line-height: 1.5;">{{ sampleContent.longText }}</p>
@@ -78,7 +78,7 @@ const Template: StoryFn<LayoutGridAArgs> = (args) => ({
           <h3 style="margin: 0 0 16px 0; color: #dc2626; font-size: 18px;">Additional Details</h3>
           <p style="margin: 0; color: #ef4444; line-height: 1.5;">{{ sampleContent.mediumText }}</p>
         </template>
-      </LayoutGridAComponent>
+      </DashboardQuadGridComponent>
     </div>
   `,
 });
@@ -155,14 +155,14 @@ FullWidthView.parameters = {
 
 // ===== CONTENT VARIATION STORIES =====
 
-const ContentVariationsTemplate: StoryFn<LayoutGridAArgs> = (args) => ({
-  components: { LayoutGridAComponent },
+const ContentVariationsTemplate: StoryFn<DashboardQuadGridArgs> = (args) => ({
+  components: { DashboardQuadGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 20px;" :class="args.mediaCanvas">
-      <LayoutGridAComponent :style-class-passthrough="[args.mediaCanvas]">
+      <DashboardQuadGridComponent :style-class-passthrough="[args.mediaCanvas]">
         <!-- Slot 1 - Main article content -->
         <template #slot1>
           <article style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 24px; border-radius: 12px; margin: -20px; height: calc(100% + 40px); display: flex; flex-direction: column;">
@@ -254,7 +254,7 @@ const ContentVariationsTemplate: StoryFn<LayoutGridAArgs> = (args) => ({
             </div>
           </div>
         </template>
-      </LayoutGridAComponent>
+      </DashboardQuadGridComponent>
     </div>
   `,
 });
@@ -267,21 +267,149 @@ DashboardExample.parameters = {
   docs: {
     description: {
       story:
-        "Complete dashboard example showcasing LayoutGridA with a featured article, performance metrics, quick actions, and activity feed. Demonstrates real-world usage with rich content.",
+        "Complete dashboard example showcasing DashboardQuadGrid with a featured article, performance metrics, quick actions, and activity feed. Demonstrates real-world usage with rich content.",
+    },
+  },
+};
+
+// ===== RULE DECORATIONS (CSS GAP DECORATIONS) =====
+
+const RuleDecorationsTemplate: StoryFn<DashboardQuadGridArgs> = (args) => ({
+  components: { DashboardQuadGridComponent },
+  setup() {
+    const ruleTokenStyle = [
+      "--dashboard-quad-grid-outline-width: 0",
+      "--dashboard-quad-grid-border-width: 0",
+      "--dashboard-quad-grid-border-radius: 0",
+      "--dashboard-quad-grid-rule-width: 0.2rem",
+      "--dashboard-quad-grid-rule-colour: light-dark(#cbd5e1, #475569)",
+      "--dashboard-quad-grid-rule-inset: 0",
+    ].join("; ");
+
+    return { args, ruleTokenStyle };
+  },
+  template: `
+    <div style="padding: 20px;" :class="args.mediaCanvas">
+      <DashboardQuadGridComponent :style-class-passthrough="[args.mediaCanvas]" :style="ruleTokenStyle">
+        <!-- Slot 1 - Main article content -->
+        <template #slot1>
+          <article style="color: inherit; padding: 24px; height: 100%; display: flex; flex-direction: column;">
+            <h2 style="margin: 0 0 16px 0; font-size: 24px;">Featured Article</h2>
+            <div style="flex: 1;">
+              <p style="margin: 0 0 16px 0; opacity: 0.85; line-height: 1.6;">
+                Discover the latest insights and trends in modern web development. This comprehensive guide covers
+                everything you need to know about building scalable, responsive applications.
+              </p>
+              <p style="margin: 0 0 20px 0; opacity: 0.75; line-height: 1.6;">
+                From CSS Grid and Container Queries to Vue 3 composition patterns, learn how to create stunning
+                user interfaces that work seamlessly across all devices and screen sizes.
+              </p>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="opacity: 0.6; font-size: 14px;">Published: Feb 5, 2026</span>
+              <button style="padding: 10px 20px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 6px; cursor: pointer;">
+                Read More
+              </button>
+            </div>
+          </article>
+        </template>
+
+        <!-- Slot 2 - Statistics dashboard -->
+        <template #slot2>
+          <div style="padding: 24px; height: 100%;">
+            <h3 style="margin: 0 0 20px 0; font-size: 18px;">Performance Overview</h3>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px;">
+              <div style="text-align: center; padding: 16px;">
+                <div style="font-size: 28px; font-weight: bold; color: #059669; margin-bottom: 4px;">98.5%</div>
+                <div style="font-size: 12px; opacity: 0.7;">Uptime</div>
+              </div>
+              <div style="text-align: center; padding: 16px;">
+                <div style="font-size: 28px; font-weight: bold; color: #3b82f6; margin-bottom: 4px;">1,247</div>
+                <div style="font-size: 12px; opacity: 0.7;">Active Users</div>
+              </div>
+              <div style="text-align: center; padding: 16px;">
+                <div style="font-size: 28px; font-weight: bold; color: #f59e0b; margin-bottom: 4px;">342ms</div>
+                <div style="font-size: 12px; opacity: 0.7;">Avg Response</div>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <!-- Slot 3 - Quick actions -->
+        <template #slot3>
+          <div style="padding: 20px; height: 100%;">
+            <h3 style="margin: 0 0 16px 0; font-size: 16px;">Quick Actions</h3>
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+              <button style="width: 100%; padding: 12px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; text-align: left;">
+                📊 View Analytics
+              </button>
+              <button style="width: 100%; padding: 12px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; text-align: left;">
+                ⚙️ Settings
+              </button>
+              <button style="width: 100%; padding: 12px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; text-align: left;">
+                👥 Manage Users
+              </button>
+            </div>
+          </div>
+        </template>
+
+        <!-- Slot 4 - Recent activity -->
+        <template #slot4>
+          <div style="padding: 20px; height: 100%;">
+            <h3 style="margin: 0 0 16px 0; font-size: 16px;">Recent Activity</h3>
+            <div style="display: flex; flex-direction: column; gap: 4px;">
+              <div style="display: flex; align-items: center; padding: 8px 0;">
+                <div style="width: 8px; height: 8px; background: #059669; border-radius: 50%; margin-right: 12px;"></div>
+                <div style="flex: 1;">
+                  <div style="font-size: 13px;">New user registered</div>
+                  <div style="font-size: 11px; opacity: 0.6;">2 minutes ago</div>
+                </div>
+              </div>
+              <div style="display: flex; align-items: center; padding: 8px 0;">
+                <div style="width: 8px; height: 8px; background: #3b82f6; border-radius: 50%; margin-right: 12px;"></div>
+                <div style="flex: 1;">
+                  <div style="font-size: 13px;">System backup completed</div>
+                  <div style="font-size: 11px; opacity: 0.6;">15 minutes ago</div>
+                </div>
+              </div>
+              <div style="display: flex; align-items: center; padding: 8px 0;">
+                <div style="width: 8px; height: 8px; background: #f59e0b; border-radius: 50%; margin-right: 12px;"></div>
+                <div style="flex: 1;">
+                  <div style="font-size: 13px;">Update available</div>
+                  <div style="font-size: 11px; opacity: 0.6;">1 hour ago</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </DashboardQuadGridComponent>
+    </div>
+  `,
+});
+
+export const RuleDecorations = RuleDecorationsTemplate.bind({});
+RuleDecorations.args = {
+  mediaCanvas: "desktopCanvas",
+};
+RuleDecorations.parameters = {
+  docs: {
+    description: {
+      story:
+        "Same dashboard content as DashboardExample, but with --dashboard-quad-grid-outline-width, -border-width and -border-radius set to 0 and the CSS Gap Decorations rule tokens (--dashboard-quad-grid-rule-width/-colour/-inset) driving the panel dividers instead. Requires a browser that supports the CSS Gap Decorations spec (rule/rule-break/rule-inset) — limited support as of 2026, so the divider lines may not render everywhere.",
     },
   },
 };
 
 // ===== CONTENT LENGTH VARIATIONS =====
 
-const ContentLengthTemplate: StoryFn<LayoutGridAArgs> = (args) => ({
-  components: { LayoutGridAComponent },
+const ContentLengthTemplate: StoryFn<DashboardQuadGridArgs> = (args) => ({
+  components: { DashboardQuadGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 20px;" :class="args.mediaCanvas">
-      <LayoutGridAComponent :style-class-passthrough="[args.mediaCanvas]">
+      <DashboardQuadGridComponent :style-class-passthrough="[args.mediaCanvas]">
         <!-- Slot 1 - Short content -->
         <template #slot1>
           <h3 style="margin: 0 0 16px 0; color: #374151;">Short Content</h3>
@@ -317,7 +445,7 @@ const ContentLengthTemplate: StoryFn<LayoutGridAArgs> = (args) => ({
             <li>List item three</li>
           </ul>
         </template>
-      </LayoutGridAComponent>
+      </DashboardQuadGridComponent>
     </div>
   `,
 });
@@ -338,7 +466,7 @@ ContentLengthVariations.parameters = {
 // ===== COMPARISON STORY =====
 
 const ComparisonTemplate: StoryFn = () => ({
-  components: { LayoutGridAComponent },
+  components: { DashboardQuadGridComponent },
   setup() {
     const canvases: MediaCanvas[] = ["mobileCanvas", "tabletCanvas", "laptopCanvas", "desktopCanvas"];
     return { canvases };
@@ -353,7 +481,7 @@ const ComparisonTemplate: StoryFn = () => ({
             {{ canvas === 'mobileCanvas' ? '(< 768px)' : canvas === 'tabletCanvas' ? '(768px - 1059px)' : '(≥ 1060px)' }}
           </h3>
           <div style="border: 2px solid #e5e7eb; border-radius: 12px; padding: 20px; background: #fafafa;">
-            <LayoutGridAComponent :style-class-passthrough="[canvas]">
+            <DashboardQuadGridComponent :style-class-passthrough="[canvas]">
               <template #slot1>
                 <div style="background: #dbeafe; padding: 16px; border-radius: 8px; text-align: center; font-weight: bold; color: #1e40af; margin: -20px; height: calc(100% + 40px); display: flex; align-items: center; justify-content: center;">
                   Slot 1
@@ -383,7 +511,7 @@ const ComparisonTemplate: StoryFn = () => ({
                   Slot 4
                 </div>
               </template>
-            </LayoutGridAComponent>
+            </DashboardQuadGridComponent>
           </div>
         </div>
       </div>
@@ -396,7 +524,7 @@ ResponsiveComparison.parameters = {
   docs: {
     description: {
       story:
-        "Side-by-side comparison showing how LayoutGridA transforms across different responsive breakpoints. Notice how the layout changes from stacked (mobile) to 2×3 grid (tablet) to 3×2 grid with spanning elements (desktop).",
+        "Side-by-side comparison showing how DashboardQuadGrid transforms across different responsive breakpoints. Notice how the layout changes from stacked (mobile) to 2×3 grid (tablet) to 3×2 grid with spanning elements (desktop).",
     },
   },
 };