Accordion

<script lang="ts">
	import * as Accordion from '$lib/components/ui/accordion';
</script>

<Accordion.Root type="single">
	<Accordion.Item value="a">
		<Accordion.Trigger>Section one</Accordion.Trigger>
		<Accordion.Content>Body copy…</Accordion.Content>
	</Accordion.Item>
</Accordion.Root>

<script lang="ts" module>
	type Box = { x: number; y: number; w: number; h: number } | null;
</script>

<script lang="ts">
	import { Accordion as AccordionPrimitive } from 'bits-ui';
	import { cn } from '$lib/utils.js';

	let {
		ref = $bindable(null),
		value = $bindable(),
		class: className,
		children,
		...restProps
	}: AccordionPrimitive.RootProps = $props();

	let hoverBox = $state<Box>(null);
	let focusBox = $state<Box>(null);

	function boxOf(el: HTMLElement, host: HTMLElement): Box {
		const r = el.getBoundingClientRect();
		const hr = host.getBoundingClientRect();
		return { x: r.left - hr.left, y: r.top - hr.top, w: r.width, h: r.height };
	}

	function itemFor(target: EventTarget | null): HTMLElement | null {
		return target instanceof Element
			? target.closest<HTMLElement>('[data-slot="accordion-item"]')
			: null;
	}

	function onPointerOver(event: PointerEvent) {
		if (!ref) return;
		const item = itemFor(event.target);
		hoverBox = item ? boxOf(item, ref) : null;
	}

	function onPointerLeave() {
		hoverBox = null;
	}

	function onFocusIn(event: FocusEvent) {
		if (!ref) return;
		const item = itemFor(event.target);
		focusBox = item ? boxOf(item, ref) : null;
	}

	function onFocusOut(event: FocusEvent) {
		if (!itemFor(event.relatedTarget)) focusBox = null;
	}

	function styleFor(box: Box): string {
		if (!box) return 'opacity: 0;';
		return `opacity: 1; transform: translate3d(${box.x}px, ${box.y}px, 0); width: ${box.w}px; height: ${box.h}px;`;
	}
</script>

<AccordionPrimitive.Root bind:ref bind:value={value as never} {...restProps}>
	{#snippet child({ props })}
		<div
			{...props}
			data-slot="accordion"
			class={cn(
				'group/accordion relative flex w-full flex-col gap-0.5 overflow-hidden rounded-2xl border',
				className
			)}
			onpointerover={onPointerOver}
			onpointerleave={onPointerLeave}
			onfocusin={onFocusIn}
			onfocusout={onFocusOut}
		>
			<div
				aria-hidden="true"
				class="pointer-events-none absolute top-0 left-0 z-0 rounded-2xl bg-accent/40 transition-[transform,width,height,opacity] duration-(--motion-duration-fast) ease-(--motion-ease-out) will-change-transform dark:bg-accent/25"
				style={styleFor(hoverBox)}
			></div>
			<div
				aria-hidden="true"
				class="pointer-events-none absolute top-0 left-0 z-0 rounded-2xl ring-(length:--ring-width) ring-ring/50 transition-[transform,width,height,opacity] duration-(--motion-duration-fast) ease-(--motion-ease-out) will-change-transform"
				style={styleFor(focusBox)}
			></div>
			{@render children?.()}
		</div>
	{/snippet}
</AccordionPrimitive.Root>