Collapsible

<script lang="ts">
  import { Text } from "kumo-svelte/components/text";
  import * as Collapsible from "kumo-svelte/components/collapsible";
  let open = $state(true);
</script>

<div class="w-full">
  <Collapsible.Root bind:open>
    <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Kumo is Cloudflare's new design system.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Text } from "kumo-svelte/components/text";
  import * as Collapsible from "kumo-svelte/components/collapsible";
  let open = $state(false);
</script>

<div class="w-full">
  <Collapsible.Root bind:open>
    <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Kumo is Cloudflare's new design system.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Text } from "kumo-svelte/components/text";
  import * as Collapsible from "kumo-svelte/components/collapsible";
  let open1 = $state(false);
  let open2 = $state(false);
  let open3 = $state(false);
</script>

<div class="w-full space-y-2">
  <Collapsible.Root bind:open={open1}>
    <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Kumo is Cloudflare's new design system.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>

  <Collapsible.Root bind:open={open2}>
    <Collapsible.DefaultTrigger>How do I use it?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Install the components and import them into your project.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>

  <Collapsible.Root bind:open={open3}>
    <Collapsible.DefaultTrigger>Is it open source?</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>
      <Text>Check the repository for license information.</Text>
    </Collapsible.DefaultPanel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { Text } from "kumo-svelte/components/text";
  import * as Collapsible from "kumo-svelte/components/collapsible";
  let open = $state(false);
</script>

<div class="w-full">
  <Collapsible.Root bind:open>
    <Collapsible.Trigger>
      {#snippet child({ props })}
        <Button {...props} variant="secondary" size="sm">
          {open ? "Hide details" : "Show details"}
        </Button>
      {/snippet}
    </Collapsible.Trigger>
    <Collapsible.Panel class="mt-3 rounded-lg bg-kumo-tint p-4">
      <Text>This panel uses custom styling instead of the default border-left accent.</Text>
    </Collapsible.Panel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
  import { Text } from "kumo-svelte/components/text";
  import * as Collapsible from "kumo-svelte/components/collapsible";
  let open = $state(true);
</script>

<div class="w-full space-y-4">
  <Collapsible.Root bind:open>
    <Collapsible.DefaultTrigger>Edit details</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel forceMount>
      <Text>
        Type something below, then collapse and re-open — your input is preserved because the
        panel stays mounted.
      </Text>
      <Input label="Name" placeholder="Type here…" />
    </Collapsible.DefaultPanel>
  </Collapsible.Root>
</div>

<script lang="ts">
  import { Text } from "kumo-svelte/components/text";
  import * as Collapsible from "kumo-svelte/components/collapsible";
  const items = [
    {
      title: "What is Kumo?",
      content: "Kumo is Cloudflare's new design system built on accessibility primitives and Tailwind CSS.",
    },
    {
      title: "How do I install it?",
      content: "Run `pnpm add kumo-svelte` and import the components you need.",
    },
    {
      title: "Is it accessible?",
      content: "Yes. Kumo builds on primitive components that provide keyboard and ARIA behavior.",
    },
  ];

  let activeIndex = $state<number | null>(0);
</script>

<div class="w-full space-y-2">
  {#each items as item, index}
    <Collapsible.Root
      open={activeIndex === index}
      onOpenChange={(open) => {
        activeIndex = open ? index : null;
      }}
    >
      <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>
      <Collapsible.DefaultPanel>
        <Text>{item.content}</Text>
      </Collapsible.DefaultPanel>
    </Collapsible.Root>
  {/each}
</div>