A panel anchored to a button, with an arrow: the trigger opens and closes it, Esc and a press outside (pointerdown, so touch works) close it, focus goes into it when it opens and back to the trigger when it closes. It is not modal and does not trap the focus: Tab past its last control closes it and the focus goes on to what follows the trigger, and Shift+Tab before its first control closes it and returns to the trigger.

placement is :bottom, :top, :right or :left; the hook flips it to the opposite side when there is no room on the screen. The panel is 6 px from the trigger. align is :start or :end: the edge of the trigger the panel lines up with (its left or right edge for the vertical placements, its top or bottom for the horizontal ones). When the panel would cross the edge of the screen the hook shifts it, and the arrow stays on the trigger.

By default the panel sits inside the same box as the trigger, so a scrolling ancestor clips it. With portal the hook moves the panel to the end of document.body while it is open and draws it with position: fixed from the rectangle of the trigger, repositioned on scroll and resize, over a modal (z-80). Events with phx-click inside a portal panel reach the main LiveView, not a nested one; the panel is put back in place before each update of the page, so what it shows stays current.

The width is w-80 unless panel_class has a width of its own. The aria-haspopup, aria-controls and aria-expanded of the trigger are put by the hook, so a page rendered with no JavaScript does not have them. The panel does not animate. Its shadow is the shadow-pop token, which has a version for the dark theme.