diff --git a/sites/docs/src/lib/registry/ui/accordion/accordion-content.svelte b/sites/docs/src/lib/registry/ui/accordion/accordion-content.svelte
index 4cc5989eb8..41dc34ae70 100644
--- a/sites/docs/src/lib/registry/ui/accordion/accordion-content.svelte
+++ b/sites/docs/src/lib/registry/ui/accordion/accordion-content.svelte
@@ -12,8 +12,9 @@
 
 <AccordionPrimitive.Content
 	bind:ref
+	data-slot="accordion-content"
 	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
 		className
 	)}
 	{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/accordion/accordion-item.svelte b/sites/docs/src/lib/registry/ui/accordion/accordion-item.svelte
index 852bcf3e5d..780545c6af 100644
--- a/sites/docs/src/lib/registry/ui/accordion/accordion-item.svelte
+++ b/sites/docs/src/lib/registry/ui/accordion/accordion-item.svelte
@@ -9,4 +9,9 @@
 	}: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("border-b last:border-b-0", className)}
+	{...restProps}
+/>
diff --git a/sites/docs/src/lib/registry/ui/accordion/accordion-root.svelte b/sites/docs/src/lib/registry/ui/accordion/accordion-root.svelte
new file mode 100644
index 0000000000..117ee37f22
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/accordion/accordion-root.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	{...restProps}
+/>
diff --git a/sites/docs/src/lib/registry/ui/accordion/accordion-trigger.svelte b/sites/docs/src/lib/registry/ui/accordion/accordion-trigger.svelte
index 54209f210a..39cf56a90f 100644
--- a/sites/docs/src/lib/registry/ui/accordion/accordion-trigger.svelte
+++ b/sites/docs/src/lib/registry/ui/accordion/accordion-trigger.svelte
@@ -16,14 +16,17 @@
 
 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+		<ChevronDown
+			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+		/>
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>
diff --git a/sites/docs/src/lib/registry/ui/accordion/index.ts b/sites/docs/src/lib/registry/ui/accordion/index.ts
index ed49213863..828116aaf9 100644
--- a/sites/docs/src/lib/registry/ui/accordion/index.ts
+++ b/sites/docs/src/lib/registry/ui/accordion/index.ts
@@ -1,8 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import Root from "./accordion-root.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-const Root = AccordionPrimitive.Root;
 
 export {
 	Root,
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-action.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-action.svelte
index c9d9ddbdf9..7f40ad428c 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-action.svelte
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-action.svelte
@@ -10,4 +10,9 @@
 	}: AlertDialogPrimitive.ActionProps = $props();
 </script>
 
-<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-cancel.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-cancel.svelte
index 1adab91393..07adfcda1a 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -12,6 +12,7 @@
 
 <AlertDialogPrimitive.Cancel
 	bind:ref
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-content.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-content.svelte
index 858b8bc1b9..19f662a889 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-content.svelte
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import {
+		AlertDialog as AlertDialogPrimitive,
+		type WithoutChild,
+		type WithoutChildrenOrChild,
+	} from "bits-ui";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
 	import { cn } from "$lib/utils.js";
 
@@ -9,7 +13,7 @@
 		portalProps,
 		...restProps
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		portalProps?: AlertDialogPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
 	} = $props();
 </script>
 
@@ -17,8 +21,9 @@
 	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		bind:ref
+		data-slot="alert-dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 			className
 		)}
 		{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-description.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-description.svelte
index 3e136da919..2ec67dc2ed 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-description.svelte
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-description.svelte
@@ -11,6 +11,7 @@
 
 <AlertDialogPrimitive.Description
 	bind:ref
+	data-slot="alert-dialog-description"
 	class={cn("text-muted-foreground text-sm", className)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-footer.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-footer.svelte
index 91ecaba643..54af5c8c27 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-footer.svelte
@@ -13,7 +13,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	data-slot="alert-dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-header.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-header.svelte
index 44a7b082e7..7f11e7eb03 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-header.svelte
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-header.svelte
@@ -13,7 +13,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	data-slot="alert-dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-overlay.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-overlay.svelte
index bb76e7ac96..a64ee76856 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -11,8 +11,9 @@
 
 <AlertDialogPrimitive.Overlay
 	bind:ref
+	data-slot="alert-dialog-overlay"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 		className
 	)}
 	{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-title.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-title.svelte
index c7811dbaf1..7ef2b5fbed 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-title.svelte
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-title.svelte
@@ -5,14 +5,13 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 3,
 		...restProps
 	}: AlertDialogPrimitive.TitleProps = $props();
 </script>
 
 <AlertDialogPrimitive.Title
 	bind:ref
+	data-slot="alert-dialog-title"
 	class={cn("text-lg font-semibold", className)}
-	{level}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-trigger.svelte b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-trigger.svelte
new file mode 100644
index 0000000000..b22d1d50b5
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/alert-dialog/index.ts b/sites/docs/src/lib/registry/ui/alert-dialog/index.ts
index d06201d4cf..cc281c5897 100644
--- a/sites/docs/src/lib/registry/ui/alert-dialog/index.ts
+++ b/sites/docs/src/lib/registry/ui/alert-dialog/index.ts
@@ -1,4 +1,5 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
@@ -9,7 +10,6 @@ import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";
 
 const Root = AlertDialogPrimitive.Root;
-const Trigger = AlertDialogPrimitive.Trigger;
 const Portal = AlertDialogPrimitive.Portal;
 
 export {
diff --git a/sites/docs/src/lib/registry/ui/alert/alert-description.svelte b/sites/docs/src/lib/registry/ui/alert/alert-description.svelte
index ef74aa4ecc..7eba653a06 100644
--- a/sites/docs/src/lib/registry/ui/alert/alert-description.svelte
+++ b/sites/docs/src/lib/registry/ui/alert/alert-description.svelte
@@ -11,6 +11,14 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/sites/docs/src/lib/registry/ui/alert/alert-title.svelte b/sites/docs/src/lib/registry/ui/alert/alert-title.svelte
index 12ec9fc52d..c8bfc856c3 100644
--- a/sites/docs/src/lib/registry/ui/alert/alert-title.svelte
+++ b/sites/docs/src/lib/registry/ui/alert/alert-title.svelte
@@ -6,19 +6,15 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 5,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	role="heading"
-	aria-level={level}
 	bind:this={ref}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	data-slot="alert-title"
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/sites/docs/src/lib/registry/ui/alert/alert.svelte b/sites/docs/src/lib/registry/ui/alert/alert.svelte
index 8b4528f644..63bfcc08c8 100644
--- a/sites/docs/src/lib/registry/ui/alert/alert.svelte
+++ b/sites/docs/src/lib/registry/ui/alert/alert.svelte
@@ -2,12 +2,12 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const alertVariants = tv({
-		base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 		variants: {
 			variant: {
-				default: "bg-background text-foreground",
+				default: "bg-card text-card-foreground",
 				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -34,6 +34,12 @@
 	} = $props();
 </script>
 
-<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+<div
+	bind:this={ref}
+	data-slot="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+	role="alert"
+>
 	{@render children?.()}
 </div>
diff --git a/sites/docs/src/lib/registry/ui/aspect-ratio/aspect-ratio.svelte b/sites/docs/src/lib/registry/ui/aspect-ratio/aspect-ratio.svelte
new file mode 100644
index 0000000000..815aab0358
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/aspect-ratio/aspect-ratio.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AspectRatioPrimitive.RootProps = $props();
+</script>
+
+<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/aspect-ratio/index.ts b/sites/docs/src/lib/registry/ui/aspect-ratio/index.ts
index 05b4db6e1a..985c75fdbf 100644
--- a/sites/docs/src/lib/registry/ui/aspect-ratio/index.ts
+++ b/sites/docs/src/lib/registry/ui/aspect-ratio/index.ts
@@ -1,5 +1,3 @@
-import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
-
-const Root = AspectRatioPrimitive.Root;
+import Root from "./aspect-ratio.svelte";
 
 export { Root, Root as AspectRatio };
diff --git a/sites/docs/src/lib/registry/ui/avatar/avatar-fallback.svelte b/sites/docs/src/lib/registry/ui/avatar/avatar-fallback.svelte
index 9f09e2330c..249d4a4ab6 100644
--- a/sites/docs/src/lib/registry/ui/avatar/avatar-fallback.svelte
+++ b/sites/docs/src/lib/registry/ui/avatar/avatar-fallback.svelte
@@ -11,6 +11,7 @@
 
 <AvatarPrimitive.Fallback
 	bind:ref
-	class={cn("bg-muted flex size-full items-center justify-center", className)}
+	data-slot="avatar-fallback"
+	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/avatar/avatar-image.svelte b/sites/docs/src/lib/registry/ui/avatar/avatar-image.svelte
index e9e83d48b0..2bb9db4d84 100644
--- a/sites/docs/src/lib/registry/ui/avatar/avatar-image.svelte
+++ b/sites/docs/src/lib/registry/ui/avatar/avatar-image.svelte
@@ -9,4 +9,9 @@
 	}: AvatarPrimitive.ImageProps = $props();
 </script>
 
-<AvatarPrimitive.Image bind:ref class={cn("aspect-square size-full", className)} {...restProps} />
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn("aspect-square size-full", className)}
+	{...restProps}
+/>
diff --git a/sites/docs/src/lib/registry/ui/avatar/avatar.svelte b/sites/docs/src/lib/registry/ui/avatar/avatar.svelte
index 38493442db..f093a97bf7 100644
--- a/sites/docs/src/lib/registry/ui/avatar/avatar.svelte
+++ b/sites/docs/src/lib/registry/ui/avatar/avatar.svelte
@@ -11,6 +11,7 @@
 
 <AvatarPrimitive.Root
 	bind:ref
-	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	data-slot="avatar"
+	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/badge/badge.svelte b/sites/docs/src/lib/registry/ui/badge/badge.svelte
index da261046f6..1d8967d8dd 100644
--- a/sites/docs/src/lib/registry/ui/badge/badge.svelte
+++ b/sites/docs/src/lib/registry/ui/badge/badge.svelte
@@ -2,16 +2,16 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
 		variants: {
 			variant: {
 				default:
-					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
 				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
 				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
-				outline: "text-foreground",
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 			},
 		},
 		defaultVariants: {
@@ -42,6 +42,7 @@
 <svelte:element
 	this={href ? "a" : "span"}
 	bind:this={ref}
+	data-slot="badge"
 	{href}
 	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-ellipsis.svelte b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-ellipsis.svelte
index 1f649dccdc..a22daafb18 100644
--- a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-ellipsis.svelte
+++ b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -13,6 +13,7 @@
 
 <span
 	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
 	role="presentation"
 	aria-hidden="true"
 	class={cn("flex size-9 items-center justify-center", className)}
diff --git a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-item.svelte b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-item.svelte
index 4e2a3ed861..80578e02a3 100644
--- a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-item.svelte
+++ b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-item.svelte
@@ -11,6 +11,11 @@
 	}: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)} {...restProps}>
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-item"
+	class={cn("inline-flex items-center gap-1.5", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </li>
diff --git a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-link.svelte b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-link.svelte
index c6b10194bf..50e5f5cc13 100644
--- a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-link.svelte
+++ b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-link.svelte
@@ -16,6 +16,7 @@
 	} = $props();
 
 	const attrs = $derived({
+		"data-slot": "breadcrumb-link",
 		class: cn("hover:text-foreground transition-colors", className),
 		href,
 		...restProps,
diff --git a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-list.svelte b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-list.svelte
index 77c4e327ff..b76bcebbd3 100644
--- a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-list.svelte
+++ b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-list.svelte
@@ -13,6 +13,7 @@
 
 <ol
 	bind:this={ref}
+	data-slot="breadcrumb-list"
 	class={cn(
 		"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
 		className
diff --git a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-page.svelte b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-page.svelte
index 1db5a05739..169860ad97 100644
--- a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-page.svelte
+++ b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-page.svelte
@@ -13,6 +13,7 @@
 
 <span
 	bind:this={ref}
+	data-slot="breadcrumb-page"
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
diff --git a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-separator.svelte b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-separator.svelte
index afd6f60109..a91169cda6 100644
--- a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-separator.svelte
+++ b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb-separator.svelte
@@ -13,10 +13,11 @@
 </script>
 
 <li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
 	role="presentation"
 	aria-hidden="true"
 	class={cn("[&>svg]:size-3.5", className)}
-	bind:this={ref}
 	{...restProps}
 >
 	{#if children}
diff --git a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb.svelte b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb.svelte
index 70be14df43..c535bf274c 100644
--- a/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb.svelte
+++ b/sites/docs/src/lib/registry/ui/breadcrumb/breadcrumb.svelte
@@ -3,13 +3,19 @@
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<nav bind:this={ref} class={className} aria-label="breadcrumb" {...restProps}>
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	class={className}
+	aria-label="breadcrumb"
+	{...restProps}
+>
 	{@render children?.()}
 </nav>
diff --git a/sites/docs/src/lib/registry/ui/button/button.svelte b/sites/docs/src/lib/registry/ui/button/button.svelte
index 22ab2d0db7..8311a1c59c 100644
--- a/sites/docs/src/lib/registry/ui/button/button.svelte
+++ b/sites/docs/src/lib/registry/ui/button/button.svelte
@@ -4,22 +4,23 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
 				outline:
-					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
+					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
 			},
 		},
 		defaultVariants: {
@@ -56,6 +57,7 @@
 {#if href}
 	<a
 		bind:this={ref}
+		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
 		{href}
 		{...restProps}
@@ -65,6 +67,7 @@
 {:else}
 	<button
 		bind:this={ref}
+		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/card/card-action.svelte b/sites/docs/src/lib/registry/ui/card/card-action.svelte
new file mode 100644
index 0000000000..957160e7cc
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/card/card-action.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/sites/docs/src/lib/registry/ui/card/card-content.svelte b/sites/docs/src/lib/registry/ui/card/card-content.svelte
index 1f52856c23..abde917f5a 100644
--- a/sites/docs/src/lib/registry/ui/card/card-content.svelte
+++ b/sites/docs/src/lib/registry/ui/card/card-content.svelte
@@ -11,6 +11,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
 	{@render children?.()}
 </div>
diff --git a/sites/docs/src/lib/registry/ui/card/card-description.svelte b/sites/docs/src/lib/registry/ui/card/card-description.svelte
index da026644a9..404e2fe63b 100644
--- a/sites/docs/src/lib/registry/ui/card/card-description.svelte
+++ b/sites/docs/src/lib/registry/ui/card/card-description.svelte
@@ -11,6 +11,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
-<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </p>
diff --git a/sites/docs/src/lib/registry/ui/card/card-footer.svelte b/sites/docs/src/lib/registry/ui/card/card-footer.svelte
index 6894149edf..16569b0185 100644
--- a/sites/docs/src/lib/registry/ui/card/card-footer.svelte
+++ b/sites/docs/src/lib/registry/ui/card/card-footer.svelte
@@ -11,6 +11,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/sites/docs/src/lib/registry/ui/card/card-header.svelte b/sites/docs/src/lib/registry/ui/card/card-header.svelte
index 1baa92cbf2..8dd9c44867 100644
--- a/sites/docs/src/lib/registry/ui/card/card-header.svelte
+++ b/sites/docs/src/lib/registry/ui/card/card-header.svelte
@@ -11,6 +11,14 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/sites/docs/src/lib/registry/ui/card/card-title.svelte b/sites/docs/src/lib/registry/ui/card/card-title.svelte
index f7d59c1328..6f6475df07 100644
--- a/sites/docs/src/lib/registry/ui/card/card-title.svelte
+++ b/sites/docs/src/lib/registry/ui/card/card-title.svelte
@@ -6,19 +6,15 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 3,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	role="heading"
-	aria-level={level}
 	bind:this={ref}
-	class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+	data-slot="card-title"
+	class={cn("font-semibold leading-none", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/sites/docs/src/lib/registry/ui/card/card.svelte b/sites/docs/src/lib/registry/ui/card/card.svelte
index 3e3a4ed7e0..531b72ec4c 100644
--- a/sites/docs/src/lib/registry/ui/card/card.svelte
+++ b/sites/docs/src/lib/registry/ui/card/card.svelte
@@ -13,7 +13,11 @@
 
 <div
 	bind:this={ref}
-	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	data-slot="card"
+	class={cn(
+		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/sites/docs/src/lib/registry/ui/carousel/carousel-content.svelte b/sites/docs/src/lib/registry/ui/carousel/carousel-content.svelte
index dd7c0ec381..74f9c8c950 100644
--- a/sites/docs/src/lib/registry/ui/carousel/carousel-content.svelte
+++ b/sites/docs/src/lib/registry/ui/carousel/carousel-content.svelte
@@ -17,6 +17,7 @@
 
 <!-- svelte-ignore event_directive_deprecated -->
 <div
+	data-slot="carousel-content"
 	class="overflow-hidden"
 	use:emblaCarouselSvelte={{
 		options: {
diff --git a/sites/docs/src/lib/registry/ui/carousel/carousel-item.svelte b/sites/docs/src/lib/registry/ui/carousel/carousel-item.svelte
index bf0999ef11..3b8c4f37e7 100644
--- a/sites/docs/src/lib/registry/ui/carousel/carousel-item.svelte
+++ b/sites/docs/src/lib/registry/ui/carousel/carousel-item.svelte
@@ -16,6 +16,7 @@
 
 <div
 	bind:this={ref}
+	data-slot="carousel-item"
 	role="group"
 	aria-roledescription="slide"
 	class={cn(
diff --git a/sites/docs/src/lib/registry/ui/carousel/carousel-next.svelte b/sites/docs/src/lib/registry/ui/carousel/carousel-next.svelte
index 71c8dc37c2..c487c86f05 100644
--- a/sites/docs/src/lib/registry/ui/carousel/carousel-next.svelte
+++ b/sites/docs/src/lib/registry/ui/carousel/carousel-next.svelte
@@ -17,10 +17,11 @@
 </script>
 
 <Button
+	data-slot="carousel-next"
 	{variant}
 	{size}
 	class={cn(
-		"absolute size-8 touch-manipulation rounded-full",
+		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
 			? "-right-12 top-1/2 -translate-y-1/2"
 			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
diff --git a/sites/docs/src/lib/registry/ui/carousel/carousel-previous.svelte b/sites/docs/src/lib/registry/ui/carousel/carousel-previous.svelte
index 7fe6022182..6948160392 100644
--- a/sites/docs/src/lib/registry/ui/carousel/carousel-previous.svelte
+++ b/sites/docs/src/lib/registry/ui/carousel/carousel-previous.svelte
@@ -17,10 +17,11 @@
 </script>
 
 <Button
+	data-slot="carousel-previous"
 	{variant}
 	{size}
 	class={cn(
-		"absolute size-8 touch-manipulation rounded-full",
+		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
 			? "-left-12 top-1/2 -translate-y-1/2"
 			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
diff --git a/sites/docs/src/lib/registry/ui/carousel/carousel.svelte b/sites/docs/src/lib/registry/ui/carousel/carousel.svelte
index c8c711e6d4..30ebc3c8e3 100644
--- a/sites/docs/src/lib/registry/ui/carousel/carousel.svelte
+++ b/sites/docs/src/lib/registry/ui/carousel/carousel.svelte
@@ -6,8 +6,10 @@
 		setEmblaContext,
 	} from "./context.js";
 	import { cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
 
 	let {
+		ref = $bindable(null),
 		opts = {},
 		plugins = [],
 		setApi = () => {},
@@ -15,7 +17,7 @@
 		class: className,
 		children,
 		...restProps
-	}: CarouselProps = $props();
+	}: WithElementRef<CarouselProps> = $props();
 
 	let carouselState = $state<EmblaContext>({
 		api: undefined,
@@ -87,6 +89,13 @@
 	});
 </script>
 
-<div class={cn("relative", className)} role="region" aria-roledescription="carousel" {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="carousel"
+	class={cn("relative", className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...restProps}
+>
 	{@render children?.()}
 </div>
diff --git a/sites/docs/src/lib/registry/ui/checkbox/checkbox.svelte b/sites/docs/src/lib/registry/ui/checkbox/checkbox.svelte
index 2395094c56..a8ebcf2925 100644
--- a/sites/docs/src/lib/registry/ui/checkbox/checkbox.svelte
+++ b/sites/docs/src/lib/registry/ui/checkbox/checkbox.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
 	import { cn } from "$lib/utils.js";
 
 	let {
@@ -15,20 +14,22 @@
 
 <CheckboxPrimitive.Root
 	bind:ref
+	data-slot="checkbox"
 	class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer size-4 shrink-0 rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
 	bind:indeterminate
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
-		<div class="flex size-4 items-center justify-center text-current">
-			{#if indeterminate}
-				<Minus class="size-3.5" />
-			{:else}
-				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+	{#snippet children({ checked })}
+		<div
+			data-slot="checkbox-indicator"
+			class="flex items-center justify-center text-current transition-none"
+		>
+			{#if checked}
+				<Check class="size-3.5" />
 			{/if}
 		</div>
 	{/snippet}
diff --git a/sites/docs/src/lib/registry/ui/collapsible/collapsible-content.svelte b/sites/docs/src/lib/registry/ui/collapsible/collapsible-content.svelte
new file mode 100644
index 0000000000..bdabb559c9
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/collapsible/collapsible-content.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/collapsible/collapsible-trigger.svelte b/sites/docs/src/lib/registry/ui/collapsible/collapsible-trigger.svelte
new file mode 100644
index 0000000000..ece7ad68ec
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/collapsible/collapsible-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/collapsible/collapsible.svelte b/sites/docs/src/lib/registry/ui/collapsible/collapsible.svelte
new file mode 100644
index 0000000000..1238eff6bf
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/collapsible/collapsible.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref data-slot="collapsible" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/command/command-dialog.svelte b/sites/docs/src/lib/registry/ui/command/command-dialog.svelte
index d641bc4b44..71935f3009 100644
--- a/sites/docs/src/lib/registry/ui/command/command-dialog.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-dialog.svelte
@@ -12,6 +12,8 @@
 		open = $bindable(false),
 		ref = $bindable(null),
 		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run",
 		portalProps,
 		children,
 		...restProps
@@ -19,13 +21,19 @@
 		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
 			portalProps?: DialogPrimitive.PortalProps;
 			children: Snippet;
+			title?: string;
+			description?: string;
 		} = $props();
 </script>
 
 <Dialog.Root bind:open {...restProps}>
-	<Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
 		<Command
-			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
 			{...restProps}
 			bind:value
 			bind:ref
diff --git a/sites/docs/src/lib/registry/ui/command/command-empty.svelte b/sites/docs/src/lib/registry/ui/command/command-empty.svelte
index 5d86afeed4..6726cd8d1a 100644
--- a/sites/docs/src/lib/registry/ui/command/command-empty.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-empty.svelte
@@ -9,4 +9,9 @@
 	}: CommandPrimitive.EmptyProps = $props();
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps} />
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn("py-6 text-center text-sm", className)}
+	{...restProps}
+/>
diff --git a/sites/docs/src/lib/registry/ui/command/command-group.svelte b/sites/docs/src/lib/registry/ui/command/command-group.svelte
index 6feb450546..d2d20cb81d 100644
--- a/sites/docs/src/lib/registry/ui/command/command-group.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-group.svelte
@@ -14,8 +14,9 @@
 </script>
 
 <CommandPrimitive.Group
-	class={cn("text-foreground overflow-hidden p-1", className)}
 	bind:ref
+	data-slot="command-group"
+	class={cn("text-foreground overflow-hidden p-1", className)}
 	{...restProps}
 >
 	{#if heading}
diff --git a/sites/docs/src/lib/registry/ui/command/command-input.svelte b/sites/docs/src/lib/registry/ui/command/command-input.svelte
index f012d046e7..90a79d70ec 100644
--- a/sites/docs/src/lib/registry/ui/command/command-input.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-input.svelte
@@ -11,11 +11,12 @@
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex items-center border-b px-2" data-command-input-wrapper="">
-	<Search class="mr-2 size-4 shrink-0 opacity-50" />
+<div class="flex h-9 items-center gap-2 border-b px-3" data-slot="command-input-wrapper">
+	<Search class="size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
+		data-slot="command-input"
 		class={cn(
-			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		bind:ref
diff --git a/sites/docs/src/lib/registry/ui/command/command-item.svelte b/sites/docs/src/lib/registry/ui/command/command-item.svelte
index 3738ff2701..2297c97851 100644
--- a/sites/docs/src/lib/registry/ui/command/command-item.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-item.svelte
@@ -10,10 +10,11 @@
 </script>
 
 <CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/command/command-link-item.svelte b/sites/docs/src/lib/registry/ui/command/command-link-item.svelte
index 9bdded2fb0..944c22dc63 100644
--- a/sites/docs/src/lib/registry/ui/command/command-link-item.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-link-item.svelte
@@ -10,10 +10,11 @@
 </script>
 
 <CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/command/command-list.svelte b/sites/docs/src/lib/registry/ui/command/command-list.svelte
index 4a07321733..569f595704 100644
--- a/sites/docs/src/lib/registry/ui/command/command-list.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-list.svelte
@@ -10,7 +10,8 @@
 </script>
 
 <CommandPrimitive.List
-	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-	{...restProps}
 	bind:ref
+	data-slot="command-list"
+	class={cn("max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", className)}
+	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/command/command-separator.svelte b/sites/docs/src/lib/registry/ui/command/command-separator.svelte
index 526777b533..35c4c95750 100644
--- a/sites/docs/src/lib/registry/ui/command/command-separator.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-separator.svelte
@@ -9,4 +9,9 @@
 	}: CommandPrimitive.SeparatorProps = $props();
 </script>
 
-<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} bind:ref {...restProps} />
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn("bg-border -mx-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/sites/docs/src/lib/registry/ui/command/command-shortcut.svelte b/sites/docs/src/lib/registry/ui/command/command-shortcut.svelte
index f09693d40a..29371c31c2 100644
--- a/sites/docs/src/lib/registry/ui/command/command-shortcut.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command-shortcut.svelte
@@ -13,6 +13,7 @@
 
 <span
 	bind:this={ref}
+	data-slot="command-shortcut"
 	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
diff --git a/sites/docs/src/lib/registry/ui/command/command.svelte b/sites/docs/src/lib/registry/ui/command/command.svelte
index feff69099e..c64a77efb6 100644
--- a/sites/docs/src/lib/registry/ui/command/command.svelte
+++ b/sites/docs/src/lib/registry/ui/command/command.svelte
@@ -11,11 +11,12 @@
 </script>
 
 <CommandPrimitive.Root
+	bind:value
+	bind:ref
+	data-slot="command"
 	class={cn(
 		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
 		className
 	)}
-	bind:value
-	bind:ref
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-checkbox-item.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-checkbox-item.svelte
index 81c97eefc7..934e8ade46 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-checkbox-item.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
 	import { cn } from "$lib/utils.js";
 	import type { Snippet } from "svelte";
 
@@ -21,18 +20,17 @@
 	bind:ref
 	bind:checked
 	bind:indeterminate
+	data-slot="context-menu-checkbox-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
-			{#if indeterminate}
-				<Minus class="size-3.5" />
-			{:else}
-				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+	{#snippet children({ checked })}
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<Check class="size-4" />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-content.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-content.svelte
index 5316652f02..e793938cb9 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-content.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-content.svelte
@@ -15,8 +15,9 @@
 <ContextMenuPrimitive.Portal {...portalProps}>
 	<ContextMenuPrimitive.Content
 		bind:ref
+		data-slot="context-menu-content"
 		class={cn(
-			"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
 			className
 		)}
 		{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-group-heading.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-group-heading.svelte
index 7a43228511..66a81b36ec 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-group-heading.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-group-heading.svelte
@@ -14,6 +14,8 @@
 
 <ContextMenuPrimitive.GroupHeading
 	bind:ref
-	class={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	data-slot="context-menu-group-heading"
+	data-inset={inset}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-group.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-group.svelte
new file mode 100644
index 0000000000..c7c1e06add
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.Group bind:ref data-slot="context-menu-group" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-item.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-item.svelte
index 9bb10ab0d2..9193d18da2 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-item.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-item.svelte
@@ -6,17 +6,21 @@
 		ref = $bindable(null),
 		class: className,
 		inset,
+		variant = "default",
 		...restProps
 	}: ContextMenuPrimitive.ItemProps & {
 		inset?: boolean;
+		variant?: "default" | "destructive";
 	} = $props();
 </script>
 
 <ContextMenuPrimitive.Item
 	bind:ref
+	data-slot="context-menu-item"
+	data-inset={inset}
+	data-variant={variant}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		inset && "pl-8",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-radio-group.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-radio-group.svelte
new file mode 100644
index 0000000000..964cb55fdc
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		...restProps
+	}: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="context-menu-radio-group"
+	{...restProps}
+/>
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-radio-item.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-radio-item.svelte
index de1159c80f..fbb8cc6f82 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-radio-item.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-radio-item.svelte
@@ -13,14 +13,15 @@
 
 <ContextMenuPrimitive.RadioItem
 	bind:ref
+	data-slot="context-menu-radio-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 			{#if checked}
 				<Circle class="size-2 fill-current" />
 			{/if}
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-separator.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-separator.svelte
index 7f17bd04de..7f5b237b9f 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-separator.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-separator.svelte
@@ -11,6 +11,7 @@
 
 <ContextMenuPrimitive.Separator
 	bind:ref
+	data-slot="context-menu-separator"
 	class={cn("bg-border -mx-1 my-1 h-px", className)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-shortcut.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-shortcut.svelte
index f09693d40a..03290421a9 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-shortcut.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-shortcut.svelte
@@ -13,6 +13,7 @@
 
 <span
 	bind:this={ref}
+	data-slot="context-menu-shortcut"
 	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-sub-content.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-sub-content.svelte
index f80ad009e0..e0245b1c5a 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-sub-content.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-sub-content.svelte
@@ -11,8 +11,9 @@
 
 <ContextMenuPrimitive.SubContent
 	bind:ref
+	data-slot="context-menu-sub-content"
 	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md focus:outline-none",
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-context-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-sub-trigger.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-sub-trigger.svelte
index 166de1e1c9..d247c88683 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/context-menu-sub-trigger.svelte
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-sub-trigger.svelte
@@ -16,13 +16,14 @@
 
 <ContextMenuPrimitive.SubTrigger
 	bind:ref
+	data-slot="context-menu-sub-trigger"
+	data-inset={inset}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-		inset && "pl-8",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto size-4" />
+	<ChevronRight class="ml-auto" />
 </ContextMenuPrimitive.SubTrigger>
diff --git a/sites/docs/src/lib/registry/ui/context-menu/context-menu-trigger.svelte b/sites/docs/src/lib/registry/ui/context-menu/context-menu-trigger.svelte
new file mode 100644
index 0000000000..3efa8575f7
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/context-menu/context-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger bind:ref data-slot="context-menu-trigger" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/context-menu/index.ts b/sites/docs/src/lib/registry/ui/context-menu/index.ts
index d1ccf9388d..95c40acbc0 100644
--- a/sites/docs/src/lib/registry/ui/context-menu/index.ts
+++ b/sites/docs/src/lib/registry/ui/context-menu/index.ts
@@ -1,5 +1,8 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 
+import Trigger from "./context-menu-trigger.svelte";
+import Group from "./context-menu-group.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
 import Item from "./context-menu-item.svelte";
 import GroupHeading from "./context-menu-group-heading.svelte";
 import Content from "./context-menu-content.svelte";
@@ -12,9 +15,6 @@ import CheckboxItem from "./context-menu-checkbox-item.svelte";
 
 const Sub = ContextMenuPrimitive.Sub;
 const Root = ContextMenuPrimitive.Root;
-const Trigger = ContextMenuPrimitive.Trigger;
-const Group = ContextMenuPrimitive.Group;
-const RadioGroup = ContextMenuPrimitive.RadioGroup;
 
 export {
 	Sub,
diff --git a/sites/docs/src/lib/registry/ui/dialog/dialog-close.svelte b/sites/docs/src/lib/registry/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000000..840b2f68b1
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/dialog/dialog-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/dialog/dialog-content.svelte b/sites/docs/src/lib/registry/ui/dialog/dialog-content.svelte
index c4f81a191b..05673e8956 100644
--- a/sites/docs/src/lib/registry/ui/dialog/dialog-content.svelte
+++ b/sites/docs/src/lib/registry/ui/dialog/dialog-content.svelte
@@ -21,17 +21,18 @@
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
+		data-slot="dialog-content"
 		class={cn(
-			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 		>
-			<X class="size-4" />
+			<X />
 			<span class="sr-only">Close</span>
 		</DialogPrimitive.Close>
 	</DialogPrimitive.Content>
diff --git a/sites/docs/src/lib/registry/ui/dialog/dialog-description.svelte b/sites/docs/src/lib/registry/ui/dialog/dialog-description.svelte
index bc048e4b60..38450239aa 100644
--- a/sites/docs/src/lib/registry/ui/dialog/dialog-description.svelte
+++ b/sites/docs/src/lib/registry/ui/dialog/dialog-description.svelte
@@ -11,6 +11,7 @@
 
 <DialogPrimitive.Description
 	bind:ref
+	data-slot="dialog-description"
 	class={cn("text-muted-foreground text-sm", className)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/dialog/dialog-footer.svelte b/sites/docs/src/lib/registry/ui/dialog/dialog-footer.svelte
index 91ecaba643..dac58f5b6a 100644
--- a/sites/docs/src/lib/registry/ui/dialog/dialog-footer.svelte
+++ b/sites/docs/src/lib/registry/ui/dialog/dialog-footer.svelte
@@ -13,7 +13,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/sites/docs/src/lib/registry/ui/dialog/dialog-header.svelte b/sites/docs/src/lib/registry/ui/dialog/dialog-header.svelte
index 8d1abfc4d2..03f22d5ada 100644
--- a/sites/docs/src/lib/registry/ui/dialog/dialog-header.svelte
+++ b/sites/docs/src/lib/registry/ui/dialog/dialog-header.svelte
@@ -13,7 +13,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/sites/docs/src/lib/registry/ui/dialog/dialog-overlay.svelte b/sites/docs/src/lib/registry/ui/dialog/dialog-overlay.svelte
index 05c30ac29f..f81ad8334e 100644
--- a/sites/docs/src/lib/registry/ui/dialog/dialog-overlay.svelte
+++ b/sites/docs/src/lib/registry/ui/dialog/dialog-overlay.svelte
@@ -11,8 +11,9 @@
 
 <DialogPrimitive.Overlay
 	bind:ref
+	data-slot="dialog-overlay"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 		className
 	)}
 	{...restProps}
diff --git a/sites/docs/src/lib/registry/ui/dialog/dialog-title.svelte b/sites/docs/src/lib/registry/ui/dialog/dialog-title.svelte
index 9cf592cf11..067e55ec1c 100644
--- a/sites/docs/src/lib/registry/ui/dialog/dialog-title.svelte
+++ b/sites/docs/src/lib/registry/ui/dialog/dialog-title.svelte
@@ -11,6 +11,7 @@
 
 <DialogPrimitive.Title
 	bind:ref
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
 	{...restProps}
 />
diff --git a/sites/docs/src/lib/registry/ui/dialog/dialog-trigger.svelte b/sites/docs/src/lib/registry/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000000..9d1e80110a
--- /dev/null
+++ b/sites/docs/src/lib/registry/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
diff --git a/sites/docs/src/lib/registry/ui/dialog/index.ts b/sites/docs/src/lib/registry/ui/dialog/index.ts
index 3286ab7a5d..dce1d9dcd7 100644
--- a/sites/docs/src/lib/registry/ui/dialog/index.ts
+++ b/sites/docs/src/lib/registry/ui/dialog/index.ts
@@ -6,10 +6,10 @@ import Header from "./dialog-header.svelte";
 import Overlay from "./dialog-overlay.svelte";
 import Content from "./dialog-content.svelte";
 import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
 
 const Root = DialogPrimitive.Root;
-const Trigger = DialogPrimitive.Trigger;
-const Close = DialogPrimitive.Close;
 const Portal = DialogPrimitive.Portal;
 
 export {