Usage Quota Metric Banner Block for React

At the pace so far: requests used divided by the day of the month gives a daily rate, the limit divided by that rate gives the day the limit is reached, rounded to a whole day and written as an ordinal ("the 21st"). The data is a typed snapshot (day 18 of 30) so the demo never goes stale; swap QUOTA.day for new Date().getDate() and QUOTA.days for the month's length to make it live.

Because the use is past a limit that was set: the 80% alert. The bar stays your theme's foreground up to the alert and takes the warning token from the alert to the use so far, which is the only status colour in the block and appears only on the bar. The text stays in the foreground colour. If the use is under 80% the warning part has no width and the whole bar is foreground; past 95% you can move the colour to the destructive token.

The runway: the part of the quota still unused, drawn as fine diagonal lines in the foreground colour to say it is a projection and not a measurement. The legend under the bar names the two parts, "Used so far" and "Projected until it resets". Both the legend and the sentence say the same in words, so the picture isn't needed to understand it.

The bar, its ticks and the legend are a picture, hidden from assistive technology; the heading and the sentence carry the same facts as text, with each figure in a bdi element so a right-to-left layout keeps its units in order. The bar and its ticks are set left to right in every language, because their positions are percentages of a scale, while the text follows the reading direction.

Yes. The tint is bg-muted/50 on the whole section, so the band runs edge to edge in the page's own tones, light or dark, and the rails and the top rule sit on it. The bar's track is the page background with a hairline border, so it reads on the tint in every preset.