Popover API

<div class="v"><header>POPOVER <span id="popstate">open</span></header><div class="stage popstage"><button id="trigger" popovertarget="menu">Open menu</button><div id="menu" popover><div>Quick actions</div><div class="item">Edit item</div><div class="item">Share link</div></div></div><div class="muted">button → top layer → light dismiss</div></div>

.v{width:min(94vw,760px);height:min(88vh,320px);padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 clamp(12px,2.4vmin,16px)/1.3 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden}.v header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--accent);font-weight:700}.v header span{color:var(--muted);font-weight:500}.v .stage{flex:1;min-height:0;position:relative}.v .muted{color:var(--muted)}.v .active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:var(--accent)!important;color:var(--fg)}.v button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 8px;cursor:pointer}.popstage{display:grid;place-items:center}.popstage button{border-color:var(--accent);position:absolute;top:0;left:50%;transform:translateX(-50%)}#menu{position:fixed;inset:auto auto 18% 50%;transform:translateX(-50%);margin:0;min-width:130px;padding:8px;border:1px solid var(--accent);border-radius:8px;background:var(--surface);color:var(--fg);box-shadow:0 12px 26px #0003;font:inherit}#menu .item{margin-top:5px;padding:4px 6px;background:var(--bg);border-radius:4px}

const menu=document.getElementById("menu"),label=document.getElementById("popstate");function tick(){if(menu.matches(":popover-open")){menu.hidePopover();label.textContent="closed"}else{menu.showPopover();label.textContent="open"}}tick();let timer=setInterval(tick,2800);document.getElementById("trigger").addEventListener("pointerdown",()=>clearInterval(timer))