Andreas Reinhold / reiniandClaude Sonnet 5
76abdd6242
Plan step 36 (containment group): <x-collapse>'s Tailwind-era resources/css/components/collapse.css (the height animation, C-24) becomes the plain stylesheet, keyed on data-md-collapse and data-md-variant; the summary renders the shared md-state-layer and md-focus-ring classes instead of copying their rules. Leaves tailwind.css for the Containment block of components.css. Icon-to-title and title-to-chevron gaps stay 12px (not an M3 number; collapse isn't an M3 component), written as the average of the two adjacent spacing steps since the scale has no exact token for it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
100 lines
3.9 KiB
CSS
100 lines
3.9 KiB
CSS
/*
|
|
* <x-collapse>: not an M3 component — M3 has expandable list items and menu expansion but no
|
|
* standalone disclosure — built on the native `<details>` so it opens without script, keeps its
|
|
* state through a Livewire morph, and is announced as a disclosure by the browser. Judged against
|
|
* foundations rather than any M3 component spec (docs/audits/m3-alignment/containment.md, C-24).
|
|
*
|
|
* `interpolate-size: allow-keywords` makes `<details>`'s `0 -> auto` block-size an animatable pair,
|
|
* so `::details-content` (the pseudo-element that holds everything after the summary) can transition
|
|
* `block-size` on the fast spatial spring, the same one that turns the chevron; `content-visibility`
|
|
* goes with it, `allow-discrete`, so the content stays rendered while it closes rather than
|
|
* vanishing on the first frame. Under reduced motion the duration token is zero
|
|
* (tokens/motion.css), so the section snaps open with nothing else to do.
|
|
*
|
|
* `data-md-variant="filled"` is a surface-container tile with a large corner; the summary inherits
|
|
* it (`border-radius: inherit`) so the shared `md-state-layer`'s own `::before`, which also
|
|
* inherits, draws inside the same shape. `md-state-layer` and `md-focus-ring`
|
|
* (foundation/interaction.css) sit on the summary; this file only refines their target — the
|
|
* 48px summary height, the icon and chevron colour — never their opacities or ring.
|
|
*
|
|
* Icon-to-title and title-to-chevron gaps are 12px, midway between two spacing steps
|
|
* (`space100` 8px, `space200` 16px); written as their average rather than a bare literal so the
|
|
* value still comes from the scale.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './icon.css';
|
|
|
|
@layer material.components {
|
|
[data-md-collapse] {
|
|
interpolate-size: allow-keywords;
|
|
}
|
|
|
|
[data-md-collapse][data-md-variant='filled'] {
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
}
|
|
|
|
[data-md-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-md-collapse][open]::details-content {
|
|
block-size: auto;
|
|
}
|
|
|
|
[data-md-collapse-summary] {
|
|
display: flex;
|
|
min-block-size: var(--md-sys-measurement-space600);
|
|
align-items: center;
|
|
gap: calc((var(--md-sys-measurement-space100) + var(--md-sys-measurement-space200)) / 2);
|
|
border-radius: inherit;
|
|
cursor: pointer;
|
|
list-style-type: none;
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-collapse][data-md-variant='filled'] [data-md-collapse-summary] {
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-collapse-icon] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-collapse-title] {
|
|
min-width: 0;
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
[data-md-collapse-chevron] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-collapse][open] [data-md-collapse-chevron] {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
[data-md-collapse-body] {
|
|
padding-block: var(--md-sys-measurement-space50) var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-collapse][data-md-variant='filled'] [data-md-collapse-body] {
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
}
|