Surfaces

Collapsible

A single toggle panel, simpler than Accordion when you only need one.

<script>
  import { Collapsible } from "@codeatlasdev/ui";
</script>

<Collapsible title="Details" bind:open>…</Collapsible>

The trigger is a button with aria-expanded. Use Accordion when several related panels should coordinate.

Default (closed)

Code

<script lang="ts">
  import { Collapsible, Stack } from '@codeatlasdev/ui';
</script>

<Stack gap={8} class="stack">
  <Collapsible title="What is a glass surface?">
    <p>A glass surface uses backdrop-filter blur and a translucent tint to create a layered depth effect that reacts to the content behind it.</p>
  </Collapsible>
  <Collapsible title="How do presets work?">
    <p>Presets remap the brand hue token. Switching preset updates every component that reads from <code>--ca-brand-*</code> without any JS.</p>
  </Collapsible>
  <Collapsible title="Is dark mode automatic?">
    <p>Yes. The <code>colorScheme</code> store writes a <code>.dark</code> class to the root element, which flips all dark-mode tokens.</p>
  </Collapsible>
</Stack>

<style>
  :global(.stack) { width: 100%; max-width: 560px; }
  p { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); line-height: 1.6; }
</style>

Open by default

Start expanded and bind `open` to follow the state.

This panel starts open. The user can collapse it.

open = true

Code

<script lang="ts">
  import { Collapsible } from '@codeatlasdev/ui';

  let open = $state(true);
</script>

<div class="wrap">
  <Collapsible title="Expanded on mount" bind:open>
    <p>This panel starts open. The user can collapse it.</p>
  </Collapsible>
  <p class="state">open = {open}</p>
</div>

<style>
  .wrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--ca-space-2); }
  p { margin: 0; font-size: var(--ca-font-size-body2); color: var(--ca-text-secondary); line-height: 1.6; }
  .state { font-family: var(--ca-font-mono); font-size: var(--ca-font-size-caption); }
</style>

Props

Prop	Type	Default	Description
`title`	`string`	–	Trigger label. Required.
`open`	`boolean`	`false`	Expanded state. Bindable.
`disabled`	`boolean`	`false`	Prevents toggling.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Called when the state changes.
`class`	`string`	`''`	Extra class names.
`children`	`Snippet`	`undefined`	Panel content.