Carousel

<Carousel
	aria-label="Product tour"
	mix={[is("100%"), maxIs("32rem")]}
	style={{ "--ui-carousel-slide-size": "100%", "--ui-carousel-gap": "0px" }}
>
	<Carousel.Viewport id="preview-tour" mix={[carouselControls()]}>
		<Carousel.Track>
			{SLIDES.map((slide) => (
				<Carousel.Slide key={slide.id} data-carousel-slide aria-label={slide.title}>
					<figure mix={[vstack({ gap: 2, align: "stretch" }), m(0)]}>
						<img
							src={poster(slide.hue)}
							alt={`${slide.title} screenshot`}
							mix={[is("100%"), bs("9rem"), fit("cover"), rounded("lg")]}
						/>
						<figcaption mix={[vstack({ gap: 0, align: "start" })]}>
							<span mix={[text("sm"), weight("medium")]}>{slide.title}</span>
							<span mix={[text("xs"), fg("neutral")]}>{slide.caption}</span>
						</figcaption>
					</figure>
				</Carousel.Slide>
			))}
		</Carousel.Track>
	</Carousel.Viewport>

	<Carousel.Controls mix={[justify("between")]}>
		<Carousel.Previous commandfor="preview-tour" aria-label="Previous slide" />

		<div mix={[hstack({ gap: 2, align: "center" })]}>
			{SLIDES.map((slide, index) => (
				<button
					key={slide.id}
					type="button"
					commandfor="preview-tour"
					command="--ui-goto"
					data-slide={String(index)}
					aria-label={`Go to ${slide.title}`}
					mix={[
						is("0.5rem"),
						bs("0.5rem"),
						m(0),
						rounded("full"),
						border({ width: 0 }),
						cursor("pointer"),
						// carouselControls() marks the dot naming the slide in view.
						when("&:not([aria-current])", bg("neutral.border-hover")),
						when("&[aria-current]", bg("neutral.solid")),
					]}
				/>
			))}
		</div>

		<Carousel.Next commandfor="preview-tour" aria-label="Next slide" />
	</Carousel.Controls>
</Carousel>