Andreas Reinhold / reiniandClaude Opus 5
92d3d761f3
<x-stack> stretches its children across by default and <x-form> is a one-track grid, so a button written directly in either drew as a full-width pill. M3 keeps a button's width "dynamic to fit label" and says not to "stretch buttons into long flat shapes on large windows". A button there now sits at the start edge at its own width; a stack aligned start, centre or end is untouched, and an application's own width still wins (a cap on the button itself was rejected for exactly that: it would have limited an app's inline-size, which CascadeTest guards). Chromium test in both directions, failing without the rules. Decided with the user (plan step 46). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
48 lines
1.7 KiB
CSS
48 lines
1.7 KiB
CSS
/*
|
|
* <x-stack>: its children one under another, in a pane.
|
|
*
|
|
* A flex column, stretched across the stack's width unless `data-md-align` says `start`, `center`
|
|
* or `end` — except a button, which keeps its label's width at the start edge: M3 keeps a button's
|
|
* width "dynamic to fit label" and says not to "stretch buttons into long flat shapes on large
|
|
* windows" (docs/reference/m3/components-actions-communication-containment.md § Buttons). An
|
|
* application's own width or `align-self` on it still wins. The space between the children is `--md-gap` (spacing.css), one of M3's spacing
|
|
* tokens and none by default; M3 groups with proximity, so the gap is the grouping
|
|
* (docs/reference/m3/foundations.md § Layout → Grids & spacing). M3 defines no in-pane arrangement
|
|
* component; this is the neutral one, beside <x-row> and <x-grid>.
|
|
*
|
|
* In `material.layout`; `hide-below`/`hide-from` come from visibility.css.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './spacing.css';
|
|
@import './visibility.css';
|
|
|
|
@layer material.layout {
|
|
:where([data-md-stack]) {
|
|
--md-gap: 0px;
|
|
}
|
|
|
|
[data-md-stack] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--md-gap);
|
|
}
|
|
|
|
[data-md-stack]:is(:not([data-md-align]), [data-md-align='stretch']) > [data-md-button] {
|
|
align-self: start;
|
|
}
|
|
|
|
[data-md-stack][data-md-align='start'] {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
[data-md-stack][data-md-align='center'] {
|
|
align-items: center;
|
|
}
|
|
|
|
[data-md-stack][data-md-align='end'] {
|
|
align-items: flex-end;
|
|
}
|
|
}
|