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

Rewrite the carousel without Tailwind

Browse Source 
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
2026-09-14 21:44:38 +02:00
co-authored by Claude Sonnet 5
parent 287340b066
commit a149970dd0
9 changed files with 503 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/carousel-item.blade.php
+20 -30
View File
@@ -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>
resources/views/components/carousel.blade.php
+31 -39
View File
@@ -53,8 +53,8 @@
carousel.js ports Compose's keylines (Arrangement, Keylines, KeylineList, Strategy,
KeylineSnapPosition and Carousel.kt at androidx commit
7ac433e44e797de53af85226797862687f37735f, Apache-2.0) and masks each item on every scroll
frame, content at full size, so items change size between the keylines. Without script
the row still scrolls and snaps, unmasked.
frame, content at full size, so items change size between the keylines. Without script the
row still scrolls and snaps, unmasked.
The row is a `region` with `aria-roledescription="carousel"`, named by `label` ("Carousel"
by default); each item is a focusable `group` with `aria-roledescription="slide"` named
@@ -72,7 +72,14 @@
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
carries a `wire:key` (see `<x-menu>`), so a morph patches it in place — its scroll position
and listeners kept — rather than swapping in a copy. --}}
and listeners kept — rather than swapping in a copy.
Every part below is drawn by resources/css/components/carousel.css and carousel-item.css,
keyed on `data-md-carousel` (its value is the layout) and the parts' own `data-md-carousel-*`
hooks; the script keeps writing its masks and sizes as inline custom properties
(`--material-carousel-*`), which those stylesheets read. The previous/next buttons carry no
class of their own — `<x-button>` already draws its interaction states — and mirror in RTL by
scaling the whole button from carousel.css, since `icon` has no prop to reach `mirror-rtl`. --}}
@props([
'layout' => 'multi-browse',
@@ -104,8 +111,8 @@
'hero' => $cssLength($itemWidth),
'multi-aspect', 'full-screen' => null,
};
// The full-screen item is `h-full w-full` and a multi-aspect one is as wide as its own ratio
// makes it: neither takes a slot.
// The full-screen item fills the row and a multi-aspect one is as wide as its own ratio makes
// it: neither takes a slot.
$slotWidth = match (true) {
$vertical, $multiAspect => null,
$preferredWidth === null => 'calc(100% - 64px)',
@@ -133,27 +140,25 @@
$paddingStart = $vertical ? 0.0 : $padding;
$paddingEnd = $vertical || $layout === 'uncontained' || $multiAspect ? 0.0 : $padding;
$attributes = $attributes
->class('relative')
->merge(array_filter([
'data-material-carousel' => $layout,
'data-centered' => $layout === 'hero' && $centered ? true : null,
'data-padding' => (string) $paddingStart,
'data-padding-end' => (string) $paddingEnd,
'style' => implode('; ', array_filter([
$preferredWidth ? "--material-carousel-item-width: {$preferredWidth}" : null,
$slotWidth ? "--material-carousel-slot: {$slotWidth}" : null,
// Without keylines there is nothing to anchor the first item in from the edge, so
// the multi-aspect row carries the specs table's leading padding itself.
$multiAspect ? "--material-carousel-pad: {$paddingStart}px" : null,
'--material-carousel-height: '.($cssLength($height) ?? '205px'),
])),
], fn ($value): bool => $value !== null));
$attributes = $attributes->merge(array_filter([
'data-md-carousel' => $layout,
'data-md-centered' => $layout === 'hero' && $centered ? true : null,
'data-md-padding' => (string) $paddingStart,
'data-md-padding-end' => (string) $paddingEnd,
'style' => implode('; ', array_filter([
$preferredWidth ? "--material-carousel-item-width: {$preferredWidth}" : null,
$slotWidth ? "--material-carousel-slot: {$slotWidth}" : null,
// Without keylines there is nothing to anchor the first item in from the edge, so
// the multi-aspect row carries the specs table's leading padding itself.
$multiAspect ? "--material-carousel-pad: {$paddingStart}px" : null,
'--material-carousel-height: '.($cssLength($height) ?? '205px'),
])),
], fn ($value): bool => $value !== null));
@endphp
<div x-data="materialCarousel" {{ $attributes }}>
@if ($preferredWidth)
<div x-ref="probe" aria-hidden="true" class="pointer-events-none invisible absolute start-0 top-0 h-0 w-(--material-carousel-item-width)"></div>
<div x-ref="probe" data-md-carousel-probe aria-hidden="true"></div>
@endif
<div
@@ -163,26 +168,13 @@
role="region"
aria-roledescription="{{ __('carousel') }}"
aria-label="{{ $label }}"
@class([
'flex',
'[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
'mx-auto h-(--material-carousel-height) max-w-210 snap-y snap-mandatory flex-col gap-4 overflow-x-hidden overflow-y-auto overscroll-y-contain' => $vertical,
'h-[calc(var(--material-carousel-height)+1rem)] gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain py-2' => ! $vertical,
'ps-(--material-carousel-pad)' => $multiAspect,
// M3's two scrolling modes: snap-scrolling everywhere but the two uncontained
// layouts, which it gives default scrolling.
'snap-x snap-mandatory' => ! $vertical && $layout !== 'uncontained' && ! $multiAspect,
])
data-md-carousel-scroller
>
{!! $slides !!}
</div>
@if ($controls !== false)
<div @class([
'mt-3 justify-end gap-2',
'hidden pointer-fine:flex' => $controls === null,
'flex' => $controls === true,
])>
<div data-md-carousel-controls="{{ $controls === true ? 'always' : 'auto' }}">
<x-livewire-material::button
:icon="$vertical ? 'keyboard_arrow_up' : 'chevron_left'"
variant="tonal"
@@ -190,7 +182,7 @@
aria-controls="{{ $scrollerId }}"
x-ref="previous"
x-on:click="previous()"
:class="$vertical ? '' : 'rtl:-scale-x-100'"
data-md-carousel-previous
/>
<x-livewire-material::button
:icon="$vertical ? 'keyboard_arrow_down' : 'chevron_right'"
@@ -199,7 +191,7 @@
aria-controls="{{ $scrollerId }}"
x-ref="next"
x-on:click="next()"
:class="$vertical ? '' : 'rtl:-scale-x-100'"
data-md-carousel-next
/>
</div>
@endif