Align InputGroup focus ring with standalone Input

[pedromenezes1]

InputGroup focus ring didn't match the standalone Input. Wrong color, wrong thickness, and inconsistent across focus modes.

What changed

• Focus ring color: all modes use ring-kumo-focus/50 to match the standalone Input.
• Container mode: 1.5px Tailwind ring replaces the CSS :has(:focus-visible) outline rules that were stacking on top (double indicator).
• Individual/hybrid mode: swaps the border color to border-kumo-focus/50 on focus instead of adding a ring. Uses not-first:-ml-px (negative margin) instead of not-first:border-l-0 so the full border remains paintable on focus, with z-2 to lift the focused element above siblings.
• Buttons inside addons: suppresses the base Button's default focus ring (focus:ring-0) and shows a subtle 1.5px ring on focus-visible for keyboard navigation.

Other

• Removed 18 lines of vanilla CSS outline rules from kumo-binding.css
• Added shape="square" to icon-only InputGroup.Button instances in demos
• Applied Tailwind v4 lint suggestions (mb-0!, has-data-[slot=…], z-1/z-2)

Before	After

---

• Reviews
• bonk has reviewed the change
• automated review not possible because: visual styling change requires human review
• Tests
• Tests included/updated
• Additional testing not necessary because: focus ring styling is visual — unit tests updated for class name assertions, manual verification done across all focus modes

[pkg-pr-new]

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

commit: b3143e0

[github-actions]

Docs Preview

View docs preview

Commit: d12fceb

[github-actions]

Visual Regression Report — 18 changed, 21 unchanged

18 screenshot(s) with visual changes:

Button / Variant: Ghost

179 px (0.18%) changed

Before	After	Diff

Button / Loading State

4 px (0%) changed

Before	After	Diff

Dialog / Dialog Basic

199 px (0.2%) changed

Before	After	Diff

Dialog / Dialog Alert

2,751 px (2.71%) changed

Before	After	Diff

Dialog / Dialog Confirmation

707 px (0.7%) changed

Before	After	Diff

Dialog / Dialog With Combobox

130 px (0.13%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

485 px (0.48%) changed

Before	After	Diff

Select / Select Without Label

183 px (0.18%) changed

Before	After	Diff

Select / Select With Description

1,132 px (0.96%) changed

Before	After	Diff

Select / Select Custom Rendering

414 px (0.41%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

919 px (0.91%) changed

Before	After	Diff

Select / Select Complex

720 px (0.61%) changed

Before	After	Diff

Select / Select Disabled Options

931 px (0.92%) changed

Before	After	Diff

Select / Select Disabled Items

231 px (0.23%) changed

Before	After	Diff

Select / Select Grouped With Disabled

450 px (0.44%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

21 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Dialog / Dialog With Actions
• Dialog / Dialog With Select
• Dialog / Dialog With Dropdown
• Select / Select Sizes
• Select / Select With Error
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Grouped
• Select / Select Long List

---

Generated by Kumo Visual Regression

[pedromenezes1]

/bonk

[ask-bonk]

PR #531 Summary: Align InputGroup focus ring with standalone Input

Author: @pedromenezes1
Status: Open | Branch: fix/input-group-focus-ring → main
Changes: +117/-77 lines across 7 files

---

Overview

This PR fixes the InputGroup focus ring styling to match the standalone Input component. The focus ring had incorrect color, wrong thickness, and inconsistent behavior across focus modes.

Key Changes

Focus Ring Fixes:

• Color: All modes now use ring-kumo-focus/50 to match standalone Input
• Container mode: Replaced CSS :has(:focus-visible) outline rules with a 1.5px Tailwind ring (eliminated double indicator issue)
• Individual/hybrid mode: Now swaps border color to border-kumo-focus/50 on focus instead of adding a ring; uses not-first:-ml-px with z-2 layering for proper border painting
• Buttons in addons: Suppress default Button focus ring (focus:ring-0), show subtle 1.5px ring on focus-visible for keyboard navigation

Additional Cleanup:

• Removed 18 lines of vanilla CSS from kumo-binding.css
• Added shape="square" to icon-only InputGroup.Button instances in demos
• Applied Tailwind v4 lint suggestions (mb-0!, has-data-[slot=…], z-1/z-2)

Visual Regression Results

• 20 screenshots changed — primarily affecting Button, Dialog, and Select components (which use InputGroup internally)
• 19 screenshots unchanged
• Changes are minor pixel differences (0.03%–1.67%) reflecting the focus ring styling adjustments

Checklist Status

• Automated review bypassed (visual styling requires human review)
• Tests updated for class name assertions; manual verification completed across all focus modes

Preview

📦 Install: npm i https://pkg.pr.new/@cloudflare/kumo@531
📚 Docs: https://a1fa5062-kumo-docs.design-engineering.workers.dev

github run