svelte-kit-vice/src/routes/test/accordion/+page.svelte

<script lang="ts">
	import { Accordion } from '@/uix/acel';
</script>

<div class="p-8 max-w-2xl mx-auto">
	<h1 class="text-2xl font-bold mb-6">Accordion Component Test</h1>
	
	<div class="space-y-8">
		<!-- Single Accordion -->
		<section>
			<h2 class="text-lg font-semibold mb-3">Single Accordion (type="single")</h2>
			<Accordion.Root type="single" class="border rounded-lg">
				<Accordion.Item value="item-1" class="border-b">
					<Accordion.Header>
						<Accordion.Trigger class="flex w-full items-center justify-between p-4 hover:bg-gray-100">
							<span>Is it accessible?</span>
							<span class="accordion-chevron">▼</span>
						</Accordion.Trigger>
					</Accordion.Header>
					<Accordion.Content class="p-4 pt-0">
						Yes. It adheres to the WAI-ARIA design pattern.
					</Accordion.Content>
				</Accordion.Item>

				<Accordion.Item value="item-2" class="border-b">
					<Accordion.Header>
						<Accordion.Trigger class="flex w-full items-center justify-between p-4 hover:bg-gray-100">
							<span>Is it styled?</span>
							<span class="accordion-chevron">▼</span>
						</Accordion.Trigger>
					</Accordion.Header>
					<Accordion.Content class="p-4 pt-0">
						Yes. It comes with default styles that match the other components' aesthetics.
					</Accordion.Content>
				</Accordion.Item>

				<Accordion.Item value="item-3">
					<Accordion.Header>
						<Accordion.Trigger class="flex w-full items-center justify-between p-4 hover:bg-gray-100">
							<span>Is it animated?</span>
							<span class="accordion-chevron">▼</span>
						</Accordion.Trigger>
					</Accordion.Header>
					<Accordion.Content class="p-4 pt-0">
						Yes. It's animated by default, but you can disable it if you prefer.
					</Accordion.Content>
				</Accordion.Item>
			</Accordion.Root>
		</section>

		<!-- Multiple Accordion -->
		<section>
			<h2 class="text-lg font-semibold mb-3">Multiple Accordion (type="multiple")</h2>
			<Accordion.Root type="multiple" class="border rounded-lg">
				<Accordion.Item value="item-1" class="border-b">
					<Accordion.Header>
						<Accordion.Trigger class="flex w-full items-center justify-between p-4 hover:bg-gray-100">
							<span>Section 1</span>
							<span>▼</span>
						</Accordion.Trigger>
					</Accordion.Header>
					<Accordion.Content class="p-4 pt-0">
						Content for section 1. Multiple sections can be open at the same time.
					</Accordion.Content>
				</Accordion.Item>

				<Accordion.Item value="item-2" class="border-b">
					<Accordion.Header>
						<Accordion.Trigger class="flex w-full items-center justify-between p-4 hover:bg-gray-100">
							<span>Section 2</span>
							<span>▼</span>
						</Accordion.Trigger>
					</Accordion.Header>
					<Accordion.Content class="p-4 pt-0">
						Content for section 2.
					</Accordion.Content>
				</Accordion.Item>

				<Accordion.Item value="item-3">
					<Accordion.Header>
						<Accordion.Trigger class="flex w-full items-center justify-between p-4 hover:bg-gray-100">
							<span>Section 3</span>
							<span>▼</span>
						</Accordion.Trigger>
					</Accordion.Header>
					<Accordion.Content class="p-4 pt-0">
						Content for section 3.
					</Accordion.Content>
				</Accordion.Item>
			</Accordion.Root>
		</section>

		<!-- Disabled Accordion -->
		<section>
			<h2 class="text-lg font-semibold mb-3">Disabled Accordion</h2>
			<Accordion.Root type="single" disabled={true} class="border rounded-lg opacity-50">
				<Accordion.Item value="item-1">
					<Accordion.Header>
						<Accordion.Trigger class="flex w-full items-center justify-between p-4">
							<span>Disabled Item</span>
							<span>▼</span>
						</Accordion.Trigger>
					</Accordion.Header>
					<Accordion.Content class="p-4 pt-0">
						This content should not be accessible.
					</Accordion.Content>
				</Accordion.Item>
			</Accordion.Root>
		</section>
	</div>
</div>

<style>
	.accordion-chevron {
		transition: transform 0.2s;
	}
	
	[data-state="open"] .accordion-chevron {
		transform: rotate(180deg);
	}
	
	[data-state="closed"] .accordion-chevron {
		transform: rotate(0deg);
	}
</style>