@props([
    // status → semantic tone. Always carries a text label (never colour-only, R9/§9).
    'status' => 'info',
])
@php
    $tones = [
        'active'       => 'success',
        'online'       => 'success',
        'provisioning' => 'info',
        'pending'      => 'info',
        'suspended'    => 'warning',
        'cancellation_scheduled' => 'warning',
        'closed'       => 'warning',
        'warning'      => 'warning',
        'failed'       => 'danger',
        'offline'      => 'danger',
        'info'         => 'info',
    ];
    $tone = $tones[$status] ?? 'info';
    $classes = [
        'success' => 'bg-success-bg border-success-border text-success',
        'warning' => 'bg-warning-bg border-warning-border text-warning',
        'danger'  => 'bg-danger-bg border-danger-border text-danger',
        'info'    => 'bg-info-bg border-info-border text-info',
    ][$tone];
@endphp
<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-1 text-xs font-semibold '.$classes]) }}>
    <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
    {{ $slot }}
</span>