Listbox experimental

<script lang="ts">
  import { createListCollection } from '@odbd/svelte/listbox'
  import * as Listbox from '@odbd/svelte/listbox'

  const teams = createListCollection({
    items: [
      { label: '토큰 설계', value: 'tokens', group: '기반' },
      { label: 'Recipe CSS', value: 'recipes', group: '기반' },
      { label: 'React wrapper', value: 'react', group: '프레임워크' },
      { label: 'Svelte wrapper', value: 'svelte', group: '프레임워크' },
    ],
    itemToString: (item) => item.label,
    itemToValue: (item) => item.value,
  })

  const groups = [
    {
      id: 'foundation',
      label: '기반',
      items: teams.items.filter((item) => item.group === '기반'),
    },
    {
      id: 'framework',
      label: '프레임워크',
      items: teams.items.filter((item) => item.group === '프레임워크'),
    },
  ]
</script>

<Listbox.Root collection={teams} defaultValue={['recipes']} loopFocus style="max-width: 30rem;">
  <Listbox.Label>작업 영역</Listbox.Label>
  <Listbox.ValueText placeholder="영역을 선택하세요" />
  <Listbox.Input aria-label="항목 검색" placeholder="항목 이름으로 검색하세요" />
  <Listbox.Content>
    {#each groups as group}
      <Listbox.ItemGroup id={group.id}>
        <Listbox.ItemGroupLabel>{group.label}</Listbox.ItemGroupLabel>
        {#each group.items as item}
          <Listbox.Item {item} highlightOnHover>
            <Listbox.ItemText>{item.label}</Listbox.ItemText>
            <Listbox.ItemIndicator>✓</Listbox.ItemIndicator>
          </Listbox.Item>
        {/each}
      </Listbox.ItemGroup>
    {/each}
    <Listbox.Empty>표시할 항목이 없어요.</Listbox.Empty>
  </Listbox.Content>
</Listbox.Root>