Add cards, lists, dialogs, sheets and the rest of M3's containment

<x-card> (filled, elevated, outlined), <x-list> and <x-list-item>
(plain or M3 Expressive's segmented list), <x-divider>, <x-collapse> on
<details>, <x-modal> on the native <dialog>, <x-drawer> as a side sheet or
list-detail pane, and <x-bottom-sheet> with drag to dismiss. Dialogs and
sheets bind to a Livewire flag or id and write back false or null on close,
or use the surrounding Alpine scope. Rows open from anywhere on them through
data-list-row and data-list-open. DesignGuard now also reports Blade
directives written inside a component tag, where they do not compile.

Browser test helpers wait for a complete document with Alpine and Livewire
running: in Firefox, networkidle alone could return before a repeated visit
had loaded.

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

tests/Browser/ProgressTest.php

@@ -38,6 +38,9 @@ function onProgress(string $label, string $body): string
     return <<<JS
         (async () => {
             const el = document.querySelector('#progress [aria-label="{$label}"]')
+            // Writes go through the page's own realm: Firefox runs this script in a sandbox whose
+            // assignments do not reach Alpine's reactive proxies.
+            const set = (value) => window.eval(`Alpine.\$data(document.querySelector('#progress [aria-label="{$label}"]')).progress = \${JSON.stringify(value)}`)
             el.scrollIntoView({ block: 'center' })
             const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
             const active = () => el.querySelector('path[stroke="currentColor"]')
@@ -50,7 +53,10 @@ function onProgress(string $label, string $body): string
 
 function progressShowcase(array $options = [])
 {
-    return visit('/material', $options)->waitForEvent('networkidle');
+    // networkidle alone can return before a repeated visit has even loaded in Firefox; the
+    // assertion retries until the page is complete and Alpine has started.
+    return visit('/material', $options)->waitForEvent('networkidle')
+        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
 }
 
 it('draws a linear indicator to its value', function () {
@@ -85,9 +91,16 @@ it('moves to a new bound value instead of jumping', function () {
     progressShowcase()
         ->assertScript(onProgress('Bound', <<<'JS'
             const before = reach()
-            Alpine.$data(el).progress = 80
-            await pause(80)
-            const during = reach()
+            set(80)
+            // The first frame that shows movement, not a timer: under load a timer fires late enough
+            // that the 330ms spring has nearly arrived, and a jump would look the same as a fast move.
+            // A jump's first moved frame is already at the target; a move's is on the way.
+            const frame = () => new Promise((resolve) => requestAnimationFrame(resolve))
+            let during = reach()
+            for (let i = 0; i < 60 && during <= before + 0.01; i++) {
+                await frame()
+                during = reach()
+            }
             return Math.abs(before - 0.3) < 0.01 && during > before + 0.01 && during < 0.79
             JS))
         ->wait(1)
@@ -96,13 +109,13 @@ it('moves to a new bound value instead of jumping', function () {
 
 it('turns indeterminate when a bound value is null, and back', function () {
     progressShowcase()->assertScript(onProgress('Bound', <<<'JS'
-        Alpine.$data(el).progress = null
+        set(null)
         await pause(100)
         const indeterminate = !el.hasAttribute('aria-valuenow') && !el.hasAttribute('data-value')
         const first = active().getAttribute('d')
         await pause(200)
         const moving = active().getAttribute('d') !== first
-        Alpine.$data(el).progress = 50
+        set(50)
         await pause(100)
         return indeterminate && moving && el.getAttribute('aria-valuenow') === '50' && Math.abs(reach() - 0.5) < 0.01
         JS));