24 lines
836 B
Svelte
24 lines
836 B
Svelte
<script lang="ts">
|
|
// Single global toast renderer. Mounted once in +layout.svelte; pages call
|
|
// pushToast() from $lib/stores/toast.svelte. The {#key} re-mount on id
|
|
// change is what makes screen readers re-announce a replacement toast.
|
|
import { toast } from '$lib/stores/toast.svelte';
|
|
</script>
|
|
|
|
{#if toast.value}
|
|
{#key toast.value.id}
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
data-testid="toast"
|
|
class="fixed bottom-4 right-4 z-50 max-w-sm rounded-md border bg-surface px-4 py-3 text-sm shadow-lg"
|
|
class:border-border={toast.value.variant === 'info'}
|
|
class:text-text-primary={toast.value.variant === 'info'}
|
|
class:border-error={toast.value.variant === 'error'}
|
|
class:text-error={toast.value.variant === 'error'}
|
|
>
|
|
{toast.value.message}
|
|
</div>
|
|
{/key}
|
|
{/if}
|