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

resources/views/showcase/sections/containment.blade.php

@@ -26,6 +26,15 @@
                 </x-slot:actions>
             </x-card>
             BLADE,
+        'A directly actionable card: the card is the tab stop' => <<<'BLADE'
+            <x-card variant="elevated" actionable role="link" title="contract.pdf" class="w-full max-w-sm">
+                <a href="#containment" data-list-open tabindex="-1" class="type-title-md">contract.pdf</a>
+                <p class="mt-1 text-on-surface-variant">1.2 MB · downloaded twice</p>
+                <x-slot:actions>
+                    <x-button label="Copy link" icon="content_copy" x-on:click="materialToast('Link copied', { type: 'success' })" />
+                </x-slot:actions>
+            </x-card>
+            BLADE,
         'Lists' => <<<'BLADE'
             <div class="grid w-full gap-6 medium:grid-cols-2">
                 <x-list dividers label="Files">