Meter

import { Meter } from "@arcadia/ui";

<Meter value={52} label="Weekly" valueText="52% left, resets October 11 at 16:37" />

A linear bar of what is left, never of what is used: a full bar is room, an empty one is spent. value is the remaining share, 0 to 100. tone says how it reads: neutral, warning (a yellow fill) at 15% left or under, danger once the window is spent, when the whole track takes a red tint. Pair it with the plan formatters (fmtLeft, fmtReset, leftTone) so the number beside it reads the same on every surface. The fill grows from nothing when it first paints (a list staggers it with --meter-order), and a bar never gets narrower than --meter-min-w.

held draws a second, fainter fill: room that comes back with the bar, such as a spent account's week behind its red 5-hour. state="none" is a blank slot that keeps its width, for a window a neighbour has and this one does not. When a spent window resets, its track fades back from red as the fill grows.

emphasis ranks a bar among its neighbours, a full ink step each: strong for the one the words beside it speak for, normal for the rest, quiet for room that cannot be used now, such as a full 5-hour under a spent week.

rootStyle takes layout and these knobs. tone sets the fill and the track; set them yourself only for a meter whose tones mean something else.

--meter-h

Ref<Space>Default var(--space-1)

The bar's thickness.

--meter-fill

PaintDefault var(--icon-2)

What is left (yellow when low).

--meter-track

PaintDefault var(--fill-3)

The full bar under the fill (a red tint once empty).

--meter-held

PaintDefault color-mix(in srgb, var(--meter-fill) 35%, transparent)

The held layer: the fill at 35%.

--meter-min-w

Ref<Space> | 0Default var(--space-10)

The narrowest the bar gets (40px): a short row gives up something else first.

--meter-order

number

Its place in a staggered list: the first growth waits this many 15ms beats. Inherited.

With a label the bar is a meter with its value and range, and a valueText that says the whole fact: "52% left, resets October 11 at 16:37". Without a label it is decorative, beside text that already says it. Tone is colour only, so the words beside the bar carry low and spent too: a window under one percent reads as less than 1% left, a spent one as Limit reached. held is never spoken on its own, so a valueText names it; a none slot is hidden from assistive technology.