Dialog experimental

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

<div class="dialog-demo">
  <Dialog.Root>
    <Dialog.Trigger class="odbd-button" data-variant="solid" data-size="md">
      Open dialog
    </Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <div>
          <Dialog.Title>Dialog title</Dialog.Title>
          <Dialog.Description>
            Dialog wrapper와 theme recipe가 실제로 적용되는지 확인해요.
          </Dialog.Description>
        </div>
        <div class="dialog-actions">
          <Dialog.CloseTrigger class="odbd-button" data-variant="outline" data-size="md">
            Close
          </Dialog.CloseTrigger>
          <button type="button" class="odbd-button" data-variant="solid" data-size="md">
            Confirm
          </button>
        </div>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
</div>

<style>
  .dialog-demo {
    display: grid;
    justify-items: center;
  }

  .dialog-demo :global([data-part='trigger']) {
    inline-size: fit-content;
    min-inline-size: 12rem;
    padding-inline: var(--odbd-space-5);
  }
</style>