feat(Dialog): nested attributes & CSS vars (#1841)

Author: huntabyte

.changeset/cuddly-bees-count.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat(AlertDialog): add nested attributes and CSS vars for better styling of nested dialogs

.changeset/every-clowns-show.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat(Dialog): add nested attributes and CSS vars for better styling of nested dialogs

docs/content/components/accordion.md

@@ -9,7 +9,7 @@ description: Organizes content into collapsible sections, allowing users to focu
 	let { schemas } = $props()
 </script>
 
-<ComponentPreview name="accordion-demo" componentName="Accordion">
+<ComponentPreview name="accordion-demo" componentName="Accordion" variant="preview">
 
 {#snippet preview()}
 <AccordionDemo />

docs/content/components/alert-dialog.md

@@ -8,7 +8,7 @@ description: A modal window that alerts users with important information and awa
 	let { schemas } = $props()
 </script>
 
-<ComponentPreview name="alert-dialog-demo" componentName="Alert Dialog">
+<ComponentPreview name="alert-dialog-demo" componentName="Alert Dialog" variant="preview">
 
 {#snippet preview()}
 <AlertDialogDemo />
@@ -375,7 +375,29 @@ By leveraging these advanced features, you can create highly customized dialog e
 
 ## Nested Dialogs
 
-Dialogs can be nested within each other to create more complex layouts. See the [Dialog](/docs/components/dialog) component for more information on nested dialogs.
+Alert Dialogs can be nested within each other (or with regular Dialogs) to create more complex layouts. The same nested dialog tracking and styling capabilities are available for Alert Dialogs.
+
+### Styling Nested Alert Dialogs
+
+Alert Dialogs provide the same data attributes and CSS variables as regular Dialogs for tracking nesting:
+
+**Data Attributes:**
+
+- `data-nested-open`: Present on `AlertDialog.Content` and `AlertDialog.Overlay` when nested dialogs are open.
+- `data-nested`: Present on `AlertDialog.Content` and `AlertDialog.Overlay` when the dialog is a nested dialog, useful for hiding the overlay of nested dialogs to avoid overlapping with parent dialogs.
+
+**CSS Variables:**
+
+- `--bits-dialog-depth`: The nesting depth (0 for root, 1 for first nested, etc.).
+- `--bits-dialog-nested-count`: The number of currently open nested dialogs (updates reactively).
+
+```svelte
+<AlertDialog.Content
+  style="transform: scale(calc(1 - var(--dialog-nested-count) * 0.05));"
+>
+  <!-- Alert dialog content -->
+</AlertDialog.Content>
+```
 
 ## Svelte Transitions
 

docs/content/components/aspect-ratio.md

@@ -8,7 +8,7 @@ description: Displays content while maintaining a specified aspect ratio, ensuri
 	let { schemas } = $props()
 </script>
 
-<ComponentPreview name="aspect-ratio-demo" componentName="Aspect Ratio" nonExpandableItems={["App.svelte"]}>
+<ComponentPreview name="aspect-ratio-demo" componentName="Aspect Ratio" nonExpandableItems={["App.svelte"]} variant="preview">
 
 {#snippet preview()}
 <AspectRatioDemo />

docs/content/components/avatar.md

@@ -8,7 +8,7 @@ description: Represents a user or entity with a recognizable image or placeholde
 	let { schemas } = $props()
 </script>
 
-<ComponentPreview name="avatar-demo" componentName="Avatar">
+<ComponentPreview name="avatar-demo" componentName="Avatar" variant="preview">
 
 {#snippet preview()}
 <AvatarDemo />

docs/content/components/button.md

@@ -8,7 +8,7 @@ description: A component that if passed a `href` prop will render an anchor elem
 	let { schemas } = $props()
 </script>
 
-<ComponentPreview name="button-demo" componentName="Button" nonExpandableItems={["App.svelte"]}>
+<ComponentPreview name="button-demo" componentName="Button" nonExpandableItems={["App.svelte"]} variant="preview">
 
 {#snippet preview()}
 <ButtonDemo />

docs/content/components/calendar.md

@@ -8,7 +8,7 @@ description: Displays dates and days of the week, facilitating date-related inte
 	let { schemas } = $props()
 </script>
 
-<ComponentPreview name="calendar-demo" componentName="Calendar">
+<ComponentPreview name="calendar-demo" componentName="Calendar" variant="preview">
 
 {#snippet preview()}
 <CalendarDemo />

docs/content/components/checkbox.md

@@ -8,7 +8,7 @@ description: Allow users to switch between checked, unchecked, and indeterminate
 	let { schemas } = $props()
 </script>
 
-<ComponentPreview name="checkbox-demo" componentName="Checkbox">
+<ComponentPreview name="checkbox-demo" componentName="Checkbox" variant="preview">
 
 {#snippet preview()}
 <CheckboxDemo />

docs/content/components/collapsible.md

@@ -8,7 +8,7 @@ description: Conceals or reveals content sections, enhancing space utilization a
 	let { schemas } = $props()
 </script>
 
-<ComponentPreview name="collapsible-demo" componentName="Collapsible">
+<ComponentPreview name="collapsible-demo" componentName="Collapsible" variant="preview">
 
 {#snippet preview()}
 <CollapsibleDemo />