Carousels

<script lang="ts">
	import { Carousel, CarouselItem } from 'noph-ui'

	const photos = [
		{ title: 'Convergence', image: '/pollock.avif' },
		{ title: 'Blue Poles', image: '/pollock2.avif' },
		{ title: 'Autumn Rhythm', image: '/pollock3.avif' },
		{ title: 'Number 1A', image: '/pollock.avif' },
		{ title: 'Eyes in the Heat', image: '/pollock2.avif' },
	]

	let opened = $state<string>()
</script>

<div class="shelf">
	<Carousel label="Paintings">
		{#each photos as photo (photo.title)}
			<CarouselItem
				type="button"
				label={photo.title}
				image={photo.image}
				onclick={() => (opened = photo.title)}
			/>
		{/each}
	</Carousel>
	<p>Opened: <code>{opened ?? 'nothing yet'}</code></p>
</div>

<style>
	.shelf {
		inline-size: 36rem;
		max-inline-size: 100%;
		--np-carousel-item-height: 12rem;
	}
</style>

<script lang="ts">
	import { Carousel, CarouselItem } from 'noph-ui'

	const images = ['/pollock.avif', '/pollock2.avif', '/pollock3.avif']
	const plates = Array.from({ length: 7 }, (_, index) => index)

	const clips = [
		{ title: 'Convergence', image: '/pollock.avif', ratio: 16 / 9 },
		{ title: 'Blue Poles', image: '/pollock2.avif', ratio: 1 },
		{ title: 'Autumn Rhythm', image: '/pollock3.avif', ratio: 9 / 16 },
		{ title: 'Number 1A', image: '/pollock.avif', ratio: 4 / 3 },
		{ title: 'Eyes in the Heat', image: '/pollock2.avif', ratio: 1 },
	]
</script>

{#snippet run()}
	{#each plates as index (index)}
		<CarouselItem
			type="button"
			label={`Plate ${index + 1}`}
			image={images[index % images.length]}
		/>
	{/each}
{/snippet}

<figure class="shelf">
	<figcaption><code>multi-browse</code></figcaption>
	<Carousel label="Paintings, multi-browse">{@render run()}</Carousel>
</figure>

<figure class="shelf">
	<figcaption><code>uncontained</code></figcaption>
	<Carousel variant="uncontained" label="Paintings, uncontained">{@render run()}</Carousel>
</figure>

<figure class="shelf aspect">
	<figcaption><code>uncontained</code> with a per-item <code>aspectRatio</code></figcaption>
	<Carousel variant="uncontained" label="Clips">
		{#each clips as clip (clip.title)}
			<CarouselItem type="button" label={clip.title} image={clip.image} aspectRatio={clip.ratio} />
		{/each}
	</Carousel>
</figure>

<figure class="shelf">
	<figcaption><code>hero</code></figcaption>
	<Carousel variant="hero" label="Paintings, hero">{@render run()}</Carousel>
</figure>

<figure class="viewport">
	<figcaption><code>full-screen</code></figcaption>
	<Carousel variant="full-screen" label="Paintings, full screen">
		{#each images as image, index (image + index)}
			<CarouselItem type="button" label={`Plate ${index + 1}`} {image} />
		{/each}
	</Carousel>
</figure>

<style>
	.shelf,
	.viewport {
		inline-size: 36rem;
		max-inline-size: 100%;
		margin: 0 0 1.5rem;
		--np-carousel-item-height: 10rem;
	}

	.aspect {
		--np-carousel-item-height: 12rem;
	}

	.viewport {
		inline-size: 18rem;
		--np-carousel-length: 24rem;
	}

	figcaption {
		margin-block-end: 0.5rem;
	}
</style>

<script lang="ts">
	import { Carousel, CarouselItem } from 'noph-ui'
</script>

<div class="shelf">
	<Carousel label="Label styles">
		<CarouselItem type="button" label="A plain label" image="/pollock.avif" />
		<CarouselItem type="button" label="With an overlay" image="/pollock2.avif">
			<span class="badge">New</span>
		</CarouselItem>
		<CarouselItem type="button" aria-label="No visible label" image="/pollock3.avif" />
	</Carousel>
</div>

<style>
	.shelf {
		inline-size: 36rem;
		max-inline-size: 100%;
		--np-carousel-item-height: 10rem;
	}
	.badge {
		position: absolute;
		inset-block-start: 0.75rem;
		inset-inline-start: 0.75rem;
		padding: 0.125rem 0.5rem;
		border-radius: var(--np-shape-corner-full);
		background-color: var(--np-color-primary);
		color: var(--np-color-on-primary);
		font-size: 0.75rem;
	}
</style>

<script lang="ts">
	import { Carousel, CarouselItem } from 'noph-ui'

	let clicked = $state<string>()
</script>

<div class="shelf">
	<Carousel label="Item types">
		<CarouselItem
			type="button"
			label="Button"
			image="/pollock.avif"
			onclick={() => (clicked = 'Button')}
		/>
		<CarouselItem label="Link" image="/pollock2.avif" href="#interactive-items" />
		<CarouselItem label="Not interactive" image="/pollock3.avif" />
		<CarouselItem type="button" label="Disabled" image="/pollock.avif" disabled />
	</Carousel>
</div>

<p>Clicked: <code>{clicked ?? 'nothing yet'}</code></p>

<style>
	.shelf {
		inline-size: 36rem;
		max-inline-size: 100%;
		--np-carousel-item-height: 10rem;
	}
</style>

<script lang="ts">
	import { Button, Carousel, CarouselItem, IconButton } from 'noph-ui'
	import { ChevronRightIcon } from 'noph-ui/icons'

	const images = ['/pollock.avif', '/pollock2.avif', '/pollock3.avif']
	const plates = Array.from({ length: 6 }, (_, index) => index)
</script>

<section class="shelf">
	<div class="header">
		<h3 id="show-all-demo-heading">Recent paintings</h3>
		<IconButton aria-label="Show all recent paintings" href="#show-all">
			<ChevronRightIcon />
		</IconButton>
	</div>

	<Carousel aria-labelledby="show-all-demo-heading">
		{#each plates as index (index)}
			<CarouselItem
				type="button"
				label={`Plate ${index + 1}`}
				image={images[index % images.length]}
			/>
		{/each}
	</Carousel>

	<div class="below">
		<Button variant="text" href="#show-all">Show all</Button>
	</div>
</section>

<style>
	.shelf {
		inline-size: 36rem;
		max-inline-size: 100%;
		--np-carousel-item-height: 10rem;
	}
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-inline: 1rem;
	}
	.header h3 {
		margin: 0;
	}
	.below {
		/* The spec puts 4dp of padding around the Show all button. */
		padding: 0.25rem;
	}
</style>

<script lang="ts">
	import { Carousel, CarouselItem } from 'noph-ui'

	const images = ['/pollock.avif', '/pollock2.avif', '/pollock3.avif', '/pollock.avif']
</script>

<div class="shelf">
	<Carousel label="Themed paintings" --np-carousel-padding="1.5rem">
		{#each images as image, index (image + index)}
			<CarouselItem
				type="button"
				label={`Plate ${index + 1}`}
				{image}
				--np-carousel-item-container-shape="var(--np-shape-corner-medium)"
				--np-carousel-item-outline-width="1px"
				--np-carousel-item-outline-color="var(--np-color-outline-variant)"
				--np-carousel-item-label-scrim-color="color-mix(in srgb, var(--np-color-primary) 70%, transparent)"
			/>
		{/each}
	</Carousel>
</div>

<style>
	.shelf {
		inline-size: 36rem;
		max-inline-size: 100%;
		--np-carousel-item-height: 10rem;
	}
</style>

<script lang="ts">
	import { Carousel, CarouselItem } from 'noph-ui'

	const plates = ['Konvergenz', 'Blaue Pfähle', 'Herbstrhythmus']
	let name = $state<string>()
</script>

<div class="shelf">
	<Carousel
		label="Gemälde"
		itemLabel={(text, position, total) => `${text}, Bild ${position} von ${total}`}
	>
		{#each plates as plate, index (plate)}
			<CarouselItem
				type="button"
				label={plate}
				image={`/pollock${index === 0 ? '' : index + 1}.avif`}
				onfocus={(event) => (name = event.currentTarget.getAttribute('aria-label') ?? undefined)}
			/>
		{/each}
	</Carousel>
</div>

<p>Focused name: <code>{name ?? 'nothing focused'}</code></p>

<style>
	.shelf {
		inline-size: 36rem;
		max-inline-size: 100%;
		--np-carousel-item-height: 10rem;
	}
</style>