@bimetal/toast-vanilla-components

The zero-framework toast viewport — the BIMETAL component family's lightweight / feedback member with no framework at all. mountToast(target, controller) drives the canonical @bimetal/toast-headless controller (queue, auto-dismiss, pause-on-hover, variants, positioning, a11y) and renders the same .bm-toast* DOM as the toast-{react,vue,svelte,angular}-components — so @bimetal/toast-themes styles it identically. No domain dependency.

import { createToastController } from '@bimetal/toast-headless';
import { mountToast } from '@bimetal/toast-vanilla-components';
import '@bimetal/toast-vanilla-components/styles';

const toasts = createToastController({ config: { position: 'bottom-end' } });
const view = mountToast(document.getElementById('toast-root')!, toasts);

document.getElementById('save')!.addEventListener('click', () =>
  toasts.push({ message: 'Gespeichert', variant: 'success' }),
);

// later: view.destroy();

The app decides the message and calls toasts.push(...); the viewport renders the stack. Bound-only: you own the controller (it is what you push to), so destroy() tears down the binding but never touches the controller.