Andreas Reinhold / reiniandClaude Opus 5
f2a3c4d056
Two gaps found rewriting the Boost skill for 2.0's plain CSS, each
closed the way M3 describes it.
`<x-loading size="96">`: M3 gives the loading indicator a responsive
size, 48dp by default and flexible from 24 to 240dp ("never exceed that
range"), with the container and the active shape in a fixed ratio. The
size had no prop, so an application wrote a width and height of its own;
`size` now takes a whole number of px in that range, written as
`--md-loading-size`, and the SVG keeps the 48:38 ratio as it scales. A
value outside the range is ignored, as `<x-icon>` and `<x-shape>` ignore
theirs, and an application's own width and height still win.
`--md-navigation-rail-value`: M3 Expressive's rail has two values,
collapsed and expanded (Compose's WideNavigationRailValue), and content
in a rail follows it. Without a hook an application copied the rail's
seven conditions — mode, `data-rail`, `data-rail-auto`, open, and the
window band — out of navigation-rail.css. The rail now publishes the
answer from the same branches that narrow it: `expanded` by default,
`collapsed` wherever it is drawn collapsed, so a style query in the
application's CSS switches at the first paint and at the same moment
as the rail's own items. A rail open over a scrim reads `expanded`, and
outside a rail the property is unset. A JS attribute would have missed
the first paint; a width container query would have lagged the collapse
animation.
Style queries on a custom property need Firefox 151, so the browser
floor moves from Firefox 147 to 151 (README, the CI note, UPGRADE's new
2.1.0 section); Chrome 125 and Safari 18.4 are unchanged.
Browser tests pin both in Chrome, Firefox and Safari: the indicator's
drawn box at 96 and 32px, and the rail's value — with a style query
acting on it — at the first paint for fixed modes, across the window
classes and the menu button for an adaptive rail, and open and closed
for a modal one. NavigationRailTest pins the value in each of the five
collapsed branches.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
56 lines
2.1 KiB
CSS
56 lines
2.1 KiB
CSS
/*
|
|
* <x-loading>: M3 Expressive's loading indicator, a shape that morphs through seven Expressive
|
|
* shapes while it turns, for a wait with no known length.
|
|
*
|
|
* The drawing is resources/svg/loading-indicator/, ported from androidx Compose Material 3's
|
|
* LoadingIndicator in bin/loading-indicator.mjs (Apache-2.0): LoadingIndicatorTokens' 38px
|
|
* indicator in a 48px container, which is the size here unless `size` (`--md-loading-size`, 24 to
|
|
* 240px, M3's responsive range) or the caller's CSS sizes it; the SVG scales with its box, so the
|
|
* container and the shape keep their ratio at every size. It is
|
|
* drawn in the text colour, `primary` (ActiveIndicatorColor) unless the caller colours it;
|
|
* `contained` puts it on a `primary-container` circle in `on-primary-container`
|
|
* (ContainedContainerColor, ContainedIndicatorColor), for a spinner over content.
|
|
*
|
|
* The animated drawing is SMIL, so it runs without script. Under `prefers-reduced-motion` the
|
|
* still drawing of the same shape takes its place: the view renders both, and this file shows one.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.components {
|
|
[data-md-loading] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--md-loading-size, 48px);
|
|
block-size: var(--md-loading-size, 48px);
|
|
color: var(--md-sys-color-primary);
|
|
|
|
& > svg {
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
}
|
|
|
|
& > [data-md-loading-still] {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
& > [data-md-loading-animated] {
|
|
display: none;
|
|
}
|
|
|
|
& > [data-md-loading-still] {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-loading][data-md-contained] {
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
}
|