@adia-ai/web-components 0.0.1

package/components/card/card.a2ui.json

@@ -0,0 +1,276 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Card.json",
+  "title": "Card",
+  "description": "Bordered container with header, body, and footer sections. The nested <header> activates a 3-column grid when any direct [slot=\"icon|heading|description|action\"] child is present (icon column | heading + description stack | action column). Slot-gating uses :has(> [slot=\"…\"]) (direct-child only) so a nested slot inside a composite child — e.g. <avatar-ui> owning an internal <icon-ui slot=\"icon\"> — does not falsely activate the icon column. The nested <footer> flex-rows with a [slot=\"description\"] + [slot=\"action\"] space-between pattern; multiple <section> siblings stack as the body.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Card"
+    },
+    "density": {
+      "description": "Interior density — compact/comfortable/spacious. Tightens or loosens padding + gap.",
+      "type": "string",
+      "enum": [
+        "",
+        "compact",
+        "comfortable",
+        "spacious"
+      ],
+      "default": ""
+    },
+    "draggable": {
+      "description": "Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.",
+      "type": "boolean",
+      "default": false
+    },
+    "elevation": {
+      "description": "Shadow depth 0-3",
+      "type": "number",
+      "enum": [
+        0,
+        1,
+        2,
+        3
+      ],
+      "default": 1
+    },
+    "interactive": {
+      "description": "Marks the card as clickable — enables hover elevation, pointer cursor, and focus ring.",
+      "type": "boolean",
+      "default": false
+    },
+    "padding": {
+      "description": "Interior padding scale (overrides --card-padding). Accepts the named scale (none/xs/sm/md/lg/xl) or a numeric rung (\"1\"…\"16\").",
+      "type": "string",
+      "default": "md"
+    },
+    "radius": {
+      "description": "Border radius preset (overrides --card-radius). Named (none/sm/md/lg/round) or numeric.",
+      "type": "string",
+      "default": ""
+    },
+    "raw": {
+      "description": "Strips background, border, and shadow. Parent owns the surface. Content structure still applies.",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "Card scale. Controls inset, radius, gap, and font sizes. Default (empty) = md.",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": ""
+    },
+    "variant": {
+      "description": "Visual style. `outline` is an alias for `outlined`; `flat` removes shadow; `soft`/`primary` apply tinted surfaces.",
+      "type": "string",
+      "enum": [
+        "default",
+        "outlined",
+        "outline",
+        "filled",
+        "ghost",
+        "flat",
+        "soft",
+        "primary"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "drag-end": {
+        "description": "Fired when a drag completes."
+      }
+    },
+    "examples": [
+      {
+        "description": "Chat interface with message bubbles containing avatar and text pairs, plus an input footer.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Chat\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"messages\"\n    ]\n  },\n  {\n    \"id\": \"messages\",\n    \"component\": \"Column\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"msg1\",\n      \"msg2\",\n      \"msg3\",\n      \"msg4\"\n    ]\n  },\n  {\n    \"id\": \"msg1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a1\",\n      \"t1\"\n    ]\n  },\n  {\n    \"id\": \"a1\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t1\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Hello! Can you help me with something?\"\n  },\n  {\n    \"id\": \"msg2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a2\",\n      \"t2\"\n    ]\n  },\n  {\n    \"id\": \"a2\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t2\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Of course! I'd be happy to help. What do you need?\"\n  },\n  {\n    \"id\": \"msg3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a3\",\n      \"t3\"\n    ]\n  },\n  {\n    \"id\": \"a3\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t3\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"I need to build a dashboard layout.\"\n  },\n  {\n    \"id\": \"msg4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a4\",\n      \"t4\"\n    ]\n  },\n  {\n    \"id\": \"a4\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t4\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Great choice! Let me suggest some patterns for that.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"input-row\"\n    ]\n  },\n  {\n    \"id\": \"input-row\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat-input\",\n      \"send-btn\"\n    ]\n  },\n  {\n    \"id\": \"chat-input\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a message...\"\n  },\n  {\n    \"id\": \"send-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Send\",\n    \"icon\": \"send\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "chat-interface"
+      },
+      {
+        "description": "Command palette card with search input and a list of command options.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"search\"\n    ]\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a command or search...\",\n    \"icon\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"options\"\n    ]\n  },\n  {\n    \"id\": \"options\",\n    \"component\": \"Column\",\n    \"gap\": \"1\",\n    \"children\": [\n      \"opt1\",\n      \"opt2\",\n      \"opt3\",\n      \"opt4\",\n      \"opt5\"\n    ]\n  },\n  {\n    \"id\": \"opt1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i1\",\n      \"l1\"\n    ]\n  },\n  {\n    \"id\": \"i1\",\n    \"component\": \"Icon\",\n    \"name\": \"file\"\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Text\",\n    \"textContent\": \"Open File\"\n  },\n  {\n    \"id\": \"opt2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i2\",\n      \"l2\"\n    ]\n  },\n  {\n    \"id\": \"i2\",\n    \"component\": \"Icon\",\n    \"name\": \"gear\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Settings\"\n  },\n  {\n    \"id\": \"opt3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i3\",\n      \"l3\"\n    ]\n  },\n  {\n    \"id\": \"i3\",\n    \"component\": \"Icon\",\n    \"name\": \"palette\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Text\",\n    \"textContent\": \"Change Theme\"\n  },\n  {\n    \"id\": \"opt4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i4\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"i4\",\n    \"component\": \"Icon\",\n    \"name\": \"users\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Text\",\n    \"textContent\": \"Manage Users\"\n  },\n  {\n    \"id\": \"opt5\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i5\",\n      \"l5\"\n    ]\n  },\n  {\n    \"id\": \"i5\",\n    \"component\": \"Icon\",\n    \"name\": \"sign-out\"\n  },\n  {\n    \"id\": \"l5\",\n    \"component\": \"Text\",\n    \"textContent\": \"Sign Out\"\n  }\n]",
+        "name": "command-palette"
+      }
+    ],
+    "keywords": [
+      "card",
+      "ecommerce",
+      "shop",
+      "store",
+      "marketplace",
+      "catalog",
+      "overview",
+      "summary",
+      "grid",
+      "photos",
+      "pictures",
+      "gallery",
+      "portfolio",
+      "responsive"
+    ],
+    "name": "AdiaCard",
+    "related": [
+      "avatar",
+      "input",
+      "button",
+      "alert",
+      "skeleton"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "catalog": [
+        "product",
+        "card",
+        "image",
+        "grid",
+        "inventory"
+      ],
+      "ecommerce": [
+        "product",
+        "pricing",
+        "inventory",
+        "card",
+        "image",
+        "grid"
+      ],
+      "gallery": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "grid": [
+        "table",
+        "data",
+        "card",
+        "image",
+        "feature",
+        "grid"
+      ],
+      "marketplace": [
+        "product",
+        "pricing",
+        "card",
+        "image",
+        "grid",
+        "search",
+        "filter"
+      ],
+      "overview": [
+        "dashboard",
+        "metric",
+        "stat",
+        "card"
+      ],
+      "photos": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "pictures": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "portfolio": [
+        "image",
+        "gallery",
+        "card",
+        "grid",
+        "feature"
+      ],
+      "responsive": [
+        "split",
+        "sidebar",
+        "grid",
+        "card"
+      ],
+      "shop": [
+        "product",
+        "pricing",
+        "inventory",
+        "card"
+      ],
+      "store": [
+        "product",
+        "pricing",
+        "inventory",
+        "card",
+        "image"
+      ],
+      "summary": [
+        "dashboard",
+        "metric",
+        "stat",
+        "card"
+      ]
+    },
+    "tag": "card-ui",
+    "tokens": {
+      "--card-background": {
+        "description": "Override surface background"
+      },
+      "--card-border-color": {
+        "description": "Override border color"
+      },
+      "--card-description-color": {
+        "description": "Override description color"
+      },
+      "--card-divider-color": {
+        "description": "Override divider border color"
+      },
+      "--card-heading-color": {
+        "description": "Override heading color"
+      },
+      "--card-heading-size": {
+        "description": "Override heading text size"
+      },
+      "--card-inset": {
+        "description": "Override --inset for all children"
+      },
+      "--card-radius": {
+        "description": "Override border radius"
+      },
+      "--card-shadow": {
+        "description": "Override box-shadow"
+      },
+      "--card-text-color": {
+        "description": "Override body text color"
+      },
+      "--card-text-size": {
+        "description": "Override body text size"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/card/card.css

@@ -0,0 +1,362 @@
+@property --_card-loading-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@scope (card-ui) {
+  :where(:scope) {
+    /* ── Spacing ── */
+    --card-inset:             var(--a-inset);
+    --card-gap:               var(--a-gap);
+    --card-header-gap:        var(--a-space-2);
+    --card-footer-gap:        var(--a-space-2);
+
+    /* ── Radius ── */
+    --card-radius:            var(--a-radius-lg);
+
+    /* ── Typography ── */
+    --card-font-size:         var(--a-body-size);
+    --card-description-size:  var(--a-caption-size);
+
+    /* ── Colors ── */
+    --card-bg:                var(--a-canvas-1);
+    --card-bg-padded:         var(--a-canvas-0-scrim);
+    --card-fg:                var(--a-fg);
+    --card-heading-fg:        var(--a-fg-strong);
+    --card-description-fg:    var(--a-fg-subtle);
+    --card-border:            1px solid var(--a-border-subtle);
+    --card-divider:           var(--a-border-subtle);
+    --card-shadow:            var(--a-shadow-sm);
+
+    /* ── Loading ring ──
+       The mask composition below uses an opaque source (masks are intensity-only,
+       not theme-colored). `--a-chrome-light` is our theme-stable opaque white token.
+       The visible ring color comes from the accent token. */
+    --card-loading-ring:      var(--a-accent-bg);
+    --card-loading-mask-color: var(--a-chrome-light);
+
+    /* ── Elevation ── */
+    --card-shadow-0:          none;
+    --card-shadow-1:          var(--a-shadow-sm);
+    --card-shadow-2:          var(--a-shadow-md);
+    --card-shadow-3:          var(--a-shadow-lg);
+
+    /* ── Loading motion ── */
+    --card-loading-duration:  1.5s;
+    --card-loading-easing:    linear;
+
+    /* ── Draggable ── */
+    --card-drag-bg-active:    var(--a-accent-muted);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    border-radius: var(--card-radius);
+    background: var(--card-bg);
+    color: var(--card-fg);
+    font-size: var(--card-font-size);
+    border: var(--card-border);
+    box-shadow: var(--card-shadow);
+    overflow: hidden;
+    corner-shape: superellipse(1.1);
+  }
+
+  /* ═══════ Variants — token-only overrides ═══════ */
+
+  :scope[variant="outlined"] {
+    --card-bg: transparent;
+    --card-shadow: none;
+    --card-border: 1px solid var(--a-border);
+  }
+
+  :scope[variant="filled"] {
+    --card-shadow: none;
+    --card-border: none;
+  }
+
+  :scope[variant="ghost"] {
+    --card-bg: transparent;
+    --card-shadow: none;
+    --card-border: none;
+  }
+
+  /* ═══════ Elevation — token override ═══════ */
+
+  :scope[elevation="0"] { --card-shadow: var(--card-shadow-0); }
+  :scope[elevation="1"] { --card-shadow: var(--card-shadow-1); }
+  :scope[elevation="2"] { --card-shadow: var(--card-shadow-2); }
+  :scope[elevation="3"] { --card-shadow: var(--card-shadow-3); }
+
+  /* ═══════ Loading ═══════ */
+
+  :scope[loading] {
+    --card-border: 1px solid transparent;
+    position: relative;
+  }
+
+  :scope[loading]::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    padding: 1px;
+    background: conic-gradient(
+      from var(--_card-loading-angle, 0deg),
+      transparent 0deg,
+      var(--card-loading-ring) 90deg,
+      transparent 180deg
+    );
+    -webkit-mask: linear-gradient(var(--card-loading-mask-color) 0 0) content-box, linear-gradient(var(--card-loading-mask-color) 0 0);
+            mask: linear-gradient(var(--card-loading-mask-color) 0 0) content-box, linear-gradient(var(--card-loading-mask-color) 0 0);
+    -webkit-mask-composite: xor;
+            mask-composite: exclude;
+    animation: card-loading-spin var(--card-loading-duration) var(--card-loading-easing) infinite;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  @keyframes card-loading-spin {
+    to { --_card-loading-angle: 360deg; }
+  }
+
+  /* ═══════ Raw (no chrome) — token overrides ═══════ */
+
+  :scope[raw] {
+    --card-bg: none;
+    --card-border: none;
+    --card-radius: 0;
+    --card-shadow: none;
+  }
+
+  /* ═══════ Draggable ═══════ */
+
+  :scope[draggable] {
+    cursor: grab;
+    user-select: none;
+  }
+
+  :scope[draggable]:active,
+  :scope[draggable][data-draggable-dragging] {
+    cursor: grabbing;
+    background: var(--card-drag-bg-active);
+  }
+
+  /* ═══════ Header ═══════
+     Uses margin (not padding) for inset.
+     [padding] switches to padding mode with background.
+     Grid layout: optional icon | heading+description | optional action */
+
+  > header {
+    display: block;
+    margin: var(--card-inset);
+  }
+
+  /* Activate grid layout only when a DIRECT slotted child is present.
+     Constraining to `:has(> [slot])` prevents deeply nested slots (e.g. an
+     [slot="icon"] inside an <avatar-ui>) from falsely activating the grid. */
+  > header:has(> [slot]) {
+    display: grid;
+    gap: var(--card-header-gap);
+    align-items: center;
+  }
+
+  > header[padding] {
+    margin: 0;
+    padding: var(--card-inset);
+    background: var(--card-bg-padded);
+  }
+
+  > header[divider] {
+    padding-bottom: var(--card-inset);
+    border-bottom: 1px solid var(--card-divider);
+  }
+
+  > header[center] {
+    text-align: center;
+    justify-items: center;
+  }
+
+  /* Column templates — match gen-ui-kit pattern. Direct-child `:has(> …)` so
+     nested [slot="icon"] inside a composite (e.g. <avatar-ui>) can't trigger
+     the icon column by accident. */
+  > header:has(> [slot="icon"]):has(> [slot="action"])         { grid-template-columns: max-content 1fr max-content; }
+  > header:has(> [slot="icon"]):not(:has(> [slot="action"]))   { grid-template-columns: max-content 1fr; }
+  > header:not(:has(> [slot="icon"])):has(> [slot="action"])   { grid-template-columns: 1fr max-content; }
+  > header:not(:has(> [slot="icon"])):not(:has(> [slot="action"])) { grid-template-columns: 1fr; }
+
+  /* Unslotted children (zettel fragment injection, etc.) — each on its own row,
+     spanning the full width, stacked ABOVE the heading/description/action grid.
+     This lets compositions inject logos, banners, etc. into a header without
+     having to know the slot vocabulary. */
+  > header > *:not([slot]):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small) {
+    grid-column: 1 / -1;
+    justify-self: center;
+  }
+
+  /* Icon — first column.
+     Default: single row, center-aligned with heading/action.
+     When a description row exists, spans both rows and anchors to the
+     start so the icon visually aligns with the heading. */
+  > header > [slot="icon"] {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  > header:has(> :is([slot="description"], p, small)) > [slot="icon"] {
+    grid-row: 1 / span 2;
+    align-self: start;
+  }
+
+  /* Heading — row 1 */
+  > header > :is([slot="heading"], h1, h2, h3, h4, h5, h6),
+  > header > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
+    grid-row: 1;
+    line-height: 1.3;
+    margin: 0;
+  }
+  /* Heading slot is a flex container — can hold title + inline badges/metadata */
+  > header > [slot="heading"] {
+    display: flex;
+    align-items: center;
+    gap: var(--card-header-gap);
+  }
+  > header:has(> [slot="icon"]) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 2; }
+  > header:not(:has(> [slot="icon"])) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 1; }
+
+  /* Description — row 2 */
+  > header > :is([slot="description"], p, small) {
+    grid-row: 2;
+    grid-column: 1 / -1;
+    line-height: 1.4;
+    margin: 0;
+  }
+  > header:has(> [slot="icon"]) > :is([slot="description"], p, small) { grid-column: 2 / -1; }
+
+  /* Action — row 1, last column.
+     Flex container so it can hold badge + button + anything inline. */
+  > header [slot="action"] {
+    justify-self: end;
+    align-self: center;
+    grid-row: 1;
+    grid-column: -2 / -1;
+    display: flex;
+    align-items: center;
+    gap: var(--card-header-gap);
+  }
+
+  /* ═══════ Section (body) ═══════
+     Margin-based inset by default.
+     [padding] switches to padding with background.
+     [bleed] removes all spacing for edge-to-edge content. */
+
+  > section {
+    margin: var(--card-inset);
+  }
+
+  > section[padding] {
+    margin: 0;
+    padding: var(--card-inset);
+    background: var(--card-bg-padded);
+  }
+
+  > section[bleed] {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ═══════ Footer ═══════
+     Margin-based inset. Flex row for actions.
+     [divider] adds top border.
+     [padding] switches to padded mode. */
+
+  > footer {
+    display: block;
+    margin: var(--card-inset);
+  }
+
+  /* Activate flex layout when a direct slotted child or multiple children are
+     present. `:has(> [slot])` so nested [slot="…"] inside composites can't
+     trigger the flex row. */
+  > footer:has(> [slot]),
+  > footer:has(> :nth-child(2)) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--card-footer-gap);
+  }
+
+  /* col-ui in footer takes full width (common for stacked footer: button + divider + social) */
+  > footer > col-ui { width: 100%; }
+
+  > footer[justify="end"] {
+    justify-content: flex-end;
+  }
+
+  > footer[divider] {
+    margin-top: var(--card-inset);
+    padding-top: var(--card-inset);
+    border-top: 1px solid var(--card-divider);
+  }
+
+  > footer[padding] {
+    margin: 0;
+    padding: var(--card-inset);
+    background: var(--card-bg-padded);
+  }
+
+  /* Footer with direct-child description + action = space-between */
+  > footer:has(> :is([slot="description"], p, small)):has(> [slot="action"]) {
+    justify-content: space-between;
+  }
+
+  > footer :is([slot="description"], p, small) {
+    font-size: var(--card-description-size);
+    color: var(--card-description-fg);
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+  }
+
+  > footer [slot="action"] {
+    margin-inline-start: auto;
+    display: flex;
+    gap: var(--card-footer-gap);
+  }
+
+  /* Multiple direct action-slotted children (A2UI pattern):
+     only the first pushes the group right; subsequent ones flow with gap */
+  > footer > [slot="action"] ~ [slot="action"] {
+    margin-inline-start: 0;
+  }
+
+  /* ═══════ Images ═══════ */
+
+  > img,
+  > [slot="media"] {
+    display: block;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  > img:first-child,
+  > [slot="media"]:first-child {
+    border-radius: var(--card-radius) var(--card-radius) 0 0;
+  }
+
+  /* ═══════ Nested surface layering ═══════
+     Step background up one canvas level per nesting depth.
+     :scope card-ui has specificity (0,1,1) which beats the
+     :where(:scope) initializer (0,0,0) in each inner scope. */
+  :scope card-ui                                     { --card-bg: var(--a-canvas-1); --card-border: 1px solid var(--a-border); --a-radius: var(--a-radius-md); }
+  :scope card-ui card-ui                              { --card-bg: var(--a-canvas-2); --a-radius: var(--a-radius-sm); }
+  :scope card-ui card-ui card-ui                       { --card-bg: var(--a-canvas-3); }
+  :scope card-ui card-ui card-ui card-ui                { --card-bg: var(--a-canvas-4); }
+  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg: var(--a-canvas-5); }
+  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg: var(--a-canvas-6); }
+}