Rewrite the carousel without Tailwind
Plan step 36 (containment group): <x-carousel>'s and <x-carousel-item>'s class lists move into resources/css/components/carousel.css and carousel-item.css, keyed on data-md-carousel (its value is the layout) and the parts' data-md-carousel-* hooks (-probe, -scroller, -controls with "auto"/"always", -previous/-next, -item, -surface, -content, -label/-label-text). Every selector uses a `>` combinator rather than a bare descendant one, because a carousel item can itself hold a nested carousel whose own root would otherwise match its parent's layout rules too (list.css already solves the same problem for segmented list rows). Behaviour is unchanged: resources/js/carousel.js (the keyline maths, C-05's reduced-motion fix, C-11's vertical full-screen layout, C-12's padding, C-18's item-as-tab-stop, the multi-aspect layout) is touched only where it reads or writes the renamed hooks and dataset properties; every inline custom property it writes (--material-carousel-*) is untouched. The item renders the shared md-focus-ring class (foundation/interaction.css) instead of a hand-rolled ring, refined to an inset offset since an outward one would draw under the neighbouring item. The previous/next buttons mirror whole in RTL from carousel.css rather than through <x-icon mirror-rtl>, which <x-button icon> has no prop to reach (a component outside this batch); the technique matches how the Tailwind-era markup already mirrored the whole button. The overlay label's literal white ink over the scrim (C-25) is kept, with the same reasoning as before. Hooks renamed data-material-carousel(-item/-surface/-content/-label) -> data-md-carousel(-item/-surface/-content/-label), data-padding(-end) -> data-md-padding(-end), data-centered -> data-md-centered, updated in the same commit: resources/js/carousel.js, tests/Feature/Components/ CarouselTest.php (rewritten on data-md-* and ComponentStylesheet) and tests/Browser/CarouselTest.php. Browser tests owed by docs/plans/material-3-browser-tests.md, added but not run: the multi-aspect carousel's previous/next, arrow keys, Home and End (scoped by data-md-carousel="multi-aspect" rather than a position in the showcase, so reordering its examples cannot silently mis-target the wrong carousel); a reduced-motion click on an item cut off only by the row's own edge, which documents rather than fixes a real gap — isMasked()'s inset check is always false once C-05 zeroes every item's inset, so the click-to-reveal affordance does not fire there (found by the Chromium baseline, step 32; fixing it is outside a hook rename). Imported from the Containment block of components.css. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
287340b066
commit
a149970dd0
@@ -1,5 +1,5 @@
|
||||
{{-- One item of an `<x-carousel>`: a slide of art — an `<img>`, which fills and crops to the
|
||||
item, or any element sized `size-full`.
|
||||
item, or any element sized to fill it.
|
||||
|
||||
<x-carousel-item label="Lake Constance">
|
||||
<img src="{{ $photo->url }}" alt="Lake Constance at dusk" />
|
||||
@@ -10,18 +10,24 @@
|
||||
fades its label chip in once the mask is wide enough to hold it. The scrim is what M3 asks
|
||||
for under text on an image, and the scrim is `--md-sys-color-scrim` — black in every scheme,
|
||||
theme and contrast level — so its ink is the one absolute the theme keeps, `white`; a role
|
||||
(`inverse-on-surface`) is dark ink in a dark scheme and fails on the scrim there.
|
||||
(`inverse-on-surface`) is dark ink in a dark scheme and fails on the scrim there
|
||||
(docs/audits/m3-alignment/containment.md, C-25, deliberately kept).
|
||||
|
||||
A focusable `group` with `aria-roledescription="slide"`, named "n of m" by the carousel
|
||||
around it. M3 puts the tab stop on the item, not on the row: Tab reaches the first item, the
|
||||
arrow keys move between them and Space or Enter opens the focused one
|
||||
(docs/reference/m3/components-actions-communication-containment.md § Carousel →
|
||||
Accessibility). The item is laid out at the carousel's large size and masked:
|
||||
the surface inside is clipped by `--material-carousel-inset` from both sides with M3's
|
||||
extra-large corner (28px, CarouselDefaults' item shape) and moved by
|
||||
`--material-carousel-shift`, both written by resources/js/carousel.js. Without script the
|
||||
item shows unmasked, at its `item-width`. In a `full-screen` carousel it is none of that: the
|
||||
item fills the row, edge to edge, with no corner and no mask.
|
||||
Accessibility). It renders the shared `md-focus-ring` class (foundation/interaction.css)
|
||||
rather than a hand-rolled ring — the box the class draws is the item's own whole hit area —
|
||||
which resources/css/components/carousel-item.css refines to an inset ring: an outward offset
|
||||
would draw under the next item, since items sit edge to edge in the row.
|
||||
|
||||
The item is laid out at the carousel's large size and masked: the surface inside is clipped
|
||||
by `--material-carousel-inset` from both sides with M3's extra-large corner (28px,
|
||||
CarouselDefaults' item shape) and moved by `--material-carousel-shift`, both written by
|
||||
resources/js/carousel.js. Without script the item shows unmasked, at its `item-width`. In a
|
||||
`full-screen` carousel it is none of that: the item fills the row, edge to edge, with no
|
||||
corner and no mask.
|
||||
|
||||
In a `multi-aspect` carousel the item is as wide as its own `aspect` makes it at the row's
|
||||
height, and nothing masks it: M3's uncontained multi-aspect-ratio layout is for items whose
|
||||
@@ -44,7 +50,6 @@
|
||||
])
|
||||
|
||||
@php
|
||||
$vertical = $layout === 'full-screen';
|
||||
$multiAspect = $layout === 'multi-aspect';
|
||||
|
||||
// M3's 9:16 minimum and 16:9 maximum. `16/9`, `16:9` and `1.78` all say the same thing.
|
||||
@@ -62,38 +67,23 @@
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes
|
||||
->class([
|
||||
'focus-ring relative h-full shrink-0 snap-start snap-always focus-visible:-outline-offset-3',
|
||||
'w-full' => $vertical,
|
||||
'w-auto rounded-corner-xl' => $multiAspect,
|
||||
'w-(--material-carousel-slot) max-w-full rounded-corner-xl' => ! $vertical && ! $multiAspect,
|
||||
])
|
||||
->class('md-focus-ring')
|
||||
->merge(array_filter([
|
||||
'role' => 'group',
|
||||
'aria-roledescription' => __('slide'),
|
||||
'aria-label' => '[material-carousel-position]',
|
||||
'data-material-carousel-item' => true,
|
||||
'data-md-carousel-item' => true,
|
||||
'tabindex' => '0',
|
||||
'style' => $ratio === null ? null : "aspect-ratio: {$ratio}",
|
||||
], fn ($value): bool => $value !== null)) }}>
|
||||
<div
|
||||
data-material-carousel-surface
|
||||
@class([
|
||||
'relative size-full overflow-hidden bg-surface-container-highest text-on-surface',
|
||||
'rounded-corner-xl' => $multiAspect,
|
||||
'rounded-corner-xl translate-x-(--material-carousel-shift) [clip-path:inset(0_var(--material-carousel-inset,0px)_round_var(--md-sys-shape-corner-xl))]' => ! $vertical && ! $multiAspect,
|
||||
])
|
||||
>
|
||||
<div data-material-carousel-content class="size-full [&>img]:size-full [&>img]:object-cover">
|
||||
<div data-md-carousel-surface>
|
||||
<div data-md-carousel-content>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@if (filled($label))
|
||||
<div
|
||||
data-material-carousel-label
|
||||
class="pointer-events-none absolute inset-x-0 bottom-0 flex bg-linear-to-t from-scrim/60 to-transparent px-4 pt-10 pb-4 opacity-(--material-carousel-label)"
|
||||
>
|
||||
<span class="truncate type-title-md text-white translate-x-(--material-carousel-label-shift)">{{ $label }}</span>
|
||||
<div data-md-carousel-label>
|
||||
<span data-md-carousel-label-text>{{ $label }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user