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/css/components.css
+2
View File
@@ -64,5 +64,7 @@
@import './components/modal.css'; @import './components/modal.css';
@import './components/drawer.css'; @import './components/drawer.css';
@import './components/bottom-sheet.css'; @import './components/bottom-sheet.css';
@import './components/carousel-item.css';
@import './components/carousel.css';
/* Navigation */ /* Navigation */
resources/css/components/carousel-item.css
+111
View File
@@ -0,0 +1,111 @@
/*
* <x-carousel-item>: one slide of an <x-carousel>, masked and shifted by the keyline maths
* carousel.css's header describes, unless the row is full-screen or multi-aspect, where nothing
* masks it at all (docs/reference/m3/components-actions-communication-containment.md § Carousel;
* docs/audits/m3-alignment/containment.md, C-11, C-12, C-25).
*
* [data-md-carousel-item] the tab stop (C-18), a focusable `group`, `md-focus-ring`
* [data-md-carousel-surface] the masked, shifted, extra-large-corner (28px) box
* [data-md-carousel-content] the slot (an <img>, cropped)
* [data-md-carousel-label] the "n of m"-named overlay on the scrim
* [data-md-carousel-label-text]
*
* The item 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 — refined here to
* an inset ring: an item sits edge to edge with its neighbours in the row, so the class's own 2px
* *outward* offset would draw under the next item instead of around this one.
*
* Full-screen: edge to edge, no corner, no mask — `--material-carousel-shift`/`-inset` go unread.
* Multi-aspect: the view writes the item's own `aspect-ratio` inline (`aspect`, a prop, held
* inside M3's 9:16–16:9 range); the extra-large corner still applies but nothing masks it, since
* an Arrangement describes items of one size and a multi-aspect row has none. Selectors use `>`
* throughout, matching carousel.css, so a carousel nested inside an item never inherits its
* parent's layout rules.
*
* The label's ink is a literal `white`, not a role: it sits over `--md-sys-color-scrim`, which is
* black in every scheme, theme and contrast level, so white is the one ink that always has the
* scrim's contrast — a role (`inverse-on-surface`) is dark ink in a dark scheme and fails there
* (C-25, deliberately kept, as the component's original header explained).
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.components {
[data-md-carousel-item] {
position: relative;
height: 100%;
flex-shrink: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
}
[data-md-carousel-item]:focus-visible {
outline-offset: -12px;
}
[data-md-carousel='full-screen'] > [data-md-carousel-scroller] > [data-md-carousel-item] {
width: 100%;
}
[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] > [data-md-carousel-item] {
width: auto;
border-radius: var(--md-sys-shape-corner-xl);
}
[data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item] {
width: var(--material-carousel-slot);
max-width: 100%;
border-radius: var(--md-sys-shape-corner-xl);
}
[data-md-carousel-item] > [data-md-carousel-surface] {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: var(--md-sys-color-surface-container-highest);
color: var(--md-sys-color-on-surface);
}
[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] > [data-md-carousel-item] > [data-md-carousel-surface] {
border-radius: var(--md-sys-shape-corner-xl);
}
[data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item] > [data-md-carousel-surface] {
border-radius: var(--md-sys-shape-corner-xl);
translate: var(--material-carousel-shift) 0;
clip-path: inset(0 var(--material-carousel-inset, 0px) round var(--md-sys-shape-corner-xl));
}
[data-md-carousel-surface] > [data-md-carousel-content] {
width: 100%;
height: 100%;
& > img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
[data-md-carousel-surface] > [data-md-carousel-label] {
pointer-events: none;
position: absolute;
inset-inline: 0;
bottom: 0;
display: flex;
padding: var(--md-sys-measurement-space500) var(--md-sys-measurement-space200) var(--md-sys-measurement-space200);
background: linear-gradient(to top, color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent), transparent);
opacity: var(--material-carousel-label);
}
[data-md-carousel-label] > [data-md-carousel-label-text] {
overflow: hidden;
color: white;
font: var(--md-sys-typescale-title-md);
letter-spacing: var(--md-sys-typescale-title-md-tracking);
text-overflow: ellipsis;
white-space: nowrap;
translate: var(--material-carousel-label-shift) 0;
}
}
resources/css/components/carousel.css
+113
View File
@@ -0,0 +1,113 @@
/*
* <x-carousel>: M3 Expressive's carousel — multi-browse, hero, uncontained, the uncontained
* multi-aspect-ratio layout (added November 2025) and full-screen, on a native scroll container
* with CSS scroll snap. resources/js/carousel.js ports Compose's keyline maths (Arrangement.kt,
* Keylines.kt, KeylineList.kt, Strategy.kt, KeylineSnapPosition.kt, Carousel.kt, androidx Compose
* Material 3 @ commit 7ac433e44e797de53af85226797862687f37735f, Apache-2.0) and writes the masks
* and sizes as inline custom properties every scroll frame; this file draws everything the script
* does not — the row's layout per layout, and the controls — and carousel-item.css draws the
* item and its mask (docs/reference/m3/components-actions-communication-containment.md
* § Carousel; docs/audits/m3-alignment/containment.md).
*
* [data-md-carousel] the row wrapper; its value is the layout
* [data-md-carousel-probe] hidden, measures the preferred item width for the script
* [data-md-carousel-scroller] the scroll container (role="region")
* [data-md-carousel-item] one slide — carousel-item.css
* [data-md-carousel-controls] previous/next, "auto" (pointer: fine only) or "always"
* [data-md-carousel-previous], [data-md-carousel-next]
*
* Specs table: 16dp leading/trailing padding, 8dp top/bottom and between items, for every layout
* but uncontained (leading only) and full-screen (0, edge to edge — C-12); a `>` combinator
* throughout, never a bare descendant one, because a carousel item can itself hold a nested
* carousel (a `multi-aspect` gallery inside a `hero` slide) whose own root would otherwise match
* its parent's rules too. Full-screen scrolls vertically, one edge-to-edge item at a time, capped
* at the 840px medium window it is meant for (C-11); reduced motion needs no rule here at all —
* the script writes zero inset, shift and full opacity itself for every layout (C-05).
*
* The previous/next icons mirror in RTL by scaling the whole button, as the row's arrow keys and
* scroll direction already do (`resources/js/carousel.js`'s own `state.rtl`), rather than through
* `<x-icon mirror-rtl>`: `<x-button icon>` has no prop to reach it, and flipping a round icon
* button whole reads the same as flipping only its glyph.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './button.css';
@import './carousel-item.css';
@layer material.components {
[data-md-carousel] {
position: relative;
}
[data-md-carousel] > [data-md-carousel-probe] {
position: absolute;
inset-inline-start: 0;
top: 0;
height: 0;
width: var(--material-carousel-item-width);
visibility: hidden;
pointer-events: none;
}
[data-md-carousel] > [data-md-carousel-scroller] {
display: flex;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
[data-md-carousel='full-screen'] > [data-md-carousel-scroller] {
margin-inline: auto;
height: var(--material-carousel-height);
max-width: 840px;
flex-direction: column;
gap: var(--md-sys-measurement-space200);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-snap-type: y mandatory;
}
[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-scroller] {
height: calc(var(--material-carousel-height) + 16px);
gap: var(--md-sys-measurement-space100);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
padding-block: var(--md-sys-measurement-space100);
}
[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] {
padding-inline-start: var(--material-carousel-pad);
}
[data-md-carousel='multi-browse'] > [data-md-carousel-scroller],
[data-md-carousel='hero'] > [data-md-carousel-scroller] {
scroll-snap-type: x mandatory;
}
[data-md-carousel] > [data-md-carousel-controls] {
display: none;
margin-top: 12px;
justify-content: flex-end;
gap: var(--md-sys-measurement-space100);
}
[data-md-carousel] > [data-md-carousel-controls='always'] {
display: flex;
}
@media (pointer: fine) {
[data-md-carousel] > [data-md-carousel-controls='auto'] {
display: flex;
}
}
[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:dir(rtl),
[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:dir(rtl) {
transform: scaleX(-1);
}
}
resources/js/carousel.js
+9 -9
View File
@@ -81,7 +81,7 @@ const TARGET_MS = 700
// How long the row must go without a scroll event to count as having come to rest. // How long the row must go without a scroll event to count as having come to rest.
const SETTLE_MS = 150 const SETTLE_MS = 150
const ITEM = '[data-material-carousel-item]' const ITEM = '[data-md-carousel-item]'
const INTERACTIVE = 'a[href], button, input, select, textarea, summary, [contenteditable], [tabindex]:not([tabindex="-1"])' const INTERACTIVE = 'a[href], button, input, select, textarea, summary, [contenteditable], [tabindex]:not([tabindex="-1"])'
const clamp = (value, min, max) => Math.min(Math.max(value, min), max) const clamp = (value, min, max) => Math.min(Math.max(value, min), max)
@@ -870,14 +870,14 @@ document.addEventListener('alpine:init', () => {
const style = getComputedStyle(scroller) const style = getComputedStyle(scroller)
state.rtl = style.direction === 'rtl' state.rtl = style.direction === 'rtl'
state.vertical = root.dataset.materialCarousel === 'full-screen' state.vertical = root.dataset.mdCarousel === 'full-screen'
state.measured = root.dataset.materialCarousel === 'multi-aspect' state.measured = root.dataset.mdCarousel === 'multi-aspect'
state.items = [...scroller.children] state.items = [...scroller.children]
.filter((element) => element.matches(ITEM)) .filter((element) => element.matches(ITEM))
.map((element) => ({ .map((element) => ({
element, element,
surface: element.querySelector('[data-material-carousel-surface]'), surface: element.querySelector('[data-md-carousel-surface]'),
label: element.querySelector('[data-material-carousel-label]'), label: element.querySelector('[data-md-carousel-label]'),
labelWidth: 0, labelWidth: 0,
written: '', written: '',
})) }))
@@ -922,16 +922,16 @@ document.addEventListener('alpine:init', () => {
const space = scroller.clientWidth const space = scroller.clientWidth
const itemSpacing = parseFloat(style.columnGap) || 0 const itemSpacing = parseFloat(style.columnGap) || 0
const padding = Number(root.dataset.padding) || 0 const padding = Number(root.dataset.mdPadding) || 0
const paddingEnd = Number(root.dataset.paddingEnd) || 0 const paddingEnd = Number(root.dataset.mdPaddingEnd) || 0
const probe = this.$refs.probe const probe = this.$refs.probe
const preferred = probe ? probe.getBoundingClientRect().width : null const preferred = probe ? probe.getBoundingClientRect().width : null
const count = state.items.length const count = state.items.length
const keylines = { const keylines = {
hero: () => heroKeylineList(space, preferred, itemSpacing, count, root.dataset.centered !== undefined), hero: () => heroKeylineList(space, preferred, itemSpacing, count, root.dataset.mdCentered !== undefined),
uncontained: () => uncontainedKeylineList(space, preferred ?? 0, itemSpacing), uncontained: () => uncontainedKeylineList(space, preferred ?? 0, itemSpacing),
}[root.dataset.materialCarousel] ?? (() => multiBrowseKeylineList(space, preferred ?? 0, itemSpacing, count)) }[root.dataset.mdCarousel] ?? (() => multiBrowseKeylineList(space, preferred ?? 0, itemSpacing, count))
const strategy = count === 0 ? createStrategy(EMPTY, space, itemSpacing, 0, 0) : createStrategy(keylines(), space, itemSpacing, padding, paddingEnd) const strategy = count === 0 ? createStrategy(EMPTY, space, itemSpacing, 0, 0) : createStrategy(keylines(), space, itemSpacing, padding, paddingEnd)
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 {{-- 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"> <x-carousel-item label="Lake Constance">
<img src="{{ $photo->url }}" alt="Lake Constance at dusk" /> <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 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, 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 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 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 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 arrow keys move between them and Space or Enter opens the focused one
(docs/reference/m3/components-actions-communication-containment.md § Carousel → (docs/reference/m3/components-actions-communication-containment.md § Carousel →
Accessibility). The item is laid out at the carousel's large size and masked: Accessibility). It renders the shared `md-focus-ring` class (foundation/interaction.css)
the surface inside is clipped by `--material-carousel-inset` from both sides with M3's rather than a hand-rolled ring — the box the class draws is the item's own whole hit area —
extra-large corner (28px, CarouselDefaults' item shape) and moved by which resources/css/components/carousel-item.css refines to an inset ring: an outward offset
`--material-carousel-shift`, both written by resources/js/carousel.js. Without script the would draw under the next item, since items sit edge to edge in the row.
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. 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 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 height, and nothing masks it: M3's uncontained multi-aspect-ratio layout is for items whose
@@ -44,7 +50,6 @@
]) ])
@php @php
$vertical = $layout === 'full-screen';
$multiAspect = $layout === 'multi-aspect'; $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. // 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 @endphp
<div {{ $attributes <div {{ $attributes
->class([ ->class('md-focus-ring')
'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,
])
->merge(array_filter([ ->merge(array_filter([
'role' => 'group', 'role' => 'group',
'aria-roledescription' => __('slide'), 'aria-roledescription' => __('slide'),
'aria-label' => '[material-carousel-position]', 'aria-label' => '[material-carousel-position]',
'data-material-carousel-item' => true, 'data-md-carousel-item' => true,
'tabindex' => '0', 'tabindex' => '0',
'style' => $ratio === null ? null : "aspect-ratio: {$ratio}", 'style' => $ratio === null ? null : "aspect-ratio: {$ratio}",
], fn ($value): bool => $value !== null)) }}> ], fn ($value): bool => $value !== null)) }}>
<div <div data-md-carousel-surface>
data-material-carousel-surface <div data-md-carousel-content>
@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">
{{ $slot }} {{ $slot }}
</div> </div>
@if (filled($label)) @if (filled($label))
<div <div data-md-carousel-label>
data-material-carousel-label <span data-md-carousel-label-text>{{ $label }}</span>
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> </div>
@endif @endif
</div> </div>
resources/views/components/carousel.blade.php
+22 -30
View File
@@ -53,8 +53,8 @@
carousel.js ports Compose's keylines (Arrangement, Keylines, KeylineList, Strategy, carousel.js ports Compose's keylines (Arrangement, Keylines, KeylineList, Strategy,
KeylineSnapPosition and Carousel.kt at androidx commit KeylineSnapPosition and Carousel.kt at androidx commit
7ac433e44e797de53af85226797862687f37735f, Apache-2.0) and masks each item on every scroll 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 frame, content at full size, so items change size between the keylines. Without script the
the row still scrolls and snaps, unmasked. row still scrolls and snaps, unmasked.
The row is a `region` with `aria-roledescription="carousel"`, named by `label` ("Carousel" 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 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 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 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 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([ @props([
'layout' => 'multi-browse', 'layout' => 'multi-browse',
@@ -104,8 +111,8 @@
'hero' => $cssLength($itemWidth), 'hero' => $cssLength($itemWidth),
'multi-aspect', 'full-screen' => null, '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 // The full-screen item fills the row and a multi-aspect one is as wide as its own ratio makes
// makes it: neither takes a slot. // it: neither takes a slot.
$slotWidth = match (true) { $slotWidth = match (true) {
$vertical, $multiAspect => null, $vertical, $multiAspect => null,
$preferredWidth === null => 'calc(100% - 64px)', $preferredWidth === null => 'calc(100% - 64px)',
@@ -133,13 +140,11 @@
$paddingStart = $vertical ? 0.0 : $padding; $paddingStart = $vertical ? 0.0 : $padding;
$paddingEnd = $vertical || $layout === 'uncontained' || $multiAspect ? 0.0 : $padding; $paddingEnd = $vertical || $layout === 'uncontained' || $multiAspect ? 0.0 : $padding;
$attributes = $attributes $attributes = $attributes->merge(array_filter([
->class('relative') 'data-md-carousel' => $layout,
->merge(array_filter([ 'data-md-centered' => $layout === 'hero' && $centered ? true : null,
'data-material-carousel' => $layout, 'data-md-padding' => (string) $paddingStart,
'data-centered' => $layout === 'hero' && $centered ? true : null, 'data-md-padding-end' => (string) $paddingEnd,
'data-padding' => (string) $paddingStart,
'data-padding-end' => (string) $paddingEnd,
'style' => implode('; ', array_filter([ 'style' => implode('; ', array_filter([
$preferredWidth ? "--material-carousel-item-width: {$preferredWidth}" : null, $preferredWidth ? "--material-carousel-item-width: {$preferredWidth}" : null,
$slotWidth ? "--material-carousel-slot: {$slotWidth}" : null, $slotWidth ? "--material-carousel-slot: {$slotWidth}" : null,
@@ -153,7 +158,7 @@
<div x-data="materialCarousel" {{ $attributes }}> <div x-data="materialCarousel" {{ $attributes }}>
@if ($preferredWidth) @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 @endif
<div <div
@@ -163,26 +168,13 @@
role="region" role="region"
aria-roledescription="{{ __('carousel') }}" aria-roledescription="{{ __('carousel') }}"
aria-label="{{ $label }}" aria-label="{{ $label }}"
@class([ data-md-carousel-scroller
'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,
])
> >
{!! $slides !!} {!! $slides !!}
</div> </div>
@if ($controls !== false) @if ($controls !== false)
<div @class([ <div data-md-carousel-controls="{{ $controls === true ? 'always' : 'auto' }}">
'mt-3 justify-end gap-2',
'hidden pointer-fine:flex' => $controls === null,
'flex' => $controls === true,
])>
<x-livewire-material::button <x-livewire-material::button
:icon="$vertical ? 'keyboard_arrow_up' : 'chevron_left'" :icon="$vertical ? 'keyboard_arrow_up' : 'chevron_left'"
variant="tonal" variant="tonal"
@@ -190,7 +182,7 @@
aria-controls="{{ $scrollerId }}" aria-controls="{{ $scrollerId }}"
x-ref="previous" x-ref="previous"
x-on:click="previous()" x-on:click="previous()"
:class="$vertical ? '' : 'rtl:-scale-x-100'" data-md-carousel-previous
/> />
<x-livewire-material::button <x-livewire-material::button
:icon="$vertical ? 'keyboard_arrow_down' : 'chevron_right'" :icon="$vertical ? 'keyboard_arrow_down' : 'chevron_right'"
@@ -199,7 +191,7 @@
aria-controls="{{ $scrollerId }}" aria-controls="{{ $scrollerId }}"
x-ref="next" x-ref="next"
x-on:click="next()" x-on:click="next()"
:class="$vertical ? '' : 'rtl:-scale-x-100'" data-md-carousel-next
/> />
</div> </div>
@endif @endif
tests/Browser/CarouselTest.php
+98 -10
View File
@@ -51,10 +51,10 @@ function onCarousel(int $index, string $body, string $scope = '#carousel'): stri
(async () => { (async () => {
const root = document.querySelectorAll('{$scope} [x-data="materialCarousel"]')[{$index}] const root = document.querySelectorAll('{$scope} [x-data="materialCarousel"]')[{$index}]
const scroller = root.querySelector('[role="region"]') const scroller = root.querySelector('[role="region"]')
const items = [...scroller.querySelectorAll('[data-material-carousel-item]')] const items = [...scroller.querySelectorAll('[data-md-carousel-item]')]
const gap = parseFloat(getComputedStyle(scroller).columnGap) const gap = parseFloat(getComputedStyle(scroller).columnGap)
const size = parseFloat(root.style.getPropertyValue('--material-carousel-slot')) const size = parseFloat(root.style.getPropertyValue('--material-carousel-slot'))
const surface = (i) => items[i].querySelector('[data-material-carousel-surface]') const surface = (i) => items[i].querySelector('[data-md-carousel-surface]')
const inset = (i) => parseFloat(surface(i).style.getPropertyValue('--material-carousel-inset')) const inset = (i) => parseFloat(surface(i).style.getPropertyValue('--material-carousel-inset'))
const open = (i) => inset(i) - Math.min(...items.map((_, j) => inset(j))) < 0.5 const open = (i) => inset(i) - Math.min(...items.map((_, j) => inset(j))) < 0.5
const snap = (i) => Math.min(Math.max(i * (size + gap) - parseFloat(items[i].style.scrollMarginInlineStart), 0), scroller.scrollWidth - scroller.clientWidth) const snap = (i) => Math.min(Math.max(i * (size + gap) - parseFloat(items[i].style.scrollMarginInlineStart), 0), scroller.scrollWidth - scroller.clientWidth)
@@ -66,7 +66,7 @@ function onCarousel(int $index, string $body, string $scope = '#carousel'): stri
JS; JS;
} }
const FIRST_ITEM = '#carousel [data-material-carousel-item] >> nth=0'; const FIRST_ITEM = '#carousel [data-md-carousel-item] >> nth=0';
function carouselShowcase(array $options = []) function carouselShowcase(array $options = [])
{ {
@@ -151,14 +151,14 @@ it('brings a partly hidden item into focus when it is pressed, and leaves an ope
// Item 1 rests at the large size, short only of the content padding's share: focusing or // Item 1 rests at the large size, short only of the content padding's share: focusing or
// pressing it moves nothing. // pressing it moves nothing.
$page->script(onCarousel(0, 'items[1].focus(); items[1].querySelector(\'[data-material-carousel-content]\').click()')); $page->script(onCarousel(0, 'items[1].focus(); items[1].querySelector(\'[data-md-carousel-content]\').click()'));
$page->assertScript(onCarousel(0, <<<'JS' $page->assertScript(onCarousel(0, <<<'JS'
await pause(400) await pause(400)
return scroller.scrollLeft === 0 && open(1) return scroller.scrollLeft === 0 && open(1)
JS)); JS));
$page->script(onCarousel(0, 'items[4].querySelector(\'[data-material-carousel-content]\').click()')); $page->script(onCarousel(0, 'items[4].querySelector(\'[data-md-carousel-content]\').click()'));
$page->assertScript(onCarousel(0, 'return open(4) && scroller.scrollLeft > 0')); $page->assertScript(onCarousel(0, 'return open(4) && scroller.scrollLeft > 0'));
}); });
@@ -174,6 +174,27 @@ it('scrolls instantly and leaves every item unmasked under reduced motion', func
JS)); JS));
}); });
it('leaves a reduced-motion click on an item cut off at the row\'s edge where it is', function () {
// Owed by the Chromium baseline (step 32, docs/plans/material-3-browser-tests.md): reduced
// motion writes a zero inset for every item (C-05, so none of them count as masked at all),
// and the click-to-reveal affordance gates on that inset, so a press on an item only cut off
// by the row's own edge — not by a mask — does not scroll it into view. Documented here, not
// fixed: fixing isMasked() for this case is outside a hook rename.
$page = carouselShowcase(['reducedMotion' => 'reduce'])
->assertScript(onCarousel(0, <<<'JS'
const row = scroller.getBoundingClientRect()
const item = items[4].getBoundingClientRect()
return scroller.scrollLeft === 0 && item.right > row.right + 1
JS));
$page->script(onCarousel(0, 'items[4].querySelector(\'[data-md-carousel-content]\').click()'));
$page->assertScript(onCarousel(0, <<<'JS'
await pause(400)
return scroller.scrollLeft === 0
JS));
});
it('mirrors in a right-to-left page', function () { it('mirrors in a right-to-left page', function () {
Route::middleware('web')->get('/carousel-rtl-probe', fn () => Blade::render(<<<'BLADE' Route::middleware('web')->get('/carousel-rtl-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html> <!DOCTYPE html>
@@ -200,7 +221,7 @@ it('mirrors in a right-to-left page', function () {
->assertNoJavaScriptErrors() ->assertNoJavaScriptErrors()
->assertScript(onCarousel(0, 'return size > 0 && at(0) && open(0) && ! open(items.length - 1)', 'body')); ->assertScript(onCarousel(0, 'return size > 0 && at(0) && open(0) && ! open(items.length - 1)', 'body'));
$page->keys('[data-material-carousel-item] >> nth=0', 'ArrowLeft') $page->keys('[data-md-carousel-item] >> nth=0', 'ArrowLeft')
->assertScript(onCarousel(0, <<<'JS' ->assertScript(onCarousel(0, <<<'JS'
return scroller.scrollLeft < -1 && at(1) && ! open(0) && open(1) return scroller.scrollLeft < -1 && at(1) && ! open(0) && open(1)
&& parseFloat(surface(0).style.getPropertyValue('--material-carousel-shift')) < 0 && parseFloat(surface(0).style.getPropertyValue('--material-carousel-shift')) < 0
@@ -209,7 +230,7 @@ it('mirrors in a right-to-left page', function () {
$page->click('button[aria-label="Next"]') $page->click('button[aria-label="Next"]')
->assertScript(onCarousel(0, 'return at(2)', 'body')); ->assertScript(onCarousel(0, 'return at(2)', 'body'));
$page->keys('[data-material-carousel-item] >> nth=2', 'ArrowRight') $page->keys('[data-md-carousel-item] >> nth=2', 'ArrowRight')
->assertScript(onCarousel(0, 'return at(1)', 'body')); ->assertScript(onCarousel(0, 'return at(1)', 'body'));
}); });
@@ -231,16 +252,16 @@ it('measures itself again after a Livewire morph adds an item', function () {
</html> </html>
BLADE)); BLADE));
$masked = "(() => { const root = document.querySelector('[x-data=\"materialCarousel\"]'); const items = [...root.querySelectorAll('[data-material-carousel-item]')]; return root.style.getPropertyValue('--material-carousel-slot').endsWith('px') && items.every((item) => item.querySelector('[data-material-carousel-surface]').style.getPropertyValue('--material-carousel-inset').endsWith('px')) && items.length })()"; $masked = "(() => { const root = document.querySelector('[x-data=\"materialCarousel\"]'); const items = [...root.querySelectorAll('[data-md-carousel-item]')]; return root.style.getPropertyValue('--material-carousel-slot').endsWith('px') && items.every((item) => item.querySelector('[data-md-carousel-surface]').style.getPropertyValue('--material-carousel-inset').endsWith('px')) && items.length })()";
$page = visit('/carousel-morph-probe')->waitForEvent('networkidle') $page = visit('/carousel-morph-probe')->waitForEvent('networkidle')
->assertNoJavaScriptErrors() ->assertNoJavaScriptErrors()
->assertScript($masked, 6) ->assertScript($masked, 6)
->assertAttribute('[data-material-carousel-item] >> nth=5', 'aria-label', '6 of 6'); ->assertAttribute('[data-md-carousel-item] >> nth=5', 'aria-label', '6 of 6');
$page->click('Add') $page->click('Add')
->assertScript($masked, 7) ->assertScript($masked, 7)
->assertAttribute('[data-material-carousel-item] >> nth=6', 'aria-label', '7 of 7'); ->assertAttribute('[data-md-carousel-item] >> nth=6', 'aria-label', '7 of 7');
// Scrolled once the morph has settled, so only the row's own scroll listener can re-mask the // Scrolled once the morph has settled, so only the row's own scroll listener can re-mask the
// items: a row the morph swapped for a copy scrolls with its items' masks left as they were. // items: a row the morph swapped for a copy scrolls with its items' masks left as they were.
@@ -251,3 +272,70 @@ it('measures itself again after a Livewire morph adds an item', function () {
return inset(0) > 0.5 && inset(2) < 0.5 return inset(0) > 0.5 && inset(2) < 0.5
JS, 'body')); JS, 'body'));
}); });
/**
* A script against the showcase's multi-aspect carousel, scoped by its own `data-md-carousel`
* value rather than a position in the page (fragile if the showcase ever reorders its examples).
* Nothing masks a multi-aspect item (no `--material-carousel-slot`, no keylines), so
* `onCarousel()`'s size-based helpers do not apply: this carousel's resting positions come
* straight off each item's own `getBoundingClientRect()`, as `carousel.js`'s `isMasked()` reads
* them for `state.measured`.
*/
function onMultiAspectCarousel(string $body): string
{
return <<<JS
(async () => {
const root = document.querySelector('#carousel [data-md-carousel="multi-aspect"]')
const scroller = root.querySelector('[role="region"]')
const items = [...scroller.querySelectorAll('[data-md-carousel-item]')]
const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
if (root.getBoundingClientRect().top < 0 || root.getBoundingClientRect().bottom > innerHeight) root.scrollIntoView({ block: 'center' })
{$body}
})()
JS;
}
const MULTI_ASPECT_SCOPE = '#carousel [data-md-carousel="multi-aspect"]';
it('moves the multi-aspect carousel one item at a time with the buttons, arrows, Home and End', function () {
$page = carouselShowcase()
->assertNoJavaScriptErrors()
->assertScript(onMultiAspectCarousel('return scroller.scrollLeft === 0 && items.length > 2'));
$page->click(MULTI_ASPECT_SCOPE.' button[aria-label="Next"]')
->assertScript(onMultiAspectCarousel(<<<'JS'
await pause(400)
return scroller.scrollLeft > 0
JS));
$page->click(MULTI_ASPECT_SCOPE.' button[aria-label="Previous"]')
->assertScript(onMultiAspectCarousel(<<<'JS'
await pause(400)
return scroller.scrollLeft === 0
JS));
$page->keys(MULTI_ASPECT_SCOPE.' [data-md-carousel-item] >> nth=0', 'ArrowRight')
->assertScript(onMultiAspectCarousel(<<<'JS'
await pause(400)
return scroller.scrollLeft > 0 && document.activeElement === items[1]
JS));
$page->keys(':focus', 'ArrowLeft')
->assertScript(onMultiAspectCarousel(<<<'JS'
await pause(400)
return scroller.scrollLeft === 0 && document.activeElement === items[0]
JS));
$page->keys(':focus', 'End')
->assertScript(onMultiAspectCarousel(<<<'JS'
await pause(400)
return document.activeElement === items[items.length - 1]
&& Math.abs(scroller.scrollLeft - (scroller.scrollWidth - scroller.clientWidth)) < 1.5
JS));
$page->keys(':focus', 'Home')
->assertScript(onMultiAspectCarousel(<<<'JS'
await pause(400)
return document.activeElement === items[0] && scroller.scrollLeft === 0
JS));
});
tests/Feature/Components/CarouselTest.php
+117 -46
View File
@@ -1,5 +1,7 @@
<?php <?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
it('is a carousel region of focusable slides named n of m', function () { it('is a carousel region of focusable slides named n of m', function () {
$html = (string) $this->blade(<<<'BLADE' $html = (string) $this->blade(<<<'BLADE'
<x-carousel label="Recent uploads"> <x-carousel label="Recent uploads">
@@ -26,6 +28,8 @@ it('is a carousel region of focusable slides named n of m', function () {
->and(substr_count($html, 'role="group"'))->toBe(3) ->and(substr_count($html, 'role="group"'))->toBe(3)
// M3 puts the tab stop on each item and tells you not to focus the container. // M3 puts the tab stop on each item and tells you not to focus the container.
->and(substr_count($html, 'tabindex="0"'))->toBe(3) ->and(substr_count($html, 'tabindex="0"'))->toBe(3)
// The item's own interaction is the shared focus-ring class, never a hand-rolled one.
->and(substr_count($html, 'class="md-focus-ring"'))->toBe(3)
->and($html)->toMatch('/<div\s+x-ref="scroller"(?:(?!tabindex)[^>])*>/'); ->and($html)->toMatch('/<div\s+x-ref="scroller"(?:(?!tabindex)[^>])*>/');
}); });
@@ -54,27 +58,37 @@ it('browses many by default: 186px items that snap one at a time, 205px high', f
$html = (string) $this->blade('<x-carousel><x-carousel-item>A</x-carousel-item></x-carousel>'); $html = (string) $this->blade('<x-carousel><x-carousel-item>A</x-carousel-item></x-carousel>');
expect($html) expect($html)
->toContain('data-material-carousel="multi-browse"') ->toContain('data-md-carousel="multi-browse"')
->toContain('aria-label="Carousel"') ->toContain('aria-label="Carousel"')
->toContain('--material-carousel-item-width: 186px; --material-carousel-slot: 186px; --material-carousel-height: 205px') ->toContain('--material-carousel-item-width: 186px; --material-carousel-slot: 186px; --material-carousel-height: 205px')
->toContain('x-ref="probe"') ->toContain('x-ref="probe"')
->toContain('data-padding="16"') ->toContain('data-md-padding="16"')
->toContain('data-padding-end="16"') ->toContain('data-md-padding-end="16"')
->toContain('h-[calc(var(--material-carousel-height)+1rem)] gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain py-2') ->toContain('data-md-carousel-item')
->toContain('snap-x snap-mandatory') ->not->toContain('data-md-centered');
->toContain('snap-start snap-always')
->toContain('rounded-corner-xl') $carousel = ComponentStylesheet::read('carousel');
->toContain('[clip-path:inset(0_var(--material-carousel-inset,0px)_round_var(--md-sys-shape-corner-xl))]') $item = ComponentStylesheet::read('carousel-item');
->not->toContain('data-centered');
// The specs table's 16dp leading/trailing and 8dp top/bottom padding, and one item per swipe.
expect($carousel->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-scroller]"))
->toHaveKey('overflow-x', 'auto')
->toHaveKey('padding-block', 'var(--md-sys-measurement-space100)')
->and($item->declarations('[data-md-carousel-item]'))
->toHaveKey('scroll-snap-align', 'start')
->toHaveKey('scroll-snap-stop', 'always')
->and($item->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item]"))
->toHaveKey('width', 'var(--material-carousel-slot)')
->toHaveKey('border-radius', 'var(--md-sys-shape-corner-xl)');
}); });
it('takes the item width in pixels or as a CSS length, and a height and padding', function () { it('takes the item width in pixels or as a CSS length, and a height and padding', function () {
expect((string) $this->blade('<x-carousel item-width="220" height="18rem" padding="24"><x-carousel-item>A</x-carousel-item></x-carousel>')) expect((string) $this->blade('<x-carousel item-width="220" height="18rem" padding="24"><x-carousel-item>A</x-carousel-item></x-carousel>'))
->toContain('--material-carousel-item-width: 220px; --material-carousel-slot: 220px; --material-carousel-height: 18rem') ->toContain('--material-carousel-item-width: 220px; --material-carousel-slot: 220px; --material-carousel-height: 18rem')
->toContain('data-padding="24"') ->toContain('data-md-padding="24"')
->and((string) $this->blade('<x-carousel layout="uncontained"><x-carousel-item>A</x-carousel-item></x-carousel>')) ->and((string) $this->blade('<x-carousel layout="uncontained"><x-carousel-item>A</x-carousel-item></x-carousel>'))
->toContain('data-padding="16"') ->toContain('data-md-padding="16"')
->toContain('data-padding-end="0"') ->toContain('data-md-padding-end="0"')
->and((string) $this->blade('<x-carousel item-width="40%"><x-carousel-item>A</x-carousel-item></x-carousel>')) ->and((string) $this->blade('<x-carousel item-width="40%"><x-carousel-item>A</x-carousel-item></x-carousel>'))
->toContain('--material-carousel-item-width: 40%;'); ->toContain('--material-carousel-item-width: 40%;');
}); });
@@ -83,39 +97,65 @@ it('lays out a hero that fills the width unless capped, centred on request', fun
$filled = (string) $this->blade('<x-carousel layout="hero" centered><x-carousel-item>A</x-carousel-item></x-carousel>'); $filled = (string) $this->blade('<x-carousel layout="hero" centered><x-carousel-item>A</x-carousel-item></x-carousel>');
expect($filled) expect($filled)
->toContain('data-material-carousel="hero"') ->toContain('data-md-carousel="hero"')
->toContain('data-centered') ->toContain('data-md-centered')
->toContain('--material-carousel-slot: calc(100% - 64px)') ->toContain('--material-carousel-slot: calc(100% - 64px)')
->toContain('snap-x snap-mandatory')
->not->toContain('x-ref="probe"') ->not->toContain('x-ref="probe"')
->not->toContain('--material-carousel-item-width') ->not->toContain('--material-carousel-item-width')
->and((string) $this->blade('<x-carousel layout="hero" item-width="600"><x-carousel-item>A</x-carousel-item></x-carousel>')) ->and((string) $this->blade('<x-carousel layout="hero" item-width="600"><x-carousel-item>A</x-carousel-item></x-carousel>'))
->toContain('--material-carousel-item-width: 600px') ->toContain('--material-carousel-item-width: 600px')
->toContain('x-ref="probe"') ->toContain('x-ref="probe"')
->not->toContain('data-centered'); ->not->toContain('data-md-centered');
$carousel = ComponentStylesheet::read('carousel');
// multi-browse and hero are the two snap-scrolling layouts (uncontained and multi-aspect
// keep default scrolling, M3's recommendation for each).
expect($carousel->declarations("[data-md-carousel='multi-browse'] > [data-md-carousel-scroller], [data-md-carousel='hero'] > [data-md-carousel-scroller]"))
->toBe(['scroll-snap-type' => 'x mandatory']);
}); });
it('leaves an uncontained carousel unsnapped, and scrolls a full-screen one down the page', function () { it('leaves an uncontained carousel unsnapped, and scrolls a full-screen one down the page', function () {
$carousel = ComponentStylesheet::read('carousel');
$item = ComponentStylesheet::read('carousel-item');
expect((string) $this->blade('<x-carousel layout="uncontained" item-width="180"><x-carousel-item>A</x-carousel-item></x-carousel>')) expect((string) $this->blade('<x-carousel layout="uncontained" item-width="180"><x-carousel-item>A</x-carousel-item></x-carousel>'))
->toContain('data-material-carousel="uncontained"') ->toContain('data-md-carousel="uncontained"')
->toContain('--material-carousel-item-width: 180px') ->toContain('--material-carousel-item-width: 180px')
->not->toContain('snap-mandatory') ->and($carousel->has("[data-md-carousel='uncontained'] > [data-md-carousel-scroller]"))->toBeFalse()
->and((string) $this->blade('<x-carousel layout="full-screen" centered controls><x-carousel-item label="Morning">A</x-carousel-item></x-carousel>')) ->and((string) $this->blade('<x-carousel layout="full-screen" centered controls><x-carousel-item label="Morning">A</x-carousel-item></x-carousel>'))
->toContain('data-material-carousel="full-screen"') ->toContain('data-md-carousel="full-screen"')
// M3: one edge-to-edge item at a time, scrolled vertically, 16px apart, no end padding, ->toContain('data-md-padding="0" data-md-padding-end="0"')
// no corner, no mask, and never wider than the medium window it is meant for.
->toContain('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')
->toContain('data-padding="0" data-padding-end="0"')
->toContain('aria-label="Previous"') ->toContain('aria-label="Previous"')
->not->toContain('--material-carousel-slot') ->not->toContain('--material-carousel-slot')
->not->toContain('snap-x')
->not->toContain('rounded-corner-xl')
->not->toContain('clip-path')
->not->toContain('rtl:-scale-x-100')
->not->toContain('x-ref="probe"') ->not->toContain('x-ref="probe"')
->not->toContain('data-centered') ->not->toContain('data-md-centered')
->and((string) $this->blade('<x-carousel layout="sideways"><x-carousel-item>A</x-carousel-item></x-carousel>')) ->and((string) $this->blade('<x-carousel layout="sideways"><x-carousel-item>A</x-carousel-item></x-carousel>'))
->toContain('data-material-carousel="multi-browse"'); ->toContain('data-md-carousel="multi-browse"');
// M3: one edge-to-edge item at a time, scrolled vertically, 16px apart, no corner, no mask,
// and never wider than the medium window it is meant for (C-11).
expect($carousel->declarations("[data-md-carousel='full-screen'] > [data-md-carousel-scroller]"))
->toBe([
'margin-inline' => 'auto',
'height' => 'var(--material-carousel-height)',
'max-width' => '840px',
'flex-direction' => 'column',
'gap' => 'var(--md-sys-measurement-space200)',
'overflow-x' => 'hidden',
'overflow-y' => 'auto',
'overscroll-behavior-y' => 'contain',
'scroll-snap-type' => 'y mandatory',
])
->and($item->declarations("[data-md-carousel='full-screen'] > [data-md-carousel-scroller] > [data-md-carousel-item]"))
->toBe(['width' => '100%'])
// Only a masked layout (not full-screen, not multi-aspect) shifts and clips the surface.
->and($item->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item] > [data-md-carousel-surface]"))
->toBe([
'border-radius' => 'var(--md-sys-shape-corner-xl)',
'translate' => 'var(--material-carousel-shift) 0',
'clip-path' => 'inset(0 var(--material-carousel-inset, 0px) round var(--md-sys-shape-corner-xl))',
]);
}); });
it('offers previous and next buttons for fine pointers, always, or never', function () { it('offers previous and next buttons for fine pointers, always, or never', function () {
@@ -124,37 +164,64 @@ it('offers previous and next buttons for fine pointers, always, or never', funct
preg_match('/id="(material-carousel-[a-z0-9]+)"/', $auto, $scroller); preg_match('/id="(material-carousel-[a-z0-9]+)"/', $auto, $scroller);
expect($auto) expect($auto)
->toContain('hidden pointer-fine:flex') ->toContain('data-md-carousel-controls="auto"')
->toContain('data-md-carousel-previous')
->toContain('data-md-carousel-next')
->toContain('aria-label="Previous"') ->toContain('aria-label="Previous"')
->toContain('aria-label="Next"') ->toContain('aria-label="Next"')
->toContain('x-on:click="previous()"') ->toContain('x-on:click="previous()"')
->toContain('x-on:click="next()"') ->toContain('x-on:click="next()"')
->toContain("aria-controls=\"{$scroller[1]}\"") ->toContain("aria-controls=\"{$scroller[1]}\"")
->toContain('rtl:-scale-x-100')
->and(substr_count($auto, "aria-controls=\"{$scroller[1]}\""))->toBe(2); ->and(substr_count($auto, "aria-controls=\"{$scroller[1]}\""))->toBe(2);
expect((string) $this->blade('<x-carousel controls><x-carousel-item>A</x-carousel-item></x-carousel>')) expect((string) $this->blade('<x-carousel controls><x-carousel-item>A</x-carousel-item></x-carousel>'))
->toContain('aria-label="Next"') ->toContain('data-md-carousel-controls="always"')
->not->toContain('pointer-fine:flex'); ->toContain('aria-label="Next"');
expect((string) $this->blade('<x-carousel :controls="false"><x-carousel-item>A</x-carousel-item></x-carousel>')) expect((string) $this->blade('<x-carousel :controls="false"><x-carousel-item>A</x-carousel-item></x-carousel>'))
->not->toContain('data-md-carousel-controls')
->not->toContain('aria-label="Previous"') ->not->toContain('aria-label="Previous"')
->not->toContain('aria-label="Next"'); ->not->toContain('aria-label="Next"');
$carousel = ComponentStylesheet::read('carousel');
expect($carousel->declarations("[data-md-carousel] > [data-md-carousel-controls='always']"))
->toBe(['display' => 'flex'])
->and($carousel->declarations("[data-md-carousel] > [data-md-carousel-controls='auto']", ['@media (pointer: fine)']))
->toBe(['display' => 'flex'])
// The button carries no class of its own, and mirrors whole in RTL rather than through
// an icon prop button.blade.php does not expose.
->and($carousel->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:dir(rtl), [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:dir(rtl)"))
->toBe(['transform' => 'scaleX(-1)']);
}); });
it('lays a label over an item on a scrim, and passes attributes to the item', function () { it('lays a label over an item on a scrim, and passes attributes to the item', function () {
$html = (string) $this->blade('<x-carousel-item label="Lake Constance" wire:key="lake"><img src="/a.jpg" alt="" /></x-carousel-item>'); $html = (string) $this->blade('<x-carousel-item label="Lake Constance" wire:key="lake"><img src="/a.jpg" alt="" /></x-carousel-item>');
expect($html) expect($html)
->toContain('data-material-carousel-item') ->toContain('data-md-carousel-item')
->toContain('wire:key="lake"') ->toContain('wire:key="lake"')
->toContain('data-material-carousel-label') ->toContain('data-md-carousel-label')
->toContain('data-md-carousel-label-text')
->toContain('Lake Constance') ->toContain('Lake Constance')
->toContain('from-scrim/60')
->toContain('type-title-md text-white')
->toContain('[&>img]:size-full [&>img]:object-cover')
->and((string) $this->blade('<x-carousel-item>A</x-carousel-item>')) ->and((string) $this->blade('<x-carousel-item>A</x-carousel-item>'))
->not->toContain('data-material-carousel-label'); ->not->toContain('data-md-carousel-label');
$item = ComponentStylesheet::read('carousel-item');
// The scrim under the label and the item's literal white ink over it are deliberate (C-25).
expect($item->declarations('[data-md-carousel-surface] > [data-md-carousel-label]'))
->toHaveKey('background', 'linear-gradient(to top, color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent), transparent)')
->and($item->declarations('[data-md-carousel-label] > [data-md-carousel-label-text]'))
->toBe([
'overflow' => 'hidden',
'color' => 'white',
'font' => 'var(--md-sys-typescale-title-md)',
'letter-spacing' => 'var(--md-sys-typescale-title-md-tracking)',
'text-overflow' => 'ellipsis',
'white-space' => 'nowrap',
'translate' => 'var(--material-carousel-label-shift) 0',
]);
}); });
it('lets a multi-aspect carousel size each item by its own ratio, between 9:16 and 16:9', function () { it('lets a multi-aspect carousel size each item by its own ratio, between 9:16 and 16:9', function () {
@@ -169,22 +236,26 @@ it('lets a multi-aspect carousel size each item by its own ratio, between 9:16 a
BLADE); BLADE);
expect($html) expect($html)
->toContain('data-material-carousel="multi-aspect"') ->toContain('data-md-carousel="multi-aspect"')
->toContain('--material-carousel-pad: 16px') ->toContain('--material-carousel-pad: 16px')
->toContain('--material-carousel-height: 180px') ->toContain('--material-carousel-height: 180px')
->toContain('ps-(--material-carousel-pad)') ->toContain('data-md-padding="16" data-md-padding-end="0"')
->toContain('data-padding="16" data-padding-end="0"')
// M3's own range holds whatever the item asks for: 16/9 at the top, 9/16 at the bottom. // M3's own range holds whatever the item asks for: 16/9 at the top, 9/16 at the bottom.
->toContain('aspect-ratio: 1.7778') ->toContain('aspect-ratio: 1.7778')
->toContain('aspect-ratio: 0.5625') ->toContain('aspect-ratio: 0.5625')
->toContain('aspect-ratio: 1') ->toContain('aspect-ratio: 1')
->toContain('w-auto rounded-corner-xl')
// Uncontained scrolling, and nothing masks an item whose width is its own.
->not->toContain('snap-mandatory')
->not->toContain('--material-carousel-slot') ->not->toContain('--material-carousel-slot')
->not->toContain('clip-path')
->not->toContain('x-ref="probe"') ->not->toContain('x-ref="probe"')
->and(substr_count($html, 'aspect-ratio: 1.7778'))->toBe(2) ->and(substr_count($html, 'aspect-ratio: 1.7778'))->toBe(2)
->and((string) $this->blade('<x-carousel><x-carousel-item aspect="16/9">A</x-carousel-item></x-carousel>')) ->and((string) $this->blade('<x-carousel><x-carousel-item aspect="16/9">A</x-carousel-item></x-carousel>'))
->not->toContain('aspect-ratio'); ->not->toContain('aspect-ratio');
$carousel = ComponentStylesheet::read('carousel');
$item = ComponentStylesheet::read('carousel-item');
// Uncontained scrolling, and nothing masks an item whose width is its own.
expect($carousel->declarations("[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller]"))
->toBe(['padding-inline-start' => 'var(--material-carousel-pad)'])
->and($item->declarations("[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] > [data-md-carousel-item]"))
->toBe(['width' => 'auto', 'border-radius' => 'var(--md-sys-shape-corner-xl)']);
}); });
tests/Feature/Components/ContainmentStylesheetsTest.php
+2
View File
@@ -24,6 +24,8 @@ dataset('containment components', [
'modal', 'modal',
'drawer', 'drawer',
'bottom-sheet', 'bottom-sheet',
'carousel-item',
'carousel',
]); ]);
/** /**