Core v1 · 26 componentes

Componentes con contrato antes que catálogo.

Cada entrada declara anatomía, variantes, estados, accesibilidad y adaptadores. La madurez de cada componente indica si sigue especificado o ya cuenta con implementación y QA verificables.

Abrir contrato JSON Ver patrones

Madurez actual · Especificado

Especificado no significa implementado.

Un componente pasa a implementado cuando existe una demo pública y un component/component set Figma enlazado a tokens reales. Solo será verificado después de QA visual, accesible y machine-readable.

Contrato26 entradas con evidencia, anatomía, variantes, estados y adaptadores.

Implementación15 componentes con demo pública y asset Figma enlazado; el resto conserva su deuda visible.

ProductosCada consumidor adopta el contrato mediante su propio adaptador; no existen imports cruzados entre repositorios.

Primer componente verificado · 4 component sets

Button

Cuatro prioridades visuales comparten anatomía y comportamiento. Usa un botón nativo para acciones y la variante de enlace sólo para navegación. Compact se reserva a interfaces densas; una acción táctil principal mantiene el objetivo de 44 px.

Prioridad

Tamaño y estado

Reglas de accesibilidad

Disabled requiere una razón textual o contextual cuando la acción es material. Loading conserva la etiqueta y expone aria-busy.

Componente verificado · 3 component sets

Icon button

El icono nunca sustituye el nombre accesible. Usa selected sólo para una acción binaria y conserva default para acciones puntuales como cerrar, copiar o abrir un menú.

Prioridad

Tamaño y estado

Compact mide 32 px y se limita a densidad alta. En contexto táctil se usa el tamaño default de 44 px.

Componente verificado · 2 component sets

Link

Los enlaces navegan; las acciones usan Button. El subrayado identifica enlaces de contenido y aria-current mantiene la ubicación activa distinguible sin depender de hover.

Contenido

Un enlace inline vive dentro de una frase, por ejemplo para consultar las reglas de accesibilidad.

Foundations Volver a componentes

Navegación

El estado current se expone como aria-current="page". Visited conserva subrayado en enlaces de contenido.

Componente verificado · 1 component set

Field

Field compone etiqueta, control, ayuda y error sin sustituir el control nativo. El consumidor enlaza el mismo controlId mediante for/id y aplica a su input los atributos required, disabled, readonly, aria-invalid y aria-describedby que correspondan.

Opcional con ayuda

Alias

Nombre público que verán otras personas.

Required e invalid

Usa una dirección de contacto válida.

Error: Introduce una dirección válida.

Compact y disabled

Código

No disponible con la configuración actual.

Read-only

Identificador

Se genera al crear el recurso.

Field publica el atributo data-describedby como ayuda de integración, pero no modifica el control slotted: la asociación accesible debe existir en el HTML resultante y se audita en cada adaptador.

Componente verificado · 3 component sets

Text field

El tipo visual no sustituye la semántica HTML: Search usa type="search", Numeric combina type="number" e inputmode="decimal", y cualquier variante conserva un label externo mediante Field.

Text

Nombre

Admite texto de una sola línea.

Search con acción

Buscar

Numeric compact

Precio

Usa el modo de entrada decimal.

Invalid

Handle

Error: Usa entre 3 y 20 caracteres.

Componente verificado · 1 component set

Text area

Text area conserva el elemento <textarea>. Default permite resize vertical, Resizable permite ambos ejes y Fixed lo bloquea. El contador sólo se asocia mediante aria-describedby cuando existe un límite real.

Default con límite

Mensaje

0 / 240

Máximo 240 caracteres.

Resizable

Notas

Fixed e invalid

Resumen

Error: El resumen debe incluir contexto suficiente.

Read-only

Salida

Línea uno
Línea dos

Contenido generado por el sistema.

Componente verificado · 1 component set

Select

El adaptador web prioriza <select> nativo y conserva teclado, nombre, valor y popup de plataforma. El adaptador custom sólo se usa cuando las opciones necesitan una composición que el control nativo no puede expresar, y entonces debe implementar el patrón listbox completo.

Native seleccionado

Tipo

Filtra el contenido por categoría.

Placeholder requerido

Scope

Selecciona el alcance antes de continuar.

Compact y disabled

Densidad

No disponible con la configuración actual.

Invalid

Adaptador

Error: Selecciona un adaptador compatible.

Figma representa el estado abierto del adaptador Native sólo como referencia de comportamiento: la lista real y su apariencia pertenecen al navegador o al sistema operativo. Custom debe anunciar aria-expanded, valor y opción activa, y soportar navegación por teclado completa.

Componente verificado · 1 component set

Checkbox

La fila completa funciona como label y objetivo de 44 px. Checked y Unchecked conservan el input nativo; Indeterminate establece la propiedad DOM real y expone mixed. Los checkbox de menú son un adaptador contextual distinto.

Unchecked

Recibir notificaciones

Checked con descripción

Confirmar copia de seguridadNecesario antes de continuar.

Indeterminate

Seleccionar todasHay elementos seleccionados parcialmente.

Invalid

Acepto las condicionesError: confirma esta selección para continuar.

Disabled

Opción administradaNo puede modificarse en este contexto.

Componente verificado · 1 component set

Radio

Radio es el item; fieldset, legend y el mismo name forman el grupo. Así se conservan selección única, nombre accesible y navegación nativa con flechas. Los radio items de menú mantienen menuitemradio como adaptador contextual.

Grupo con selección

Tema de interfazSistemaClaroOscuroUsa una superficie oscura y texto claro.

Invalid y disabled

Canal de actualizaciónEstableError: elige un canal para continuar.AdministradoNo puede modificarse en este contexto.

Componente verificado · 1 component set

Switch

Un switch modifica una preferencia de efecto inmediato y anuncia su estado on/off. No sustituye al Checkbox cuando el usuario debe confirmar una elección. Compact y Default cambian el track, no el objetivo de 44 px ni la etiqueta visible.

Off y On

Etiquetas de calleRespuesta hápticaAplica el cambio de inmediato.

Disabled

Opción administradaEl estado permanece visible pero no puede modificarse.

Componente verificado · 1 component set

Slider

Core v1 cubre un valor único: los tres productos auditados definen min, max y step, pero ninguno demuestra dos thumbs. La etiqueta es visible y el valor opcional se actualiza junto al active track; el input nativo conserva flechas, Page Up/Down, Home y End.

Valor y step

Valor oculto y disabled

Componente verificado · 2 component sets

Tabs

Tabs alterna paneles locales dentro de una misma vista. Core v1 sólo define orientación horizontal, estilos Line/Contained, roving focus y activación automática; si cada opción navega a otra URL debe usar enlaces y navegación, no role="tab".

Line · Default

Panel asociado a Resumen.

Contained · Compact

Panel compacto con overflow horizontal cuando las etiquetas no caben.

Componente verificado · 2 component sets

Toggle group

Este grupo de botones elige exactamente un valor y expone aria-pressed; no controla paneles como Tabs ni navega como un grupo de enlaces. Core v1 sólo incluye orientación horizontal y selección única porque la selección múltiple no aparece en los consumidores auditados.

Single · Default

Single · Compact

Componente verificado · 1 component set

Surface

Surface aporta contención visual, no semántica. El consumidor elige div, article, section o aside según el contenido; una card interactiva conserva un único enlace o botón primario y no convierte el contenedor completo en un control genérico.

Jerarquía mediante espacio, sin borde ni profundidad decorativa.

Una región delimitada cuando el borde ayuda a reconocer la agrupación.

La elevación Surface se reserva a cards discretas; el enlace mantiene su propio foco.

Componente implementado · 2 component sets

Badge and tag

Badge comunica metadatos estáticos y no recibe foco. Tag usa un botón nativo para acciones o selección y un enlace para navegación; el significado nunca depende solo del tono o del icono.

Badge estático

MetadataFeaturedConnectedErrorPendingRead only

La etiqueta conserva el significado aunque desaparezcan color e icono.

Tag interactivo

Componentes Unavailable

El botón expone aria-pressed; el enlace seleccionado usa aria-current y un enlace deshabilitado pierde destino y orden de tabulación.

01 · action

Acciones

ButtonbuttonVerificado

Anatomía

container
label
optional-leading-icon
optional-trailing-icon

Variantes

primary
secondary
contrast
quiet
compact
default

Estados

default
hover
pressed
focus-visible
disabled
loading

Accesibilidad

Reglanative-button-or-link-semantics
Reglavisible-focus
Reglaaccessible-name
Regladisabled-reason-when-material

Adaptadores

semantic-html · react · compose

Evidencia y Figma

5 scopes · cross-scope · Figma verified · 113:88

Icon buttonicon-buttonVerificado

Anatomía

container
icon

Variantes

primary
secondary
quiet
compact
default

Estados

default
hover
pressed
focus-visible
disabled
selected

Accesibilidad

Reglaaccessible-name-required
Reglaminimum-touch-target
Reglavisible-focus
Reglaselected-state-announced

Adaptadores

semantic-html · react · compose

Evidencia y Figma

3 scopes · cross-scope · Figma verified · 123:52

LinklinkVerificado

Anatomía

label
optional-icon

Variantes

inline
standalone
back
navigation

Estados

default
hover
focus-visible
visited
current

Accesibilidad

Reglanative-link-semantics
Reglapurpose-from-text-or-context
Reglavisible-focus
Reglacurrent-state-announced

Adaptadores

semantic-html · react · compose

Evidencia y Figma

5 scopes · cross-scope · Figma verified · 132:77

02 · form

Formularios

FieldfieldVerificado

Anatomía

label
control-slot
optional-help
optional-error

Variantes

optional
required
compact
default

Estados

default
focus-within
disabled
invalid
read-only

Accesibilidad

Reglaprogrammatic-label
Reglahelp-and-error-associated
Reglarequired-announced
Reglaerror-not-color-only

Adaptadores

semantic-html · react · compose

Evidencia y Figma

4 scopes · cross-scope · Figma verified · 144:123

Text fieldtext-fieldVerificado

Anatomía

input
optional-leading-icon
optional-trailing-action

Variantes

text
search
numeric
compact
default

Estados

empty
filled
hover
focus-visible
disabled
invalid
read-only

Accesibilidad

Reglalabel-required
Reglanative-input-semantics
Reglacorrect-input-mode
Reglaerror-associated

Adaptadores

semantic-html · react · compose

Evidencia y Figma

4 scopes · cross-scope · Figma verified · 152:115

Text areatext-areaVerificado

Anatomía

multiline-input
optional-counter

Variantes

default
resizable
fixed

Estados

empty
filled
hover
focus-visible
disabled
invalid
read-only

Accesibilidad

Reglalabel-required
Reglanative-textarea-semantics
Reglacounter-announced-when-limiting
Reglaerror-associated

Adaptadores

semantic-html · react · compose

Evidencia y Figma

3 scopes · cross-scope · Figma verified · 158:122

SelectselectVerificado

Anatomía

trigger
value
indicator
option-list

Variantes

native
custom
compact
default

Estados

placeholder
selected
open
focus-visible
disabled
invalid

Accesibilidad

Reglalabel-required
Reglanative-keyboard-selection
Reglaexpanded-state-announced
Reglaactive-option-announced
Reglaerror-associated

Adaptadores

semantic-html · react · compose

Evidencia y Figma

4 scopes · cross-scope · Figma verified · 163:222

03 · selection

Selección y navegación local

CheckboxcheckboxVerificado

Anatomía

control
label
optional-description

Variantes

unchecked
checked
indeterminate

Estados

default
hover
focus-visible
disabled
invalid

Accesibilidad

Reglanative-or-equivalent-semantics
Reglalabel-click-target
Reglamixed-state-announced
Reglavisible-focus
Reglaerror-associated

Adaptadores

semantic-html · react · compose

Evidencia y Figma

2 scopes · cross-scope · Figma verified · 169:149

RadioradioVerificado

Anatomía

control
label
optional-description

Variantes

unselected
selected

Estados

default
hover
focus-visible
disabled
invalid

Accesibilidad

Reglanative-or-equivalent-semantics
Reglagroup-name
Reglalabel-click-target
Reglasingle-selection
Reglaarrow-key-navigation
Reglavisible-focus
Reglaerror-associated

Adaptadores

semantic-html · react · compose

Evidencia y Figma

2 scopes · cross-scope · Figma verified · 173:82

SwitchswitchVerificado

Anatomía

track
thumb
label
optional-description

Variantes

compact
default
off
on

Estados

default
hover
focus-visible
disabled

Accesibilidad

Reglarole-switch-or-platform-equivalent
Reglastate-announced
Reglaimmediate-effect-only
Reglalabel-click-target
Reglalabel-required
Reglavisible-focus

Adaptadores

semantic-html · react · compose

Evidencia y Figma

2 scopes · cross-scope · Figma verified · 176:135

SlidersliderVerificado

Anatomía

label
track
active-track
thumb
optional-value

Variantes

single

Estados

default
hover
focus-visible
dragging
disabled

Accesibilidad

Reglanative-or-equivalent-slider-semantics
Reglalabel-required
Reglakeyboard-adjustable
Reglavalue-announced
Reglamin-max-step-defined
Reglavisible-focus

Adaptadores

semantic-html · react · compose

Evidencia y Figma

3 scopes · cross-scope · Figma verified · 180:52

TabstabsVerificado

Anatomía

tab-list
tab
active-indicator
tab-panel

Variantes

line
contained
compact
default

Estados

default
hover
focus-visible
selected
disabled

Accesibilidad

Reglatab-semantics
Reglalabelled-tablist
Reglaroving-focus
Reglaautomatic-activation
Reglaarrow-home-end-navigation
Reglapanel-associated
Reglahorizontal-overflow-preserves-labels
Reglavisible-focus

Adaptadores

semantic-html · react · compose

Evidencia y Figma

3 scopes · cross-scope · Figma verified · 183:103

Toggle grouptoggle-groupVerificado

Anatomía

group
toggle-items

Variantes

single
horizontal
compact
default

Estados

default
hover
focus-visible
selected
disabled

Accesibilidad

Reglalabelled-group
Reglanative-button-semantics
Reglaaria-pressed
Reglaexactly-one-selected
Reglatab-order-preserved
Reglaspace-enter-activation
Reglavisible-focus
Reglahorizontal-overflow-preserves-labels

Adaptadores

semantic-html · react · compose

Evidencia y Figma

2 scopes · cross-scope · Figma verified · 188:47

04 · content

Contenido y datos

SurfacesurfaceVerificado

Anatomía

container
optional-header
content-slot
optional-footer

Variantes

plain
muted
outlined
elevated
compact
default

Estados

default

Accesibilidad

Reglasemantic-container-chosen-by-content
Reglasection-and-aside-labelled
Reglaarticle-has-heading
Reglainteractive-surface-has-single-target
Reglatarget-has-visible-focus
Reglano-generic-clickable-div
Reglano-nested-card-decoration

Adaptadores

semantic-html · react · compose

Evidencia y Figma

5 scopes · cross-scope · Figma verified · 193:46

Badge and tagbadgeImplementado

Anatomía

badge-label
optional-badge-icon
tag-label
optional-tag-icon

Variantes

badge-neutral
badge-brand
badge-success
badge-danger
badge-warning
badge-info
interactive-tag

Estados

static
default
hover
focus-visible
selected
disabled

Accesibilidad

Reglameaning-not-color-only
Reglastatic-badge-not-focusable
Reglanative-button-or-anchor-semantics
Reglaaria-pressed-or-aria-current
Regladisabled-link-removes-href-and-tab-stop
Reglaconcise-untruncated-label
Reglatouch-target-preserved

Adaptadores

semantic-html · react · compose

Evidencia y Figma

4 scopes · cross-scope · Figma implemented · 199:25

List itemlist-itemEspecificado

Anatomía

optional-leading
primary-text
optional-secondary-text
optional-trailing

Variantes

single-line
two-line
interactive
compact
default

Estados

default
hover
focus-visible
selected
disabled

Accesibilidad

Reglalist-semantics-at-container
Reglasingle-primary-action
Reglavisible-focus
Reglatouch-target-preserved

Adaptadores

semantic-html · react · compose

Evidencia y Figma

5 scopes · cross-scope · Figma planned

TabletableEspecificado

Anatomía

caption
header
rows
cells
optional-row-action

Variantes

content
data
compact
responsive-scroll

Estados

default
hover
focus-within
selected
loading
empty

Accesibilidad

Reglanative-table-semantics
Reglaheaders-associated
Reglacaption-or-context
Reglasort-state-announced

Adaptadores

semantic-html · react · compose

Evidencia y Figma

4 scopes · cross-scope · Figma planned

05 · feedback

Feedback y espera

Alert and banneralertEspecificado

Anatomía

status-icon
title
message
optional-action

Variantes

success
danger
warning
info
inline
banner

Estados

static
live
dismissible

Accesibilidad

Reglameaning-not-color-only
Reglalive-only-when-needed
Reglaaction-purpose-clear
Regladismiss-control-named

Adaptadores

semantic-html · react · compose

Evidencia y Figma

5 scopes · cross-scope · Figma planned

Empty stateempty-stateEspecificado

Anatomía

title
message
optional-action
optional-illustration

Variantes

first-use
no-results
no-data
unavailable

Estados

static
actionable

Accesibilidad

Reglaexplains-why-empty
Reglanext-action-optional-and-clear
Reglaillustration-decorative-unless-informative

Adaptadores

semantic-html · react · compose

Evidencia y Figma

5 scopes · cross-scope · Figma planned

ProgressprogressEspecificado

Anatomía

indicator
optional-label
optional-value

Variantes

circular
linear
indeterminate
determinate

Estados

active
paused
complete
error

Accesibilidad

Reglabusy-region-associated
Regladeterminate-value-announced
Reglalabel-provided
Reglareduced-motion-respected

Adaptadores

semantic-html · react · compose

Evidencia y Figma

4 scopes · cross-scope · Figma planned

Toast and snackbartoastEspecificado

Anatomía

message
optional-status-icon
optional-action
optional-dismiss

Variantes

neutral
success
danger
warning
info

Estados

entering
visible
leaving

Accesibilidad

Reglapolite-by-default
Reglacritical-errors-not-toast-only
Reglapause-or-persist-for-action
Reglafocus-not-stolen

Adaptadores

semantic-html · react · compose

Evidencia y Figma

2 scopes · cross-scope · Figma planned

06 · overlay

Overlays

DialogdialogEspecificado

Anatomía

scrim
container
title
content
actions
optional-close

Variantes

informational
confirmation
destructive
form

Estados

closed
opening
open
closing

Accesibilidad

Reglamodal-semantics
Reglalabelled-dialog
Reglainitial-focus
Reglafocus-contained-and-returned
Reglaescape-closes-when-safe

Adaptadores

semantic-html · react · compose

Evidencia y Figma

3 scopes · cross-scope · Figma planned

SheetsheetEspecificado

Anatomía

scrim
panel
title
content
optional-actions
close

Variantes

side
bottom
modal
non-modal

Estados

closed
opening
open
closing

Accesibilidad

Reglamodal-state-explicit
Reglalabelled-panel
Reglafocus-managed
Regladismiss-method-visible

Adaptadores

semantic-html · react · compose

Evidencia y Figma

3 scopes · cross-scope · Figma planned

07 · disclosure

Divulgación progresiva

DisclosuredisclosureEspecificado

Anatomía

trigger
indicator
content

Variantes

single
grouped

Estados

collapsed
expanded
focus-visible
disabled

Accesibilidad

Reglaexpanded-state-announced
Reglatrigger-is-button
Reglacontent-associated
Reglakeyboard-operable

Adaptadores

semantic-html · react · compose

Evidencia y Figma

1 scopes · accessibility-invariant · Figma planned