Disclosure & Accordion

A Disclosure is one expand/collapse section (header + panel); an Accordion coordinates a group of them (single-open or multi-open). Same primitive-plus-group shape as Radio / FieldGroup. The panel animates via grid-template-rows and stays mounted when closed, so its state is preserved.

Standalone

A single section with bind:open.

Every plan includes unlimited projects, email support, and daily backups. Upgrade any time — changes are prorated automatically.

open: true

import { Disclosure } from '@spaethtech/svelte-ui';

let openA = $state(true);

<Disclosure title="What's included?" bind:open={openA}>
  <p>Every plan includes unlimited projects…</p>
</Disclosure>

Accordion — single-open

Opening one panel closes the others. Bind value to the open key.

Orders ship within 2 business days. Free over $50.

open: shipping

import { Accordion, Disclosure } from '@spaethtech/svelte-ui';

let acc = $state('shipping');

<Accordion bind:value={acc}>
  <Disclosure value="shipping" title="Shipping">…</Disclosure>
  <Disclosure value="returns" title="Returns">…</Disclosure>
  <Disclosure value="warranty" title="Warranty">…</Disclosure>
</Accordion>

Accordion — multiple

With multiple, panels toggle independently and value is a string[].

A quick summary of the feature set.

open: ["overview"]

let accMulti = $state(['overview']);

<Accordion multiple bind:value={accMulti}>
  <Disclosure value="overview" title="Overview">…</Disclosure>
  <Disclosure value="details" title="Details">…</Disclosure>
  <Disclosure value="faq" title="FAQ">…</Disclosure>
</Accordion>

Panel state is preserved

Type into the field, collapse, then reopen — your text is still there. The panel stays mounted (grid-rows animation), unlike a mount/unmount approach that would reset it.

notes: (empty)

<Disclosure title="Notes">
  <Input label="Notes" bind:value={notes} />
</Disclosure>

Sizes & variants

size scales the header; variant tints it. A leading icon snippet is optional.

<Disclosure size="sm" title="Small">…</Disclosure>

<Disclosure size="lg" variant="primary" title="Large + primary">
  {#snippet icon()}<IconCog />{/snippet}
  …
</Disclosure>