Accordion experimental

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

  const items = [
    {
      value: 'tokens',
      title: 'Design tokens',
      body: '색상, 간격, 타이포그래피 토큰이 모든 recipe의 기반이 돼요.',
    },
    {
      value: 'recipes',
      title: 'Component recipes',
      body: '컴포넌트 CSS는 semantic 토큰만 사용하고 raw 색상을 쓰지 않아요.',
    },
    {
      value: 'wrappers',
      title: 'Framework wrappers',
      body: 'React와 Svelte wrapper가 같은 anatomy 클래스를 공유해요.',
    },
  ]
</script>

<Accordion.Root defaultValue={['tokens']}>
  {#each items as item}
    <Accordion.Item value={item.value}>
      <Accordion.ItemTrigger>
        {item.title}
        <Accordion.ItemIndicator>▾</Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>{item.body}</Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion.Root>