Alerta

stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'Atención' }, 'Hay una nueva versión de sitelo disponible.'),
  alert({ color: 'success', title: 'Desplegado' }, '169 páginas publicadas en 1,7 segundos.'),
  alert({ color: 'warning', title: 'Página lenta' }, 'Una página tardó más de 500 ms en renderizarse.'),
  alert({ color: 'danger', title: 'Compilación fallida' }, 'Dos enlaces internos apuntan a páginas que no existen.'),
  alert({ color: 'neutral', title: 'Nota' }, 'Las islas están desactivadas en este proyecto.'),
)

stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Guardado.'),
  alert({ color: 'danger' }, 'Ese correo ya está en uso.'),
)

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'La opción por defecto: una superficie teñida.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Transparente, con un borde de color.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'El color pleno de la paleta, para algo que no se puede pasar por alto.'),
)

stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Sin icono' }, 'Solo el texto.'),
  alert({
    color: 'primary',
    title: 'Un icono propio',
    icon: icon('star'),
  }, 'Vale cualquier SVG: los iconos son marcado, no una dependencia.'),
)

alert({ color: 'primary', title: 'Descartable', dismissible: true },
  'Pulsa la × — el manejador se descarga solo en la primera pulsación.',
)

alert({ color: 'danger', title: 'Falló la comprobación de enlaces' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'Dos enlaces apuntan a páginas que no se generaron:'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: 'enlazado desde /docs' }),
      listItem({ title: '/blog/draft', description: 'enlazado desde /blog' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Ver detalles'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Ignorar'),
    ),
  ),
)