Prototyping priority disclosure + fit-to-box for pa-stat--square before touching the framework.
Primary number = P0 (always shown, maxed, never overflows) → symbol P1 → label P2.
All styles/scripts here are sfl- scoped and throwaway.
1 · Playground — drag the bottom-right corner
Resize to any width/height. The label drops, then the symbol, while the number always fits and stays as large as possible. Swap content to confirm it's char-count independent.
What to look for
- Grow the box → tiers appear in priority order:
number → symbol → label → trend → context. - Shrink it → they drop in reverse. The live readout below the tile shows which tiers are currently on.
- Disclosure needs both enough width and height — a wide but short banner won't show the tall-only tiers (trend / context).
- The number always fits and stays maxed, whatever survives around it.
- Swap content → fit is char-count independent.
1b · Real component — pa-stat--square[data-pa-stat-fit]
The actual framework component (theme CSS + pa-stat-fit.js), not the sfl- prototype.
Minimal authored markup — the JS wraps __number + __symbol into the fit group at runtime.
Drag the corner; behaviour should match the playground above.
Authored markup (5 children, flat — JS does the wrapping):
<div class="pa-stat pa-stat--square pa-stat--info" data-pa-stat-fit>
<span class="pa-stat__symbol">$</span>
<span class="pa-stat__number">847K</span>
<div class="pa-stat__label">Monthly Revenue</div>
<div class="pa-stat__change pa-stat__change--positive">▲ 12.5% vs last month</div>
<div class="pa-stat__context">Updated 2 min ago</div>
</div>2 · Fixed-size matrix — eyeball the disclosure tiers
Identical content at decreasing box sizes. Note where label / symbol drop, and that the number is always maxed.
3 · Char-count independence — same box, different content
All 200×96. With JS fit each number fills its box at the max size that fits — regardless of character count.
4 · Why pure cqi can't do it
Both boxes are 160×90 with a pure-CSS clamp(2rem, 42cqi, 20rem) font.
Short content is fine; longer content overflows — the font size knows the box width but not the character count.