import { toastService, ToastContainer } from '@keenmate/svelte-pure-admin';

// Mount once in your root layout:
//   <ToastContainer position="top-end" />

// Anywhere in your app:
toastService.success('Saved!');
toastService.danger({ titleText: 'Failed', messageText: 'Could not save record' });

// Full control:
const id = toastService.show({
	variant: 'info',
	titleText: 'Processing',
	messageText: 'Please wait...',
	duration: 0,             // 0 = persistent until user dismisses
	maxWidth: '40rem',
	actions: [
		{ label: 'Cancel', variant: 'secondary', onclick: () => abort() }
	]
});

// Dismiss programmatically when done:
toastService.dismiss(id);

// Or dismiss everything:
toastService.dismissAll();

Sugar methods (success, danger, warning, info, primary) accept either a string (just the message) or a partial options object.

Each toast can target a position via the position option. Mount a <ToastContainer position="..." /> for every position you intend to use.

Standard

Filled

Custom progress color

Progress bar shows time remaining before auto-dismiss (default 5s — pass duration to change it).

duration: 0 stays until manually closed. Capture the id from show() to dismiss programmatically (toastService.dismiss(id)).

toastService.show({
	variant: 'danger',
	titleText: 'Item Deleted',
	messageText: '3 items moved to trash.',
	duration: 0,
	actions: [
		{ label: 'Undo',    variant: 'danger',    onclick: id => restore() },
		{ label: 'Dismiss', variant: 'secondary' }
	]
});

Toasts automatically stack vertically in the container. Container width ratchets up to the widest toast and resets when empty.

Filled

Toast container

pa-toast-container              — Fixed-position wrapper
pa-toast-container--top-end     — Top end (default)
pa-toast-container--top-center  — Top center
pa-toast-container--top-start   — Top start
pa-toast-container--bottom-end  — Bottom end
pa-toast-container--bottom-center — Bottom center
pa-toast-container--bottom-start  — Bottom start

Toast item

pa-toast                — Base toast element
pa-toast--show          — Visible state
pa-toast--hide          — Dismissing state
pa-toast__icon          — Icon container
pa-toast__content       — Content wrapper
pa-toast__title         — Title text
pa-toast__message       — Message text
pa-toast__actions       — Action buttons container (border-top separator)
pa-toast__close         — Close button
pa-toast__progress      — Progress bar

Toast variants

pa-toast--primary / --success / --danger / --warning / --info
pa-toast--filled-primary / --filled-success / --filled-danger / --filled-warning / --filled-info
pa-toast--color-1 through --color-9
pa-toast--filled-color-1 through --filled-color-9

type ToastVariant  = 'primary' | 'success' | 'danger' | 'warning' | 'info';
type ToastPosition = 'top-end' | 'top-center' | 'top-start'
                   | 'bottom-end' | 'bottom-center' | 'bottom-start';

interface ToastAction {
	label: string;
	variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
	isOutline?: boolean;
	onclick?: (id: string) => void;
	keepOpen?: boolean;        // default false — toast auto-dismisses after action fires
}

interface ToastOptions {
	titleText: string;
	messageText: string;
	variant?: ToastVariant;
	themeColor?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
	isFilled?: boolean;
	duration?: number;          // ms; 0 = persistent
	shouldShowProgress?: boolean;
	progressColor?: string;
	maxWidth?: string;          // CSS width (e.g. '50rem')
	actions?: ToastAction[];
	iconClass?: string;         // FontAwesome class
	class?: string;
	position?: ToastPosition;   // default 'top-end'
}

toastService.show(options): string         // returns toast id
toastService.success(input): string        // input: string | Partial<ToastOptions>
toastService.danger(input): string
toastService.warning(input): string
toastService.info(input): string
toastService.primary(input): string
toastService.dismiss(id): void
toastService.dismissAll(): void