Popover experimental

<script lang="ts">
  import * as Popover from '@odbd/svelte/popover'
</script>

<div class="popover-demo">
  <Popover.Root>
    <Popover.Trigger
      class="odbd-button"
      data-variant="outline"
      data-size="md"
      style="gap: var(--odbd-space-2);"
    >
      메모 보기
      <Popover.Indicator aria-hidden="true" />
    </Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content style="width: 18rem;">
        <Popover.Arrow>
          <Popover.ArrowTip />
        </Popover.Arrow>
        <Popover.Title>배포 전 확인</Popover.Title>
        <Popover.Description>
          관련 안내를 짧게 띄워 맥락을 잃지 않고 다음 작업을 이어가요.
        </Popover.Description>
        <Popover.CloseTrigger class="odbd-button" data-variant="ghost" data-size="sm">
          닫기
        </Popover.CloseTrigger>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</div>

<style>
  .popover-demo {
    display: grid;
    justify-items: center;
  }

  .popover-demo :global([data-part='trigger']) {
    inline-size: fit-content;
  }
</style>