<script setup>
const item = inject('accordionItem');
const contentHeight = ref(0);
const content = ref(null);

watch(item.hidden, () => {
	if (!item.hidden.value) {
		setTimeout(() => {
			contentHeight.value = content.value.offsetHeight;
		})
	}
})
</script>

<template>
	<div :id="`vueless-${item.index}`" role="region" :aria-labelledby="`vueless-${item.index}`" class="vl-accordion-content"
		:style="`--vueless-accordion-content-height: ${contentHeight}px`"
		:data-state="(item.isOpen.value) ? 'open' : 'closed'"
		@animationend="(!item.isOpen.value) ? item.hidden.value = true : ''" :hidden="item.hidden.value">
		<div ref="content">
			<slot />
		</div>
	</div>
</template>