Repository navigation
Domma v0.47.0
v0.47.0 - Fields That Help (2026-09-27)
Four interactive extras for input groups - a show / hide password button, a clear button, a
number stepper and a character counter, joined to the field in the same style as the addons from
0.46.0. They are real buttons, clickable and in the tab order, and take the same keys in a blueprint's
formConfig and in E.inputGroup(): reveal, clear, stepper and counter.
👁️ Show / hide password
reveal: trueon a password field adds an eye button that switches it between hidden and plain
text. It is a toggle button (aria-pressed) and the icon swaps betweeneyeandeye-off;
clicking it leaves the caret in the field.
❌ Clear button
clear: trueadds an × that appears only while the field has a value. It empties the field,
firesinputandchange- so a Forma model and your own listeners see the change - and puts the
focus back in the field. It works beside an icon prefix, and the field's corner stays rounded
while the button is hidden.
➕ Number stepper
stepper: trueputs − and + either side of a number field. They step bystep, stop at
minandmaxwith the button at a limit disabled, fireinputandchangeon each step, and
repeat while held. The browser's own spinner is hidden. A blueprint field'sstepnow reaches the
input as itsstepattribute.
🔢 Character counter
counter: trueshows "12 / 200" under a text field or textarea, using itsmaxLength;
counter: 280sets the limit itself. It updates as you type, is announced politely to screen
readers and linked witharia-describedby, and turns amber from 90% of the limit and red past it.
🔗 One API, two ways in
-
E.inputGroup('#pw', {reveal: true}),{clear: true},{stepper: true},{counter: 200}on an
input already on the page; the same keys informConfigfor a blueprint field. An extra the
control cannot take is skipped, andlabelsrenames the buttons. -
E.inputGroupgainsrefresh()(after setting a value from code),step(dir)andextras, and
update()adds or removes extras. Binding only extras to a group Forma rendered leaves its addons
alone. -
destroy()removes every extra and listener; Forma binds the extras after render and tears them
down on a re-render or the newform.destroy().
🔗 Readable links on 25 themes
- Where a theme's primary colour is too pale to read as text - lemon-light was 1.63:1, silver-light
2.03:1, sunset-light 2.07:1 - the theme now sets--dm-linkand--dm-link-hover: the primary
mixed with the theme's text colour, by the least amount that reads at 5:1 or better on the page,
surfaces and cards. Themes whose primary already reads are unchanged. The mixes use
var(--dm-primary)andvar(--dm-text), so a custom theme built on one follows its own colours.