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/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');
+});