fix(badge): match link focus ring shape

[mattrothenberg]

Summary

• mark Badge roots for reliable component-aware styling
• give Links with a direct Badge child the same pill radius as the Badge
• add regression coverage and a patch changeset

Before

After

Validation

• pnpm --filter @cloudflare/kumo test

• pnpm --filter @cloudflare/kumo lint

• pnpm --filter @cloudflare/kumo typecheck

• pnpm --filter @cloudflare/kumo build

• git diff --check

• Reviews

  • bonk has reviewed the change
  • automated review not possible because: this PR was created through a local agent workflow without review integration

• 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@811

commit: 6efc6b7

[ask-bonk]

LGTM!

Review notes

• Confirmed the review target is pull request fix(badge): match link focus ring shape #811. I’m inspecting the PR diff, existing review feedback, and the affected Kumo component conventions before assessing behavior.
• The checked-out head matches PR fix(badge): match link focus ring shape #811 (6efc6b7c…), and GitHub reports no existing reviews or comments. The proposed change marks Badge roots and applies a :has() pill radius only to Links with a direct Badge child; the changeset scope is correct.
• The local clone has no origin/main ref, so I’m reviewing the PR commit directly and checking the generated styling path and focused component tests.
• Full changed-file context and the single PR commit were reviewed. The direct-child selector is limited to the intended composition and the new Badge marker does not alter Badge semantics or props.
• Targeted unit tests, typecheck, and lint could not start because pnpm is unavailable in this runner. I’m performing static validation of the Tailwind selector and class-merging behavior instead.
• The repository already uses :has() arbitrary variants in component code, and the new selector follows that established Tailwind syntax. A Corepack-provided pnpm is now available, so I’m rerunning the focused tests and package static checks.
• The unit run executed the affected Link and Badge tests successfully, but the overall suite failed on 14 pre-existing registry/schema tests because generated packages/kumo/ai files are absent in this fresh checkout. Typecheck fails for the same missing generated schema; neither failure is attributable to this PR.
• The package lint script could not resolve its nested pnpm invocation in this runner. I’m checking the worktree and invoking the installed linter directly.
• The reviewed diff is whitespace-clean, and no repository changes were present after the checks. No actionable regressions were identified in the Badge marker, Link selector, regression coverage, or changeset.
• Direct lint validation is also blocked by the checkout’s absent generated component registry, the same environment prerequisite that prevented the full test and typecheck runs.

github run

[github-actions]

📐 Bundle Size

Consumer fixtures bundled against packages/kumo/dist (peers external, minified ESM).

Fixture	Raw	Gzip	Brotli
Button (root)	174.6 KB	49.9 KB	43.1 KB
Button (components/button)	174.5 KB	49.9 KB	43.1 KB
Button + Dialog + Select (root)	299.5 KB	85.8 KB	71.9 KB
Button + Dialog + Select (component subpaths)	299.5 KB	85.9 KB	71.9 KB
Chart (root)	247.0 KB	71.1 KB	60.9 KB
Chart (components/chart)	246.9 KB	71.1 KB	60.9 KB
Badge (components/badge)	44.7 KB	11.7 KB	10.1 KB
Flow (components/flow)	208.9 KB	58.3 KB	50.5 KB
Button (primitives/button)	12.2 KB	4.4 KB	3.9 KB
Primitives barrel	635.8 KB	176.9 KB	139.3 KB
Code highlighting (code)	2.08 MB	468.0 KB	349.3 KB

npm tarball: 544 files, 1.49 MB packed, 6.95 MB unpacked.

⚠️ 23 flagged files in tarball (tests / raw scripts)

• dist/blocks-source/resource-list/resource-list.test.tsx
• scripts/component-registry/cache.ts
• scripts/component-registry/discovery.ts
• scripts/component-registry/example-cleanup.ts
• scripts/component-registry/index.test.ts
• scripts/component-registry/index.ts
• scripts/component-registry/markdown-generator.ts
• scripts/component-registry/metadata.ts
• scripts/component-registry/props-filter.ts
• scripts/component-registry/schema-generator.ts
• scripts/component-registry/sub-components.ts
• scripts/component-registry/types.ts
• scripts/component-registry/utils.ts
• scripts/component-registry/variant-parser.ts
• scripts/css-build.ts
• scripts/generate-globe-land-mask.mjs
• scripts/generate-primitives.ts
• scripts/theme-generator/config.ts
• scripts/theme-generator/generate-css.test.ts
• scripts/theme-generator/generate-css.ts
• scripts/theme-generator/index.ts
• scripts/theme-generator/migrate.ts
• scripts/theme-generator/types.ts

Report-only: no size thresholds are enforced yet.

Commit: 6efc6b7c

[github-actions]

Visual contracts

Linux Chromium references exercised by the PR's visual-contracts job.

1 curated contract

truncating text trigger

[github-actions]

Visual Regression Report — 8 changed, 3 unchanged

8 screenshot(s) with visual changes:

Badge / Badge Semantic Variants

886 px (1%) changed

Before	After	Diff

Badge / Badge Dot

562 px (0.63%) changed

Before	After	Diff

Badge / Badge In Sentence

242 px (0.27%) changed

Before	After	Diff

Badge / Badge Icon

274 px (0.31%) changed

Before	After	Diff

Link / Link Basic

0 px (0%) changed

Before	After	Diff

Link / Link In Paragraph

2,766 px (3.12%) changed

Before	After	Diff

Link / Link External

31 px (0.04%) changed

Before	After	Diff

Link / Link Render

1,079 px (1.22%) changed

Before	After	Diff

3 screenshot(s) unchanged

• Badge / Badge Color Variants
• Badge / Badge Link
• Link / Link Current Variant

---

Generated by Kumo Visual Regression

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://codex-fix-linkable-badge-focus-ring-kumo-docs.design-engineering.workers.dev (commit 6efc6b7)

This URL reflects your latest Preview deployment

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Success ✅ Deployment: Success ✅ View logs ↗	https://e0fe72f1-kumo-docs.design-engineering.workers.dev	6efc6b7	2026-09-17T20:50:18.276Z	Visit the dashboard ↗