Combobox experimental

<script lang="ts">
  import * as Combobox from '@odbd/svelte/combobox'
  import { useListCollection } from '@odbd/svelte/combobox'

  const frameworkGroups = [
    { id: 'ui', label: 'UI', items: ['Svelte', 'React', 'Solid', 'Vue'] },
    { id: 'fullstack', label: '풀스택', items: ['Angular', 'Qwik', 'Astro'] },
  ]

  const frameworks = useListCollection({
    initialItems: frameworkGroups.flatMap((group) => group.items),
    filter: (itemText, filterText) => itemText.toLowerCase().includes(filterText.toLowerCase()),
  })
</script>

<Combobox.Root
  collection={frameworks.collection}
  onInputValueChange={(details) => frameworks.filter(details.inputValue)}
  style="max-width: 30rem;"
>
  <Combobox.Label>프레임워크</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input placeholder="이름으로 검색하세요" />
    <Combobox.ClearTrigger aria-label="검색어 지우기">×</Combobox.ClearTrigger>
    <Combobox.Trigger aria-label="목록 열기">
      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path
          d="M4 6l4 4 4-4"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </Combobox.Trigger>
  </Combobox.Control>
  <Combobox.Positioner>
    <Combobox.Content>
      <Combobox.List>
        <Combobox.Empty>결과 없음</Combobox.Empty>
        {#each frameworkGroups as group}
          {@const items = frameworks
            .collection()
            .items.filter((item) => group.items.includes(item))}
          {#if items.length}
            <Combobox.ItemGroup id={group.id}>
              <Combobox.ItemGroupLabel>{group.label}</Combobox.ItemGroupLabel>
              {#each items as item}
                <Combobox.Item {item}>
                  <Combobox.ItemText>{item}</Combobox.ItemText>
                  <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                </Combobox.Item>
              {/each}
            </Combobox.ItemGroup>
          {/if}
        {/each}
      </Combobox.List>
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.Root>