bits-ui 2.6.2 → 2.8.0

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

@@ -1,14 +1,16 @@
-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<{
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+interface LinkPreviewRootStateOpts extends WritableBoxedValues<{
     open: boolean;
-}> & ReadableBoxedValues<{
+}>, ReadableBoxedValues<{
     openDelay: number;
     closeDelay: number;
-}>;
-declare class LinkPreviewRootState {
-    readonly opts: LinkPreviewRootStateProps;
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}> {
+}
+export declare class LinkPreviewRootState {
+    static create(opts: LinkPreviewRootStateOpts): LinkPreviewRootState;
+    readonly opts: LinkPreviewRootStateOpts;
     hasSelection: boolean;
     isPointerDownOnContent: boolean;
     containsSelection: boolean;
@@ -18,22 +20,24 @@ declare class LinkPreviewRootState {
     triggerNode: HTMLElement | null;
     isOpening: boolean;
     domContext: DOMContext;
-    constructor(opts: LinkPreviewRootStateProps);
+    constructor(opts: LinkPreviewRootStateOpts);
     clearTimeout(): void;
     handleOpen(): void;
     immediateClose(): void;
     handleClose(): void;
 }
-type LinkPreviewTriggerStateProps = WithRefProps;
-declare class LinkPreviewTriggerState {
-    readonly opts: LinkPreviewTriggerStateProps;
+interface LinkPreviewTriggerStateOpts extends WithRefOpts {
+}
+export declare class LinkPreviewTriggerState {
+    static create(opts: LinkPreviewTriggerStateOpts): LinkPreviewTriggerState;
+    readonly opts: LinkPreviewTriggerStateOpts;
     readonly root: LinkPreviewRootState;
-    constructor(opts: LinkPreviewTriggerStateProps, root: LinkPreviewRootState);
+    constructor(opts: LinkPreviewTriggerStateOpts, root: LinkPreviewRootState);
     onpointerenter(e: BitsPointerEvent): void;
     onpointerleave(e: BitsPointerEvent): void;
     onfocus(e: BitsFocusEvent): void;
     onblur(_: BitsFocusEvent): void;
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "aria-haspopup": "dialog";
         readonly "aria-expanded": "true" | "false";
@@ -46,14 +50,16 @@ declare class LinkPreviewTriggerState {
         readonly onpointerleave: (e: BitsPointerEvent) => void;
     };
 }
-type LinkPreviewContentStateProps = WithRefProps & ReadableBoxedValues<{
+interface LinkPreviewContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
-}>;
-declare class LinkPreviewContentState {
-    readonly opts: LinkPreviewContentStateProps;
+}> {
+}
+export declare class LinkPreviewContentState {
+    static create(opts: LinkPreviewContentStateOpts): LinkPreviewContentState;
+    readonly opts: LinkPreviewContentStateOpts;
     readonly root: LinkPreviewRootState;
-    constructor(opts: LinkPreviewContentStateProps, root: LinkPreviewRootState);
+    constructor(opts: LinkPreviewContentStateOpts, root: LinkPreviewRootState);
     onpointerdown(e: BitsPointerEvent): void;
     onpointerenter(e: BitsPointerEvent): void;
     onfocusout(e: BitsFocusEvent): void;
@@ -61,10 +67,10 @@ declare class LinkPreviewContentState {
     onEscapeKeydown: (e: KeyboardEvent) => void;
     onOpenAutoFocus: (e: Event) => void;
     onCloseAutoFocus: (e: Event) => void;
-    snippetProps: {
+    readonly snippetProps: {
         open: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly tabindex: -1;
         readonly "data-state": "open" | "closed";
@@ -72,14 +78,11 @@ declare class LinkPreviewContentState {
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onfocusout: (e: BitsFocusEvent) => void;
     };
-    popperProps: {
+    readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;
         onEscapeKeydown: (e: KeyboardEvent) => void;
         onOpenAutoFocus: (e: Event) => void;
         onCloseAutoFocus: (e: Event) => void;
     };
 }
-export declare function useLinkPreviewRoot(props: LinkPreviewRootStateProps): LinkPreviewRootState;
-export declare function useLinkPreviewTrigger(props: LinkPreviewTriggerStateProps): LinkPreviewTriggerState;
-export declare function useLinkPreviewContent(props: LinkPreviewContentStateProps): LinkPreviewContentState;
 export {};

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

@@ -1,15 +1,20 @@
-import { afterSleep, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
+import { afterSleep, onDestroyEffect, attachRef, DOMContext, box, } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
 import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement, isFocusVisible, isTouch } from "../../internal/is.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
-import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
+import { GraceArea } from "../../internal/grace-area.svelte.js";
+import { OpenChangeComplete } from "../../internal/open-change-complete.js";
 const linkPreviewAttrs = createBitsAttrs({
     component: "link-preview",
     parts: ["content", "trigger"],
 });
-class LinkPreviewRootState {
+const LinkPreviewRootContext = new Context("LinkPreview.Root");
+export class LinkPreviewRootState {
+    static create(opts) {
+        return LinkPreviewRootContext.set(new LinkPreviewRootState(opts));
+    }
     opts;
     hasSelection = $state(false);
     isPointerDownOnContent = $state(false);
@@ -22,6 +27,13 @@ class LinkPreviewRootState {
     domContext = new DOMContext(() => null);
     constructor(opts) {
         this.opts = opts;
+        new OpenChangeComplete({
+            ref: box.with(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
         watch(() => this.opts.open.current, (isOpen) => {
             if (!isOpen) {
                 this.hasSelection = false;
@@ -89,7 +101,10 @@ class LinkPreviewRootState {
         }
     }
 }
-class LinkPreviewTriggerState {
+export class LinkPreviewTriggerState {
+    static create(opts) {
+        return new LinkPreviewTriggerState(opts, LinkPreviewRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -136,7 +151,10 @@ class LinkPreviewTriggerState {
         ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
-class LinkPreviewContentState {
+export class LinkPreviewContentState {
+    static create(opts) {
+        return new LinkPreviewContentState(opts, LinkPreviewRootContext.get());
+    }
     opts;
     root;
     constructor(opts, root) {
@@ -146,7 +164,7 @@ class LinkPreviewContentState {
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointerenter = this.onpointerenter.bind(this);
         this.onfocusout = this.onfocusout.bind(this);
-        useGraceArea({
+        new GraceArea({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.opts.ref.current,
             enabled: () => this.root.opts.open.current,
@@ -212,13 +230,3 @@ class LinkPreviewContentState {
         onCloseAutoFocus: this.onCloseAutoFocus,
     };
 }
-const LinkPreviewRootContext = new Context("LinkPreview.Root");
-export function useLinkPreviewRoot(props) {
-    return LinkPreviewRootContext.set(new LinkPreviewRootState(props));
-}
-export function useLinkPreviewTrigger(props) {
-    return new LinkPreviewTriggerState(props, LinkPreviewRootContext.get());
-}
-export function useLinkPreviewContent(props) {
-    return new LinkPreviewContentState(props, LinkPreviewRootContext.get());
-}

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

@@ -17,6 +17,10 @@ export type LinkPreviewRootPropsWithoutHTML = WithChildren<{
      * A callback that will be called when the link preview is opened or closed.
      */
     onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that will be called when the link preview finishes opening/closing animations.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
     /**
      * The delay in milliseconds before the preview opens.
      *

package/dist/bits/menu/components/menu-arrow.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { mergeProps } from "svelte-toolbelt";
 	import type { MenuArrowProps } from "../types.js";
-	import { useMenuArrow } from "../menu.svelte.js";
+	import { MenuArrowState } from "../menu.svelte.js";
 	import FloatingLayerArrow from "../../utilities/floating-layer/components/floating-layer-arrow.svelte";
 
 	let { ref = $bindable(null), ...restProps }: MenuArrowProps = $props();
 
-	const arrowState = useMenuArrow();
+	const arrowState = MenuArrowState.create();
 
 	const mergedProps = $derived(mergeProps(restProps, arrowState.props));
 </script>

package/dist/bits/menu/components/menu-checkbox-group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuCheckboxGroupProps } from "../types.js";
-	import { useMenuCheckboxGroup } from "../menu.svelte.js";
+	import { MenuCheckboxGroupState } from "../menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: MenuCheckboxGroupProps = $props();
 
-	const checkboxGroupState = useMenuCheckboxGroup({
+	const checkboxGroupState = MenuCheckboxGroupState.create({
 		value: box.with(
 			() => $state.snapshot(value),
 			(v) => {

package/dist/bits/menu/components/menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuCheckboxItemProps } from "../types.js";
-	import { MenuCheckboxGroupContext, useMenuCheckboxItem } from "../menu.svelte.js";
+	import { MenuCheckboxGroupContext, MenuCheckboxItemState } from "../menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
@@ -47,7 +47,7 @@
 		}
 	);
 
-	const checkboxItemState = useMenuCheckboxItem(
+	const checkboxItemState = MenuCheckboxItemState.create(
 		{
 			checked: box.with(
 				() => checked,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuContentStaticProps } from "../types.js";
-	import { useMenuContent } from "../menu.svelte.js";
+	import { MenuContentState } from "../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
 	}: MenuContentStaticProps = $props();
 
-	const contentState = useMenuContent({
+	const contentState = MenuContentState.create({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
 		ref: box.with(
@@ -87,7 +87,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/menu/components/menu-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuContentProps } from "../types.js";
-	import { useMenuContent } from "../menu.svelte.js";
+	import { MenuContentState } from "../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
 	}: MenuContentProps = $props();
 
-	const contentState = useMenuContent({
+	const contentState = MenuContentState.create({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
 		ref: box.with(
@@ -88,7 +88,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/menu/components/menu-group-heading.svelte

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

package/dist/bits/menu/components/menu-group.svelte

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuItemProps } from "../types.js";
-	import { useMenuItem } from "../menu.svelte.js";
+	import { MenuItemState } from "../menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -18,7 +18,7 @@
 		...restProps
 	}: MenuItemProps = $props();
 
-	const itemState = useMenuItem({
+	const itemState = MenuItemState.create({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),
 		onSelect: box.with(() => onSelect),

package/dist/bits/menu/components/menu-radio-group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuRadioGroupProps } from "../types.js";
-	import { useMenuRadioGroup } from "../menu.svelte.js";
+	import { MenuRadioGroupState } from "../menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: MenuRadioGroupProps = $props();
 
-	const radioGroupState = useMenuRadioGroup({
+	const radioGroupState = MenuRadioGroupState.create({
 		value: box.with(
 			() => value,
 			(v) => {

package/dist/bits/menu/components/menu-radio-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuRadioItemProps } from "../types.js";
-	import { useMenuRadioItem } from "../menu.svelte.js";
+	import { MenuRadioItemState } from "../menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
@@ -19,7 +19,7 @@
 		...restProps
 	}: MenuRadioItemProps = $props();
 
-	const radioItemState = useMenuRadioItem({
+	const radioItemState = MenuRadioItemState.create({
 		value: box.with(() => value),
 		id: box.with(() => id),
 		disabled: box.with(() => disabled),

package/dist/bits/menu/components/menu-separator.svelte

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { afterTick, box, mergeProps } from "svelte-toolbelt";
 	import type { MenuSubContentStaticProps } from "../types.js";
-	import { useMenuContent } from "../menu.svelte.js";
+	import { MenuContentState } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
 	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -30,7 +30,7 @@
 		...restProps
 	}: MenuSubContentStaticProps = $props();
 
-	const subContentState = useMenuContent({
+	const subContentState = MenuContentState.create({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
 		ref: box.with(
@@ -142,7 +142,7 @@
 		{escapeKeydownBehavior}
 		onCloseAutoFocus={handleCloseAutoFocus}
 		onOpenAutoFocus={handleOpenAutoFocus}
-		present={subContentState.parentMenu.opts.open.current}
+		open={subContentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
 		onFocusOutside={handleOnFocusOutside}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuSubContentProps } from "../types.js";
-	import { MenuOpenEvent, useMenuContent } from "../menu.svelte.js";
+	import { MenuOpenEvent, MenuContentState } from "../menu.svelte.js";
 	import { SUB_CLOSE_KEYS } from "../utils.js";
 	import { createId } from "../../../internal/create-id.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
@@ -31,7 +31,7 @@
 		...restProps
 	}: MenuSubContentProps = $props();
 
-	const subContentState = useMenuContent({
+	const subContentState = MenuContentState.create({
 		id: box.with(() => id),
 		loop: box.with(() => loop),
 		ref: box.with(
@@ -149,7 +149,7 @@
 		{escapeKeydownBehavior}
 		onCloseAutoFocus={handleCloseAutoFocus}
 		onOpenAutoFocus={handleOpenAutoFocus}
-		present={subContentState.parentMenu.opts.open.current}
+		open={subContentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
 		onFocusOutside={handleOnFocusOutside}

package/dist/bits/menu/components/menu-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuSubTriggerProps } from "../types.js";
-	import { useMenuSubTrigger } from "../menu.svelte.js";
+	import { MenuSubTriggerState } from "../menu.svelte.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
@@ -18,7 +18,7 @@
 		...restProps
 	}: MenuSubTriggerProps = $props();
 
-	const subTriggerState = useMenuSubTrigger({
+	const subTriggerState = MenuSubTriggerState.create({
 		disabled: box.with(() => disabled),
 		onSelect: box.with(() => onSelect),
 		id: box.with(() => id),

package/dist/bits/menu/components/menu-sub.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { MenuSubProps } from "../types.js";
-	import { useMenuSubmenu } from "../menu.svelte.js";
+	import { MenuSubmenuState } from "../menu.svelte.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
 
-	let { open = $bindable(false), onOpenChange = noop, children }: MenuSubProps = $props();
+	let {
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		children,
+	}: MenuSubProps = $props();
 
-	useMenuSubmenu({
+	MenuSubmenuState.create({
 		open: box.with(
 			() => open,
 			(v) => {
@@ -15,6 +20,7 @@
 				onOpenChange?.(v);
 			}
 		),
+		onOpenChangeComplete: box.with(() => onOpenChangeComplete),
 	});
 </script>
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { MenuTriggerProps } from "../types.js";
-	import { useMenuDropdownTrigger } from "../menu.svelte.js";
+	import { DropdownMenuTriggerState } from "../menu.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
@@ -17,7 +17,7 @@
 		...restProps
 	}: MenuTriggerProps = $props();
 
-	const triggerState = useMenuDropdownTrigger({
+	const triggerState = DropdownMenuTriggerState.create({
 		id: box.with(() => id),
 		disabled: box.with(() => disabled ?? false),
 		ref: box.with(

package/dist/bits/menu/components/menu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import type { MenuRootProps } from "../types.js";
-	import { useMenuMenu, useMenuRoot } from "../menu.svelte.js";
+	import { MenuMenuState, MenuRootState } from "../menu.svelte.js";
 	import { noop } from "../../../internal/noop.js";
 	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
 
@@ -9,13 +9,14 @@
 		open = $bindable(false),
 		dir = "ltr",
 		onOpenChange = noop,
+		onOpenChangeComplete = noop,
 		_internal_variant: variant = "dropdown-menu",
 		children,
 	}: MenuRootProps & {
 		_internal_variant?: "context-menu" | "dropdown-menu" | "menubar";
 	} = $props();
 
-	const root = useMenuRoot({
+	const root = MenuRootState.create({
 		variant: box.with(() => variant),
 		dir: box.with(() => dir),
 		onClose: () => {
@@ -24,15 +25,19 @@
 		},
 	});
 
-	useMenuMenu(root, {
-		open: box.with(
-			() => open,
-			(v) => {
-				open = v;
-				onOpenChange(v);
-			}
-		),
-	});
+	MenuMenuState.create(
+		{
+			open: box.with(
+				() => open,
+				(v) => {
+					open = v;
+					onOpenChange(v);
+				}
+			),
+			onOpenChangeComplete: box.with(() => onOpenChangeComplete),
+		},
+		root
+	);
 </script>
 
 <FloatingLayer>