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

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

UPGRADE.md

@@ -84,7 +84,7 @@ over a colour, use the role directly.
   edge-to-edge items; items, not the row, are the tab stops.
 - `<x-list dividers>` draws a 16px-inset rule; `<x-list selectable>` or `selection="single|multi"`
   makes it a `listbox` of `option`s with `aria-selected`.
-- `<x-card>` changes elevation on hover instead of its corner; `data-card` carries the variant.
+- `<x-card>` changes elevation on hover instead of its corner; `data-md-card` carries the variant.
 - `<x-modal>` pins its header and actions and scrolls only the body; a `box-class` that set
   `overflow` no longer applies.
 - `<x-table>` rows are 52px and the automatic fine-pointer density is gone: pass `dense` for 36px

resources/css/foundation/interaction.css

@@ -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
+ * can hover, because a touch screen keeps the last hover after a tap; `data-md-dragged` on the
- * older `data-dragged`) on the element draws the dragged layer; a disabled element has none. The
+ * element draws the dragged layer; a disabled element has none. The layer is a ::before, so the
- * layer is a ::before, so the element becomes `position: relative` and `isolation: isolate`.
+ * 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
+ * (tokens/utilities.css) the components still written in Tailwind use, but for two: the dragged
- * differs, in px where the utility reads 3rem. In `material.base`, so a component's own rules,
+ * hook is `data-md-dragged` where the utility reads `data-dragged`, and `md-touch-target` is px
- * the text classes and an application's rules all outrank them.
+ * 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);
         }
 

tests/Feature/StylesheetsTest.php

@@ -543,15 +543,16 @@ it('draws the interaction classes as the utilities the Tailwind components still
         $class = stylesheetBlock($interaction, ".md-{$name}");
 
         expect($normalise(str_replace(
-            // The two deliberate differences: the data-md-* hook beside the old one, and M3's 48
+            // The two deliberate differences: the data-md-* hook in place of the old one, and M3's
-            // CSS pixels for the target where the utility reads 3rem.
+            // 48 CSS pixels for the target where the utility reads 3rem.
-            ['&:is([data-md-dragged], [data-dragged])', 'var(--md-sys-measurement-space600)'],
+            ['&[data-md-dragged]', 'var(--md-sys-measurement-space600)'],
             ['&[data-dragged]', '3rem'],
             $class,
         )))->toBe($normalise(stylesheetBlock($utilities, "@utility {$name}")), $name);
     }
 
-    expect(stylesheetBlock($interaction, '.md-state-layer'))->toContain('&:is([data-md-dragged], [data-dragged])::before')
+    expect(stylesheetBlock($interaction, '.md-state-layer'))->toContain('&[data-md-dragged]::before')
+        ->not->toContain('[data-dragged]')
         ->and(stylesheetBlock($interaction, '.md-touch-target'))->toContain('min-width: var(--md-sys-measurement-space600);');
 });