Accordion

<script>
  import Accordion from '$lib/components/Accordion.svelte';

  let openItem = $state('item1');
</script>

<!-- Single item open (default) -->
<Accordion
  bind:value={openItem}
  items={[
    { value: 'item1', label: 'What is SvelteBits?' },
    { value: 'item2', label: 'How do I install components?' },
    { value: 'item3', label: 'Can I customize the styles?' }
  ]}
  label="FAQ"
>
  <svelte:fragment slot="item1">
    <p>SvelteBits is a collection of copy-paste Svelte components with zero runtime dependencies.</p>
  </svelte:fragment>

  <svelte:fragment slot="item2">
    <p>Simply copy the component file into your project's src/lib/components/ directory.</p>
  </svelte:fragment>

  <svelte:fragment slot="item3">
    <p>Yes! All components use Tailwind CSS and can be easily customized.</p>
  </svelte:fragment>
</Accordion>

<!-- Multiple items open -->
<Accordion
  multiple
  defaultValue={['features', 'pricing']}
  items={[
    { value: 'features', label: 'Features' },
    { value: 'pricing', label: 'Pricing' },
    { value: 'support', label: 'Support' }
  ]}
  variant="bordered"
>
  <svelte:fragment slot="features">
    <p>Get access to all components with keyboard navigation and accessibility built-in.</p>
  </svelte:fragment>

  <svelte:fragment slot="pricing">
    <p>Free and open source. No hidden costs.</p>
  </svelte:fragment>

  <svelte:fragment slot="support">
    <p>Community support available on GitHub.</p>
  </svelte:fragment>
</Accordion>

<!-- Separated variant with disabled item -->
<Accordion
  variant="separated"
  items={[
    { value: 'intro', label: 'Introduction' },
    { value: 'advanced', label: 'Advanced Topics', disabled: true },
    { value: 'examples', label: 'Examples' }
  ]}
>
  <svelte:fragment slot="intro">
    <p>Learn the basics of using accordion components.</p>
  </svelte:fragment>

  <svelte:fragment slot="examples">
    <p>View practical examples and use cases.</p>
  </svelte:fragment>
</Accordion>