1. Erste Schritte
2. Komponenten
3. Toasts

Toasts 1.2.0

<velin-toast> ist ein fixer, stapelnder Notification-Host. Rufe show({ message, type, duration }) auf, um schließbare Toasts zu pushen. Stabiles Feedback-Overlay neben Modal-/Dialog-Patterns in 1.2.0 (does not use focus-manager inert — toasts are non-modal). English: Toasts

Wann verwenden

• Temporäres Success-, Info-, Warning- oder Error-Feedback nach einer Aktion.
• Wenn Nutzer weiter mit der Seite interagieren sollen (kein Fokus-Trap).

Wann nicht

• Decisions that require a response — use Dialog or Modal.
• Do not treat child text or an open attribute as the show API — messages are created via show().

Basis-Toast

Platziere einen Host auf der Seite. Rufe show() aus JavaScript auf.

<velin-toast id="toasts"></velin-toast>

<button type="button" class="velin-btn velin-btn--primary"
        onclick="document.getElementById('toasts').show({
          message: 'Hello! This is a toast message.',
          type: 'info'
        })">
  Show toast
</button>

Typen

Pass type auf show(): info (default), success, warning, danger, or error (assertive live region like danger).

const t = document.getElementById('toasts');
t.show({ message: 'Changes saved!', type: 'success' });
t.show({ message: 'Something went wrong.', type: 'danger' });
t.show({ message: 'Check your input.', type: 'warning' });
t.show({ message: 'New update available.', type: 'info' });

Automatisches Schließen

duration is milliseconds (default 5000). Use 0 to keep the toast until the close button is pressed.

t.show({ message: 'Quick notification', duration: 3000 });
t.show({ message: 'Persistent toast', duration: 0 });

Stacking

Multiple show() calls append toast nodes inside the same host. The host is fixed at the block-end / inline-end corner and stacks with flex-direction: column-reverse.

<!-- One host is enough — do not invent .velin-toast-container -->
<velin-toast id="toasts"></velin-toast>

Barrierefreiheit

• Host defaults to role="status", aria-live="polite", aria-atomic="true".
• For type: 'danger' or 'error', host and toast use role="alert" and aria-live="assertive".
• Each toast has a close button with aria-label="Close".
• Messages are HTML-escaped. Toasts do not trap focus or lock scroll.

Dark, Responsive, Motion, RTL

• Dark / themes: surface, border, and semantic border-inline-start colors.
• Responsive: max-inline-size: min(24rem, calc(100vw - 2rem)); positioned with logical inset properties.
• Motion: enter/exit animations skipped under prefers-reduced-motion: reduce.
• RTL: host uses inset-inline-end; type accent uses border-inline-start.

API

Methoden

CSS-Variablen

Best Practices & Fallstricke

• Use a single page-level <velin-toast> host.
• There is no velin-close event and no observed open/type/duration attributes on the host.
• Halte Nachrichten kurz; bevorzuge Dialog, wenn Nutzer bestätigen müssen.

Verwandt

• Alerts — in-page status banners
• Dialog — blocking confirmations
• Announcer — live region utility