Disclosure

Native details and summary provide the interaction; CSS styles the public anatomy.

Why details and summary?

Native disclosure keeps keyboard interaction and semantics in the platform while Timeless styles the public anatomy.

Can consumers customize the content?

Yes. The panel is author-owned Light DOM, so app CSS can target it without crossing a shadow boundary.

<section aria-label="Disclosure examples">
  <details class="ui-disclosure" open>
    <summary>Why details and summary?</summary>
    <div>
      <p>Native disclosure keeps keyboard interaction and semantics in the platform while Timeless styles the public anatomy.</p>
    </div>
  </details>
  <details class="ui-disclosure">
    <summary>Can consumers customize the content?</summary>
    <div>
      <p>Yes. The panel is author-owned Light DOM, so app CSS can target it without crossing a shadow boundary.</p>
    </div>
  </details>
</section>