API reference
Headless popover exposes a root controller plus structural directives for the trigger, panel, and explicit close affordances. It owns opening, dismissal, focus handoff, and ARIA wiring, while you own the anchored layout.
Root directive
| Directive | Selector | Key API | Purpose |
|---|---|---|---|
TngPopover | [tngPopover] | open, defaultOpen, disabled, closeOnEscape, closeOnOutsidePointer, restoreFocus, autoFocus, side, align, panelRole, ariaHasPopup, ariaLabel | Owns open state, dismissal policy, focus handoff, and panel accessibility metadata. |
TngPopover | [tngPopover] | openChange, closed | Emits controlled open-state changes and close reasons for feature workflows. |
Slot directives
| Directive | Selector | Slot | Purpose |
|---|---|---|---|
TngPopoverTrigger | [tngPopoverTrigger] | popover-trigger | Binds a trigger to a popover instance and mirrors open/disabled state through data hooks. |
TngPopoverPanel | [tngPopoverPanel] | popover-panel | Anchored panel surface with generated id, role, hidden state, side, and align metadata. |
TngPopoverContent | [tngPopoverContent] | popover-panel | Alias of the panel directive for teams that prefer a content-oriented naming style. |
TngPopoverClose | [tngPopoverClose] | popover-close | Closes the popover from an in-panel action and can emit an explicit close reason. |
Behavior and events
closedemits'escape' | 'outside-pointer' | 'programmatic' | 'trigger-toggle'.autoFocuscan prefer the first focusable, the panel itself, or no initial focus move.- Popover does not trap focus by default, so
Tabmay leave the panel. sideandalignonly mirror state as attributes; they do not perform automatic positioning math.panelRolesupportsdialog,menu,listbox,region, ornone.