Contrato del componente
card
Superficie con borde y esquinas redondeadas para agrupar contenido — sin props, un único default slot, sin rol ARIA. El consumidor compone sus propios headings adentro.
- Versión
- v1.0.0
Slot
- Nombre
- default
- Propósito
- card content — the consumer's own headings, body text, and interactive elements are projected into the card's inner container without modification.
Tokens
- spacing
- lg
- radius
- md
Accesibilidad
- native_element
- div
- role
- none — deliberately unlabeled. The card is a purely visual grouping; adding role="region" would demand a labelledby target and would pollute AT navigation in the plain-grouping case. Consumers who need a labeled landmark wrap ds-card in their own <section aria-labelledby>.
- keyboard
- ["N/A — card itself is not focusable; interactive descendants carry their own tab semantics."]
- notes
- Static-display component per docs/superpowers/specs/2026-07-13-a11y-standards.md §A. Content styling (fonts, text color) is inherited from the consumer, not imposed by the card — so contrast responsibility stays with the consumer theme. If an interactive child (button, input) is nested inside, that child's a11y contract stands independently.
JSON validado original
{
"name": "card",
"version": "1.0.0",
"slot": {
"name": "default",
"purpose": "card content — the consumer's own headings, body text, and interactive elements are projected into the card's inner container without modification."
},
"tokens_used": {
"spacing": [
"lg"
],
"radius": [
"md"
]
},
"a11y": {
"native_element": "div",
"role": "none — deliberately unlabeled. The card is a purely visual grouping; adding role=\"region\" would demand a labelledby target and would pollute AT navigation in the plain-grouping case. Consumers who need a labeled landmark wrap ds-card in their own <section aria-labelledby>.",
"keyboard": [
"N/A — card itself is not focusable; interactive descendants carry their own tab semantics."
],
"notes": "Static-display component per docs/superpowers/specs/2026-07-13-a11y-standards.md §A. Content styling (fonts, text color) is inherited from the consumer, not imposed by the card — so contrast responsibility stays with the consumer theme. If an interactive child (button, input) is nested inside, that child's a11y contract stands independently."
}
}