# Disclosure

> Secciones plegables sin JavaScript: `<details>` y `<summary>` del navegador con las filas y el chevron del `Accordion`. Server Component.

```tsx
import { Disclosure, DisclosureContent, DisclosureGroup, DisclosureTrigger } from "sebs7n-ui/disclosure"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### Preguntas frecuentes

Sin JavaScript: `<details>` y `<summary>` con las filas del `Accordion`. Con el mismo `name`, abrir una cierra la otra.

```tsx
import { Disclosure, DisclosureContent, DisclosureGroup, DisclosureTrigger } from "sebs7n-ui/disclosure"

function Faq() {
  return (
    <DisclosureGroup className="max-w-lg">
      {FAQ.map((item) => (
        <Disclosure key={item.q} name="billing-faq">
          <DisclosureTrigger>{item.q}</DisclosureTrigger>
          <DisclosureContent>{item.a}</DisclosureContent>
        </Disclosure>
      ))}
    </DisclosureGroup>
  )
}
```

### Filtro plegado

`variant="inline"`: el disparador en línea, 14 y gris, arriba de una lista. Las etiquetas están en el HTML aunque esté cerrado.

```tsx
import { Disclosure, DisclosureContent, DisclosureTrigger } from "sebs7n-ui/disclosure"
import { Tag } from "sebs7n-ui"

function InlineFilter() {
  return (
    <Disclosure variant="inline">
      <DisclosureTrigger>
        Etiquetas <span className="tabular-nums">({TAGS.length})</span>
      </DisclosureTrigger>
      <DisclosureContent className="flex flex-wrap gap-1.5">
        {TAGS.map((tag) => (
          <Tag key={tag}>{tag}</Tag>
        ))}
      </DisclosureContent>
    </Disclosure>
  )
}
```

## Props

### Disclosure

Hereda las props de `<details>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `defaultOpen` | `boolean` | — | Abierto al cargar. El navegador lo abre y lo cierra después. |
| `onOpenChange` | `(open: boolean) => void` | — | Avisa el estado nuevo (el evento `toggle` del `<details>`). Con `open`, si la app no lo cambia, la sección vuelve a como dice `open`. Solo desde un Client Component. |
| `onToggle` | `ToggleEventHandler<T>` | — | El evento `toggle` nativo del `<details>`: corre antes que `onOpenChange`. |
| `open` | `boolean` | — | Abierto, controlado: va con `onOpenChange` (en un Client Component). Sin `onOpenChange` es solo el estado inicial, como `defaultOpen`. |
| `variant` | `"inline" \| "row"` | `"row"` | `row` (el default): una fila de 44 con separador, como el `Accordion`. `inline`: el disparador en línea, 14 y gris, sin separadores, para un filtro plegado arriba de una lista. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |
| `name` | `string` | — | **Heredada de Base UI.** Mismo `name` en varios: abrir uno cierra los otros (lo hace el navegador). |

### DisclosureContent

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### DisclosureGroup

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

### DisclosureTrigger

Hereda las props de `<summary>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `chevron` | `boolean` | `true` | Saca el chevron, para poner otro indicador. |
| `className` | `string` | — | Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana. |

## Teclado

| Tecla | Qué hace |
|---|---|
| Tab | Pasa de un título a otro. |
| Enter · Espacio | Abren y cierran la sección (lo hace el navegador). |

## Accesibilidad

- Es el `<details>` nativo: el navegador lo hace enfocable, lo abre con Enter y Espacio y anuncia si está expandido o colapsado. El chevron es decorativo.
- El contenido está en el HTML aunque esté cerrado: lo encuentra Cmd+F (Chrome abre la sección) y lo lee un buscador.
- Con movimiento reducido el chevron no gira con recorrido.

## Reglas de uso

- Para una página que tiene que andar sin JS (preguntas frecuentes, un filtro plegado en un blog). En una app, `Accordion`: anima el alto y recorre las secciones con flechas.
- Varios con el mismo `name` se excluyen (abrir uno cierra el otro), como el `Accordion` por defecto; sin `name`, cada uno por su cuenta.
- `variant="inline"` para un disparador en línea (14, gris) arriba de una lista, sin separadores. `defaultOpen` lo abre al cargar (un filtro que ya viene en la URL).
- No lleva `"use client"`: las partes leen la variante del `<details>` con `group-data-*`, sin contexto. Solo por subpath (`sebs7n-ui/disclosure`).

## Relacionados

[accordion](/docs/components/accordion.md) · [collapsible](/docs/components/collapsible.md)