Hinweis

stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'Übrigens' }, 'Eine neue Version von sitelo ist verfügbar.'),
  alert({ color: 'success', title: 'Deployt' }, '169 Seiten in 1,7 Sekunden veröffentlicht.'),
  alert({ color: 'warning', title: 'Langsame Seite' }, 'Eine Seite brauchte über 500 ms zum Rendern.'),
  alert({ color: 'danger', title: 'Build fehlgeschlagen' }, 'Zwei interne Links zeigen auf Seiten, die es nicht gibt.'),
  alert({ color: 'neutral', title: 'Hinweis' }, 'Islands sind in diesem Projekt deaktiviert.'),
)

stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Gespeichert.'),
  alert({ color: 'danger' }, 'Diese E-Mail-Adresse wird bereits verwendet.'),
)

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'Der Standard — eine getönte Fläche.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Transparent, mit farbigem Rahmen.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'Die volle Palettenfarbe, für alles, was nicht übersehen werden darf.'),
)

stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Ohne Icon' }, 'Nur der Text.'),
  alert({
    color: 'primary',
    title: 'Ein eigenes Icon',
    icon: icon('star'),
  }, 'Jedes SVG funktioniert — Icons sind Markup, keine Abhängigkeit.'),
)

alert({ color: 'primary', title: 'Schließbar', dismissible: true },
  'Klick auf das × — der Handler holt sich selbst beim ersten Klick.',
)

alert({ color: 'danger', title: 'Linkprüfung fehlgeschlagen' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'Zwei Links zeigen auf Seiten, die nicht erzeugt wurden:'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: 'verlinkt von /docs' }),
      listItem({ title: '/blog/draft', description: 'verlinkt von /blog' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Details zeigen'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Ignorieren'),
    ),
  ),
)