Popover

Non-blocking floating panel anchored to a trigger element for contextual content.

Usage

<script lang="ts">
  import { Button } from '@lostgradient/cinder/button';
  import { Popover } from '@lostgradient/cinder/popover';

  let open = $state(false);
  const headingId = 'my-popover-title';
</script>

<Popover bind:open ariaLabelledby={headingId} arrowVisible focusManagement="preserve">
  {#snippet trigger()}
    <Button label="Open" onclick={() => (open = !open)} />
  {/snippet}

  <h2 id={headingId}>Panel heading</h2>
  <p>Panel content goes here.</p>
</Popover>

Choosing this component

Use Popover for rich, interactive contextual content anchored to a trigger — help panels, color pickers, settings cards, and similar surfaces that do not need to interrupt the user.

focusManagement — "panel" vs "preserve"

• "panel" (default): Focus moves to the first focusable element inside the panel when it opens. Use this when the panel contains a form field or search input that needs immediate keyboard access (date pickers, filter panels, inline editors).
• "preserve": Focus stays on the trigger after the panel opens. Use this for content-first panels (account settings, help text, status details) where the user is reading, not immediately interacting.