@php
    $words = preg_split('/\s+/', trim($text));
@endphp

<span class="inline-flex flex-wrap gap-1 align-middle">
    @foreach ($words as $word)
        @php
            // Make bar width roughly match word length, but clamped
            $len = mb_strlen($word);
            $width = min(5 + $len * 8, 80); // px
        @endphp
        <span
            class="inline-block bg-slate-200 dark:bg-slate-700 rounded-full h-3"
            style="width: {{ $width }}px;"
            aria-hidden="true"
        ></span>
    @endforeach

    {{-- keep text for screen readers but visually hidden --}}
    <span class="sr-only">{{ $text }}</span>
</span>