Disclosure
<details> and <summary>: the browser owns the open/closed state, the keyboard behaviour and the accessible name. No class is required.
The elements
What does the type module decide?
The scale, the roles, the block rhythm on every tag it claims, and the three unconditional WCAG rules. Slate declares the inputs and nothing derived from them.
A second paragraph, so the panel's own block rhythm is visible.
And this one starts open
The rule under the summary and the marker's rotation are the two ways the open state shows: never colour alone.
Why summary takes h6
@erikakers/typography files summary as not yet covered rather than declined: it wants a role's type without a role's flow margins, and every entry in the module's own $elements carries flow. Slate answers it directly, per docs/components.md: a <summary> is exposed to assistive technology as a button and its text is the name of the region it discloses, both of which say structure rather than reading: so it is set at h6, the lowest heading the module derives, taken with $flow: false so no derived margin fights the panel's own padding. A disclosure inside a section is subordinate to that section's own heading, and the bottom of the ladder is what keeps it there no matter which heading it sits under.
Keyboard interaction
- Tab reaches the
<summary>, which the UA exposes as a button. - Enter or Space toggles the open/closed state.
- No script anywhere: the browser owns the state, the focus stays on the summary after toggling, and the marker's rotation plus a hairline under an open summary carry the state redundantly: never colour alone.