Fix InputGroup hover state propagating to first button

[pedromenezes1]

Hovering any button inside InputGroup (most visibly in Pagination.Controls) made the first button also appear hovered. The root cause: InputGroup rendered as a <label>, and the HTML spec implicitly associates a <label> with its first labelable descendant, so browsers propagate :hover from the label to that control.

This renders the root as <div> when InputGroup contains multiple sibling labelable controls (focusMode === "individual", matching the existing hybrid-mode behavior). Container mode (single input + addons) still renders as <label> so click-to-focus is preserved.

Before	After

---

• Reviews
• bonk has reviewed the change
• automated review not possible because: browser-spec hover-propagation bug — verified manually via Chrome DevTools that button.matches(':hover') only returns true for the actually-hovered button after the fix
• Tests
• Tests included/updated
• Automated tests not possible - manual testing has been completed as follows:
• Additional testing not necessary because:

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@444

commit: 45476e2

[github-actions]

Docs Preview

View docs preview

Commit: fecc6fc

[github-actions]

Visual Regression Report — 1 changed, 20 unchanged

1 screenshot(s) with visual changes:

Input Group / Input Group Loading

15 px (0.01%) changed

Before	After	Diff

20 screenshot(s) unchanged

• Input Group / Input Group
• Input Group / Input Group Icons
• Input Group / Input Group Text
• Input Group / Input Group Buttons
• Input Group / Input Group Tooltip Button
• Input Group / Input Group Kbd
• Input Group / Input Group Suffix
• Input Group / Input Group Sizes
• Input Group / Input Group States
• Pagination / Pagination Basic
• Pagination / Pagination Full
• Pagination / Pagination Simple
• Pagination / Pagination Mid Page
• Pagination / Pagination Large Dataset
• Pagination / Pagination Custom Text
• Pagination / Pagination Page Size Selector
• Pagination / Pagination Custom Page Size Options
• Pagination / Pagination Compound Custom Info
• Pagination / Pagination Page Size Right
• Pagination / Pagination I18n

---

Generated by Kumo Visual Regression

[pedromenezes1]

/bonk

[ask-bonk]

The lint/typecheck failures are pre-existing infrastructure issues (missing generated files in the ai/ directory) and are unrelated to this PR.

Review Summary

This PR fixes a subtle but significant browser behavior issue where InputGroup rendered as <label> was causing :hover state to propagate to the first labelable descendant (buttons in Pagination.Controls).

Changes Analysis

input-group.tsx (19 lines changed):

• The fix is elegantly simple: when focusMode === "individual" (multiple sibling labelable controls), render as <div> instead of <label>
• Container mode (single input) still uses <label> to preserve click-to-focus behavior
• The logic aligns with the existing hybrid-mode behavior which already used <div>

Tests (+63 lines across 2 files):

• Comprehensive regression tests added for both InputGroup and Pagination
• Tests verify the container is a <div> (not <label>) in individual/hybrid focus modes
• Tests verify data-focus-mode attribute is set correctly

Visual Regression Report

The visual regression shows only 1 minor change (0.01% pixel diff in "Input Group Loading"), which appears to be a timing/rendering artifact unrelated to this fix.

✅ Approval

This is a well-crafted fix that:

1. Correctly identifies the root cause (HTML spec behavior with <label> implicit association)
2. Applies a surgical fix (only changes container element when necessary)
3. Preserves existing behavior (click-to-focus still works in container mode)
4. Includes regression tests to prevent future regressions
5. Follows the project's code conventions and component patterns

The PR is ready to merge.

github run