overlaystexulinot agent-emittableapp
Popover.Content
popover-content
Styled popover surface with optional arrow.
Live examples
Elevated
Elevated
Loading demo…
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
variant | enum (elevated, flat) | no | "elevated" | — |
size | enum (sm, md, lg) | no | "md" | — |
arrow | boolean | no | true | — |
class | string | no | — | — |
children | slot | no | — | — |
side | enum (top, right, bottom, left) | no | "bottom" | — |
align | enum (start, center, end) | no | "center" | — |
sideOffset | number | no | 8 | — |
initialFocus | unknown | no | — | An element inside the content, or a function returning one, to focus on open (for example the selected date). Falls back to the first control, else the content. Host-only: not agent-emittable (elements and functions are not data). |
Keyboard
| Key | Action |
|---|---|
a | Provide a visible heading or aria-label when needed. |
Accessibility
- Provide a visible heading or aria-label when needed.
Evidence for popover-content
Latest committed gates for popover-content (as of 2026-10-23). Static snapshot — not live CI.
Behavior
checkedscenario popover
Rows in tests/behavior/scenarios/popover.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium, WebKit and the Pixel 7.
Size (gzip)
texuli/popover-content · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Body of a popover
Don’t use when
Prefer another component
- Menu lists (use dropdown-menu-content)