Andreas Reinhold / reiniandClaude Opus 5
a237d33426
Plan step 19, containment.md C-24. `interpolate-size: allow-keywords` was set and nothing transitioned, so the content snapped open. A new resources/css/components/collapse.css transitions `block-size` on `::details-content` over the fast spatial spring, with `content-visibility` `allow-discrete` beside it so the section stays rendered while it closes. The `<details>` carries `data-collapse` for the rule to find. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
31 lines
1.3 KiB
CSS
31 lines
1.3 KiB
CSS
/*
|
|
* `<x-collapse>`'s height, eased open.
|
|
*
|
|
* The native `<details>` opens and closes by itself; what it cannot do on its own is animate, so
|
|
* the component sets `interpolate-size: allow-keywords` (which makes `0` → `auto` an animatable
|
|
* pair) and this transitions `block-size` on `::details-content`, the pseudo-element that holds
|
|
* everything after the `<summary>`. `content-visibility` goes with it, `allow-discrete`, so the
|
|
* content stays rendered while it closes rather than vanishing on the first frame.
|
|
*
|
|
* The fast spatial spring, as the chevron beside it: M3's spatial track is for anything that
|
|
* changes size or position. Under reduced motion the duration token is zero
|
|
* (resources/css/tokens/motion.css), so the section snaps open with nothing else to do.
|
|
*
|
|
* Not an M3 component — M3 has expandable list items and menu expansion, no standalone disclosure
|
|
* — so the geometry is the library's and only the motion tokens are M3's.
|
|
*/
|
|
|
|
@layer components {
|
|
[data-collapse]::details-content {
|
|
block-size: 0;
|
|
overflow: hidden;
|
|
transition:
|
|
block-size var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),
|
|
content-visibility var(--md-sys-motion-spatial-fast-duration) allow-discrete;
|
|
}
|
|
|
|
[data-collapse][open]::details-content {
|
|
block-size: auto;
|
|
}
|
|
}
|