Taxonomía
Cada componente es una primitiva con nombre, versión y lugar en el sistema compartido.
Chiralkit / UI Kit
Specs de componentes UI
Contratos validados y neutrales a la implementación para los componentes que llevan el UI Kit a cada stack.
Fundamentos
Tokens
Los contratos nombran los tokens de diseño que consume un componente sin atarlo a una implementación.
Accesibilidad
La semántica accesible, el teclado y los requisitos de etiquetado forman parte del contrato público.
Composición
Props, eventos, slots y estados hacen que el componente componga entre runtimes.
Contratos validados
12 contratos
badge
Contrato estableChip pequeño para etiquetar tipo, estado o categoría.
button
Contrato estableBotón base del design system: primary/secondary + estado disabled.
card
Contrato estableSuperficie con borde y esquinas redondeadas para agrupar contenido — sin props, un único default slot, sin rol ARIA. El consumidor compone sus propios headings adentro.
checkbox
Contrato estable<input type="checkbox"> nativo envuelto como custom element del design system — props checked/indeterminate se reenvían al DOM, dsChange emite el nuevo estado booleano. Mantiene el render nativo del checkbox para preservar el comportamiento de AT y del modo forced-colors.
code-block
Contrato estableBloque de código con etiqueta de lenguaje y botón de copiar integrado.
dialog
Contrato estableElemento <dialog> nativo envuelto como custom element del design system — showModal() entrega la máquina de estado modal (focus trap, Escape para cerrar, background inerte, return-focus) vía la plataforma del navegador, sin ARIA scratch. Props: open, label|labelledBy, describedBy. Eventos: dsOpen, dsClose.
input
Contrato estable<input> nativo envuelto como custom element del design system — soporta tipos text/email/password/search/tel/url/number, invalid+describedBy para errores, y emite dsInput con el valor actual en cada tecla.
loader
Contrato estableIndicador de carga indeterminada construido a partir del path del logo — dos mitades espejo oscilan alrededor del centro del anillo.
select
Contrato estable<select> nativo envuelto como custom element del design system — opciones vía prop, emite dsChange con el nuevo valor.
tabs
Contrato establePatrón WAI-ARIA Tabs (scratch build) — solo la tablist, con roving tabindex, navegación por arrow keys, Home/End y activación automática. El consumidor renderiza sus propios tabpanels en light DOM y togglea visibilidad en dsChange. shadow:false para que los ids de los tabs sean referenciables desde los tabpanels vía aria-labelledby.
textarea
Contrato estable<textarea> nativo envuelto como custom element del design system — campo de texto multilínea con prop rows, invalid+describedBy para errores, y evento dsInput en cada tecla.
tooltip
Contrato establePatrón WAI-ARIA Tooltip (scratch build) — envuelve el primer Element child del consumidor como trigger, abre en hover (con openDelay) y en focus (inmediato), se cierra con Escape sin sacar el foco del trigger, y también en blur o mouseleave real. shadow:false para que aria-describedby del trigger pueda apuntar al id del tooltip.