srcdev-nuxt-components 9.4.9 → 9.4.11

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

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import type { DOMWrapper } from "@vue/test-utils";
-import LayoutGridA from "../LayoutGridA.vue";
+import DashboardQuadGrid from "../DashboardQuadGrid.vue";
 
 // Mock useStyleClassPassthrough composable
 const mockElementClasses = { value: "" };
@@ -16,7 +16,7 @@ vi.mock("#imports", () => ({
   useStyleClassPassthrough: mockUseStyleClassPassthrough,
 }));
 
-describe("LayoutGridA", () => {
+describe("DashboardQuadGrid", () => {
   let wrapper: ReturnType<typeof mountSuspended>;
 
   const createWrapper = async (props = {}, slots = {}) => {
@@ -25,7 +25,7 @@ describe("LayoutGridA", () => {
       ...props,
     };
 
-    wrapper = await mountSuspended(LayoutGridA, {
+    wrapper = await mountSuspended(DashboardQuadGrid, {
       props: defaultProps,
       slots,
     });
@@ -46,14 +46,14 @@ describe("LayoutGridA", () => {
     it("mounts without error", async () => {
       await createWrapper();
 
-      expect(wrapper.find(".layout-grid-a-wrapper")).toBeTruthy();
-      expect(wrapper.find(".layout-grid-a")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid-wrapper")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
     });
 
     it("renders all four slot containers", async () => {
       await createWrapper();
 
-      const slots = wrapper.findAll(".layout-grid-a > div");
+      const slots = wrapper.findAll(".dashboard-quad-grid > div");
       expect(slots).toHaveLength(4);
 
       expect(wrapper.find(".slot1")).toBeTruthy();
@@ -65,12 +65,12 @@ describe("LayoutGridA", () => {
     it("has correct grid container structure", async () => {
       await createWrapper();
 
-      const wrapper_element = wrapper.find(".layout-grid-a-wrapper");
-      const grid = wrapper.find(".layout-grid-a");
+      const wrapper_element = wrapper.find(".dashboard-quad-grid-wrapper");
+      const grid = wrapper.find(".dashboard-quad-grid");
 
       expect(wrapper_element.exists()).toBe(true);
       expect(grid.exists()).toBe(true);
-      expect(grid.classes()).toContain("layout-grid-a");
+      expect(grid.classes()).toContain("dashboard-quad-grid");
     });
   });
 
@@ -156,7 +156,7 @@ describe("LayoutGridA", () => {
         }
       );
 
-      const slots = wrapper.findAll(".layout-grid-a > div");
+      const slots = wrapper.findAll(".dashboard-quad-grid > div");
       expect(slots).toHaveLength(4);
 
       slots.forEach((slot: DOMWrapper<Element>) => {
@@ -171,7 +171,7 @@ describe("LayoutGridA", () => {
       await createWrapper({ styleClassPassthrough: className });
 
       // Component should mount without error with string class
-      expect(wrapper.find(".layout-grid-a")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
     });
 
     it("accepts array styleClassPassthrough", async () => {
@@ -179,22 +179,22 @@ describe("LayoutGridA", () => {
       await createWrapper({ styleClassPassthrough: classNames });
 
       // Component should mount without error with array of classes
-      expect(wrapper.find(".layout-grid-a")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
     });
 
     it("uses default empty array for styleClassPassthrough", async () => {
       await createWrapper();
 
       // Component should mount without error with default props
-      expect(wrapper.find(".layout-grid-a")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
     });
 
     it("renders correctly with various props", async () => {
       await createWrapper({ styleClassPassthrough: ["test-class", "another-class"] });
 
-      const wrapper_element = wrapper.find(".layout-grid-a-wrapper");
+      const wrapper_element = wrapper.find(".dashboard-quad-grid-wrapper");
       expect(wrapper_element.exists()).toBe(true);
-      expect(wrapper_element.classes()).toContain("layout-grid-a-wrapper");
+      expect(wrapper_element.classes()).toContain("dashboard-quad-grid-wrapper");
     });
   });
 
@@ -203,9 +203,9 @@ describe("LayoutGridA", () => {
       await createWrapper({ styleClassPassthrough: ["initial"] });
 
       // Component should maintain its structure
-      expect(wrapper.find(".layout-grid-a-wrapper")).toBeTruthy();
-      expect(wrapper.find(".layout-grid-a")).toBeTruthy();
-      expect(wrapper.findAll(".layout-grid-a > div")).toHaveLength(4);
+      expect(wrapper.find(".dashboard-quad-grid-wrapper")).toBeTruthy();
+      expect(wrapper.find(".dashboard-quad-grid")).toBeTruthy();
+      expect(wrapper.findAll(".dashboard-quad-grid > div")).toHaveLength(4);
     });
   });
 
@@ -213,15 +213,15 @@ describe("LayoutGridA", () => {
     it("has correct CSS classes applied", async () => {
       await createWrapper();
 
-      const wrapper_element = wrapper.find(".layout-grid-a-wrapper");
-      const grid = wrapper.find(".layout-grid-a");
+      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");
 
-      expect(wrapper_element.classes()).toContain("layout-grid-a-wrapper");
-      expect(grid.classes()).toContain("layout-grid-a");
+      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");
@@ -231,8 +231,8 @@ describe("LayoutGridA", () => {
     it("maintains correct DOM hierarchy", async () => {
       await createWrapper();
 
-      const wrapper_element = wrapper.find(".layout-grid-a-wrapper");
-      const grid = wrapper_element.find(".layout-grid-a");
+      const wrapper_element = wrapper.find(".dashboard-quad-grid-wrapper");
+      const grid = wrapper_element.find(".dashboard-quad-grid");
 
       expect(grid.exists()).toBe(true);
 
@@ -341,7 +341,7 @@ describe("LayoutGridA", () => {
         }
       );
 
-      const slots = wrapper.findAll(".layout-grid-a > div");
+      const slots = wrapper.findAll(".dashboard-quad-grid > div");
       expect(slots).toHaveLength(4);
 
       slots.forEach((slot: DOMWrapper<Element>) => {

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

@@ -0,0 +1,41 @@
+# DashboardStatsGrid — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--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-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 |
+| `--dashboard-stats-grid-rule-inset` | `0` | Inset of the grid gap rule line from the panel edges |
+
+```css
+.my-page {
+  --dashboard-stats-grid-gap: 1.6rem;
+  --dashboard-stats-grid-border-colour: var(--theme-border);
+}
+```
+
+Or scope to a single instance via `styleClassPassthrough`:
+
+```vue
+<DashboardStatsGrid style-class-passthrough="quarterly-stats">...</DashboardStatsGrid>
+```
+
+## Notes
+
+- Layout shape (top-row split into a multi-panel cluster + 2 static panels, bottom-row panel
+  strip) is structural, driven by fixed container-query breakpoints (`680px`, `1024px`) rather
+  than tokens/props.
+- `topRowSlot1ItemCount` (default `6`) and `bottomRowItemCount` (default `4`) control how many
+  dynamic slots are rendered in the top-row cluster and bottom row, not layout shape.
+- 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-stats-grid-rule-*` tokens, on the top-level grid
+  between the top row and bottom row. Browser support is limited as of 2026, so it's transparent
+  by default and safe to ignore — set `--dashboard-stats-grid-rule-colour` to opt in where
+  supported.

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

@@ -0,0 +1,133 @@
+<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">
+            <slot :name="`top-row-slot1-${key}-content`"></slot>
+          </div>
+        </div>
+      </div>
+
+      <div class="top-row-slot-2">
+        <div class="panel">
+          <slot name="top-row-slot-2"></slot>
+        </div>
+      </div>
+      <div class="top-row-slot-3">
+        <div class="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">
+        <slot :name="`bottom-row-${key}-content`"></slot>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  topRowSlot1ItemCount?: number;
+  bottomRowItemCount?: number;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  topRowSlot1ItemCount: 6,
+  bottomRowItemCount: 4,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<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;
+    gap: var(--dashboard-stats-grid-gap, 1.2rem);
+    width: 100%;
+    margin-inline: auto;
+
+    /* CSS Gap Decorations (rule/rule-break/rule-inset) — limited browser support as of 2026, transparent by default */
+    rule: var(--dashboard-stats-grid-rule-width, 0.1rem) solid var(--dashboard-stats-grid-rule-colour, transparent);
+    rule-break: intersection;
+    rule-inset: var(--dashboard-stats-grid-rule-inset, 0);
+
+    .top-row {
+      display: grid;
+      gap: var(--dashboard-stats-grid-gap, 1.2rem);
+      width: 100%;
+
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        "slot1"
+        "slot2"
+        "slot3";
+
+      @container (min-width: 1024px) {
+        grid-template-columns: 1fr minmax(46rem, 33%);
+        grid-template-areas:
+          "slot1 slot2"
+          "slot3 slot2";
+      }
+    }
+
+    .top-row-slot-1 {
+      grid-area: slot1;
+      container-type: inline-size;
+
+      .top-row-slot-1-inner {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+
+        gap: var(--dashboard-stats-grid-gap, 1.2rem);
+
+        @container (min-width: 680px) {
+          grid-template-columns: repeat(3, 1fr);
+        }
+
+        .panel {
+          display: grid;
+        }
+      }
+    }
+
+    .top-row-slot-2 {
+      grid-area: slot2;
+      display: grid;
+    }
+    .top-row-slot-3 {
+      grid-area: slot3;
+      display: grid;
+    }
+
+    .bottom-row {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--dashboard-stats-grid-gap, 1.2rem);
+    }
+  }
+}
+</style>

package/app/components/{layout-grids/stories/LayoutGridB.stories.ts → 01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/stories/DashboardStatsGrid.stories.ts}

@@ -1,9 +1,9 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import LayoutGridBComponent from "../LayoutGridB.vue";
-import type { MediaCanvas } from "../../../types/components";
+import DashboardStatsGridComponent from "../DashboardStatsGrid.vue";
+import type { MediaCanvas } from "~/types/components";
 
 // Define the args interface
-interface LayoutGridBArgs {
+interface DashboardStatsGridArgs {
   topRowSlot1ItemCount: number;
   bottomRowItemCount: number;
   mediaCanvas: MediaCanvas;
@@ -11,8 +11,8 @@ interface LayoutGridBArgs {
 }
 
 export default {
-  title: "Components/Layouts/LayoutGridB",
-  component: LayoutGridBComponent,
+  title: "Atoms/Content Wrappers/Dashboard Stats Grid",
+  component: DashboardStatsGridComponent,
   argTypes: {
     // Configuration
     topRowSlot1ItemCount: {
@@ -59,10 +59,10 @@ export default {
       },
     },
   },
-} as Meta<LayoutGridBArgs>;
+} as Meta<DashboardStatsGridArgs>;
 
-const Template: StoryFn<LayoutGridBArgs> = (args) => ({
-  components: { LayoutGridBComponent },
+const Template: StoryFn<DashboardStatsGridArgs> = (args) => ({
+  components: { DashboardStatsGridComponent },
   setup() {
     const sampleContent = {
       shortText: "Sample content panel",
@@ -76,9 +76,9 @@ const Template: StoryFn<LayoutGridBArgs> = (args) => ({
   },
   template: `
     <div style="padding: 20px;" :class="args.mediaCanvas">
-      <LayoutGridBComponent
-        :topRowSlot1ItemCount="args.topRowSlot1ItemCount"
-        :bottomRowItemCount="args.bottomRowItemCount"
+      <DashboardStatsGridComponent
+        :top-row-slot1-item-count="args.topRowSlot1ItemCount"
+        :bottom-row-item-count="args.bottomRowItemCount"
         :style-class-passthrough="[args.mediaCanvas, ...args.styleClassPassthrough]"
       >
         <!-- Dynamic top row slot 1 content -->
@@ -113,7 +113,7 @@ const Template: StoryFn<LayoutGridBArgs> = (args) => ({
             <p style="margin: 0; color: #b45309; font-size: 14px; line-height: 1.4;">{{ sampleContent.mediumText }}</p>
           </div>
         </template>
-      </LayoutGridBComponent>
+      </DashboardStatsGridComponent>
     </div>
   `,
 });
@@ -209,16 +209,16 @@ FullWidthView.parameters = {
 
 // ===== CONTENT VARIATION STORIES =====
 
-const ContentVariationsTemplate: StoryFn<LayoutGridBArgs> = (args) => ({
-  components: { LayoutGridBComponent },
+const ContentVariationsTemplate: StoryFn<DashboardStatsGridArgs> = (args) => ({
+  components: { DashboardStatsGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 20px;" :class="args.mediaCanvas">
-      <LayoutGridBComponent
-        :topRowSlot1ItemCount="args.topRowSlot1ItemCount"
-        :bottomRowItemCount="args.bottomRowItemCount"
+      <DashboardStatsGridComponent
+        :top-row-slot1-item-count="args.topRowSlot1ItemCount"
+        :bottom-row-item-count="args.bottomRowItemCount"
         :style-class-passthrough="[args.mediaCanvas]"
       >
         <!-- Top row slot 1 - Different content types -->
@@ -335,7 +335,7 @@ const ContentVariationsTemplate: StoryFn<LayoutGridBArgs> = (args) => ({
             <button style="padding: 8px 16px; background: #7c3aed; color: white; border: none; border-radius: 6px; font-size: 14px; cursor: pointer;">Upgrade</button>
           </div>
         </template>
-      </LayoutGridBComponent>
+      </DashboardStatsGridComponent>
     </div>
   `,
 });
@@ -350,7 +350,7 @@ DashboardExample.parameters = {
   docs: {
     description: {
       story:
-        "Complete dashboard example showing how LayoutGridB can be used for admin interfaces with statistics, main content, activity feeds, and feature cards.",
+        "Complete dashboard example showing how DashboardStatsGrid can be used for admin interfaces with statistics, main content, activity feeds, and feature cards.",
     },
   },
 };
@@ -358,7 +358,7 @@ DashboardExample.parameters = {
 // ===== COMPARISON STORY =====
 
 const ComparisonTemplate: StoryFn = () => ({
-  components: { LayoutGridBComponent },
+  components: { DashboardStatsGridComponent },
   setup() {
     const canvases: MediaCanvas[] = ["mobileCanvas", "tabletCanvas", "laptopCanvas", "desktopCanvas"];
     return { canvases };
@@ -372,9 +372,9 @@ const ComparisonTemplate: StoryFn = () => ({
             {{ canvas.replace('Canvas', '') }} View
           </h3>
           <div style="border: 2px solid #e5e7eb; border-radius: 12px; padding: 20px; background: #fafafa;">
-            <LayoutGridBComponent
-              :topRowSlot1ItemCount="6"
-              :bottomRowItemCount="4"
+            <DashboardStatsGridComponent
+              :top-row-slot1-item-count="6"
+              :bottom-row-item-count="4"
               :style-class-passthrough="[canvas]"
             >
               <!-- Simplified content for comparison -->
@@ -401,7 +401,7 @@ const ComparisonTemplate: StoryFn = () => ({
                   Bottom {{ i }}
                 </div>
               </template>
-            </LayoutGridBComponent>
+            </DashboardStatsGridComponent>
           </div>
         </div>
       </div>

package/app/components/{layout-grids/tests/LayoutGridB.spec.ts → 01.atoms/content-wrappers/layout-grid/dashboard-stats-grid/tests/DashboardStatsGrid.spec.ts}

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import LayoutGridB from "../LayoutGridB.vue";
+import DashboardStatsGrid from "../DashboardStatsGrid.vue";
 
 // Mock useStyleClassPassthrough composable
 const mockElementClasses = { value: "" };
@@ -15,7 +15,7 @@ vi.mock("#imports", () => ({
   useStyleClassPassthrough: mockUseStyleClassPassthrough,
 }));
 
-describe("LayoutGridB", () => {
+describe("DashboardStatsGrid", () => {
   let wrapper: ReturnType<typeof mountSuspended>;
 
   const createWrapper = async (props = {}, slots = {}) => {
@@ -26,7 +26,7 @@ describe("LayoutGridB", () => {
       ...props,
     };
 
-    wrapper = await mountSuspended(LayoutGridB, {
+    wrapper = await mountSuspended(DashboardStatsGrid, {
       props: defaultProps,
       slots,
     });
@@ -47,8 +47,8 @@ describe("LayoutGridB", () => {
     it("mounts without error", async () => {
       await createWrapper();
 
-      expect(wrapper.find(".layout-grid-b-wrapper")).toBeTruthy();
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid-wrapper")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
     });
 
     it("renders top row structure correctly", async () => {
@@ -69,10 +69,10 @@ describe("LayoutGridB", () => {
     it("has correct grid container structure", async () => {
       await createWrapper();
 
-      const grid = wrapper.find(".layout-grid-b");
+      const grid = wrapper.find(".dashboard-stats-grid");
 
       expect(grid.exists()).toBe(true);
-      expect(grid.classes()).toContain("layout-grid-b");
+      expect(grid.classes()).toContain("dashboard-stats-grid");
     });
   });
 
@@ -82,7 +82,7 @@ describe("LayoutGridB", () => {
       await createWrapper({ topRowSlot1ItemCount: itemCount });
 
       // Component should render without error with custom item count
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
     });
 
     it("accepts bottomRowItemCount prop", async () => {
@@ -90,7 +90,7 @@ describe("LayoutGridB", () => {
       await createWrapper({ bottomRowItemCount: itemCount });
 
       // Component should render without error with custom item count
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
     });
 
     it("uses default props when not provided", async () => {
@@ -100,7 +100,7 @@ describe("LayoutGridB", () => {
       });
 
       // Should use default values (6 and 4)
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
     });
 
     it("accepts string styleClassPassthrough", async () => {
@@ -108,7 +108,7 @@ describe("LayoutGridB", () => {
       await createWrapper({ styleClassPassthrough: className });
 
       // Component should mount without error with string class
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
     });
 
     it("accepts array styleClassPassthrough", async () => {
@@ -116,7 +116,7 @@ describe("LayoutGridB", () => {
       await createWrapper({ styleClassPassthrough: classNames });
 
       // Component should mount without error with array of classes
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
     });
 
     it("applies element classes to wrapper", async () => {
@@ -125,7 +125,7 @@ describe("LayoutGridB", () => {
       await createWrapper();
 
       // Check that the component renders
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
     });
   });
 
@@ -157,7 +157,7 @@ describe("LayoutGridB", () => {
         const { unmount } = await createWrapper({ topRowSlot1ItemCount: count }, slots);
 
         // Should render without error
-        expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+        expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
 
         // Check that content is rendered
         for (let i = 1; i <= count; i++) {
@@ -239,7 +239,7 @@ describe("LayoutGridB", () => {
         const { unmount } = await createWrapper({ bottomRowItemCount: count }, slots);
 
         // Should render without error
-        expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+        expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
 
         // Check that content is rendered
         for (let i = 1; i <= count; i++) {
@@ -294,7 +294,7 @@ describe("LayoutGridB", () => {
       await createWrapper({ styleClassPassthrough: ["initial"] });
 
       // Component should maintain structure with different props
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
       expect(wrapper.find(".top-row")).toBeTruthy();
       expect(wrapper.find(".bottom-row")).toBeTruthy();
     });
@@ -315,7 +315,7 @@ describe("LayoutGridB", () => {
       expect(wrapper.html()).toContain("Bottom 1");
 
       // Component should render properly
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
 
       unmount();
     });
@@ -325,11 +325,11 @@ describe("LayoutGridB", () => {
     it("has correct CSS classes applied", async () => {
       await createWrapper();
 
-      const grid = wrapper.find(".layout-grid-b");
+      const grid = wrapper.find(".dashboard-stats-grid");
       const topRow = wrapper.find(".top-row");
       const bottomRow = wrapper.find(".bottom-row");
 
-      expect(grid.classes()).toContain("layout-grid-b");
+      expect(grid.classes()).toContain("dashboard-stats-grid");
       expect(topRow.classes()).toContain("top-row");
       expect(bottomRow.classes()).toContain("bottom-row");
     });
@@ -337,7 +337,7 @@ describe("LayoutGridB", () => {
     it("maintains correct DOM hierarchy", async () => {
       await createWrapper();
 
-      const grid = wrapper.find(".layout-grid-b");
+      const grid = wrapper.find(".dashboard-stats-grid");
       const topRow = grid.find(".top-row");
       const bottomRow = grid.find(".bottom-row");
 
@@ -359,7 +359,7 @@ describe("LayoutGridB", () => {
         bottomRowItemCount: 0,
       });
 
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
       expect(wrapper.find(".top-row")).toBeTruthy();
       expect(wrapper.find(".bottom-row")).toBeTruthy();
     });
@@ -382,7 +382,7 @@ describe("LayoutGridB", () => {
         slots
       );
 
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
       expect(wrapper.html()).toContain("Large Panel 1");
       expect(wrapper.html()).toContain("Large Bottom 1");
     });
@@ -436,7 +436,7 @@ describe("LayoutGridB", () => {
         }
       );
 
-      expect(wrapper.find(".layout-grid-b")).toBeTruthy();
+      expect(wrapper.find(".dashboard-stats-grid")).toBeTruthy();
       expect(wrapper.find(".top-row")).toBeTruthy();
       expect(wrapper.find(".bottom-row")).toBeTruthy();
     });

package/app/components/01.atoms/display-tooltip/CONSUMER-STYLING.md

@@ -15,19 +15,19 @@
 | `--display-tooltip-popover-padding` | `1.2rem` | Popover panel content padding |
 | `--display-tooltip-popover-content-gap` | `1.2rem` | Gap between stacked children in the `tooltipContent` slot |
 | `--display-tooltip-popover-outline-width` | `0.1rem` | Popover panel outline (border) width |
-| `--display-tooltip-popover-outline-colour` | `light-dark(var(--slate-02), var(--slate-06))` | Popover panel outline (border) colour |
-| `--display-tooltip-popover-text-colour` | `light-dark(var(--slate-09), var(--slate-01))` | Popover panel text colour |
-| `--display-tooltip-popover-background-colour` | `light-dark(var(--slate-00), var(--slate-07))` | Popover panel background |
+| `--display-tooltip-popover-outline-colour` | `var(--slate-02)` | Popover panel outline (border) colour |
+| `--display-tooltip-popover-text-colour` | `var(--slate-09)` | Popover panel text colour |
+| `--display-tooltip-popover-background-colour` | `var(--slate-00)` | Popover panel background |
 | `--display-tooltip-popover-border-radius` | `0.8rem` | Popover panel corner radius |
-| `--display-tooltip-popover-shadow` | `light-dark(0 0.4rem 1.6rem rgba(0,0,0,.12), 0 0.4rem 1.6rem rgba(0,0,0,.5))` | Popover panel elevation shadow |
+| `--display-tooltip-popover-shadow` | `0 0.4rem 1.6rem rgba(0,0,0,.12)` | Popover panel elevation shadow |
 | `--display-tooltip-popover-offset` | `0.1rem` | Gap between the trigger and the popover panel |
-| `--display-tooltip-close-button-colour` | `light-dark(var(--slate-09), var(--slate-01))` | Close button text colour (used by `DisplayTooltipDefined`) |
+| `--display-tooltip-close-button-colour` | `var(--slate-09)` | Close button text colour (used by `DisplayTooltipDefined`) |
 | `--display-tooltip-close-button-border-width` | `0.1rem` | Close button border width |
-| `--display-tooltip-close-button-border-colour` | `light-dark(var(--slate-03), var(--slate-06))` | Close button border colour |
+| `--display-tooltip-close-button-border-colour` | `var(--slate-03)` | Close button border colour |
 | `--display-tooltip-close-button-outline-width` | `0.1rem` | Close button outline width |
 | `--display-tooltip-close-button-outline-colour` | `transparent` | Close button outline colour at rest (no permanent ring) |
-| `--display-tooltip-close-button-border-colour-hover` | `light-dark(var(--slate-06), var(--slate-03))` | Close button border colour on hover/focus |
-| `--display-tooltip-close-button-outline-colour-hover` | `light-dark(var(--slate-06), var(--slate-03))` | Close button outline colour on hover/focus |
+| `--display-tooltip-close-button-border-colour-hover` | `var(--slate-06)` | Close button border colour on hover/focus |
+| `--display-tooltip-close-button-outline-colour-hover` | `var(--slate-06)` | Close button outline colour on hover/focus |
 | `--display-tooltip-close-button-padding` | `0.4rem 1rem` | Close button padding |
 
 ```css