# Anchor

Renders an anchor coordinating pointer and optional host-focus behavior.

## Signatures

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

## Why

The default host is a non-focusable `<span>`, so it provides pointer behavior
only. Give the span `tabindex`, or supply a natively focusable custom host,
for direct focus, blur, and keydown handling. Unlike a tooltip, hovercard
content may receive focus; host blur checks `relatedTarget` and stays open
while focus moves inside the card. Nested-anchor focus does not bubble.

## Ownership and lifetime

Running the Fx owns real DOM handlers and dynamic relationships in its Scope.
Custom hosts must preserve `aria-controls` and all supplied handlers.

## Examples

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

const program = Effect.gen(function* () {
  const state = yield* Hovercard.makeState({ id: "author-card" })
  return Hovercard.Anchor({
    state,
    content: "Ada Lovelace",
    props: { tabindex: 0 }
  })
})
```