<script setup>
const emit = defineEmits(['update:modelValue'])
const checked = ref(false);

watch(checked, (newValue) => {
	emit('update:modelValue', newValue);
});
emit('update:modelValue', checked.value);

function toggleChecked() {
	checked.value = !checked.value;
}
</script>

<template>
	<button class="vl-toggle-button" @click="toggleChecked()" :aria-pressed="checked" :data-state="(checked) ? 'on' : 'off'">
		<slot />
	</button>
</template>