Scroll Area experimental

<script lang="ts">
  import * as ScrollArea from '@odbd/svelte/scroll-area'

  const lines = Array.from({ length: 12 }, (_, index) => index + 1)
</script>

<ScrollArea.Root
  style="height: 9rem; width: min(100%, 22rem); border: 1px solid var(--odbd-color-border); border-radius: var(--odbd-radius-md);"
>
  <ScrollArea.Viewport>
    <ScrollArea.Content
      style="padding: var(--odbd-space-3); padding-block-end: var(--odbd-space-5);"
    >
      {#each lines as line}
        <p style="margin: 0 0 var(--odbd-space-2);">
          {line}. 스크롤 affordance를 확인하세요.
        </p>
      {/each}
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
</ScrollArea.Root>