sheer-ui 0.4.0 → 0.4.3

package/src/lib/components/menu/components/menu-checkbox-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { bindableWith, boxWith } from '../../../internal/tools/index.js';
+	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { MenuCheckboxGroupProps } from '../types.js';
 	import { MenuCheckboxGroupState } from '../menu.svelte.js';
@@ -18,10 +18,12 @@
 	}: MenuCheckboxGroupProps = $props();
 
 	const checkboxGroupState = MenuCheckboxGroupState.create({
-		value: bindableWith(
+		value: boxWith(
 			() => $state.snapshot(value),
-			(v) => (value = $state.snapshot(v)),
-			(v) => onValueChange(v),
+			(v) => {
+				value = $state.snapshot(v);
+				onValueChange(v);
+			},
 		),
 		ref: boxWith(
 			() => ref,

package/src/lib/components/menu/components/menu-checkbox-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { join } from 'overrule';
-	import { bindableWith, boxWith, repairBindable } from '../../../internal/tools/index.js';
+	import { boxWith, repairBindable } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { MenuCheckboxItemProps } from '../types.js';
 	import { MenuCheckboxItemState } from '../menu.svelte.js';
@@ -26,10 +26,12 @@
 	}: MenuCheckboxItemProps = $props();
 
 	const checkboxItemState = MenuCheckboxItemState.create({
-		checked: bindableWith(
+		checked: boxWith(
 			() => checked,
-			(v) => (checked = v),
-			(v) => onCheckedChange(v),
+			(v) => {
+				checked = v;
+				onCheckedChange(v);
+			},
 		),
 		id: boxWith(() => id),
 		disabled: boxWith(() => disabled),
@@ -38,10 +40,12 @@
 			() => ref,
 			(v) => (ref = v),
 		),
-		indeterminate: bindableWith(
+		indeterminate: boxWith(
 			() => indeterminate,
-			(v) => (indeterminate = v),
-			(v) => onIndeterminateChange(v),
+			(v) => {
+				indeterminate = v;
+				onIndeterminateChange(v);
+			},
 		),
 		value: boxWith(() => value),
 	});

package/src/lib/components/menu/menu.svelte.ts

@@ -4,11 +4,11 @@ import {
 	getWindow,
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
-	simpleBox,
 	boxWith,
 	type ReadableBox,
 } from '../../internal/tools/index.js';
 import { mergeProps } from '../../internal/merge-props.js';
+import type { Measurable } from '../../internal/floating-layer/index.js';
 import { createContext, onDestroy, tick, untrack } from 'svelte';
 import { SUB_OPEN_KEYS, getCheckedState, isMouseEvent } from './utils.js';
 import { focusFirst } from '../../internal/focus.js';
@@ -35,7 +35,7 @@ import type { Direction } from '../../internal/index.js';
 import { getTabbableFrom, isTabbable } from '../../internal/tabbable.js';
 import type { KeyboardEventHandler, PointerEventHandler, MouseEventHandler } from 'svelte/elements';
 import { Typeahead, textContentOf } from '../../internal/typeahead.svelte.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 import { useOpenChangeComplete } from '../../internal/animations-settled.svelte.js';
 import { joinGroup } from '../../internal/group-value.svelte.js';
 import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
@@ -601,10 +601,10 @@ export class MenuContentState {
 			getWindow: () => this.domContext.getWindow(),
 		});
 		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: boxWith(() => this.parentMenu.contentNode),
+			rootNode: () => this.parentMenu.contentNode,
 			candidateSelector: this.#candidateSelector,
-			loop: this.opts.loop,
-			orientation: boxWith(() => 'vertical'),
+			loop: () => this.opts.loop.current,
+			orientation: () => 'vertical',
 		});
 
 		$effect(() => {
@@ -1139,7 +1139,26 @@ export class MenuCheckboxItemState {
 	constructor(opts: MenuItemCombinedProps & MenuCheckboxItemStateOpts, shared: MenuItemSharedState) {
 		this.opts = opts;
 		this.item = new MenuItemState(opts, shared, { closes: false, act: () => this.#toggle() });
-		this.groupChecked = joinGroup(hasMenuCheckboxGroup() ? getMenuCheckboxGroup() : null, opts);
+		// Accessor views over the boxed options until the menu engine converts.
+		const group = hasMenuCheckboxGroup() ? getMenuCheckboxGroup() : null;
+		this.groupChecked = joinGroup(
+			group && {
+				get value() {
+					return group.opts.value.current;
+				},
+				set value(v) {
+					group.opts.value.current = v;
+				},
+			},
+			{
+				get value() {
+					return opts.value.current;
+				},
+				get checked() {
+					return opts.checked.current;
+				},
+			},
+		);
 	}
 
 	#toggle() {
@@ -1461,11 +1480,11 @@ export class ContextMenuTriggerState {
 	readonly opts: ContextMenuTriggerStateOpts;
 	readonly parentMenu: MenuMenuState;
 	readonly attachment: RefAttachment;
-	#point = $state({ x: 0, y: 0 });
-
-	virtualElement = simpleBox({
+	#point = $state.raw({ x: 0, y: 0 });
+	// One stable Measurable: readers that measure inside a derived track `#point` through it.
+	readonly virtualElement: Measurable = {
 		getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...this.#point }),
-	});
+	};
 	#longPressTimer = createEffectTimeout((e: BitsPointerEvent) => this.#handleOpen(e), () => 700);
 
 	constructor(opts: ContextMenuTriggerStateOpts, parentMenu: MenuMenuState) {
@@ -1478,15 +1497,6 @@ export class ContextMenuTriggerState {
 		this.onpointercancel = this.onpointercancel.bind(this);
 		this.onpointerup = this.onpointerup.bind(this);
 
-		$effect(() => {
-			const point = this.#point;
-			untrack(() => {
-				this.virtualElement.current = {
-					getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...point }),
-				};
-			});
-		});
-
 		$effect(() => {
 			const isDisabled = this.opts.disabled.current;
 			untrack(() => {

package/src/lib/components/menubar/menubar.svelte.ts

@@ -1,4 +1,4 @@
-import { type ReadableBox, boxWith, attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { type ReadableBox, attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
 import type { InteractOutsideBehaviorType } from '../../internal/dismissible-layer/types.js';
 import type { Direction } from '../../internal/index.js';
 import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed } from '../../internal/attrs.js';
@@ -7,7 +7,7 @@ import type { OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/type
 import { createContext, onMount, tick, untrack } from 'svelte';
 import type { FocusEventHandler, KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
 import { getFloatingContentCSSVars } from '../../internal/floating-layer/index.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
 
 const menubarAttrs = createBitsAttrs({
@@ -45,10 +45,10 @@ export class MenubarRootState {
 		this.opts = opts;
 		this.attachment = attachRef(this.opts.ref);
 		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: this.opts.ref,
+			rootNode: () => this.opts.ref.current,
 			candidateAttr: menubarAttrs.trigger,
-			loop: this.opts.loop,
-			orientation: boxWith(() => 'horizontal'),
+			loop: () => this.opts.loop.current,
+			orientation: () => 'horizontal',
 		});
 	}
 
@@ -203,7 +203,8 @@ export class MenubarTriggerState {
 		this.root = menu.root;
 		this.rovingItem = new RovingFocusItem({
 			group: this.root.rovingFocusGroup,
-			ref: this.opts.ref,
+			ref: () => this.opts.ref.current,
+			setRef: (v) => (this.opts.ref.current = v),
 			onRefChange: (v) => (this.menu.triggerNode = v),
 		});
 

package/src/lib/components/meter/components/meter.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { MeterRootProps } from '../types.js';
 	import { MeterRootState } from '../meter.svelte.js';
@@ -19,14 +18,24 @@
 	}: MeterRootProps = $props();
 
 	const rootState = MeterRootState.create({
-		value: boxWith(() => value),
-		max: boxWith(() => max),
-		min: boxWith(() => min),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get value() {
+			return value;
+		},
+		get max() {
+			return max;
+		},
+		get min() {
+			return min;
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/src/lib/components/meter/meter.svelte.ts

@@ -1,5 +1,5 @@
-import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { attachRef } from '../../internal/tools/index.js';
+import type { RefAttachment, RefOpts } from '../../internal/types.js';
 import { createBitsAttrs } from '../../internal/attrs.js';
 
 const meterAttrs = createBitsAttrs({
@@ -7,14 +7,11 @@ const meterAttrs = createBitsAttrs({
 	parts: ['root'],
 });
 
-interface MeterRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: number;
-			max: number;
-			min: number;
-		}> {}
+interface MeterRootStateOpts extends RefOpts {
+	readonly value: number;
+	readonly max: number;
+	readonly min: number;
+}
 
 export class MeterRootState {
 	static create(opts: MeterRootStateOpts) {
@@ -26,20 +23,20 @@ export class MeterRootState {
 
 	constructor(opts: MeterRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
 				role: 'meter',
-				value: this.opts.value.current,
-				'aria-valuemin': this.opts.min.current,
-				'aria-valuemax': this.opts.max.current,
-				'aria-valuenow': this.opts.value.current,
-				'data-value': this.opts.value.current,
-				'data-max': this.opts.max.current,
-				'data-min': this.opts.min.current,
+				value: this.opts.value,
+				'aria-valuemin': this.opts.min,
+				'aria-valuemax': this.opts.max,
+				'aria-valuenow': this.opts.value,
+				'data-value': this.opts.value,
+				'data-max': this.opts.max,
+				'data-min': this.opts.min,
 				[meterAttrs.root]: '',
 				...this.attachment,
 			}) as const,

package/src/lib/components/navigation-menu/components/navigation-menu-content.svelte

@@ -53,6 +53,6 @@
 	);
 </script>
 
-<Portal to={contentState.context.viewportRef.current || undefined} disabled={!contentState.context.viewportRef.current}>
+<Portal to={contentState.context.viewportRef || undefined} disabled={!contentState.context.viewportRef}>
 	<NavigationMenuContentImpl {...mergedProps} {children} {child} />
 </Portal>

package/src/lib/components/navigation-menu/components/navigation-menu-indicator.svelte

@@ -41,8 +41,8 @@
 	);
 </script>
 
-{#if indicatorState.context.indicatorTrackRef.current}
-	<Portal to={indicatorState.context.indicatorTrackRef.current}>
+{#if indicatorState.context.indicatorTrackRef}
+	<Portal to={indicatorState.context.indicatorTrackRef}>
 		<NavigationMenuIndicatorImpl {...mergedProps} {id} bind:ref {child}>
 			{#snippet children()}
 				{#if children}

package/src/lib/components/navigation-menu/components/navigation-menu-trigger.svelte

@@ -74,7 +74,7 @@
 	<!-- focus proxy: visually hidden (the sr-only utility) but focusable, for nav-menu focus management -->
 	<span {...mergeProps(triggerState.focusProxyProps, mounted, { class: 'sr-only' })}></span>
 
-	{#if triggerState.context.viewportRef.current}
+	{#if triggerState.context.viewportRef}
 		<span aria-owns={triggerState.itemContext.contentId ?? undefined}></span>
 	{/if}
 {/if}

package/src/lib/components/navigation-menu/navigation-menu.svelte.ts

@@ -4,20 +4,16 @@
  */
 import {
 	type AnyFn,
-	type ReadableBox,
 	type ReadableBoxedValues,
 	type WithRefProps,
-	type WritableBox,
 	type WritableBoxedValues,
 	attachRef,
-	boxAutoReset,
 	DOMContext,
 	getWindow,
-	simpleBox,
 	boxWith,
 } from '../../internal/tools/index.js';
 import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
-import { createContext, tick, untrack, type Snippet } from 'svelte';
+import { createContext, tick, untrack } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import { type Direction, type Orientation } from '../../internal/index.js';
 import { createId } from '../../internal/create-id.js';
@@ -29,7 +25,7 @@ import { kbd } from '../../internal/kbd.js';
 import { on } from 'svelte/events';
 import { isElement } from '../../internal/tools/utils/dom.js';
 import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from 'svelte/elements';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 import { observeResizeMany } from '../../internal/svelte-resize-observer.svelte.js';
 
 const navigationMenuAttrs = createBitsAttrs({
@@ -79,8 +75,8 @@ class NavigationMenuProviderState {
 		return setNavigationMenuProvider(new NavigationMenuProviderState(opts));
 	}
 	readonly opts: NavigationMenuProviderStateOpts;
-	indicatorTrackRef = simpleBox<HTMLElement | null>(null);
-	viewportRef = simpleBox<HTMLElement | null>(null);
+	indicatorTrackRef = $state.raw<HTMLElement | null>(null);
+	viewportRef = $state.raw<HTMLElement | null>(null);
 	viewportContent = new SvelteMap<string, NavigationMenuItemState>();
 	onTriggerEnter: NavigationMenuProviderStateOpts['onTriggerEnter'];
 	onTriggerLeave: () => void = () => {};
@@ -126,29 +122,27 @@ export class NavigationMenuRootState {
 	readonly opts: NavigationMenuRootStateOpts;
 	readonly attachment: RefAttachment;
 	provider: NavigationMenuProviderState;
-	previousValue = simpleBox('');
-	isDelaySkipped: WritableBox<boolean>;
+	previousValue = $state.raw('');
+	// False from an open until skipDelayDuration after the close: a hover in that window skips delayDuration.
+	#isOpenDelayed = $state(true);
+	readonly #skipDelayTimer: ReturnType<typeof createEffectTimeout<() => void>>;
 	readonly #derivedDelay = $derived.by(() => {
 		const isOpen = this.opts?.value?.current !== '';
-		if (isOpen || this.isDelaySkipped.current) {
-			// 150 for user to switch trigger or move into content view
-			return 150;
-		} else {
-			return this.opts.delayDuration.current;
-		}
+		// 150ms while open or in the skip window: room to switch trigger or move into the content.
+		return isOpen || !this.#isOpenDelayed ? 150 : this.opts.delayDuration.current;
 	});
 
 	constructor(opts: NavigationMenuRootStateOpts) {
 		this.opts = opts;
 		this.attachment = attachRef(this.opts.ref);
-		this.isDelaySkipped = boxAutoReset(false, {
-			afterMs: this.opts.skipDelayDuration.current,
-			getWindow: () => getWindow(opts.ref.current),
-		});
+		this.#skipDelayTimer = createEffectTimeout(
+			() => (this.#isOpenDelayed = true),
+			() => this.opts.skipDelayDuration.current,
+		);
 
 		this.provider = NavigationMenuProviderState.create({
 			value: this.opts.value,
-			previousValue: this.previousValue,
+			previousValue: boxWith(() => this.previousValue, (v) => (this.previousValue = v)),
 			dir: this.opts.dir,
 			orientation: this.opts.orientation,
 			rootNavigationMenuRef: this.opts.ref,
@@ -179,7 +173,6 @@ export class NavigationMenuRootState {
 	};
 
 	#onTriggerLeave = () => {
-		this.isDelaySkipped.current = false;
 		this.#debouncedFn.start('', null);
 	};
 
@@ -203,14 +196,19 @@ export class NavigationMenuRootState {
 	};
 
 	setValue = (newValue: string, itemState: NavigationMenuItemState | null) => {
-		this.previousValue.current = this.opts.value.current;
+		this.previousValue = this.opts.value.current;
 		this.opts.value.current = newValue;
 		this.provider.setActiveItem(itemState);
 
 		// When all menus are closed, we want to reset previousValue to prevent
 		// weird transitions from old positions when opening fresh
 		if (newValue === '') {
-			this.previousValue.current = '';
+			this.previousValue = '';
+			if (this.opts.skipDelayDuration.current === 0) this.#isOpenDelayed = true;
+			else this.#skipDelayTimer.start();
+		} else {
+			this.#skipDelayTimer.stop();
+			this.#isOpenDelayed = false;
 		}
 	};
 
@@ -243,7 +241,7 @@ export class NavigationMenuSubState {
 	}
 	readonly opts: NavigationMenuSubStateOpts;
 	readonly context: NavigationMenuProviderState;
-	previousValue = simpleBox('');
+	previousValue = $state.raw('');
 	readonly subProvider: NavigationMenuProviderState;
 	readonly attachment: RefAttachment;
 
@@ -261,19 +259,19 @@ export class NavigationMenuSubState {
 			onTriggerEnter: this.setValue,
 			onItemSelect: this.setValue,
 			onItemDismiss: () => this.setValue('', null),
-			previousValue: this.previousValue,
+			previousValue: boxWith(() => this.previousValue, (v) => (this.previousValue = v)),
 		});
 	}
 
 	setValue = (newValue: string, itemState: NavigationMenuItemState | null) => {
-		this.previousValue.current = this.opts.value.current;
+		this.previousValue = this.opts.value.current;
 		this.opts.value.current = newValue;
 		this.subProvider.setActiveItem(itemState);
 
 		// When all menus are closed, we want to reset previousValue to prevent
 		// weird transitions from old positions when opening fresh
 		if (newValue === '') {
-			this.previousValue.current = '';
+			this.previousValue = '';
 		}
 	};
 
@@ -295,12 +293,11 @@ export class NavigationMenuListState {
 	static create(opts: NavigationMenuListStateOpts) {
 		return setNavigationMenuList(new NavigationMenuListState(opts, getNavigationMenuProvider()));
 	}
-	wrapperId = simpleBox('');
-	wrapperRef = simpleBox<HTMLElement | null>(null);
+	readonly wrapperId: string;
 	readonly opts: NavigationMenuListStateOpts;
 	readonly context: NavigationMenuProviderState;
 	readonly attachment: RefAttachment;
-	readonly wrapperAttachment: RefAttachment = attachRef(this.wrapperRef, (v) => (this.context.indicatorTrackRef.current = v));
+	readonly wrapperAttachment: RefAttachment = attachRef((v) => (this.context.indicatorTrackRef = v));
 	listTriggers = $state.raw<HTMLElement[]>([]);
 	readonly rovingFocusGroup: RovingFocusGroup;
 	wrapperMounted = $state(false);
@@ -308,13 +305,13 @@ export class NavigationMenuListState {
 	constructor(opts: NavigationMenuListStateOpts, context: NavigationMenuProviderState) {
 		this.opts = opts;
 		this.context = context;
-		this.wrapperId.current = createId('wrapper', opts.id.current);
+		this.wrapperId = createId('wrapper', opts.id.current);
 		this.attachment = attachRef(this.opts.ref);
 		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: opts.ref,
+			rootNode: () => opts.ref.current,
 			candidateSelector: `${navigationMenuAttrs.selector('trigger')}:not([data-disabled]), ${navigationMenuAttrs.selector('link')}:not([data-disabled])`,
-			loop: boxWith(() => false),
-			orientation: this.context.opts.orientation,
+			loop: () => false,
+			orientation: () => this.context.opts.orientation.current,
 		});
 	}
 
@@ -328,7 +325,7 @@ export class NavigationMenuListState {
 	readonly wrapperProps = $derived.by(
 		() =>
 			({
-				id: this.wrapperId.current,
+				id: this.wrapperId,
 				...this.wrapperAttachment,
 			}) as const,
 	);
@@ -366,9 +363,6 @@ export class NavigationMenuItemState {
 	wasEscapeClose = false;
 	readonly contentId = $derived.by(() => this.contentNode?.id);
 	readonly triggerId = $derived.by(() => this.triggerNode?.id);
-	contentChildren: ReadableBox<Snippet | undefined> = simpleBox(undefined);
-	contentChild: ReadableBox<Snippet<[{ props: Record<string, unknown> }]> | undefined> = simpleBox(undefined);
-	contentProps: ReadableBox<Record<string, unknown>> = simpleBox({});
 	domContext: DOMContext;
 	constructor(opts: NavigationMenuItemStateOpts, listContext: NavigationMenuListState) {
 		this.opts = opts;
@@ -423,13 +417,13 @@ export class NavigationMenuTriggerState {
 	}
 	readonly opts: NavigationMenuTriggerStateOpts;
 	readonly attachment: RefAttachment;
-	focusProxyId = simpleBox('');
-	focusProxyRef = simpleBox<HTMLElement | null>(null);
-	readonly focusProxyAttachment: RefAttachment = attachRef(this.focusProxyRef, (v) => (this.itemContext.focusProxyNode = v));
+	readonly focusProxyId: string;
+	readonly focusProxyAttachment: RefAttachment = attachRef((v) => (this.itemContext.focusProxyNode = v));
 	context: NavigationMenuProviderState;
 	itemContext: NavigationMenuItemState;
 	listContext: NavigationMenuListState;
-	hasPointerMoveOpened = simpleBox(false);
+	#hasPointerMoveOpened = false;
+	readonly #pointerMoveResetTimer: ReturnType<typeof createEffectTimeout<() => void>>;
 	wasClickClose = false;
 	focusProxyMounted = $state(false);
 	readonly open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
@@ -444,12 +438,13 @@ export class NavigationMenuTriggerState {
 		},
 	) {
 		this.opts = opts;
-		this.focusProxyId.current = createId('focus-proxy', opts.id.current);
+		this.focusProxyId = createId('focus-proxy', opts.id.current);
 		this.attachment = attachRef(this.opts.ref, (v) => (this.itemContext.triggerNode = v));
-		this.hasPointerMoveOpened = boxAutoReset(false, {
-			afterMs: 300,
-			getWindow: () => getWindow(opts.ref.current),
-		});
+		this.#pointerMoveResetTimer = createEffectTimeout(
+			() => (this.#hasPointerMoveOpened = false),
+			() => 300,
+			() => getWindow(opts.ref.current),
+		);
 		this.context = context.provider;
 		this.itemContext = context.item;
 		this.listContext = context.list;
@@ -474,24 +469,26 @@ export class NavigationMenuTriggerState {
 			this.opts.disabled.current ||
 			this.wasClickClose ||
 			this.itemContext.wasEscapeClose ||
-			this.hasPointerMoveOpened.current ||
+			this.#hasPointerMoveOpened ||
 			!this.itemContext.opts.openOnHover.current
 		) {
 			return;
 		}
 		this.context.onTriggerEnter(this.itemContext.opts.value.current, this.itemContext);
-		this.hasPointerMoveOpened.current = true;
+		this.#hasPointerMoveOpened = true;
+		this.#pointerMoveResetTimer.start();
 	});
 
 	onpointerleave = whenMouse(() => {
 		if (this.opts.disabled.current || !this.itemContext.opts.openOnHover.current) return;
 		this.context.onTriggerLeave();
-		this.hasPointerMoveOpened.current = false;
+		this.#hasPointerMoveOpened = false;
+		this.#pointerMoveResetTimer.stop();
 	});
 
 	onclick: MouseEventHandler<HTMLButtonElement> = () => {
 		// if opened via pointer move, we prevent the click event
-		if (this.hasPointerMoveOpened.current) return;
+		if (this.#hasPointerMoveOpened) return;
 		const shouldClose = this.open && (!this.itemContext.opts.openOnHover.current || this.context.opts.isRootMenu);
 		if (shouldClose) {
 			this.context.onItemSelect('', null);
@@ -547,7 +544,7 @@ export class NavigationMenuTriggerState {
 	readonly focusProxyProps = $derived.by(
 		() =>
 			({
-				id: this.focusProxyId.current,
+				id: this.focusProxyId,
 				tabindex: 0,
 				onfocus: this.focusProxyOnFocus,
 				...this.focusProxyAttachment,
@@ -692,7 +689,7 @@ export class NavigationMenuIndicatorImplState {
 		this.listContext = context.list;
 		this.attachment = attachRef(this.opts.ref);
 
-		observeResizeMany(() => [this.activeTrigger, this.context.indicatorTrackRef.current], this.handlePositionChange);
+		observeResizeMany(() => [this.activeTrigger, this.context.indicatorTrackRef], this.handlePositionChange);
 	}
 
 	handlePositionChange = () => {
@@ -846,10 +843,10 @@ export class NavigationMenuContentImplState {
 		this.context = itemContext.listContext.context;
 		this.domContext = new DOMContext(opts.ref);
 		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: this.opts.ref,
+			rootNode: () => this.opts.ref.current,
 			candidateNodes: getTabbableCandidates,
-			loop: boxWith(() => false),
-			orientation: this.context.opts.orientation,
+			loop: () => false,
+			orientation: () => this.context.opts.orientation.current,
 		});
 
 		$effect(() => {
@@ -886,7 +883,7 @@ export class NavigationMenuContentImplState {
 	onInteractOutside = (e: PointerEvent) => {
 		const target = e.target as HTMLElement;
 		const isTrigger = this.listContext.listTriggers.some((trigger) => trigger.contains(target));
-		const isRootViewport = this.context.opts.isRootMenu && this.context.viewportRef.current?.contains(target);
+		const isRootViewport = this.context.opts.isRootMenu && this.context.viewportRef?.contains(target);
 		if (!this.context.opts.isRootMenu && !isTrigger) {
 			this.context.onItemDismiss();
 			return;
@@ -988,14 +985,14 @@ export class NavigationMenuViewportState {
 	constructor(opts: NavigationMenuViewportStateOpts, context: NavigationMenuProviderState) {
 		this.opts = opts;
 		this.context = context;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.context.viewportRef.current = v));
+		this.attachment = attachRef(this.opts.ref, (v) => (this.context.viewportRef = v));
 
 		$effect(() => {
 			const _activeContentValue = this.activeContentValue;
 			const _open = this.open;
 			untrack(() => {
 				tick().then(() => {
-					const currNode = this.context.viewportRef.current;
+					const currNode = this.context.viewportRef;
 					if (!currNode) return;
 					const el = (currNode.querySelector<HTMLElement>('[data-state=open]')?.children?.[0] as HTMLElement | null) ?? null;