feat(Dialog): nested attributes & CSS vars

[huntabyte]

Improved Nested Dialogs Support

This PR adds improved support for nested dialogs and alert dialogs, providing data attributes and CSS custom properties that enable proper styling and behavior differentiation based on nesting depth and state.

Motivation

When nesting dialogs within other dialogs (e.g., opening a confirmation alert dialog from within a settings dialog), developers need ways to:

• Style nested dialogs differently (e.g., increasing backdrop opacity with depth)
• Detect when a dialog has nested dialogs open (e.g., preventing animations)
• Apply depth-based styling (e.g., scaling or positioning adjustments)
• Distinguish nested from root-level dialogs

Changes

Data Attributes

Added to Dialog.Content, Dialog.Overlay, AlertDialog.Content, and AlertDialog.Overlay:

• data-nested - Present when the dialog is nested within another dialog (any depth > 0)
• data-nested-open - Present when a dialog nested within this dialog is currently open

CSS Variables

Added to Dialog.Content, Dialog.Overlay, AlertDialog.Content, and AlertDialog.Overlay:

• --bits-dialog-depth - Zero-based depth of the current dialog (e.g., 0 for root, 1 for first nested, 2 for second nested)
• --bits-dialog-nested-count - Number of dialogs currently nested and open within this dialog

[changeset-bot]

🦋 Changeset detected

Latest commit: 174b2ac

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
bits-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
bits-ui	✅ Ready (View Log)	Visit Preview	174b2ac