Give a card per-state elevation and M3's two keyboard models

Plan step 19, containment.md C-13, C-23 and the directly actionable card
of C-13/C-18. A card had one elevation and never changed it, and its
hover replaced the elevated card's shadow with the state layer; it now
names its variant in `data-card` and moves a step on hover (elevated
1 to 2, filled and outlined 0 to 1) with the layer over it. The 12 to 16
corner morph on hover is gone: M3 gives a card one shape and lists shape
morph for buttons, FABs and list items only. New `actionable` prop for
M3's directly actionable card — the card is the one tab stop, with
`role="button"` (or `link`), its `title` as the name, and Enter or Space
reaching the opener from resources/js/list-rows.js.

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

tests/Browser/ContainmentTest.php

@@ -214,12 +214,28 @@ it('dismisses a bottom sheet dragged down past a quarter of its height', functio
 it('opens a row\'s opener from a press anywhere on the row, but not from its own buttons', function () {
     $page = containment();
 
-    $page->script("window.__opened = 0; document.querySelector('#containment [data-card][data-list-row] [data-list-open]').addEventListener('click', (event) => { event.preventDefault(); window.__opened++ })");
+    $row = '#containment [data-card][data-list-row]:not([data-list-actionable])';
 
-    $page->click('#containment [data-card][data-list-row] p')
+    $page->script("window.__opened = 0; document.querySelector('{$row} [data-list-open]').addEventListener('click', (event) => { event.preventDefault(); window.__opened++ })");
+
+    $page->click("{$row} p")
         ->assertScript('window.__opened === 1');
 
-    $page->click('#containment [data-card][data-list-row] button:has-text("Copy link")')
+    $page->click("{$row} button:has-text(\"Copy link\")")
+        ->assertScript('window.__opened === 1');
+});
+
+it('makes a directly actionable card the one tab stop, answering Enter', function () {
+    $card = '#containment [data-card][data-list-actionable]';
+
+    $page = containment();
+
+    $page->script("window.__opened = 0; document.querySelector('{$card} [data-list-open]').addEventListener('click', (event) => { event.preventDefault(); window.__opened++ })");
+
+    $page->script("document.querySelector('{$card}').focus()")
+        ->assertScript("document.activeElement.matches('{$card}')");
+
+    $page->keys($card, 'Enter')
         ->assertScript('window.__opened === 1');
 });
 

tests/Feature/Components/CardTest.php

@@ -1,7 +1,10 @@
 <?php
 
-it('draws M3\'s three cards', function (string $variant, string $classes) {
-    expect((string) $this->blade("<x-card variant=\"{$variant}\">Body</x-card>"))->toContain($classes)->toContain('rounded-corner-md')->toContain('data-card');
+it('draws M3\'s three cards, each naming its variant for its per-state elevation', function (string $variant, string $classes) {
+    expect((string) $this->blade("<x-card variant=\"{$variant}\">Body</x-card>"))
+        ->toContain($classes)
+        ->toContain('rounded-corner-md')
+        ->toContain("data-card=\"{$variant}\"");
 })->with([
     'filled' => ['filled', 'bg-surface-container-highest'],
     'elevated' => ['elevated', 'bg-surface-container-low shadow-elevation-1'],
@@ -9,7 +12,9 @@ it('draws M3\'s three cards', function (string $variant, string $classes) {
 ]);
 
 it('is filled unless it knows the variant', function () {
-    expect((string) $this->blade('<x-card variant="glass">Body</x-card>'))->toContain('bg-surface-container-highest');
+    expect((string) $this->blade('<x-card variant="glass">Body</x-card>'))
+        ->toContain('bg-surface-container-highest')
+        ->toContain('data-card="filled"');
 });
 
 it('lays out a header, menu, media, body and actions', function () {
@@ -38,3 +43,20 @@ it('passes row attributes through', function () {
         ->toContain('data-list-row')
         ->toContain('data-list-open');
 });
+
+it('makes a directly actionable card the one tab stop, named by its title', function () {
+    $html = (string) $this->blade('<x-card actionable title="holiday-photos.zip"><a href="/s/1" data-list-open tabindex="-1">Open</a></x-card>');
+
+    expect($html)
+        ->toContain('data-list-row')
+        ->toContain('data-list-actionable')
+        ->toContain('tabindex="0"')
+        ->toContain('role="button"')
+        ->toContain('aria-label="holiday-photos.zip"')
+        ->and((string) $this->blade('<x-card actionable role="link" title="Share">Body</x-card>'))
+        ->toContain('role="link"')
+        ->and(substr_count((string) $this->blade('<x-card actionable role="link" title="Share">Body</x-card>'), 'role="link"'))->toBe(1)
+        ->and((string) $this->blade('<x-card title="Share">Body</x-card>'))
+        ->not->toContain('data-list-actionable')
+        ->not->toContain('tabindex');
+});