Progress Dots Carousel

<!-- A basic slide carousel with a determinate progress bar: the fill width is
     (index+1)/total, so the bar doubles as "how far through you are". The dots
     remain the real controls; the bar is aria-hidden decoration. -->
<section class="max-w-2xl" aria-roledescription="carousel" aria-label="Product highlights" data-pd>
  <div class="relative overflow-hidden rounded-xl" aria-live="polite">
    <div class="flex transition-transform duration-500 ease-out motion-reduce:transition-none" data-pd-track>
      <div class="shrink-0 basis-full bg-gradient-to-br from-blue-600 to-indigo-600 px-8 py-12 text-white" role="group" aria-roledescription="slide" aria-label="1 of 3"><h3 class="mb-2 text-xl font-semibold">Analytics</h3><p class="text-sm leading-relaxed text-white/90">Every metric that matters, updated the moment it changes.</p></div>
      <div class="shrink-0 basis-full bg-gradient-to-br from-indigo-600 to-violet-600 px-8 py-12 text-white" role="group" aria-roledescription="slide" aria-label="2 of 3" aria-hidden="true"><h3 class="mb-2 text-xl font-semibold">Automations</h3><p class="text-sm leading-relaxed text-white/90">Turn a repeated click into a rule that runs itself.</p></div>
      <div class="shrink-0 basis-full bg-gradient-to-br from-teal-700 to-sky-700 px-8 py-12 text-white" role="group" aria-roledescription="slide" aria-label="3 of 3" aria-hidden="true"><h3 class="mb-2 text-xl font-semibold">Integrations</h3><p class="text-sm leading-relaxed text-white/90">Forty connectors, and a webhook for everything else.</p></div>
    </div>
  </div>
  <div class="mt-4 flex items-center gap-4">
    <div class="h-1 flex-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800" aria-hidden="true">
      <div class="h-full rounded-full bg-blue-600 transition-[width] duration-500 motion-reduce:transition-none dark:bg-blue-400" style="width: 33.333%;" data-pd-bar></div>
    </div>
    <div class="flex gap-2" data-pd-dots>
      <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 aria-[current=true]:w-5 aria-[current=true]:bg-blue-600 dark:hover:bg-gray-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950 dark:aria-[current=true]:bg-blue-400" type="button" aria-label="Go to slide 1" aria-current="true"></button>
      <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 aria-[current=true]:w-5 aria-[current=true]:bg-blue-600 dark:hover:bg-gray-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950 dark:aria-[current=true]:bg-blue-400" type="button" aria-label="Go to slide 2"></button>
      <button class="h-2 w-2 rounded-full bg-gray-500 hover:bg-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 aria-[current=true]:w-5 aria-[current=true]:bg-blue-600 dark:hover:bg-gray-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950 dark:aria-[current=true]:bg-blue-400" type="button" aria-label="Go to slide 3"></button>
    </div>
  </div>
</section>

<script>
  (function () {
    document.querySelectorAll('[data-pd]').forEach(function (root) {
      var track = root.querySelector('[data-pd-track]');
      var bar = root.querySelector('[data-pd-bar]');
      var slides = Array.prototype.slice.call(track.children);
      var dots = Array.prototype.slice.call(root.querySelectorAll('[data-pd-dots] button'));
      var index = 0;
      function go(next) {
        index = (next + slides.length) % slides.length;
        track.style.transform = 'translateX(' + index * -100 + '%)';
        bar.style.width = ((index + 1) / slides.length) * 100 + '%';
        slides.forEach(function (s, i) { if (i === index) s.removeAttribute('aria-hidden'); else s.setAttribute('aria-hidden', 'true'); });
        dots.forEach(function (d, i) { if (i === index) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current'); });
      }
      dots.forEach(function (d, i) { d.addEventListener('click', function () { go(i); }); });
    });
  })();
</script>