<.popover id="popover-single-default">
  <.popover_trigger>
    <.button variant="outline">Open popover</.button>
  </.popover_trigger>
  <.popover_content>
    <.popover_header class="mb-4">
      <.popover_title>Dimensions</.popover_title>
      <.popover_description>Set the dimensions for the layer.</.popover_description>
    </.popover_header>
    <div class="grid gap-2">
      <div class="grid grid-cols-3 items-center gap-4">
        <.label>Width</.label>
        <.input name="width" value="100%" class="col-span-2 h-8" />
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <.label>Height</.label>
        <.input name="height" value="25px" class="col-span-2 h-8" />
      </div>
    </div>
  </.popover_content>
</.popover>

<.popover id="popover-single-with-header">
  <.popover_trigger>
    <.button variant="outline">Info</.button>
  </.popover_trigger>
  <.popover_content>
    <.popover_header>
      <.popover_title>About this feature</.popover_title>
      <.popover_description>
        This popover shows contextual information.
      </.popover_description>
    </.popover_header>
    <p class="mt-2 text-sm text-muted-foreground">
      Additional details can go here.
    </p>
  </.popover_content>
</.popover>

<.popover id="popover-single-align-start">
  <.popover_trigger>
    <.button variant="outline">Align Start</.button>
  </.popover_trigger>
  <.popover_content align="start">
    <.popover_title>Start aligned</.popover_title>
    <p class="mt-2 text-sm text-muted-foreground">Content aligned to start edge.</p>
  </.popover_content>
</.popover>

<.popover id="popover-single-side-top">
  <.popover_trigger>
    <.button variant="outline">Side Top</.button>
  </.popover_trigger>
  <.popover_content side="top">
    <.popover_title>Top placement</.popover_title>
    <p class="mt-2 text-sm text-muted-foreground">This popover opens above.</p>
  </.popover_content>
</.popover>

<.popover id="popover-single-custom-width">
  <.popover_trigger>
    <.button variant="outline">Wide Popover</.button>
  </.popover_trigger>
  <.popover_content class="w-96">
    <.popover_title>Wider popover</.popover_title>
    <p class="mt-2 text-sm text-muted-foreground">
      This popover uses a wider width override (w-96).
    </p>
  </.popover_content>
</.popover>