Separator experimental

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

<div class="separator-demo">
  <section>
    <strong>사용자 정보</strong>
    <p>계정, 권한, 알림 설정을 한 영역에서 확인해요.</p>
  </section>

  <Separator />

  <div class="separator-demo__split">
    <span>프로필</span>
    <Separator orientation="vertical" />
    <span>보안</span>
    <Separator orientation="vertical" />
    <span>알림</span>
  </div>
</div>

<style>
  .separator-demo {
    display: grid;
    width: fit-content;
    max-width: 30rem;
    gap: var(--odbd-space-4);
  }

  .separator-demo section {
    display: grid;
    gap: var(--odbd-space-1);
  }

  .separator-demo strong,
  .separator-demo p {
    margin: 0;
  }

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

  .separator-demo__split {
    display: flex;
    align-items: center;
    gap: var(--odbd-space-3);
    color: var(--odbd-color-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .separator-demo__split :global(.odbd-separator[data-orientation='vertical']) {
    align-self: stretch;
    min-height: 1.25em;
  }
</style>