Orali Design System

Propósito

Expande y contrae secciones de contenido para reducir la carga cognitiva.

El usuario compara temas antes de abrir un panel.

El estado vive en aria-expanded del botón; el chevron gira por CSS.

El componente real, en vivo.

Clases accordion__trigger y accordion__trigger--compact (menú mobile). Probalo.

Alto táctil de 44 px.

Los tokens globales que usa el CSS real del componente.

Token	Valor	Uso
	1px
	#e4e4e4	Solo divisores y bordes decorativos. Controles usan form.border
	16px
	44px
	20px
	500
	#1a1a1a	Texto principal (17.4:1)
	2px	Campos: borde de 2px en foco (box-shadow inset para no mover el layout)
	#e30613	Campos en foco: reemplaza el color del borde
	14px
	20px
	#6b6b6b	Gramaje, metadatos (5.33:1)
	150ms
	cubic-bezier(0.4, 0, 0.2, 1)
	32px
	24px
	4px
	12px