fix(focus-states): update cut-off focus states

[najlaskr]

Improve focus ring consistency and clipping behavior across inputs and related controls.

Before

After

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: no access to bonk
• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows: visual regression tests
  • [] Additional testing not necessary because:

[geoquant]

/bonk

[ask-bonk]

Thanks for this comprehensive focus state improvement PR! The changes address real clipping issues and create better visual consistency across components.

Summary of Changes

The PR makes focused improvements to focus ring behavior:

1. Command Palette - Moves focus ring to container with focus-within, removing duplicate input-level styles
2. Select - Uses ring-inset to prevent clipping in rounded/overflow contexts
3. Clipboard Text - Fixes clipping with inset focus rings and proper border-radius inheritance
4. InputGroup - Aligns focus ring color to ring-kumo-focus consistently across container/hybrid modes
5. kumo-binding.css - Updates outline weight to 1px with semantic --color-kumo-focus token
6. DatePicker - Uses --color-kumo-brand for focus ring token

Observations

• ✅ Good use of isolate stacking context in clipboard-text to prevent z-index issues
• ✅ Proper use of rounded-[inherit] for border-radius inheritance
• ✅ Consistent adoption of focus-within pattern for container-level focus indication
• ✅ Tests updated to match new focus ring class changes
• ✅ Changeset accurately describes all modifications

Questions

None - this is a well-scoped visual improvement PR with clear before/after screenshots demonstrating the clipping fixes.

[ask-bonk]

I've completed the review of PR #439. This is a well-scoped visual improvement PR that fixes focus ring clipping issues across multiple components.

Review Summary

Changes reviewed:

1. Command Palette - Focus ring moved to container level with focus-within, eliminating duplicate styles
2. Select - Added ring-inset to prevent focus ring clipping in rounded contexts
3. Clipboard Text - Fixed clipping with proper border-radius inheritance and isolated stacking context
4. InputGroup - Consistent ring-kumo-focus color across all focus modes
5. CSS - Updated outline weight to 1px with semantic --color-kumo-focus token
6. DatePicker - Uses --color-kumo-brand for focus ring (theming consistency)
7. Tests - Updated to reflect the focus ring class changes

Approach: ✅ LGTM - The changes follow Kumo conventions, use semantic tokens correctly, and include proper test updates. The before/after screenshots clearly demonstrate the clipping issues being resolved.

Review submitted: #439 (review)

github run

[pkg-pr-new]

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

commit: aa0f88b

[github-actions]

Docs Preview

View docs preview

Commit: aa0f88b

[github-actions]

Visual Regression Report — 24 changed, 13 unchanged

24 screenshot(s) with visual changes:

Button / Variant: Ghost

166 px (0.16%) changed

Before	After	Diff

Button / Sizes

676 px (0.67%) changed

Before	After	Diff

Button / With Icon

272 px (0.27%) changed

Before	After	Diff

Button / Loading State

209 px (0.21%) changed

Before	After	Diff

Dialog / Dialog Basic

192 px (0.19%) changed

Before	After	Diff

Dialog / Dialog Alert

1,182 px (1.16%) changed

Before	After	Diff

Dialog / Dialog Confirmation

352 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Select

130 px (0.13%) 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

299 px (0.29%) changed

Before	After	Diff

Select / Select Sizes

947 px (0.51%) changed

Before	After	Diff

Select / Select Without Label

183 px (0.18%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select / Select Placeholder

672 px (0.66%) changed

Before	After	Diff

Select / Select With Tooltip

500 px (0.49%) changed

Before	After	Diff

Select / Select Custom Rendering

413 px (0.41%) changed

Before	After	Diff

Select / Select Loading

2,466 px (1.22%) changed

Before	After	Diff

Select / Select Multiple

556 px (0.55%) changed

Before	After	Diff

Select / Select Complex

1,090 px (0.92%) changed

Before	After	Diff

Select / Select Disabled Items

231 px (0.23%) changed

Before	After	Diff

Select / Select Grouped

346 px (0.34%) changed

Before	After	Diff

Select / Select Long List

1,904 px (1.61%) changed

Before	After	Diff

Select (Open)

1,370 px (0.01%) changed

Before	After	Diff

13 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Dialog / Dialog With Actions
• Dialog / Dialog With Dropdown
• Select / Select Disabled Options
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression