Leave carousel items unmasked under reduced motion
Plan step 12, containment.md C-05. Only the parallax half of M3's rule was honoured: the mask was still written every frame, so items kept growing and shrinking between the keylines. Under reduced motion the inset, the shift and the label fade are now all zero, so every item stays at the strategy's large size and the keylines only decide where the row snaps. `--material-carousel-pin` went with it: with no mask there is nothing to pin the content to. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
335ea4f4f1
commit
f895b553b6
@@ -34,7 +34,7 @@
|
||||
data-material-carousel-surface
|
||||
class="relative size-full overflow-hidden rounded-corner-xl bg-surface-container-highest text-on-surface translate-x-(--material-carousel-shift) [clip-path:inset(0_var(--material-carousel-inset,0px)_round_var(--md-sys-shape-corner-xl))]"
|
||||
>
|
||||
<div data-material-carousel-content class="size-full translate-x-(--material-carousel-pin) [&>img]:size-full [&>img]:object-cover">
|
||||
<div data-material-carousel-content class="size-full [&>img]:size-full [&>img]:object-cover">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -40,8 +40,10 @@
|
||||
keys move one item, Home and End to the ends; focus moving into an item, or a press on one
|
||||
that is not fully open, brings it into focus. `controls` adds previous and next icon
|
||||
buttons under the row — by default only where the pointer is fine (a mouse or trackpad);
|
||||
`true` always, `false` never. Under reduced motion they scroll instantly and content no
|
||||
longer slides inside its mask. RTL mirrors the keylines, keys and buttons.
|
||||
`true` always, `false` never. Under reduced motion they scroll instantly and nothing is
|
||||
masked: every item stays at its large size, which is M3's rule for a carousel under reduced
|
||||
motion (docs/reference/m3/styles.md § Motion → Accessibility requirements). RTL mirrors the
|
||||
keylines, keys and buttons.
|
||||
|
||||
Re-measures itself when resized, when a Livewire morph resets its styles and when items
|
||||
come and go. The row's id, which the buttons control, is new with every render; the row
|
||||
|
||||
Reference in New Issue
Block a user