タブ Tabs

.demo-tabs2-header {
  display: flex; position: relative; gap: 0;
  border-bottom: 2px solid #e5e7eb;
}
.demo-tabs2-tab {
  padding: 10px 20px; border: none; background: transparent;
  cursor: pointer; font-size: 14px; font-weight: 600;
  color: #999; transition: color 0.2s; position: relative; z-index: 1;
}
.demo-tabs2-tab:hover { color: #555; }
.demo-tabs2-tab.active { color: var(--ui-primary); }
.demo-tabs2-indicator {
  position: absolute; bottom: -2px; height: 2px;
  background: var(--ui-primary); border-radius: 1px;
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.demo-tabs2-panel {
  display: none; padding: 20px 4px; animation: demoTabFade 0.3s ease;
}
.demo-tabs2-panel.active { display: block; }
@keyframes demoTabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

(function() {
  const header = document.querySelector('.demo-tabs2-header');
  const tabs = header.querySelectorAll('.demo-tabs2-tab');
  const indicator = header.querySelector('.demo-tabs2-indicator');
  const panels = document.querySelectorAll('.demo-tabs2-panel');
  function moveIndicator(tab) {
    indicator.style.left = tab.offsetLeft + 'px';
    indicator.style.width = tab.offsetWidth + 'px';
  }
  moveIndicator(header.querySelector('.demo-tabs2-tab.active'));
  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      tabs.forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected', 'false'); });
      panels.forEach(p => { p.classList.remove('active'); p.hidden = true; });
      this.classList.add('active');
      this.setAttribute('aria-selected', 'true');
      const panel = document.getElementById(this.getAttribute('aria-controls'));
      panel.classList.add('active');
      panel.hidden = false;
      moveIndicator(this);
    });
  });
  header.addEventListener('keydown', e => {
    const idx = Array.from(tabs).indexOf(document.activeElement);
    if (idx < 0) return;
    if (e.key === 'ArrowRight') { e.preventDefault(); tabs[(idx + 1) % tabs.length].focus(); tabs[(idx + 1) % tabs.length].click(); }
    if (e.key === 'ArrowLeft') { e.preventDefault(); tabs[(idx - 1 + tabs.length) % tabs.length].focus(); tabs[(idx - 1 + tabs.length) % tabs.length].click(); }
  });
})();