{{-- M3 Expressive's loading indicator: a shape that morphs through seven Expressive shapes while
     it turns, for a wait that has no known length.

     In the text colour — primary unless the caller colours it — and 48px unless the caller's CSS
     sizes it. `contained` puts it on a primary-container circle, for a spinner over content. It
     is a `progressbar` named `label` ("Loading" by default); pass `:label="false"` where something
     else already says what is happening, as a button's own spinner does.

     Pure SVG with SMIL, so it animates in every engine without script. Under
     `prefers-reduced-motion` the shape rests. The geometry is androidx Compose Material 3's
     LoadingIndicator and Morph, ported in bin/loading-indicator.mjs (Apache-2.0):
     LoadingIndicatorTokens' 38px indicator in a 48px container, a morph every 650ms on a spring,
     a quarter turn per morph and a full turn every 4666ms. Drawn by
     resources/css/components/loading.css. --}}

@props([
    'contained' => false,
    'label' => null,
])

@php
    $decorative = $label === false;
    $label = $decorative ? null : ($label ?? __('Loading'));

    $attributes = $attributes->merge(array_filter([
        'data-md-loading' => true,
        'data-md-contained' => $contained ? true : null,
        'role' => $decorative ? null : 'progressbar',
        'aria-label' => $label,
        'aria-hidden' => $decorative ? 'true' : null,
    ], fn ($value): bool => $value !== null));
@endphp

<span {{ $attributes }}>
    {{ \NoNameWeb\LivewireMaterial\Support\SvgFile::loadingIndicator(true, new \Illuminate\View\ComponentAttributeBag(['data-md-loading-animated' => true, 'aria-hidden' => 'true', 'focusable' => 'false'])) }}
    {{ \NoNameWeb\LivewireMaterial\Support\SvgFile::loadingIndicator(false, new \Illuminate\View\ComponentAttributeBag(['data-md-loading-still' => true, 'aria-hidden' => 'true', 'focusable' => 'false'])) }}
</span>