Lead a list item with M3's video slot

Plan step 23, containment.md § Missing ("Lists: leading video slot").
`<x-list-item video="…">` (or `<x-slot:video>`) draws M3's leading media
in its landscape sizes: 100×56px in a two-line item, 114×64px in a
three-line one (ListTokens' LeadingVideoSmall 56×100dp and
LeadingVideoLarge 64×114dp), with the small corner the leading image
takes. The tallest element sets an item's height, so a video lifts the
item to at least the 72px two-line row — 56 + 2×8 is 72 exactly, and
64 + 2×12 is 88.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Feature/Components/ListTest.php

@@ -93,3 +93,20 @@ it('marks a selected item and takes controls in its slots', function () {
         ->toContain('<input type="checkbox">')
         ->toContain('<button>⋮</button>');
 });
+
+it('leads with M3\'s video, in the size the item\'s height calls for', function () {
+    expect((string) $this->blade('<x-list-item title="Sunrise" video="/poster.jpg" />'))
+        ->toContain('h-14 w-25')
+        ->toContain('rounded-corner-sm')
+        ->toContain('<img src="/poster.jpg" alt="" />')
+        ->toContain('min-h-18 py-2')
+        ->and((string) $this->blade('<x-list-item title="Sunrise" overline="Draft" description="7:48" video="/poster.jpg" />'))
+        ->toContain('h-16 w-28.5')
+        ->toContain('min-h-22 py-3')
+        ->and((string) $this->blade('<x-list-item title="Sunrise"><x-slot:video><video src="/clip.mp4"></video></x-slot:video></x-list-item>'))
+        ->toContain('<video src="/clip.mp4"></video>')
+        ->toContain('h-14 w-25')
+        ->and((string) $this->blade('<x-list-item title="Sunrise" />'))
+        ->not->toContain('h-14 w-25')
+        ->toContain('min-h-14 py-2');
+});