Skip to content

Details

A wrapper around <details> that provides root styling and event handling.

Usage
Toggle label Content revealed when open.
Toggle label Content revealed when open. 
<details is="root-details">
  <summary>Toggle label</summary>
  Content revealed when open.
</details>

The skin is the secondary button's: the page ground, the ramp step for the summary text and the same step for the border, one step deeper while the summary is hovered. A disclosure is a button with a panel attached, and a row of them beside a row of buttons has to read as the same control. The whole summary is the target, and shows the pointer.

Sizes

Button's three steps, on the <details> itself: small, medium (the default) and large. Each moves the padding, the summary's font size and weight, and the radius.

Large Content revealed when open.
Medium Content revealed when open.
Small Content revealed when open.
Large Content revealed when open.
Medium Content revealed when open.
Small Content revealed when open. 
<details is="root-details" data-size="large">
  <summary>Large</summary>
  Content revealed when open.
</details>
<details is="root-details">
  <summary>Medium</summary>
  Content revealed when open.
</details>
<details is="root-details" data-size="small">
  <summary>Small</summary>
  Content revealed when open.
</details>

Radius

The radius is published as four corner tokens (--root-details--border-start-start-radius and its three siblings), each defaulting to the size step's radius. That is what lets an accordion square the corners its panels share without fighting the panel's own stylesheet - see the accordion page.

Attributes
Attribute Type Default Description
open boolean false Open state
data-size 'small' | 'medium' | 'large' 'medium' Size step: padding, summary type, radius
aria-label string - Accessible label

Events
Event Detail Description
root-details.toggle { value } Fired on toggle
root-details.focus { value } Fired on focus
root-details.blur { value } Fired on blur

Extends

HTMLDetailsElement - use with <details is="root-details">.