Segmented Toggle

<!-- Segmented Toggle — sliding indicator follows the active segment -->
<div class="nuda-segmented" data-active="0">
  <span class="nuda-segmented__indicator"></span>
  <button class="nuda-segmented__btn" data-i="0" aria-pressed="true">Day</button>
  <button class="nuda-segmented__btn" data-i="1" aria-pressed="false">Week</button>
  <button class="nuda-segmented__btn" data-i="2" aria-pressed="false">Month</button>
</div>

/* ── Segmented Toggle ────────────────────────────────────────
   3 equal segments; indicator slides via translateX by 100% per slot.
   Customize: --nuda-seg-active for the indicator color.
   ──────────────────────────────────────────────────────────── */
.nuda-segmented {
  --nuda-seg-active: #e4ff54;
  position: relative;
  display: inline-flex;
  padding: 4px;
  background: #16161c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.nuda-segmented__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  height: calc(100% - 8px);
  border-radius: 8px;
  background: var(--nuda-seg-active);
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.nuda-segmented[data-active="1"] .nuda-segmented__indicator { transform: translateX(100%); }
.nuda-segmented[data-active="2"] .nuda-segmented__indicator { transform: translateX(200%); }

.nuda-segmented__btn {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 64px;
  padding: 8px 0;
  background: none;
  border: 0;
  color: #a0a0a8;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s ease;
}

.nuda-segmented__btn[aria-pressed="true"] { color: #09090b; }

.nuda-segmented__btn:focus-visible {
  outline: 2px solid var(--nuda-seg-active);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-segmented__indicator,
  .nuda-segmented__btn { transition: none; }
}

/* ── Segmented Toggle — vanilla JS ───────────────────────────
   Sets data-active on the container and aria-pressed per button.
   ──────────────────────────────────────────────────────────── */
(function () {
  document.querySelectorAll(".nuda-segmented").forEach(function (root) {
    var btns = root.querySelectorAll(".nuda-segmented__btn");
    btns.forEach(function (btn, idx) {
      btn.addEventListener("click", function () {
        root.setAttribute("data-active", String(idx));
        btns.forEach(function (b, i) {
          b.setAttribute("aria-pressed", String(i === idx));
        });
      });
    });
  });
})();