Andreas Reinhold / reiniandClaude Opus 5
bb9473b0b2
Plan step 23, containment.md § Missing ("Carousel: the uncontained
multi-aspect-ratio layout"). `<x-carousel layout="multi-aspect">` is the
layout M3 added in November 2025: each `<x-carousel-item aspect="…">`
keeps its own ratio at the row's fixed height, held inside M3's 9:16 to
16:9 range (a square by default), with 16dp leading padding, 8dp gaps,
the extra-large corner and uncontained (default) scrolling.
The keyline machinery does not fit it: an Arrangement counts items of
one size each, and every snap position and mask follows from that size.
So the layout is a plain flex row, unmasked, and carousel.js only
measures each item's resting position off the DOM, which keeps the
previous/next buttons, the arrow keys, Home/End and bring-into-view
working. The header and SKILL.md say so.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
106 lines
5.7 KiB
PHP
106 lines
5.7 KiB
PHP
@php
|
|
$examples = [
|
|
'Multi-browse' => <<<'BLADE'
|
|
<x-carousel label="Shapes" item-width="220">
|
|
@foreach ([
|
|
['Cookie', 'cookie-9', 'bg-primary-container text-on-primary-container'],
|
|
['Clover', 'clover-4', 'bg-tertiary-container text-on-tertiary-container'],
|
|
['Burst', 'soft-burst', 'bg-secondary-container text-on-secondary-container'],
|
|
['Flower', 'flower', 'bg-primary text-on-primary'],
|
|
['Gem', 'gem', 'bg-surface-container-highest text-primary'],
|
|
['Puffy', 'puffy', 'bg-tertiary text-on-tertiary'],
|
|
['Sunny', 'sunny', 'bg-secondary text-on-secondary'],
|
|
['Heart', 'heart', 'bg-inverse-surface text-inverse-primary'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-36" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Hero, centred' => <<<'BLADE'
|
|
<x-carousel layout="hero" centered label="Featured" height="280">
|
|
@foreach ([
|
|
['Arch', 'arch', 'bg-secondary-container text-on-secondary-container'],
|
|
['Pentagon', 'pentagon', 'bg-primary-container text-on-primary-container'],
|
|
['Boom', 'soft-boom', 'bg-tertiary-container text-on-tertiary-container'],
|
|
['Bun', 'bun', 'bg-surface-container-highest text-secondary'],
|
|
['Ghost', 'ghostish', 'bg-primary text-on-primary'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-48" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Uncontained' => <<<'BLADE'
|
|
<x-carousel layout="uncontained" label="Albums" item-width="180" height="180">
|
|
@foreach ([
|
|
['cookie-6', 'bg-tertiary-container text-on-tertiary-container'],
|
|
['diamond', 'bg-primary-container text-on-primary-container'],
|
|
['clover-8', 'bg-secondary-container text-on-secondary-container'],
|
|
['pixel-circle', 'bg-surface-container-highest text-tertiary'],
|
|
['burst', 'bg-secondary text-on-secondary'],
|
|
['oval', 'bg-primary text-on-primary'],
|
|
] as [$shape, $colours])
|
|
<x-carousel-item>
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-24" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Uncontained, multi-aspect ratio: every item keeps its own shape' => <<<'BLADE'
|
|
<x-carousel layout="multi-aspect" label="Clips" height="200">
|
|
@foreach ([
|
|
['16/9', 'pill', 'bg-primary-container text-on-primary-container'],
|
|
['1/1', 'cookie-12', 'bg-tertiary-container text-on-tertiary-container'],
|
|
['9/16', 'arch', 'bg-secondary-container text-on-secondary-container'],
|
|
['4/3', 'slanted', 'bg-surface-container-highest text-primary'],
|
|
['3/4', 'bun', 'bg-primary text-on-primary'],
|
|
['16/9', 'very-sunny', 'bg-secondary text-on-secondary'],
|
|
] as [$aspect, $shape, $colours])
|
|
<x-carousel-item :aspect="$aspect" :label="$aspect">
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-20" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Full-screen: one item at a time, scrolled down' => <<<'BLADE'
|
|
<x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true">
|
|
@foreach ([
|
|
['Morning', 'very-sunny', 'bg-linear-to-br from-primary-container to-tertiary-container text-on-primary-container'],
|
|
['Noon', 'clam-shell', 'bg-linear-to-br from-secondary-container to-primary-container text-on-secondary-container'],
|
|
['Night', 'puffy-diamond', 'bg-linear-to-br from-inverse-surface to-primary text-inverse-primary'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-40" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="carousel" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Carousel</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-carousel></code> and <code><x-carousel-item></code>: items that change size between M3's keylines as they scroll.
|
|
Swipe, scroll with Shift and the wheel, or tab to an item and use the arrow keys.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code stack />
|
|
@endforeach
|
|
</section>
|