Pronto, a frontend framework built by Imarc

<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>

index.scss

@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) {
      inset: calc(anchor(bottom) + 0.5rem) auto auto anchor(left);
      position: absolute;
      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: 0.5rem 0.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;
    }
  }
}