srcdev-nuxt-components 9.1.42 → 9.1.43

package/.claude/settings.json

@@ -26,7 +26,9 @@
       "Bash(node -e ':*)",
       "Bash(git ls-tree *)",
       "Bash(node -p \"require\\('./package.json'\\).version\")",
-      "Bash(git status *)"
+      "Bash(git status *)",
+      "Bash(cp /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/data-grid.md /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/auto-grid.md)",
+      "Bash(rm /Users/simoncornforth/websites/nuxt-components/.claude/skills/components/data-grid.md)"
     ],
     "additionalDirectories": []
   }

package/.claude/skills/components/{data-grid.md → auto-grid.md}

@@ -1,8 +1,8 @@
-# DataGrid Component
+# AutoGrid Component
 
 ## Overview
 
-`DataGrid` is a responsive auto-fit CSS grid wrapper. It renders whatever named slots the consumer provides, auto-fitting columns to a minimum of `250px` each. Column count and gap are controlled via CSS custom properties, making layout adjustments a single-line style override rather than a prop change.
+`AutoGrid` is a responsive auto-fit CSS grid wrapper. It renders whatever named slots the consumer provides, auto-fitting columns to a minimum of `250px` each. Column count and gap are controlled via CSS custom properties, making layout adjustments a single-line style override rather than a prop change.
 
 ---
 
@@ -11,21 +11,21 @@
 Pass any number of named slots — the component renders each one in document order inside the grid.
 
 ```vue
-<DataGrid>
+<AutoGrid>
   <template #item-1><StatCard label="Revenue" value="£24,500" /></template>
   <template #item-2><StatCard label="Clients" value="142" /></template>
   <template #item-3><StatCard label="Bookings" value="38" /></template>
-</DataGrid>
+</AutoGrid>
 ```
 
 When filling from a data array, use a dynamic slot name in a `v-for`:
 
 ```vue
-<DataGrid>
+<AutoGrid>
   <template v-for="(item, i) in stats" #[`item-${i}`] :key="i">
     <StatCard :label="item.label" :value="item.value" />
   </template>
-</DataGrid>
+</AutoGrid>
 ```
 
 ---
@@ -34,10 +34,10 @@ When filling from a data array, use a dynamic slot name in a `v-for`:
 
 > **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
 
-| Prop (template form) | Type | Default | Notes |
-|---|---|---|---|
-| `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | Use a semantic tag for page landmark regions. |
-| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra CSS classes on the root element. |
+| Prop (template form)       | Type                                        | Default | Notes                                         |
+| -------------------------- | ------------------------------------------- | ------- | --------------------------------------------- |
+| `tag`                      | `"div" \| "section" \| "article" \| "main"` | `"div"` | Use a semantic tag for page landmark regions. |
+| `:style-class-passthrough` | `string \| string[]`                        | `[]`    | Extra CSS classes on the root element.        |
 
 ---
 
@@ -45,25 +45,27 @@ When filling from a data array, use a dynamic slot name in a `v-for`:
 
 Override these via `style` attribute or a `styleClassPassthrough` class in a consuming `<style>` block.
 
-| Property | Default | Notes |
-|---|---|---|
-| `--data-grid-columns` | `repeat(auto-fit, minmax(250px, 1fr))` | Full `grid-template-columns` value. Override to fix column count or change min width. |
-| `--data-grid-gap` | `1rem` | Grid gap between items. |
+| Property                  | Default  | Notes                                                                                    |
+| ------------------------- | -------- | ---------------------------------------------------------------------------------------- |
+| `--auto-grid-min-col-size` | `250px` | Minimum column width; browser auto-fits as many columns as will fit.                    |
+| `--auto-grid-gap`          | `1rem`  | Grid gap between items.                                                                  |
 
 ### Fixed column count
 
+Override `grid-template-columns` directly — there is no single token for this:
+
 ```vue
-<DataGrid style="--data-grid-columns: repeat(3, 1fr); --data-grid-gap: 2.4rem;">
+<AutoGrid style="grid-template-columns: repeat(3, 1fr); --auto-grid-gap: 2.4rem;">
   ...
-</DataGrid>
+</AutoGrid>
 ```
 
 ### Narrower minimum item width
 
 ```vue
-<DataGrid style="--data-grid-columns: repeat(auto-fit, minmax(180px, 1fr));">
+<AutoGrid style="--auto-grid-min-col-size: 180px;">
   ...
-</DataGrid>
+</AutoGrid>
 ```
 
 ---
@@ -73,7 +75,7 @@ Override these via `style` attribute or a `styleClassPassthrough` class in a con
 ### Stat cards (default auto-fit)
 
 ```vue
-<DataGrid>
+<AutoGrid>
   <template #revenue>
     <div class="stat-card">
       <span class="stat-card-label">Revenue</span>
@@ -86,17 +88,17 @@ Override these via `style` attribute or a `styleClassPassthrough` class in a con
       <span class="stat-card-value">142</span>
     </div>
   </template>
-</DataGrid>
+</AutoGrid>
 ```
 
 ### Semantic section with auto aria-labelledby
 
 ```vue
-<DataGrid tag="section">
+<AutoGrid tag="section">
   <!-- aria-labelledby is wired automatically via useAriaLabelledById -->
   <template #item-1><div>Item 1</div></template>
   <template #item-2><div>Item 2</div></template>
-</DataGrid>
+</AutoGrid>
 ```
 
 ### Data-driven grid
@@ -105,20 +107,20 @@ Override these via `style` attribute or a `styleClassPassthrough` class in a con
 <script setup lang="ts">
 const stats = [
   { id: "revenue", label: "Revenue", value: "£24,500" },
-  { id: "clients", label: "Clients",  value: "142" },
+  { id: "clients", label: "Clients", value: "142" },
   { id: "bookings", label: "Bookings", value: "38" },
 ];
 </script>
 
 <template>
-  <DataGrid>
+  <AutoGrid>
     <template v-for="stat in stats" #[stat.id] :key="stat.id">
       <div class="stat-card">
         <span class="stat-card-label">{{ stat.label }}</span>
         <span class="stat-card-value">{{ stat.value }}</span>
       </div>
     </template>
-  </DataGrid>
+  </AutoGrid>
 </template>
 ```
 
@@ -137,19 +139,19 @@ See [component-aria-landmark.md](../component-aria-landmark.md) for the full lan
 ## Local style override scaffold
 
 ```vue
-<DataGrid :style-class-passthrough="['my-data-grid']">
+<AutoGrid :style-class-passthrough="['my-auto-grid']">
   ...
-</DataGrid>
+</AutoGrid>
 
 <style>
-/* ─── DataGrid local overrides ──────────────────────────────────────
+/* ─── AutoGrid local overrides ──────────────────────────────────────
    Use CSS custom properties for layout, not utility classes.
    Delete this block if no overrides are needed.
    ─────────────────────────────────────────────────────────────────── */
-.data-grid {
-  &.my-data-grid {
-    --data-grid-columns: repeat(auto-fit, minmax(200px, 1fr));
-    --data-grid-gap: 2rem;
+.auto-grid {
+  &.my-auto-grid {
+    --auto-grid-min-col-size: 200px;
+    --auto-grid-gap: 2rem;
   }
 }
 </style>
@@ -163,5 +165,5 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 
 - Auto-imported in Nuxt — no manual import needed.
 - Slot names can be anything — semantic (`#revenue`) or indexed (`#item-0`). Document order determines render order.
-- `--data-grid-columns` accepts any valid `grid-template-columns` value, including named tracks and `subgrid`.
-- The component does not impose a column count — `auto-fit` with `minmax` means the browser decides. Use `repeat(N, 1fr)` in `--data-grid-columns` to fix the count.
+- `--auto-grid-min-col-size` controls the minimum column width; `auto-fit` fills as many columns as will fit.
+- To fix the column count, override `grid-template-columns` directly (e.g. `style="grid-template-columns: repeat(3, 1fr)"`) — there is no single token for this.

package/.claude/skills/css-animation-utilities.md

@@ -0,0 +1,87 @@
+# CSS Animation Utilities
+
+## Overview
+
+Scroll-driven animation utility classes bundled with the layer. Apply a class to any element to get a CSS-only, scroll-linked animation — no JavaScript required. All utilities use the [CSS Scroll-Driven Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) spec (`animation-timeline: view()`).
+
+**Browser support**: Chrome 115+, Firefox 110+, Safari 18+. No polyfill exists — use `@supports` for graceful degradation where needed.
+
+All utilities are wrapped in `@media (prefers-reduced-motion: no-preference)` — animations are automatically disabled for users who prefer reduced motion.
+
+## Available classes
+
+### `.animation-scroller-x`
+
+Scales and fades items relative to their position in a **horizontal scroll container** (carousel, horizontal list). Items at the edges are small and faint; items at the centre are full size and opaque.
+
+```css
+animation-timeline: view(x);
+```
+
+| Position | `opacity` | `scale` |
+|---|---|---|
+| Edges (0 %, 100 %) | 0.25 | 0.5 |
+| Centre (35 %–65 %) | 1 | 1 |
+
+#### Usage
+
+```html
+<!-- Scrollable container — overflow-x must be auto or scroll -->
+<div class="carousel-track" style="overflow-x: auto; display: flex;">
+  <div class="animation-scroller-x">Item 1</div>
+  <div class="animation-scroller-x">Item 2</div>
+  <div class="animation-scroller-x">Item 3</div>
+</div>
+```
+
+The animation is driven by the element's position inside its nearest scrollport on the x-axis. Add `.animation-scroller-x` to each **child** — not the container.
+
+---
+
+### `.entry-zoom-reveal`
+
+Fades and zooms an element in as it scrolls into the vertical viewport (bottom 30 % inset to top 5 %).
+
+```html
+<div class="entry-zoom-reveal">Content revealed on scroll</div>
+```
+
+- `fill: both` — element stays hidden before entry, visible after exit
+
+---
+
+### `.entry-slide-in`
+
+Slides an element up from 200 px below as it scrolls into view.
+
+```html
+<div class="entry-slide-in">Slides up on scroll</div>
+```
+
+---
+
+### `.entry-exit-blur`
+
+Blurs an element as it enters and exits the vertical viewport; sharp in the centre (45 %–55 %).
+
+```html
+<div class="entry-exit-blur">Sharp in view, blurred at edges</div>
+```
+
+---
+
+### `.auto-rotate`
+
+Rotates an element 0 → 360 ° as it scrolls through the vertical viewport.
+
+```html
+<div class="auto-rotate">
+  <img src="/logo.svg" alt="" />
+</div>
+```
+
+## Notes
+
+- All classes use `animation-timeline: view()` (vertical) **except** `.animation-scroller-x` which uses `view(x)`.
+- The `scroller` keyframe name used by `.animation-scroller-x` is global — avoid re-declaring `@keyframes scroller` in your own CSS.
+- Utility classes are included automatically when you extend the layer — no explicit import needed in your app.

package/.claude/skills/index.md

@@ -34,6 +34,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── component-local-style-override.md — styleClassPassthrough + scoped style block for per-usage visual customisation
 ├── component-prop-driven-container-layout.md — vary CSS grid layout inside @container queries using data-* attribute selectors
 ├── css-grid-max-width-gutters.md             — cap a centre grid column width by growing gutters, with start/center alignment variants
+├── css-animation-utilities.md                — scroll-driven animation utility classes: scroller-x (carousel), entry-zoom-reveal, entry-slide-in, entry-exit-blur, auto-rotate
 ├── component-aria-landmark.md        — useAriaLabelledById composable: aria-labelledby for section/main/article/aside tags
 ├── component-export-types.md         — move inline component types to app/types/components/ barrel for consumer imports
 ├── component-inline-action-button.md — InputButtonCore variant="inline" pattern for buttons embedded in custom input wrappers
@@ -76,7 +77,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-qr-code.md      — DisplayQrCode: QR code SVG from a string value, colour/size/variant/radius props, currentColor default
     ├── capture-qr-code.md      — CaptureQrCode: live camera scanner, error state, visibility/route/KeepAlive lifecycle, media stream cleanup
     ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
-    ├── data-grid.md            — DataGrid: auto-fit responsive grid, $slots iteration, --data-grid-columns/gap tokens, semantic tag + aria
+    ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-min-col-size/gap tokens, semantic tag + aria
     ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
     └── samaritan-prompt-mixed.md — SamaritanPromptMixed: animated text prompt, typewriter/word-pulse effects, MessageConfig API, aria-live accessibility, CSS tokens
 ```

package/app/assets/styles/setup/06.utility-classes/animations/_animation-scroller-x.css

@@ -0,0 +1,21 @@
+@keyframes scroller {
+  0%,
+  100% {
+    opacity: 0.25;
+    scale: 0.5;
+  }
+  35%,
+  65% {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+/* Used to scroll scale elements when scrolling x-axis like a carousel. */
+
+@media (prefers-reduced-motion: no-preference) {
+  .animation-scroller-x {
+    animation: scroller linear both;
+    animation-timeline: view(x);
+  }
+}

package/app/assets/styles/setup/06.utility-classes/animations/_auto-rotate.css

@@ -7,7 +7,9 @@
   }
 }
 
-.auto-rotate {
-  animation: autoRotateAnimation;
-  animation-timeline: view();
+@media (prefers-reduced-motion: no-preference) {
+  .auto-rotate {
+    animation: autoRotateAnimation;
+    animation-timeline: view();
+  }
 }

package/app/assets/styles/setup/06.utility-classes/animations/_entry-exit-blur.css

@@ -1,6 +1,8 @@
-.entry-exit-blur {
-  animation: entryExitBlurAnimation linear both;
-  animation-timeline: view();
+@media (prefers-reduced-motion: no-preference) {
+  .entry-exit-blur {
+    animation: entryExitBlurAnimation linear both;
+    animation-timeline: view();
+  }
 }
 @keyframes entryExitBlurAnimation {
   0% {

package/app/assets/styles/setup/06.utility-classes/animations/_entry-zoom-reveal.css

@@ -9,7 +9,9 @@
   }
 }
 
-.entry-zoom-reveal {
-  animation: entryZoomRevealAnimation both;
-  animation-timeline: view(70% 5%);
+@media (prefers-reduced-motion: no-preference) {
+  .entry-zoom-reveal {
+    animation: entryZoomRevealAnimation both;
+    animation-timeline: view(70% 5%);
+  }
 }

package/app/assets/styles/setup/06.utility-classes/animations/index.css

@@ -1,4 +1,5 @@
-@import './_entry-zoom-reveal';
-@import './_entry-slide-in';
-@import './_entry-exit-blur';
-@import './_auto-rotate';
+@import "./_entry-zoom-reveal";
+@import "./_entry-slide-in";
+@import "./_entry-exit-blur";
+@import "./_auto-rotate";
+@import "./_animation-scroller-x.css";

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

@@ -0,0 +1,57 @@
+<template>
+  <component :is="tag" class="auto-grid" :class="[elementClasses, { 'is-responsive': isResponsive }]" :aria-labelledby="ariaLabelledby">
+    <slot v-for="(_, name) in $slots" :key="name" :name="name"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "main";
+  isResponsive?: boolean;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  isResponsive: false,
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { ariaLabelledby } = useAriaLabelledById(props.tag);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .auto-grid {
+    --auto-grid-min-col-size-small: 250px;
+    --auto-grid-min-col-size-default: 300px;
+    --auto-grid-min-col-size-large: 350px;
+    --auto-grid-gap: 1rem;
+
+    display: grid;
+    gap: var(--auto-grid-gap);
+
+    &:not(.is-responsive) {
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default), 100%), 1fr));
+    }
+
+    &.is-responsive {
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-small), 100%), 1fr));
+
+      @container (width >= 768px) {
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-default), 100%), 1fr));
+      }
+
+      @container (width >= 1024px) {
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min-col-size-large), 100%), 1fr));
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/grids/data-grid/stories/{DataGrid.stories.ts → AutoGrid.stories.ts}

@@ -1,15 +1,53 @@
+import { computed } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import DataGridComponent from "../DataGrid.vue";
+import AutoGridComponent from "../AutoGrid.vue";
 
-const meta: Meta<typeof DataGridComponent> = {
-  title: "Atoms/Grids/DataGrid",
-  component: DataGridComponent,
+interface AutoGridArgs {
+  tag: "div" | "section" | "article" | "main";
+  isResponsive: boolean;
+  styleClassPassthrough: string[];
+  minColSizeSmall: string;
+  minColSizeDefault: string;
+  minColSizeLarge: string;
+  gap: string;
+}
+
+const meta: Meta<AutoGridArgs> = {
+  title: "Atoms/Grids/AutoGrid",
+  component: AutoGridComponent,
   argTypes: {
     tag: {
       control: { type: "select" },
       options: ["div", "section", "article", "main"],
       description: "HTML tag to render as",
-      table: { category: "Semantic" },
+      table: { category: "Props" },
+    },
+    isResponsive: {
+      control: { type: "boolean" },
+      description:
+        "Enables container-query breakpoints: `--auto-grid-min-col-size-small` below 768px, default 768px+, large 1024px+. Requires a `container-type: inline-size` ancestor.",
+      table: { category: "Props" },
+    },
+    minColSizeSmall: {
+      control: { type: "text" },
+      description: "`--auto-grid-min-col-size-small` — minimum column width in responsive mode below 768px",
+      table: { category: "CSS Tokens" },
+    },
+    minColSizeDefault: {
+      control: { type: "text" },
+      description:
+        "`--auto-grid-min-col-size-default` — controls column width when `isResponsive` is **off**. Also used as the mid-size step in responsive mode (768px+).",
+      table: { category: "CSS Tokens" },
+    },
+    minColSizeLarge: {
+      control: { type: "text" },
+      description: "`--auto-grid-min-col-size-large` — minimum column width in responsive mode 1024px+",
+      table: { category: "CSS Tokens" },
+    },
+    gap: {
+      control: { type: "text" },
+      description: "`--auto-grid-gap` — gap between grid items",
+      table: { category: "CSS Tokens" },
     },
     styleClassPassthrough: {
       table: { disable: true },
@@ -17,13 +55,18 @@ const meta: Meta<typeof DataGridComponent> = {
   },
   args: {
     tag: "div",
+    isResponsive: false,
+    minColSizeSmall: "250px",
+    minColSizeDefault: "300px",
+    minColSizeLarge: "350px",
+    gap: "1rem",
     styleClassPassthrough: [],
   },
   parameters: {
     docs: {
       description: {
         component:
-          "A responsive auto-fit grid container. Uses CSS custom properties `--data-grid-columns` and `--data-grid-gap` to control layout. Renders named slots provided by the consumer.",
+          "A responsive auto-fit grid container. Override `--auto-grid-min-col-size-default` and `--auto-grid-gap` to control layout. Enable `isResponsive` for container-query-based column steps using `--auto-grid-min-col-size-small` and `--auto-grid-min-col-size-large`.",
       },
     },
   },
@@ -33,22 +76,24 @@ export default meta;
 
 const cardStyle =
   "padding: 2.4rem; background: white; border-radius: 0.8rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 0.8rem;";
-const labelStyle = "font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;";
+const labelStyle =
+  "font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;";
 const valueStyle = "font-size: 2.4rem; font-weight: 700; color: #111827;";
 
-interface DataGridArgs {
-  tag: "div" | "section" | "article" | "main";
-  styleClassPassthrough: string[];
-}
-
-const Template: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+const Template: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
-    return { args };
+    const cssTokenStyle = computed(() => ({
+      "--auto-grid-min-col-size-small": args.minColSizeSmall,
+      "--auto-grid-min-col-size-default": args.minColSizeDefault,
+      "--auto-grid-min-col-size-large": args.minColSizeLarge,
+      "--auto-grid-gap": args.gap,
+    }));
+    return { args, cssTokenStyle };
   },
   template: `
-    <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+    <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+      <AutoGridComponent :tag="args.tag" :is-responsive="args.isResponsive" :style="cssTokenStyle" :style-class-passthrough="args.styleClassPassthrough">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -73,7 +118,7 @@ const Template: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">4.9</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });
@@ -82,7 +127,18 @@ export const Default = Template.bind({});
 Default.parameters = {
   docs: {
     description: {
-      story: "Default grid with four stat cards. Columns auto-fit to available space at a minimum of 250px each.",
+      story: "Default grid with four stat cards. Columns auto-fit to available space at a minimum of 300px each.",
+    },
+  },
+};
+
+export const Responsive = Template.bind({});
+Responsive.args = { isResponsive: true };
+Responsive.parameters = {
+  docs: {
+    description: {
+      story:
+        "With `isResponsive` enabled, column width steps through three sizes based on container width. Resize the story viewport to see the breakpoints in action.",
     },
   },
 };
@@ -91,10 +147,10 @@ export const TwoItems = Template.bind({});
 TwoItems.storyName = "Two Items";
 TwoItems.decorators = [
   () => ({
-    components: { DataGridComponent },
+    components: { AutoGridComponent },
     template: `
-      <div style="padding: 3.2rem; background: #f9fafb;">
-        <DataGridComponent>
+      <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+        <AutoGridComponent>
           <template #item-1>
             <div style="${cardStyle}">
               <span style="${labelStyle}">Revenue</span>
@@ -107,7 +163,7 @@ TwoItems.decorators = [
               <span style="${valueStyle}">142</span>
             </div>
           </template>
-        </DataGridComponent>
+        </AutoGridComponent>
       </div>
     `,
   }),
@@ -116,15 +172,15 @@ TwoItems.parameters = {
   docs: { description: { story: "Grid with two items — auto-fit spreads them to fill available columns." } },
 };
 
-export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const NarrowContainer: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 3.2rem; background: #f9fafb;">
-      <div style="max-width: 400px;">
-        <DataGridComponent :tag="args.tag">
+      <div style="max-width: 400px; container-type: inline-size;">
+        <AutoGridComponent :tag="args.tag">
           <template #item-1>
             <div style="${cardStyle}">
               <span style="${labelStyle}">Revenue</span>
@@ -143,7 +199,7 @@ export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
               <span style="${valueStyle}">38</span>
             </div>
           </template>
-        </DataGridComponent>
+        </AutoGridComponent>
       </div>
     </div>
   `,
@@ -151,19 +207,19 @@ export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
 NarrowContainer.parameters = {
   docs: {
     description: {
-      story: "In a 400px container the auto-fit columns stack to a single column once items fall below 250px.",
+      story: "In a 400px container the auto-fit columns stack to a single column once items fall below 300px.",
     },
   },
 };
 
-export const CustomColumns: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const CustomColumns: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent style="--data-grid-columns: repeat(3, 1fr); --data-grid-gap: 2.4rem;" :tag="args.tag">
+      <AutoGridComponent style="grid-template-columns: repeat(3, 1fr); --auto-grid-gap: 2.4rem;" :tag="args.tag">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -182,7 +238,7 @@ export const CustomColumns: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">38</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });
@@ -190,19 +246,19 @@ CustomColumns.parameters = {
   docs: {
     description: {
       story:
-        "Override `--data-grid-columns` and `--data-grid-gap` via inline style to force a fixed 3-column layout with wider gaps.",
+        "Override `grid-template-columns` and `--auto-grid-gap` via inline style to force a fixed 3-column layout with wider gaps.",
     },
   },
 };
 
-export const SemanticSection: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const SemanticSection: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
-    <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent tag="section">
+    <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+      <AutoGridComponent tag="section">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -221,7 +277,7 @@ export const SemanticSection: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">38</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });

package/app/components/01.atoms/grids/data-grid/tests/{DataGrid.spec.ts → AutoGrid.spec.ts}

@@ -1,26 +1,27 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import DataGrid from "../DataGrid.vue";
+import AutoGrid from "../AutoGrid.vue";
 
-describe("DataGrid", () => {
+describe("AutoGrid", () => {
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Snapshots ───────────────────────────────────────────────────────────
 
   it("renders correct HTML structure (default props)", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure (all props and slots set)", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: {
         tag: "section",
+        isResponsive: true,
         styleClassPassthrough: ["custom-class"],
       },
       slots: {
@@ -35,58 +36,77 @@ describe("DataGrid", () => {
   // ─── Root element ────────────────────────────────────────────────────────
 
   it("renders a <div> as the root element by default", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
-  it("always has the data-grid class", async () => {
-    const wrapper = await mountSuspended(DataGrid);
-    expect(wrapper.classes()).toContain("data-grid");
+  it("always has the auto-grid class", async () => {
+    const wrapper = await mountSuspended(AutoGrid);
+    expect(wrapper.classes()).toContain("auto-grid");
   });
 
   // ─── Tag prop ────────────────────────────────────────────────────────────
 
   it("renders a <section> when tag is section", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "section" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "section" } });
     expect(wrapper.element.tagName).toBe("SECTION");
   });
 
   it("renders an <article> when tag is article", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "article" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "article" } });
     expect(wrapper.element.tagName).toBe("ARTICLE");
   });
 
   it("renders a <main> when tag is main", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "main" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "main" } });
     expect(wrapper.element.tagName).toBe("MAIN");
   });
 
   // ─── Aria ─────────────────────────────────────────────────────────────────
 
   it("does not set aria-labelledby when tag is div", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "div" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "div" } });
     expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
   });
 
   it("sets aria-labelledby when tag is section", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "section" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "section" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("sets aria-labelledby when tag is article", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "article" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "article" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("sets aria-labelledby when tag is main", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "main" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "main" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
+  // ─── isResponsive ────────────────────────────────────────────────────────
+
+  it("does not have is-responsive class by default", async () => {
+    const wrapper = await mountSuspended(AutoGrid);
+    expect(wrapper.classes()).not.toContain("is-responsive");
+  });
+
+  it("adds is-responsive class when isResponsive is true", async () => {
+    const wrapper = await mountSuspended(AutoGrid, { props: { isResponsive: true } });
+    expect(wrapper.classes()).toContain("is-responsive");
+  });
+
+  it("removes is-responsive class when isResponsive changes to false", async () => {
+    const wrapper = await mountSuspended(AutoGrid, { props: { isResponsive: true } });
+    expect(wrapper.classes()).toContain("is-responsive");
+    await wrapper.setProps({ isResponsive: false });
+    expect(wrapper.classes()).not.toContain("is-responsive");
+  });
+
   // ─── Slots ───────────────────────────────────────────────────────────────
 
   it("renders a named slot", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       slots: { "item-1": "<div class='card'>Card 1</div>" },
     });
     expect(wrapper.find(".card").exists()).toBe(true);
@@ -94,7 +114,7 @@ describe("DataGrid", () => {
   });
 
   it("renders multiple named slots", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       slots: {
         "item-1": "<div class='card-1'>Card 1</div>",
         "item-2": "<div class='card-2'>Card 2</div>",
@@ -107,21 +127,21 @@ describe("DataGrid", () => {
   });
 
   it("renders no slot content when no slots are provided", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.text()).toBe("");
   });
 
   // ─── styleClassPassthrough ───────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string to the root", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: "my-grid" },
     });
     expect(wrapper.classes()).toContain("my-grid");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: ["my-grid", "mbe-32"] },
     });
     expect(wrapper.classes()).toContain("my-grid");
@@ -129,7 +149,7 @@ describe("DataGrid", () => {
   });
 
   it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: ["original"] },
     });
     expect(wrapper.classes()).toContain("original");

package/app/components/01.atoms/grids/data-grid/tests/__snapshots__/AutoGrid.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AutoGrid > renders correct HTML structure (all props and slots set) 1`] = `
+"<section class="auto-grid custom-class is-responsive" aria-labelledby="v-0-0">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</section>"
+`;
+
+exports[`AutoGrid > renders correct HTML structure (default props) 1`] = `"<div class="auto-grid"></div>"`;

package/app/components/01.atoms/grids/data-grid/tests/__snapshots__/DataGrid.spec.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DataGrid > renders correct HTML structure (all props and slots set) 1`] = `
-"<section class="data-grid custom-class" aria-labelledby="v-0-0">
+exports[`AutoGrid > renders correct HTML structure (all props and slots set) 1`] = `
+"<section class="auto-grid custom-class" aria-labelledby="v-0-0">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
 </section>"
 `;
 
-exports[`DataGrid > renders correct HTML structure (default props) 1`] = `"<div class="data-grid"></div>"`;
+exports[`AutoGrid > renders correct HTML structure (default props) 1`] = `"<div class="auto-grid"></div>"`;

package/app/pages/auto-grid.vue

@@ -0,0 +1,311 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-32']">
+          <h1 class="page-heading-1">AutoGrid</h1>
+          <p class="page-body-normal">
+            Responsive auto-fit CSS grid wrapper. Columns auto-fit to a minimum width; when
+            <code>is-responsive</code> is enabled, the minimum shifts at container breakpoints via
+            <code>@container</code> queries.
+          </p>
+        </LayoutRow>
+
+        <div v-if="isDev" class="qa-panel">
+          <details class="qa-panel__details">
+            <summary class="qa-panel__summary">
+              <span class="qa-panel__title">QA — AutoGrid</span>
+              <code class="qa-panel__status">
+                tag:{{ qaTag }} · responsive:{{ qaIsResponsive ? "on" : "off" }} · small:{{ qaMinColSizeSmall }} · default:{{ qaMinColSizeDefault }} · large:{{ qaMinColSizeLarge }} · gap:{{ qaGap }}
+              </code>
+            </summary>
+            <div class="qa-panel__body">
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">tag</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in tagOptions"
+                    :key="opt"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaTag === opt }"
+                    @click="qaTag = opt"
+                  >{{ opt }}</button>
+                </div>
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">is-responsive</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="opt in [true, false]"
+                    :key="String(opt)"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaIsResponsive === opt }"
+                    @click="qaIsResponsive = opt"
+                  >{{ opt ? "on" : "off" }}</button>
+                </div>
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">min-col-size-small</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in sizePresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaMinColSizeSmall === preset }"
+                    @click="qaMinColSizeSmall = preset"
+                  >{{ preset }}</button>
+                </div>
+                <input v-model="qaMinColSizeSmall" placeholder="e.g. 200px" class="qa-panel__input" />
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">min-col-size-default</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in sizePresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaMinColSizeDefault === preset }"
+                    @click="qaMinColSizeDefault = preset"
+                  >{{ preset }}</button>
+                </div>
+                <input v-model="qaMinColSizeDefault" placeholder="e.g. 300px" class="qa-panel__input" />
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">min-col-size-large</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in sizePresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaMinColSizeLarge === preset }"
+                    @click="qaMinColSizeLarge = preset"
+                  >{{ preset }}</button>
+                </div>
+                <input v-model="qaMinColSizeLarge" placeholder="e.g. 350px" class="qa-panel__input" />
+              </div>
+
+              <div class="qa-panel__group">
+                <span class="qa-panel__label">gap</span>
+                <div class="qa-panel__chips">
+                  <button
+                    v-for="preset in gapPresets"
+                    :key="preset"
+                    class="qa-panel__chip"
+                    :class="{ 'is-active': qaGap === preset }"
+                    @click="qaGap = preset"
+                  >{{ preset }}</button>
+                </div>
+                <input v-model="qaGap" placeholder="e.g. 2rem" class="qa-panel__input" />
+              </div>
+
+            </div>
+          </details>
+        </div>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-32']">
+          <div class="auto-grid-demo-container">
+            <AutoGrid
+              :tag="qaTag"
+              :is-responsive="qaIsResponsive"
+              :min-col-size-small="qaMinColSizeSmall"
+              :min-col-size-default="qaMinColSizeDefault"
+              :min-col-size-large="qaMinColSizeLarge"
+              :style="qaStyle"
+            >
+              <template v-for="card in statCards" #[card.id] :key="card.id">
+                <div class="stat-card">
+                  <span class="stat-card__label">{{ card.label }}</span>
+                  <span class="stat-card__value">{{ card.value }}</span>
+                </div>
+              </template>
+            </AutoGrid>
+          </div>
+        </LayoutRow>
+
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: false });
+
+useHead({
+  title: "AutoGrid",
+  meta: [{ name: "description", content: "AutoGrid component demo" }],
+  bodyAttrs: { class: "auto-grid-page" },
+});
+
+const isDev = import.meta.dev;
+
+const tagOptions = ["div", "section", "article", "main"] as const;
+const qaTag = ref<"div" | "section" | "article" | "main">("div");
+const qaIsResponsive = ref(false);
+const qaMinColSizeSmall = ref("250px");
+const qaMinColSizeDefault = ref("300px");
+const qaMinColSizeLarge = ref("350px");
+const qaGap = ref("1rem");
+
+const sizePresets = ["150px", "200px", "250px", "300px", "350px", "400px"];
+const gapPresets = ["0.5rem", "1rem", "1.6rem", "2.4rem", "3.2rem"];
+
+const qaStyle = computed(() => ({
+  "--auto-grid-min-col-size-small": qaMinColSizeSmall.value,
+  "--auto-grid-min-col-size-default": qaMinColSizeDefault.value,
+  "--auto-grid-min-col-size-large": qaMinColSizeLarge.value,
+  "--auto-grid-gap": qaGap.value,
+}));
+
+const statCards = [
+  { id: "item-1", label: "Revenue", value: "£24,500" },
+  { id: "item-2", label: "Clients", value: "142" },
+  { id: "item-3", label: "Bookings", value: "38" },
+  { id: "item-4", label: "Avg. Rating", value: "4.9" },
+  { id: "item-5", label: "New Users", value: "76" },
+  { id: "item-6", label: "Retention", value: "91%" },
+];
+</script>
+
+<style lang="css">
+.auto-grid-page {
+  code {
+    font-family: monospace;
+    font-size: 0.9em;
+    background: var(--slate-02);
+    padding: 0.1em 0.4em;
+    border-radius: 0.3rem;
+  }
+
+  .auto-grid-demo-container {
+    container-type: inline-size;
+  }
+
+  .stat-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    padding: 2.4rem;
+    background: white;
+    border-radius: 0.8rem;
+    box-shadow: 0 2px 8px oklch(0% 0 0 / 0.08);
+  }
+
+  .stat-card__label {
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--slate-08, #6b7280);
+  }
+
+  .stat-card__value {
+    font-size: 2.4rem;
+    font-weight: 700;
+    color: var(--slate-12, #111827);
+  }
+
+  /* ── QA Panel ──────────────────────────────────────────────────── */
+
+  .qa-panel {
+    background: oklch(15% 0 0);
+    color: white;
+    font-size: 1.3rem;
+  }
+
+  .qa-panel__details {
+    padding: 1rem 2rem;
+  }
+
+  .qa-panel__summary {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker { display: none; }
+  }
+
+  .qa-panel__title {
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .qa-panel__status {
+    font-family: monospace;
+    font-size: 1.2rem;
+    background: oklch(0% 0 0 / 0.3);
+    padding: 0.2rem 0.8rem;
+    border-radius: 0.4rem;
+    user-select: text;
+    cursor: text;
+  }
+
+  .qa-panel__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.4rem;
+    padding-block: 1.2rem 0.4rem;
+  }
+
+  .qa-panel__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .qa-panel__label {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.55;
+  }
+
+  .qa-panel__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  .qa-panel__chip {
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: white;
+    background: oklch(0% 0 0 / 0.25);
+    border: 1px solid oklch(100% 0 0 / 0.18);
+    padding: 0.3rem 1rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    transition: background 0.15s;
+
+    &:hover { background: oklch(0% 0 0 / 0.4); }
+
+    &.is-active {
+      background: oklch(55% 0.18 240);
+      border-color: oklch(55% 0.18 240);
+    }
+  }
+
+  .qa-panel__input {
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: white;
+    background: oklch(0% 0 0 / 0.25);
+    border: 1px solid oklch(100% 0 0 / 0.18);
+    padding: 0.3rem 1rem;
+    border-radius: 0.4rem;
+    width: 18rem;
+
+    &::placeholder { opacity: 0.45; }
+  }
+}
+</style>

package/app/pages/index.vue

@@ -7,6 +7,11 @@
           <NuxtLink class="page-body-normal" to="/grid-stack">GridStack</NuxtLink>
         </LayoutRow>
 
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">AutoGrid</h2>
+          <NuxtLink class="page-body-normal" to="/auto-grid">AutoGrid</NuxtLink>
+        </LayoutRow>
+
         <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1">Nuxt3 Components Layer</h1>
           <p>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.42",
+  "version": "9.1.43",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/app/components/01.atoms/grids/data-grid/DataGrid.vue

@@ -1,39 +0,0 @@
-<template>
-  <component :is="tag" class="data-grid" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
-    <slot v-for="(_, name) in $slots" :key="name" :name="name"></slot>
-  </component>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  tag?: "div" | "section" | "article" | "main";
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  tag: "div",
-  styleClassPassthrough: () => [],
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const { ariaLabelledby } = useAriaLabelledById(props.tag);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => resetElementClasses(props.styleClassPassthrough),
-);
-</script>
-
-<style lang="css">
-@layer components {
-  .data-grid {
-    /* CSS Tockens for @container grid-template-columns */
-    --data-grid-columns: repeat(auto-fit, minmax(250px, 1fr));
-    --data-grid-gap: 1rem;
-
-    display: grid;
-    grid-template-columns: var(--data-grid-columns);
-    gap: var(--data-grid-gap);
-  }
-}
-</style>