Popover

A non-modal (or modal) panel anchored to a button.

Import
import * as Popover from '@texuli/primitives/popover';
Pattern
Disclosure / dialog (WAI-ARIA APG)
Size budget
16.0 KiB gzip for @texuli/primitives/popover
Reference
packages/primitives/docs/prim-popover.md

Live demo

Loading the Popover demo…

Anatomy

Popover anatomy: each box holds the parts inside it.
  • Popover.Root
    • Popover.Trigger
    • Popover.Content
      • Popover.Close

Behavior checks

tests/behavior/scenarios/popover.spec.ts runs 9 rows against the Popover scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 9 rows
  1. the trigger reports collapsed, then expanded
  2. opening moves focus into the panel
  3. Escape closes it and focus returns to the trigger
  4. a pointer press outside closes it
  5. it is not modal: focus can move to the page behind it
  6. it opens below its trigger, 6 px away
  7. the Apply button closes it
  8. a modal popover keeps Tab and Shift+Tab inside it
  9. Escape closes a modal popover and focus returns to its trigger

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 16.0 KiB gzip for @texuli/primitives/popover (pnpm size).
  • Open-to-focus: p75 at most 50 ms (asserted with TEXULI_PERF=1).