Marquee experimental

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

  const updates = [
    {
      title: '토큰',
      body: 'semantic 토큰 변경은 migration note와 함께 기록해요.',
    },
    {
      title: 'Wrapper',
      body: 'React와 Svelte anatomy parity를 먼저 확인해요.',
    },
    {
      title: '접근성',
      body: 'focus ring은 app theme에서도 유지해요.',
    },
  ]

  const translations = {
    root: '디자인 시스템 작업 흐름 알림',
  }
</script>

<Marquee.Root
  class="marquee-demo"
  speed={36}
  spacing="0.75rem"
  pauseOnInteraction
  autoFill
  {translations}
>
  <Marquee.Edge side="start" />
  <Marquee.Viewport>
    <Marquee.Content>
      {#each updates as update}
        <Marquee.Item>
          <span class="marquee-demo-title">{update.title}</span>
          <span>{update.body}</span>
        </Marquee.Item>
      {/each}
    </Marquee.Content>
  </Marquee.Viewport>
  <Marquee.Edge side="end" />
</Marquee.Root>

<style>
  :global(.marquee-demo.odbd-marquee) {
    max-width: 30rem;
  }

  .marquee-demo-title {
    color: var(--odbd-color-accent);
    font-weight: 700;
  }
</style>