diff --git a/resources/boost/skills/livewire-material-development/SKILL.md b/resources/boost/skills/livewire-material-development/SKILL.md index 4dfe7bfa..8f408372 100644 --- a/resources/boost/skills/livewire-material-development/SKILL.md +++ b/resources/boost/skills/livewire-material-development/SKILL.md @@ -499,7 +499,7 @@ An M3 bottom sheet, bound like ``: modal by default (scrim, inert page, ``` -A row of items that change size between M3's keylines as it scrolls (native scroll snap; items are masked, content keeps its size). ``: `layout` (`multi-browse` default, `hero`, `uncontained`, `full-screen`), `item-width` (px or any CSS length; the large size multi-browse aims for, the fixed size uncontained keeps, the cap for hero; 186 by default), `height` (205px), `padding` (px at the ends, 0), `centered` (hero), `label` (the region's name, "Carousel" by default), `controls` (previous/next buttons: default fine pointers only, `true` always, `false` never). ``: slot is an `` (fills and crops) or an element sized `size-full`; `label` overlays a line of text. A focusable `region` of `slide` groups named "n of m"; arrow keys move one item while the row has focus, Home/End to the ends. Works after a Livewire morph, in RTL and under reduced motion. Give items a `wire:key` in a loop. +A row of items that change size between M3's keylines as it scrolls (native scroll snap; items are masked, content keeps its size). ``: `layout` (`multi-browse` default, `hero`, `uncontained`, `full-screen`), `item-width` (px or any CSS length; the large size multi-browse aims for, the fixed size uncontained keeps, the cap for hero; 186 by default), `height` (205px), `padding` (px at the ends, **16** — M3's specs table; leading only for `uncontained`, none for `full-screen`), `centered` (hero), `label` (the region's name, "Carousel" by default), `controls` (previous/next buttons: default fine pointers only, `true` always, `false` never). ``: slot is an `` (fills and crops) or an element sized `size-full`; `label` overlays a line of text. A focusable `region` of `slide` groups named "n of m"; arrow keys move one item while the row has focus, Home/End to the ends. Works after a Livewire morph, in RTL and under reduced motion. Give items a `wire:key` in a loop. ### `` diff --git a/resources/js/carousel.js b/resources/js/carousel.js index 734fdf37..afaaaa60 100644 --- a/resources/js/carousel.js +++ b/resources/js/carousel.js @@ -864,6 +864,7 @@ document.addEventListener('alpine:init', () => { const space = scroller.clientWidth const itemSpacing = parseFloat(getComputedStyle(scroller).columnGap) || 0 const padding = Number(root.dataset.padding) || 0 + const paddingEnd = Number(root.dataset.paddingEnd) || 0 const probe = this.$refs.probe const preferred = probe ? probe.getBoundingClientRect().width : null @@ -885,7 +886,7 @@ document.addEventListener('alpine:init', () => { 'full-screen': () => fullScreenKeylineList(space, itemSpacing), }[root.dataset.materialCarousel] ?? (() => multiBrowseKeylineList(space, preferred ?? 0, itemSpacing, count)) - const strategy = count === 0 ? createStrategy(EMPTY, space, itemSpacing, 0, 0) : createStrategy(keylines(), space, itemSpacing, padding, padding) + const strategy = count === 0 ? createStrategy(EMPTY, space, itemSpacing, 0, 0) : createStrategy(keylines(), space, itemSpacing, padding, paddingEnd) state.strategy = strategy diff --git a/resources/views/components/carousel-item.blade.php b/resources/views/components/carousel-item.blade.php index 3d5eb0b8..f4a530e9 100644 --- a/resources/views/components/carousel-item.blade.php +++ b/resources/views/components/carousel-item.blade.php @@ -7,7 +7,9 @@ `label` lays a short line of text over the bottom of the art, on a scrim, pinned to the item's visible edge and fading out as the item narrows — Compose's carousel sample, which - fades its label chip in once the mask is wide enough to hold it. + 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; the text itself is `inverse-on-surface`, a role a scheme and a + contrast profile follow, rather than a literal white. A `group` with `aria-roledescription="slide"`, named "n of m" by the carousel around it (WAI-ARIA's carousel pattern). The item is laid out at the carousel's large size and masked: @@ -43,7 +45,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 1e79686d..b2cbad20 100644 --- a/resources/views/components/carousel.blade.php +++ b/resources/views/components/carousel.blade.php @@ -22,9 +22,11 @@ - `full-screen`: one item the width of the carousel at a time (FullScreenCarouselStrategy). `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/ @@ -54,7 +56,7 @@ 'layout' => 'multi-browse', 'itemWidth' => null, 'height' => null, - 'padding' => 0, + 'padding' => 16, 'centered' => false, 'label' => null, 'controls' => null, @@ -99,12 +101,19 @@ $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 = $layout === 'full-screen' ? 0.0 : $padding; + $paddingEnd = in_array($layout, ['uncontained', 'full-screen'], true) ? 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}", @@ -127,8 +136,10 @@ aria-label="{{ $label }}" tabindex="0" @class([ - 'focus-ring flex h-(--material-carousel-height) gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain', + 'focus-ring flex gap-2 overflow-x-auto overflow-y-hidden overscroll-x-contain', '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden', + 'h-(--material-carousel-height)' => $layout === 'full-screen', + 'h-[calc(var(--material-carousel-height)+1rem)] py-2' => $layout !== 'full-screen', 'snap-x snap-mandatory' => $layout !== 'uncontained', ]) > diff --git a/tests/Feature/Components/CarouselTest.php b/tests/Feature/Components/CarouselTest.php index 47f48567..d9b31c10 100644 --- a/tests/Feature/Components/CarouselTest.php +++ b/tests/Feature/Components/CarouselTest.php @@ -56,7 +56,9 @@ it('browses many by default: 186px items that snap one at a time, 205px high', f ->toContain('aria-label="Carousel"') ->toContain('--material-carousel-item-width: 186px; --material-carousel-slot: 186px; --material-carousel-height: 205px') ->toContain('x-ref="probe"') - ->toContain('data-padding="0"') + ->toContain('data-padding="16"') + ->toContain('data-padding-end="16"') + ->toContain('h-[calc(var(--material-carousel-height)+1rem)] py-2') ->toContain('snap-x snap-mandatory') ->toContain('snap-start snap-always') ->toContain('rounded-corner-xl') @@ -65,9 +67,12 @@ it('browses many by default: 186px items that snap one at a time, 205px high', f }); it('takes the item width in pixels or as a CSS length, and a height and padding', function () { - expect((string) $this->blade('A')) + expect((string) $this->blade('A')) ->toContain('--material-carousel-item-width: 220px; --material-carousel-slot: 220px; --material-carousel-height: 18rem') + ->toContain('data-padding="24"') + ->and((string) $this->blade('A')) ->toContain('data-padding="16"') + ->toContain('data-padding-end="0"') ->and((string) $this->blade('A')) ->toContain('--material-carousel-item-width: 40%;'); }); @@ -136,7 +141,7 @@ it('lays a label over an item on a scrim, and passes attributes to the item', fu ->toContain('data-material-carousel-label') ->toContain('Lake Constance') ->toContain('from-scrim/60') - ->toContain('type-title-md text-white') + ->toContain('type-title-md text-inverse-on-surface') ->toContain('[&>img]:size-full [&>img]:object-cover') ->and((string) $this->blade('A')) ->not->toContain('data-material-carousel-label');