Merge branch 'feat/css-transition-support' into feat/drawer

Author: huntabyte

.changeset/crazy-vans-follow.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat: support CSS transitions

docs/content/styling.md

@@ -224,6 +224,30 @@ Here's an example styling an accordion with different states:
 
 ## Advanced Styling Techniques
 
+### CSS Transitions on Mount-Managed Surfaces
+
+Components that manage their mount lifecycle for animations expose transient
+`data-starting-style` and `data-ending-style` attributes on their animated
+surfaces. This is useful for popup content, overlays, and similar parts where
+you want enter and exit transitions without losing the close animation during
+unmount.
+
+```css
+[data-popover-content] {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+[data-popover-content][data-starting-style],
+[data-popover-content][data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+```
+
 ### Combining Data Attributes with CSS Variables
 
 You can combine data attributes with CSS variables to create dynamic styles based on component state. Here's how to animate the accordion content using the `--bits-accordion-content-height` variable and the `data-state` attribute:

docs/src/lib/content/api-reference/accordion.api.ts

@@ -5,7 +5,13 @@ import type {
 	AccordionRootPropsWithoutHTML,
 	AccordionTriggerPropsWithoutHTML,
 } from "bits-ui";
-import { disabledDataAttr, forceMountProp, orientationDataAttr, withChildProps } from "./shared.js";
+import {
+	disabledDataAttr,
+	forceMountProp,
+	orientationDataAttr,
+	transitionStyleDataAttrs,
+	withChildProps,
+} from "./shared.js";
 import {
 	HeaderLevelProp,
 	OnChangeStringOrArrayProp,
@@ -150,6 +156,7 @@ const content = defineComponentApiSchema<AccordionContentPropsWithoutHTML>({
 	dataAttributes: [
 		orientationDataAttr,
 		disabledDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "accordion-content",
 			description: "Present on the content element.",

docs/src/lib/content/api-reference/alert-dialog.api.ts

@@ -27,6 +27,7 @@ import {
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
 	restoreScrollDelayProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
 import {
@@ -104,6 +105,7 @@ const content = defineComponentApiSchema<AlertDialogContentPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "alert-dialog-content",
 			description: "Present on the content element.",
@@ -177,6 +179,7 @@ const overlay = defineComponentApiSchema<AlertDialogOverlayPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "alert-dialog-overlay",
 			description: "Present on the overlay element.",

docs/src/lib/content/api-reference/collapsible.api.ts

@@ -7,6 +7,7 @@ import {
 	forceMountProp,
 	onOpenChangeCompleteProp,
 	onOpenChangeProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "./shared.js";
 import { CollapsibleContentChildSnippetProps } from "./extended-types/collapsible/index.js";
@@ -111,6 +112,7 @@ export const content = defineComponentApiSchema<CollapsibleContentPropsWithoutHT
 			name: "disabled",
 			description: "Present when the collapsible is disabled.",
 		}),
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "collapsible-content",
 			description: "Present on the content element.",

docs/src/lib/content/api-reference/combobox.api.ts

@@ -39,6 +39,7 @@ import {
 	portalProps,
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
 import {
@@ -163,6 +164,7 @@ export const content = defineComponentApiSchema<ComboboxContentPropsWithoutHTML>
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "combobox-content",
 			description: "Present on the content element.",
@@ -194,6 +196,7 @@ export const contentStatic = defineComponentApiSchema<ComboboxContentStaticProps
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "combobox-content",
 			description: "Present on the content element.",

docs/src/lib/content/api-reference/dialog.api.ts

@@ -21,6 +21,7 @@ import {
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
 	restoreScrollDelayProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "./shared.js";
 import { HeaderLevelProp, OpenClosedProp } from "./extended-types/shared/index.js";
@@ -110,6 +111,7 @@ export const content = defineComponentApiSchema<DialogContentPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "dialog-content",
 			description: "Present on the content.",
@@ -175,6 +177,7 @@ export const overlay = defineComponentApiSchema<DialogOverlayPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "dialog-overlay",
 			description: "Present on the overlay.",

docs/src/lib/content/api-reference/link-preview.api.ts

@@ -20,6 +20,7 @@ import {
 	onOpenChangeCompleteProp,
 	onOpenChangeProp,
 	portalProps,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
 import {
@@ -98,6 +99,7 @@ export const content = defineComponentApiSchema<LinkPreviewContentPropsWithoutHT
 	},
 	dataAttributes: [
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "link-preview-content",
 			description: "Present on the content element.",
@@ -120,6 +122,7 @@ export const contentStatic = defineComponentApiSchema<LinkPreviewContentStaticPr
 	},
 	dataAttributes: [
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "link-preview-content",
 			description: "Present on the content element.",

docs/src/lib/content/api-reference/menu.api.ts

@@ -40,6 +40,7 @@ import {
 	preventScrollProp,
 	radioGroupItemChildDefinition,
 	radioGroupItemChildrenDefinition,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "./shared.js";
 import {
@@ -282,7 +283,7 @@ type DataAttrs = ComponentAPISchema["dataAttributes"];
 
 const triggerAttrs: DataAttrs = [STATE];
 
-const contentAttrs: DataAttrs = [STATE];
+const contentAttrs: DataAttrs = [STATE, ...transitionStyleDataAttrs];
 
 const arrowAttrs: DataAttrs = [STATE];
 
@@ -340,7 +341,7 @@ const separatorAttrs: DataAttrs = [
 	}),
 ];
 
-const subContentAttrs: DataAttrs = [STATE];
+const subContentAttrs: DataAttrs = [STATE, ...transitionStyleDataAttrs];
 
 const subTriggerAttrs: DataAttrs = [...sharedItemAttrs, STATE];
 

docs/src/lib/content/api-reference/navigation-menu.api.ts

@@ -14,6 +14,7 @@ import {
 	dismissibleLayerProps,
 	escapeLayerProps,
 	forceMountProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "./shared.js";
 import {
@@ -27,6 +28,7 @@ import {
 	defineEnumProp,
 	defineFunctionProp,
 	defineNumberProp,
+	defineSimpleDataAttr,
 	defineStringProp,
 } from "../utils.js";
 
@@ -133,6 +135,13 @@ export const content = defineComponentApiSchema<NavigationMenuContentPropsWithou
 		forceMount: forceMountProp,
 		...withChildProps({ elType: "HTMLDivElement" }),
 	},
+	dataAttributes: [
+		...transitionStyleDataAttrs,
+		defineSimpleDataAttr({
+			name: "navigation-menu-content",
+			description: "Present on the content element.",
+		}),
+	],
 });
 
 export const link = defineComponentApiSchema<NavigationMenuLinkPropsWithoutHTML>({
@@ -160,6 +169,13 @@ export const indicator = defineComponentApiSchema<NavigationMenuIndicatorPropsWi
 		forceMount: forceMountProp,
 		...withChildProps({ elType: "HTMLSpanElement" }),
 	},
+	dataAttributes: [
+		...transitionStyleDataAttrs,
+		defineSimpleDataAttr({
+			name: "navigation-menu-indicator",
+			description: "Present on the indicator element.",
+		}),
+	],
 });
 
 export const viewport = defineComponentApiSchema<NavigationMenuViewportPropsWithoutHTML>({
@@ -170,6 +186,13 @@ export const viewport = defineComponentApiSchema<NavigationMenuViewportPropsWith
 		forceMount: forceMountProp,
 		...withChildProps({ elType: "HTMLDivElement" }),
 	},
+	dataAttributes: [
+		...transitionStyleDataAttrs,
+		defineSimpleDataAttr({
+			name: "navigation-menu-viewport",
+			description: "Present on the viewport element.",
+		}),
+	],
 });
 
 export const navigationMenu = [root, sub, list, item, trigger, content, link, viewport, indicator];