Draw M3's dragged state on a card

Plan step 23, containment.md § Missing ("Cards: the dragged state").
`data-dragged` on `<x-card>` takes the top of M3's card elevation scale
— Level4 (8dp) elevated, Level3 (6dp) filled and outlined — under the
16% dragged state layer from tokens/state.css. The row's hover and press
rules now exclude a dragged card, so the card a pointer is holding stays
at its dragged level. The application owns the attribute: nothing in the
browser tells a card it is being carried.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:34:35 +02:00
co-authored by Claude Fable 5.1
parent 927e439064
commit b1f64771f3
5 changed files with 60 additions and 4 deletions
@@ -35,6 +35,14 @@
</x-slot:actions>
</x-card>
BLADE,
'A card being dragged' => <<<'BLADE'
<div x-data="{ dragged: false }" class="w-full max-w-sm space-y-4">
<x-button label="Pick it up or put it down" variant="tonal" x-on:click="dragged = ! dragged" />
<x-card variant="elevated" title="holiday-photos.zip" subtitle="248 MB" x-bind:data-dragged="dragged || null">
Elevation 4 and the 16% state layer, for as long as the application says the card is being carried.
</x-card>
</div>
BLADE,
'Lists' => <<<'BLADE'
<div class="grid w-full gap-6 medium:grid-cols-2">
<x-list dividers label="Files">