API reference
Component popover uses the styled <tng-popover> wrapper and sits on top of the same primitive contract documented on the separate headless popover page.
Wrapper component: <tng-popover>
| Element | Input / Output | Type | Description |
|---|---|---|---|
<tng-popover> | open, openChange | boolean | Controlled popover state. Leave open undefined for uncontrolled mode. |
<tng-popover> | defaultOpen | boolean | Initial open state when uncontrolled. |
<tng-popover> | triggerLabel | string | Text rendered in the built-in trigger button. |
<tng-popover> | disabled | boolean | Prevents opening from trigger interactions. |
<tng-popover> | closeOnEscape, closeOnOutsidePointer | boolean | Dismiss policy for keyboard escape and outside pointer interactions. |
<tng-popover> | restoreFocus | boolean | Restores focus to trigger/previous element after close. |
<tng-popover> | autoFocus | 'first-focusable' | 'panel' | 'none' | Controls what receives focus when the panel opens. |
<tng-popover> | side, align | 'top' | 'right' | 'bottom' | 'left', 'start' | 'center' | 'end' | Placement hooks exposed via data-side and data-align. |
<tng-popover> | panelRole, ariaLabel, ariaHasPopup | 'dialog' | 'menu' | 'listbox' | 'region' | 'none', string | ARIA contract for panel semantics and trigger aria-haspopup. |
<tng-popover> | closed | 'escape' | 'outside-pointer' | 'programmatic' | 'trigger-toggle' | Close reason payload for analytics and flow state tracking. |
Primitive directives
| Directive | Purpose | Key inputs / outputs |
|---|---|---|
tngPopover | Root state machine for open/close, dismissal, placement, and accessibility wiring. | open, defaultOpen, closeOnEscape, closeOnOutsidePointer, autoFocus, side, align, openChange, closed |
tngPopoverTrigger | Binds trigger element to a popover instance and toggles open/close on click. | [tngPopoverTrigger] (optional explicit popover instance) |
tngPopoverPanel / tngPopoverContent | Panel surface with generated id, role, hidden state, and slot attributes. | Reads state from root; no separate inputs required. |
tngPopoverClose | Closes the popover when clicked and emits reason through root closed. | [tngPopoverClose] close reason (optional) |
Keyboard contract (high level)
Enter/Spaceon a button trigger toggles the popover panel.Escapecloses whencloseOnEscapeis enabled.- Outside pointer interactions close when
closeOnOutsidePointeris enabled and target is outside the popover root. - Focus restore after close is controlled by
restoreFocus. - Popover does not trap focus by default;
Tabcan move outside the panel.