# Popover

A small non-modal panel anchored to a control: filters, column options, a quick note. Clicks inside keep it open; Apply or `[data-k-close-pop]` closes it. Phone: a short bottom sheet.

- **Group:** Overlays · **family:** `overlays` · **shadcn:** Popover
- **Build:** shadcn `Popover` (Radix).
- **In apps/admin today:** @radix-ui/react-popover installed and used directly (shell/brand-picker); `popover.tsx` wrapper is new.
- **Client component:** yes. 

## Content rules

- Popover titles optional; Apply names the result ("Show 41 orders").

## Do

- Live-count the result on the apply button.

## Don't

- Nest popovers.

## Motion

- As the dropdown menu (pop in 160ms, out 110ms).

## Accessibility

- **Keyboard:** Escape closes; Tab moves through fields (not trapped: non-modal).
- **ARIA:** Radix Popover: trigger `aria-expanded` + `aria-controls`; panel `role="dialog"` when it holds fields.
- **Focus:** Focus moves to the first field; returns to the trigger on close.

## Tokens

`--popover` `--popover-foreground` `--border` `--r-card` `--e-pop` `--s-4` `--s-1` `--z-pop` `--w-semibold` `--text-card` `--font-title` `--font-stretch-title` `--text-small` `--muted-foreground` `--s-3` `--s-2`

## Files

`popover.html` live specimen · `popover.css` kit rules · `popover.d.ts` props · full page: `docs/components/popover/` (phone: `m/`).