sheer-ui 0.0.0

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

@@ -0,0 +1,394 @@
+import { type ReadableBox, boxWith, 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';
+import { kbd } from '../../internal/kbd.js';
+import type { OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/types.js';
+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 { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
+
+const menubarAttrs = createBitsAttrs({
+	component: 'menubar',
+	parts: ['root', 'trigger', 'content'],
+});
+
+const [getMenubarRoot, setMenubarRoot] = createContext<MenubarRootState>();
+const [getMenubarMenu, setMenubarMenu] = createContext<MenubarMenuState>();
+interface MenubarRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			dir: Direction;
+			loop: boolean;
+		}>,
+		WritableBoxedValues<{
+			value: string;
+		}> {}
+
+export class MenubarRootState {
+	static create(opts: MenubarRootStateOpts) {
+		return setMenubarRoot(new MenubarRootState(opts));
+	}
+	readonly opts: MenubarRootStateOpts;
+	readonly rovingFocusGroup: RovingFocusGroup;
+	readonly attachment: RefAttachment;
+	wasOpenedByKeyboard = $state(false);
+	triggerIds = $state<string[]>([]);
+	/** Outgoing menu id when swapping to another top-level menu... skip exit animation wait only then */
+	skipExitAnimationForMenuValue = $state<string | null>(null);
+	valueToChangeHandler = new Map<string, ReadableBox<OnChangeFn<boolean>>>();
+
+	constructor(opts: MenubarRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+		this.rovingFocusGroup = new RovingFocusGroup({
+			rootNode: this.opts.ref,
+			candidateAttr: menubarAttrs.trigger,
+			loop: this.opts.loop,
+			orientation: boxWith(() => 'horizontal'),
+		});
+	}
+
+	/**
+	 * @param id - the id of the trigger to register
+	 * @returns - a function to de-register the trigger
+	 */
+	registerTrigger = (id: string) => {
+		this.triggerIds.push(id);
+
+		return () => {
+			this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
+		};
+	};
+
+	/**
+	 * @param value - the value of the menu to register
+	 * @param contentId - the content id to associate with the value
+	 * @returns - a function to de-register the menu
+	 */
+	registerMenu = (value: string, onOpenChange: ReadableBox<OnChangeFn<boolean>>) => {
+		this.valueToChangeHandler.set(value, onOpenChange);
+
+		return () => {
+			this.valueToChangeHandler.delete(value);
+		};
+	};
+
+	updateValue = (value: string) => {
+		const currValue = this.opts.value.current;
+		const switchingMenus = Boolean(currValue && value && currValue !== value);
+		if (switchingMenus) {
+			this.skipExitAnimationForMenuValue = currValue;
+		}
+		const currHandler = this.valueToChangeHandler.get(currValue)?.current;
+		const nextHandler = this.valueToChangeHandler.get(value)?.current;
+		this.opts.value.current = value;
+		if (currHandler && currValue !== value) {
+			currHandler(false);
+		}
+		if (nextHandler) {
+			nextHandler(true);
+		}
+		if (switchingMenus) {
+			tick().then(() => {
+				this.skipExitAnimationForMenuValue = null;
+			});
+		}
+	};
+
+	getTriggers = () => {
+		const node = this.opts.ref.current;
+		if (!node) return [];
+		return Array.from(node.querySelectorAll<HTMLButtonElement>(menubarAttrs.selector('trigger')));
+	};
+
+	onMenuOpen = (id: string, triggerId: string) => {
+		this.updateValue(id);
+		this.rovingFocusGroup.setCurrentTabStopId(triggerId);
+	};
+
+	onMenuClose = () => {
+		this.updateValue('');
+	};
+
+	onMenuToggle = (id: string) => {
+		this.updateValue(this.opts.value.current ? '' : id);
+	};
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: 'menubar',
+				[menubarAttrs.root]: '',
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface MenubarMenuStateOpts extends ReadableBoxedValues<{
+	value: string;
+	onOpenChange: OnChangeFn<boolean>;
+}> {}
+
+export class MenubarMenuState {
+	static create(opts: MenubarMenuStateOpts) {
+		return setMenubarMenu(new MenubarMenuState(opts, getMenubarRoot()));
+	}
+
+	readonly opts: MenubarMenuStateOpts;
+	readonly root: MenubarRootState;
+	open = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
+	wasOpenedByKeyboard = false;
+	triggerNode = $state<HTMLElement | null>(null);
+	triggerId = $derived.by(() => this.triggerNode?.id);
+	contentId = $derived.by(() => this.contentNode?.id);
+	contentNode = $state<HTMLElement | null>(null);
+
+	constructor(opts: MenubarMenuStateOpts, root: MenubarRootState) {
+		this.opts = opts;
+		this.root = root;
+
+		$effect(() => {
+			this.open;
+			untrack(() => {
+				if (!this.open) {
+					this.wasOpenedByKeyboard = false;
+				}
+			});
+		});
+
+		onMount(() => {
+			return this.root.registerMenu(this.opts.value.current, opts.onOpenChange);
+		});
+	}
+
+	getTriggerNode() {
+		return this.triggerNode;
+	}
+
+	toggleMenu() {
+		this.root.onMenuToggle(this.opts.value.current);
+	}
+
+	openMenu() {
+		this.root.onMenuOpen(this.opts.value.current, this.triggerNode?.id ?? '');
+	}
+}
+
+interface MenubarTriggerStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+		}> {}
+
+export class MenubarTriggerState {
+	static create(opts: MenubarTriggerStateOpts) {
+		return new MenubarTriggerState(opts, getMenubarMenu());
+	}
+
+	readonly opts: MenubarTriggerStateOpts;
+	readonly menu: MenubarMenuState;
+	readonly root: MenubarRootState;
+	readonly rovingItem: RovingFocusItem;
+	isFocused = $state(false);
+
+	constructor(opts: MenubarTriggerStateOpts, menu: MenubarMenuState) {
+		this.opts = opts;
+		this.menu = menu;
+		this.root = menu.root;
+		this.rovingItem = new RovingFocusItem({
+			group: this.root.rovingFocusGroup,
+			ref: this.opts.ref,
+			onRefChange: (v) => (this.menu.triggerNode = v),
+		});
+
+		onMount(() => {
+			return this.root.registerTrigger(opts.id.current);
+		});
+	}
+
+	onpointerdown: PointerEventHandler<HTMLElement> = (e) => {
+		// only call if the left button but not when the CTRL key is pressed
+		if (!this.opts.disabled.current && e.button === 0 && e.ctrlKey === false) {
+			// prevent trigger from focusing when opening
+			// which allows the content to focus without competition
+			if (!this.menu.open) {
+				e.preventDefault();
+			}
+			this.menu.toggleMenu();
+		}
+	};
+
+	onpointerenter: PointerEventHandler<HTMLElement> = () => {
+		const isMenubarOpen = Boolean(this.root.opts.value.current);
+		if (isMenubarOpen && !this.menu.open) {
+			this.menu.openMenu();
+			this.menu.getTriggerNode()?.focus();
+		}
+	};
+
+	onkeydown: KeyboardEventHandler<HTMLElement> = (e) => {
+		if (this.opts.disabled.current) return;
+		if (e.key === kbd.TAB) return;
+		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
+			this.root.onMenuToggle(this.menu.opts.value.current);
+		}
+		if (e.key === kbd.ARROW_DOWN) {
+			this.menu.openMenu();
+		}
+		// prevent keydown from scrolling window / first focused item
+		// from inadvertently closing the menu
+		if (e.key === kbd.ENTER || e.key === kbd.SPACE || e.key === kbd.ARROW_DOWN) {
+			this.menu.wasOpenedByKeyboard = true;
+			e.preventDefault();
+		}
+
+		this.rovingItem.handleKeydown(e);
+	};
+
+	onfocus: FocusEventHandler<HTMLElement> = () => {
+		this.isFocused = true;
+	};
+
+	onblur: FocusEventHandler<HTMLElement> = () => {
+		this.isFocused = false;
+	};
+
+	readonly props = $derived.by(
+		() =>
+			({
+				type: 'button',
+				role: 'menuitem',
+				id: this.opts.id.current,
+				'aria-haspopup': 'menu',
+				'aria-expanded': boolToStr(this.menu.open),
+				'aria-controls': this.menu.open ? this.menu.contentId : undefined,
+				'data-highlighted': this.isFocused ? '' : undefined,
+				'data-state': getDataOpenClosed(this.menu.open),
+				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+				'data-menu-value': this.menu.opts.value.current,
+				disabled: this.opts.disabled.current ? true : undefined,
+				[menubarAttrs.trigger]: '',
+				onpointerdown: this.onpointerdown,
+				onpointerenter: this.onpointerenter,
+				onkeydown: this.onkeydown,
+				onfocus: this.onfocus,
+				onblur: this.onblur,
+				...this.rovingItem.props,
+			}) as const,
+	);
+}
+
+interface MenubarContentStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			interactOutsideBehavior: InteractOutsideBehaviorType;
+			onOpenAutoFocus: (e: Event) => void;
+			onCloseAutoFocus: (e: Event) => void;
+			onFocusOutside: (e: FocusEvent) => void;
+			onInteractOutside: (e: PointerEvent) => void;
+		}> {}
+
+export class MenubarContentState {
+	static create(opts: MenubarContentStateOpts) {
+		return new MenubarContentState(opts, getMenubarMenu());
+	}
+
+	readonly opts: MenubarContentStateOpts;
+	readonly menu: MenubarMenuState;
+	readonly root: MenubarRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: MenubarContentStateOpts, menu: MenubarMenuState) {
+		this.opts = opts;
+		this.menu = menu;
+		this.root = menu.root;
+		this.attachment = attachRef(this.opts.ref, (v) => (this.menu.contentNode = v));
+	}
+
+	onCloseAutoFocus = (e: Event) => {
+		this.opts.onCloseAutoFocus.current?.(e);
+		if (e.defaultPrevented) return;
+	};
+
+	onFocusOutside = (e: FocusEvent) => {
+		const target = e.target as HTMLElement;
+		const isMenubarTrigger = this.root.getTriggers().some((trigger) => trigger.contains(target));
+		if (isMenubarTrigger) e.preventDefault();
+		this.opts.onFocusOutside.current(e);
+	};
+
+	onInteractOutside = (e: PointerEvent) => {
+		this.opts.onInteractOutside.current(e);
+	};
+
+	onOpenAutoFocus = (e: Event) => {
+		this.opts.onOpenAutoFocus.current(e);
+		if (e.defaultPrevented) return;
+		tick().then(() => this.opts.ref.current?.focus());
+	};
+
+	onkeydown: KeyboardEventHandler<HTMLElement> = (e) => {
+		if (e.key !== kbd.ARROW_LEFT && e.key !== kbd.ARROW_RIGHT) return;
+
+		const target = e.target as HTMLElement;
+		const targetIsSubTrigger = target.hasAttribute('data-menu-sub-trigger');
+		const isKeydownInsideSubMenu = target.closest('[data-menu-content]') !== e.currentTarget;
+
+		const prevMenuKey = this.root.opts.dir.current === 'rtl' ? kbd.ARROW_RIGHT : kbd.ARROW_LEFT;
+		const isPrevKey = prevMenuKey === e.key;
+		const isNextKey = !isPrevKey;
+
+		// prevent navigation when opening a submenu
+		if (isNextKey && targetIsSubTrigger) return;
+		// or if we're inside a submenu and moving back to close it
+		if (isKeydownInsideSubMenu && isPrevKey) return;
+
+		const items = this.root.getTriggers().filter((trigger) => !trigger.disabled);
+		const candidates = items.map((item) => ({
+			value: item.getAttribute('data-menu-value')!,
+			triggerId: item.id ?? '',
+		}));
+		if (isPrevKey) candidates.reverse();
+		const candidateValues = candidates.map(({ value }) => value);
+
+		// use the root's open menu id — during rapid switching, stale content can still be
+		// focused while another menu is already open; per-menu value would navigate from the wrong index
+		const openMenuValue = this.root.opts.value.current;
+		if (!openMenuValue) return;
+		const currentIndex = candidateValues.indexOf(openMenuValue);
+		if (currentIndex === -1) return;
+
+		const nextValue = this.root.opts.loop.current ? candidates[(currentIndex + 1) % candidates.length] : candidates[currentIndex + 1];
+		if (nextValue) {
+			this.menu.root.onMenuOpen(nextValue.value, nextValue.triggerId);
+			e.preventDefault();
+		}
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'aria-labelledby': this.menu.triggerId,
+				style: getFloatingContentCSSVars('menubar'),
+				onkeydown: this.onkeydown,
+				'data-menu-content': '',
+				[menubarAttrs.content]: '',
+				...this.attachment,
+			}) as const,
+	);
+
+	popperProps = {
+		onCloseAutoFocus: this.onCloseAutoFocus,
+		onFocusOutside: this.onFocusOutside,
+		onInteractOutside: this.onInteractOutside,
+		onOpenAutoFocus: this.onOpenAutoFocus,
+	};
+}

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

@@ -0,0 +1,97 @@
+import type { FloatingLayerArrowPropsWithoutHTML } from "../../internal/floating-layer/types.js";
+import type { MenuArrowProps } from "../menu/types.js";
+import type { OnChangeFn, WithChild, WithChildren, Without } from "../../internal/types.js";
+import type {
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+} from "../../internal/attribute-types.js";
+import type { Direction } from "../../internal/index.js";
+
+export type MenubarRootPropsWithoutHTML = WithChild<{
+	/**
+	 * The reading direction of the menubar.
+	 */
+	dir?: Direction;
+
+	/**
+	 * When `true`, the roving focus will loop back to the first menu item when the last
+	 * menu item is reached and vice verse.
+	 */
+	loop?: boolean;
+
+	/**
+	 * The 'value' assigned to the currently active menu in the menubar.
+	 */
+	value?: string;
+
+	/**
+	 * A callback that is called when the active menu changes.
+	 */
+	onValueChange?: OnChangeFn<string>;
+}>;
+
+export type MenubarRootProps = MenubarRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, MenubarRootPropsWithoutHTML>;
+
+export type MenubarMenuPropsWithoutHTML = WithChildren<{
+	/**
+	 * The `value` assigned to the menu. Used to programmatically control the menu's open state
+	 * within the menubar.
+	 */
+	value?: string;
+
+	/**
+	 * A callback that is called when the menu is opened or closed.
+	 */
+	onOpenChange?: OnChangeFn<boolean>;
+}>;
+
+export type MenubarMenuProps = MenubarMenuPropsWithoutHTML;
+
+export type MenubarTriggerPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether the trigger for the menubar item is disabled.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean | null | undefined;
+}>;
+
+export type MenubarTriggerProps = MenubarTriggerPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, MenubarTriggerPropsWithoutHTML>;
+
+export type {
+	MenuContentPropsWithoutHTML as MenubarContentPropsWithoutHTML,
+	MenuContentProps as MenubarContentProps,
+	MenuContentStaticPropsWithoutHTML as MenubarContentStaticPropsWithoutHTML,
+	MenuContentStaticProps as MenubarContentStaticProps,
+	MenuItemPropsWithoutHTML as MenubarItemPropsWithoutHTML,
+	MenuItemProps as MenubarItemProps,
+	MenuGroupPropsWithoutHTML as MenubarGroupPropsWithoutHTML,
+	MenuGroupProps as MenubarGroupProps,
+	MenuGroupHeadingPropsWithoutHTML as MenubarGroupHeadingPropsWithoutHTML,
+	MenuGroupHeadingProps as MenubarGroupHeadingProps,
+	MenuCheckboxItemPropsWithoutHTML as MenubarCheckboxItemPropsWithoutHTML,
+	MenuCheckboxItemProps as MenubarCheckboxItemProps,
+	MenuRadioGroupPropsWithoutHTML as MenubarRadioGroupPropsWithoutHTML,
+	MenuRadioGroupProps as MenubarRadioGroupProps,
+	MenuRadioItemPropsWithoutHTML as MenubarRadioItemPropsWithoutHTML,
+	MenuRadioItemProps as MenubarRadioItemProps,
+	MenuSeparatorPropsWithoutHTML as MenubarSeparatorPropsWithoutHTML,
+	MenuSeparatorProps as MenubarSeparatorProps,
+	MenuSubContentPropsWithoutHTML as MenubarSubContentPropsWithoutHTML,
+	MenuSubContentProps as MenubarSubContentProps,
+	MenuSubContentStaticPropsWithoutHTML as MenubarSubContentStaticPropsWithoutHTML,
+	MenuSubContentStaticProps as MenubarSubContentStaticProps,
+	MenuSubTriggerPropsWithoutHTML as MenubarSubTriggerPropsWithoutHTML,
+	MenuSubTriggerProps as MenubarSubTriggerProps,
+	MenuSubPropsWithoutHTML as MenubarSubPropsWithoutHTML,
+	MenuPortalPropsWithoutHTML as MenubarPortalPropsWithoutHTML,
+	MenuPortalProps as MenubarPortalProps,
+	MenuCheckboxGroupPropsWithoutHTML as MenubarCheckboxGroupPropsWithoutHTML,
+	MenuCheckboxGroupProps as MenubarCheckboxGroupProps,
+} from "../menu/types.js";
+
+export type MenubarArrowPropsWithoutHTML = FloatingLayerArrowPropsWithoutHTML;
+
+export type MenubarArrowProps = MenuArrowProps;

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

@@ -0,0 +1,41 @@
+<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';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		value = 0,
+		max = 100,
+		min = 0,
+		id = createId(uid),
+		ref = $bindable(null),
+		...restProps
+	}: MeterRootProps = $props();
+
+	const rootState = MeterRootState.create({
+		value: boxWith(() => value),
+		max: boxWith(() => max),
+		min: boxWith(() => min),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/meter.svelte";
+export type { MeterRootProps as RootProps } from "./types.js";

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

@@ -0,0 +1,2 @@
+export * as Meter from "./exports.js";
+export * from "./exports.js";

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

@@ -0,0 +1,47 @@
+import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { createBitsAttrs } from '../../internal/attrs.js';
+
+const meterAttrs = createBitsAttrs({
+	component: 'meter',
+	parts: ['root'],
+});
+
+interface MeterRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			value: number;
+			max: number;
+			min: number;
+		}> {}
+
+export class MeterRootState {
+	static create(opts: MeterRootStateOpts) {
+		return new MeterRootState(opts);
+	}
+
+	readonly opts: MeterRootStateOpts;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: MeterRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+	}
+
+	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,
+				[meterAttrs.root]: '',
+				...this.attachment,
+			}) as const,
+	);
+}

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

@@ -0,0 +1,28 @@
+import type { WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+
+export type MeterRootPropsWithoutHTML = WithChild<{
+	/**
+	 * The current value of the meter.
+	 *
+	 * @default 0
+	 */
+	value?: number;
+
+	/**
+	 * The maximum value of the meter.
+	 *
+	 * @default 100
+	 */
+	max?: number;
+
+	/**
+	 * The minimum value of the meter.
+	 *
+	 * @default 0
+	 */
+	min?: number;
+}>;
+
+export type MeterRootProps = MeterRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, MeterRootPropsWithoutHTML>;

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { untrack, type Snippet } from 'svelte';
+	import type { NavigationMenuContentProps } from '../types.js';
+	import { setNavigationMenuItem, NavigationMenuItemState, NavigationMenuContentImplState } from '../navigation-menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { interactOutsideAttachment } from '../../../internal/dismissible-layer/use-dismissable-layer.svelte.js';
+	import { escapeKeydownAttachment } from '../../../internal/escape-layer/use-escape-layer.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		child: childProp,
+		children: childrenProp,
+		onInteractOutside = () => {},
+		onFocusOutside = () => {},
+		onEscapeKeydown = () => {},
+		escapeKeydownBehavior = 'close',
+		interactOutsideBehavior = 'close',
+		itemState,
+		onRefChange,
+		...restProps
+	}: Omit<NavigationMenuContentProps, 'child'> & {
+		itemState?: NavigationMenuItemState;
+		onRefChange?: (ref: HTMLElement | null) => void;
+		child?: Snippet<[{ props: Record<string, unknown>; open: boolean }]>;
+	} = $props();
+
+	const contentImplState = NavigationMenuContentImplState.create(
+		{
+			id: boxWith(() => id),
+			ref: boxWith(
+				() => ref,
+				(v) => {
+					ref = v;
+					untrack(() => onRefChange?.(v));
+				},
+			),
+		},
+		itemState,
+	);
+
+	if (itemState) {
+		setNavigationMenuItem(itemState);
+	}
+
+	const mergedProps = $derived(mergeProps(restProps, contentImplState.props));
+
+	const escapeAttachment = escapeKeydownAttachment({
+		escapeKeydownBehavior: () => escapeKeydownBehavior,
+		onEscapeKeydown: () => (e) => {
+			onEscapeKeydown(e);
+			if (e.defaultPrevented) return;
+			contentImplState.onEscapeKeydown(e);
+		},
+		enabled: () => contentImplState.open,
+	});
+
+	const dismissible = interactOutsideAttachment({
+		id: () => id,
+		interactOutsideBehavior: () => interactOutsideBehavior,
+		onInteractOutside: () => (e) => {
+			onInteractOutside(e);
+			if (e.defaultPrevented) return;
+			contentImplState.onInteractOutside(e);
+		},
+		onFocusOutside: () => (e) => {
+			onFocusOutside(e);
+			if (e.defaultPrevented) return;
+			contentImplState.onFocusOutside(e);
+		},
+		enabled: () => contentImplState.open,
+	});
+</script>
+
+{#if childProp}
+	{@render childProp({ props: mergeProps(mergedProps, dismissible.props, dismissible.attachment, escapeAttachment), open: contentImplState.open })}
+{:else}
+	<div {...mergeProps(mergedProps, dismissible.props, dismissible.attachment, escapeAttachment)}>
+		{@render childrenProp?.()}
+	</div>
+{/if}