The clipped dropdown — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 The clipped dropdown</h1>
    <p class="pg-sub">
      Same trigger, same card with <code>overflow: hidden</code>. Open the hand-built
      popup and watch the card slice it off. Then open the "native, top-layer" version
      and watch it escape clean — that's what <code>::picker(select)</code> buys you.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a dropdown to open</div>
      <div class="seg" id="mode" role="tablist" aria-label="Dropdown implementation">
        <button class="btn sm" data-mode="fake" aria-pressed="true">Hand-built &lt;div&gt; popup</button>
        <button class="btn sm" data-mode="native" aria-pressed="false">Native, top-layer popup</button>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>

<div class="card" id="card">
        <span class="card-label">card · overflow: hidden</span>
        <button class="trigger" id="trigger">
          <span class="flag" id="triggerFlag">🇨🇦</span>
          <span id="triggerText">Canada</span>
          <span aria-hidden="true">▾</span>
        </button>

<div class="fake-popup" id="fakePopup" role="listbox" aria-label="Country (hand-built)">
          <div class="fake-opt" data-flag="🇨🇦" data-name="Canada">🇨🇦 Canada</div>
          <div class="fake-opt" data-flag="🇯🇵" data-name="Japan">🇯🇵 Japan</div>
          <div class="fake-opt" data-flag="🇧🇷" data-name="Brazil">🇧🇷 Brazil</div>
        </div>
      </div>

<div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — open the hand-built popup first.</span>
      </div>
      <p class="hint" id="hint">
        Caption: the hand-built popup is a normal child &lt;div&gt; of the card, so
        <code>overflow: hidden</code> clips it exactly like it clips an overflowing image.
      </p>
    </div>
  </div>

<div class="escaped-popup" id="escapedPopup" role="listbox" aria-label="Country (native)">
    <div class="fake-opt" data-flag="🇨🇦" data-name="Canada">🇨🇦 Canada</div>
    <div class="fake-opt" data-flag="🇯🇵" data-name="Japan">🇯🇵 Japan</div>
    <div class="fake-opt" data-flag="🇧🇷" data-name="Brazil">🇧🇷 Brazil</div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.