Orali Design System

Propósito

Muestra una sola sección a la vez dentro del mismo contexto.

Flechas, Home y End mueven el foco entre pestañas.

Quien usa el componente arma el panel con id panel-{id}.

El componente real, en vivo.

El componente maneja el foco; el contenido de cada panel lo arma quien lo usa. Probá con las flechas.

Interactivo

role=tablist/tab con roving tabindex.

Los tokens globales que usa el CSS real del componente.

Token	Valor	Uso
	32px
	1px
	#e4e4e4	Solo divisores y bordes decorativos. Controles usan form.border
	44px
	4px
	1.5px
	14px
	20px
	600
	#6b6b6b	Gramaje, metadatos (5.33:1)
	150ms
	cubic-bezier(0.4, 0, 0.2, 1)
	#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
	#e30613