# Expandable Card

A task summary that opens into steps, with a ring that fills to a success mark.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/expandable-card
```

## Usage

```tsx
import { ExpandableCard } from '@fetaui/components/expandable-card'

export function Example() {
  return <ExpandableCard title="Launch checklist" total={6} completed={4} steps={steps} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | ReactNode | required |
| total | number | required |
| steps | { id, label, meta }[] | required |
| completed | number | 0 |
| heading, body | ReactNode |  |
| completeHeading, completeBody | ReactNode |  |
| actionLabel | string | Publish release |
| onAction | () => void |  |
| defaultOpen | boolean | false |
| animated | boolean | true |

## When to use

- For a task summary with a few remaining steps.

## When not to use

- For plain detail: use Collapsible.

## Accessibility

- The trigger has aria-expanded and aria-controls.
- The count is announced as it changes.

## Motion

- Opens like Collapsible.
- The arc grows in 600 ms as steps are checked.
- At the end the ring turns into a success mark in 240 ms and the action fades in.
- With reduced motion, the ring jumps.