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/Feature/Components/ListTest.php

@@ -0,0 +1,46 @@
+<?php
+
+it('draws a plain list, with dividers on request', function () {
+    expect((string) $this->blade('<x-list label="Files" dividers><x-list-item title="a.zip" /></x-list>'))
+        ->toContain('role="list"')
+        ->toContain('aria-label="Files"')
+        ->toContain('data-list="plain"')
+        ->toContain('divide-y divide-outline-variant')
+        ->toContain('role="listitem"');
+});
+
+it('draws M3 Expressive\'s segmented list', function () {
+    expect((string) $this->blade('<x-list segmented><x-list-item title="a.zip" /></x-list>'))
+        ->toContain('data-list="segmented"')
+        ->toContain('gap-0.5');
+});
+
+it('grows an item from one to three lines', function () {
+    expect((string) $this->blade('<x-list-item title="a.zip" />'))->toContain('min-h-14')
+        ->and((string) $this->blade('<x-list-item title="a.zip" description="248 MB" />'))->toContain('min-h-18')->toContain('248 MB')
+        ->and((string) $this->blade('<x-list-item title="a.zip" overline="Protected" description="248 MB" />'))->toContain('min-h-22')->toContain('Protected');
+});
+
+it('leads with an icon, an avatar or an image, and trails with text or an icon', function () {
+    expect((string) $this->blade('<x-list-item title="a" icon="folder_zip" trailing="3 days" icon-right="chevron_right" />'))
+        ->toContain('3 days')
+        ->and(substr_count((string) $this->blade('<x-list-item title="a" icon="folder_zip" icon-right="chevron_right" />'), '<svg'))->toBe(2)
+        ->and((string) $this->blade('<x-list-item title="Anna" avatar="AM" />'))->toContain('bg-primary-container')->toContain('>AM</span>')
+        ->and((string) $this->blade('<x-list-item title="Anna" avatar="/anna.jpg" />'))->toContain('<img src="/anna.jpg"')
+        ->and((string) $this->blade('<x-list-item title="Photo" image="/p.jpg" />'))->toContain('size-14');
+});
+
+it('makes a linked item a row that opens from anywhere', function () {
+    expect((string) $this->blade('<x-list-item title="Settings" link="/settings" />'))
+        ->toContain('data-list-row')
+        ->toContain('href="/settings"')
+        ->toContain('data-list-open')
+        ->toContain('wire:navigate');
+});
+
+it('marks a selected item and takes controls in its slots', function () {
+    expect((string) $this->blade('<x-list-item title="Anna" :selected="true"><x-slot:leading><input type="checkbox"></x-slot:leading><x-slot:end><button>⋮</button></x-slot:end></x-list-item>'))
+        ->toContain('data-selected')
+        ->toContain('<input type="checkbox">')
+        ->toContain('<button>⋮</button>');
+});