feat(dialog): add layer variant

[geoquant]

Summary

This PR provides an alternative to #570 by bringing the Layer Dialog treatment into the existing Dialog API instead of introducing a new top-level LayerDialog component.

• Adds variant="layer" to Dialog, with the existing behavior preserved as the default variant="base"
• Adds additive structured subcomponents: Dialog.Body, Dialog.Footer, and Dialog.Separator
• Keeps Dialog.Title and Dialog.Description backed by the Base UI dialog primitives for accessibility semantics
• Documents both variants in the Dialog docs and adds layer variant demos
• Incorporates Nanda's review notes from feat: add LayerDialog component #570 by using a larger outer radius and equalized layer padding

Validation

• pnpm --filter @cloudflare/kumo lint — passes with existing warnings
• pnpm --filter @cloudflare/kumo typecheck — passes
• cd packages/kumo && pnpm exec vitest run --project=unit src/components/dialog/dialog.test.tsx — passes
• pnpm --filter @cloudflare/kumo codegen:registry — passes; generated outputs are ignored/untracked

Note: pnpm --filter @cloudflare/kumo-docs-astro typecheck currently fails on unrelated existing docs/demo type errors across SkeletonLine, Switch, Table, Toolbar, Tooltip, Chart, SankeyChart, and TableOfContents.

• Reviews
• bonk has reviewed the change
• automated review not possible because: this is an API/design-system direction change that needs human review against feat: add LayerDialog component #570
• Tests
• Tests included/updated
• Automated tests not possible - manual testing has been completed as follows: n/a
• Additional testing not necessary because: n/a

[pkg-pr-new]

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

commit: f4623d5

[github-actions]

Docs Preview

View docs preview

Commit: f4623d5

[github-actions]

Visual Regression Report — 23 changed, 18 unchanged

23 screenshot(s) with visual changes:

Button / Variant: Secondary

593 px (0.58%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

1,122 px (1.11%) changed

Before	After	Diff

Button / With Icon

817 px (0.8%) changed

Before	After	Diff

Button / Icon Only

112 px (0.11%) changed

Before	After	Diff

Button / Loading State

498 px (0.49%) changed

Before	After	Diff

Button / Link as Button

820 px (0.81%) changed

Before	After	Diff

Dialog / Dialog With Actions

298 px (0.29%) changed

Before	After	Diff

Dialog / Dialog Basic

404 px (0.4%) changed

Before	After	Diff

Dialog / Dialog Sizes

2,935 px (2.89%) changed

Before	After	Diff

Dialog / Dialog Alert

0 px (0%) changed

Before	After	Diff

Dialog / Dialog Confirmation

1,497 px (1.47%) changed

Before	After	Diff

Dialog / Custom Max Width

954 px (0.94%) changed

Before	After	Diff

Dialog / Dialog With Select

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

383 px (0.38%) changed

Before	After	Diff

Dialog (Open)

10,617,085 px (29.9%) changed

Before	After	Diff

Select / Select Without Label

664 px (0.65%) changed

Before	After	Diff

Select / Select With Description

2,199 px (1.86%) changed

Before	After	Diff

Select / Select Custom Rendering

973 px (0.96%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

1,265 px (1.25%) changed

Before	After	Diff

Select / Select Disabled Options

1,541 px (1.52%) changed

Before	After	Diff

Select / Select Long List

2,050 px (1.73%) changed

Before	After	Diff

Select (Open)

2,862 px (0.01%) changed

Before	After	Diff

18 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Sizes
• Button / Disabled State
• Button / Title
• Dialog / Dialog With Combobox
• Select / Select Basic
• Select / Select Sizes
• Select / Select With Error
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression

[geoquant]

/bonk review

[ask-bonk]

This is a clean, well-structured approach to the layer dialog treatment — a nice alternative to a standalone top-level component. Tests are thorough, docs are comprehensive, and the changeset looks good.

A few items to address before merging:

1. Missing main package exports — The new DialogBody, DialogFooter, DialogSeparator subcomponents (and their types) are exported from components/dialog/index.ts but are not re-exported from the main barrel file packages/kumo/src/index.ts. Consumers won't be able to tree-shake import them directly (e.g., import { DialogBody } from "@cloudflare/kumo"). Please add them to the main src/index.ts Dialog export block.

2. Minor padding redundancy — DialogBody applies p-6 pr-6 for the layer variant. Since p-6 already sets pr-6, the explicit pr-6 utility is redundant.

3. Visual regression noise — The report shows unexpected changes across several Button and Select screenshots. Since this PR only touches Dialog, those diffs look like baseline flakiness. Worth a quick sanity check, but not a blocker.

4. LayerCard structured-layer detection — Because Dialog.Body and Dialog.Footer are wrapper components (functions that return LayerCard.Primary / LayerCard.Secondary), the parent LayerCard in DialogContent won't detect them via hasLayerCardSections. The explicit className on the wrapper compensates, but this creates a subtle coupling with LayerCard internals. Not blocking, but something to keep in mind if LayerCard logic evolves.

Once the main package exports are added, this should be good to land.

[ask-bonk]

p-6 already includes pr-6, so the explicit pr-6 is redundant.

Suggested change

	className={cn(variant === "layer" && "p-6 pr-6", className)}
	className={cn(variant === "layer" && "p-6", className)}

[ask-bonk]

These exports look correct, but don't forget to also re-export the new components and types from the main package barrel file (packages/kumo/src/index.ts) so consumers can import them directly from @cloudflare/kumo.

[ask-bonk]

Review submitted for PR #603. Here's a summary of what I found:

Blocking issue:

• Missing main package exports — DialogBody, DialogFooter, and DialogSeparator are exported from components/dialog/index.ts but not re-exported from the main barrel file packages/kumo/src/index.ts. Consumers won't be able to directly import them from @cloudflare/kumo (only via Dialog.Body etc.).

Minor but worth fixing:

• p-6 pr-6 redundancy in DialogBody — p-6 already includes pr-6, so the explicit right-padding utility is unnecessary.

Non-blocking observations:

• Visual regression shows unexpected diffs in Button and Select screenshots (0.1–1.8% changes) despite the PR only touching Dialog — likely baseline flakiness.
• Dialog.Body and Dialog.Footer are wrapper components, so the parent LayerCard won't auto-detect them via hasLayerCardSections. The explicit className on the wrapper compensates, but it's a subtle coupling with LayerCard internals.

What looks good:

• Clean API design (layer variant on existing Dialog rather than a new top-level component)
• Well-written tests covering both base and layer variants
• Comprehensive docs and demos
• Proper changeset included

Once the missing main index.ts exports are added, this should be good to land.

github run

[geoquant]

I reviewed the Dialog usages scraped from Stratus with a focus on backwards compatibility for existing className/style extension patterns. I did not find a breaking change for existing/default Dialog usage.

Compatibility confirmed:

• Existing <Dialog className=...> / <Dialog.Content className=...> surface overrides continue to merge onto the dialog surface.
• Dialog.Title, Dialog.Description, Dialog.Trigger, and Dialog.Close continue to accept/forward className/props.
• I added coverage for common production patterns like p-0, max-w-lg, rounded-none, custom background classes, important title typography overrides, dark-mode description classes, and data-testid passthrough.
• I also fixed prop passthrough on Dialog content so arbitrary popup props like data-testid, id, and aria attributes remain supported.

One difference to document, but not a breaking change: for the new variant="layer", Dialog.Content className applies to the outer popup wrapper. That supports documented usage such as changing width with className="max-w-lg". The inner visible LayerCard still owns its own surface classes such as background, padding, rounded corners, and shadow. Since variant="layer" is new, this does not break existing users, but it is worth being explicit about in docs if people expect layer dialogs to restyle the inner card through Dialog.Content className.