Disclosure
A button that shows and hides a region.
<mm-disclosure summary="Advanced settings">…</mm-disclosure>
<mm-accordion single>
<mm-disclosure summary="Connection" heading-level="3">…</mm-disclosure>
<mm-disclosure summary="Schedule" heading-level="3">…</mm-disclosure>
</mm-accordion>
Guidance
A disclosure shows and hides one region of secondary content behind a button: advanced plugin
settings, the raw JSON of a run, a long column description. The button carries a chevron that
turns when it opens (instantly under reduced motion) and states aria-expanded. Nothing is
boxed; inside mm-accordion disclosures are separated by hairlines.
Set heading-level when the disclosure titles a section (always inside an accordion), so the
button sits in a real heading and the content becomes a labelled region.
Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
open | open | boolean | false | Whether the content is shown. |
summary | summary | string | '' | The button text. |
headingLevel | heading-level | number | 0 | Wraps the button in a heading of this level (1 to 6) and makes the content a labelled region. 0 for none. |
disabled | disabled | boolean | false | |
flush | flush | boolean | false | Aligns the content with the chevron rather than the label. |
Methods
| Method | Description |
|---|---|
toggle() | Opens or closes the disclosure and fires mm-toggle, as if the button were pressed. |
Events
| Event | Detail | Description |
|---|---|---|
mm-toggle | CustomEvent<{ open: boolean }> | The disclosure was opened or closed by the person. |
Slots
| Slot | Description |
|---|---|
| Default | The content shown when open. |
summary | The button text, if it needs markup. Otherwise use summary. |
CSS parts
| Part | Description |
|---|---|
button | The native button. |
chevron | The chevron icon. |
content | The region. |
Examples
Every state of mm-disclosure in Storybook, with keyboard and screen reader tests.