bits-ui 2.6.2 → 2.8.0

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

@@ -1,14 +1,17 @@
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
 type DialogVariant = "alert-dialog" | "dialog";
-declare const dialogAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"]>;
-type DialogRootStateProps = WritableBoxedValues<{
+declare const dialogAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"]>;
+interface DialogRootStateOpts extends WritableBoxedValues<{
     open: boolean;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     variant: DialogVariant;
-}>;
-declare class DialogRootState {
-    readonly opts: DialogRootStateProps;
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}> {
+}
+export declare class DialogRootState {
+    static create(opts: DialogRootStateOpts): DialogRootState;
+    readonly opts: DialogRootStateOpts;
     triggerNode: HTMLElement | null;
     contentNode: HTMLElement | null;
     descriptionNode: HTMLElement | null;
@@ -17,24 +20,26 @@ declare class DialogRootState {
     triggerId: string | undefined;
     descriptionId: string | undefined;
     cancelNode: HTMLElement | null;
-    constructor(opts: DialogRootStateProps);
+    constructor(opts: DialogRootStateOpts);
     handleOpen(): void;
     handleClose(): void;
     getBitsAttr: typeof dialogAttrs.getAttr;
-    sharedProps: {
+    readonly sharedProps: {
         readonly "data-state": "open" | "closed";
     };
 }
-type DialogTriggerStateProps = WithRefProps & ReadableBoxedValues<{
+interface DialogTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>;
-declare class DialogTriggerState {
-    readonly opts: DialogTriggerStateProps;
+}> {
+}
+export declare class DialogTriggerState {
+    static create(opts: DialogTriggerStateOpts): DialogTriggerState;
+    readonly opts: DialogTriggerStateOpts;
     readonly root: DialogRootState;
-    constructor(opts: DialogTriggerStateProps, root: DialogRootState);
+    constructor(opts: DialogTriggerStateOpts, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly "aria-haspopup": "dialog";
@@ -45,17 +50,19 @@ declare class DialogTriggerState {
         readonly disabled: true | undefined;
     };
 }
-type DialogCloseStateProps = WithRefProps & ReadableBoxedValues<{
+interface DialogCloseStateOpts extends WithRefOpts, ReadableBoxedValues<{
     variant: "action" | "cancel" | "close";
     disabled: boolean;
-}>;
-declare class DialogCloseState {
-    readonly opts: DialogCloseStateProps;
+}> {
+}
+export declare class DialogCloseState {
+    static create(opts: DialogCloseStateOpts): DialogCloseState;
+    readonly opts: DialogCloseStateOpts;
     readonly root: DialogRootState;
-    constructor(opts: DialogCloseStateProps, root: DialogRootState);
+    constructor(opts: DialogCloseStateOpts, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly onclick: (e: BitsMouseEvent) => void;
@@ -64,49 +71,57 @@ declare class DialogCloseState {
         readonly tabindex: 0;
     };
 }
-type DialogActionStateProps = WithRefProps;
-declare class DialogActionState {
-    readonly opts: DialogActionStateProps;
+interface DialogActionStateOpts extends WithRefOpts {
+}
+export declare class DialogActionState {
+    static create(opts: DialogActionStateOpts): DialogActionState;
+    readonly opts: DialogActionStateOpts;
     readonly root: DialogRootState;
-    constructor(opts: DialogActionStateProps, root: DialogRootState);
-    props: {
+    constructor(opts: DialogActionStateOpts, root: DialogRootState);
+    readonly props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
     };
 }
-type DialogTitleStateProps = WithRefProps<ReadableBoxedValues<{
+interface DialogTitleStateOpts extends WithRefOpts, ReadableBoxedValues<{
     level: 1 | 2 | 3 | 4 | 5 | 6;
-}>>;
-declare class DialogTitleState {
-    readonly opts: DialogTitleStateProps;
+}> {
+}
+export declare class DialogTitleState {
+    static create(opts: DialogTitleStateOpts): DialogTitleState;
+    readonly opts: DialogTitleStateOpts;
     readonly root: DialogRootState;
-    constructor(opts: DialogTitleStateProps, root: DialogRootState);
-    props: {
+    constructor(opts: DialogTitleStateOpts, root: DialogRootState);
+    readonly props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly role: "heading";
         readonly "aria-level": 1 | 2 | 3 | 4 | 6 | 5;
     };
 }
-type DialogDescriptionStateProps = WithRefProps;
-declare class DialogDescriptionState {
-    readonly opts: DialogDescriptionStateProps;
+interface DialogDescriptionStateOpts extends WithRefOpts {
+}
+export declare class DialogDescriptionState {
+    static create(opts: DialogDescriptionStateOpts): DialogDescriptionState;
+    readonly opts: DialogDescriptionStateOpts;
     readonly root: DialogRootState;
-    constructor(opts: DialogDescriptionStateProps, root: DialogRootState);
-    props: {
+    constructor(opts: DialogDescriptionStateOpts, root: DialogRootState);
+    readonly props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
     };
 }
-type DialogContentStateProps = WithRefProps;
-declare class DialogContentState {
-    readonly opts: DialogContentStateProps;
+interface DialogContentStateOpts extends WithRefOpts {
+}
+export declare class DialogContentState {
+    static create(opts: DialogContentStateOpts): DialogContentState;
+    readonly opts: DialogContentStateOpts;
     readonly root: DialogRootState;
-    constructor(opts: DialogContentStateProps, root: DialogRootState);
-    snippetProps: {
+    constructor(opts: DialogContentStateOpts, root: DialogRootState);
+    readonly snippetProps: {
         open: boolean;
     };
-    props: {
+    readonly props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly role: "dialog" | "alertdialog";
@@ -120,15 +135,17 @@ declare class DialogContentState {
         readonly tabindex: -1 | undefined;
     };
 }
-type DialogOverlayStateProps = WithRefProps;
-declare class DialogOverlayState {
-    readonly opts: DialogOverlayStateProps;
+interface DialogOverlayStateOpts extends WithRefOpts {
+}
+export declare class DialogOverlayState {
+    static create(opts: DialogOverlayStateOpts): DialogOverlayState;
+    readonly opts: DialogOverlayStateOpts;
     readonly root: DialogRootState;
-    constructor(opts: DialogOverlayStateProps, root: DialogRootState);
-    snippetProps: {
+    constructor(opts: DialogOverlayStateOpts, root: DialogRootState);
+    readonly snippetProps: {
         open: boolean;
     };
-    props: {
+    readonly props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly style: {
@@ -136,16 +153,18 @@ declare class DialogOverlayState {
         };
     };
 }
-type AlertDialogCancelStateProps = WithRefProps & ReadableBoxedValues<{
+interface AlertDialogCancelStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
-}>;
-declare class AlertDialogCancelState {
-    readonly opts: AlertDialogCancelStateProps;
+}> {
+}
+export declare class AlertDialogCancelState {
+    static create(opts: AlertDialogCancelStateOpts): AlertDialogCancelState;
+    readonly opts: AlertDialogCancelStateOpts;
     readonly root: DialogRootState;
-    constructor(opts: AlertDialogCancelStateProps, root: DialogRootState);
+    constructor(opts: AlertDialogCancelStateOpts, root: DialogRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    readonly props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly onclick: (e: BitsMouseEvent) => void;
@@ -153,13 +172,4 @@ declare class AlertDialogCancelState {
         readonly tabindex: 0;
     };
 }
-export declare function useDialogRoot(props: DialogRootStateProps): DialogRootState;
-export declare function useDialogTrigger(props: DialogTriggerStateProps): DialogTriggerState;
-export declare function useDialogTitle(props: DialogTitleStateProps): DialogTitleState;
-export declare function useDialogContent(props: DialogContentStateProps): DialogContentState;
-export declare function useDialogOverlay(props: DialogOverlayStateProps): DialogOverlayState;
-export declare function useDialogDescription(props: DialogDescriptionStateProps): DialogDescriptionState;
-export declare function useDialogClose(props: DialogCloseStateProps): DialogCloseState;
-export declare function useAlertDialogCancel(props: AlertDialogCancelStateProps): AlertDialogCancelState;
-export declare function useAlertDialogAction(props: DialogActionStateProps): DialogActionState;
 export {};

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

@@ -1,13 +1,18 @@
-import { attachRef } from "svelte-toolbelt";
+import { attachRef, box, } from "svelte-toolbelt";
 import { Context } from "runed";
 import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { untrack } from "svelte";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const dialogAttrs = createBitsAttrs({
     component: "dialog",
     parts: ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"],
 });
-class DialogRootState {
+const DialogRootContext = new Context("Dialog.Root | AlertDialog.Root");
+export class DialogRootState {
+    static create(opts) {
+        return DialogRootContext.set(new DialogRootState(opts));
+    }
     opts;
     triggerNode = $state(null);
     contentNode = $state(null);
@@ -21,6 +26,14 @@ class DialogRootState {
         this.opts = opts;
         this.handleOpen = this.handleOpen.bind(this);
         this.handleClose = this.handleClose.bind(this);
+        new OpenChangeComplete({
+            ref: box.with(() => this.contentNode),
+            open: this.opts.open,
+            enabled: true,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
     }
     handleOpen() {
         if (this.opts.open.current)
@@ -39,7 +52,10 @@ class DialogRootState {
         "data-state": getDataOpenClosed(this.opts.open.current),
     }));
 }
-class DialogTriggerState {
+export class DialogTriggerState {
+    static create(opts) {
+        return new DialogTriggerState(opts, DialogRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -79,7 +95,10 @@ class DialogTriggerState {
         })),
     }));
 }
-class DialogCloseState {
+export class DialogCloseState {
+    static create(opts) {
+        return new DialogCloseState(opts, DialogRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -114,7 +133,10 @@ class DialogCloseState {
         ...attachRef(this.opts.ref),
     }));
 }
-class DialogActionState {
+export class DialogActionState {
+    static create(opts) {
+        return new DialogActionState(opts, DialogRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -128,7 +150,10 @@ class DialogActionState {
         ...attachRef(this.opts.ref),
     }));
 }
-class DialogTitleState {
+export class DialogTitleState {
+    static create(opts) {
+        return new DialogTitleState(opts, DialogRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -144,7 +169,10 @@ class DialogTitleState {
         ...attachRef(this.opts.ref, (v) => (this.root.titleId = v?.id)),
     }));
 }
-class DialogDescriptionState {
+export class DialogDescriptionState {
+    static create(opts) {
+        return new DialogDescriptionState(opts, DialogRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -161,7 +189,10 @@ class DialogDescriptionState {
         }),
     }));
 }
-class DialogContentState {
+export class DialogContentState {
+    static create(opts) {
+        return new DialogContentState(opts, DialogRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -188,7 +219,10 @@ class DialogContentState {
         }),
     }));
 }
-class DialogOverlayState {
+export class DialogOverlayState {
+    static create(opts) {
+        return new DialogOverlayState(opts, DialogRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -206,7 +240,10 @@ class DialogOverlayState {
         ...attachRef(this.opts.ref),
     }));
 }
-class AlertDialogCancelState {
+export class AlertDialogCancelState {
+    static create(opts) {
+        return new AlertDialogCancelState(opts, DialogRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -240,31 +277,3 @@ class AlertDialogCancelState {
         ...attachRef(this.opts.ref, (v) => (this.root.cancelNode = v)),
     }));
 }
-const DialogRootContext = new Context("Dialog.Root");
-export function useDialogRoot(props) {
-    return DialogRootContext.set(new DialogRootState(props));
-}
-export function useDialogTrigger(props) {
-    return new DialogTriggerState(props, DialogRootContext.get());
-}
-export function useDialogTitle(props) {
-    return new DialogTitleState(props, DialogRootContext.get());
-}
-export function useDialogContent(props) {
-    return new DialogContentState(props, DialogRootContext.get());
-}
-export function useDialogOverlay(props) {
-    return new DialogOverlayState(props, DialogRootContext.get());
-}
-export function useDialogDescription(props) {
-    return new DialogDescriptionState(props, DialogRootContext.get());
-}
-export function useDialogClose(props) {
-    return new DialogCloseState(props, DialogRootContext.get());
-}
-export function useAlertDialogCancel(props) {
-    return new AlertDialogCancelState(props, DialogRootContext.get());
-}
-export function useAlertDialogAction(props) {
-    return new DialogActionState(props, DialogRootContext.get());
-}

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

@@ -16,6 +16,10 @@ export type DialogRootPropsWithoutHTML = WithChildren<{
      * A callback that is called when the popover's open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback called when the dialog finishes opening/closing animations.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
 }>;
 export type DialogRootProps = DialogRootPropsWithoutHTML;
 export type DialogContentSnippetProps = {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DropdownMenuContentStaticProps } from "../types.js";
-	import { useMenuContent } from "../../menu/menu.svelte.js";
+	import { MenuContentState } from "../../menu/menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -23,7 +23,7 @@
 		...restProps
 	}: DropdownMenuContentStaticProps = $props();
 
-	const contentState = useMenuContent({
+	const contentState = MenuContentState.create({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
 		ref: box.with(
@@ -81,7 +81,7 @@
 		{...mergedProps}
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
-		present={contentState.parentMenu.opts.open.current}
+		open={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
 		trapFocus

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DropdownMenuContentProps } from "../types.js";
-	import { useMenuContent } from "../../menu/menu.svelte.js";
+	import { MenuContentState } from "../../menu/menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -23,7 +23,7 @@
 		...restProps
 	}: DropdownMenuContentProps = $props();
 
-	const contentState = useMenuContent({
+	const contentState = MenuContentState.create({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
 		ref: box.with(
@@ -82,7 +82,7 @@
 		{...mergedProps}
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
-		present={contentState.parentMenu.opts.open.current}
+		open={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
 		trapFocus

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LabelRootProps } from "../types.js";
-	import { setLabelRootState } from "../label.svelte.js";
+	import { LabelRootState } from "../label.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: LabelRootProps = $props();
 
-	const rootState = setLabelRootState({
+	const rootState = LabelRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,13 +1,14 @@
-import type { BitsMouseEvent, WithRefProps } from "../../internal/types.js";
-type LabelRootStateProps = WithRefProps;
-declare class LabelRootState {
-    readonly opts: LabelRootStateProps;
-    constructor(opts: LabelRootStateProps);
+import type { BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+interface LabelRootStateOpts extends WithRefOpts {
+}
+export declare class LabelRootState {
+    static create(opts: LabelRootStateOpts): LabelRootState;
+    readonly opts: LabelRootStateOpts;
+    constructor(opts: LabelRootStateOpts);
     onmousedown(e: BitsMouseEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly onmousedown: (e: BitsMouseEvent) => void;
     };
 }
-export declare function setLabelRootState(props: LabelRootStateProps): LabelRootState;
 export {};

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

@@ -4,7 +4,10 @@ const labelAttrs = createBitsAttrs({
     component: "label",
     parts: ["root"],
 });
-class LabelRootState {
+export class LabelRootState {
+    static create(opts) {
+        return new LabelRootState(opts);
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
@@ -21,6 +24,3 @@ class LabelRootState {
         ...attachRef(this.opts.ref),
     }));
 }
-export function setLabelRootState(props) {
-    return new LabelRootState(props);
-}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewContentStaticProps } from "../types.js";
-	import { useLinkPreviewContent } from "../link-preview.svelte.js";
+	import { LinkPreviewContentState } from "../link-preview.svelte.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";
@@ -21,7 +21,7 @@
 		...restProps
 	}: LinkPreviewContentStaticProps = $props();
 
-	const contentState = useLinkPreviewContent({
+	const contentState = LinkPreviewContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -65,7 +65,7 @@
 		{...mergedProps}
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
-		present={contentState.root.opts.open.current}
+		open={contentState.root.opts.open.current}
 		isStatic
 		{id}
 		trapFocus={false}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewContentProps } from "../types.js";
-	import { useLinkPreviewContent } from "../link-preview.svelte.js";
+	import { LinkPreviewContentState } from "../link-preview.svelte.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";
@@ -30,7 +30,7 @@
 		...restProps
 	}: LinkPreviewContentProps = $props();
 
-	const contentState = useLinkPreviewContent({
+	const contentState = LinkPreviewContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -86,7 +86,7 @@
 		{...mergedProps}
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
-		present={contentState.root.opts.open.current}
+		open={contentState.root.opts.open.current}
 		{id}
 		trapFocus={false}
 		loop={false}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { LinkPreviewTriggerProps } from "../types.js";
-	import { useLinkPreviewTrigger } from "../link-preview.svelte.js";
+	import { LinkPreviewTriggerState } from "../link-preview.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
@@ -15,7 +15,7 @@
 		...restProps
 	}: LinkPreviewTriggerProps = $props();
 
-	const triggerState = useLinkPreviewTrigger({
+	const triggerState = LinkPreviewTriggerState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,19 +1,20 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { LinkPreviewRootProps } from "../types.js";
-	import { useLinkPreviewRoot } from "../link-preview.svelte.js";
+	import { LinkPreviewRootState } from "../link-preview.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
 	let {
 		open = $bindable(false),
 		onOpenChange = noop,
+		onOpenChangeComplete = noop,
 		openDelay = 700,
 		closeDelay = 300,
 		children,
 	}: LinkPreviewRootProps = $props();
 
-	useLinkPreviewRoot({
+	LinkPreviewRootState.create({
 		open: box.with(
 			() => open,
 			(v) => {
@@ -23,6 +24,7 @@
 		),
 		openDelay: box.with(() => openDelay),
 		closeDelay: box.with(() => closeDelay),
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 </script>