bits-ui 2.6.2 → 2.8.0

package/dist/bits/date-range-field/components/date-range-field-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateRangeFieldInputProps } from "../types.js";
-	import { useDateRangeFieldInput } from "../date-range-field.svelte.js";
+	import { DateRangeFieldInputState } from "../date-range-field.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import DateFieldHiddenInput from "../../date-field/components/date-field-hidden-input.svelte";
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: DateRangeFieldInputProps = $props();
 
-	const inputState = useDateRangeFieldInput(
+	const inputState = DateRangeFieldInputState.create(
 		{
 			id: box.with(() => id),
 			ref: box.with(

package/dist/bits/date-range-field/components/date-range-field-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDateRangeFieldLabel } from "../date-range-field.svelte.js";
+	import { DateRangeFieldLabelState } from "../date-range-field.svelte.js";
 	import type { DateRangeFieldLabelProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -14,7 +14,7 @@
 		...restProps
 	}: DateRangeFieldLabelProps = $props();
 
-	const labelState = useDateRangeFieldLabel({
+	const labelState = DateRangeFieldLabelState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -2,7 +2,7 @@
 	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
-	import { useDateRangeFieldRoot } from "../date-range-field.svelte.js";
+	import { DateRangeFieldRootState } from "../date-range-field.svelte.js";
 	import type { DateRangeFieldRootProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
@@ -79,7 +79,7 @@
 		}
 	);
 
-	const rootState = useDateRangeFieldRoot({
+	const rootState = DateRangeFieldRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/date-range-field/date-range-field.svelte.d.ts

@@ -1,20 +1,19 @@
 import type { DateValue } from "@internationalized/date";
-import { DOMContext } from "svelte-toolbelt";
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
-import type { DateFieldRootState } from "../date-field/date-field.svelte.js";
-import { DateFieldInputState } from "../date-field/date-field.svelte.js";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import { DateFieldInputState, DateFieldRootState } from "../date-field/date-field.svelte.js";
 import type { DateOnInvalid, DateRange, DateRangeValidator, SegmentPart } from "../../shared/index.js";
-import type { WithRefProps } from "../../internal/types.js";
+import type { WithRefOpts } from "../../internal/types.js";
 import type { Granularity } from "../../shared/date/types.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
-export declare const dateRangeFieldAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "label"]>;
-type DateRangeFieldRootStateProps = WithRefProps<WritableBoxedValues<{
+export declare const dateRangeFieldAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "label"]>;
+export declare const DateRangeFieldRootContext: Context<DateRangeFieldRootState>;
+interface DateRangeFieldRootStateOpts extends WithRefOpts, WritableBoxedValues<{
     value: DateRange;
     placeholder: DateValue;
     startValue: DateValue | undefined;
     endValue: DateValue | undefined;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     readonlySegments: SegmentPart[];
     validate: DateRangeValidator | undefined;
     onInvalid: DateOnInvalid | undefined;
@@ -28,10 +27,12 @@ type DateRangeFieldRootStateProps = WithRefProps<WritableBoxedValues<{
     hideTimeZone: boolean;
     required: boolean;
     errorMessageId: string | undefined;
-}>>;
+}> {
+}
 export declare class DateRangeFieldRootState {
     #private;
-    readonly opts: DateRangeFieldRootStateProps;
+    static create(opts: DateRangeFieldRootStateOpts): DateRangeFieldRootState;
+    readonly opts: DateRangeFieldRootStateOpts;
     startFieldState: DateFieldRootState | undefined;
     endFieldState: DateFieldRootState | undefined;
     descriptionId: string;
@@ -39,12 +40,12 @@ export declare class DateRangeFieldRootState {
     fieldNode: HTMLElement | null;
     labelNode: HTMLElement | null;
     descriptionNode: HTMLElement | null;
-    startValueComplete: boolean;
-    endValueComplete: boolean;
-    rangeComplete: boolean;
+    readonly startValueComplete: boolean;
+    readonly endValueComplete: boolean;
+    readonly rangeComplete: boolean;
     domContext: DOMContext;
-    constructor(opts: DateRangeFieldRootStateProps);
-    validationStatus: false | {
+    constructor(opts: DateRangeFieldRootStateOpts);
+    readonly validationStatus: false | {
         readonly reason: "custom";
         readonly message: string | string[];
     } | {
@@ -54,33 +55,35 @@ export declare class DateRangeFieldRootState {
         readonly reason: "max";
         readonly message?: undefined;
     };
-    isInvalid: boolean;
-    props: {
+    readonly isInvalid: boolean;
+    readonly props: {
         readonly id: string;
         readonly role: "group";
         readonly "data-invalid": "" | undefined;
     };
 }
-type DateRangeFieldLabelStateProps = WithRefProps;
-declare class DateRangeFieldLabelState {
+interface DateRangeFieldLabelStateOpts extends WithRefOpts {
+}
+export declare class DateRangeFieldLabelState {
     #private;
-    readonly opts: DateRangeFieldLabelStateProps;
+    static create(opts: DateRangeFieldLabelStateOpts): DateRangeFieldLabelState;
+    readonly opts: DateRangeFieldLabelStateOpts;
     readonly root: DateRangeFieldRootState;
-    constructor(opts: DateRangeFieldLabelStateProps, root: DateRangeFieldRootState);
-    props: {
+    constructor(opts: DateRangeFieldLabelStateOpts, root: DateRangeFieldRootState);
+    readonly props: {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
         readonly onclick: () => void;
     };
 }
-type DateRangeFieldInputStateProps = WritableBoxedValues<{
+interface DateRangeFieldInputStateOpts extends WithRefOpts, WritableBoxedValues<{
     value: DateValue | undefined;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     name: string;
-}> & WithRefProps;
-export declare const DateRangeFieldRootContext: Context<DateRangeFieldRootState>;
-export declare function useDateRangeFieldRoot(props: DateRangeFieldRootStateProps): DateRangeFieldRootState;
-export declare function useDateRangeFieldLabel(props: DateRangeFieldLabelStateProps): DateRangeFieldLabelState;
-export declare function useDateRangeFieldInput(props: Omit<DateRangeFieldInputStateProps, "value">, type: "start" | "end"): DateFieldInputState;
+}> {
+}
+export declare class DateRangeFieldInputState {
+    static create(opts: Omit<DateRangeFieldInputStateOpts, "value">, type: "start" | "end"): DateFieldInputState;
+}
 export {};

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

@@ -1,6 +1,6 @@
-import { box, onDestroyEffect, attachRef, DOMContext } 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 { DateFieldInputState, DateFieldRootState } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
 import { createBitsAttrs, getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
@@ -11,7 +11,11 @@ export const dateRangeFieldAttrs = createBitsAttrs({
     component: "date-range-field",
     parts: ["root", "label"],
 });
+export const DateRangeFieldRootContext = new Context("DateRangeField.Root");
 export class DateRangeFieldRootState {
+    static create(opts) {
+        return DateRangeFieldRootContext.set(new DateRangeFieldRootState(opts));
+    }
     opts;
     startFieldState = undefined;
     endFieldState = undefined;
@@ -141,7 +145,10 @@ export class DateRangeFieldRootState {
         ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
     }));
 }
-class DateRangeFieldLabelState {
+export class DateRangeFieldLabelState {
+    static create(opts) {
+        return new DateRangeFieldLabelState(opts, DateRangeFieldRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -158,7 +165,6 @@ class DateRangeFieldLabelState {
     };
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        // TODO: invalid state for field
         "data-invalid": getDataInvalid(this.root.isInvalid),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [dateRangeFieldAttrs.label]: "",
@@ -166,32 +172,27 @@ class DateRangeFieldLabelState {
         ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));
 }
-export const DateRangeFieldRootContext = new Context("DateRangeField.Root");
-export function useDateRangeFieldRoot(props) {
-    return DateRangeFieldRootContext.set(new DateRangeFieldRootState(props));
-}
-export function useDateRangeFieldLabel(props) {
-    return new DateRangeFieldLabelState(props, DateRangeFieldRootContext.get());
-}
-export function useDateRangeFieldInput(props, type) {
-    const root = DateRangeFieldRootContext.get();
-    const fieldState = useDateFieldRoot({
-        value: type === "start" ? root.opts.startValue : root.opts.endValue,
-        disabled: root.opts.disabled,
-        readonly: root.opts.readonly,
-        readonlySegments: root.opts.readonlySegments,
-        validate: box.with(() => undefined),
-        minValue: root.opts.minValue,
-        maxValue: root.opts.maxValue,
-        hourCycle: root.opts.hourCycle,
-        locale: root.opts.locale,
-        hideTimeZone: root.opts.hideTimeZone,
-        required: root.opts.required,
-        granularity: root.opts.granularity,
-        placeholder: root.opts.placeholder,
-        onInvalid: root.opts.onInvalid,
-        errorMessageId: root.opts.errorMessageId,
-        isInvalidProp: box.with(() => root.isInvalid),
-    }, root);
-    return new DateFieldInputState({ name: props.name, id: props.id, ref: props.ref }, fieldState);
+export class DateRangeFieldInputState {
+    static create(opts, type) {
+        const root = DateRangeFieldRootContext.get();
+        const fieldState = DateFieldRootState.create({
+            value: type === "start" ? root.opts.startValue : root.opts.endValue,
+            disabled: root.opts.disabled,
+            readonly: root.opts.readonly,
+            readonlySegments: root.opts.readonlySegments,
+            validate: box.with(() => undefined),
+            minValue: root.opts.minValue,
+            maxValue: root.opts.maxValue,
+            hourCycle: root.opts.hourCycle,
+            locale: root.opts.locale,
+            hideTimeZone: root.opts.hideTimeZone,
+            required: root.opts.required,
+            granularity: root.opts.granularity,
+            placeholder: root.opts.placeholder,
+            onInvalid: root.opts.onInvalid,
+            errorMessageId: root.opts.errorMessageId,
+            isInvalidProp: box.with(() => root.isInvalid),
+        }, root);
+        return new DateFieldInputState({ name: opts.name, id: opts.id, ref: opts.ref }, fieldState);
+    }
 }

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

@@ -3,7 +3,7 @@
 	import type { DateRangePickerCalendarProps } from "../types.js";
 	import { DateRangePickerRootContext } from "../date-range-picker.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
-	import { useRangeCalendarRoot } from "../../range-calendar/range-calendar.svelte.js";
+	import { RangeCalendarRootState } from "../../range-calendar/range-calendar.svelte.js";
 
 	const uid = $props.id();
 
@@ -17,7 +17,7 @@
 
 	const dateRangePickerRootState = DateRangePickerRootContext.get();
 
-	const rangeCalendarState = useRangeCalendarRoot({
+	const rangeCalendarState = RangeCalendarRootState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -2,11 +2,11 @@
 	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
-	import { useDateRangePickerRoot } from "../date-range-picker.svelte.js";
+	import { DateRangePickerRootState } from "../date-range-picker.svelte.js";
 	import type { DateRangePickerRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
-	import { usePopoverRoot } from "../../popover/popover.svelte.js";
-	import { useDateRangeFieldRoot } from "../../date-range-field/date-range-field.svelte.js";
+	import { PopoverRootState } from "../../popover/popover.svelte.js";
+	import { DateRangeFieldRootState } from "../../date-range-field/date-range-field.svelte.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { useId } from "../../../internal/use-id.js";
 	import type { DateRange } from "../../../shared/index.js";
@@ -16,6 +16,7 @@
 	let {
 		open = $bindable(false),
 		onOpenChange = noop,
+		onOpenChangeComplete = noop,
 		value = $bindable(),
 		id = useId(),
 		ref = $bindable(null),
@@ -112,7 +113,7 @@
 		}
 	}
 
-	const pickerRootState = useDateRangePickerRoot({
+	const pickerRootState = DateRangePickerRootState.create({
 		open: box.with(
 			() => open,
 			(v) => {
@@ -177,11 +178,12 @@
 		defaultPlaceholder,
 	});
 
-	usePopoverRoot({
+	PopoverRootState.create({
 		open: pickerRootState.opts.open,
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 
-	const fieldRootState = useDateRangeFieldRoot({
+	const fieldRootState = DateRangeFieldRootState.create({
 		value: pickerRootState.opts.value,
 		disabled: pickerRootState.opts.disabled,
 		readonly: pickerRootState.opts.readonly,

package/dist/bits/date-range-picker/date-range-picker.svelte.d.ts

@@ -1,15 +1,16 @@
 import type { DateValue } from "@internationalized/date";
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
-import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { DateMatcher, DateRange, SegmentPart } from "../../shared/index.js";
 import type { Granularity, HourCycle, WeekStartsOn } from "../../shared/date/types.js";
-type DateRangePickerRootStateProps = WritableBoxedValues<{
+export declare const DateRangePickerRootContext: Context<DateRangePickerRootState>;
+interface DateRangePickerRootStateOpts extends WritableBoxedValues<{
     value: DateRange;
     startValue: DateValue | undefined;
     endValue: DateValue | undefined;
     open: boolean;
     placeholder: DateValue;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     readonlySegments: SegmentPart[];
     isDateUnavailable: DateMatcher;
     isDateDisabled: DateMatcher;
@@ -36,13 +37,12 @@ type DateRangePickerRootStateProps = WritableBoxedValues<{
     onRangeSelect?: () => void;
     monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
     yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
-}> & {
+}> {
     defaultPlaceholder: DateValue;
-};
-declare class DateRangePickerRootState {
-    readonly opts: DateRangePickerRootStateProps;
-    constructor(opts: DateRangePickerRootStateProps);
 }
-export declare const DateRangePickerRootContext: Context<DateRangePickerRootState>;
-export declare function useDateRangePickerRoot(props: DateRangePickerRootStateProps): DateRangePickerRootState;
+export declare class DateRangePickerRootState {
+    static create(opts: DateRangePickerRootStateOpts): DateRangePickerRootState;
+    readonly opts: DateRangePickerRootStateOpts;
+    constructor(opts: DateRangePickerRootStateOpts);
+}
 export {};

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

@@ -1,11 +1,12 @@
+import {} from "svelte-toolbelt";
 import { Context } from "runed";
-class DateRangePickerRootState {
+export const DateRangePickerRootContext = new Context("DateRangePicker.Root");
+export class DateRangePickerRootState {
+    static create(opts) {
+        return DateRangePickerRootContext.set(new DateRangePickerRootState(opts));
+    }
     opts;
     constructor(opts) {
         this.opts = opts;
     }
 }
-export const DateRangePickerRootContext = new Context("DateRangePicker.Root");
-export function useDateRangePickerRoot(props) {
-    return DateRangePickerRootContext.set(new DateRangePickerRootState(props));
-}

package/dist/bits/date-range-picker/types.d.ts

@@ -35,6 +35,10 @@ export type DateRangePickerRootPropsWithoutHTML = WithChild<{
      * A callback function called when the open state changes.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback function called when the open state changes complete.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
     /**
      * A function that returns true if the given date is unavailable,
      * where if selected, the date field will be marked as invalid.

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDialogClose } from "../dialog.svelte.js";
+	import { DialogCloseState } from "../dialog.svelte.js";
 	import type { DialogCloseProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -15,7 +15,7 @@
 		...restProps
 	}: DialogCloseProps = $props();
 
-	const closeState = useDialogClose({
+	const closeState = DialogCloseState.create({
 		variant: box.with(() => "close"),
 		id: box.with(() => id),
 		ref: box.with(

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDialogContent } from "../dialog.svelte.js";
+	import { DialogContentState } from "../dialog.svelte.js";
 	import type { DialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
@@ -30,7 +30,7 @@
 		...restProps
 	}: DialogContentProps = $props();
 
-	const contentState = useDialogContent({
+	const contentState = DialogContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -44,7 +44,7 @@
 <PresenceLayer
 	{...mergedProps}
 	{forceMount}
-	present={contentState.root.opts.open.current || forceMount}
+	open={contentState.root.opts.open.current || forceMount}
 	ref={contentState.opts.ref}
 >
 	{#snippet presence()}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDialogDescription } from "../dialog.svelte.js";
+	import { DialogDescriptionState } from "../dialog.svelte.js";
 	import type { DialogDescriptionProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -14,7 +14,7 @@
 		...restProps
 	}: DialogDescriptionProps = $props();
 
-	const descriptionState = useDialogDescription({
+	const descriptionState = DialogDescriptionState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDialogOverlay } from "../dialog.svelte.js";
+	import { DialogOverlayState } from "../dialog.svelte.js";
 	import type { DialogOverlayProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
@@ -16,7 +16,7 @@
 		...restProps
 	}: DialogOverlayProps = $props();
 
-	const overlayState = useDialogOverlay({
+	const overlayState = DialogOverlayState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -27,10 +27,7 @@
 	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
 </script>
 
-<PresenceLayer
-	present={overlayState.root.opts.open.current || forceMount}
-	ref={overlayState.opts.ref}
->
+<PresenceLayer open={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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDialogTitle } from "../dialog.svelte.js";
+	import { DialogTitleState } from "../dialog.svelte.js";
 	import type { DialogTitleProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -15,7 +15,7 @@
 		...restProps
 	}: DialogTitleProps = $props();
 
-	const titleState = useDialogTitle({
+	const titleState = DialogTitleState.create({
 		id: box.with(() => id),
 		level: box.with(() => level),
 		ref: box.with(

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useDialogTrigger } from "../dialog.svelte.js";
+	import { DialogTriggerState } from "../dialog.svelte.js";
 	import type { DialogTriggerProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -15,7 +15,7 @@
 		...restProps
 	}: DialogTriggerProps = $props();
 
-	const triggerState = useDialogTrigger({
+	const triggerState = DialogTriggerState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -1,12 +1,17 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import { useDialogRoot } from "../dialog.svelte.js";
+	import { DialogRootState } from "../dialog.svelte.js";
 	import type { DialogRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 
-	let { open = $bindable(false), onOpenChange = noop, children }: DialogRootProps = $props();
+	let {
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		children,
+	}: DialogRootProps = $props();
 
-	useDialogRoot({
+	DialogRootState.create({
 		variant: box.with(() => "dialog"),
 		open: box.with(
 			() => open,
@@ -15,6 +20,7 @@
 				onOpenChange(v);
 			}
 		),
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 </script>