# Progressive disclosure

A button that shows and hides a panel of secondary content, such as advanced options. Keeps the default view short.

```tsx
// demo.tsx
import {Button, ProgressiveDisclosure, Text} from '@earendil-works/elanor-react';

export default function ProgressiveDisclosureDemo() {
  return (
    <ProgressiveDisclosure.Root>
      <ProgressiveDisclosure.Trigger render={<Button hierarchy="secondary" />}>
        Show billing details
      </ProgressiveDisclosure.Trigger>
      <ProgressiveDisclosure.Panel>
        <Text>Invoices are sent on the first day of each month to the billing contact.</Text>
      </ProgressiveDisclosure.Panel>
    </ProgressiveDisclosure.Root>
  );
}
```

## Usage

```tsx
import {ProgressiveDisclosure} from '@earendil-works/elanor-react';

<ProgressiveDisclosure.Root>
  <ProgressiveDisclosure.Trigger />
  <ProgressiveDisclosure.Panel />
</ProgressiveDisclosure.Root>;
```

`defaultOpen` starts the panel open; `open` and `onOpenChange` control it.

## Keep content mounted

A closed panel unmounts its content, so unsaved input is lost. `keepMounted` keeps it: edit the field, close the panel, and reopen it.

```tsx
// keep-mounted.tsx
import {Button, Field, Input, ProgressiveDisclosure} from '@earendil-works/elanor-react';

export default function ProgressiveDisclosureKeepMounted() {
  return (
    <ProgressiveDisclosure.Root defaultOpen>
      <ProgressiveDisclosure.Trigger render={<Button hierarchy="secondary" />}>
        Advanced options
      </ProgressiveDisclosure.Trigger>
      <ProgressiveDisclosure.Panel keepMounted>
        <Field.Root name="deployment-region">
          <Field.Label>Deployment region</Field.Label>
          <Input defaultValue="eu-central-1" />
        </Field.Root>
      </ProgressiveDisclosure.Panel>
    </ProgressiveDisclosure.Root>
  );
}
```

## API

### `ProgressiveDisclosure.Root`

Accepts Base UI [`Collapsible.Root`](https://base-ui.com/react/components/collapsible.md) props.

### `ProgressiveDisclosure.Trigger`

Accepts Base UI [`Collapsible.Trigger`](https://base-ui.com/react/components/collapsible.md) props.

### `ProgressiveDisclosure.Panel`

Accepts Base UI [`Collapsible.Panel`](https://base-ui.com/react/components/collapsible.md) props.