Collapsible

<div class="flex w-full max-w-lg flex-col gap-3">
  <Collapsible variant="card" title="What are design tokens?" defaultOpen>
    <p class="text-text-secondary text-sm leading-relaxed">
      Named values (colors, spacing, radii) that form the single source of truth for your
      design system. They bridge the gap between design tools and code.
    </p>
  </Collapsible>
  <Collapsible variant="card" title="Do I need to learn Tailwind?">
    <p class="text-text-secondary text-sm leading-relaxed">
      No. Every component ships with sensible defaults. Tailwind helps when you want to
      override styles via <code class="bg-surface-base rounded px-1.5 py-0.5 text-xs"
        >slotClasses</code
      >, but it's optional.
    </p>
  </Collapsible>
  <Collapsible variant="card" title="Can I use this with SvelteKit?">
    <p class="text-text-secondary text-sm leading-relaxed">
      Yes. The components are SSR-safe and hydrate without layout shift. See the SvelteKit
      adapter docs for setup details.
    </p>
  </Collapsible>
</div>

<div class="flex w-full max-w-lg flex-col gap-4">
  <div class="flex items-center gap-3">
    <Button size="sm" variant="outlined" onclick={() => (controlledOpen = !controlledOpen)}>
      {controlledOpen ? 'Hide filters' : 'Show filters'}
    </Button>
    <Badge size="xs" intent={controlledOpen ? 'success' : 'neutral'} variant="soft">
      {controlledOpen ? 'open' : 'closed'}
    </Badge>
  </div>
  <Collapsible variant="card" bind:open={controlledOpen} title="Advanced filters">
    <p class="text-text-secondary text-sm">
      This panel is controlled via <code class="bg-surface-base rounded px-1.5 py-0.5 text-xs"
        >bind:open</code
      >. Toggle it with the button above or by clicking the trigger.
    </p>
  </Collapsible>
</div>

<div class="w-full max-w-lg">
  <Collapsible variant="card" defaultOpen>
    {#snippet trigger({
      open,
      toggle,
      triggerId,
      contentId
    }: {
      open: boolean;
      toggle: () => void;
      triggerId: string;
      contentId: string;
    })}
      <!-- The custom trigger fills the card's own top edge, so its hover
           fill has to carry the frame's radius — otherwise it squares off
           the rounded corners it sits in (invisible at the 2px default,
           obvious in a theme that rounds containers). Open: only the top
           two, the body continues the fill below. -->
      <button
        id={triggerId}
        type="button"
        onclick={toggle}
        aria-expanded={open}
        aria-controls={contentId}
        class="hover:bg-surface-hover rounded-t-contain focus-visible:ring-primary/50 flex w-full items-center gap-3 px-4 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset"
      >
        <div
          class="bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg"
        >
          <ClipboardListIcon size={16} />
        </div>
        <div class="flex-1">
          <p class="text-text-primary text-sm font-semibold">Release Notes v3.2</p>
          <p class="text-text-tertiary text-xs">3 new features, 2 bug fixes</p>
        </div>
        <Badge size="xs" intent={open ? 'primary' : 'neutral'} variant="soft">
          {open ? 'Expanded' : 'Collapsed'}
        </Badge>
      </button>
    {/snippet}
    <div class="space-y-2 px-4 pb-4">
      <p class="text-text-secondary text-sm">
        <strong>Features:</strong> New Collapsible component, improved Accordion internals, Stepper
        navigation.
      </p>
      <p class="text-text-secondary text-sm">
        <strong>Fixes:</strong> Dialog focus trap on Safari, Tooltip positioning near edges.
      </p>
    </div>
  </Collapsible>
</div>

<div class="w-full max-w-sm">
  <Collapsible
    variant="card"
    defaultOpen
    title="Frosted Glass"
    class="border-white/20 bg-white/10 shadow-[var(--blocks-shadow-lg)] backdrop-blur-xl"
    slotClasses={{
      trigger: 'text-white hover:text-white',
      chevron: 'text-white/60',
      contentInner: 'text-sm text-white/80'
    }}
  >
    Frosted surfaces read best over a photograph or gradient, where the blur lifts the panel
    off the busy background behind it.
  </Collapsible>
</div>