@props(['tone' => 'info'])

{{--
    Message d'état marqué par un filet latéral plutôt que par un cadre complet :
    l'information reste visible sans découper la page.
--}}
<div
    role="{{ $tone === 'error' ? 'alert' : 'status' }}"
    @class([
        'border-l-2 py-3 pl-5 text-sm leading-relaxed',
        'border-accent text-ink' => $tone === 'success',
        'border-line-strong text-ink-muted' => $tone === 'info',
        'border-red-400 text-ink' => $tone === 'error',
    ])
>
    {{ $slot }}
</div>