diff --git a/UPGRADE.md b/UPGRADE.md index 353a10db..b78aeea2 100644 --- a/UPGRADE.md +++ b/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. - `` draws a 16px-inset rule; `` or `selection="single|multi"` makes it a `listbox` of `option`s with `aria-selected`. -- `` changes elevation on hover instead of its corner; `data-card` carries the variant. +- `` changes elevation on hover instead of its corner; `data-md-card` carries the variant. - `` pins its header and actions and scrolls only the body; a `box-class` that set `overflow` no longer applies. - `` rows are 52px and the automatic fine-pointer density is gone: pass `dense` for 36px diff --git a/resources/css/foundation/interaction.css b/resources/css/foundation/interaction.css index de484196..9efba836 100644 --- a/resources/css/foundation/interaction.css +++ b/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 - * 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); } diff --git a/tests/Feature/StylesheetsTest.php b/tests/Feature/StylesheetsTest.php index 629b2a0a..bd8a2919 100644 --- a/tests/Feature/StylesheetsTest.php +++ b/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 - // CSS pixels for the target where the utility reads 3rem. - ['&:is([data-md-dragged], [data-dragged])', 'var(--md-sys-measurement-space600)'], + // The two deliberate differences: the data-md-* hook in place of the old one, and M3's + // 48 CSS pixels for the target where the utility reads 3rem. + ['&[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);'); });