Select

<script lang="ts">
	import { Select, createListCollection } from '@ark-ui/svelte';
	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
</script>

<Select.Root
	collection={createListCollection({
		items: [
			{ label: 'Svelte', value: 'svelte' },
			{ label: 'React', value: 'react' },
			{ label: 'Vue', value: 'vue' }
		]
	})}
	defaultValue={['svelte']}
	class="select-root select-filled"
>
	<Select.Label class="select-label">Framework</Select.Label>
	<Select.Control>
		<Select.Trigger class="select-trigger">
			<Select.ValueText class="select-value-text" />
			<Select.Indicator class="select-indicator"><ChevronDownIcon /></Select.Indicator>
		</Select.Trigger>
	</Select.Control>
	<Select.Positioner class="select-positioner">
		<Select.Content class="select-content">
			
			
		</Select.Content>
	</Select.Positioner>
</Select.Root>