Presence experimental

<script lang="ts">
  import { Presence } from '@odbd/svelte/presence'

  let open = $state(false)
</script>

<div class="presence-demo">
  <button
    type="button"
    class="odbd-button"
    data-variant="solid"
    data-size="md"
    aria-pressed={open}
    onclick={() => (open = !open)}
  >
    {open ? '패널 닫기' : '패널 열기'}
  </button>

  <Presence present={open} lazyMount unmountOnExit class="presence-box">
    마운트와 언마운트를 애니메이션으로 처리해요.
  </Presence>
</div>

<style>
  .presence-demo {
    display: grid;
    max-width: 30rem;
    gap: var(--odbd-space-3);
    align-items: start;
  }

  :global(.presence-box) {
    padding: var(--odbd-space-4);
    border: 1px solid var(--odbd-color-border);
    border-radius: var(--odbd-radius-md);
    background: var(--odbd-color-surface);
    color: var(--odbd-color-foreground);
  }

  :global(.presence-box[data-state='open']) {
    animation: presence-in var(--odbd-motion-normal) var(--odbd-ease-out) both;
  }

  :global(.presence-box[data-state='closed']) {
    animation: presence-out var(--odbd-motion-fast) var(--odbd-ease-in-out) both;
  }

  @keyframes presence-in {
    from {
      opacity: 0;
      transform: translateY(-0.375rem) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes presence-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(-0.25rem) scale(0.98);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :global(.presence-box[data-state='open']),
    :global(.presence-box[data-state='closed']) {
      animation: none;
    }
  }
</style>