srcdev-nuxt-components 9.1.36 → 9.1.38

package/.claude/settings.json

@@ -24,6 +24,7 @@
       "Bash(git add:*)",
       "Bash(gh release:*)",
       "Bash(node -e ':*)"
-    ]
+    ],
+    "additionalDirectories": []
   }
 }

package/.claude/settings.local.json

@@ -29,13 +29,13 @@
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",
       "/Users/simoncornforth/websites/nuxt-components/.claude/skills",
+      "/Users/simoncornforth/websites/nuxt-components/.claude/skills/components",
       "/Users/simoncornforth/websites/nuxt-components/app/components/02.molecules/navigation/site-navigation/tests",
       "/Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/app/pages",
       "/Users/simoncornforth/websites/nuxt-components/app/assets/styles/extends-layer",
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms",
       "/private/tmp",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/scroll-parallax-section"
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video"
     ]
   }
 }

package/.claude/skills/components/capture-qr-code.md

@@ -0,0 +1,84 @@
+# CaptureQrCode
+
+Live camera QR code scanner. Streams the device camera, detects QR codes in real time, and displays the decoded results inline. Handles camera errors, page visibility changes, and route navigation — stopping media streams cleanly in all cases.
+
+**File**: `app/components/02.molecules/qr-code/CaptureQrCode.vue`
+
+## Prerequisites
+
+The `nuxt-qrcode` Nuxt module must be registered in the consuming app's `nuxt.config.ts`:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["nuxt-qrcode"],
+});
+```
+
+Camera access requires a secure context (HTTPS or localhost) and the user granting camera permission.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.capture-qr-stream` | root | always present |
+| `.camera-stopped` | inner | shown when camera is off but no error |
+| `.camera-error` | inner | shown when an error has occurred |
+| `.scanned-results` | inner | shown when at least one code has been decoded |
+
+## Behaviour
+
+- Camera starts automatically on mount (`state.cameraOn = true`)
+- When the page becomes hidden (tab switch, minimize), the camera stops and media streams are released
+- On route leave (`onBeforeRouteLeave`), the camera stops and streams are released
+- On `<KeepAlive>` deactivate/activate, camera is stopped/restarted accordingly
+- If the user denies camera permission or another error occurs, the `.camera-error` state is shown with the error message and a **Reset camera** button
+- Detected QR codes replace the previous results — each scan is a fresh result set
+- Results are displayed as a `<ul>` inside `.scanned-results`
+
+## Usage
+
+Drop in where camera scanning is needed. No configuration required beyond the module being present:
+
+```vue
+<CaptureQrCode />
+```
+
+With styling:
+
+```vue
+<CaptureQrCode style-class-passthrough="my-scanner" />
+```
+
+## CSS override
+
+The root element is a square (`aspect-ratio: 1 / 1`) by default. Override in a consuming page or component:
+
+```css
+.my-scanner.capture-qr-stream {
+  aspect-ratio: auto;
+  max-width: 40rem;
+}
+
+.my-scanner .camera-error {
+  padding: 1.6rem;
+  border-radius: 0.8rem;
+  background-color: var(--theme-surface-error);
+}
+
+.my-scanner .scanned-results {
+  margin-block-start: 1.6rem;
+  font-size: 1.4rem;
+}
+```
+
+## Notes
+
+- The component does not emit the detected values — results are rendered inline. To act on scan results in a parent, extend the component or use `nuxt-qrcode`'s `QrcodeStream` directly with `@detect`.
+- Media streams are stopped via two strategies: via the `QrcodeStream` component ref and via a document-level `querySelectorAll("video")` sweep — the sweep acts as a safety net if the ref is unavailable.

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/components/decode-qr-code.md

@@ -0,0 +1,84 @@
+# DecodeQrCode
+
+QR code decoder for static images. Accepts images via file picker or drag-and-drop, decodes any QR codes found, and displays the results inline.
+
+**File**: `app/components/02.molecules/qr-code/DecodeQrCode.vue`
+
+## Prerequisites
+
+The `nuxt-qrcode` Nuxt module must be registered in the consuming app's `nuxt.config.ts`:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["nuxt-qrcode"],
+});
+```
+
+No camera permission is required — this component works entirely with uploaded or dropped image files.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.decode-qr-code` | root | always present |
+| `.qr-code-capture` | file input | the `QrcodeCapture` file-picker element |
+| `.qr-code-dropzone` | drop zone | the `QrcodeDropZone` drag-and-drop area |
+| `.scanned-results` | inner | shown when at least one code has been decoded |
+
+## Behaviour
+
+- Two input methods are rendered side by side: a file picker (`.qr-code-capture`) and a drag-and-drop zone (`.qr-code-dropzone`)
+- Both share the same `onDetect` handler — results are displayed in the same `.scanned-results` list regardless of input method
+- Detected QR codes replace the previous results — each decode is a fresh result set
+- If the decoded array is empty, `.scanned-results` is hidden
+- The drop zone has a dashed border and minimum height by default — style with `.qr-code-dropzone` to customise
+
+## Usage
+
+Drop in where image-based QR decoding is needed:
+
+```vue
+<DecodeQrCode />
+```
+
+With styling:
+
+```vue
+<DecodeQrCode style-class-passthrough="my-decoder" />
+```
+
+## CSS override
+
+```css
+.my-decoder.decode-qr-code {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+}
+
+.my-decoder .qr-code-dropzone {
+  min-height: 12rem;
+  border-radius: 1rem;
+  border-color: var(--theme-input-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.my-decoder .scanned-results {
+  margin-block-start: 1.6rem;
+  font-size: 1.4rem;
+}
+```
+
+## Notes
+
+- Like `CaptureQrCode`, results are rendered inline and not emitted. To act on results in a parent, extend the component or use `nuxt-qrcode`'s `QrcodeCapture` / `QrcodeDropZone` primitives directly.
+- The component renders both input methods unconditionally. If only one is needed, use the underlying `QrcodeCapture` or `QrcodeDropZone` primitives directly.

package/.claude/skills/components/display-qr-code.md

@@ -0,0 +1,64 @@
+# DisplayQrCode
+
+Renders a styled QR code SVG from a string value. Supports colour, size, corner radius, and pixel/marker shape variants.
+
+**File**: `app/components/01.atoms/qr-code/DisplayQrCode.vue`
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `qr-value` | `string` | required | The string to encode into the QR code |
+| `variant` | `QrCodeVariant` | `{ inner: "default", marker: "default", pixel: "default" }` | Shape variants for inner markers, outer markers, and pixels |
+| `radius` | `number` | `0` | Corner rounding applied to pixels/markers (0–1 scale) |
+| `black-color` | `string` | `"currentColor"` | Colour for the dark modules |
+| `white-color` | `string` | `"transparent"` | Colour for the light modules |
+| `size` | `string` | `"256px"` | Width of the QR code (height matches via `aspect-ratio: 1 / 1`) |
+| `style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root element |
+
+### QrCodeVariant type
+
+```typescript
+import type { QrCodeVariant } from "srcdev-nuxt-components/types/components";
+
+// Each field accepts: "default" | "circle" | "rounded" | "dots" | "classy" | "classy-rounded"
+const variant: QrCodeVariant = {
+  inner: "circle",
+  marker: "rounded",
+  pixel: "dots",
+};
+```
+
+## CSS classes
+
+| Class | Where | Description |
+|-------|-------|-------------|
+| `.display-qr-code` | root | always present |
+
+## Usage
+
+Minimal — encodes a URL with default styling:
+
+```vue
+<DisplayQrCode qr-value="https://example.com" />
+```
+
+Custom size, colour, and rounded pixels:
+
+```vue
+<DisplayQrCode
+  qr-value="https://example.com"
+  size="320px"
+  black-color="#1a1a2e"
+  white-color="#f5f5f5"
+  :radius="0.5"
+  :variant="{ inner: 'circle', marker: 'rounded', pixel: 'default' }"
+/>
+```
+
+## Notes
+
+- The component renders directly as the `Qrcode` element from `nuxt-qrcode` — there is no wrapper `<div>`. The `.display-qr-code` class is applied to the `Qrcode` root, which renders as an `<svg>`.
+- `size` is applied via CSS `v-bind()` — pass any valid CSS length value (`px`, `rem`, `%`, etc.).
+- `black-color` defaults to `currentColor`, so the QR code inherits the surrounding text colour automatically unless overridden.
+- `white-color` defaults to `transparent`, making the background of the QR code see-through by default.

package/.claude/skills/index.md

@@ -68,11 +68,14 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
     ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, reduced-motion fallback, CSS tokens
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
-    ├── scroll-parallax-section.md — ScrollParallaxSection: JS-driven parallax background section, parallaxStrength guide, height token, reduced-motion pattern
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
-    └── social-icons-list.md    — SocialIconsList: data-driven social icon links, ISocialIcon type, logos: icon names, CSS tokens
+    ├── 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
+    └── data-grid.md            — DataGrid: auto-fit responsive grid, $slots iteration, --data-grid-columns/gap tokens, semantic tag + aria
 ```
 
 ## Skill file template

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>