{{-- 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, M3's default. `size` is
     its size in px, any whole number from 24 to 240, M3's responsive range ("never exceed that
     range"; scale it up for large and extra-large windows): the container and the shape keep
     their 48:38 ratio at every size, because the drawing scales with its box. It is written as
     `--md-loading-size`; anything outside the range is ignored, and without it the caller's CSS
     may size 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,
    'size' => null,
])

@php
    $size = filter_var($size, FILTER_VALIDATE_INT, ['options' => ['min_range' => 24, 'max_range' => 240]]) ?: null;
    $decorative = $label === false;
    $label = $decorative ? null : ($label ?? __('Loading'));

    $attributes = $attributes->merge(array_filter([
        'data-md-loading' => true,
        'data-md-contained' => $contained ? true : null,
        'style' => $size !== null ? "--md-loading-size: {$size}px" : 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>