# Disclosure

> A single expand/collapse section built on the native `<details>` and `<summary>` elements, so the show/hide state, keyboard handling, and find-in-page behavior all come from the platform itself.

```ts
import { Disclosure } from "@sdxc/ui";
```

Renders the section's `<details>` host, revealing
Disclosure.Panel's content while `open`. The `::details-content`
block-size transition is a progressive enhancement over the native toggle.

## Examples

```tsx
<Disclosure>
	<Disclosure.Trigger>
		{t("faq.refunds.question")}
		<ChevronDownIcon data-slot="icon" aria-hidden="true" />
	</Disclosure.Trigger>
	<Disclosure.Panel>
		<p>{t("faq.refunds.answer")}</p>
	</Disclosure.Panel>
</Disclosure>
```

```tsx
<Disclosure open>
	<Disclosure.Trigger>{t("faq.shipping.question")}</Disclosure.Trigger>
	<Disclosure.Panel>
		<p>{t("faq.shipping.answer")}</p>
	</Disclosure.Panel>
</Disclosure>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The section's compound parts: Disclosure.Trigger followed by Disclosure.Panel. |

Also accepts everything in `TagProps<"details">`.


### Disclosure.Header

Renders Disclosure.HeaderProps.children as an accessible heading at the ambient level, nested directly inside Disclosure.Trigger, since `<summary>` must stay `<details>`'s direct child.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The trigger's label text, exposed as a heading for assistive technology. |

Also accepts everything in `TagProps<"h1">`.


### Disclosure.Trigger

Renders Disclosure.TriggerProps.children inside a native `<summary>` with its marker suppressed, so the indicator is a glyph the consumer passes as a child carrying `data-slot="icon"` — which the section turns over while it is open.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The always-visible label, typically plain text or Disclosure.Header. |

Also accepts everything in `TagProps<"summary">`.


### Disclosure.Panel

Renders Disclosure.PanelProps.children in a `<div>` positioned after Disclosure.Trigger, all `<details>` needs to treat it as the collapsible body.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The content revealed while the section is open. |

Also accepts everything in `TagProps<"div">`.


### Disclosure.Group

Renders Disclosure.GroupProps.children as a bordered, rounded list of Disclosure sections sharing one divider between them.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | One or more Disclosure sections to stack into a single bordered list. |

Also accepts everything in `TagProps<"div">`.