Accordion

<Accordion Type="AccordionType.Multiple">
    <AccordionItem Value="item-1">
        <AccordionTrigger>Can I open multiple items at once?</AccordionTrigger>
        <AccordionContent>
            Yes! Set Type="AccordionType.Multiple" on the Accordion component to allow multiple items to be expanded simultaneously. This is useful when you want users to compare content across several sections or keep context from one section visible while reading another. Unlike the default Single mode, opening a new item won't automatically close the one that was previously open.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-2">
        <AccordionTrigger>How does the toggle behavior work?</AccordionTrigger>
        <AccordionContent>
            Each item can be toggled independently. Clicking an open item will collapse it; clicking a closed item will expand it. There's no limit to how many items can be open at the same time—you could have all of them expanded if that suits your use case. This makes the Multiple mode ideal for FAQ pages, settings panels, or any content where users might want to reference several sections at once.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-3">
        <AccordionTrigger>Can I close all items so nothing is expanded?</AccordionTrigger>
        <AccordionContent>
            Yes. In Multiple mode, you can expand and collapse any combination of items, including having none open. Users can close each item individually by clicking its trigger, and there's no requirement to keep at least one section expanded. This gives you full flexibility for both the initial state and how users interact with the accordion over time.
        </AccordionContent>
    </AccordionItem>
</Accordion>

<Accordion Collapsible="false">
    <AccordionItem Value="item-1">
        <AccordionTrigger>Can I change or cancel my flight reservation?</AccordionTrigger>
        <AccordionContent>
            Most airlines allow changes or cancellations, but fees and policies vary by fare type. Economy basic tickets often have the strictest rules and may only offer a credit rather than a refund. Flexible or premium fares typically allow free changes within a certain window. Always check your confirmation email for the specific terms—some airlines have waived change fees for certain routes or during promotional periods. If your flight is significantly delayed or cancelled, you may be entitled to compensation under consumer protection laws.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-2">
        <AccordionTrigger>What happens if I need to cancel my hotel booking?</AccordionTrigger>
        <AccordionContent>
            Cancellation policies depend on the rate you booked. Non-refundable rates are cheaper but typically don't allow cancellations or offer only partial refunds. Flexible or refundable rates usually let you cancel free of charge up to 24–48 hours before check-in. Some hotels and booking platforms offer "free cancellation" as a filter when searching. If you have extenuating circumstances—medical emergency, natural disaster—contact the property directly; many will work with you even when the policy is strict. Consider travel insurance for expensive or non-refundable bookings.
        </AccordionContent>
    </AccordionItem>
</Accordion>

<Accordion>
    <AccordionItem Value="item-1">
        <AccordionTrigger>Paris &amp; Amsterdam (Available)</AccordionTrigger>
        <AccordionContent>
            Our most popular combo: start in Paris for the art, architecture, and cuisine, then take the high-speed train to Amsterdam. The journey takes about 3.5 hours. We recommend at least 4 days in Paris and 3 in Amsterdam. Spring and fall offer the best weather and fewer crowds. Book museum tickets in advance—the Louvre and Van Gogh Museum sell out quickly, especially on weekends.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-2" Disabled="true">
        <AccordionTrigger>Antarctica Expedition (Coming 2026)</AccordionTrigger>
        <AccordionContent>
            This itinerary is not yet available for booking. We're finalizing partnerships with expedition operators and will open reservations in early 2026. Join our waitlist to be notified when dates are released.
        </AccordionContent>
    </AccordionItem>
    <AccordionItem Value="item-3">
        <AccordionTrigger>Tokyo &amp; Kyoto (Available)</AccordionTrigger>
        <AccordionContent>
            Experience the contrast between modern Tokyo and traditional Kyoto. The bullet train between the two cities takes about 2.5 hours. Best visited in spring for cherry blossoms or autumn for fall foliage. We suggest 5 days in Tokyo and 4 in Kyoto. Don't miss the Tsukiji outer market, teamLab Borderless, Fushimi Inari shrine, and a traditional tea ceremony. Consider a Japan Rail Pass if you're also visiting other cities.
        </AccordionContent>
    </AccordionItem>
</Accordion>

<Card>
    <div class="space-y-2">
        <h3 class="text-lg font-semibold">Frequently Asked Questions</h3>
        <Accordion Type="AccordionType.Multiple">
            <AccordionItem Value="item-1">
                <AccordionTrigger>How do I get started with the library?</AccordionTrigger>
                <AccordionContent>
                    Install the package via your preferred method—NuGet, dotnet CLI, or the component installer. Add the necessary service registrations in Program.cs and include the CSS in your layout. The getting started guide walks through a minimal setup in under five minutes. If you're migrating from another UI library, we provide migration notes for common scenarios. Our templates also include pre-configured projects you can use as a starting point.
                </AccordionContent>
            </AccordionItem>
            <AccordionItem Value="item-2">
                <AccordionTrigger>Can I customize the styling to match my brand?</AccordionTrigger>
                <AccordionContent>
                    Yes. All components use Tailwind CSS and expose a Class parameter for additional styling. You can override CSS variables for colors, spacing, and typography to create a consistent theme. The design tokens are documented so you can adjust the look without fighting the framework. For deeper customization, components are built with composition in mind—you can wrap them, extend them, or replace specific parts. Dark mode is supported out of the box via CSS variables.
                </AccordionContent>
            </AccordionItem>
            <AccordionItem Value="item-3">
                <AccordionTrigger>Is the component library accessible?</AccordionTrigger>
                <AccordionContent>
                    Yes. Components adhere to the WAI-ARIA design patterns and use semantic HTML where appropriate. Keyboard navigation is supported for interactive elements, and focus management is handled for modals, dropdowns, and other overlay components. We recommend testing with screen readers and following the accessibility notes in our documentation. If you encounter an accessibility issue, please report it—we treat a11y as a core requirement, not an afterthought.
                </AccordionContent>
            </AccordionItem>
        </Accordion>
    </div>
</Card>