Carousel

1import { Carousel, CarouselSlide } from '@/ui/Surface'23<Carousel aria-label="Product highlights" peek>4  {slides.map((s) => (5    <CarouselSlide key={s.id}>{s.content}</CarouselSlide>6  ))}7</Carousel>89// Scroll-snap does the work. The buttons are a thin layer over a scroll10// container, not a bespoke transform engine.11function go(index: number) {12  const track = trackRef.current!13  track.scrollTo({14    left: index * track.clientWidth * PEEK_RATIO,15    behavior: 'smooth',16  })17}1819// Read the position back FROM the scroll, so a swipe and a button press end20// up in the same state.21function onScroll() {22  const track = trackRef.current!23  setIndex(Math.round(track.scrollLeft / (track.clientWidth * PEEK_RATIO)))24}2526// Autoplay: stops on hover, stops on focus, and stays stopped once the user27// takes over. Anything less fails WCAG 2.2.2.28React.useEffect(() => {29  if (!playing || userInteracted) return30  const id = setInterval(next, 5000)31  return () => clearInterval(id)32}, [playing, userInteracted])3334// Off-screen frames must leave the tab order, or Tab scrolls sideways to35// something the user cannot see.36<div inert={!isVisible}>{slide.content}</div>

<section aria-roledescription="carousel" aria-label="Product highlights">
  <div class="ds-carousel__track">
    <div role="group" aria-roledescription="slide" aria-label="1 of 4">…</div>
    <!-- With peek the next frame is partly visible, so it must NOT be hidden. -->
    <div role="group" aria-roledescription="slide" aria-label="2 of 4">…</div>
    <div role="group" aria-roledescription="slide" aria-label="3 of 4" inert>…</div>
  </div>

  <!-- Always visible: hover does not exist on touch. -->
  <button type="button" aria-label="Previous slide" disabled>‹</button>
  <button type="button" aria-label="Next slide">›</button>

  <div role="tablist" aria-label="Choose a slide">
    <button type="button" role="tab" aria-selected="true"  aria-label="Slide 1 of 4"></button>
    <button type="button" role="tab" aria-selected="false" aria-label="Slide 2 of 4"></button>
  </div>

  <!-- Turn this off while autoplay is running. -->
  <p role="status" aria-live="polite">Slide 1 of 4</p>
</section>

.ds-carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* The browser supplies momentum, touch physics and reduced-motion
     handling. A transform-based carousel reimplements all of it. */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ds-carousel__track::-webkit-scrollbar { display: none; }

.ds-carousel__slide {
  flex: 0 0 auto;
  /* The peek IS the affordance. 100% and nothing says there is more. */
  inline-size: 80%;
  scroll-snap-align: start;
}

/* Over arbitrary content, so they need their own surface — not a bare
   glyph over a photograph. */
.ds-carousel__arrow {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 32px;
  block-size: 32px;
  background: var(--ds-surface-raised);
  box-shadow: var(--shadow-e2);
}

/* The dot is 8px; the TARGET is 24px. Padding, not size. */
.ds-carousel__dot {
  inline-size: 24px;
  block-size: 24px;
  display: grid;
  place-items: center;
}
.ds-carousel__dot::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  background: var(--ds-border-strong);
}
.ds-carousel__dot[aria-selected='true']::before { background: var(--ds-accent); }

@media (prefers-reduced-motion: reduce) {
  .ds-carousel__track { scroll-behavior: auto; }
}

@media (pointer: coarse) {
  .ds-carousel__arrow { inline-size: 44px; block-size: 44px; }
}