Skip to content

Domma v0.47.0

Choose a tag to compare

@github-actions github-actions released this 27 Sep 21:26
· 288 commits to main since this release

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: true on 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 between eye and eye-off;
    clicking it leaves the caret in the field.

❌ Clear button

  • clear: true adds an × that appears only while the field has a value. It empties the field,
    fires input and change - 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: true puts − and + either side of a number field. They step by step, stop at
    min and max with the button at a limit disabled, fire input and change on each step, and
    repeat while held. The browser's own spinner is hidden. A blueprint field's step now reaches the
    input as its step attribute.

🔢 Character counter

  • counter: true shows "12 / 200" under a text field or textarea, using its maxLength;
    counter: 280 sets the limit itself. It updates as you type, is announced politely to screen
    readers and linked with aria-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 in formConfig for a blueprint field. An extra the
    control cannot take is skipped, and labels renames the buttons.

  • E.inputGroup gains refresh() (after setting a value from code), step(dir) and extras, 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 new form.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-link and --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) and var(--dm-text), so a custom theme built on one follows its own colours.