Spotlight testimonial carousel

<section
  class="cmp-testimonial-spotlight"
  tabindex="0"
  role="region"
  aria-roledescription="carousel"
  aria-label="Customer stories"
>
  <div class="cmp-testimonial-spotlight__beam" aria-hidden="true"></div>
  <header><span>Story 01</span><b>Page Kit people</b></header>
  <blockquote>
    <span aria-hidden="true">“</span>
    <p>
      The tiny interactions made our product feel considered before we wrote a single animation from
      scratch.
    </p>
    <footer><strong>Leila Morgan</strong><small>Product lead · Northstar</small></footer>
  </blockquote>
  <div class="cmp-testimonial-spotlight__controls">
    <button type="button" data-prev aria-label="Previous testimonial">←</button>
    <div role="group" aria-label="Choose testimonial">
      <button type="button" data-slide="0" aria-label="Testimonial 1" aria-pressed="true"></button
      ><button type="button" data-slide="1" aria-label="Testimonial 2" aria-pressed="false"></button
      ><button
        type="button"
        data-slide="2"
        aria-label="Testimonial 3"
        aria-pressed="false"
      ></button>
    </div>
    <button type="button" data-next aria-label="Next testimonial">→</button>
  </div>
  <span class="cmp-testimonial-spotlight__status" aria-live="polite">Testimonial 1 of 3</span>
</section>