badge
ui-componentChip pequeño para etiquetar tipo, estado o categoría.
Chiralkit / UI Kit
Specs de ChiralUI
Explora los contratos que componen ChiralUI: tokens compartidos, primitivas, patrones, enantiómeros, funcionalidades y composiciones.
Anillo 0
Tokens
Valores visuales compartidos que consume cada módulo de UI. Inspecciona las propiedades CSS personalizadas y sus valores actuales directamente desde @chiralkit/tokens.
Inspeccionar una capa de tokens
Seleccionar una capa del átomo
Valores puros y sin contexto, como la paleta de color y las escalas de espaciado y tipografía. Definen qué valores existen, no qué función cumplen.
Roles con significado, como superficie, texto o marca, conectan los valores puros con la intención de la interfaz. Los temas pueden reasignar estos roles sin cambiar la paleta primitiva.
Los valores de componente y estado describen cómo responden los controles en estados normal, hover, foco, activo y deshabilitado; su significado base procede de los tokens semánticos.
Un átomo de carbono, la unidad con la que se construyen todos los anillos posteriores. Sus seis protones llevan grabado un 0: la capa de tokens primitivos. Sus seis neutrones llevan grabado un 1: la capa semántica. Sus seis electrones también llevan grabado un 1: la capa de interacción. Los dos 1 se distinguen por su forma y por la bandeja bajo el átomo, donde las referencias van en orden primitivo → semántico → interacción. Un tema solo reasigna los roles semánticos; los valores primitivos no cambian.
Ver todas las declaraciones de tokens generadas
Colores y foco
| Propiedad CSS personalizada | Valor de origen |
|---|---|
--ds-color-primary | var(--ds-semantic-color-brand) |
--ds-color-primary-hover | var(--ds-semantic-color-brand-hover) |
--ds-color-secondary | var(--ds-semantic-color-secondary) |
--ds-color-secondary-hover | var(--ds-semantic-color-secondary-hover) |
--ds-color-text-on-primary | var(--ds-semantic-color-text-on-primary) |
--ds-color-text-on-secondary | var(--ds-semantic-color-text-on-secondary) |
--ds-color-focus | var(--ds-interactive-button-focus) |
Espaciado
| Propiedad CSS personalizada | Valor de origen |
|---|---|
--ds-spacing-xs | var(--ds-primitive-spacing-xs) |
--ds-spacing-sm | var(--ds-primitive-spacing-sm) |
--ds-spacing-md | var(--ds-primitive-spacing-md) |
--ds-spacing-lg | var(--ds-primitive-spacing-lg) |
--ds-spacing-xl | var(--ds-primitive-spacing-xl) |
Radio
| Propiedad CSS personalizada | Valor de origen |
|---|---|
--ds-radius-sm | var(--ds-primitive-radius-sm) |
--ds-radius-md | var(--ds-primitive-radius-md) |
Tipografía
| Propiedad CSS personalizada | Valor de origen |
|---|---|
--ds-font-family | var(--ds-primitive-font-family) |
--ds-font-size-md | var(--ds-primitive-font-size-md) |
Anillo 1a
Primitivas
Piezas de UI independientes definidas por contratos de componente: propiedades, eventos, slots, estados y comportamiento accesible.
Inspeccionar la anatomía de la figura
Seleccionar una parte de la figura
El carbono central heredado del anillo 0. Enlaza los grupos amino y carboxilo y lleva los dos hidrógenos del residuo.
El nitrógeno y sus hidrógenos forman el extremo amino de la glicina. En una cadena, este extremo se une al residuo anterior mediante un enlace peptídico.
El carbono carbonílico y dos oxígenos forman el extremo carboxilo de la glicina. Al unirse al grupo amino siguiente, libera agua y forma un enlace peptídico.
Una molécula de glicina: un átomo de carbono como el del anillo 0, enlazado con átomos de nitrógeno, oxígeno e hidrógeno en un solo aminoácido.
button
ui-componentBotón base del design system: primary/secondary + estado disabled.
card
ui-componentSuperficie con borde y esquinas redondeadas para agrupar contenido — sin props, un único default slot, sin rol ARIA. El consumidor compone sus propios headings dentro.
checkbox
ui-component<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
ui-componentBloque de código con etiqueta de lenguaje y botón de copiar integrado.
dialog
ui-componentElemento <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
ui-component<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
ui-componentIndicador de carga indeterminada construido a partir del path del logo — dos mitades espejo oscilan alrededor del centro del anillo.
select
ui-component<select> nativo envuelto como custom element del design system — opciones vía prop, emite dsChange con el nuevo valor.
textarea
ui-component<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.
Anillo 1b
Patrones
Patrones de interacción reutilizables construidos con primitivas, con contratos explícitos de estado, eventos y accesibilidad.
Inspeccionar la anatomía de la figura
Seleccionar una parte de la figura
Cada residuo es una unidad de glicina. Al repetirla, la molécula del anillo 1a se convierte en un esqueleto polipeptídico más largo.
Estos enlaces conectan el carbono del carboxilo de un residuo con el nitrógeno del siguiente. Cada enlace se forma al liberar agua.
Una cadena polipeptídica: cinco moléculas de glicina del anillo 1a unidas una tras otra por enlaces peptídicos; cada enlace libera una molécula de agua.
tabs
ui-componentPatró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.
tooltip
ui-componentPatró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.
Anillo 2
Enantiómeros
Pares de UI que comparten una estructura y un eje especular identificado, con funciones opuestas sobre el mismo sustrato dentro de un sistema. Las variantes o la semejanza visual por sí solas no constituyen un par.
Inspeccionar la anatomía de la figura
Seleccionar una parte de la figura
La forma L que utilizan las proteínas de los seres vivos. Su disposición alrededor del carbono alfa le da una forma quiral.
El plano refleja una disposición en la otra. Ninguna rotación las superpone, por eso son enantiómeros.
La forma reflejada de la L-alanina. Tiene los mismos átomos y enlaces, dispuestos con la quiralidad opuesta.
Dos moléculas de alanina; cada una es la glicina del anillo 1a con un hidrógeno sustituido por un grupo metilo. El hidrógeno que se sustituye decide la mano: L y D son imágenes especulares respecto al plano que las separa, y ninguna rotación superpone exactamente una sobre la otra.
figure-canvas
ui-componentViewport reutilizable para figuras con zoom, controles de inspección y rotación horizontal opcional mediante arrastre.
Anillo 3
Funcionalidades
Capacidades funcionales que combinan contratos de anillos inferiores en una capacidad coherente para el usuario.
Inspeccionar la anatomía de la figura
Seleccionar una parte de la figura
El anillo c de la membrana gira junto con el tallo central γ. El flujo de protones por F₀ impulsa la rotación y la acopla a la cabeza catalítica.
La cabeza α₃β₃ permanece inmóvil alrededor del tallo giratorio. Sus subunidades β aprovechan ese movimiento relativo para catalizar la formación de ATP.
La membrana ancla el rotor F₀ y separa el gradiente de protones que aporta energía a la rotación.
La ATP sintasa, un motor molecular construido solo con cadenas proteicas de mano L (anillo 2). Un anillo de subunidades gira en la membrana e impulsa un tallo central dentro de una cabeza que un tallo lateral mantiene inmóvil.
Todavía no hay módulos de funcionalidad de UI registrados. Este anillo describe la capa funcional; no enumera ejemplos sin registrar.
Anillo 5
Composiciones
Composiciones de páginas y aplicaciones que ensamblan contratos de anillos inferiores. Los contratos de layout definen regiones, regiones obligatorias, variantes y uso de tokens.
Inspeccionar la anatomía de la figura
Seleccionar una parte de la figura
El núcleo guarda el material genético dentro de un compartimento rodeado por membrana, representado aquí como un cuerpo con poros.
La mitocondria contiene una membrana interna plegada y las ATP sintasas del anillo 3, que acoplan un gradiente de protones con la producción de ATP.
La frontera flexible de lípidos delimita la célula y separa su interior del entorno.
El medio fluido que rodea los orgánulos contiene moléculas libres y cadenas construidas a partir de los anillos moleculares anteriores.
Una célula en sección, construida con todo lo que hay debajo: un núcleo, cadenas proteicas libres y aminoácidos de los anillos 1a a 2, y una mitocondria cuya membrana interna alberga los motores del anillo 3.
app-shell
ui-layoutGeometría de aplicación neutral al framework con carriles primario y secundario opcionales alrededor de una región principal obligatoria.
headerprimarymainsecondaryfooterEtapa 1 / 6