Glass Tabs

<div class="nuda-glass-tabs" role="tablist" aria-label="View range" style="--nuda-glass-tabs-i:0">
  <span class="nuda-glass-tabs__indicator" aria-hidden="true"></span>
  <button class="nuda-glass-tabs__tab nuda-glass-tabs__tab--active" role="tab" aria-selected="true">Day</button>
  <button class="nuda-glass-tabs__tab" role="tab" aria-selected="false">Week</button>
  <button class="nuda-glass-tabs__tab" role="tab" aria-selected="false">Month</button>
</div>

/* Glass Tabs
   Pill tabs with a sliding frosted-lime indicator.
   Drive position by setting --nuda-glass-tabs-i to the active index (0,1,2).
   Customize: --glass-tabs-accent */

.nuda-glass-tabs {
  --glass-tabs-accent: #e4ff54;
  --nuda-glass-tabs-i: 0;
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nuda-glass-tabs__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  height: calc(100% - 8px);
  border-radius: 9px;
  background: rgba(228, 255, 84, 0.18);
  border: 1px solid rgba(228, 255, 84, 0.4);
  box-shadow: 0 0 14px rgba(228, 255, 84, 0.3);
  transform: translateX(calc(var(--nuda-glass-tabs-i) * 100%));
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
}

.nuda-glass-tabs__tab {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 7px 14px;
  border: none;
  background: none;
  color: rgba(250, 250, 250, 0.55);
  font: 600 0.74rem ui-sans-serif, system-ui;
  cursor: pointer;
  border-radius: 9px;
  transition: color 0.25s ease;
  outline: none;
}

.nuda-glass-tabs__tab:focus-visible {
  box-shadow: 0 0 0 2px rgba(228, 255, 84, 0.6);
}

.nuda-glass-tabs__tab--active {
  color: #fafafa;
}

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

/* Glass Tabs — vanilla JS
   Moves the indicator and updates aria-selected on click. */

(function () {
  document.querySelectorAll(".nuda-glass-tabs").forEach(function (group) {
    var tabs = group.querySelectorAll(".nuda-glass-tabs__tab");
    tabs.forEach(function (tab, i) {
      tab.addEventListener("click", function () {
        group.style.setProperty("--nuda-glass-tabs-i", String(i));
        tabs.forEach(function (t, j) {
          t.classList.toggle("nuda-glass-tabs__tab--active", j === i);
          t.setAttribute("aria-selected", String(j === i));
        });
      });
    });
  });
})();