Popover
Anchored floating panel. The trigger goes in the default slot and the panel content in slot="content". Click mode closes on outside-click and Esc; hover mode opens after a short delay.
Preview
Popover below the trigger.
<esa-popover position="bottom">
<button>Open popover</button>
<div slot="content">Popover below the trigger.</div>
</esa-popover>import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-popover';
@Component({
selector: 'app-popover-demo',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<esa-popover position="bottom">
<button>Open popover</button>
<div slot="content">Popover below the trigger.</div>
</esa-popover>
`,
})
export class PopoverDemo {}Positions
Popover above the trigger.
Popover below the trigger.
Left side.
Right side.
<esa-popover position="top">…</esa-popover>
<esa-popover position="bottom">…</esa-popover>
<esa-popover position="left">…</esa-popover>
<esa-popover position="right">…</esa-popover>import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-popover';
@Component({
selector: 'app-popover-demo',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<esa-popover position="top">…</esa-popover>
<esa-popover position="bottom">…</esa-popover>
<esa-popover position="left">…</esa-popover>
<esa-popover position="right">…</esa-popover>
`,
})
export class PopoverDemo {}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.
Light surface panel.
Dark panel, light text — for help content.
<esa-popover appearance="default">…</esa-popover>
<esa-popover appearance="inverse">…</esa-popover>import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-popover';
@Component({
selector: 'app-popover-demo',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<esa-popover appearance="default">…</esa-popover>
<esa-popover appearance="inverse">…</esa-popover>
`,
})
export class PopoverDemo {}Trigger & arrow
Switch to trigger="hover" for a hover-revealed panel, or hide the pointer with has-arrow={false}.
Opens on hover after 200ms.
Arrowless popover.
<esa-popover position="bottom" trigger="hover">…</esa-popover>
<esa-popover position="bottom" has-arrow={false}>…</esa-popover>import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-popover';
@Component({
selector: 'app-popover-demo',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<esa-popover position="bottom" trigger="hover">…</esa-popover>
<esa-popover position="bottom" has-arrow="{false}">…</esa-popover>
`,
})
export class PopoverDemo {}API
| Prop | Type | Default | Description |
|---|---|---|---|
position | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Side the panel opens on, relative to the trigger. |
trigger | 'click' | 'hover' | 'click' | Click toggles and closes on outside-click + Esc; hover opens after a 200ms delay. |
has-arrow | boolean | true | Renders the pointer arrow toward the trigger. Property: `hasArrow`. On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value. |
offset | number | 8 | Gap in pixels between trigger and panel. |
open | boolean | false | Reflected open state. |
appearance | 'default' | 'inverse' | 'default' | Panel style (aligned to Beacon): default is a light surface; inverse is a dark panel with light text, for documentation/help content. Reflected as an attribute. |
label | string | '' | Accessible name for the panel. When set, the panel is exposed as a dialog; when omitted it carries no role. It used to be an unconditional role="dialog" with no name, which is worse than no role — a screen reader announces "dialog" and has nothing to say about it, and the role promises focus management a non-modal popover does not implement. |
Accessibility
- The floating panel is
role="dialog". - Click mode closes on
Escapeand 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,
split by blast radius: the hooks that belong to this component,
then the shared and system tokens it consumes alongside everything else. 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.
Type roles it names
This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.
| Role | Re-point | Reach |
|---|---|---|
.typography-body-md |
| +28 more componentsesa-app-shell, esa-breadcrumbs, esa-card, esa-checkbox, esa-checkbox-group, esa-collapsible, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-container, esa-danger-zone, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-form-field, esa-header-nav, esa-input-tag, esa-nav-dropdown, esa-page-header, esa-progress-bar, esa-radio-group, esa-select, esa-side-dialog, esa-snackbar-item, esa-switch-toggle, esa-tab-layout, esa-textarea |
.typography-label-md |
| +33 more componentsesa-app-bar, esa-breadcrumbs, esa-button-group, esa-button-toggle, esa-card, esa-checkbox-group, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-empty-state, esa-entity-search, esa-file-upload, esa-filter-container, esa-form-field, esa-header-nav, esa-input-tag, esa-link-column, esa-page-header, esa-pillbox, esa-progress-bar, esa-radio-group, esa-range-slider, esa-select, esa-side-dialog, esa-sidebar-nav, esa-stat, esa-text-field, esa-textarea, esa-tooltip |
Wired to this component
No other component reads these — re-point them and esa-popover is the
only thing that moves.
| Token | Tier | Resolves to |
|---|---|---|
--popover-max-width | component | none |
Shared tokens it reads
Owned by a family or by the semantic layer. Still overridable — but scope the
override (esa-foo { --form-border-color: … }) unless you mean to move
everything that reads it. Reach says what else that is.
| Token | Reach | Resolves to |
|---|---|---|
--animation-enter | semantic every component | 150ms via --duration-150 |
--border-width-default | semantic every component | 1px via --border-width-100 |
--color-background-default-knockout | semantic every component | #202020 via --color-gray-12 |
--color-background-elevation-raised | semantic every component | #fcfcfc via --color-gray-1 |
--color-border-default | semantic every component | one role per property, so a theme can move the ring's weight and its colour independently. Tier 3's --focus-ring-width now reads this instead of holding a bare 2px, which is the same shape --focus-ring-color has always had (a thin tier-3 alias over a tier-2 role) — width was simply never given the tier-2 half.
*
* This role was rejected once, and the rejection is worth recording because its PREMISE was wrong rather than its reasoning. The argument against an `emphasis` width was that every 2px border in the kit is micro-geometry — spinner rings, the kbd keycap lip, a chevron. The focus ring was not in that enumeration and does not fit it: 33 components render it, more than read any other tier-3 token, and it is not micro-geometry but an accessibility affordance whose weight is a legitimate brand axis (a spoke that needs a heavier ring for contrast has to be able to reach it). It is also not a `border` in any component — every consumer paints it with `outline` or `box-shadow` — which is precisely why a survey of BORDERS missed it. The name still says `border` because tier 2 already calls the ring's colour --color-border-default-focus |
--color-border-default-knockout | semantic every component | #484848 via --color-gray-dark-7 |
--color-content-default | semantic every component | #202020 via --color-gray-12 |
--color-content-default-knockout | semantic every component | #fcfcfc via --color-gray-1 |
--elevation-4 | semantic every component | 0 via --shadow-offset-x |
--radius-md | semantic every component | 0.5rem via --radius-200 |
--typography-font-family-sans | semantic every component | 'DM Sans', sans-serif via --font-family-dm-sans |
--z-dropdown | semantic every component | 50 |
--spacing-300 | primitive every component | 0.75rem |