HoverCard experimental

<script lang="ts">
  import * as HoverCard from '@odbd/svelte/hover-card'

  const details = [
    { label: '상태', value: '검토 중' },
    { label: '담당', value: '디자인 시스템 팀' },
    { label: '기준', value: 'WCAG 2.2 AA' },
  ]
</script>

<div class="hover-card-demo">
  <HoverCard.Root openDelay={150} closeDelay={120}>
    <HoverCard.Trigger>품질 점검 요약</HoverCard.Trigger>
    <HoverCard.Positioner>
      <HoverCard.Content>
        <HoverCard.Arrow>
          <HoverCard.ArrowTip />
        </HoverCard.Arrow>
        <div class="hover-card-demo__heading">릴리스 전 확인</div>
        <p class="hover-card-demo__copy">
          토큰 변경, wrapper parity, 접근성 검토를 배포 전에 함께 확인하세요.
        </p>
        <dl class="hover-card-demo__list">
          {#each details as detail}
            <div class="hover-card-demo__row">
              <dt>{detail.label}</dt>
              <dd>{detail.value}</dd>
            </div>
          {/each}
        </dl>
      </HoverCard.Content>
    </HoverCard.Positioner>
  </HoverCard.Root>
</div>

<style>
  .hover-card-demo {
    max-width: 30rem;
  }

  .hover-card-demo__heading {
    color: var(--odbd-color-foreground);
    font-size: var(--odbd-font-size-md);
    font-weight: 700;
  }

  .hover-card-demo__copy {
    margin: 0;
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .hover-card-demo__list {
    display: grid;
    gap: var(--odbd-space-1);
    margin: 0;
  }

  .hover-card-demo__row {
    display: flex;
    justify-content: space-between;
    gap: var(--odbd-space-4);
    font-size: var(--odbd-font-size-sm);
  }

  .hover-card-demo__row dt {
    color: var(--odbd-color-muted-foreground);
  }

  .hover-card-demo__row dd {
    margin: 0;
    color: var(--odbd-color-foreground);
    font-weight: 600;
  }
</style>