noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drop the old data-dragged hook from md-state-layer

Browse Source 
Plan step 36 review. interaction.css read `data-dragged` beside
`data-md-dragged` while <x-card> still set the old name; the card now
sets the new one and nothing in the package renders the old one on an
element with the class, which 2.0.0 introduces. The Tailwind
`state-layer` utility keeps `data-dragged` until step 39 deletes it.
UPGRADE.md's card line named the old `data-card` hook.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 22:07:33 +02:00
co-authored by Claude Opus 5
parent a764fddf27
commit 0326065348
3 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/foundation/interaction.css
+8 -7
View File
@@ -4,9 +4,9 @@
*
* `md-state-layer` lays the content colour over an element at M3's state opacities
* (tokens/state.css): hover 8%, focus and press 10%, dragged 16%. Hover only where the pointer
* can hover, because a touch screen keeps the last hover after a tap; `data-md-dragged` (or the
* older `data-dragged`) on the element draws the dragged layer; a disabled element has none. The
* layer is a ::before, so the element becomes `position: relative` and `isolation: isolate`.
* can hover, because a touch screen keeps the last hover after a tap; `data-md-dragged` on the
* element draws the dragged layer; a disabled element has none. The layer is a ::before, so the
* element becomes `position: relative` and `isolation: isolate`.
*
* `md-focus-ring` is M3's focus indicator — 3px in secondary, 2px out, drawn only for keyboard
* focus. The site gives no thickness or offset; the values are @material/web's focus ring tokens
@@ -23,9 +23,10 @@
* `md-ink-primary` where it should also read as primary.
*
* The same declarations as the `state-layer`, `focus-ring`, `touch-target` and `link` utilities
* (tokens/utilities.css) the components still written in Tailwind use; `md-touch-target` alone
* differs, in px where the utility reads 3rem. In `material.base`, so a component's own rules,
* the text classes and an application's rules all outrank them.
* (tokens/utilities.css) the components still written in Tailwind use, but for two: the dragged
* hook is `data-md-dragged` where the utility reads `data-dragged`, and `md-touch-target` is px
* where the utility reads 3rem. In `material.base`, so a component's own rules, the text classes
* and an application's rules all outrank them.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -61,7 +62,7 @@
opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
&:is([data-md-dragged], [data-dragged])::before {
&[data-md-dragged]::before {
opacity: var(--md-sys-state-dragged-state-layer-opacity);
}