A numpad and an on-screen keyboard for touch

Two frontend resources arrived for touch screens: DOM/numpad and DOM/keyboard.

They come from the Phlo POS product layer, where a cashier never has a physical keyboard. That layer had grown three separate numpad implementations, one per screen that needed digits: the tender screen, the quantity prompt and the cash count. Three copies of the same grid, drifting apart in small ways. The engine now has one, and the POS keeps only what is genuinely about a register.

Binding is a data attribute, so there is no JavaScript to write:

<div.pay-pad data-numpad="#amount"></div>
<input#amount type=text inputmode=none>

An empty container gets the standard keys. A container that brings its own data-numpad-key buttons keeps them, so a register can lay out its own tender keys and still get the behavior. Without a selector the pad writes to the first field of its own form. There are two layouts, calculator and phone, and the decimal separator is configurable, because a keypad that types a dot into a comma locale is worse than no keypad at all.

DOM/keyboard is the same idea for text: a full on-screen layout bound to a field, for the moments a register asks for a customer name or a reference.

Engine 1.0.1. See the numpad in the manual.