class([
- 'relative h-full w-(--material-carousel-slot) max-w-full shrink-0 snap-start snap-always',
+ 'focus-ring relative h-full shrink-0 snap-start snap-always focus-visible:-outline-offset-3',
+ 'w-full' => $vertical,
+ 'w-(--material-carousel-slot) max-w-full rounded-corner-xl' => ! $vertical,
])
->merge([
'role' => 'group',
'aria-roledescription' => __('slide'),
'aria-label' => '[material-carousel-position]',
'data-material-carousel-item' => true,
+ 'tabindex' => '0',
]) }}>
! $vertical,
+ ])
>
-
+
{{ $slot }}
@@ -43,7 +65,7 @@
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)"
>
-
{{ $label }}
+
{{ $label }}
@endif
diff --git a/resources/views/components/carousel.blade.php b/resources/views/components/carousel.blade.php
index ef2af072..bf180ed9 100644
--- a/resources/views/components/carousel.blade.php
+++ b/resources/views/components/carousel.blade.php
@@ -19,12 +19,19 @@
does.
- `uncontained`: items keep `item-width`; the one cut off at the end narrows as it leaves —
HorizontalUncontainedCarousel. No snapping, as Compose's uncontained fling.
- - `full-screen`: one item the width of the carousel at a time
- (FullScreenCarouselStrategy).
+ - `full-screen`: one edge-to-edge item at a time, scrolled **vertically** — M3: "this layout
+ works best with content that is taller than it is wide, and scrolls vertically. It only
+ works in portrait orientation in compact and medium breakpoints. Don't use this layout in
+ landscape orientation." Items have no corner and no mask, 16px apart, no end padding, and
+ the row is never wider than the 840px medium window it is meant for. `item-width` and
+ `padding` do not apply; `height` is the height of each item, so give it the room a
+ portrait image wants.
`item-width` takes pixels or any CSS length. `height` is the items' height (205px, Compose's
- sample). `padding` is Compose's `contentPadding` in pixels (0): the first and last items
- rest that far in from the edges while items in between scroll to them. Items are 8px apart
- with M3's extra-large corner.
+ sample). `padding` is Compose's `contentPadding` in pixels: the first and last items rest
+ that far in from the edges while items in between scroll to them. M3's specs table gives
+ every layout 16dp of it — `uncontained` at the leading edge only, `full-screen` none — so
+ that is the default, with the 8dp above and below the row that goes with it. Items are 8px
+ apart with M3's extra-large corner.
The row is a native scroll container with CSS scroll snap, one item per swipe, as Compose's
single-advance fling; touch, trackpad and Shift with the wheel scroll it. resources/js/
@@ -34,14 +41,18 @@
frame, content at full size, so items change size between the keylines. Without script
the row still scrolls and snaps, unmasked.
- WAI-ARIA's carousel pattern: the row is a focusable `region` with
- `aria-roledescription="carousel"`, named by `label` ("Carousel" by default); each item is a
- `group` with `aria-roledescription="slide"` named "n of m". With the row focused the arrow
- keys move one item, Home and End to the ends; focus moving into an item, or a press on one
+ 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
+ "n of m". M3: "Use Tab to place initial focus on the first carousel item" and "avoid
+ focusing on the carousel container", so the items are the tab stops and the row is not one.
+ From a focused item the arrow keys move one item, Home and End go to the ends, and Space or
+ Enter opens an item that is not fully open; focus moving into an item, or a press on one
that is not fully open, brings it into focus. `controls` adds previous and next icon
buttons under the row — by default only where the pointer is fine (a mouse or trackpad);
- `true` always, `false` never. Under reduced motion they scroll instantly and content no
- longer slides inside its mask. RTL mirrors the keylines, keys and buttons.
+ `true` always, `false` never. Under reduced motion they scroll instantly and nothing is
+ masked: every item stays at its large size, which is M3's rule for a carousel under reduced
+ motion (docs/reference/m3/styles.md § Motion → Accessibility requirements). RTL mirrors the
+ keylines, keys and buttons.
Re-measures itself when resized, when a Livewire morph resets its styles and when items
come and go. The row's id, which the buttons control, is new with every render; the row
@@ -52,7 +63,7 @@
'layout' => 'multi-browse',
'itemWidth' => null,
'height' => null,
- 'padding' => 0,
+ 'padding' => 16,
'centered' => false,
'label' => null,
'controls' => null,
@@ -60,6 +71,7 @@
@php
$layout = in_array($layout, ['multi-browse', 'hero', 'uncontained', 'full-screen'], true) ? $layout : 'multi-browse';
+ $vertical = $layout === 'full-screen';
$controls = $controls === null ? null : filter_var($controls, FILTER_VALIDATE_BOOL);
$label ??= __('Carousel');
$scrollerId = 'material-carousel-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
@@ -76,8 +88,9 @@
'hero' => $cssLength($itemWidth),
'full-screen' => null,
};
+ // The full-screen item is `h-full w-full`: it takes the row, not a slot.
$slotWidth = match (true) {
- $layout === 'full-screen' => '100%',
+ $vertical => null,
$preferredWidth === null => 'calc(100% - 64px)',
default => $preferredWidth,
};
@@ -97,15 +110,22 @@
$slides,
);
+ // The specs table's leading and trailing padding: 16dp for multi-browse and hero, leading
+ // only for uncontained, none for full-screen, which is edge to edge.
+ $padding = max(0, (float) $padding);
+ $paddingStart = $vertical ? 0.0 : $padding;
+ $paddingEnd = $vertical || $layout === 'uncontained' ? 0.0 : $padding;
+
$attributes = $attributes
->class('relative')
->merge(array_filter([
'data-material-carousel' => $layout,
'data-centered' => $layout === 'hero' && $centered ? true : null,
- 'data-padding' => (string) max(0, (float) $padding),
+ 'data-padding' => (string) $paddingStart,
+ 'data-padding-end' => (string) $paddingEnd,
'style' => implode('; ', array_filter([
$preferredWidth ? "--material-carousel-item-width: {$preferredWidth}" : null,
- "--material-carousel-slot: {$slotWidth}",
+ $slotWidth ? "--material-carousel-slot: {$slotWidth}" : null,
'--material-carousel-height: '.($cssLength($height) ?? '205px'),
])),
], fn ($value): bool => $value !== null));
@@ -123,11 +143,12 @@
role="region"
aria-roledescription="{{ __('carousel') }}"
aria-label="{{ $label }}"
- tabindex="0"
@class([
- 'focus-ring flex h-(--material-carousel-height) gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain',
+ 'flex',
'[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
- 'snap-x snap-mandatory' => $layout !== 'uncontained',
+ '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,
+ 'snap-x snap-mandatory' => ! $vertical && $layout !== 'uncontained',
])
>
{!! $slides !!}
@@ -140,22 +161,22 @@
'flex' => $controls === true,
])>