Skip to content
Relements Relements

Disclosure

A styled <details> / <summary>. Toggle, keyboard activation, and focus are all native.

Default

Section titled “Default”
What is Relements?
A small, framework-neutral design system that starts with semantic HTML and adds CSS tokens and progressive enhancement.
Pre-opened panel

This disclosure ships in the open state via the native open attribute.

Live example
<div class="stack">
  <details class="re-disclosure" id="disc-1">
    <summary class="re-disclosure__summary">What is Relements?</summary>
    <div class="re-disclosure__body">
      A small, framework-neutral design system that starts with semantic HTML and adds CSS
      tokens and progressive enhancement.
    </div>
  </details>
  <details class="re-disclosure" id="disc-2" open>
    <summary class="re-disclosure__summary">Pre-opened panel</summary>
    <div class="re-disclosure__body">
      <p>
        This disclosure ships in the open state via the native <code>open</code> attribute.
      </p>
    </div>
  </details>
</div>

Plain variant

Section titled “Plain variant”
More information
No border or surface — just inline disclosure.
Live example
<details class="re-disclosure" data-variant="plain" id="disc-plain">
  <summary class="re-disclosure__summary">More information</summary>
  <div class="re-disclosure__body">No border or surface — just inline disclosure.</div>
</details>

Accessibility

Section titled “Accessibility”
  • Keyboard — entirely native, no JavaScript. Tab moves focus to the <summary>; Enter or Space toggles the panel open or closed. The native open attribute renders a panel pre-opened.
  • Focus — the <summary> shows a visible :focus-visible ring (--re-shadow-focus). The default disclosure marker is replaced with a decorative CSS chevron, but the <summary> stays a real focusable, operable control.
  • Semantics — built on native <details>/<summary>, so assistive tech announces the summary as an expand/collapse control and reflects its open/closed state without any added role or aria-*. The chevron is a generated ::before pseudo-element, so it is never announced.
  • Notes — the only motion is the chevron rotation on [open]; the global reset zeroes its transition under prefers-reduced-motion: reduce. For two or more linked panels where opening one closes the others, see the accordion component. See also the accessibility guide.