Popover

An anchored panel that morphs out of its trigger as a sharp square or chamfer — no soft goo by default. Fill inherits the trigger's active color when present, otherwise flips to the opposite light/dark scheme so the panel always contrasts with the page. Square silhouette, with a caret pointing back at the origin.

Open state (static replicas)

The live panel renders in a portal at <body> with a runtime-computed clip-path, so it cannot be pinned open inline. These replicas show the square contrast panel and gap geometry for both sides. The trigger carries data-state=open while its panel is out.

Closed trigger

side=bottom, open (replica)

14px gap below the trigger.

side=top, open (replica)

Panel above; origin flips to bottom.

import { Popover, PopoverContent, PopoverTrigger } from "@coldharbor/webui";

<Popover side="bottom" align="start">
  <PopoverTrigger>
    <Button variant="secondary">3 inputs</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>3 UTXOs · 0.245 000 00 BTC selected.</p>
  </PopoverContent>
</Popover>

--ch-popover-fill
--ch-popover-ink
--ch-fg
--ch-bg
--ch-focus

Live specimens

Click (or hover, for the hover-mode specimen) to watch the sharp polygon morph. Escape or an outside click dismisses. The morph collapses to a fade under reduced motion.

trigger=click (default)

trigger=hover

side=top, align=end

<Popover trigger="hover" side="top" align="end" sideOffset={14} panelRadius={0}>
  …
</Popover>

--ch-popover-fill
--ch-popover-ink
--ch-fg
--ch-bg
--ch-focus

Trigger silhouettes

Regression guard: every button variant, closed. The morph layer punches a hole in the shape of the real trigger, so a chamfered .ch-cut button must show both its cut corners with nothing painted over it. The static replicas above cannot catch this — they never mount the live morph layer at all.

primary (.ch-cut-both)

outline (.ch-cut-both)

ghost (no cut)

size=icon

Square trigger, both corners cut.

size=md (default)

No --ch-cut-size of its own; falls back to --ch-radius-cut.

size=lg

Larger chamfer: --ch-cut-size 0.75rem.

defaultOpen

Pinned open on load — the only live view of the neck. Click outside to dismiss.

--ch-popover-fill
--ch-popover-ink
--ch-fg
--ch-bg
--ch-focus

Themes

Open panel replica beneath its trigger, under all three layers.

--ch-popover-fill
--ch-popover-ink
--ch-fg
--ch-bg
--ch-focus