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:
co-authored by
Claude Fable 5.1
parent
927e439064
commit
b1f64771f3
@@ -60,3 +60,18 @@ it('makes a directly actionable card the one tab stop, named by its title', func
|
||||
->not->toContain('data-list-actionable')
|
||||
->not->toContain('tabindex');
|
||||
});
|
||||
|
||||
it('draws M3\'s dragged state while the application says the card is being carried', function () {
|
||||
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/list.css');
|
||||
|
||||
expect((string) $this->blade('<x-card data-dragged variant="elevated">Body</x-card>'))
|
||||
->toContain('data-dragged')
|
||||
->and($css)
|
||||
->toContain('[data-card][data-dragged] {')
|
||||
->toContain('var(--md-sys-elevation-3),')
|
||||
->toContain("[data-card='elevated'][data-dragged] {")
|
||||
->toContain('var(--md-sys-elevation-4),')
|
||||
->toContain('calc(var(--md-sys-state-dragged-state-layer-opacity) * 100%)')
|
||||
->toContain(':not([data-dragged]):hover')
|
||||
->toContain(':not([data-dragged]):active');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user