Single Stat Metric Banner Block for React

Edit SEATS at the top of the file: used and limit are numbers, and the percentage in the ring (SHARE) is worked out from them, so it always agrees. The weekly change and the limit as text are plain strings. The big figure is a Sliding Number: pass it a new value (a live count, a poll) and the digits that changed roll to the new number.

It waits at zero until the banner is a quarter in view, then rolls to its value once. With reduced motion the digits change in place with no roll. The digits are hidden from assistive technology and replaced with the number as plain text ("12,847"), so a screen reader reads the figure at once, never the roll.

No. It is a picture of the same number, so it is hidden from assistive technology; the label, the figure and "of 15,000 seats" are plain text and say the same thing. The percentage in its middle sits in a bdi so a right-to-left layout keeps the sign in order.

Nothing changes colour here: the ring stays your theme's foreground. When the number reaches the limit, swap the ring's stroke for the warning or destructive token (**:data-[slot=circular-progress-range]:stroke-warning) and say it in the text; the colour should only mark a limit that was really reached.

Below md the block is a column: the ring and the figure in one row, then the change and the link under it, start-aligned. At 320 pixels the ring shrinks a little and the text wraps; nothing scrolls sideways.