[DerekAgility]

Makes single-line form controls line up with the default Button, and makes focus thin and consistent. This is a visual change to every consumer form: inputs get 2px shorter and focus styles change. Version bumped to 2.6.0.

Height: every single-line control is now 36px (h-9)

Inputs had no fixed height. py-2 + leading-5 + a 1px border made them 38px, next to the h-9 (36px) Button. Their height also depended on @tailwindcss/forms and stylesheet order: 22–24px without forms, 42px when a consumer's forms styles load after plenum's. Heights below were measured in headless Chrome in all three setups.

Control	Before	After
InputField / TextInput (incl. date, datetime-local)	38px	36px
FormInputWithAddons, AnimatedLabelInput, AnimatedFormInputWithAddons	38px	36px
NestedInputButton (add-on segment)	38px	36px
TextInputSelect input + native <select>	38px	36px
Select (height set on the bordered wrapper)	38px	36px
Combobox	38px (24 without forms)	36px
DropdownWithMultiSelect trigger	38px	36px

The floating labels in the animated inputs moved from top-[9px] to top-[8px] to stay centred.

Focus

• Text inputs and select triggers: a single 1px violet-700 border, for keyboard and mouse. InputField already had focus:ring-0, but it ties with the forms plugin's focus rule on specificity, so it lost when the consumer's forms CSS loaded later (violet border plus a 1px blue ring). It now uses focus:!ring-0 focus:outline-none, so it looks right with or without forms, in any load order. Select's deliberate 2px (focus-within:ring-1) is now the same 1px border.
• Error and readonly states keep their red/gray border on focus. TextInput and TextInputSelect now set aria-invalid when isError is set.
• Button, both halves of ButtonDropdown, Capsule, ToggleSwitch, Checkbox, Radio: the 2px purple ring now shows on focus-visible only. It still shows for keyboard focus (WCAG 2.4.7) but no longer on mouse click. NestedInputButton and the multi-select trigger show the violet border for keyboard focus.
• Also removes malformed <focus-visible:!></focus-visible:!>… class strings in Button asLink and Capsule.

Intentionally unchanged

• TextArea / AnimatedLabelTextArea: out of scope. They are now the only controls with a 2px focus left.
• Button sizes.
• Badge rings and the generic Dropdown trigger: not form controls.

Testing

• New story: Design System / molecules / inputs / Form Control States. It shows default, error and disabled states, keyboard and mouse focus (pick the control in Controls), and an input next to a default Button in one row.
• New InputField.test.tsx and FormControlConsistency.test.tsx. They check the height and focus classes across all the controls, and fail against the previous code (31 of 38).
• yarn test: 101 passed. tsc --noEmit: clean. yarn build: clean.

After release

The Manager App can remove its local overrides: h-9 in LinkedContentLink.tsx and focus:ring-0 in SearchListBox.tsx.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
plenum-ui	Ready	Preview	Sep 28, 2026 2:47pm UTC