Invoice Line Item Features Block for React

Edit LINES at the top of the file: each has a name, a note on how it is counted, a quantity and a rate in cents (negative for a credit). TAX is the sales tax in percent. The amounts, the subtotal, the tax and the total are all worked out from these in whole cents, so no figure is typed by hand and a rounding difference can't appear.

The seat row has a number input: type a count or use the steppers, from 1 to 500. A value that isn't a number is treated as 12, the starting count. A polite status line announces the new count and the new total for screen readers. Only the seat row is editable; the other quantities come from usage and are plain text.

It's a real table named "Invoice TL-0421 line items", with column headers and a caption under it that says how amounts are billed. The totals sit in a description list under the table, each with its label.

Yes. Each amount, rate and quantity is wrapped in a bdi element, and the total due is set left to right as one unit with its dollar sign, so a right-to-left layout keeps every number in reading order instead of moving a sign or a unit to the wrong side.

The header fades up once when the page loads, and the total's digits roll to a new value when the seats change. Both are CSS: with reduced motion the fade is off and the digits switch at once.

The table drops to two columns: the quantity and rate columns hide, and each row says "820 × $0.10" under its name instead. The seat stepper moves under the name of its row so it stays within reach. Nothing scrolls sideways at 320 pixels.