Primitive · Overlay

Popper

Stable

Positionne un panneau flottant à côté d'une ancre. Géométrie pure et partagée entre frameworks : flip vers le côté opposé en cas de débordement, shift sur l'axe transverse, arrow optionnelle. Le repositionnement suit le scroll et le resize. SSR-safe : tout accès au DOM se fait dans des effets.

Voir le code (Svelte)

<Popper open placement="bottom">
  <Card>Panneau positionné près de l'ancre</Card>
</Popper>

Une primitive ancrée

Popper ne rend rien tant qu'il n'a pas à la fois open=true et une ancre (un HTMLElement réel). L'aperçu live ci-dessus est volontairement ouvert sans ancre : il se rend proprement à vide. Basculez le sélecteur de framework de l'aperçu pour comparer l'usage réel (Svelte / React / Vue) : on lie une ancre via une ref puis on bascule open.

API

Prop	Type	Default
`anchor`	`HTMLElement \| null`	–
`open`	`boolean`	`false`
`placement`	`"top" \| "bottom" \| "left" \| "right" \| "-start" \| "-end"`	`"bottom"`
`offset`	`number`	`8`
`flip`	`boolean`	`true`
`shift`	`boolean`	`true`
`arrow`	`boolean`	`false`
`strategy`	`"absolute" \| "fixed"`	`"absolute"`
`portal`	`boolean`	`true`
`onPlacementChange`	`(placement) => void`	–

Le placement résolu peut différer du placement demandé après un flip ; onPlacementChange notifie ce changement. Avec portal=true (défaut) le panneau est rendu dans le <body> pour échapper aux conteneurs à overflow.

Tokens utilisés

--st-semantic-surface-raised
--st-semantic-border-subtle

Popper se contente de positionner ; l'apparence du panneau (surface, ombre, rayon) vient de votre contenu et des tokens du thème.