bits-ui 2.6.2 → 2.8.0

package/README.md

@@ -19,10 +19,10 @@ Visit https://bits-ui.com/docs to view the documentation.
 
 ## Credits
 
--   [Bitworks](https://bitworks.cz) - The design team behind the Bits UI documentation and example components.
--   [Melt UI](https://melt-ui.com) - A powerful builder API that inspired the internal architecture of Bits UI.
--   [Radix UI](https://radix-ui.com) - The incredible headless component APIs that we've taken heavy inspiration from.
--   [React Spectrum](https://react-spectrum.adobe.com) - An incredible collection of headless components we've taken inspiration from.
+- [Bitworks](https://bitworks.cz) - The design team behind the Bits UI documentation and example components.
+- [Melt UI](https://melt-ui.com) - A powerful builder API that inspired the internal architecture of Bits UI.
+- [Radix UI](https://radix-ui.com) - The incredible headless component APIs that we've taken heavy inspiration from.
+- [React Spectrum](https://react-spectrum.adobe.com) - An incredible collection of headless components we've taken inspiration from.
 
 ## Sponsors
 

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

@@ -1,47 +1,53 @@
-import type { Box, ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
-import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
+import { type Box, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
-type AccordionBaseStateProps = WithRefProps<ReadableBoxedValues<{
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+interface AccordionBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
     loop: boolean;
-}>>;
-type AccordionSingleStateProps = AccordionBaseStateProps & WritableBoxedValues<{
+}> {
+}
+interface AccordionSingleStateOpts extends AccordionBaseStateOpts, WritableBoxedValues<{
     value: string;
-}>;
-type AccordionMultiStateProps = AccordionBaseStateProps & WritableBoxedValues<{
+}> {
+}
+interface AccordionMultiStateOpts extends AccordionBaseStateOpts, WritableBoxedValues<{
     value: string[];
-}>;
-type AccordionState = AccordionSingleState | AccordionMultiState;
-type AccordionItemStateProps = WithRefProps<ReadableBoxedValues<{
+}> {
+}
+type AccordionRoot = AccordionSingleState | AccordionMultiState;
+interface AccordionItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
     value: string;
     disabled: boolean;
-}> & {
-    rootState: AccordionState;
-}>;
-type AccordionTriggerStateProps = WithRefProps<ReadableBoxedValues<{
+}> {
+    rootState: AccordionRoot;
+}
+interface AccordionTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean | null | undefined;
-}>>;
-type AccordionContentStateProps = WithRefProps<ReadableBoxedValues<{
+}> {
+}
+interface AccordionContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     forceMount: boolean;
-}>>;
-type AccordionHeaderStateProps = WithRefProps<ReadableBoxedValues<{
+}> {
+}
+interface AccordionHeaderStateOpts extends WithRefOpts, ReadableBoxedValues<{
     level: 1 | 2 | 3 | 4 | 5 | 6;
-}>>;
-type InitAccordionProps = WithRefProps<{
-    type: "single" | "multiple";
-    value: Box<string> | Box<string[]>;
-} & ReadableBoxedValues<{
+}> {
+}
+interface AccordionRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
     loop: boolean;
-}>>;
+}> {
+    type: "single" | "multiple";
+    value: Box<string> | Box<string[]>;
+}
 declare abstract class AccordionBaseState {
-    readonly opts: AccordionBaseStateProps;
-    readonly rovingFocusGroup: UseRovingFocusReturn;
+    readonly opts: AccordionBaseStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
     abstract readonly isMulti: boolean;
-    constructor(opts: AccordionBaseStateProps);
+    constructor(opts: AccordionBaseStateOpts);
     abstract includesItem(item: string): boolean;
     abstract toggleItem(item: string): void;
     readonly props: {
@@ -50,27 +56,31 @@ declare abstract class AccordionBaseState {
         readonly "data-disabled": "" | undefined;
     };
 }
-export declare class AccordionSingleState extends AccordionBaseState {
-    readonly opts: AccordionSingleStateProps;
+declare class AccordionSingleState extends AccordionBaseState {
+    readonly opts: AccordionSingleStateOpts;
     readonly isMulti: false;
-    constructor(opts: AccordionSingleStateProps);
-    includesItem: (item: string) => boolean;
-    toggleItem: (item: string) => void;
+    constructor(opts: AccordionSingleStateOpts);
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
 }
-export declare class AccordionMultiState extends AccordionBaseState {
+declare class AccordionMultiState extends AccordionBaseState {
     #private;
     readonly isMulti: true;
-    constructor(props: AccordionMultiStateProps);
-    includesItem: (item: string) => boolean;
-    toggleItem: (item: string) => void;
+    constructor(props: AccordionMultiStateOpts);
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
+}
+export declare class AccordionRootState {
+    static create(props: AccordionRootStateOpts): AccordionRoot;
 }
 export declare class AccordionItemState {
-    readonly opts: AccordionItemStateProps;
-    readonly root: AccordionState;
+    static create(props: Omit<AccordionItemStateOpts, "rootState">): AccordionItemState;
+    readonly opts: AccordionItemStateOpts;
+    readonly root: AccordionRoot;
     readonly isActive: boolean;
     readonly isDisabled: boolean;
-    constructor(opts: AccordionItemStateProps);
-    updateValue: () => void;
+    constructor(opts: AccordionItemStateOpts);
+    updateValue(): void;
     readonly props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";
@@ -78,13 +88,14 @@ export declare class AccordionItemState {
         readonly "data-orientation": "horizontal" | "vertical";
     };
 }
-declare class AccordionTriggerState {
+export declare class AccordionTriggerState {
     #private;
-    readonly opts: AccordionTriggerStateProps;
+    readonly opts: AccordionTriggerStateOpts;
     readonly itemState: AccordionItemState;
-    constructor(opts: AccordionTriggerStateProps, itemState: AccordionItemState);
-    onclick: (e: BitsMouseEvent) => void;
-    onkeydown: (e: BitsKeyboardEvent) => void;
+    constructor(opts: AccordionTriggerStateOpts, itemState: AccordionItemState);
+    static create(props: AccordionTriggerStateOpts): AccordionTriggerState;
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
     readonly props: {
         readonly id: string;
         readonly disabled: boolean;
@@ -98,12 +109,13 @@ declare class AccordionTriggerState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-declare class AccordionContentState {
+export declare class AccordionContentState {
     #private;
-    readonly opts: AccordionContentStateProps;
+    readonly opts: AccordionContentStateOpts;
     readonly item: AccordionItemState;
-    readonly present: boolean;
-    constructor(opts: AccordionContentStateProps, item: AccordionItemState);
+    readonly open: boolean;
+    constructor(opts: AccordionContentStateOpts, item: AccordionItemState);
+    static create(props: AccordionContentStateOpts): AccordionContentState;
     readonly snippetProps: {
         open: boolean;
     };
@@ -118,10 +130,11 @@ declare class AccordionContentState {
         };
     };
 }
-declare class AccordionHeaderState {
-    readonly opts: AccordionHeaderStateProps;
+export declare class AccordionHeaderState {
+    readonly opts: AccordionHeaderStateOpts;
     readonly item: AccordionItemState;
-    constructor(opts: AccordionHeaderStateProps, item: AccordionItemState);
+    constructor(opts: AccordionHeaderStateOpts, item: AccordionItemState);
+    static create(props: AccordionHeaderStateOpts): AccordionHeaderState;
     readonly props: {
         readonly id: string;
         readonly role: "heading";
@@ -131,9 +144,4 @@ declare class AccordionHeaderState {
         readonly "data-orientation": "horizontal" | "vertical";
     };
 }
-export declare function useAccordionRoot(props: InitAccordionProps): AccordionState;
-export declare function useAccordionItem(props: Omit<AccordionItemStateProps, "rootState">): AccordionItemState;
-export declare function useAccordionTrigger(props: AccordionTriggerStateProps): AccordionTriggerState;
-export declare function useAccordionContent(props: AccordionContentStateProps): AccordionContentState;
-export declare function useAccordionHeader(props: AccordionHeaderStateProps): AccordionHeaderState;
 export {};

package/dist/bits/accordion/accordion.svelte.js

@@ -1,20 +1,21 @@
-import { afterTick, attachRef } from "svelte-toolbelt";
+import { afterTick, attachRef, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
 import { createBitsAttrs } from "../../internal/attrs.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 const accordionAttrs = createBitsAttrs({
     component: "accordion",
     parts: ["root", "trigger", "content", "item", "header"],
 });
-// Base class
+const AccordionRootContext = new Context("Accordion.Root");
+const AccordionItemContext = new Context("Accordion.Item");
 class AccordionBaseState {
     opts;
     rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
-        this.rovingFocusGroup = useRovingFocus({
+        this.rovingFocusGroup = new RovingFocusGroup({
             rootNode: this.opts.ref,
             candidateAttr: accordionAttrs.trigger,
             loop: this.opts.loop,
@@ -29,36 +30,53 @@ class AccordionBaseState {
         ...attachRef(this.opts.ref),
     }));
 }
-// Single accordion
-export class AccordionSingleState extends AccordionBaseState {
+class AccordionSingleState extends AccordionBaseState {
     opts;
     isMulti = false;
     constructor(opts) {
         super(opts);
         this.opts = opts;
+        this.includesItem = this.includesItem.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
     }
-    includesItem = (item) => this.opts.value.current === item;
-    toggleItem = (item) => {
+    includesItem(item) {
+        return this.opts.value.current === item;
+    }
+    toggleItem(item) {
         this.opts.value.current = this.includesItem(item) ? "" : item;
-    };
+    }
 }
-// Multiple accordion
-export class AccordionMultiState extends AccordionBaseState {
+class AccordionMultiState extends AccordionBaseState {
     #value;
     isMulti = true;
     constructor(props) {
         super(props);
         this.#value = props.value;
+        this.includesItem = this.includesItem.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
+    }
+    includesItem(item) {
+        return this.#value.current.includes(item);
     }
-    includesItem = (item) => this.#value.current.includes(item);
-    toggleItem = (item) => {
+    toggleItem(item) {
         this.#value.current = this.includesItem(item)
             ? this.#value.current.filter((v) => v !== item)
             : [...this.#value.current, item];
-    };
+    }
+}
+export class AccordionRootState {
+    static create(props) {
+        const { type, ...rest } = props;
+        const rootState = type === "single"
+            ? new AccordionSingleState(rest)
+            : new AccordionMultiState(rest);
+        return AccordionRootContext.set(rootState);
+    }
 }
-// Item state
 export class AccordionItemState {
+    static create(props) {
+        return AccordionItemContext.set(new AccordionItemState({ ...props, rootState: AccordionRootContext.get() }));
+    }
     opts;
     root;
     isActive = $derived.by(() => this.root.includesItem(this.opts.value.current));
@@ -66,10 +84,11 @@ export class AccordionItemState {
     constructor(opts) {
         this.opts = opts;
         this.root = opts.rootState;
+        this.updateValue = this.updateValue.bind(this);
     }
-    updateValue = () => {
+    updateValue() {
         this.root.toggleItem(this.opts.value.current);
-    };
+    }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.isActive),
@@ -79,8 +98,7 @@ export class AccordionItemState {
         ...attachRef(this.opts.ref),
     }));
 }
-// Trigger state
-class AccordionTriggerState {
+export class AccordionTriggerState {
     opts;
     itemState;
     #root;
@@ -91,15 +109,20 @@ class AccordionTriggerState {
         this.opts = opts;
         this.itemState = itemState;
         this.#root = itemState.root;
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    static create(props) {
+        return new AccordionTriggerState(props, AccordionItemContext.get());
     }
-    onclick = (e) => {
+    onclick(e) {
         if (this.#isDisabled || e.button !== 0) {
             e.preventDefault();
             return;
         }
         this.itemState.updateValue();
-    };
-    onkeydown = (e) => {
+    }
+    onkeydown(e) {
         if (this.#isDisabled)
             return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
@@ -108,7 +131,7 @@ class AccordionTriggerState {
             return;
         }
         this.#root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
-    };
+    }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         disabled: this.#isDisabled,
@@ -124,14 +147,13 @@ class AccordionTriggerState {
         ...attachRef(this.opts.ref),
     }));
 }
-// Content state with improved animation handling
-class AccordionContentState {
+export class AccordionContentState {
     opts;
     item;
     #originalStyles = undefined;
     #isMountAnimationPrevented = false;
     #dimensions = $state({ width: 0, height: 0 });
-    present = $derived.by(() => this.opts.forceMount.current || this.item.isActive);
+    open = $derived.by(() => this.opts.forceMount.current || this.item.isActive);
     constructor(opts, item) {
         this.opts = opts;
         this.item = item;
@@ -144,7 +166,10 @@ class AccordionContentState {
             return () => cancelAnimationFrame(rAF);
         });
         // Handle dimension updates
-        watch([() => this.present, () => this.opts.ref.current], this.#updateDimensions);
+        watch([() => this.open, () => this.opts.ref.current], this.#updateDimensions);
+    }
+    static create(props) {
+        return new AccordionContentState(props, AccordionItemContext.get());
     }
     #updateDimensions = ([_, node]) => {
         if (!node)
@@ -184,14 +209,16 @@ class AccordionContentState {
         ...attachRef(this.opts.ref),
     }));
 }
-// Header state
-class AccordionHeaderState {
+export class AccordionHeaderState {
     opts;
     item;
     constructor(opts, item) {
         this.opts = opts;
         this.item = item;
     }
+    static create(props) {
+        return new AccordionHeaderState(props, AccordionItemContext.get());
+    }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "heading",
@@ -203,25 +230,3 @@ class AccordionHeaderState {
         ...attachRef(this.opts.ref),
     }));
 }
-const AccordionRootContext = new Context("Accordion.Root");
-const AccordionItemContext = new Context("Accordion.Item");
-export function useAccordionRoot(props) {
-    const { type, ...rest } = props;
-    const rootState = type === "single"
-        ? new AccordionSingleState(rest)
-        : new AccordionMultiState(rest);
-    return AccordionRootContext.set(rootState);
-}
-export function useAccordionItem(props) {
-    const rootState = AccordionRootContext.get();
-    return AccordionItemContext.set(new AccordionItemState({ ...props, rootState }));
-}
-export function useAccordionTrigger(props) {
-    return new AccordionTriggerState(props, AccordionItemContext.get());
-}
-export function useAccordionContent(props) {
-    return new AccordionContentState(props, AccordionItemContext.get());
-}
-export function useAccordionHeader(props) {
-    return new AccordionHeaderState(props, AccordionItemContext.get());
-}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { useAccordionContent } from "../accordion.svelte.js";
+	import { AccordionContentState } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -16,7 +16,7 @@
 		...restProps
 	}: AccordionContentProps = $props();
 
-	const contentState = useAccordionContent({
+	const contentState = AccordionContentState.create({
 		forceMount: box.with(() => forceMount),
 		id: box.with(() => id),
 		ref: box.with(
@@ -26,10 +26,10 @@
 	});
 </script>
 
-<PresenceLayer forceMount={true} present={contentState.present} ref={contentState.opts.ref}>
+<PresenceLayer forceMount={true} open={contentState.open} ref={contentState.opts.ref}>
 	{#snippet presence({ present })}
 		{@const mergedProps = mergeProps(restProps, contentState.props, {
-			hidden: forceMount ? undefined : !present.current,
+			hidden: forceMount ? undefined : !present,
 		})}
 		{#if child}
 			{@render child({

package/dist/bits/accordion/components/accordion-header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AccordionHeaderProps } from "../types.js";
-	import { useAccordionHeader } from "../accordion.svelte.js";
+	import { AccordionHeaderState } from "../accordion.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: AccordionHeaderProps = $props();
 
-	const headerState = useAccordionHeader({
+	const headerState = AccordionHeaderState.create({
 		id: box.with(() => id),
 		level: box.with(() => level),
 		ref: box.with(

package/dist/bits/accordion/components/accordion-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AccordionItemProps } from "../types.js";
-	import { useAccordionItem } from "../accordion.svelte.js";
+	import { AccordionItemState } from "../accordion.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -17,7 +17,7 @@
 		...restProps
 	}: AccordionItemProps = $props();
 
-	const itemState = useAccordionItem({
+	const itemState = AccordionItemState.create({
 		value: box.with(() => value),
 		disabled: box.with(() => disabled),
 		id: box.with(() => id),

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AccordionTriggerProps } from "../types.js";
-	import { useAccordionTrigger } from "../accordion.svelte.js";
+	import { AccordionTriggerState } from "../accordion.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 
 	const uid = $props.id();
@@ -15,7 +15,7 @@
 		...restProps
 	}: AccordionTriggerProps = $props();
 
-	const triggerState = useAccordionTrigger({
+	const triggerState = AccordionTriggerState.create({
 		disabled: box.with(() => disabled),
 		id: box.with(() => id),
 		ref: box.with(

package/dist/bits/accordion/components/accordion.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { type WritableBox, box, mergeProps } from "svelte-toolbelt";
-	import { useAccordionRoot } from "../accordion.svelte.js";
+	import { AccordionRootState } from "../accordion.svelte.js";
 	import type { AccordionRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
@@ -37,7 +37,7 @@
 		}
 	);
 
-	const rootState = useAccordionRoot({
+	const rootState = AccordionRootState.create({
 		type,
 		value: box.with(
 			() => value!,

package/dist/bits/alert-dialog/components/alert-dialog-action.svelte

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

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte

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

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

@@ -9,7 +9,7 @@
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
-	import { useDialogContent } from "../../dialog/dialog.svelte.js";
+	import { DialogContentState } from "../../dialog/dialog.svelte.js";
 	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
 	const uid = $props.id();
@@ -31,7 +31,7 @@
 		...restProps
 	}: AlertDialogContentProps = $props();
 
-	const contentState = useDialogContent({
+	const contentState = DialogContentState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -44,7 +44,7 @@
 
 <PresenceLayer
 	{forceMount}
-	present={contentState.root.opts.open.current || forceMount}
+	open={contentState.root.opts.open.current || forceMount}
 	ref={contentState.opts.ref}
 >
 	{#snippet presence()}

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

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

package/dist/bits/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -1,19 +1,14 @@
-import type { ReadableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
-type AspectRatioRootStateProps = WithRefProps<ReadableBoxedValues<{
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { WithRefOpts } from "../../internal/types.js";
+interface AspectRatioRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     ratio: number;
-}>>;
-declare class AspectRatioRootState {
-    readonly opts: AspectRatioRootStateProps;
-    constructor(opts: AspectRatioRootStateProps);
-    wrapperProps: {
-        style: {
-            position: string;
-            width: string;
-            paddingBottom: string;
-        };
-    };
-    props: {
+}> {
+}
+export declare class AspectRatioRootState {
+    static create(opts: AspectRatioRootStateOpts): AspectRatioRootState;
+    readonly opts: AspectRatioRootStateOpts;
+    constructor(opts: AspectRatioRootStateOpts);
+    readonly props: {
         readonly id: string;
         readonly style: {
             readonly position: "absolute";
@@ -24,5 +19,4 @@ declare class AspectRatioRootState {
         };
     };
 }
-export declare function useAspectRatioRoot(props: AspectRatioRootStateProps): AspectRatioRootState;
 export {};