Andreas Reinhold / reiniandClaude Opus 5
9875ba156e
Plan step 19, containment.md C-18. The row was the focusable `region` and the items were not focusable at all, which is the thing M3's accessibility page draws a Don't for: "use Tab to place initial focus on the first carousel item", "avoid focusing on the carousel container". Each item is now `tabindex="0"` with the focus ring drawn inside it, the row is out of the tab order, and from a focused item the arrows move one item (moving focus with them), Home and End go to the ends, and Space or Enter opens one that is not fully in view. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
88 lines
4.6 KiB
PHP
88 lines
4.6 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,
|
|
'Full-screen' => <<<'BLADE'
|
|
<x-carousel layout="full-screen" label="Wallpapers" height="240" :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>
|