Dialog with Tooltip

<script lang="ts">
  import * as Dialog from '@odbd/svelte/dialog'
  import * as Tooltip from '@odbd/svelte/tooltip'
</script>

<div class="dialog-tooltip">
  <Dialog.Root>
    <Dialog.Trigger class="odbd-button" data-variant="solid" data-size="md">
      승인 요청 열기
    </Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content class="dialog-tooltip__content">
        <header class="dialog-tooltip__header">
          <div>
            <Dialog.Title>승인 요청</Dialog.Title>
            <Dialog.Description>
              출고 보류를 해제하기 전에 SLA 기준과 담당 팀 확인 상태를 함께 검토해요.
            </Dialog.Description>
          </div>
          <Dialog.CloseTrigger
            class="odbd-button dialog-tooltip__close"
            data-variant="ghost"
            data-size="icon"
            aria-label="대화상자 닫기"
          >
            ×
          </Dialog.CloseTrigger>
        </header>

        <section class="dialog-tooltip__panel" aria-label="승인 세부 정보">
          <div class="dialog-tooltip__row">
            <span>상태 기준</span>
            <Tooltip.Root
              openDelay={120}
              closeDelay={80}
              positioning={{ placement: 'top', gutter: 8 }}
            >
              <Tooltip.Trigger
                class="odbd-button dialog-tooltip__info"
                data-variant="ghost"
                data-size="icon"
                aria-label="상태 기준 설명"
              >
                ?
              </Tooltip.Trigger>
              <Tooltip.Positioner>
                <Tooltip.Content>
                  SLA 4시간을 초과하고 고객 알림이 끝난 항목만 승인 후보가 돼요.
                </Tooltip.Content>
              </Tooltip.Positioner>
            </Tooltip.Root>
          </div>
          <dl class="dialog-tooltip__facts">
            <div>
              <dt>요청자</dt>
              <dd>운영팀</dd>
            </div>
            <div>
              <dt>대상</dt>
              <dd>출고 보류 12건</dd>
            </div>
            <div>
              <dt>위험도</dt>
              <dd>중간</dd>
            </div>
          </dl>
        </section>

        <div class="dialog-tooltip__actions">
          <Dialog.CloseTrigger class="odbd-button" data-variant="outline" data-size="md">
            보류
          </Dialog.CloseTrigger>
          <Dialog.CloseTrigger class="odbd-button" data-variant="solid" data-size="md">
            승인
          </Dialog.CloseTrigger>
        </div>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
</div>

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

  :global(.dialog-tooltip__content) {
    display: grid;
    width: min(100%, 30rem);
    gap: var(--odbd-space-5);
  }

  .dialog-tooltip__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--odbd-space-4);
  }

  .dialog-tooltip__header > div {
    display: grid;
    min-width: 0;
    gap: var(--odbd-space-1);
  }

  :global(.dialog-tooltip__close),
  :global(.dialog-tooltip__info) {
    flex: 0 0 auto;
  }

  .dialog-tooltip__panel {
    display: grid;
    gap: var(--odbd-space-4);
    padding: var(--odbd-space-4);
    background: var(--odbd-color-surface-raised);
    border: 1px solid var(--odbd-color-border);
    border-radius: var(--odbd-radius-md);
  }

  .dialog-tooltip__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--odbd-space-3);
    color: var(--odbd-color-foreground);
    font-weight: 650;
  }

  .dialog-tooltip__facts {
    display: grid;
    gap: var(--odbd-space-3);
    margin: 0;
  }

  .dialog-tooltip__facts div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--odbd-space-4);
  }

  .dialog-tooltip__facts dt {
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .dialog-tooltip__facts dd {
    margin: 0;
    color: var(--odbd-color-foreground);
    font-weight: 650;
  }

  .dialog-tooltip__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: var(--odbd-space-2);
  }
</style>