Elastic — expansion, not direction, breaks layouts
Two identical 10rem cells. The plain button's longest word is wider than the cell, so it overflows. The elastic button (.bf-elastic) clamps itself between a floor and the readable measure and breaks the word instead. Swap the language and watch the row below reflow — no media query, no JS.
Plain <button>
.bf-elastic button
measuring…
The elastic row
.bf-elastic-row wraps and lets its items shrink below their min-content — the trap that otherwise forces the row as wide as its longest label.
The elastic card
https://eu-central-1.example.internal/deployments/2026-q3/preprod-blue/gateway
Coexistence — the one silent casualty
Layered styles lose to unlayered ones, so a co-loaded reset that sets outline: none on a broad :focus defeats Barefoot's ring on every element at once. Focus the box and inject the reset — the ring vanishes and Verify names the offender. Layer the same one line and the ring comes back.
Focus me, then Tab away and back. The ring is Barefoot's :focus-visible, painted from the base cascade layer.
Verify at rest: no contract violations.
@layer reset, tokens, base, components, utilities, user;
/* ^ imported from components/coexistence.css — `user` is last, so
your @layer user { ... } overrides always win, no !important. */Print — full or cut
A six-column table is wider than the page. data-print="cols-3" cuts it to its first three columns on paper (and only on paper — the full table stays on screen); cells wrap whatever does not fit, so nothing is lost. The bar below is .bf-no-print — it never reaches paper.
@page.
| Service | Environment | Deploys | Lead | Region | Notes |
|---|---|---|---|---|---|
| gateway | production | 12 | Ada | eu-central-1 | Canary at 20% |
| billing | staging | 7 | Grace | us-east-2 | Awaiting review |
| search | preview | 3 | Linus | ap-southeast-1 | Expires in 48h |