Listbox

<script lang="ts">
	import { Listbox } from '@ark-ui/svelte';
	import { createListCollection } from '@ark-ui/svelte/listbox';

	const collection = createListCollection({
		items: [
			{ value: 'display', label: 'Display' },
			{ value: 'headline', label: 'Headline' },
			{ value: 'title', label: 'Title' },
			{ value: 'body', label: 'Body' }
		]
	});
</script>

<Listbox.Root {collection} defaultValue={['title']} class="listbox-root">
	<Listbox.Label class="listbox-label">Role</Listbox.Label>
	<Listbox.Content class="listbox-content">
		{#each collection.items as option (option.value)}
			<Listbox.Item item={option} class="listbox-item">
				<Listbox.ItemText class="listbox-item-text">{option.label}</Listbox.ItemText>
			</Listbox.Item>
		{/each}
	</Listbox.Content>
</Listbox.Root>