{{-- Accessible progress bar. Over 100% turns red, over 80% amber. --}}
@props(['percent', 'label'])
@php $p = (int) $percent; @endphp
<div {{ $attributes->merge(['class' => 'h-2 w-full overflow-hidden rounded-full bg-slate-100']) }}
     role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ min($p, 100) }}" aria-label="{{ $label }}">
    <div @class(['h-full rounded-full', 'bg-red-500' => $p > 100, 'bg-amber-500' => $p > 80 && $p <= 100, 'bg-brand-500' => $p <= 80])
         style="width: {{ min($p, 100) }}%"></div>
</div>