Disclosure
Three native details elements that share a name, so opening one closes the others with no script.
- The panel is the ::details-content pseudo-element; interpolate-size: allow-keywords lets its block-size go from 0 to auto, opening over 300 ms and closing over 190 ms on the linear() curve that reproduces the 50 ms layer, while the text fades in over 40 ms.
- The plus loses its vertical bar the moment a row opens.
- Without ::details-content or interpolate-size, a script keeps each item open until a grid row has collapsed from 1fr to 0fr, and handles the exclusive group itself.
- Shelf
- Engineering
- Group
- Platform 06 of 08
- Theme
- Light and dark
- Live pointer
- 6 steps, until you take over