# Content

Renders manually controlled native popover content.

## Signatures

```ts
export declare function Content<const Options extends ContentOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ContentInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
```

## Why

The component delegates top-layer lifecycle to the Popover API, synchronizes
completed `toggle` events, and handles Escape through native events.

## Ownership and lifetime

Running the Fx owns listeners and the NativePopover observer in its Effect
Scope. A custom host must preserve `popover="manual"`, the toggle handler, and
the single composed hydration ref.

## Examples

```ts
import { Effect } from "effect"
import * as Popover from "@typed/ui/Popover"

const program = Effect.gen(function* () {
  const state = yield* Popover.makeState()
  return Popover.Content({ state, content: "Preferences" })
})
```