Popover

Preview

<esa-popover position="bottom">
  <button>Open popover</button>
  <div slot="content">Popover below the trigger.</div>
</esa-popover>

Positions

<esa-popover position="top">…</esa-popover>
<esa-popover position="bottom">…</esa-popover>
<esa-popover position="left">…</esa-popover>
<esa-popover position="right">…</esa-popover>

Appearance

Two appearances, aligned to Beacon's PopoverAppearance. default is a light surface panel; inverse is a dark panel with light text — use it to signal documentation or help content rather than form data.

<esa-popover appearance="default">…</esa-popover>
<esa-popover appearance="inverse">…</esa-popover>

Trigger & arrow

Switch to trigger="hover" for a hover-revealed panel, or hide the pointer with has-arrow={false}.

<esa-popover position="bottom" trigger="hover">…</esa-popover>
<esa-popover position="bottom" has-arrow={false}>…</esa-popover>

API

Accessibility

• The floating panel is role="dialog".
• Click mode closes on Escape and on any click outside the component.
• Keyboard and focus behavior come from whatever element you slot as the trigger — use a real <button>.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.