fix: id synchronization

.changeset/tasty-lobsters-obey.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: id synchronization

package.json

@@ -92,7 +92,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.60.1",
+		"@melt-ui/svelte": "0.61.1",
 		"nanoid": "^5.0.3"
 	},
 	"peerDependencies": {

src/lib/bits/accordion/components/Accordion.svelte

@@ -9,14 +9,13 @@
 	export let multiple: $$Props["multiple"] = false as Multiple;
 	export let value: $$Props["value"] = undefined;
 	export let onValueChange: $$Props["onValueChange"] = undefined;
-	export let disabled = false;
-	export let asChild = false;
+	export let disabled: $$Props["disabled"] = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		elements: { root },
 		states: { value: localValue },
-		updateOption,
-		ids
+		updateOption
 	} = setCtx({
 		multiple,
 		disabled,
@@ -43,9 +42,9 @@
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} {ids} />
+	<slot {builder} {attrs} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} {ids} />
+		<slot {builder} {attrs} />
 	</div>
 {/if}

src/lib/bits/accordion/components/AccordionContent.svelte

@@ -19,7 +19,7 @@
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	const { content, isSelected, props } = getContent();
 

src/lib/bits/accordion/components/AccordionHeader.svelte

@@ -5,7 +5,7 @@
 
 	type $$Props = HeaderProps;
 	export let level = 3;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { heading: header }
 	} = getCtx();

src/lib/bits/accordion/components/AccordionItem.svelte

@@ -6,7 +6,7 @@
 
 	export let value: $$Props["value"];
 	export let disabled: $$Props["disabled"] = undefined;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const { item, props } = setItem({ value, disabled });
 
 	$: builder = $item(props);

src/lib/bits/alert-dialog/components/AlertDialogAction.svelte

@@ -6,7 +6,7 @@
 
 	type $$Props = ActionProps;
 	type $$Events = ActionEvents;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { close }
 	} = getCtx();

src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte

@@ -6,7 +6,7 @@
 
 	type $$Props = CancelProps;
 	type $$Events = CancelEvents;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { close }
 	} = getCtx();

src/lib/bits/alert-dialog/components/AlertDialogContent.svelte

@@ -16,14 +16,19 @@
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
-	export let asChild = false;
+	export let id: $$Props["id"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		elements: { content },
-		states: { open }
+		states: { open },
+		ids
 	} = getCtx();
 
+	$: if (id) {
+		ids.content.set(id);
+	}
+
 	$: builder = $content;
 	const attrs = getAttrs("content");
 </script>

src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte

@@ -4,11 +4,18 @@
 	import type { DescriptionProps } from "../types.js";
 
 	type $$Props = DescriptionProps;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
 	const {
-		elements: { description }
+		elements: { description },
+		ids
 	} = getCtx();
 
+	$: if (id) {
+		ids.description.set(id);
+	}
+
 	$: builder = $description;
 	const attrs = getAttrs("description");
 </script>

src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte

@@ -17,7 +17,7 @@
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { overlay },
 		states: { open }

src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte

@@ -4,7 +4,7 @@
 	import type { PortalProps } from "../types.js";
 
 	type $$Props = PortalProps;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { portalled }
 	} = getCtx();

src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte

@@ -4,12 +4,19 @@
 	import type { TitleProps } from "../types.js";
 
 	type $$Props = TitleProps;
-	export let level: TitleProps["level"] = "h2";
-	export let asChild = false;
+	export let level: $$Props["level"] = "h2";
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
 	const {
-		elements: { title }
+		elements: { title },
+		ids
 	} = getCtx();
 
+	$: if (id) {
+		ids.title.set(id);
+	}
+
 	$: builder = $title;
 	const attrs = getAttrs("title");
 </script>

src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte

@@ -6,7 +6,7 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { trigger }
 	} = getCtx();

src/lib/bits/avatar/components/Avatar.svelte

@@ -6,7 +6,7 @@
 	export let delayMs: $$Props["delayMs"] = undefined;
 	export let loadingStatus: $$Props["loadingStatus"] = undefined;
 	export let onLoadingStatusChange: $$Props["onLoadingStatusChange"] = undefined;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		states: { loadingStatus: localLoadingStatus },

src/lib/bits/avatar/components/AvatarFallback.svelte

@@ -4,7 +4,7 @@
 	import type { FallbackProps } from "../types.js";
 
 	type $$Props = FallbackProps;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { fallback }
 	} = getCtx();

src/lib/bits/avatar/components/AvatarImage.svelte

@@ -6,7 +6,7 @@
 	type $$Props = ImageProps;
 	export let src: $$Props["src"] = undefined;
 	export let alt: $$Props["alt"] = undefined;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	$: image = getImage(src).elements.image;
 	$: builder = $image;

src/lib/bits/checkbox/components/Checkbox.svelte

@@ -12,7 +12,7 @@
 	export let required: $$Props["required"] = undefined;
 	export let value: $$Props["value"] = undefined;
 	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		elements: { root },

src/lib/bits/collapsible/components/Collapsible.svelte

@@ -8,7 +8,7 @@
 	export let disabled: $$Props["disabled"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		elements: { root },

src/lib/bits/collapsible/components/CollapsibleContent.svelte

@@ -15,7 +15,7 @@
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		elements: { content },

src/lib/bits/collapsible/components/CollapsibleTrigger.svelte

@@ -7,7 +7,7 @@
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
 
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { trigger }
 	} = getCtx();

src/lib/bits/context-menu/components/ContextMenuArrow.svelte

@@ -6,7 +6,7 @@
 	type $$Props = ArrowProps;
 
 	export let size = 8;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		elements: { arrow }

src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte

@@ -9,7 +9,7 @@
 	export let checked: $$Props["checked"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
 	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { checkboxItem },
 		states: { checked: localChecked },

src/lib/bits/context-menu/components/ContextMenuContent.svelte

@@ -19,14 +19,21 @@
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
 
-	export let asChild = false;
 	const {
 		elements: { menu },
-		states: { open }
+		states: { open },
+		ids
 	} = getContent(sideOffset);
 
 	const dispatch = createDispatcher();
+
+	$: if (id) {
+		ids.menu.set(id);
+	}
+
 	$: builder = $menu;
 	const attrs = getAttrs("content");
 </script>

src/lib/bits/context-menu/components/ContextMenuGroup.svelte

@@ -3,7 +3,7 @@
 	import { setGroup, getAttrs } from "../ctx.js";
 	import type { GroupProps } from "../types.js";
 	type $$Props = GroupProps;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const { group, id } = setGroup();
 	$: builder = $group(id);
 	const attrs = getAttrs("group");

src/lib/bits/context-menu/components/ContextMenuLabel.svelte

@@ -3,7 +3,7 @@
 	import { getGroupLabel, getAttrs } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
 	type $$Props = LabelProps;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 	const { groupLabel, id } = getGroupLabel();
 	$: builder = $groupLabel(id);
 	const attrs = getAttrs("label");

src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte

@@ -6,7 +6,7 @@
 	type $$Props = RadioGroupProps;
 	export let value: $$Props["value"] = undefined;
 	export let onValueChange: $$Props["onValueChange"] = undefined;
-	export let asChild = false;
+	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		elements: { radioGroup },