test: add visual contract CI foundation

[mattrothenberg]

Summary

• add a focused Chromium visual-contract suite that runs on every Kumo pull request
• seed it with the Tooltip + truncating Text composition that regressed after the leading-inherit change
• commit Darwin and Linux references as reviewed contract fixtures
• upload Vitest failure artifacts and post a generic, expandable gallery of all Linux contract references from trusted post-CI automation

Why

This is a small, curated, incident-driven suite—not a broad visual-regression crawl. Each future incident or high-risk cross-component composition can add one explicit contract.

Validation

• pnpm --filter @cloudflare/kumo test:visual-contracts --update

• pnpm --filter @cloudflare/kumo test:visual-contracts

• pnpm exec tsc --project ci/tsconfig.json --noEmit

• Ubuntu visual-contracts CI job passed

• Reviews

• automated review not possible because: test and CI configuration change

• Tests

• Tests included/updated

[ask-bonk]

I'm Bonk, and I've done a quick review of your PR.

Posted 1 inline finding.

Review notes

• Confirmed the review target is PR test: add visual contract CI foundation #799 (test: add Tooltip visual contract). I’ll inspect its diff, applicable package guidance, existing reviews, and the visual-test/CI integration.
• PR metadata matches test: add visual contract CI foundation #799 and head SHA 21ba45f; there are no existing reviews or inline comments to duplicate. The local clone has no origin/main ref, so I’ll obtain the authoritative PR patch from GitHub and compare the new setup with existing browser-test conventions.
• The patch adds an isolated Chromium-only Vitest project and a Tooltip screenshot assertion. I’m now validating its configuration, CSS setup, tooltip behavior, and snapshot naming against the existing browser tests; I will not run the screenshot test because it can generate failure artifacts in this read-only worktree.
• Configuration and component context are consistent with the existing browser suite. The visual-contracts CI job has now failed: the assertion on line 20 looks for an Ubuntu/Linux Chromium baseline, while the PR contains only truncating-text-trigger-chromium-darwin.png; the intended Linux fixture is absent.
• Posted one inline COMMENT review on PR test: add visual contract CI foundation #799 at the failing screenshot assertion. The review has no top-level body, and no repository files were modified.

github run

[pkg-pr-new]

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

commit: e28e05b

[mattrothenberg]

Visual contracts

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

1 curated contract

Tooltip: truncating Text trigger remains visible

The visual-contracts job passed on Ubuntu: https://github.com/cloudflare/kumo/actions/runs/34638127173/job/103391055853

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://test-tooltip-visual-contract-kumo-docs.design-engineering.workers.dev (commit e28e05b)

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://6bda4f9e-kumo-docs.design-engineering.workers.dev	e28e05b	2026-09-11T19:35:03.214Z	Visit the dashboard ↗
Build: Success ✅ Deployment: Success ✅ View logs ↗	https://adee5fb6-kumo-docs.design-engineering.workers.dev	b261de5	2026-09-11T19:23:23.771Z	Visit the dashboard ↗

[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.0 KB
Button + Dialog + Select (root)	299.5 KB	85.8 KB	71.8 KB
Button + Dialog + Select (component subpaths)	299.5 KB	85.9 KB	71.8 KB
Chart (root)	218.7 KB	63.4 KB	54.7 KB
Chart (components/chart)	218.6 KB	63.3 KB	54.7 KB
Badge (components/badge)	44.7 KB	11.7 KB	10.0 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	467.9 KB	349.2 KB

npm tarball: 535 files, 1.47 MB packed, 6.84 MB unpacked.

⚠️ 22 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-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: e28e05be

[github-actions]

Visual Regression Report — 28 changed, 17 unchanged

28 screenshot(s) with visual changes:

Button / Basic

317 px (0.36%) changed

Before	After	Diff

Button / Loading State

503 px (0.57%) changed

Before	After	Diff

Button / Disabled State

117 px (0.13%) changed

Before	After	Diff

Button / Title

1,491 px (1.68%) changed

Before	After	Diff

Button / Link as Button

1,091 px (1.23%) changed

Before	After	Diff

Button / Link with Tooltip

724 px (0.82%) changed

Before	After	Diff

Button / Disabled Link

332 px (0.37%) changed

Before	After	Diff

Dialog / Dialog With Actions

352 px (0.4%) changed

Before	After	Diff

Dialog / Dialog Sizes

2,936 px (3.32%) changed

Before	After	Diff

Dialog / Dialog Confirmation

1,088 px (1.23%) changed

Before	After	Diff

Dialog / Dialog With Select

383 px (0.43%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

253 px (0.29%) changed

Before	After	Diff

Select / Select Basic

1,094 px (1.24%) changed

Before	After	Diff

Select / Select Sizes

2,862 px (1.76%) changed

Before	After	Diff

Select / Select Dynamic Placement

2,420 px (2.33%) changed

Before	After	Diff

Select / Select Without Label

664 px (0.75%) changed

Before	After	Diff

Select / Select With Error

1,730 px (1.66%) changed

Before	After	Diff

Select / Select Placeholder

977 px (1.1%) changed

Before	After	Diff

Select / Select With Tooltip

853 px (0.96%) changed

Before	After	Diff

Select / Select Loading

3,154 px (1.79%) changed

Before	After	Diff

Select / Select Multiple

1,563 px (1.76%) changed

Before	After	Diff

Select / Select Complex

1,279 px (1.23%) changed

Before	After	Diff

Select / Select Disabled Options

1,217 px (1.37%) changed

Before	After	Diff

Select / Select Disabled Items

103 px (0.12%) changed

Before	After	Diff

Select / Select Grouped

940 px (1.06%) changed

Before	After	Diff

Select / Select Grouped With Disabled

1,414 px (1.6%) changed

Before	After	Diff

Select / Select Long List

1,517 px (1.46%) changed

Before	After	Diff

Select (Open)

2,443 px (0.01%) changed

Before	After	Diff

17 screenshot(s) unchanged

• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Custom Max Width
• Dialog / Dialog With Combobox
• Dialog (Open)
• Select / Select Placement
• Select / Select With Description
• Select / Select Custom Rendering

---

Generated by Kumo Visual Regression