<div style="display: flex; justify-content: space-between; align-items: flex-start; padding: 2rem">

    <div>
        <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: #888">End aligned (default)</p>
        <div class="popoverMenu">
            <button type="button" class="popoverMenu__trigger button -circle -small -ghost" popovertarget="demo-popover-1" aria-controls="demo-popover-1" aria-haspopup="menu" aria-label="Open menu" style="anchor-name: --demo-popover-1">
                <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="popoverMenu__panel -endAligned" popover="auto">
                <div class="popoverMenu__list" role="menu">
                    <div class="popoverMenu__item">
                        <button type="button" class="popoverMenu__action" role="menuitem">Edit</button>
                    </div>
                    <div class="popoverMenu__item">
                        <button type="button" disabled class="popoverMenu__action" role="menuitem">Duplicate</button>
                    </div>
                    <div class="popoverMenu__item">
                        <a href="#" class="popoverMenu__action" role="menuitem">View details</a>
                    </div>
                    <div class="popoverMenu__item">
                        <button type="button" class="popoverMenu__action danger" role="menuitem">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: #888">Start aligned</p>
        <div class="popoverMenu">
            <button type="button" class="popoverMenu__trigger button -circle -small -ghost" popovertarget="demo-popover-2" aria-controls="demo-popover-2" aria-haspopup="menu" aria-label="Open menu" style="anchor-name: --demo-popover-2">
                <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="popoverMenu__panel -startAligned" popover="auto">
                <div class="popoverMenu__list" role="menu">
                    <div class="popoverMenu__item">
                        <button type="button" class="popoverMenu__action" role="menuitem">Edit</button>
                    </div>
                    <div class="popoverMenu__item">
                        <button type="button" class="popoverMenu__action" role="menuitem">Duplicate</button>
                    </div>
                    <div class="popoverMenu__item -disabled">
                        <button type="button" class="popoverMenu__action" role="menuitem" disabled>Archive (disabled)</button>
                    </div>
                    <div class="popoverMenu__item">
                        <button type="button" class="popoverMenu__action danger" role="menuitem">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@use "@/core" as *;

/**
 * Compact action menu built on the native popover API.
 * Trigger is a vertical ellipsis; consumers render menu items inside the panel/list markup.
 */
.popoverMenu {
    $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-menu-trigger) {
            left: anchor(left);
            position: absolute;
            top: calc(anchor(bottom) + 0.5rem);
            position-try-fallbacks:
                flip-inline,
                flip-block,
                flip-inline flip-block;

            &.-endAligned {
                left: auto;
                right: anchor(right);
            }

            &.-startAligned {
                left: anchor(left);
                right: auto;
            }
        }
    }

    &__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);
            outline: none;
        }

        &[aria-disabled="true"],
        &[disabled],
        &.-disabled {
            color: var(--root-background-color-inactive);
            cursor: initial;
            pointer-events: none;
        }
    }
}