Popover with Tooltip

<script lang="ts">
  import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements'

  import * as Popover from '@odbd/svelte/popover'
  import * as Tooltip from '@odbd/svelte/tooltip'

  type TriggerPropsFn = (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>

  const rules = [
    { label: '지연', value: '4시간 초과' },
    { label: '결제', value: '실패 2회' },
    { label: '담당', value: '운영팀' },
  ]
</script>

<div class="popover-tooltip">
  <Tooltip.Root openDelay={180} closeDelay={80} positioning={{ placement: 'top', gutter: 8 }}>
    <Popover.Root>
      <Tooltip.Trigger>
        {#snippet asChild(props: TriggerPropsFn)}
          <Popover.Trigger
            {...props()}
            class="odbd-tooltip__trigger odbd-button popover-tooltip__trigger"
            data-variant="outline"
            data-size="md"
          >
            알림 조건
            <Popover.Indicator aria-hidden="true" />
          </Popover.Trigger>
        {/snippet}
      </Tooltip.Trigger>

      <Popover.Positioner>
        <Popover.Content class="popover-tooltip__content">
          <Popover.Arrow>
            <Popover.ArrowTip />
          </Popover.Arrow>
          <Popover.Title>알림 조건</Popover.Title>
          <Popover.Description>
            배송 지연과 결제 실패 알림을 같은 surface에서 조정해요.
          </Popover.Description>
          <ul class="popover-tooltip__rules" aria-label="현재 알림 조건">
            {#each rules as rule}
              <li>
                <span>{rule.label}</span>
                <strong>{rule.value}</strong>
              </li>
            {/each}
          </ul>
          <Popover.CloseTrigger class="odbd-button" data-variant="solid" data-size="sm">
            적용
          </Popover.CloseTrigger>
        </Popover.Content>
      </Popover.Positioner>
    </Popover.Root>

    <Tooltip.Positioner>
      <Tooltip.Content>열기 전에도 현재 조건의 성격을 짧게 설명해요.</Tooltip.Content>
    </Tooltip.Positioner>
  </Tooltip.Root>
</div>

<style>
  .popover-tooltip {
    display: grid;
    width: min(100%, 26rem);
    min-height: 9rem;
    place-items: center;
  }

  :global(.popover-tooltip__trigger) {
    justify-content: center;
    gap: var(--odbd-space-2);
  }

  :global(.popover-tooltip__content) {
    width: min(19rem, calc(100vw - var(--odbd-space-8)));
  }

  .popover-tooltip__rules {
    display: grid;
    gap: var(--odbd-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .popover-tooltip__rules li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--odbd-space-3);
    padding: var(--odbd-space-2) 0;
    border-block-end: 1px solid var(--odbd-color-border);
  }

  .popover-tooltip__rules li:last-child {
    border-block-end: 0;
  }

  .popover-tooltip__rules span {
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .popover-tooltip__rules strong {
    color: var(--odbd-color-foreground);
    font-size: var(--odbd-font-size-sm);
  }
</style>