Imports

Bring in only the root, trigger, panel, and close directives you actually render.

import {
  TngPopover,
  TngPopoverClose,
  TngPopoverPanel,
  TngPopoverTrigger,
} from '@tailng-ui/primitives';

Basic composition

The primitive handles open state and dismissal; owners still position and style the anchored panel.

<section tngPopover #reviewPopover="tngPopover" class="review-anchor">
  <button type="button" [tngPopoverTrigger]="reviewPopover">Project actions</button>

  <section tngPopoverPanel>
    <p>Popover body content.</p>
    <button type="button" tngPopoverClose [tngPopoverClose]="'programmatic'">Close</button>
  </section>
</section>

Behavior baseline

• Enter/Space on a button trigger toggles the panel.
• Escape closes when closeOnEscape is enabled.
• Focus can return to the trigger when restoreFocus is enabled.
• No focus trap is applied by default, so Tab can move outside the popover.