Modal

Overlay de contenido sin cambiar de página

stable v1.0.0

Preview

Modal real del canon: backdrop, focus trap, cierre por Escape / click en backdrop / botón "Cerrar", scroll bloqueado y Lenis stop/start. El trigger es un <button> con data-modal apuntando al id.

Props

Prop	Tipo	Nota
`id`	string	Requerida. Los triggers usan `data-modal="id"`.
`title`	string	Requerida. Se renderiza como <p>, no heading.
`image`, `imageAlt`	string	Opcional. Una imagen máximo, arriba, recorta a las esquinas del panel.
`metadata`	string	Opcional. Inline con "·".
`closeLabel`	string	Default "Cerrar".
slot `body`	n/a	Párrafos del cuerpo (máximo 3).

Anatomía

Elemento	Familia	Desktop	Mobile
Backdrop	n/a	#000 al 60%	Igual
Panel	n/a	max-width 720px, radius 16px	Igual
Title	Aleo	28px / 400	22px
Body	Georama	16px / 400	16px
Metadata	Georama	12px / 400, secondary (--text-caption)	12px
Close button	Aleo	"Cerrar", 18px, bottom-right	Full width, centered

Comportamiento

Acción	Animación
Abrir	Backdrop + panel fade in, panel scale 0.98→1, 0.3s ease-out
Cerrar	Fade out 0.2s ease-in
Cerrar vías	Click backdrop, botón "Cerrar", tecla Escape

Body scroll se bloquea. Focus trap dentro del modal. Lenis stop/start.

Restricciones

Máximo 3 párrafos de body.
Una imagen máximo. Sin galería.
Sin formularios, sin video, sin modales anidados.
Sin navegación entre modales.
Sin cambio de URL. Modales son efímeros.
display: none cuando cerrado, no opacity: 0 (evita precargar imágenes).

Decisiones

Decisión	Por qué
Texto "Cerrar", no icono ×	Enfoque tipográfico. Más explícito.
Cerrar abajo, no arriba-derecha	El lector termina el contenido y encuentra el cierre
Max 3 párrafos	Fuerza curación. Contenido largo merece su página
display:none, no opacity:0	Evita que el browser precargue imágenes en modales ocultos
<button> como trigger, no <a>	Modales no navegan. <a> con href vacío falla accesibilidad