COMPONENTS

Disclosures and overlays

Native HTML supplies disclosure and popover interactions. CSS styles their surfaces without adding application behavior.

Usage

Markup: details/summary, dialog, [popover]

Behaviour: Dialog styling does not itself implement a modal workflow.

  • Plain details and exclusive groups share the accordion content animation. Motion inherits from data-motion: none opens immediately, subtle expands smoothly, and expressive adds a gentle fade. The native summary marker remains unchanged; an accordion wrapper adds its rotating chevron and group layout.
  • Content transitions require ::details-content, interpolate-size and discrete transitions. Unsupported browsers retain instant native disclosure; reduced motion, forced colours and print disable transitions. Complete and scoped builds include these rules; modular consumers load reva.accordions.css after tokens and base.

Component API and styling module · Inherited appearance settings

Native disclosure

summary toggles its details. Add open if it should start expanded.

What is included?

Native HTML foundations and optional component styles.

HTMLSelect text to copy
<details>
  <summary>What is included?</summary>
  <p>Native HTML foundations and optional component styles.</p>
</details>

Exclusive disclosure groups

Matching name values allow one disclosure in that group to remain open. Give separate instances unique group names.

Do I need JavaScript?

These disclosures work with native HTML.

Can I customise the styles?

Use shared attributes and ordinary CSS.

HTMLSelect text to copy
<details name="demo-faq">
  <summary>Do I need JavaScript?</summary>
  <p>These disclosures work with native HTML.</p>
</details>
<details name="demo-faq">
  <summary>Can I customise the styles?</summary>
  <p>Use shared attributes and ordinary CSS.</p>
</details>

Native popover

popovertarget opens this popover without JavaScript in supporting browsers. Native auto popovers support light dismissal.

Helpful information

This is a native popover surface.

HTMLSelect text to copy
<button type="button" popovertarget="demo-popover">Show information</button>
<div id="demo-popover" popover>
  <h3>Helpful information</h3>
  <p>This is a native popover surface.</p>
  <button type="button" popovertarget="demo-popover" popovertargetaction="hide">Close</button>
</div>

Dialog markup

open displays a non-modal dialog. This static markup does not implement modal opening or focus management; those require supported native invoker commands or a separate script. A form with method="dialog" can close an open dialog.

HTMLSelect text to copy
<dialog open aria-labelledby="demo-dialog-title">
  <h3 id="demo-dialog-title">Review your changes</h3>
  <p>This example describes a non-modal dialog.</p>
  <form method="dialog"><button>Close</button></form>
</dialog>