srcdev-nuxt-components 9.1.49 → 9.1.51

package/.claude/skills/components/tab-navigation.md

@@ -0,0 +1,222 @@
+# TabNavigation
+
+## Overview
+
+A responsive horizontal navigation bar with CSS anchor-positioning indicators, smooth anchor
+scroll, and a burger-menu collapse at narrow widths. Accepts both route links (`NuxtLink`) and
+hash anchors (`<a>`). Items are driven by a `NavItemData` object; the component only reads the
+`main` key.
+
+---
+
+## Types
+
+Import from the layer package root — do **not** use `~/types/...` in consuming apps:
+
+```ts
+import type { NavItemData } from "srcdev-nuxt-components"
+```
+
+```ts
+interface NavItem {
+  text: string;
+  href?: string;
+  isExternal?: boolean; // adds target="_blank" rel behaviour via NuxtLink
+  iconName?: string;    // icon set name, rendered via <Icon>
+  cssName?: string;     // extra CSS class on the <li>
+}
+
+interface NavItemData {
+  [key: string]: NavItem[]; // component reads navItemData.main
+}
+```
+
+---
+
+## Props
+
+| Prop (template form) | Type | Default | Notes |
+|---|---|---|---|
+| `nav-item-data` | `NavItemData` | required | Navigation link data — only `main` key is read |
+| `nav-align` | `"left" \| "center" \| "right"` | `"left"` | Positions the tab list within the nav container |
+| `anchor-scroll-offset` | `number \| (() => number)` | — | Pixel offset subtracted from scroll target; pass a getter so it is re-evaluated at click time |
+| `:style-class-passthrough` | `string \| string[]` | `[]` | Extra classes on the root `<nav>` element |
+
+---
+
+## Basic usage — route links
+
+```vue
+<TabNavigation :nav-item-data="navData" nav-align="center" />
+```
+
+```ts
+import type { NavItemData } from "srcdev-nuxt-components"
+
+const navData: NavItemData = {
+  main: [
+    { text: "Home", href: "/" },
+    { text: "About", href: "/about" },
+    { text: "Services", href: "/services" },
+    { text: "Contact", href: "/contact" },
+  ],
+}
+```
+
+Items without a leading `#` render as `NuxtLink`. The active indicator tracks the current route
+via `router-link-exact-active`.
+
+---
+
+## Anchor scroll usage
+
+Hash-prefixed hrefs render as plain `<a>` elements to keep Vue Router out of the scroll path.
+Pass a getter for the offset so the sticky bar height is read at click time (not at mount).
+
+```vue
+<div ref="stickyRef" class="sticky-nav">
+  <TabNavigation
+    :nav-item-data="anchorData"
+    :anchor-scroll-offset="() => stickyRef?.offsetHeight ?? 0"
+  />
+</div>
+```
+
+```ts
+const stickyRef = ref<HTMLElement | null>(null)
+
+const anchorData: NavItemData = {
+  main: [
+    { text: "Overview", href: "#overview" },
+    { text: "Features", href: "#features" },
+    { text: "Pricing", href: "#pricing" },
+  ],
+}
+```
+
+Clicks are handled by `useAnchorScroll`. Respects `prefers-reduced-motion` — motion-sensitive
+users get an instant jump rather than smooth scroll. See the `composable-anchor-scroll.md` skill
+for the full composable reference.
+
+### Mixed navigation
+
+Route links and hash anchors can coexist in the same `navItemData`:
+
+```ts
+const navData: NavItemData = {
+  main: [
+    { text: "Home", href: "/" },          // NuxtLink
+    { text: "Overview", href: "#intro" }, // <a> + smooth scroll
+    { text: "Blog", href: "/blog" },      // NuxtLink
+  ],
+}
+```
+
+---
+
+## Responsive collapse
+
+`useNavCollapse` measures the nav list on every resize. When the list overflows its container it
+is hidden and replaced with a burger button. The button opens a slide-down panel listing all items.
+
+The nav hides itself (opacity 0) until the first measurement completes to prevent a flash of the
+wrong state.
+
+---
+
+## Alignment variants
+
+```vue
+<TabNavigation :nav-item-data="navData" nav-align="left" />   <!-- default -->
+<TabNavigation :nav-item-data="navData" nav-align="center" />
+<TabNavigation :nav-item-data="navData" nav-align="right" />
+```
+
+`center` and `right` use `margin-inline: auto` / `margin-inline-start: auto` on the `ul`.
+
+---
+
+## CSS token API
+
+Set `--tab-nav-*` tokens on any ancestor element — no prop needed. See `CONSUMER-STYLING.md` in
+the component source folder for the full token reference.
+
+### Horizontal nav
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-link-color` | `var(--slate-01, currentColor)` | Link text colour |
+| `--tab-nav-link-hover-color` | `var(--slate-04, currentColor)` | Link hover colour |
+| `--tab-nav-link-active-color` | `var(--slate-01, currentColor)` | Active link colour |
+| `--tab-nav-link-size` | `1.6rem` | Font size |
+| `--tab-nav-link-weight` | `400` | Font weight |
+| `--tab-nav-link-tracking` | `0.06em` | Letter spacing |
+| `--tab-nav-gap` | `2.2rem` | Gap between items |
+| `--tab-nav-transition` | `250ms ease` | Colour fade on hover/active |
+
+### Indicator decorators
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-decorator-indicator-color` | `var(--slate-01, currentColor)` | Active underline bar colour |
+| `--tab-nav-decorator-hovered-bg` | `transparent` | Hover pill background (set non-transparent to enable) |
+
+### Mobile panel
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-panel-bg` | `var(--page-bg, #1a1614)` | Panel background |
+| `--tab-nav-panel-border-color` | `color-mix(in oklch, var(--slate-01) 35%, transparent)` | Panel top border |
+| `--tab-nav-panel-item-border` | `color-mix(in oklch, var(--slate-01) 8%, transparent)` | Item dividers |
+| `--tab-nav-panel-link-color` | `var(--slate-01, currentColor)` | Panel link colour |
+| `--tab-nav-panel-padding-block` | `1.4rem` | Link vertical padding |
+| `--tab-nav-panel-padding-inline` | `1.5rem` | Link horizontal padding |
+| `--tab-nav-panel-slide-duration` | `350ms` | Panel open/close duration |
+| `--tab-nav-panel-slide-easing` | `cubic-bezier(0.4, 0, 0.2, 1)` | Panel easing |
+
+### Burger button
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-burger-color` | `var(--slate-01, currentColor)` | Bar colour |
+| `--tab-nav-burger-width` | `22px` | Bar width |
+| `--tab-nav-burger-height` | `1.5px` | Bar height |
+| `--tab-nav-burger-gap` | `5px` | Gap between bars |
+| `--tab-nav-burger-transition` | `300ms ease` | Open/close animation |
+
+### Backdrop
+
+| Token | Default | Controls |
+|---|---|---|
+| `--tab-nav-backdrop-bg` | `oklch(0% 0 0 / 55%)` | Overlay colour |
+| `--tab-nav-backdrop-blur` | `3px` | Overlay blur |
+| `--tab-nav-backdrop-duration` | `350ms` | Overlay fade duration |
+
+### Page-scoped theme example
+
+```css
+/* Unscoped <style> in the consuming page */
+.services-page {
+  .tab-navigation {
+    --tab-nav-decorator-indicator-color: var(--brand-accent);
+    --tab-nav-decorator-hovered-bg: oklch(from var(--brand-accent) l c h / 0.1);
+    --tab-nav-link-active-color: var(--brand-accent);
+    --tab-nav-panel-bg: var(--page-bg);
+  }
+}
+```
+
+---
+
+## Notes
+
+- Auto-imported in Nuxt — no manual import needed.
+- The indicator and hover pill use CSS Anchor Positioning and animate via `left`/`right` transitions
+  — set `--tab-nav-decorator-hovered-bg` to a semi-transparent colour to enable the pill; it is
+  invisible by default.
+- `--tab-nav-transition` controls only the link colour fade; the indicator slide animation is
+  internally managed and does not inherit this token.
+- The panel teleports its backdrop to `<body>` so it escapes any parent `overflow: hidden` or
+  stacking-context constraint.
+- `--tab-nav-panel-bg` should match `--page-bg` for a seamless panel appearance in the collapsed
+  state.

package/.claude/skills/composable-dialog-controls.md

@@ -2,77 +2,89 @@
 
 ## Overview
 
-`useDialogControls` manages open/closed state for one or more named dialogs (modals, confirmation panels, etc.) with optional confirm/cancel callbacks. It is the standard pattern for dialog orchestration in consuming apps.
+`useDialogControls` manages open/closed state for one or more named dialogs with optional
+confirm/cancel callbacks. Pass all dialog IDs and their callbacks in a single config object
+at call time — no separate initialisation or registration step needed.
 
-**This composable ships inside the `srcdev-nuxt-components` layer** (`app/composables/useDialogControls.ts`). It is auto-imported via the Nuxt layer — **do not create a local copy** in the consuming app.
+**This composable ships inside the `srcdev-nuxt-components` layer** (`app/composables/useDialogControls.ts`).
+It is auto-imported via the Nuxt layer — **do not create a local copy** in the consuming app.
 
 ## Usage
 
-### 1. Initialise named dialogs
+### 1. Set up dialog controls
 
-Call `initialiseDialogs` with an array of string IDs — one per dialog you need to control:
+Call `useDialogControls` with a config object whose keys are dialog IDs:
 
 ```ts
-const { dialogsConfig, controlDialogs, initialiseDialogs, registerDialogCallbacks } = useDialogControls()
-
-initialiseDialogs(["confirmDelete", "editProfile"])
+const { dialogsConfig, openDialog, closeDialog } = useDialogControls({
+  confirmDelete: {
+    onConfirm: () => deleteItem(),
+    onCancel: () => console.log("Cancelled"),
+  },
+  editProfile: {
+    onConfirm: () => saveProfile(),
+  },
+})
 ```
 
-Each ID gets a reactive boolean in `dialogsConfig` (initially `false` = closed).
+Each key gets a reactive boolean in `dialogsConfig` (initially `false` = closed).
+Callbacks are optional — omit either or both.
 
 ### 2. Bind to a dialog component
 
-Use `dialogsConfig[id]` as the `v-model` or `:open` prop on your dialog:
+Use `v-if` + `v-model` with `dialogsConfig[id]`:
 
 ```vue
-<ExpandingPanel v-model="dialogsConfig.confirmDelete">
-  <template #summary>Confirm delete</template>
-  <template #content>
-    <p>Are you sure?</p>
-    <button @click="controlDialogs('confirmDelete', false, 'confirm')">Yes, delete</button>
-    <button @click="controlDialogs('confirmDelete', false, 'cancel')">Cancel</button>
+<DisplayDialog
+  v-if="dialogsConfig['confirmDelete']"
+  v-model="dialogsConfig['confirmDelete']"
+  variant="confirm"
+  data-dialog-id="confirmDelete"
+>
+  <template #dialogTitle>
+    <p>Confirm delete?</p>
+  </template>
+  <template #dialogContent>
+    <p>This action cannot be undone.</p>
   </template>
-</ExpandingPanel>
+  <template #actionButtonLeft>
+    <button @click="closeDialog('confirmDelete', 'cancel')">Cancel</button>
+  </template>
+  <template #actionButtonRight>
+    <button @click="closeDialog('confirmDelete', 'confirm')">Delete</button>
+  </template>
+</DisplayDialog>
 ```
 
 ### 3. Open and close dialogs
 
 ```ts
 // Open
-controlDialogs("confirmDelete", true)
+openDialog("confirmDelete")
 
-// Close without action
-controlDialogs("confirmDelete", false)
+// Close without firing a callback
+closeDialog("confirmDelete")
 
-// Close and fire a callback
-controlDialogs("confirmDelete", false, "confirm") // fires onConfirm if registered
-controlDialogs("confirmDelete", false, "cancel")  // fires onCancel if registered
-```
+// Close and fire onConfirm
+closeDialog("confirmDelete", "confirm")
 
-### 4. Register callbacks (optional)
-
-Register confirm/cancel callbacks before the dialog is opened:
-
-```ts
-registerDialogCallbacks("confirmDelete", {
-  onConfirm: () => deleteItem(),
-  onCancel: () => console.log("Cancelled"),
-})
+// Close and fire onCancel
+closeDialog("confirmDelete", "cancel")
 ```
 
-Callbacks fire when `controlDialogs` is called with a matching action string.
-
 ## API reference
 
-| Return value | Description |
-|---|---|
-| `dialogsConfig` | Reactive object — `{ [id]: boolean }`. Bind to dialog `v-model` or `:open`. |
-| `initialiseDialogs(ids)` | Seeds `dialogsConfig` with `false` for each ID. Call once in `<script setup>`. |
-| `controlDialogs(name, state, action?)` | Set `dialogsConfig[name]` to `state`. If `state` is `false` and `action` is provided, fires the registered callback before closing. |
-| `registerDialogCallbacks(id, { onConfirm?, onCancel? })` | Register lifecycle callbacks for a dialog ID. |
+| Return value | Type | Description |
+|---|---|---|
+| `dialogsConfig` | `Record<string, boolean>` | Reactive map of dialog ID → open state. Bind to `v-model` and `v-if`. |
+| `openDialog(name)` | `(name: string) => void` | Sets `dialogsConfig[name]` to `true`. |
+| `closeDialog(name, action?)` | `(name: string, action?: 'confirm' \| 'cancel') => void` | Sets `dialogsConfig[name]` to `false`. If `action` is provided, fires the registered callback first. |
 
 ## Notes
 
-- `useDialogControls` is scoped to the component instance — each component that calls it gets its own `dialogsConfig`. It is not a global store; do not expect state to persist across components.
-- For a single dialog, `initialiseDialogs(["myDialog"])` is still required — omitting it means `dialogsConfig.myDialog` is `undefined` and reactivity won't work.
-- `controlDialogs` checks for the callback before setting state, so the callback always runs before the dialog closes.
+- State is scoped to the component instance — each component that calls `useDialogControls` gets
+  its own `dialogsConfig`. It is not a global store.
+- `v-if="dialogsConfig['id']"` on the dialog component ensures it only mounts when open, which
+  triggers `onMounted` body-lock logic inside `DisplayDialog`.
+- Callbacks fire before the dialog closes — useful for async operations that need to run while
+  the dialog is still visible.

package/.claude/skills/index.md

@@ -48,7 +48,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── composable-whatsapp.md            — useWhatsApp: open pre-filled wa.me link from form payload; runtime config, security, usage
 ├── composable-zod-validation.md      — useZodValidation: schema-driven form validation, error binding, submit flow, API error push
 ├── composable-colour-scheme.md       — useColourScheme: reactive light/dark/auto switching, localStorage persistence, runtime config
-├── composable-dialog-controls.md     — useDialogControls: named dialog open/close state with confirm/cancel callbacks
+├── composable-dialog-controls.md     — useDialogControls: single-call setup with config object, openDialog/closeDialog API, confirm/cancel callbacks
 ├── composable-anchor-scroll.md       — useAnchorScroll: smooth anchor scrolling with reduced-motion support, dynamic offset, and TabNavigation integration
 ├── composable-tooltips-guide.md      — useTooltipsGuide: sequential popover guide with auto-start, dismiss-to-advance, manual controls
 └── components/
@@ -56,7 +56,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
     ├── hero-text.md            — HeroText props, usage patterns, styling
     ├── layout-grid-by-cols.md  — LayoutGridByCols dynamic slots (item-{n}), props, column/gap/breakpoint decisions
-    ├── layout-row.md           — LayoutRow variant guide, width/margin decisions, usage patterns
+    ├── page-row.md             — PageRow layout primitive: CSS grid named lines, nesting pattern, align prop, aria-labelledby, CSS token API
     ├── link-text.md            — LinkText props, slots, usage patterns, styling
     ├── page-hero-highlights.md — PageHeroHighlights template: hero + highlights strip grid, CSS custom property theming
     ├── services-card.md        — ServicesCard props (incl. eyebrowConfig/heroConfig), actions slot, CSS tokens, page boilerplate
@@ -74,12 +74,15 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── 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
+    ├── tab-navigation.md       — TabNavigation: horizontal tab nav with CSS anchor-positioning indicators, anchor scroll, burger collapse, full CSS token API
     ├── 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
     ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-min-col-size/gap tokens, semantic tag + aria
     ├── display-avatar.md       — DisplayAvatar: circular avatar with image/initials fallback, size variants, chip badge, icon slot, styleClassPassthrough
+    ├── card-core.md            — CardCore: generic card container, dynamic named slots as rows, 4 variants, blurred backdrop layer, full CSS token API
+    ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, CSS token API
     ├── display-chip.md         — DisplayChip: status indicator chip overlay, CSS trig positioning, circle/square shapes, status colours, icon/label content
     ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, full CSS token API for border/outline/colour
     ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens

package/app/components/01.atoms/card/CONSUMER-STYLING.md

@@ -0,0 +1,175 @@
+# CardCore — Consumer Styling Guide
+
+## Public token API
+
+All `--card-core-*` tokens are the stable override surface. Set them at any scope (global, page,
+or instance) without touching the component itself.
+
+| Token | Default | Controls |
+|---|---|---|
+| `--card-core-row-gap` | `1rem` | Gap between card rows |
+| `--card-core-inner-padding` | `1rem` | Internal padding (applied per row by the consumer) |
+| `--card-core-border-radius` | `0.5rem` | Corner rounding |
+| `--card-core-border` | `0.2rem solid var(--slate-08)` | Full border shorthand |
+| `--card-core-box-shadow` | `0.1rem 0.1rem 0.4rem oklch(from var(--slate-08) l c h / 0.45)` | Box shadow shorthand |
+| `--card-core-background-color` | `transparent` | Main background colour |
+| `--card-core-background-image` | `none` | Main background image |
+| `--card-core-lower-background-color` | `transparent` | Blurred backdrop layer colour |
+| `--card-core-lower-background-image` | `none` | Blurred backdrop layer image |
+| `--card-core-lower-background-position` | `center` | Backdrop image position |
+| `--card-core-lower-background-blur` | `16px` | Backdrop blur amount |
+| `--card-core-lower-scale` | `1.1` | Backdrop scale (zoom to hide blur edges) |
+
+> **Variant note**: The `solid`, `subtle`, `soft`, and `outline` variants directly override the
+> internal `--_card-background-color` and `--_card-border` tokens, bypassing the public tokens
+> for those properties. To override a variant's colours, target the variant class directly (see
+> [Per-variant overrides](#per-variant-overrides) below).
+
+---
+
+## Global theming — app-level CSS file
+
+Create `assets/styles/setup/07.components/card-core.css` in the consuming app and set tokens on
+`:root`. These values apply to every `CardCore` instance across the site.
+
+```css
+/* assets/styles/setup/07.components/card-core.css */
+:root {
+  --card-core-border-radius: 1rem;
+  --card-core-border: 0.1rem solid var(--brand-border);
+  --card-core-box-shadow: 0 0.2rem 1.2rem rgb(0 0 0 / 8%);
+  --card-core-row-gap: 0;
+}
+```
+
+---
+
+## Per-variant overrides
+
+Variants override internal tokens directly, so target the variant class to change their colours:
+
+```css
+/* assets/styles/setup/07.components/card-core.css */
+:root {
+  /* shared geometry */
+  --card-core-border-radius: 0.8rem;
+}
+
+/* variant colour overrides — set on the variant class, not :root */
+.card-core {
+  &.solid {
+    --_card-background-color: var(--brand-surface);
+    --_card-border: 0.1rem solid var(--brand-border);
+  }
+
+  &.subtle {
+    --_card-background-color: color-mix(in oklab, var(--brand-surface) 50%, transparent);
+    --_card-border: 0.1rem solid var(--brand-border);
+  }
+
+  &.outline {
+    --_card-border: 0.15rem solid var(--brand-primary);
+  }
+}
+```
+
+---
+
+## Blurred backdrop pattern
+
+Set `--card-core-lower-background-image` and `--card-core-lower-background-color` to create a
+blurred translucent layer behind the card content. The `::before` pseudo-element handles the blur
+and the scale hides the blur-edge artefact.
+
+```css
+.card-core {
+  &.hero-card {
+    --card-core-lower-background-image: url("/images/hero.jpg");
+    --card-core-lower-background-blur: 24px;
+    --card-core-lower-scale: 1.15;
+    --card-core-lower-background-color: rgb(0 0 0 / 30%); /* tint over image */
+    --card-core-background-color: transparent;
+  }
+}
+```
+
+Or inline for a single instance:
+
+```vue
+<CardCore
+  variant="solid"
+  style="
+    --card-core-lower-background-image: url('/images/hero.jpg');
+    --card-core-lower-background-blur: 20px;
+  "
+>
+  ...
+</CardCore>
+```
+
+---
+
+## Page-scoped overrides
+
+When a card appears in a specific page context, scope overrides under the page wrapper. No
+`:deep()` is required (component styles are unscoped).
+
+```css
+/* In the consuming page's unscoped <style> block */
+.services-page {
+  .card-core {
+    --card-core-border-radius: 1.2rem;
+    --card-core-row-gap: 0;
+
+    &.solid {
+      --_card-background-color: var(--brand-surface-alt);
+    }
+  }
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+```vue
+<CardCore :style-class-passthrough="['featured']">
+  ...
+</CardCore>
+```
+
+```css
+.card-core {
+  &.featured {
+    --card-core-border: 0.2rem solid var(--brand-primary);
+    --card-core-box-shadow: 0 0.4rem 2rem rgb(0 0 0 / 15%);
+    --card-core-border-radius: 1.6rem;
+  }
+}
+```
+
+---
+
+## Card row targeting
+
+Slot content is wrapped in `.card-row.card-row-{name}`. Target rows for padding, borders, or
+backgrounds without modifying the component:
+
+```css
+.card-core {
+  .card-row-header {
+    padding: 1.6rem;
+    background-color: var(--brand-primary);
+    color: white;
+  }
+
+  .card-row-body {
+    padding: 1.6rem;
+  }
+
+  .card-row-footer {
+    padding: 1.2rem 1.6rem;
+    border-top: 0.1rem solid var(--brand-border);
+  }
+}
+```

package/app/components/01.atoms/card/CardCore.vue

@@ -41,50 +41,77 @@ watch(
 <style lang="css">
 @layer components {
   .card-core {
-    --_inner-padding: 1rem;
-    --_background-color: white;
-    --_border-color: green;
-    --_border-width: 0.2rem;
-    --_box-shadow-color: transparent;
+    --_card-row-gap: var(--card-core-row-gap, 1rem);
+    --_card-padding: var(--card-core-inner-padding, 1rem);
+    --_card-lower-background-image: var(--card-core-lower-background-image, none);
+    --_card-lower-background-position: var(--card-core-lower-background-position, center);
+    --_card-lower-background-color: var(--card-core-lower-background-color, transparent);
+    --_card-lower-background-blur: var(--card-core-lower-background-blur, 16px);
+    --_card-lower-scale: var(--card-core-lower-scale, 1.1);
+    --_card-background-image: var(--card-core-background-image, none);
+    --_card-background-color: var(--card-core-background-color, transparent);
+    --_card-border: var(--card-core-border, 0.2rem solid var(--slate-08));
+    --_card-border-radius: var(--card-core-border-radius, 0.5rem);
+    --_card-box-shadow: var(--card-core-box-shadow, 0.1rem 0.1rem 0.4rem oklch(from var(--slate-08) l c h / 0.45));
 
     display: grid;
     grid-auto-flow: row;
-    /* gap: 1rem; */
-    border-radius: 0.5rem;
+    gap: var(--_card-row-gap);
+    border-radius: var(--_card-border-radius);
     overflow: hidden;
+    position: relative;
 
-    background-color: var(--_background-color, transparent);
-    border: var(--_border-width) solid var(--_border-color, transparent);
-    box-shadow: 0 0 0.4rem var(--_border-width) var(--_box-shadow-color, transparent);
+    background-color: var(--_card-background-color, transparent);
+    border: var(--_card-border);
+    box-shadow: var(--_card-box-shadow);
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-color: var(--_card-lower-background-color);
+      background-image: var(--_card-lower-background-image);
+      background-position: var(--_card-lower-background-position, center);
+      background-size: cover;
+      background-repeat: no-repeat;
+      filter: blur(var(--_card-lower-background-blur));
+      scale: var(--_card-lower-scale);
+      z-index: 0;
+    }
+
+    > * {
+      position: relative;
+      z-index: 1;
+    }
 
     &.no-outline {
-      --_border-width: 0;
+      --_card-border: 0 solid transparent;
+      --_card-box-shadow: none;
     }
 
     &.solid {
-      --_background-color: light-dark(var(--slate-00), var(--slate-10));
-      --_border-color: red;
+      --_card-background-color: light-dark(var(--slate-00), var(--slate-10));
+      --_card-border: 0.2rem solid var(--slate-08);
     }
 
     &.subtle {
-      --_background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 50%, transparent);
-      --_border-color: red;
+      --_card-background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 50%, transparent);
+      --_card-border: 0.2rem solid var(--slate-08);
     }
 
     &.soft {
-      --_background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 20%, transparent);
-      --_box-shadow-color: color-mix(in oklab, light-dark(var(--slate-02), var(--slate-08)) 80%, transparent);
+      --_card-background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 20%, transparent);
+      --_card-box-shadow-color: color-mix(in oklab, light-dark(var(--slate-02), var(--slate-08)) 80%, transparent);
     }
 
     &.outline {
-      --_background-color: transparent;
-      --_border-color: green;
+      --_card-background-color: transparent;
+      --_card-border: 0.2rem solid var(--slate-08);
     }
 
     &.has-dividers {
       .card-row + .card-row {
-        /* border-top: 0.2rem solid var(--_border-color); */
-        border-top: 0.2rem solid green;
+        border-top: 0.2rem solid var(--slate-08);
       }
     }
   }