Swap experimental

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

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

<div class="swap-demo">
  <button
    type="button"
    class="odbd-button"
    data-variant="outline"
    data-size="md"
    aria-pressed={archived}
    onclick={() => (archived = !archived)}
  >
    <Swap.Root swap={archived} lazyMount unmountOnExit>
      <Swap.Indicator type="off">보관</Swap.Indicator>
      <Swap.Indicator type="on">보관됨</Swap.Indicator>
    </Swap.Root>
  </button>

  <p>{archived ? '선택한 항목을 보관했어요.' : '선택한 항목을 바로 보관해요.'}</p>
</div>

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

  .swap-demo p {
    margin: 0;
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .swap-demo .odbd-button {
    min-width: 6rem;
  }
</style>