feat(layer-dialog): support nested drawers

[mattrothenberg]

Summary

• add nested LayerDialog documentation with a layered confirmation example
• render a nested drawer backdrop above its parent without z-index overrides
• keep mobile actions visible beneath the scrolling body, with full-width spacing and responsive button treatments

Desktop

Screen.Recording.2026-09-16.at.2.57.26.PM.mov

Mobile

mobile-nested.mov

Validation

• pnpm --filter @cloudflare/kumo test --run src/components/layer-dialog/layer-dialog.test.tsx

• Reviews

• bonk has reviewed the change

• automated review not possible because: this change was validated locally and no automated reviewer was available during authoring.

• Tests

• Tests included/updated

• Automated tests not possible - manual testing has been completed as follows: not applicable.

• Additional testing not necessary because: not applicable.

[ask-bonk]

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

0 findings posted inline.

• packages/kumo/ changes require a new changeset. The required CI check fails because none was added, blocking release/versioning for this feature.

Review notes

• Confirmed the review target is pull request feat(layer-dialog): support nested drawers #807. I’m inspecting the LayerDialog implementation, its tests, and the associated documentation against the PR diff.
• The GitHub API confirms PR feat(layer-dialog): support nested drawers #807 is at the supplied head SHA and has no prior reviews, so there are no published findings to duplicate. The local checkout lacks the PR base commit; I’m retrieving the GitHub diff and examining the complete changed files from the PR head instead.
• I verified all four changed files and the relevant component conventions. The implementation now force-mounts every backdrop and relocates action controls into the mobile body; I’m checking Base UI’s forceRender behavior and exercising closed and nested dialog states, which the added test does not cover.
• Base UI 1.8.0 documents and implements Backdrop.forceRender specifically to render a backdrop for nested drawers; it remains hidden and non-interactive when the drawer is unmounted. The PR’s added marker/count test therefore covers the intended nested-backdrop behavior.
• The targeted test command could not run because pnpm is unavailable in this runner. I’m completing static checks of the responsive layout and existing PR discussion.
• Static layout inspection confirms the mobile action block remains outside the scroll area while preserving the desktop footer, and no existing inline review comments or reviews exist.
• The diff passes Git whitespace checks. The required changeset check is failing; I’m verifying its failure reason before concluding the review.
• The CI log confirms the failure: this PR modifies packages/kumo/ but adds no new changeset file. No inline code finding is applicable; the remaining checks found no behavioral or accessibility regression in the changed implementation.

github run

[pkg-pr-new]

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

commit: 4882795

[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 — 33 changed, 12 unchanged

33 screenshot(s) with visual changes:

Button / Basic

420 px (0.47%) changed

Before	After	Diff

Button / Variant: Primary

473 px (0.53%) changed

Before	After	Diff

Button / Variant: Ghost

179 px (0.2%) changed

Before	After	Diff

Button / Variant: Destructive

376 px (0.42%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

1,198 px (1.35%) changed

Before	After	Diff

Button / Icon Only

178 px (0.2%) changed

Before	After	Diff

Button / Loading State

513 px (0.58%) changed

Before	After	Diff

Button / Disabled State

232 px (0.26%) changed

Before	After	Diff

Button / Title

848 px (0.96%) changed

Before	After	Diff

Dialog / Dialog With Actions

160 px (0.18%) changed

Before	After	Diff

Dialog / Dialog Basic

401 px (0.45%) changed

Before	After	Diff

Dialog / Dialog Sizes

2,298 px (2.59%) changed

Before	After	Diff

Dialog / Dialog Alert

1,066 px (1.2%) changed

Before	After	Diff

Dialog / Dialog Confirmation

1,228 px (1.39%) changed

Before	After	Diff

Dialog / Custom Max Width

951 px (1.07%) changed

Before	After	Diff

Dialog / Dialog With Select

497 px (0.56%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

483 px (0.55%) changed

Before	After	Diff

Select / Select Basic

914 px (1.03%) changed

Before	After	Diff

Select / Select Sizes

2,692 px (1.66%) changed

Before	After	Diff

Select / Select Dynamic Placement

3,376 px (3.24%) changed

Before	After	Diff

Select / Select Without Label

721 px (0.81%) changed

Before	After	Diff

Select / Select With Error

1,730 px (1.66%) changed

Before	After	Diff

Select / Select Placeholder

1,236 px (1.4%) changed

Before	After	Diff

Select / Select With Tooltip

196 px (0.22%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Multiple

327 px (0.37%) changed

Before	After	Diff

Select / Select Complex

1,655 px (1.59%) changed

Before	After	Diff

Select / Select Disabled Options

1,497 px (1.69%) changed

Before	After	Diff

Select / Select Disabled Items

778 px (0.88%) changed

Before	After	Diff

Select / Select Grouped

939 px (1.06%) changed

Before	After	Diff

Select / Select Grouped With Disabled

1,313 px (1.48%) changed

Before	After	Diff

Select / Select Long List

2,023 px (1.94%) changed

Before	After	Diff

Select (Open)

754 px (0%) changed

Before	After	Diff

12 screenshot(s) unchanged

• Button / Variant: Secondary
• Button / Variant: Outline
• Button / Sizes
• Button / With Icon
• Button / Link as Button
• Button / Link with Tooltip
• Button / Disabled Link
• Dialog / Dialog With Combobox
• Dialog (Open)
• Select / Select Placement
• Select / Select With Description
• Select / Select Custom Rendering

---

Generated by Kumo Visual Regression

[mattrothenberg]

/bonk thorough review please

[ask-bonk]

LGTM!

Review notes

• Confirmed the review target is pull request feat(layer-dialog): support nested drawers #807 and inspected existing reviews and inline comments.
• Reviewed the complete changed LayerDialog implementation, tests, docs demo, MDX page, and changeset.
• Verified Base UI’s Backdrop.forceRender is specifically intended to retain nested drawer backdrops while keeping closed drawers hidden and non-interactive.
• Confirmed the mobile actions remain outside the scroll area and desktop footer behavior is preserved.
• Verified all PR CI checks, including tests, formatting, lint, typecheck, docs build, and changeset validation, pass.
• Local targeted tests could not run because pnpm is unavailable in this runner; CI test coverage passed.

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.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.1 KB

npm tarball: 544 files, 1.49 MB packed, 6.94 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: 48827957

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://codex-layer-dialog-nesting-kumo-docs.design-engineering.workers.dev (commit 4882795)

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://65eb2407-kumo-docs.design-engineering.workers.dev	4882795	2026-09-16T19:04:58.395Z	Visit the dashboard ↗