Form control sizing, corrected typings, and a dozen fixes

August 15, 2026 · Release

This release changes how the form controls look, corrects the generated framework typings, and fixes a dozen defects. Three items change existing behaviour — read Things that change before upgrading.

Things that change

Form controls are a different size. nana-input, nana-textarea, nana-select and nana-combobox now share one scale. At the default md size a field is 44px tall (was 42px), body text is 14px (was 16px), and the corner radius is 8px (was 6px). Layouts that hard-coded the old dimensions will shift.

	xs	sm	md	lg
Field height	28px	36px	44px	52px
Text	12px	13px	14px	16px

Every dimension is overridable, so you can pin the old rhythm if you need to:

nana-input { --nana-input-height: 42px; --nana-input-radius: 6px; }

spellcheck="false" now actually disables spellchecking on nana-textarea. It previously enabled it — the attribute was read as a boolean, so any value at all turned it on. If you wrote spellcheck="false" and relied on the old behaviour, remove the attribute.

Group components emit one event, not two. nana-radio-group and nana-checkbox-group previously let the child control’s nana-change escape alongside the group’s own, so a listener on the group fired twice per click with two different detail shapes. If you added a de-duplication guard, you can remove it.

New

nana-input accepts the numeric and keyboard attributes. min, max, step, pattern and inputmode now reach the underlying field. This also makes rangeUnderflow, rangeOverflow, stepMismatch and patternMismatch available through constraint validation — previously unreachable.

Show code Copy

Slotted icons get a reserved zone. A prefix or suffix icon sits in a fixed 20px zone — 12px from the border, 8px from the text — so the text starts in the same place regardless of the icon’s own width, and icons no longer sit flush against the border or the text.

Show code Copy

Tune it per instance or globally with --nana-input-affix-inset, --nana-input-affix-gap, --nana-input-affix-zone and --nana-input-affix-icon-size.

nana-textarea’s max-height works. Auto-grow stops at the given height and the field scrolls, instead of growing without limit.

The tab indicator is adjustable through --nana-tab-group-indicator-size.

Typings

The generated typings for React, Vue, Svelte and JSX were wrong for every multi-word attribute — helpertext instead of helper-text, stickyheader instead of sticky-header, and so on for all 65 kebab-case attributes. They are now correct, and both forms are typed: the attribute (sticky-header) and the property (stickyHeader), since JSX writes one and React 19 sets the other.

If you maintain hand-written JSX shims to work around this, you can drop them in favour of @nana-tec/ui-components/jsx.

Two components also gained the React wrappers they were missing: NanaSelect and NanaTextarea from @nana-tec/ui-components/react.

Editors read the same data, so attribute autocomplete now works for <nana-*> tags.

Fixed

• <nana-format-date> and <nana-relative-time> rendered nothing when date was a millisecond timestamp. Both now accept epoch values.
• nana-combobox never showed its “No results found” state.
• A disabled nana-select opened on ↓, ↑, Enter and Space.
• Slotted prefix/suffix spacing was silently removed by CSS resets — most visibly Tailwind’s Preflight, which every consuming app runs. Icons appeared flush against the border and the text.
• nana-icon compressed below its declared size inside a tight flex row. If you added flex-shrink: 0 or a shrink-0 class at call sites, it is no longer needed.
• The nana-tab count badge was unreadable in dark mode (1.94:1 contrast).
• The tab indicator was a half-pixel bar that animated in from zero width on every mount and floated above the divider rather than sitting on it.
• Duplicate registration of a component — from two copies of the package — failed silently. It now warns, naming the likely cause.

Accessibility

The focus ring failed WCAG SC 1.4.11 in both themes — 2.16:1 on light, 1.14:1 on dark, where it was effectively invisible. It now clears the 3:1 requirement on both: 3.83:1 and 5.16:1. Muted and subtle text moved from 2.52:1 to 4.74:1.

If you set --nana-focus-ring yourself, check it against the same threshold.

Documentation

Every component page now generates its API reference from the package itself, so properties, events, slots, CSS parts and custom properties stay in step with the code — with real descriptions in place of the empty column the tables used to carry.

Upgrading

Nothing requires a code change unless you are in one of the three cases under Things that change. The quickest check is a visual pass over dense forms, where the 42px → 44px field height and the type change are most noticeable.