Native Popovers

<Button
  popoverTarget="popover-anchor"
  variant="outline"
  className="[anchor-name:--trigger2]"
>
  Anchor, no backdrop
</Button>
<div
  popover="auto"
  id="popover-anchor"
  aria-labelledby="popover-anchor-title"
  aria-describedby="popover-anchor-desc"
  className="not-prose bg-card [position-anchor]:--trigger2 absolute inset-y-[unset] bottom-[anchor(top)] z-50 mb-1 max-w-3xs transform overflow-hidden rounded-lg border px-3 py-2 opacity-0 shadow-lg transition-[opacity,transform,translate,scale] transition-discrete duration-50 ease-out open:translate-y-0 open:scale-100 open:opacity-100 starting:open:translate-y-1 starting:open:scale-90 starting:open:opacity-0"
>
  <h3 id="popover-anchor-title" className="mt-0 mb-1 text-sm font-medium">
    Howdy!
  </h3>
  <p id="popover-anchor-desc" className="text-sm">
    This should be accessible without any additional config
  </p>
</div>

<Button popoverTarget="popover-backdrop" variant="outline" className="relative">
  Popover with backdrop
</Button>
<div
  popover="auto"
  id="popover-backdrop"
  aria-labelledby="popover-backdrop-title"
  aria-describedby="popover-backdrop-desc"
  className="bg-card not-prose fixed inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg border p-4 opacity-0 shadow-2xl transition-[opacity,transform,translate,scale] transition-discrete duration-300 backdrop:bg-transparent backdrop:transition-colors open:translate-y-0 open:scale-100 open:opacity-100 open:backdrop:bg-black/30 sm:w-full sm:max-w-96 starting:open:translate-y-4 starting:open:scale-95 starting:open:opacity-0 starting:open:backdrop:bg-transparent"
>
  <h2 id="popover-backdrop-title" className="mt-0 mb-3 text-base! font-medium text-pretty">
    This is a native HTML popover. You can read up on{" "}
    <a
      href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
      target="_blank"
      rel="noreferrer"
      className="link"
    >
      MDN
      <IconArrowUpRight />
    </a>
    .
  </Heading>
  <p id="popover-backdrop-desc">
    Click outside or press <Code>Esc</Code> to dismiss.
  </p>
</div>

<Button popoverTarget="popover-backdrop" variant="outline" className="relative">
  Popover with backdrop
</Button>
<div
  popover="auto"
  id="popover-backdrop"
  aria-labelledby="popover-backdrop-title"
  aria-describedby="popover-backdrop-desc"
  className="bg-card not-prose fixed inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg border p-4 opacity-0 shadow-2xl transition-[opacity,transform,translate,scale] transition-discrete duration-300 backdrop:bg-transparent backdrop:transition-colors open:translate-y-0 open:scale-100 open:opacity-100 open:backdrop:bg-black/30 sm:w-full sm:max-w-96 starting:open:translate-y-4 starting:open:scale-95 starting:open:opacity-0 starting:open:backdrop:bg-transparent"
>
  <h2 id="popover-backdrop-title" className="mt-0 mb-3 text-base! font-medium text-pretty">
    This is a native HTML popover. You can read up on{" "}
    <a
      href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
      target="_blank"
      rel="noreferrer"
      className="link"
    >
      MDN
      <IconArrowUpRight />
    </a>
    .
  </Heading>
  <p id="popover-backdrop-desc">
    Click outside or press <Code>Esc</Code> to dismiss.
  </p>
</div>

<Button popoverTarget="popover-backdrop" variant="outline" className="relative">
  Popover with backdrop
</Button>
<div
  popover="auto"
  id="popover-backdrop"
  aria-labelledby="popover-backdrop-title"
  aria-describedby="popover-backdrop-desc"
  className="bg-card not-prose fixed inset-y-0 mx-auto my-auto transform overflow-hidden rounded-lg border p-4 opacity-0 shadow-2xl transition-[opacity,transform,translate,scale] transition-discrete duration-300 backdrop:bg-transparent backdrop:transition-colors open:translate-y-0 open:scale-100 open:opacity-100 open:backdrop:bg-black/30 sm:w-full sm:max-w-96 starting:open:translate-y-4 starting:open:scale-95 starting:open:opacity-0 starting:open:backdrop:bg-transparent"
>
  <h2 id="popover-backdrop-title" className="mt-0 mb-3 text-base! font-medium text-pretty">
    This is a native HTML popover. You can read up on{" "}
    <a
      href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
      target="_blank"
      rel="noreferrer"
      className="link"
    >
      MDN
      <IconArrowUpRight />
    </a>
    .
  </Heading>
  <p id="popover-backdrop-desc">
    Click outside or press <Code>Esc</Code> to dismiss.
  </p>
</div>