Andreas Reinhold / reiniandClaude Opus 5
4cc905b144
Plan step 36 (actions). <x-stat> renders data-md-stat with data-md-stat-header/-value/-description/-extra; no class list. stat.css draws the surface-container panel, the label-large header, the value as an emphasized-headline-md hero with tabular figures, and the body-small description. StatTest is rewritten on the hooks and ComponentStylesheet. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
51 lines
1.9 KiB
CSS
51 lines
1.9 KiB
CSS
/*
|
|
* <x-stat>: a figure and what it counts — not an M3 component; drawn in M3's terms, a panel that
|
|
* separates from the page in surface-container, a label-large title beside its icon, the value as
|
|
* an emphasized-headline-md hero with tabular figures (so the panel never reflows as it counts),
|
|
* and a body-small description. resources/js/figure.js counts the value up on first appearance
|
|
* and on every change after, and rests under reduced motion.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './icon.css';
|
|
|
|
@layer material.components {
|
|
[data-md-stat] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space50);
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
padding: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-stat-header] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space100);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-stat-value] {
|
|
font: var(--md-sys-typescale-emphasized-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
[data-md-stat-description] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-stat-extra] {
|
|
padding-top: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|