bits-ui 1.8.0 → 2.2.0

package/dist/bits/date-range-field/date-range-field.svelte.js

@@ -1,4 +1,4 @@
-import { box, onDestroyEffect, useRefById } from "svelte-toolbelt";
+import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { DateFieldInputState, useDateFieldRoot } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -21,17 +21,13 @@ export class DateRangeFieldRootState {
     startValueComplete = $derived.by(() => this.opts.startValue.current !== undefined);
     endValueComplete = $derived.by(() => this.opts.endValue.current !== undefined);
     rangeComplete = $derived(this.startValueComplete && this.endValueComplete);
+    domContext;
     constructor(opts) {
         this.opts = opts;
         this.formatter = createFormatter(this.opts.locale.current);
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.fieldNode = node;
-            },
-        });
+        this.domContext = new DOMContext(this.opts.ref);
         onDestroyEffect(() => {
-            removeDescriptionElement(this.descriptionId);
+            removeDescriptionElement(this.descriptionId, this.domContext.getDocument());
         });
         $effect(() => {
             if (this.formatter.getLocale() === this.opts.locale.current)
@@ -136,6 +132,7 @@ export class DateRangeFieldRootState {
         role: "group",
         [DATE_RANGE_FIELD_ROOT_ATTR]: "",
         "data-invalid": getDataInvalid(this.isInvalid),
+        ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
     }));
 }
 class DateRangeFieldLabelState {
@@ -144,12 +141,6 @@ class DateRangeFieldLabelState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                root.labelNode = node;
-            },
-        });
     }
     #onclick = () => {
         if (this.root.opts.disabled.current)
@@ -166,6 +157,7 @@ class DateRangeFieldLabelState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [DATE_RANGE_FIELD_LABEL_ATTR]: "",
         onclick: this.#onclick,
+        ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));
 }
 export const DateRangeFieldRootContext = new Context("DateRangeField.Root");

package/dist/bits/date-range-picker/components/date-range-picker-calendar.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateRangePickerCalendarProps } from "../types.js";
 	import { DateRangePickerRootContext } from "../date-range-picker.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { useRangeCalendarRoot } from "../../range-calendar/range-calendar.svelte.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: DateRangePickerCalendarProps = $props();

package/dist/bits/dialog/components/dialog-close.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogClose } from "../dialog.svelte.js";
 	import type { DialogCloseProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		disabled = false,
 		...restProps

package/dist/bits/dialog/components/dialog-content.svelte

@@ -7,13 +7,15 @@
 	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),
@@ -43,9 +45,11 @@
 	{...mergedProps}
 	{forceMount}
 	present={contentState.root.opts.open.current || forceMount}
+	ref={contentState.opts.ref}
 >
 	{#snippet presence()}
 		<FocusScope
+			ref={contentState.opts.ref}
 			loop
 			trapFocus={shouldTrapFocus({
 				forceMount,
@@ -73,6 +77,7 @@
 				>
 					<DismissibleLayer
 						{...mergedProps}
+						ref={contentState.opts.ref}
 						enabled={contentState.root.opts.open.current}
 						onInteractOutside={(e) => {
 							onInteractOutside(e);
@@ -82,6 +87,7 @@
 					>
 						<TextSelectionLayer
 							{...mergedProps}
+							ref={contentState.opts.ref}
 							enabled={contentState.root.opts.open.current}
 						>
 							{#if child}

package/dist/bits/dialog/components/dialog-description.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogDescription } from "../dialog.svelte.js";
 	import type { DialogDescriptionProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),

package/dist/bits/dialog/components/dialog-overlay.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogOverlay } from "../dialog.svelte.js";
 	import type { DialogOverlayProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		forceMount = false,
 		child,
 		children,
@@ -25,7 +27,10 @@
 	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
 </script>
 
-<PresenceLayer {id} present={overlayState.root.opts.open.current || forceMount}>
+<PresenceLayer
+	present={overlayState.root.opts.open.current || forceMount}
+	ref={overlayState.opts.ref}
+>
 	{#snippet presence()}
 		{#if child}
 			{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}

package/dist/bits/dialog/components/dialog-title.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogTitle } from "../dialog.svelte.js";
 	import type { DialogTitleProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		children,

package/dist/bits/dialog/components/dialog-trigger.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogTrigger } from "../dialog.svelte.js";
 	import type { DialogTriggerProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,

package/dist/bits/dialog/dialog.svelte.d.ts

@@ -95,7 +95,7 @@ declare class DialogTitleState {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly role: "heading";
-        readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
+        readonly "aria-level": 1 | 2 | 3 | 4 | 6 | 5;
     };
 }
 type DialogDescriptionStateProps = WithRefProps;

package/dist/bits/dialog/dialog.svelte.js

@@ -1,7 +1,8 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
+import { untrack } from "svelte";
 function createAttrs(variant) {
     return {
         content: `data-${variant}-content`,
@@ -50,13 +51,6 @@ class DialogTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-                this.root.triggerId = node?.id;
-            },
-        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -85,6 +79,10 @@ class DialogTriggerState {
         onclick: this.onclick,
         disabled: this.opts.disabled.current ? true : undefined,
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => untrack(() => {
+            this.root.triggerNode = v;
+            this.root.triggerId = v?.id;
+        })),
     }));
 }
 class DialogCloseState {
@@ -96,10 +94,6 @@ class DialogCloseState {
         this.root = root;
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-        });
     }
     onclick(e) {
         if (this.opts.disabled.current)
@@ -124,6 +118,7 @@ class DialogCloseState {
         disabled: this.opts.disabled.current ? true : undefined,
         tabindex: 0,
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref),
     }));
 }
 class DialogActionState {
@@ -133,12 +128,12 @@ class DialogActionState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [this.#attr]: "",
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref),
     }));
 }
 class DialogTitleState {
@@ -147,13 +142,6 @@ class DialogTitleState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.titleId = node?.id;
-            },
-            deps: () => this.root.opts.open.current,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -161,6 +149,7 @@ class DialogTitleState {
         "aria-level": this.opts.level.current,
         [this.root.attrs.title]: "",
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => (this.root.titleId = v?.id)),
     }));
 }
 class DialogDescriptionState {
@@ -169,19 +158,15 @@ class DialogDescriptionState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-            onRefChange: (node) => {
-                this.root.descriptionNode = node;
-                this.root.descriptionId = node?.id;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [this.root.attrs.description]: "",
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => {
+            this.root.descriptionNode = v;
+            this.root.descriptionId = v?.id;
+        }),
     }));
 }
 class DialogContentState {
@@ -190,14 +175,6 @@ class DialogContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-                this.root.contentId = node?.id;
-            },
-        });
     }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
@@ -213,6 +190,10 @@ class DialogContentState {
         },
         tabindex: this.root.opts.variant.current === "alert-dialog" ? -1 : undefined,
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => {
+            this.root.contentNode = v;
+            this.root.contentId = v?.id;
+        }),
     }));
 }
 class DialogOverlayState {
@@ -221,10 +202,6 @@ class DialogOverlayState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-        });
     }
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
@@ -234,6 +211,7 @@ class DialogOverlayState {
             pointerEvents: "auto",
         },
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref),
     }));
 }
 class AlertDialogCancelState {
@@ -244,13 +222,6 @@ class AlertDialogCancelState {
         this.root = root;
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-            onRefChange: (node) => {
-                this.root.cancelNode = node;
-            },
-        });
     }
     onclick(e) {
         if (this.opts.disabled.current)
@@ -274,6 +245,7 @@ class AlertDialogCancelState {
         onkeydown: this.onkeydown,
         tabindex: 0,
         ...this.root.sharedProps,
+        ...attachRef(this.opts.ref, (v) => (this.root.cancelNode = v)),
     }));
 }
 const DialogRootContext = new Context("Dialog.Root");

package/dist/bits/dropdown-menu/components/dropdown-menu-content-static.svelte

@@ -2,15 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DropdownMenuContentStaticProps } from "../types.js";
 	import { useMenuContent } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),
@@ -52,6 +53,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -72,13 +74,13 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -99,7 +101,6 @@
 					{@render children?.()}
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

package/dist/bits/dropdown-menu/components/dropdown-menu-content.svelte

@@ -2,15 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DropdownMenuContentProps } from "../types.js";
 	import { useMenuContent } from "../../menu/menu.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),
@@ -52,6 +53,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -73,13 +75,13 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -101,7 +103,6 @@
 					</div>
 				</div>
 			{/if}
-			<Mounted bind:mounted={contentState.mounted} />
 		{/snippet}
 	</PopperLayer>
 {/if}

package/dist/bits/index.d.ts

@@ -32,6 +32,8 @@ export { Separator } from "./separator/index.js";
 export { Slider } from "./slider/index.js";
 export { Switch } from "./switch/index.js";
 export { Tabs } from "./tabs/index.js";
+export { TimeField } from "./time-field/index.js";
+export { TimeRangeField } from "./time-range-field/index.js";
 export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";
 export { Toolbar } from "./toolbar/index.js";

package/dist/bits/index.js

@@ -32,6 +32,8 @@ export { Separator } from "./separator/index.js";
 export { Slider } from "./slider/index.js";
 export { Switch } from "./switch/index.js";
 export { Tabs } from "./tabs/index.js";
+export { TimeField } from "./time-field/index.js";
+export { TimeRangeField } from "./time-range-field/index.js";
 export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";
 export { Toolbar } from "./toolbar/index.js";

package/dist/bits/label/components/label.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LabelRootProps } from "../types.js";
 	import { setLabelRootState } from "../label.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		for: forProp,
 		...restProps

package/dist/bits/label/label.svelte.js

@@ -1,11 +1,10 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 const ROOT_ATTR = "data-label-root";
 class LabelRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
         this.onmousedown = this.onmousedown.bind(this);
-        useRefById(opts);
     }
     onmousedown(e) {
         if (e.detail > 1)
@@ -15,6 +14,7 @@ class LabelRootState {
         id: this.opts.id.current,
         [ROOT_ATTR]: "",
         onmousedown: this.onmousedown,
+        ...attachRef(this.opts.ref),
     }));
 }
 export function setLabelRootState(props) {

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -2,16 +2,18 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewContentStaticProps } from "../types.js";
 	import { useLinkPreviewContent } from "../link-preview.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
@@ -36,6 +38,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.root.opts.open.current}
 		isStatic
 		{id}
@@ -61,6 +64,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.root.opts.open.current}
 		isStatic
 		{id}

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -2,17 +2,19 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewContentProps } from "../types.js";
 	import { useLinkPreviewContent } from "../link-preview.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		side = "top",
 		sideOffset = 0,
@@ -56,6 +58,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.root.opts.open.current}
 		{id}
 		trapFocus={false}
@@ -82,6 +85,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.root.opts.open.current}
 		{id}
 		trapFocus={false}

package/dist/bits/link-preview/components/link-preview-trigger.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewTriggerProps } from "../types.js";
 	import { useLinkPreviewTrigger } from "../link-preview.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		...restProps
@@ -24,7 +26,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsFocusEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 type LinkPreviewRootStateProps = WritableBoxedValues<{
@@ -16,6 +17,7 @@ declare class LinkPreviewRootState {
     contentMounted: boolean;
     triggerNode: HTMLElement | null;
     isOpening: boolean;
+    domContext: DOMContext;
     constructor(opts: LinkPreviewRootStateProps);
     clearTimeout(): void;
     handleOpen(): void;