Disclosure

A collapsible section in a side panel — a label, a count and a body that hides. The browser holds the state, not React.

When to use it

A side panel has more blocks than fit its height and the reader picks the one they care about — the conversation timeline, documents, files, notes, labels.
The block can be counted and the count is worth showing while collapsed. count is then what tells the reader whether opening it pays off.
The sections belong together such that at most one is open — that is IngotDisclosureGroup.

It is a screen section with a heading. That is IngotSection: it sets an <h2>/<h3> and holds the page outline. This section's label is NOT a heading and must not pass for one.
The content matters and collapsing hides it. A collapsed section says “you do not need to see this yet” — for a warning or an error that is the wrong thing to say.
Views of the same place are being switched. Those are tabs, IngotTabs: tabs always have exactly one view selected, collapsible sections can be all open or all closed.

title: ReactNode — The block's label — already translated. Set in mono uppercase, because it is not a page heading.
count: number — How much is inside. Only where it can be counted — a collapsed section with a count says what waits in it.
defaultOpen: boolean — Expanded on first render. Defaults to false.
children: ReactNode — The section body.
className: string — A pass-through class — the panel sets margins and width.
testId: string — An anchor for tests — on the section.