around the list, and it has to be: a container query resolves against an ANCESTOR container, never against the element declaring one. Its w-full is load-bearing too — contain: inline-size computes width without looking at the contents, so as a shrink-to-fit flex item it resolved to zero and the band rendered as two 0px columns. - **Band** (required) — The

: the mono uppercase kicker over the value. - **Value** (required) — The: , set in the heading face at --fs-lead or --fs-sub depending on scale. - **Note** — A second; under the same term — a trend, a qualifier, a second fact. ## Best practices ### Do - Give it two or four figures. The grid is two columns until @3xl and four after, so three leaves a hole in both arrangements and five leaves three holes once the band goes four across. - Use scale="sub" for a band that supports the page rather than being it: --fs-lead is the band-heading step, so a supporting figure set at lead is competing with the page’s own subject. - Key each figure by the fact it counts — id is required rather than optional, because it is the React key and an index puts the next render’s number under the previous label as soon as the list reorders. ### Don’t - Do not put a sentence in note. The value and the note are two; s under one
, so a screen reader reads them as two values of the same term: “Posts: 48, +6 this year” works, a clause does not. - Do not set the column count with a viewport breakpoint through className. The band reads a container query, so a sm:grid-cols-4 written on it is wrong in a 390px sidebar of a 1440px window — which is the arrangement this replaced. - figures={[]} renders null, so a band fed a filtered-empty array leaves no rules behind and no zero state either — if the absence is the news, the call site has to say so. ## Accessibility - A : each cell is a term and its value, which a grid of divs cannot express. ## FigureBand A framed, responsive group of related facts with semantic term/value pairs. ### Props - `figures` (required) — `Figure[]`. - `scale` — `'lead' | 'sub'` default `'lead'`. How large the value is set. `lead` is for a band that is the point of its page — a stats headline, where the numbers ARE the content. `sub` is for a band that supports the page around it, and keeps the ladder honest: a supporting figure must not be set at the same size as the page's own subject. - `label` — `string`. Names the band for assistive tech when it has no visible heading of its own. Also accepts: `Omit, 'children'>`. ## Example — default ```tsx import { FigureBand } from '@misoto22/folio' ``` ## Example — a supporting band ```tsx import { FigureBand, Heading, Text } from '@misoto22/folio' Retrieval rewrite Chunking moved from a fixed window to headings, and the citation panel started reading the same rows the answer did. ``` ## Example — a note is a second value ```tsx import { FigureBand } from '@misoto22/folio' ``` ## Example — in a narrow column ```tsx import { FigureBand } from '@misoto22/folio' ```