<div style="display: grid; grid: auto / auto auto; place-content: space-between; height: calc(100vh - 4rem);">
<div>
<div class="popoverActions">
<button type="button" class="popoverActions__trigger button -circle -small -ghost" popovertarget="demo-popover-1" aria-label="Open menu">
<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" aria-hidden="true">
<path d="M64 144a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0 224c30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.1-56-56 25.1-56 56-56zm56-112c0 30.9-25.1 56-56 56s-56-25.1-56-56 25.1-56 56-56 56 25.1 56 56z" />
</svg>
</button>
<div id="demo-popover-1" class="popoverActions__panel" popover="auto">
<ul class="popoverActions__list">
<li class="popoverActions__item">
<button type="button" class="popoverActions__action">Edit</button>
</li>
<li class="popoverActions__item">
<button type="button" disabled class="popoverActions__action">Duplicate</button>
</li>
<li class="popoverActions__item">
<a href="#" class="popoverActions__action">View details</a>
</li>
<li class="popoverActions__item">
<button type="button" class="popoverActions__action danger">Delete</button>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="popoverActions">
<button type="button" class="popoverActions__trigger button -circle -small -ghost" popovertarget="demo-popover-2" aria-label="Open menu">
<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" aria-hidden="true">
<path d="M64 144a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0 224c30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.1-56-56 25.1-56 56-56zm56-112c0 30.9-25.1 56-56 56s-56-25.1-56-56 25.1-56 56-56 56 25.1 56 56z" />
</svg>
</button>
<div id="demo-popover-2" class="popoverActions__panel" popover="auto">
<ul class="popoverActions__list">
<li class="popoverActions__item">
<button type="button" class="popoverActions__action">Edit</button>
</li>
<li class="popoverActions__item">
<button type="button" class="popoverActions__action">Duplicate</button>
</li>
<li class="popoverActions__item">
<button type="button" class="popoverActions__action" disabled>Archive (disabled)</button>
</li>
<li class="popoverActions__item">
<button type="button" class="popoverActions__action danger">Delete</button>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="popoverActions">
<button type="button" class="popoverActions__trigger button -circle -small -ghost" popovertarget="demo-popover-3" aria-label="Open menu">
<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" aria-hidden="true">
<path d="M64 144a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0 224c30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.1-56-56 25.1-56 56-56zm56-112c0 30.9-25.1 56-56 56s-56-25.1-56-56 25.1-56 56-56 56 25.1 56 56z" />
</svg>
</button>
<div id="demo-popover-3" class="popoverActions__panel" popover="auto">
<ul class="popoverActions__list">
<li class="popoverActions__item">
<button type="button" class="popoverActions__action">Edit</button>
</li>
<li class="popoverActions__item">
<button type="button" disabled class="popoverActions__action">Duplicate</button>
</li>
<li class="popoverActions__item">
<a href="#" class="popoverActions__action">View details</a>
</li>
<li class="popoverActions__item">
<button type="button" class="popoverActions__action danger">Delete</button>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="popoverActions">
<button type="button" class="popoverActions__trigger button -circle -small -ghost" popovertarget="demo-popover-4" aria-label="Open menu">
<svg class="button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512" aria-hidden="true">
<path d="M64 144a56 56 0 1 1 0-112 56 56 0 1 1 0 112zm0 224c30.9 0 56 25.1 56 56s-25.1 56-56 56-56-25.1-56-56 25.1-56 56-56zm56-112c0 30.9-25.1 56-56 56s-56-25.1-56-56 25.1-56 56-56 56 25.1 56 56z" />
</svg>
</button>
<div id="demo-popover-4" class="popoverActions__panel" popover="auto">
<ul class="popoverActions__list">
<li class="popoverActions__item">
<button type="button" class="popoverActions__action">Edit</button>
</li>
<li class="popoverActions__item">
<button type="button" class="popoverActions__action">Duplicate</button>
</li>
<li class="popoverActions__item">
<button type="button" class="popoverActions__action" disabled>Archive (disabled)</button>
</li>
<li class="popoverActions__item">
<button type="button" class="popoverActions__action danger">Delete</button>
</li>
</ul>
</div>
</div>
</div>
</div>
@use "@/core" as *;
/**
* Compact action list built on the native popover API (disclosure pattern).
* Items keep native button/link semantics — no menu roles or keyboard model.
* Trigger is a vertical ellipsis; consumers render items inside the panel/list markup.
*/
.popoverActions {
$b: &;
&__panel {
background: var(--root-background-color);
border-radius: 0.75rem;
border: 1px solid var(--root-border-color);
box-shadow: var(--root-box-shadow-med);
color: var(--root-color-headings);
margin: 0;
padding: 0.25rem;
&:popover-open {
display: block;
opacity: 1;
transition: opacity var(--root-ease-out-moderate),
display var(--root-ease-out-moderate) allow-discrete;
}
@starting-style {
&:popover-open {
opacity: 0;
}
}
@supports (position-anchor: --popover-actions-trigger) {
left: anchor(left);
position: absolute;
top: calc(anchor(bottom) + 0.5rem);
right: auto;
bottom: auto;
position-try-fallbacks:
flip-inline,
flip-block,
flip-inline flip-block;
}
}
&__list {
display: grid;
gap: 0.125rem;
list-style: none;
margin: 0;
min-width: 10rem;
padding: 0;
}
&__action {
--accent-color: var(--root-color);
background: transparent;
border-radius: 0.5rem;
border: 0;
color: var(--accent-color);
cursor: pointer;
display: block;
font-size: 0.875rem;
font-weight: 600;
padding: .5rem .75rem;
text-align: left;
text-decoration: none;
transition: background var(--root-ease-out-fast);
width: 100%;
&:hover,
&:focus-visible {
background: var(--accent-color-50);
}
&[aria-disabled="true"],
&[disabled],
&.-disabled {
color: var(--root-background-color-inactive);
cursor: initial;
pointer-events: none;
}
}
}