<script setup>
const props = defineProps({
	value: {
		type: String,
		default: ""
	},
})
const toggleGroup = inject('toggleGroup');

const item = toggleGroup.registerToggleItem(props.value);
</script>

<template>
	<button role="radio" type="button" @click="toggleGroup.toggleItem(item.index)" :aria-checked="toggleGroup.selected.value === props.value || toggleGroup.selected.value.indexOf(props.value) > -1" :tabindex="item.item.tabIndex.value" :data-state="(toggleGroup.selected.value === props.value || toggleGroup.selected.value.indexOf(props.value) > -1) ? 'checked' : 'unchecked'" class="vl-toggle-button">
		<slot />				
	</button>
</template>