Accordion

<f:variable name="items" value="{
    0: { value: 'item-1', title: 'Product Information', content: 'Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.' },
    1: { value: 'item-2', title: 'Shipping Details', content: 'We offer worldwide shipping with various delivery options to suit your needs. Orders are processed within 24 hours and typically arrive within 5-10 business days.' },
    2: { value: 'item-3', title: 'Return Policy', content: 'We accept returns within 30 days of purchase. Items must be in original condition and packaging. Please contact our support team to initiate a return.' }
}" />

<primitives:accordion.root class="w-full max-w-[400px]" defaultValue="{0: 'item-2'}">
    <f:for each="{items}" as="item">
        <primitives:accordion.item value="{item.value}" class="border-b last:border-b-0" disabled="{true}">
            <primitives:accordion.itemHeader class="flex">
                <primitives:accordion.itemTrigger class="focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180">
                    {item.title}
                    <ui:icon.chevronDown class="ext-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
                </primitives:accordion.itemTrigger>
            </primitives:accordion.itemHeader>
            <primitives:accordion.itemContent class="transition-all ease-out duration-200 transition-discrete grid starting:data-[state=open]:grid-rows-[0fr] data-[state=closed]:grid-rows-[0fr] data-[state=open]:grid-rows-[1fr]">
                <div class="overflow-hidden text-sm">
                    <div class="pb-4">
                        {item.content}
                    </div>
                </div>
            </primitives:accordion.itemContent>
        </primitives:accordion.item>
    </f:for>
</primitives:accordion.root>

<vite:asset entry="EXT:fluid_primitives/Resources/Public/JavaScript/dist/accordion.entry.js" />