<div class="demo">
  <p class="hint">Resize the preview narrower — tabs that no longer fit collapse into "More"</p>
  <nav class="tabnav" id="tabnav">
    <div class="tabs" id="tabs" role="tablist">
      <button class="tab active" role="tab" aria-selected="true">Overview</button>
      <button class="tab" role="tab" aria-selected="false">Analytics</button>
      <button class="tab" role="tab" aria-selected="false">Reports</button>
      <button class="tab" role="tab" aria-selected="false">Team members</button>
      <button class="tab" role="tab" aria-selected="false">Integrations</button>
      <button class="tab" role="tab" aria-selected="false">Billing history</button>
      <button class="tab" role="tab" aria-selected="false">API keys</button>
      <button class="tab" role="tab" aria-selected="false">Audit log</button>
      <button class="tab" role="tab" aria-selected="false">Settings</button>
    </div>
    <div class="more-wrap">
      <button class="more-btn" id="moreBtn" aria-haspopup="true" aria-expanded="false" hidden>
        More <span class="more-count" id="moreCount"></span>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div class="more-menu" id="moreMenu" role="menu"></div>
    </div>
  </nav>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 100%; max-width: 620px; resize: horizontal; overflow: auto; min-width: 220px; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 16px; }
.hint { font-size: 11.5px; color: #94a3b8; margin-bottom: 12px; }

.tabnav { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px; position: relative; }
.tabs { display: flex; align-items: center; gap: 2px; overflow: hidden; flex: 1; min-width: 0; }
.tab { flex-shrink: 0; background: none; border: none; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: #64748b; border-radius: 8px; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background 0.15s, color 0.15s; }
.tab:hover { background: #f1f5f9; color: #334155; }
.tab.active { background: #eef2ff; color: #4338ca; }
.tab.overflow-hidden { display: none; }

.more-wrap { position: relative; flex-shrink: 0; }
.more-btn { display: flex; align-items: center; gap: 5px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 7px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; font-family: inherit; }
.more-btn:hover { background: #f1f5f9; }
.more-count { background: #6366f1; color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 6px; }

.more-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 28px rgba(15,23,42,0.12); padding: 6px; min-width: 180px; display: none; flex-direction: column; gap: 1px; z-index: 10; }
.more-menu.open { display: flex; }
.more-menu button { text-align: left; background: none; border: none; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: #334155; border-radius: 7px; cursor: pointer; font-family: inherit; }
.more-menu button:hover { background: #f1f5f9; }
.more-menu button.active { color: #4338ca; background: #eef2ff; }

const tabnav = document.getElementById('tabnav');
const tabsEl = document.getElementById('tabs');
const moreBtn = document.getElementById('moreBtn');
const moreMenu = document.getElementById('moreMenu');
const moreCount = document.getElementById('moreCount');
const allTabs = Array.from(tabsEl.querySelectorAll('.tab'));

function setActive(label) {
  allTabs.forEach((t) => {
    const isActive = t.textContent === label;
    t.classList.toggle('active', isActive);
    t.setAttribute('aria-selected', String(isActive));
  });
  moreMenu.querySelectorAll('button').forEach((b) => b.classList.toggle('active', b.textContent === label));
}

function rebuildOverflow() {
  // Reset so we can measure natural widths
  allTabs.forEach((t) => { t.classList.remove('overflow-hidden'); });
  moreBtn.hidden = true;
  moreMenu.innerHTML = '';

  const available = tabsEl.clientWidth;
  let used = 0;
  const hidden = [];

  allTabs.forEach((t) => {
    const w = t.offsetWidth + 2;
    if (used + w > available) {
      hidden.push(t);
    } else {
      used += w;
    }
  });

  if (hidden.length > 0) {
    // Reserve space for the More button itself by re-checking with a margin
    const reserve = 96;
    used = 0;
    hidden.length = 0;
    allTabs.forEach((t) => {
      const w = t.offsetWidth + 2;
      if (used + w > available - reserve) {
        hidden.push(t);
      } else {
        used += w;
      }
    });
  }

  hidden.forEach((t) => {
    t.classList.add('overflow-hidden');
    const btn = document.createElement('button');
    btn.setAttribute('role', 'menuitem');
    btn.textContent = t.textContent;
    if (t.classList.contains('active')) btn.classList.add('active');
    btn.addEventListener('click', () => {
      setActive(t.textContent);
      moreMenu.classList.remove('open');
      moreBtn.setAttribute('aria-expanded', 'false');
      rebuildOverflow();
    });
    moreMenu.appendChild(btn);
  });

  moreBtn.hidden = hidden.length === 0;
  moreCount.textContent = hidden.length || '';
}

allTabs.forEach((t) => {
  t.addEventListener('click', () => { setActive(t.textContent); });
});

moreBtn.addEventListener('click', () => {
  const open = moreMenu.classList.toggle('open');
  moreBtn.setAttribute('aria-expanded', String(open));
});

document.addEventListener('click', (e) => {
  if (!e.target.closest('.more-wrap')) {
    moreMenu.classList.remove('open');
    moreBtn.setAttribute('aria-expanded', 'false');
  }
});

new ResizeObserver(rebuildOverflow).observe(tabnav);
rebuildOverflow();