Disclosure

The disclosure component uses native HTML <details> and <summary> elements to create expandable/collapsible content sections. No JavaScript required for the toggle behaviour.

Core Principles

• Uses native HTML (<details>/<summary>) for built-in accessibility and keyboard support
• Hidden by default, content is revealed on demand
• Chevron indicator sits on the left of the summary text, rotating from right-pointing (closed) to down-pointing (open)
• Disclosure content aligns with the summary text (indented past the chevron)
• Styled with design system tokens (fonts, colors, spacing, borders)
• The .disclosure-content wrapper provides consistent padding and typography
• The .disclosure-table pattern displays key-value pairs (e.g. CSS properties)
• The .copy-btn provides copy-to-clipboard functionality (requires minimal JS)

Basic Usage

<details>
  <summary>Show details</summary>
  <div class="disclosure-content">
    <p>Content revealed when expanded.</p>
  </div>
</details>

Key-Value Table Pattern

Use .disclosure-table with a <dl> to display property-value pairs:

<details>
  <summary>Show details</summary>
  <div class="disclosure-content">
    <dl class="disclosure-table">
      <dt>Font size</dt>
      <dd>var(--font-7xl) <span class="token-tag">48px</span></dd>
      <dt>Line height</dt>
      <dd>var(--line-height-s) <span class="token-tag">1</span></dd>
      <dt>Weight</dt>
      <dd>var(--font-weight-regular) <span class="token-tag">400</span></dd>
    </dl>
  </div>
</details>

The <dt> labels are styled with var(--text-faded) and the <dd> values with var(--text-primary). The .token-tag span shows the resolved value inline.

Copy Button

Add a .copy-btn inside .disclosure-content with a data-copy attribute containing the text to copy. Use 
 for newlines in the data-copy value.

<details>
  <summary>Show details</summary>
  <div class="disclosure-content">
    <dl class="disclosure-table">
      <dt>Font size</dt>
      <dd>var(--font-7xl) <span class="token-tag">48px</span></dd>
      <dt>Line height</dt>
      <dd>var(--line-height-s) <span class="token-tag">1</span></dd>
    </dl>
    <button class="button copy-btn" data-size="small"
      data-copy="font-size: var(--font-7xl);&#10;line-height: var(--line-height-s);"
      aria-label="Copy CSS for Heading 1">
      Copy CSS
    </button>
  </div>
</details>

The button requires a small JS handler:

document.addEventListener('click', function (event) {
  var button = event.target.closest('.copy-btn');
  if (!button) return;
  var text = button.getAttribute('data-copy');
  navigator.clipboard.writeText(text).then(function () {
    button.textContent = 'Copied';
    button.classList.add('is-copied');
    setTimeout(function () {
      button.textContent = 'Copy CSS';
      button.classList.remove('is-copied');
    }, 1500);
  });
});

Accessibility

• Native <details>/<summary> provides keyboard support (Enter/Space to toggle)
• summary is focusable and announced as a disclosure widget by screen readers
• .copy-btn should include an aria-label describing what will be copied
• Focus-visible outlines are styled using var(--input-focus) token

When to use

• Styleguide: Show CSS details beneath typography, color, and component demos
• Documentation: Collapse supplementary information that not all readers need
• Forms: Hide advanced options or additional context

When not to use

• For primary content that all users need to see, use visible layout instead
• For navigation, use proper nav patterns
• For multi-panel accordions with mutual exclusion, this pattern allows multiple open simultaneously

CSS reference

This section documents how the component is built. For usage, see the sections above.

Tokens

Selectors