sheer-ui 0.4.2 → 0.5.0

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

@@ -1,1089 +0,0 @@
-/**
- * Based on Radix UI's Navigation Menu
- * https://www.radix-ui.com/docs/primitives/components/navigation-menu
- */
-import {
-	type AnyFn,
-	type ReadableBoxedValues,
-	type WithRefProps,
-	type WritableBoxedValues,
-	attachRef,
-	DOMContext,
-	getWindow,
-	boxWith,
-} from '../../internal/tools/index.js';
-import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
-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';
-import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed } from '../../internal/attrs.js';
-import { getTabbableCandidates } from '../../internal/tabbable.js';
-import { focusFirst } from '../../internal/focus.js';
-import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, RefAttachment } from '../../internal/types.js';
-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.svelte.js';
-import { observeResizeMany } from '../../internal/svelte-resize-observer.svelte.js';
-
-const navigationMenuAttrs = createBitsAttrs({
-	component: 'navigation-menu',
-	parts: ['root', 'sub', 'item', 'list', 'trigger', 'content', 'link', 'viewport', 'menu', 'indicator'],
-});
-
-const [getNavigationMenuProvider, setNavigationMenuProvider] = createContext<NavigationMenuProviderState>();
-export const [getNavigationMenuItem, setNavigationMenuItem] = createContext<NavigationMenuItemState>();
-const [getNavigationMenuList, setNavigationMenuList] = createContext<NavigationMenuListState>();
-const [getNavigationMenuContent, setNavigationMenuContent] = createContext<NavigationMenuContentState>();
-const [getNavigationMenuSub, setNavigationMenuSub] = createContext<NavigationMenuSubState>();
-
-const missingContextErrorUrl = 'https://svelte.dev/e/missing_context';
-
-function getNavigationMenuSubOr<TFallback>(fallback: TFallback): NavigationMenuSubState | TFallback {
-	try {
-		return getNavigationMenuSub();
-	} catch (error) {
-		if (error instanceof Error && error.message.includes(missingContextErrorUrl)) return fallback;
-		throw error;
-	}
-}
-
-interface NavigationMenuProviderStateOpts
-	extends
-		ReadableBoxedValues<{
-			dir: Direction;
-			orientation: Orientation;
-		}>,
-		WritableBoxedValues<{
-			rootNavigationMenuRef: HTMLElement | null;
-			value: string;
-			previousValue: string;
-		}> {
-	isRootMenu: boolean;
-	onTriggerEnter: (itemValue: string, itemState: NavigationMenuItemState | null) => void;
-	onTriggerLeave?: () => void;
-	onContentEnter?: () => void;
-	onContentLeave?: () => void;
-	onItemSelect: (itemValue: string, itemState: NavigationMenuItemState | null) => void;
-	onItemDismiss: () => void;
-}
-
-class NavigationMenuProviderState {
-	static create(opts: NavigationMenuProviderStateOpts) {
-		return setNavigationMenuProvider(new NavigationMenuProviderState(opts));
-	}
-	readonly opts: NavigationMenuProviderStateOpts;
-	indicatorTrackRef = $state.raw<HTMLElement | null>(null);
-	viewportRef = $state.raw<HTMLElement | null>(null);
-	viewportContent = new SvelteMap<string, NavigationMenuItemState>();
-	onTriggerEnter: NavigationMenuProviderStateOpts['onTriggerEnter'];
-	onTriggerLeave: () => void = () => {};
-	onContentEnter: () => void = () => {};
-	onContentLeave: () => void = () => {};
-	onItemSelect: NavigationMenuProviderStateOpts['onItemSelect'];
-	onItemDismiss: NavigationMenuProviderStateOpts['onItemDismiss'];
-	activeItem: NavigationMenuItemState | null = null;
-	prevActiveItem: NavigationMenuItemState | null = null;
-
-	constructor(opts: NavigationMenuProviderStateOpts) {
-		this.opts = opts;
-		this.onTriggerEnter = opts.onTriggerEnter;
-		this.onTriggerLeave = opts.onTriggerLeave ?? (() => {});
-		this.onContentEnter = opts.onContentEnter ?? (() => {});
-		this.onContentLeave = opts.onContentLeave ?? (() => {});
-		this.onItemDismiss = opts.onItemDismiss;
-		this.onItemSelect = opts.onItemSelect;
-	}
-
-	setActiveItem = (item: NavigationMenuItemState | null) => {
-		this.prevActiveItem = this.activeItem;
-		this.activeItem = item;
-	};
-}
-
-interface NavigationMenuRootStateOpts
-	extends
-		WithRefProps,
-		WritableBoxedValues<{
-			value: string;
-		}>,
-		ReadableBoxedValues<{
-			dir: Direction;
-			orientation: Orientation;
-			delayDuration: number;
-			skipDelayDuration: number;
-		}> {}
-export class NavigationMenuRootState {
-	static create(opts: NavigationMenuRootStateOpts) {
-		return new NavigationMenuRootState(opts);
-	}
-	readonly opts: NavigationMenuRootStateOpts;
-	readonly attachment: RefAttachment;
-	provider: NavigationMenuProviderState;
-	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 !== '';
-		// 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.#skipDelayTimer = createEffectTimeout(
-			() => (this.#isOpenDelayed = true),
-			() => this.opts.skipDelayDuration.current,
-		);
-
-		this.provider = NavigationMenuProviderState.create({
-			value: this.opts.value,
-			previousValue: boxWith(() => this.previousValue, (v) => (this.previousValue = v)),
-			dir: this.opts.dir,
-			orientation: this.opts.orientation,
-			rootNavigationMenuRef: this.opts.ref,
-			isRootMenu: true,
-			onTriggerEnter: (itemValue, itemState) => {
-				this.#onTriggerEnter(itemValue, itemState);
-			},
-			onTriggerLeave: this.#onTriggerLeave,
-			onContentEnter: this.#onContentEnter,
-			onContentLeave: this.#onContentLeave,
-			onItemSelect: this.#onItemSelect,
-			onItemDismiss: this.#onItemDismiss,
-		});
-	}
-
-	#debouncedFn = createEffectTimeout(
-		(val: string | undefined, itemState: NavigationMenuItemState | null) => {
-			// passing `undefined` meant to reset the debounce timer
-			if (typeof val === 'string') {
-				this.setValue(val, itemState);
-			}
-		},
-		() => this.#derivedDelay,
-	);
-
-	#onTriggerEnter = (itemValue: string, itemState: NavigationMenuItemState | null) => {
-		this.#debouncedFn.start(itemValue, itemState);
-	};
-
-	#onTriggerLeave = () => {
-		this.#debouncedFn.start('', null);
-	};
-
-	#onContentEnter = () => {
-		this.#debouncedFn.start(undefined, null);
-	};
-
-	#onContentLeave = () => {
-		if (this.provider.activeItem && this.provider.activeItem.opts.openOnHover.current === false) {
-			return;
-		}
-		this.#debouncedFn.start('', null);
-	};
-
-	#onItemSelect = (itemValue: string, itemState: NavigationMenuItemState | null) => {
-		this.setValue(itemValue, itemState);
-	};
-
-	#onItemDismiss = () => {
-		this.setValue('', null);
-	};
-
-	setValue = (newValue: string, itemState: NavigationMenuItemState | null) => {
-		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 = '';
-			if (this.opts.skipDelayDuration.current === 0) this.#isOpenDelayed = true;
-			else this.#skipDelayTimer.start();
-		} else {
-			this.#skipDelayTimer.stop();
-			this.#isOpenDelayed = false;
-		}
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'data-orientation': this.opts.orientation.current,
-				dir: this.opts.dir.current,
-				[navigationMenuAttrs.root]: '',
-				[navigationMenuAttrs.menu]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface NavigationMenuSubStateOpts
-	extends
-		WithRefProps,
-		WritableBoxedValues<{
-			value: string;
-		}>,
-		ReadableBoxedValues<{
-			orientation: Orientation;
-		}> {}
-
-export class NavigationMenuSubState {
-	static create(opts: NavigationMenuSubStateOpts) {
-		return new NavigationMenuSubState(opts, getNavigationMenuProvider());
-	}
-	readonly opts: NavigationMenuSubStateOpts;
-	readonly context: NavigationMenuProviderState;
-	previousValue = $state.raw('');
-	readonly subProvider: NavigationMenuProviderState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: NavigationMenuSubStateOpts, context: NavigationMenuProviderState) {
-		this.opts = opts;
-		this.context = context;
-		this.attachment = attachRef(this.opts.ref);
-
-		this.subProvider = NavigationMenuProviderState.create({
-			isRootMenu: false,
-			value: this.opts.value,
-			dir: this.context.opts.dir,
-			orientation: this.opts.orientation,
-			rootNavigationMenuRef: this.opts.ref,
-			onTriggerEnter: this.setValue,
-			onItemSelect: this.setValue,
-			onItemDismiss: () => this.setValue('', null),
-			previousValue: boxWith(() => this.previousValue, (v) => (this.previousValue = v)),
-		});
-	}
-
-	setValue = (newValue: string, itemState: NavigationMenuItemState | null) => {
-		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 = '';
-		}
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'data-orientation': this.opts.orientation.current,
-				[navigationMenuAttrs.sub]: '',
-				[navigationMenuAttrs.menu]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface NavigationMenuListStateOpts extends WithRefProps {}
-
-export class NavigationMenuListState {
-	static create(opts: NavigationMenuListStateOpts) {
-		return setNavigationMenuList(new NavigationMenuListState(opts, getNavigationMenuProvider()));
-	}
-	readonly wrapperId: string;
-	readonly opts: NavigationMenuListStateOpts;
-	readonly context: NavigationMenuProviderState;
-	readonly attachment: RefAttachment;
-	readonly wrapperAttachment: RefAttachment = attachRef((v) => (this.context.indicatorTrackRef = v));
-	listTriggers = $state.raw<HTMLElement[]>([]);
-	readonly rovingFocusGroup: RovingFocusGroup;
-	wrapperMounted = $state(false);
-
-	constructor(opts: NavigationMenuListStateOpts, context: NavigationMenuProviderState) {
-		this.opts = opts;
-		this.context = context;
-		this.wrapperId = createId('wrapper', opts.id.current);
-		this.attachment = attachRef(this.opts.ref);
-		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: () => opts.ref.current,
-			candidateSelector: `${navigationMenuAttrs.selector('trigger')}:not([data-disabled]), ${navigationMenuAttrs.selector('link')}:not([data-disabled])`,
-			loop: () => false,
-			orientation: () => this.context.opts.orientation.current,
-		});
-	}
-
-	registerTrigger(trigger: HTMLElement | null) {
-		if (trigger) this.listTriggers.push(trigger);
-		return () => {
-			this.listTriggers = this.listTriggers.filter((t) => t.id !== trigger!.id);
-		};
-	}
-
-	readonly wrapperProps = $derived.by(
-		() =>
-			({
-				id: this.wrapperId,
-				...this.wrapperAttachment,
-			}) as const,
-	);
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'data-orientation': this.context.opts.orientation.current,
-				[navigationMenuAttrs.list]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface NavigationMenuItemStateOpts
-	extends
-		WithRefProps,
-		ReadableBoxedValues<{
-			value: string;
-			openOnHover: boolean;
-		}> {}
-
-export class NavigationMenuItemState {
-	static create(opts: NavigationMenuItemStateOpts) {
-		return setNavigationMenuItem(new NavigationMenuItemState(opts, getNavigationMenuList()));
-	}
-	readonly opts: NavigationMenuItemStateOpts;
-	readonly attachment: RefAttachment;
-	readonly listContext: NavigationMenuListState;
-	contentNode = $state<HTMLElement | null>(null);
-	triggerNode = $state<HTMLElement | null>(null);
-	focusProxyNode = $state<HTMLElement | null>(null);
-	restoreContentTabOrder: AnyFn = () => {};
-	wasEscapeClose = false;
-	readonly contentId = $derived.by(() => this.contentNode?.id);
-	readonly triggerId = $derived.by(() => this.triggerNode?.id);
-	domContext: DOMContext;
-	constructor(opts: NavigationMenuItemStateOpts, listContext: NavigationMenuListState) {
-		this.opts = opts;
-		this.listContext = listContext;
-		this.domContext = new DOMContext(opts.ref);
-		this.attachment = attachRef(this.opts.ref);
-	}
-
-	#handleContentEntry = (side: 'start' | 'end' = 'start') => {
-		if (!this.contentNode) return;
-		this.restoreContentTabOrder();
-		const candidates = getTabbableCandidates(this.contentNode);
-		if (candidates.length) focusFirst(side === 'start' ? candidates : candidates.reverse(), () => this.domContext.getActiveElement());
-	};
-
-	#handleContentExit = () => {
-		if (!this.contentNode) return;
-		const candidates = getTabbableCandidates(this.contentNode);
-		if (candidates.length) this.restoreContentTabOrder = removeFromTabOrder(candidates);
-	};
-
-	onEntryKeydown = this.#handleContentEntry;
-	onFocusProxyEnter = this.#handleContentEntry;
-	onRootContentClose = this.#handleContentExit;
-	onContentFocusOutside = this.#handleContentExit;
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				[navigationMenuAttrs.item]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface NavigationMenuTriggerStateOpts
-	extends
-		WithRefProps,
-		ReadableBoxedValues<{
-			disabled: boolean | null | undefined;
-		}> {}
-
-export class NavigationMenuTriggerState {
-	static create(opts: NavigationMenuTriggerStateOpts) {
-		return new NavigationMenuTriggerState(opts, {
-			provider: getNavigationMenuProvider(),
-			item: getNavigationMenuItem(),
-			list: getNavigationMenuList(),
-			sub: getNavigationMenuSubOr(null),
-		});
-	}
-	readonly opts: NavigationMenuTriggerStateOpts;
-	readonly attachment: RefAttachment;
-	readonly focusProxyId: string;
-	readonly focusProxyAttachment: RefAttachment = attachRef((v) => (this.itemContext.focusProxyNode = v));
-	context: NavigationMenuProviderState;
-	itemContext: NavigationMenuItemState;
-	listContext: NavigationMenuListState;
-	#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);
-
-	constructor(
-		opts: NavigationMenuTriggerStateOpts,
-		context: {
-			provider: NavigationMenuProviderState;
-			item: NavigationMenuItemState;
-			list: NavigationMenuListState;
-			sub: NavigationMenuSubState | null;
-		},
-	) {
-		this.opts = opts;
-		this.focusProxyId = createId('focus-proxy', opts.id.current);
-		this.attachment = attachRef(this.opts.ref, (v) => (this.itemContext.triggerNode = v));
-		this.#pointerMoveResetTimer = createEffectTimeout(
-			() => (this.#hasPointerMoveOpened = false),
-			() => 300,
-			() => getWindow(opts.ref.current),
-		);
-		this.context = context.provider;
-		this.itemContext = context.item;
-		this.listContext = context.list;
-
-		$effect(() => {
-			const _ref = this.opts.ref.current;
-			return untrack(() => {
-				const node = this.opts.ref.current;
-				if (!node) return;
-				return this.listContext.registerTrigger(node);
-			});
-		});
-	}
-
-	onpointerenter = (_: BitsPointerEvent<HTMLButtonElement>) => {
-		this.wasClickClose = false;
-		this.itemContext.wasEscapeClose = false;
-	};
-
-	onpointermove = whenMouse(() => {
-		if (
-			this.opts.disabled.current ||
-			this.wasClickClose ||
-			this.itemContext.wasEscapeClose ||
-			this.#hasPointerMoveOpened ||
-			!this.itemContext.opts.openOnHover.current
-		) {
-			return;
-		}
-		this.context.onTriggerEnter(this.itemContext.opts.value.current, this.itemContext);
-		this.#hasPointerMoveOpened = true;
-		this.#pointerMoveResetTimer.start();
-	});
-
-	onpointerleave = whenMouse(() => {
-		if (this.opts.disabled.current || !this.itemContext.opts.openOnHover.current) return;
-		this.context.onTriggerLeave();
-		this.#hasPointerMoveOpened = false;
-		this.#pointerMoveResetTimer.stop();
-	});
-
-	onclick: MouseEventHandler<HTMLButtonElement> = () => {
-		// if opened via pointer move, we prevent the click event
-		if (this.#hasPointerMoveOpened) return;
-		const shouldClose = this.open && (!this.itemContext.opts.openOnHover.current || this.context.opts.isRootMenu);
-		if (shouldClose) {
-			this.context.onItemSelect('', null);
-		} else if (!this.open) {
-			this.context.onItemSelect(this.itemContext.opts.value.current, this.itemContext);
-		}
-		this.wasClickClose = shouldClose;
-	};
-
-	onkeydown: KeyboardEventHandler<HTMLButtonElement> = (e) => {
-		const verticalEntryKey = this.context.opts.dir.current === 'rtl' ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT;
-		const entryKey = { horizontal: kbd.ARROW_DOWN, vertical: verticalEntryKey }[this.context.opts.orientation.current];
-		if (this.open && e.key === entryKey) {
-			this.itemContext.onEntryKeydown();
-			// prevent focus group from handling the event
-			e.preventDefault();
-			return;
-		}
-		this.itemContext.listContext.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
-	};
-
-	focusProxyOnFocus: FocusEventHandler<HTMLElement> = (e) => {
-		const content = this.itemContext.contentNode;
-		const prevFocusedElement = e.relatedTarget as HTMLElement | null;
-		const wasTriggerFocused = this.opts.ref.current && prevFocusedElement === this.opts.ref.current;
-		const wasFocusFromContent = content?.contains(prevFocusedElement);
-
-		if (wasTriggerFocused || !wasFocusFromContent) {
-			this.itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end');
-		}
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				disabled: this.opts.disabled.current,
-				'data-disabled': boolToEmptyStrOrUndef(Boolean(this.opts.disabled.current)),
-				'data-state': getDataOpenClosed(this.open),
-				'data-value': this.itemContext.opts.value.current,
-				'aria-expanded': boolToStr(this.open),
-				'aria-controls': this.itemContext.contentId,
-				[navigationMenuAttrs.trigger]: '',
-				onpointermove: this.onpointermove,
-				onpointerleave: this.onpointerleave,
-				onpointerenter: this.onpointerenter,
-				onclick: this.onclick,
-				onkeydown: this.onkeydown,
-				...this.attachment,
-			}) as const,
-	);
-
-	readonly focusProxyProps = $derived.by(
-		() =>
-			({
-				id: this.focusProxyId,
-				tabindex: 0,
-				onfocus: this.focusProxyOnFocus,
-				...this.focusProxyAttachment,
-			}) as const,
-	);
-}
-
-interface NavigationMenuLinkStateOpts
-	extends
-		WithRefProps,
-		ReadableBoxedValues<{
-			active: boolean;
-			onSelect: (e: Event) => void;
-		}> {}
-
-/** Bubbles from a selected link up through the DOM to the root content containing it — a sub-menu
- *  link must dismiss the root content, and only DOM ancestry knows which content that is. */
-const ROOT_CONTENT_DISMISS_EVENT = 'bitsRootContentDismiss';
-
-export class NavigationMenuLinkState {
-	static create(opts: NavigationMenuLinkStateOpts) {
-		return new NavigationMenuLinkState(opts, {
-			provider: getNavigationMenuProvider(),
-			item: getNavigationMenuItem(),
-		});
-	}
-	readonly opts: NavigationMenuLinkStateOpts;
-	readonly context: { provider: NavigationMenuProviderState; item: NavigationMenuItemState };
-	readonly attachment: RefAttachment;
-	isFocused = $state(false);
-
-	constructor(opts: NavigationMenuLinkStateOpts, context: { provider: NavigationMenuProviderState; item: NavigationMenuItemState }) {
-		this.opts = opts;
-		this.context = context;
-		this.attachment = attachRef(this.opts.ref);
-	}
-
-	onclick = (e: BitsMouseEvent<HTMLAnchorElement>) => {
-		// Cancelable envelope: the consumer's onSelect can preventDefault() to keep the menu open.
-		const linkSelectEvent = new CustomEvent('bitsLinkSelect', { bubbles: true, cancelable: true });
-		this.opts.onSelect.current(linkSelectEvent);
-
-		if (!linkSelectEvent.defaultPrevented && !e.metaKey) {
-			e.currentTarget.dispatchEvent(new CustomEvent(ROOT_CONTENT_DISMISS_EVENT, { bubbles: true, cancelable: true }));
-		}
-	};
-
-	onkeydown = (e: BitsKeyboardEvent) => {
-		if (this.context.item.contentNode) return;
-		this.context.item.listContext.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
-	};
-
-	onfocus = (_: BitsFocusEvent) => {
-		this.isFocused = true;
-	};
-
-	onblur = (_: BitsFocusEvent) => {
-		this.isFocused = false;
-	};
-
-	#handlePointerDismiss = () => {
-		// only close submenu if this link is not inside the currently open submenu content
-		const currentlyOpenValue = this.context.provider.opts.value.current;
-		const isInsideOpenSubmenu = this.context.item.opts.value.current === currentlyOpenValue;
-		const activeItem = this.context.item.listContext.context.activeItem;
-		if (activeItem && !activeItem.opts.openOnHover.current) return;
-		if (currentlyOpenValue && !isInsideOpenSubmenu) {
-			this.context.provider.onItemDismiss();
-		}
-	};
-
-	onpointerenter: PointerEventHandler<HTMLAnchorElement> = () => {
-		this.#handlePointerDismiss();
-	};
-
-	onpointermove = whenMouse(() => {
-		this.#handlePointerDismiss();
-	});
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'data-active': this.opts.active.current ? '' : undefined,
-				'aria-current': this.opts.active.current ? 'page' : undefined,
-				'data-focused': this.isFocused ? '' : undefined,
-				onclick: this.onclick,
-				onkeydown: this.onkeydown,
-				onfocus: this.onfocus,
-				onblur: this.onblur,
-				onpointerenter: this.onpointerenter,
-				onpointermove: this.onpointermove,
-				[navigationMenuAttrs.link]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface NavigationMenuIndicatorStateOpts extends WithRefProps {}
-
-export class NavigationMenuIndicatorState {
-	static create() {
-		return new NavigationMenuIndicatorState(getNavigationMenuProvider());
-	}
-	readonly context: NavigationMenuProviderState;
-
-	constructor(context: NavigationMenuProviderState) {
-		this.context = context;
-	}
-}
-
-export class NavigationMenuIndicatorImplState {
-	static create(opts: NavigationMenuIndicatorStateOpts) {
-		return new NavigationMenuIndicatorImplState(opts, {
-			provider: getNavigationMenuProvider(),
-			list: getNavigationMenuList(),
-		});
-	}
-	readonly opts: NavigationMenuIndicatorStateOpts;
-	readonly attachment: RefAttachment;
-	context: NavigationMenuProviderState;
-	listContext: NavigationMenuListState;
-	position = $state.raw<{ size: number; offset: number } | null>(null);
-	readonly isHorizontal = $derived.by(() => this.context.opts.orientation.current === 'horizontal');
-	readonly isVisible = $derived.by(() => !!this.context.opts.value.current);
-	readonly activeTrigger = $derived.by(() => {
-		const items = this.listContext.listTriggers;
-		const triggerNode = items.find((item) => item.getAttribute('data-value') === this.context.opts.value.current);
-		return triggerNode ?? null;
-	});
-	readonly shouldRender = $derived.by(() => this.position !== null);
-
-	constructor(
-		opts: NavigationMenuIndicatorStateOpts,
-		context: {
-			provider: NavigationMenuProviderState;
-			list: NavigationMenuListState;
-		},
-	) {
-		this.opts = opts;
-		this.context = context.provider;
-		this.listContext = context.list;
-		this.attachment = attachRef(this.opts.ref);
-
-		observeResizeMany(() => [this.activeTrigger, this.context.indicatorTrackRef], this.handlePositionChange);
-	}
-
-	handlePositionChange = () => {
-		if (!this.activeTrigger) return;
-		this.position = {
-			size: this.isHorizontal ? this.activeTrigger.offsetWidth : this.activeTrigger.offsetHeight,
-			offset: this.isHorizontal ? this.activeTrigger.offsetLeft : this.activeTrigger.offsetTop,
-		};
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'data-state': this.isVisible ? 'visible' : 'hidden',
-				'data-orientation': this.context.opts.orientation.current,
-				style: {
-					position: 'absolute',
-					...(this.isHorizontal
-						? {
-								left: 0,
-								width: `${this.position?.size}px`,
-								transform: `translateX(${this.position?.offset}px)`,
-							}
-						: {
-								top: 0,
-								height: `${this.position?.size}px`,
-								transform: `translateY(${this.position?.offset}px)`,
-							}),
-					// always mounted: hidden inline, the styled adapter transitions it (see ui.css)
-					...(this.isVisible ? {} : { visibility: 'hidden' }),
-				},
-				[navigationMenuAttrs.indicator]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface NavigationMenuContentStateOpts extends WithRefProps {}
-
-export class NavigationMenuContentState {
-	static create(opts: NavigationMenuContentStateOpts) {
-		return setNavigationMenuContent(
-			new NavigationMenuContentState(opts, {
-				provider: getNavigationMenuProvider(),
-				item: getNavigationMenuItem(),
-				list: getNavigationMenuList(),
-			}),
-		);
-	}
-	readonly opts: NavigationMenuContentStateOpts;
-	readonly context: NavigationMenuProviderState;
-	readonly itemContext: NavigationMenuItemState;
-	readonly listContext: NavigationMenuListState;
-	readonly attachment: RefAttachment;
-	readonly open = $derived.by(() => this.itemContext.opts.value.current === this.context.opts.value.current);
-	readonly value = $derived.by(() => this.itemContext.opts.value.current);
-
-	constructor(
-		opts: NavigationMenuContentStateOpts,
-		context: {
-			provider: NavigationMenuProviderState;
-			item: NavigationMenuItemState;
-			list: NavigationMenuListState;
-		},
-	) {
-		this.opts = opts;
-		this.context = context.provider;
-		this.itemContext = context.item;
-		this.listContext = context.list;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.itemContext.contentNode = v));
-	}
-
-	onpointerenter = (_: BitsPointerEvent) => {
-		this.context.onContentEnter();
-	};
-
-	onpointerleave = whenMouse(() => {
-		if (!this.itemContext.opts.openOnHover.current) return;
-		this.context.onContentLeave();
-	});
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				onpointerenter: this.onpointerenter,
-				onpointerleave: this.onpointerleave,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-type MotionAttribute = 'to-start' | 'to-end' | 'from-start' | 'from-end';
-interface NavigationMenuContentImplStateOpts extends WithRefProps {}
-
-export class NavigationMenuContentImplState {
-	static create(opts: NavigationMenuContentImplStateOpts, itemState?: NavigationMenuItemState) {
-		return new NavigationMenuContentImplState(opts, itemState ?? getNavigationMenuItem());
-	}
-	readonly opts: NavigationMenuContentImplStateOpts;
-	readonly itemContext: NavigationMenuItemState;
-	readonly context: NavigationMenuProviderState;
-	readonly listContext: NavigationMenuListState;
-	readonly attachment: RefAttachment;
-	readonly open = $derived.by(() => this.context.opts.value.current === this.itemContext.opts.value.current);
-	prevMotionAttribute: MotionAttribute | null = $state(null);
-	readonly motionAttribute: MotionAttribute | null = $derived.by(() => {
-		const items = this.listContext.listTriggers;
-		const values = items.map((item) => item.getAttribute('data-value')).filter(Boolean);
-		if (this.context.opts.dir.current === 'rtl') values.reverse();
-		const index = values.indexOf(this.context.opts.value.current);
-		const prevIndex = values.indexOf(this.context.opts.previousValue.current);
-		const isSelected = this.itemContext.opts.value.current === this.context.opts.value.current;
-		const wasSelected = prevIndex === values.indexOf(this.itemContext.opts.value.current);
-
-		// When all menus are closed, we want to reset motion state to prevent residual animations
-		if (!this.context.opts.value.current && !this.context.opts.previousValue.current) {
-			untrack(() => (this.prevMotionAttribute = null));
-			return null;
-		}
-
-		// We only want to update selected and the last selected content
-		// this avoids animations being interrupted outside of that range
-		if (!isSelected && !wasSelected) return untrack(() => this.prevMotionAttribute);
-
-		const attribute = (() => {
-			// Don't provide a direction on the initial open
-			if (index !== prevIndex) {
-				// If we're moving to this item from another
-				if (isSelected && prevIndex !== -1) return index > prevIndex ? 'from-end' : 'from-start';
-				// If we're leaving this item for another
-				if (wasSelected && index !== -1) return index > prevIndex ? 'to-start' : 'to-end';
-			}
-			// Otherwise we're entering from closed or leaving the list
-			// entirely and should not animate in any direction
-			return null;
-		})();
-
-		untrack(() => (this.prevMotionAttribute = attribute));
-		return attribute;
-	});
-	domContext: DOMContext;
-	readonly rovingFocusGroup: RovingFocusGroup;
-
-	constructor(opts: NavigationMenuContentImplStateOpts, itemContext: NavigationMenuItemState) {
-		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
-		this.itemContext = itemContext;
-		this.listContext = itemContext.listContext;
-		this.context = itemContext.listContext.context;
-		this.domContext = new DOMContext(opts.ref);
-		this.rovingFocusGroup = new RovingFocusGroup({
-			rootNode: () => this.opts.ref.current,
-			candidateNodes: getTabbableCandidates,
-			loop: () => false,
-			orientation: () => this.context.opts.orientation.current,
-		});
-
-		$effect(() => {
-			const _value = this.itemContext.opts.value.current;
-			const _triggerNode = this.itemContext.triggerNode;
-			const _ref = this.opts.ref.current;
-			return untrack(() => {
-				const content = this.opts.ref.current;
-				if (!(content && this.context.opts.isRootMenu)) return;
-
-				const handleClose = () => {
-					this.context.onItemDismiss();
-					this.itemContext.onRootContentClose();
-					if (content.contains(this.domContext.getActiveElement())) {
-						this.itemContext.triggerNode?.focus();
-					}
-				};
-				return on(content, ROOT_CONTENT_DISMISS_EVENT, handleClose);
-			});
-		});
-	}
-
-	onFocusOutside = (e: Event) => {
-		this.itemContext.onContentFocusOutside();
-		const target = e.target as HTMLElement;
-		// only dismiss content when focus moves outside of the menu
-		if (this.context.opts.rootNavigationMenuRef.current?.contains(target)) {
-			e.preventDefault();
-			return;
-		}
-		this.context.onItemDismiss();
-	};
-
-	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?.contains(target);
-		if (!this.context.opts.isRootMenu && !isTrigger) {
-			this.context.onItemDismiss();
-			return;
-		}
-		if (isTrigger || isRootViewport) {
-			e.preventDefault();
-			return;
-		}
-		if (!this.itemContext.opts.openOnHover.current) {
-			this.context.onItemSelect('', null);
-		}
-	};
-
-	onkeydown = (e: BitsKeyboardEvent) => {
-		// prevent parent menus handling sub-menu keydown events
-		const target = e.target;
-		if (!isElement(target)) return;
-		if (target.closest(navigationMenuAttrs.selector('menu')) !== this.context.opts.rootNavigationMenuRef.current) return;
-
-		const isMetaKey = e.altKey || e.ctrlKey || e.metaKey;
-		const isTabKey = e.key === kbd.TAB && !isMetaKey;
-
-		if (isTabKey) {
-			const candidates = getTabbableCandidates(e.currentTarget);
-			const focusedElement = this.domContext.getActiveElement();
-			const index = candidates.findIndex((candidate) => candidate === focusedElement);
-			const isMovingBackwards = e.shiftKey;
-			const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length);
-			if (focusFirst(nextCandidates, () => this.domContext.getActiveElement())) {
-				// prevent browser tab keydown because we've handled focus
-				e.preventDefault();
-				return;
-			} else {
-				// If we can't focus that means we're at the edges
-				// so focus the proxy and let browser handle
-				// tab/shift+tab keypress on the proxy instead
-				handleProxyFocus(this.itemContext.focusProxyNode);
-				return;
-			}
-		}
-
-		let activeEl: HTMLElement = this.domContext.getActiveElement() as HTMLElement;
-
-		if (this.itemContext.contentNode) {
-			const focusedNode = this.itemContext.contentNode.querySelector<HTMLElement>('[data-focused]');
-			if (focusedNode) {
-				activeEl = focusedNode;
-			}
-		}
-
-		if (activeEl === this.itemContext.triggerNode) return;
-
-		// typing in a field inside the content must not be hijacked as navigation
-		if (!activeEl || activeEl.nodeName === 'INPUT' || activeEl.nodeName === 'TEXTAREA') return;
-
-		this.rovingFocusGroup.handleKeydown(activeEl, e, true);
-	};
-
-	onEscapeKeydown = (_: KeyboardEvent) => {
-		this.context.onItemDismiss();
-		this.itemContext.triggerNode?.focus();
-		// prevent the dropdown from reopening after the escape key has been pressed
-		this.itemContext.wasEscapeClose = true;
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'aria-labelledby': this.itemContext.triggerId,
-				'data-motion': this.motionAttribute ?? undefined,
-				'data-orientation': this.context.opts.orientation.current,
-				'data-state': getDataOpenClosed(this.open),
-				// always mounted: hidden inline, the styled adapter transitions it (see ui.css)
-				style: this.open ? undefined : { visibility: 'hidden' },
-				onkeydown: this.onkeydown,
-				[navigationMenuAttrs.content]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface NavigationMenuViewportStateOpts extends WithRefProps {}
-
-export class NavigationMenuViewportState {
-	static create(opts: NavigationMenuViewportStateOpts) {
-		return new NavigationMenuViewportState(opts, getNavigationMenuProvider());
-	}
-	readonly opts: NavigationMenuViewportStateOpts;
-	readonly context: NavigationMenuProviderState;
-	readonly attachment: RefAttachment;
-	readonly open = $derived.by(() => !!this.context.opts.value.current);
-	readonly viewportWidth = $derived.by(() => (this.size ? `${this.size.width}px` : undefined));
-	readonly viewportHeight = $derived.by(() => (this.size ? `${this.size.height}px` : undefined));
-	readonly activeContentValue = $derived.by(() => this.context.opts.value.current);
-	size = $state<{ width: number; height: number } | null>(null);
-	contentNode = $state<HTMLElement | null>(null);
-
-	constructor(opts: NavigationMenuViewportStateOpts, context: NavigationMenuProviderState) {
-		this.opts = opts;
-		this.context = context;
-		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;
-					if (!currNode) return;
-					const el = (currNode.querySelector<HTMLElement>('[data-state=open]')?.children?.[0] as HTMLElement | null) ?? null;
-
-					this.contentNode = el;
-				});
-			});
-		});
-
-		/**
-		 * Update viewport size to match the active content node.
-		 * We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform.
-		 * For example, if content animates in from `scale(0.5)` the dimensions would be anything
-		 * from `0.5` to `1` of the intended size.
-		 */
-		observeResizeMany(() => [this.contentNode], this.#measureContent);
-	}
-
-	#measureContent = () => {
-		const node = this.contentNode;
-		if (!node) return;
-
-		this.size = {
-			width: node.offsetWidth,
-			height: node.offsetHeight,
-		};
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'data-state': getDataOpenClosed(this.open),
-				'data-orientation': this.context.opts.orientation.current,
-				style: {
-					// the container is pointer-events-none (see the viewport component); open re-enables
-					pointerEvents: this.open ? 'auto' : 'none',
-					// always mounted: hidden inline, the styled adapter transitions it (see ui.css)
-					...(this.open ? {} : { visibility: 'hidden' }),
-					'--bits-navigation-menu-viewport-width': this.viewportWidth,
-					'--bits-navigation-menu-viewport-height': this.viewportHeight,
-				},
-				[navigationMenuAttrs.viewport]: '',
-				onpointerenter: this.context.onContentEnter,
-				onpointerleave: this.context.onContentLeave,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-//
-
-function removeFromTabOrder(candidates: HTMLElement[]) {
-	candidates.forEach((candidate) => {
-		candidate.dataset.tabindex = candidate.getAttribute('tabindex') || '';
-		candidate.setAttribute('tabindex', '-1');
-	});
-	return () => {
-		candidates.forEach((candidate) => {
-			const prevTabIndex = candidate.dataset.tabindex as string;
-			candidate.setAttribute('tabindex', prevTabIndex);
-		});
-	};
-}
-
-function whenMouse<T extends HTMLElement = HTMLElement>(handler: PointerEventHandler<T>): PointerEventHandler<T> {
-	return (e) => (e.pointerType === 'mouse' ? handler(e) : undefined);
-}
-
-/**
- *
- * We apply the `aria-hidden` attribute to elements that should not be visible to screen readers
- * under specific circumstances, mostly when in a "modal" context or when they are strictly for
- * utility purposes, like the focus guards.
- *
- * When these elements receive focus before we can remove the aria-hidden attribute, we need to
- * handle the focus in a way that does not cause an error to be logged.
- *
- * This function handles the focus of the guard element first by momentary removing the
- * `aria-hidden` attribute, focusing the guard (which will cause something else to focus), and then
- * restoring the attribute.
- */
-function handleProxyFocus(guard: HTMLElement | null, focusOptions?: Parameters<HTMLElement['focus']>[0]) {
-	if (!guard) return;
-	const ariaHidden = guard.getAttribute('aria-hidden');
-	guard.removeAttribute('aria-hidden');
-	guard.focus(focusOptions);
-	setTimeout(() => {
-		if (ariaHidden === null) {
-			guard.setAttribute('aria-hidden', '');
-		} else {
-			guard.setAttribute('aria-hidden', ariaHidden);
-		}
-	});
-}