feat: Card component — all 10 integration surfaces

[Copilot]

Baseline documentation change

Scope

Implements the Card component (Prio 2 Extended, issue #44) across all required integration surfaces. Card is a content container supporting image/media slots, header/body/footer structure, interactive (clickable) variant, horizontal and vertical layouts, and a selection state.

Tokens — 12 component-scoped tokens added to figma/exports/Patterns (UI).tokens.json:

• Container background, border (default/selected/radius/size), text (default/subtle), padding (block/inline), gap, interactive hover/active backgrounds
• All alias to existing Appearance (Modes) or Semantics (Brands) variables; --uif-card-border-radius uses the pre-existing Brand/Corner/Card token

CSS pattern — src/ui/patterns/card.css:

• Slots: .uif-card-media, .uif-card-header, .uif-card-body, .uif-card-footer
• Layout modifier: .horizontal (flex-direction row, media constrained to 40% inline)
• Interactive variant: hover/active/focus-visible states via token references
• Selection state: .is-selected applies brand border color at 2× weight

Nunjucks macros — card(), cardMedia(), cardHeader(), cardBody(), cardFooter() added to site/_includes/macros/ui.njk. Link cards (href set) use aria-current="true" for selected state; article cards use aria-selected="true".

{% call uif.card(layout="horizontal", interactive=true) %}
  {% call uif.cardMedia(src="/img/photo.jpg", alt="…") %}{% endcall %}
  {% call uif.cardHeader() %}<strong>Title</strong>{% endcall %}
  {% call uif.cardBody() %}<p>Description.</p>{% endcall %}
  {% call uif.cardFooter() %}{{ uif.button("Action") }}{% endcall %}
{% endcall %}

Web Component — src/elements/ui-card.js registers uif-card, uif-card-media, uif-card-header, uif-card-body, uif-card-footer. Exported from src/elements/index.js and added to package.json exports map.

Docs + Playground — site/patterns/card.md covers anatomy, layout options, interactive/selection states, usage guidelines, keyboard interactions, and accessibility. site/patterns/card-playground.md exposes title, body, layout, interactive, selected, showMedia, and showFooter controls.

Code Connect — schemas/web-card.figma.ts maps Layout, Interactive, and State Figma properties to CSS class composition.

Review checklist

• Terminology is consistent with docs/terminology.md.
• docs/canonical-reference-matrix.md is updated when new terms, rules, or canonical sources are introduced.
• @ui-foundations-maintainers has been notified for review.
• Ownership remains team-based; no person-specific or parallel ownership rule is introduced.
• Changes preserve the Runtime/Vault authority boundary.
• Relevant documentation and CI checks pass.

• Fixes Component: Card #44