# Popover

> A floating surface anchored to whatever element opened it, built entirely on the native Popover API: the host carries the `popover` attribute and opens through `popovertarget` or a Command Invoker (`commandfor`/ `command="toggle-popover"`) elsewhere on the page, with no positioning logic running in script.

```ts
import { Popover } from "@sdxc/ui";
```

Renders the floating surface itself: a `popover`-attributed `<div>`
positioned via CSS anchor positioning. The invoker that opens it becomes
the implicit anchor its `position-area` resolves against.

## Examples

```tsx
<button commandfor="account-menu" command="toggle-popover">{t("nav.account")}</button>
<Popover id="account-menu" placement="bottom-start">
	<p>{t("nav.accountMenu.body")}</p>
</Popover>
```

```tsx
<Popover id="filters" placement="top" mix={[fade({ duration: durations.normal })]}>
	<OverlayArrow placement="top">
		<svg width={12} height={12} viewBox="0 0 12 12">
			<path d="M0 0 L6 6 L12 0" />
		</svg>
	</OverlayArrow>
	{content}
</Popover>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | Stable id an invoker elsewhere on the page targets to open this host. |
| `popover?` | `"auto" \| "hint" \| "manual"` | `popover` attribute mode: `"auto"` dismisses on outside click or Escape and closes sibling `"auto"` popovers when shown; `"hint"` layers over an open one without closing it; `"manual"` closes only when hidden explicitly. |
| `placement?` | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | Side of the anchor to render against. Defaults to DEFAULT_PLACEMENT. |
| `children` | `RemixNode` | The popover's content. |

Also accepts everything in `Omit<TagProps<"div">, "id" | "popover">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Placement` | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | Side of the anchor the host renders against, and, for the four corner variants, which anchor edge it aligns to along the perpendicular axis. |