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/drawer.css';
@import './components/bottom-sheet.css';
@import './components/carousel-item.css';
@import './components/carousel.css';
/* 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.
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 clamp = (value, min, max) => Math.min(Math.max(value, min), max)
@@ -870,14 +870,14 @@ document.addEventListener('alpine:init', () => {
const style = getComputedStyle(scroller)
state.rtl = style.direction === 'rtl'
state.vertical = root.dataset.materialCarousel === 'full-screen'
state.measured = root.dataset.materialCarousel === 'multi-aspect'
state.vertical = root.dataset.mdCarousel === 'full-screen'
state.measured = root.dataset.mdCarousel === 'multi-aspect'
state.items = [...scroller.children]
.filter((element) => element.matches(ITEM))
.map((element) => ({
element,
surface: element.querySelector('[data-material-carousel-surface]'),
label: element.querySelector('[data-material-carousel-label]'),
surface: element.querySelector('[data-md-carousel-surface]'),
label: element.querySelector('[data-md-carousel-label]'),
labelWidth: 0,
written: '',
}))
@@ -922,16 +922,16 @@ document.addEventListener('alpine:init', () => {
const space = scroller.clientWidth
const itemSpacing = parseFloat(style.columnGap) || 0
const padding = Number(root.dataset.padding) || 0
const paddingEnd = Number(root.dataset.paddingEnd) || 0
const padding = Number(root.dataset.mdPadding) || 0
const paddingEnd = Number(root.dataset.mdPaddingEnd) || 0
const probe = this.$refs.probe
const preferred = probe ? probe.getBoundingClientRect().width : null
const count = state.items.length
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),
}[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)
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