srcdev-nuxt-components 9.1.37 → 9.1.39

package/.claude/settings.json

@@ -23,7 +23,10 @@
       "Bash(npm run:*)",
       "Bash(git add:*)",
       "Bash(gh release:*)",
-      "Bash(node -e ':*)"
+      "Bash(node -e ':*)",
+      "Bash(git ls-tree *)",
+      "Bash(node -p \"require\\('./package.json'\\).version\")",
+      "Bash(git status *)"
     ],
     "additionalDirectories": []
   }

package/.claude/skills/components/carousel-flip.md

@@ -0,0 +1,188 @@
+# CarouselFlip
+
+## Overview
+
+A FLIP-animated carousel that reorders items in the DOM using CSS `order` and animates transitions with the FLIP technique (First, Last, Invert, Play). Supports swipe, keyboard navigation, and marker dots. The prev/next buttons and controls bar can be placed in several layouts via a single prop.
+
+---
+
+## Implementation guide
+
+When a dev asks to implement CarouselFlip, work through the following questions before writing any code. Each answer maps directly to a prop or CSS decision. You do not need to ask all questions at once — use context clues where the answer is obvious.
+
+### Step 1 — Data source
+
+Ask: **"Where is the carousel data coming from — a static array, an API, or a Nuxt `useFetch`?"**
+
+- **Static array**: Define `carouselDataIds` directly as a `const`.
+- **API / useFetch**: Derive `carouselDataIds` as a `computed` from the response. Gate the component with `v-if="status === 'success'"` to avoid a flash of empty slots.
+
+```vue
+<!-- API pattern -->
+const { data, status } = await useFetch<MyType>("/api/items");
+const carouselDataIds = computed(() => data.value?.items.map(i => i.id) ?? []);
+
+<CarouselFlip v-if="status === 'success'" :carousel-data-ids="carouselDataIds">
+  <template v-for="item in data.items" :key="item.id" #[item.id]>
+    <!-- slot content -->
+  </template>
+</CarouselFlip>
+```
+
+### Step 2 — Button layout
+
+Ask: **"Where should the prev/next buttons sit?"** Show these options:
+
+| Value | Visual description |
+|---|---|
+| `"sides"` | Buttons float on the left and right edges of the carousel frame, centred vertically — the classic look |
+| `"controls-flanking"` | Buttons move down into the controls row: prev · markers · next |
+| `"controls-grouped-right"` | Markers stretch left, both buttons grouped together at the far right of the controls row |
+| `"overlay"` | Buttons stay on the sides; the markers bar overlays the bottom edge of the carousel frame |
+
+Set via `:button-layout="..."`. Default is `"sides"`.
+
+### Step 3 — Show or hide the markers bar
+
+Ask: **"Do you want the dot/marker navigation bar visible?"**
+
+- **Yes** (default): omit the prop or pass `:show-controls="true"`.
+- **No**: pass `:show-controls="false"`. The element is fully removed from the DOM — no layout space, no keyboard listener.
+
+> If `showControls` is false and `buttonLayout` is `"controls-flanking"` or `"controls-grouped-right"`, the controls row collapses entirely — only the buttons remain. Recommend switching `buttonLayout` to `"sides"` or `"overlay"` in that case.
+
+### Step 4 — Edge peek (overflow)
+
+Ask: **"Should adjacent carousel items peek in from the sides?"**
+
+- **No peek** (default): `:allow-carousel-overflow="false"` — clean, contained look.
+- **Peek visible**: `:allow-carousel-overflow="true"` — items bleed slightly out of the container. Requires CSS custom properties to control how much:
+
+```css
+.my-carousel.carousel-flip {
+  --_carousel-item-track-gap: 16px;
+  --_carousel-item-edge-preview-width: 32px; /* keep at 2× track-gap */
+  --_carousel-container-max-inline-size: 900px;
+}
+```
+
+### Step 5 — Animation style
+
+Ask: **"What animation feel are you going for?"**
+
+| Prop | Effect |
+|---|---|
+| `:use-flip-animation="false"` (default) | Slides — items translate horizontally |
+| `:use-flip-animation="true"` | FLIP reorder — items swap position with a physics-aware delta animation |
+| `:use-spring-effect="true"` | Adds spring easing to FLIP transitions. Requires `var(--spring-easing)` in the theme |
+| `:transition-speed="400"` | Duration in ms. Default `200`. Recommended range: `200`–`1200` |
+
+### Step 6 — Minimal working implementation
+
+Once the above decisions are made, assemble the component:
+
+```vue
+<CarouselFlip
+  :carousel-data-ids="carouselDataIds"
+  :allow-carousel-overflow="true"
+  :transition-speed="600"
+  :use-flip-animation="true"
+  :use-spring-effect="false"
+  button-layout="sides"
+  :show-controls="true"
+  :style-class-passthrough="['my-carousel']"
+>
+  <template v-for="item in items" :key="item.id" #[item.id]>
+    <div class="my-carousel__item">
+      <!-- item content -->
+    </div>
+  </template>
+</CarouselFlip>
+```
+
+### Step 7 — Style the component
+
+Always scope overrides using `styleClassPassthrough` + a page/section wrapper class. Required tokens for a usable carousel:
+
+```css
+.my-carousel.carousel-flip {
+  --_carousel-item-track-gap: 16px;
+  --_carousel-container-max-inline-size: 900px;
+  --_carousel-item-edge-preview-width: 32px; /* 2× track-gap when overflow is on */
+
+  /* Items */
+  .item {
+    border-radius: 1.2rem;
+    overflow: hidden;
+  }
+
+  /* Markers */
+  .btn-marker {
+    width: 10px;
+    height: 10px;
+    border-radius: 100vw;
+    background: oklch(70% 0 0);
+
+    &.active { background: white; }
+  }
+
+  /* Prev/next buttons */
+  .btn-action {
+    padding: 10px;
+    background: oklch(0% 0 0 / 0.4);
+    border: none;
+    border-radius: 100vw;
+    color: white;
+  }
+}
+```
+
+---
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `carouselDataIds` | `string[]` | `[]` | Ordered list of unique IDs — each becomes a named slot |
+| `transitionSpeed` | `number` | `200` | Animation duration in ms |
+| `allowCarouselOverflow` | `boolean` | `false` | Allows peeking items outside the container bounds |
+| `useFlipAnimation` | `boolean` | `false` | Enables FLIP reorder animation on prev/next |
+| `useSpringEffect` | `boolean` | `false` | Uses spring easing (`var(--spring-easing)`) instead of `ease` |
+| `buttonLayout` | `"sides" \| "controls-flanking" \| "controls-grouped-right" \| "overlay"` | `"sides"` | Controls placement of prev/next buttons relative to the carousel frame and controls bar |
+| `showControls` | `boolean` | `true` | Show or hide the markers/controls bar. When `false` the element is removed from the DOM; `controlsContainerRef` becomes null and its keyboard listener detaches automatically |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Classes applied to the root element |
+
+## CSS custom properties
+
+| Property | Purpose |
+|---|---|
+| `--_carousel-item-track-gap` | Gap between carousel items (default `10px`) |
+| `--_carousel-container-max-inline-size` | Max width of the visible carousel window |
+| `--_carousel-item-edge-preview-width` | How much of adjacent items to reveal (edge peek). Keep at `2× --_carousel-item-track-gap` |
+| `--_carousel-display-max-width` | Max width of the whole component inc. controls |
+
+## HTML structure
+
+```text
+section.carousel-flip               ← grid root, data-button-layout="..."
+  div.item-container                ← grid-area: carousel — flex row of items
+    div.item[data-id]               ← one per carouselDataIds entry
+  div.controls-container            ← grid-area: controls — markers bar (v-if="showControls")
+    div.markers-container
+      ul.markers-list
+        li.markers-item
+          button.btn-marker
+  div.buttons-container             ← display: contents by default (transparent to grid)
+    button.btn-action.btn-prev      ← grid-area: prev (row 1, col 1)
+    button.btn-action.btn-next      ← grid-area: next (row 1, col 3)
+```
+
+`buttons-container` uses `display: contents` so `.btn-prev`/`.btn-next` participate directly in the parent grid. In the `controls-grouped-right` variant the component sets `display: flex` on it, making it the grid child instead.
+
+## Notes
+
+- **Opacity fade-in**: The root starts at `opacity: 0` and gets `.mounted` (opacity 1) after `initialSetup()` completes. This prevents a flash of unstyled layout on mount.
+- **z-index**: `.btn-prev`/`.btn-next` have `z-index: 1` to sit above `.item-container` which uses `isolation: isolate` (carousel items are translated and can overlap the button columns).
+- **ResizeObserver**: `initialSetup()` re-runs on resize to recalculate item widths. CSS `translate` on `.item` is driven by the measured `itemWidth` via `v-bind`.
+- **Spring easing**: `useSpringEffect` switches to `var(--spring-easing)`. Make sure this custom property is defined in your theme or global CSS when enabling it.
+- **buttonLayout + showControls combo**: `"controls-flanking"` and `"controls-grouped-right"` place buttons in the controls row. If `showControls` is false that row collapses — use `"sides"` or `"overlay"` instead.

package/.claude/skills/components/data-grid.md

@@ -0,0 +1,167 @@
+# DataGrid 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.
+
+---
+
+## Slot pattern
+
+Pass any number of named slots — the component renders each one in document order inside the grid.
+
+```vue
+<DataGrid>
+  <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>
+```
+
+When filling from a data array, use a dynamic slot name in a `v-for`:
+
+```vue
+<DataGrid>
+  <template v-for="(item, i) in stats" #[`item-${i}`] :key="i">
+    <StatCard :label="item.label" :value="item.value" />
+  </template>
+</DataGrid>
+```
+
+---
+
+## Props reference
+
+> **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. |
+
+---
+
+## CSS custom properties
+
+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. |
+
+### Fixed column count
+
+```vue
+<DataGrid style="--data-grid-columns: repeat(3, 1fr); --data-grid-gap: 2.4rem;">
+  ...
+</DataGrid>
+```
+
+### Narrower minimum item width
+
+```vue
+<DataGrid style="--data-grid-columns: repeat(auto-fit, minmax(180px, 1fr));">
+  ...
+</DataGrid>
+```
+
+---
+
+## Usage examples
+
+### Stat cards (default auto-fit)
+
+```vue
+<DataGrid>
+  <template #revenue>
+    <div class="stat-card">
+      <span class="stat-card-label">Revenue</span>
+      <span class="stat-card-value">£24,500</span>
+    </div>
+  </template>
+  <template #clients>
+    <div class="stat-card">
+      <span class="stat-card-label">Clients</span>
+      <span class="stat-card-value">142</span>
+    </div>
+  </template>
+</DataGrid>
+```
+
+### Semantic section with auto aria-labelledby
+
+```vue
+<DataGrid 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>
+```
+
+### Data-driven grid
+
+```vue
+<script setup lang="ts">
+const stats = [
+  { id: "revenue", label: "Revenue", value: "£24,500" },
+  { id: "clients", label: "Clients",  value: "142" },
+  { id: "bookings", label: "Bookings", value: "38" },
+];
+</script>
+
+<template>
+  <DataGrid>
+    <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>
+</template>
+```
+
+---
+
+## Accessibility
+
+- When `tag` is `section`, `article`, or `main`, `aria-labelledby` is automatically set via `useAriaLabelledById`, pointing to a generated heading ID.
+- When `tag="div"`, no ARIA attributes are added.
+- Ensure a heading element with the matching ID is present inside the grid when using semantic tags.
+
+See [component-aria-landmark.md](../component-aria-landmark.md) for the full landmark pattern.
+
+---
+
+## Local style override scaffold
+
+```vue
+<DataGrid :style-class-passthrough="['my-data-grid']">
+  ...
+</DataGrid>
+
+<style>
+/* ─── DataGrid 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;
+  }
+}
+</style>
+```
+
+See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+
+---
+
+## Notes
+
+- 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.

package/.claude/skills/index.md

@@ -41,6 +41,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── icon-sets.md                      — icon set packages required by layer components, FOUC prevention, component→package map
 ├── robots-env-aware.md               — @nuxtjs/robots: allow crawling on prod domain only, block on preview/staging via env var
 ├── new-app-scaffold.md               — scaffold a new Nuxt consumer app extending this layer (package.json, nuxt.config, app structure, CLAUDE.md)
+├── qa-panel.md                       — collapsible dev-only panel for toggling component props live on a page (demo pages and consuming apps)
 ├── release-notes.md                  — produce release notes as a fenced markdown block from git log
 ├── composable-canonical-url.md       — useCanonicalUrl: set <link rel="canonical"> from runtimeConfig.public.canonicalHost; layout setup, node types
 ├── composable-whatsapp.md            — useWhatsApp: open pre-filled wa.me link from form payload; runtime config, security, usage
@@ -74,7 +75,9 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
     ├── 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
+    ├── 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
+    └── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
 ```
 
 ## Skill file template

package/.claude/skills/qa-panel.md

@@ -0,0 +1,231 @@
+# QA Panel
+
+## Overview
+
+A collapsible dev-only panel that lets you toggle component props live on a page — without touching the component or breaking the visual layout. Hidden in production via `import.meta.dev`. Uses a native `<details>`/`<summary>` so it takes up no space when collapsed. Useful on both demo pages in this library and on pages in consuming apps.
+
+## Structure
+
+```
+<details>            ← collapses the whole panel
+  <summary>          ← always visible: title + live status line
+  <body>             ← groups of chip buttons (and optional free-text inputs)
+```
+
+Each group controls one prop. The status `<code>` in the summary mirrors the current state so you can see it at a glance without opening the panel.
+
+## Steps
+
+### 1. Add the reactive state to `<script setup>`
+
+```ts
+// ── QA controls (dev only) ────────────────────────────────────────
+const isDev = import.meta.dev;
+
+// One ref per controllable prop
+const qaMyBoolean = ref(true);
+const qaMyNumber  = ref(400);
+const qaMyString  = ref<"a" | "b" | "c">("a");
+
+// Preset arrays for numeric/string chip groups
+const myNumberPresets = [100, 200, 400, 800, 1600];
+const myStringPresets = ["a", "b", "c"] as const;
+```
+
+### 2. Wire the refs to the component
+
+```vue
+<MyComponent
+  :my-boolean="qaMyBoolean"
+  :my-number="qaMyNumber"
+  :my-string="qaMyString"
+/>
+```
+
+### 3. Add the panel markup
+
+Place directly above (or below) the component being QA'd, outside any layout wrapper that clips content:
+
+```vue
+<!-- ── QA Panel (dev only) ───────────────────────────────── -->
+<div v-if="isDev" class="qa-panel">
+  <details class="qa-panel__details">
+    <summary class="qa-panel__summary">
+      <span class="qa-panel__title">QA — MyComponent</span>
+      <code class="qa-panel__status">
+        bool:{{ qaMyBoolean ? "on" : "off" }} · {{ qaMyNumber }}ms · {{ qaMyString }}
+      </code>
+    </summary>
+    <div class="qa-panel__body">
+
+      <!-- Boolean group -->
+      <div class="qa-panel__group">
+        <span class="qa-panel__label">My Boolean</span>
+        <div class="qa-panel__chips">
+          <button
+            v-for="opt in [true, false]"
+            :key="String(opt)"
+            class="qa-panel__chip"
+            :class="{ 'is-active': qaMyBoolean === opt }"
+            @click="qaMyBoolean = opt"
+          >{{ opt ? "on" : "off" }}</button>
+        </div>
+      </div>
+
+      <!-- Number group (preset chips) -->
+      <div class="qa-panel__group">
+        <span class="qa-panel__label">My Number</span>
+        <div class="qa-panel__chips">
+          <button
+            v-for="preset in myNumberPresets"
+            :key="preset"
+            class="qa-panel__chip"
+            :class="{ 'is-active': qaMyNumber === preset }"
+            @click="qaMyNumber = preset"
+          >{{ preset }}</button>
+        </div>
+      </div>
+
+      <!-- String union group -->
+      <div class="qa-panel__group">
+        <span class="qa-panel__label">My String</span>
+        <div class="qa-panel__chips">
+          <button
+            v-for="opt in myStringPresets"
+            :key="opt"
+            class="qa-panel__chip"
+            :class="{ 'is-active': qaMyString === opt }"
+            @click="qaMyString = opt"
+          >{{ opt }}</button>
+        </div>
+      </div>
+
+      <!-- Free-text input (for strings where presets aren't enough) -->
+      <div class="qa-panel__group">
+        <span class="qa-panel__label">Custom Value</span>
+        <input v-model="qaMyString" placeholder="e.g. 4/3" class="qa-panel__input" />
+      </div>
+
+    </div>
+  </details>
+</div>
+```
+
+### 4. Add the CSS
+
+Scope inside your page body class (e.g. `.my-page`) so styles don't bleed. The panel is always dark regardless of colour scheme — it's a dev tool, not a UI element.
+
+```css
+.my-page {
+  /* ── 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; }
+  }
+}
+```
+
+## Notes
+
+- **Production safety**: `import.meta.dev` is `false` in production builds — the entire `v-if="isDev"` block is tree-shaken. No runtime cost.
+- **Consuming apps**: The active chip color (`oklch(55% 0.18 240)`) is a neutral blue. Replace with a brand accent token if preferred: `background: var(--color-brand-accent)`.
+- **Panel placement**: Outside any `overflow: hidden` or clipping container, otherwise the panel may be clipped or push layout unexpectedly. Placing it as a direct sibling of the component row works well.
+- **Computed CSS vars**: When a prop controls a CSS custom property (e.g. max-height tiers), use a `computed` that returns a style object and bind it with `:style` on the component wrapper:
+
+  ```ts
+  const qaStyleOverrides = computed(() => ({
+    "--theme-component-max-height": qaMaxHeight.value || undefined,
+  }));
+  ```

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

@@ -0,0 +1,39 @@
+<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>