# SemanticAnchor

Group: Understanding

An underlined term inside a peek (or a Go deeper facet) and its definition card — the next level of detail for one word.
- Provide `word` (the term), `description` (one or two sentences), optional `children` (the text as it appears, if it differs in case or form), `knowMoreUrl`, `color` (the idea's topic) and `onGoDeeper` (opens `GoDeeper` for the term).
- **Trigger:** the term is a real `button` inside the sentence — dotted underline in `link`, 1.5px, offset 3px — so it is reachable by Tab and announced with `aria-expanded`.
- **Mouse:** hover for 250ms opens the card; it stays while the pointer is over the term or the card and closes 300ms after leaving (WCAG 1.4.13: hoverable, persistent, dismissible). Click pins it and moves focus to its first action. **Keyboard:** Enter/Space opens and focuses it, Escape closes and returns focus. **Touch:** inside a `VisualMap` sheet, `onActivate` swaps the sheet to the definition with *‹ back* (no popover over a finger); standalone, a tap opens the card.
- **Card (`AnchorCard`):** eyebrow TERM, the word in the hand face, the definition, then *Learn more ↗* and **Go deeper**. Smaller than a peek (300px), same hand-cut family with the topic's offset sheet; it nudges itself to stay inside the viewport.
- Definitions don't nest: a term's card never underlines further terms — that exploration belongs to Go deeper.


## Props

```ts
export interface SemanticAnchorProps { word: string; children?: ReactNode; description: ReactNode; knowMoreUrl?: string | null; color?: NodeColor; onGoDeeper?: () => void; onActivate?: () => void }
```

## Use

```ts
import { SemanticAnchor } from '@visualli/design-system/components';
```