Segmented Control

<div class="nuda-segmented" role="radiogroup" aria-label="View">
  <button class="nuda-segmented__option is-active" role="radio" aria-checked="true">Daily</button>
  <button class="nuda-segmented__option" role="radio" aria-checked="false">Weekly</button>
  <button class="nuda-segmented__option" role="radio" aria-checked="false">Monthly</button>
  <div class="nuda-segmented__indicator"></div>
</div>

/* Segmented Control
   iOS-style segmented control with sliding indicator.
   Customize: --seg-accent */

.nuda-segmented {
  --seg-accent: #e4ff54;
  display: flex;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  max-width: 360px;
}

.nuda-segmented__option {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.2s;
}

.nuda-segmented__option.is-active {
  color: #0a0a0a;
  font-weight: 600;
}

.nuda-segmented__indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(33.33% - 3px);
  background: var(--seg-accent);
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-segmented__indicator { transition: none; }
}

/* Segmented Control — Slide indicator */

(function () {
  var controls = document.querySelectorAll('.nuda-segmented');
  controls.forEach(function (ctrl) {
    var options = ctrl.querySelectorAll('.nuda-segmented__option');
    var indicator = ctrl.querySelector('.nuda-segmented__indicator');
    if (!options.length || !indicator) return;

    options.forEach(function (opt, i) {
      opt.addEventListener('click', function () {
        options.forEach(function (o) {
          o.classList.remove('is-active');
          o.setAttribute('aria-checked', 'false');
        });
        opt.classList.add('is-active');
        opt.setAttribute('aria-checked', 'true');
        indicator.style.transform = 'translateX(' + (i * 100) + '%)';
      });
    });
  });
})();