Add M3 Expressive progress indicators

<x-progress>: linear or circular, flat or wavy, determinate or
indeterminate, 4px or thick, in any colour role, following a server value
through Livewire morphs or an Alpine expression in the browser. The first
frame is server-rendered SVG; Compose Material 3's drawing and keyframes
are ported to an Alpine component that animates only while something
moves and the indicator is on screen.

The previous commit already imported progress.js and included its
showcase section without the files; this adds them.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

resources/views/showcase/layout.blade.php

@@ -18,7 +18,7 @@
                 <a href="{{ route('livewire-material.showcase') }}" class="type-title-lg">Livewire Material</a>
 
                 <nav class="flex flex-wrap gap-x-4 gap-y-1 type-label-lg text-on-surface-variant" aria-label="Sections">
-                    @foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication'] as $anchor => $section)
+                    @foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress'] as $anchor => $section)
                         <a href="#{{ $anchor }}" class="rounded-corner-xs hover:text-on-surface focus-ring">{{ $section }}</a>
                     @endforeach
                 </nav>

resources/views/showcase/sections/progress.blade.php

@@ -0,0 +1,57 @@
+@php
+    $examples = [
+        'Linear: determinate and indeterminate' => [<<<'BLADE'
+            <x-progress value="40" label="Linear" />
+            <x-progress label="Linear, indeterminate" />
+            BLADE, true],
+        'Linear wavy' => [<<<'BLADE'
+            <x-progress value="60" wavy label="Wavy" />
+            <x-progress wavy label="Wavy, indeterminate" />
+            BLADE, true],
+        'Thick' => [<<<'BLADE'
+            <x-progress value="70" thick label="Thick" />
+            <x-progress value="55" wavy thick label="Thick wavy" />
+            <x-progress wavy thick label="Thick wavy, indeterminate" />
+            BLADE, true],
+        'Circular' => [<<<'BLADE'
+            <x-progress value="65" circular label="Circular" />
+            <x-progress circular label="Circular, indeterminate" />
+            <x-progress value="65" circular wavy label="Circular wavy" />
+            <x-progress circular wavy label="Circular wavy, indeterminate" />
+            <x-progress value="65" circular thick label="Circular thick" />
+            <x-progress value="65" circular wavy thick label="Circular wavy thick" />
+            <x-progress circular wavy class="size-24" label="Circular wavy, 96px" />
+            BLADE, false],
+        'Colours' => [<<<'BLADE'
+            <x-progress value="35" color="secondary" label="Secondary" />
+            <x-progress value="50" wavy color="tertiary" label="Tertiary" />
+            <x-progress value="65" color="error" label="Error" />
+            <x-progress value="80" wavy color="success" label="Success" />
+            <x-progress value="45" color="warning" label="Warning" />
+            <x-progress value="55" wavy color="info" label="Info" />
+            BLADE, true],
+        'Following a value in the browser (bind)' => [<<<'BLADE'
+            <div x-data="{ progress: 30 }" class="w-full space-y-6">
+                <x-button label="Set a random value" variant="tonal" x-on:click="progress = Math.round(Math.random() * 100)" />
+                <x-progress bind="progress" label="Bound" />
+                <x-progress bind="progress" wavy label="Bound wavy" />
+                <div class="flex gap-6">
+                    <x-progress bind="progress" circular label="Bound circular" />
+                    <x-progress bind="progress" circular wavy label="Bound circular wavy" />
+                </div>
+            </div>
+            BLADE, false],
+    ];
+@endphp
+
+<section id="progress" class="scroll-mt-24 space-y-6">
+    <h2 class="type-headline-md">Progress</h2>
+
+    <p class="max-w-3xl type-body-md text-on-surface-variant">
+        <code>&lt;x-progress&gt;</code>: M3 Expressive's linear and circular progress indicators, flat or wavy, determinate or indeterminate.
+    </p>
+
+    @foreach ($examples as $title => [$code, $stack])
+        <x-showcase::example :$title :$code :$stack />
+    @endforeach
+</section>