Select experimental

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

  const frameworks = createListCollection({
    items: [
      { label: 'Svelte', value: 'svelte', group: 'Current' },
      { label: 'React', value: 'react', group: 'Current' },
      { label: 'Solid', value: 'solid', group: 'Other' },
      { label: 'Vue', value: 'vue', group: 'Other' },
    ],
    itemToString: (item) => item.label,
    itemToValue: (item) => item.value,
  })

  const groups = [
    {
      id: 'current',
      label: 'Current',
      items: frameworks.items.filter((item) => item.group === 'Current'),
    },
    {
      id: 'other',
      label: 'Other',
      items: frameworks.items.filter((item) => item.group === 'Other'),
    },
  ]
</script>

<Select.Root collection={frameworks} defaultValue={['react']} style="max-width: 16rem;">
  <Select.Label>Framework</Select.Label>
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText placeholder="Select a framework" />
      <Select.Indicator>▾</Select.Indicator>
    </Select.Trigger>
    <Select.ClearTrigger>×</Select.ClearTrigger>
  </Select.Control>
  <Select.Positioner>
    <Select.Content>
      {#each groups as group}
        <Select.ItemGroup id={group.id}>
          <Select.ItemGroupLabel>{group.label}</Select.ItemGroupLabel>
          {#each group.items as item}
            <Select.Item {item}>
              <Select.ItemText>{item.label}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          {/each}
        </Select.ItemGroup>
      {/each}
    </Select.Content>
  </Select.Positioner>
  <Select.HiddenSelect />
</Select.Root>