@vuecs/navigation 3.0.2 → 4.0.0

package/dist/index.mjs

@@ -1,8 +1,87 @@
-import { hasNormalizedSlot, inject, installDefaultsManager, installThemeManager, normalizeSlot, provide, useArrowNavigation, useComponentTheme } from "@vuecs/core";
-import { EventEmitter } from "@posva/event-emitter";
+import { hasNormalizedSlot, inject, installDefaultsManager, installThemeManager, isPromise, normalizeSlot, provide, useArrowNavigation, useComponentTheme } from "@vuecs/core";
+import { computed, defineComponent, getCurrentInstance, h, inject as inject$1, mergeProps, onMounted, onUnmounted, provide as provide$1, ref, resolveComponent, shallowReactive, toRef, watch, watchEffect } from "vue";
 import { VCLink } from "@vuecs/link";
-import { computed, defineComponent, h, inject as inject$1, mergeProps, onMounted, onUnmounted, provide as provide$1, ref, resolveComponent, toRef } from "vue";
-import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, StepperDescription, StepperIndicator, StepperItem, StepperRoot, StepperSeparator, StepperTitle, StepperTrigger } from "reka-ui";
+//#region src/registry/module.ts
+function createEmptyEntry() {
+	return {
+		items: ref([]),
+		active: computed(() => []),
+		activeTrail: computed(() => [])
+	};
+}
+/**
+* Reactive, app-wide navigation registry. `<VCNavItems registry>`
+* publishes its resolved output here under a `registry-id`; other navs
+* read it reactively + empty-safe via the resolver context's
+* `registry(id)`.
+*
+* The backing map is `shallowReactive`, so membership changes
+* (register + the returned unregister closure) are tracked dependencies
+* — a consumer reading `get(id)` inside a `computed` / `watchEffect`
+* re-runs when the id's occupancy flips.
+*/
+var NavigationRegistry = class {
+	map = shallowReactive(/* @__PURE__ */ new Map());
+	/**
+	* Stable empty entries handed out for absent ids, memoized per id so
+	* the SAME reactive handle is returned every call — a consumer
+	* subscribed to an absent id keeps its dependency and lights up the
+	* moment an occupant registers.
+	*/
+	empties = /* @__PURE__ */ new Map();
+	/**
+	* Claim `id`. Last-wins: a newer occupant replaces the current one
+	* (dev warning on collision). Returns a token-guarded unregister
+	* closure: it releases `id` ONLY if this registration is still the
+	* occupant. During a route handoff (Vue mounts the new page before
+	* unmounting the old) the departing nav's closure holds a stale token
+	* and cannot evict the incoming occupant.
+	*/
+	register(id, entry) {
+		if (this.map.has(id)) console.warn(`[vuecs] navigation registry id "${id}" reassigned to a new occupant.`);
+		const token = Symbol("vc-nav-registry-token");
+		this.map.set(id, {
+			token,
+			entry
+		});
+		return () => {
+			const occupant = this.map.get(id);
+			if (occupant && occupant.token === token) this.map.delete(id);
+		};
+	}
+	/** Reactive, empty-safe read. Never returns `undefined`. */
+	get(id) {
+		const occupant = this.map.get(id);
+		if (occupant) return occupant.entry;
+		let empty = this.empties.get(id);
+		if (!empty) {
+			empty = createEmptyEntry();
+			this.empties.set(id, empty);
+		}
+		return empty;
+	}
+	/** True when an occupant currently holds `id`. */
+	has(id) {
+		return this.map.has(id);
+	}
+};
+//#endregion
+//#region src/registry/singleton.ts
+const sym = Symbol.for("VCNavigationRegistry");
+function tryInjectNavigationRegistry(app) {
+	return inject(sym, app);
+}
+function injectNavigationRegistry(app) {
+	const instance = tryInjectNavigationRegistry(app);
+	if (!instance) throw new Error("A navigation registry has not been provided.");
+	return instance;
+}
+function provideNavigationRegistry(registry = new NavigationRegistry(), app) {
+	provide(sym, registry, app);
+	return registry;
+}
+//#endregion
 //#region src/helpers/match.ts
 function calculateItemScoreForPath(item, currentPath) {
 	if (item.url === "/") return 1;
@@ -41,23 +120,22 @@ function findBestItemMatches(items, options = {}) {
 }
 //#endregion
 //#region src/helpers/normalize.ts
-function normalizeItemIF(item, defaults, trace) {
+function normalizeItemIF(item, trace) {
 	const output = {
 		...item,
-		level: defaults.level,
 		children: [],
 		trace: [...trace, item.name],
 		meta: item.meta || {}
 	};
 	if (!item.children) return output;
-	for (let i = 0; i < item.children.length; i++) output.children.push(normalizeItemIF(item.children[i], defaults, output.trace));
+	for (let i = 0; i < item.children.length; i++) output.children.push(normalizeItemIF(item.children[i], output.trace));
 	return output;
 }
-function normalizeItem(item, defaults) {
-	return normalizeItemIF(item, defaults, []);
+function normalizeItem(item) {
+	return normalizeItemIF(item, []);
 }
-function normalizeItems(items, options) {
-	return items.map((item) => normalizeItem(item, options));
+function normalizeItems(items) {
+	return items.map((item) => normalizeItem(item));
 }
 //#endregion
 //#region src/helpers/trace.ts
@@ -77,8 +155,14 @@ function resetItemsByTraceIF(items, trace) {
 		const isEqual = isTraceEqual(item.trace, trace);
 		item.active = isEqual;
 		item.display = true;
-		if (isEqual) item.displayChildren = true;
-		else item.displayChildren = isTracePartOf(item.trace, trace);
+		if (isEqual) {
+			item.activeWithin = false;
+			item.displayChildren = true;
+		} else {
+			const isAncestor = isTracePartOf(item.trace, trace);
+			item.activeWithin = isAncestor;
+			item.displayChildren = isAncestor;
+		}
 		item.children = resetItemsByTraceIF(item.children, trace);
 	}
 	return items;
@@ -87,27 +171,45 @@ function resetItemsByTrace(items, trace) {
 	return resetItemsByTraceIF(items, trace);
 }
 //#endregion
-//#region src/helpers/level.ts
-function findItemsWithLevel(items, tier) {
-	return items.filter((item) => item.level === tier);
-}
-function findItemWithLevel(tier, items) {
-	const data = findItemsWithLevel(items, tier);
-	if (data.length >= 1) return data[0];
-}
-function removeItemsWithLevel(tier, items) {
-	return items.filter((item) => item.level !== tier);
+//#region src/helpers/submenu.ts
+/**
+* Resolve the effective submenu presentation. An explicit `collapse` /
+* `dropdown` wins; `auto` derives from orientation — only an explicit
+* `horizontal` opts into the dropdown (NavigationMenu) path, everything
+* else collapses (Collapsible).
+*/
+function resolveSubmenuMode(submenu, orientation) {
+	if (submenu === "collapse" || submenu === "dropdown") return submenu;
+	return orientation === "horizontal" ? "dropdown" : "collapse";
 }
-function replaceLevelItem(tier, input, next) {
-	const output = removeItemsWithLevel(tier, input);
-	if (next) {
-		next.level = tier;
-		return [...output, next];
+//#endregion
+//#region src/helpers/trail.ts
+/**
+* Walk a normalized tree along `trace` (an ordered list of item names,
+* root → leaf) and collect the item at each depth. Returns the ordered
+* active trail: `[0]` is the top-level section, `.at(-1)` is the leaf.
+*/
+function collectTrail(items, trace) {
+	const output = [];
+	let level = items;
+	for (const name of trace) {
+		const found = level.find((item) => item.name === name);
+		if (!found) break;
+		output.push(found);
+		level = found.children;
 	}
 	return output;
 }
-function replaceLevelItems(tier, src, next) {
-	return [...removeItemsWithLevel(tier, src), ...next];
+/**
+* Depth-first collect of every item in the tree matching `predicate`.
+*/
+function flattenWhere(items, predicate) {
+	const output = [];
+	for (const item of items) {
+		if (predicate(item)) output.push(item);
+		if (item.children.length > 0) output.push(...flattenWhere(item.children, predicate));
+	}
+	return output;
 }
 //#endregion
 //#region src/helpers/url.ts
@@ -115,119 +217,6 @@ function isAbsoluteURL(str) {
 	return str.substring(0, 7) === "http://" || str.substring(0, 8) === "https://";
 }
 //#endregion
-//#region src/manager/module.ts
-var NavigationManager = class extends EventEmitter {
-	itemsActive;
-	items;
-	itemsFn;
-	built;
-	building;
-	constructor(options) {
-		super();
-		let itemsFn;
-		if (typeof options.items === "function") itemsFn = options.items;
-		else itemsFn = async ({ level }) => {
-			if (level > 0) return [];
-			return options.items;
-		};
-		this.itemsFn = itemsFn;
-		this.items = [];
-		this.itemsActive = [];
-		this.built = false;
-		this.building = false;
-	}
-	getItems(tier) {
-		if (typeof tier === "undefined") return this.items;
-		return this.items.filter((item) => item.level === tier);
-	}
-	reset() {
-		this.built = false;
-		this.items = [];
-		this.itemsActive = [];
-	}
-	async build(options) {
-		if (this.built || this.building) return;
-		this.building = true;
-		this.emit("building");
-		let parent;
-		let level = 0;
-		while (true) {
-			const raw = await this.itemsFn({
-				level,
-				parent
-			});
-			if (!raw || raw.length === 0) break;
-			const [match] = findBestItemMatches(normalizeItems(raw, { level }), { path: options.path });
-			if (!match) break;
-			this.itemsActive.push(match);
-			await this.buildLevel(level);
-			parent = match;
-			level++;
-		}
-		this.building = false;
-		this.built = true;
-		this.emit("built");
-		this.emit("updated", this.items);
-	}
-	async select(level, itemNew) {
-		const itemOld = findItemWithLevel(level, this.itemsActive);
-		if (itemOld && isTraceEqual(itemOld.trace, itemNew.trace)) return;
-		this.itemsActive = this.itemsActive.filter((el) => el.level < level);
-		this.itemsActive.push(itemNew);
-		const startLevel = level;
-		while (true) {
-			if (!await this.buildLevel(level, startLevel === level)) break;
-			level++;
-		}
-	}
-	async toggle(level, item) {
-		let isMatch;
-		if (item.displayChildren) isMatch = true;
-		else {
-			const itemOld = findItemWithLevel(level, this.itemsActive);
-			isMatch = !!itemOld && isTraceEqual(item.trace, itemOld.trace);
-		}
-		if (isMatch) this.itemsActive = removeItemsWithLevel(level, this.itemsActive);
-		else this.itemsActive = replaceLevelItem(level, this.itemsActive, item);
-		await this.buildLevel(level, true);
-	}
-	async buildLevel(level, useCache) {
-		let items;
-		if (useCache) items = findItemsWithLevel(this.items, level);
-		else {
-			const parent = findItemWithLevel(level - 1, this.itemsActive);
-			const raw = await this.itemsFn({
-				level,
-				parent
-			});
-			items = raw && raw.length > 0 ? normalizeItems(raw, { level }) : [];
-		}
-		if (!items || items.length === 0) {
-			this.items = this.items.filter((item) => item.level < level);
-			this.emit("levelUpdated", level, []);
-			return false;
-		}
-		let trace = [];
-		const item = findItemWithLevel(level, this.itemsActive);
-		if (item) trace = item.trace;
-		resetItemsByTrace(items, trace);
-		this.items = replaceLevelItems(level, this.items, items);
-		this.emit("levelUpdated", level, items);
-		return true;
-	}
-};
-//#endregion
-//#region src/manager/singleton.ts
-const sym = Symbol.for("VCNavigationManager");
-function injectNavigationManager(app) {
-	const instance = inject(sym, app);
-	if (!instance) throw new Error("A navigation provider has not been provided.");
-	return instance;
-}
-function provideNavigationManager(manager, app) {
-	provide(sym, manager, app);
-}
-//#endregion
 //#region src/components/items/theme.ts
 /**
 * Default classes for the `navigation` theme entry. Shared between
@@ -235,16 +224,55 @@ function provideNavigationManager(manager, app) {
 * component) — both call `useComponentTheme('navigation', …)` with
 * the same slot defaults, so the source of truth lives here.
 */
-const navigationThemeDefaults = { classes: {
-	group: "vc-nav-items",
-	item: "vc-nav-item",
-	itemNested: "vc-nav-item-nested",
-	separator: "vc-nav-separator",
-	link: "vc-nav-link",
-	linkRoot: "vc-nav-link-root",
-	linkIcon: "vc-nav-link-icon",
-	linkText: "vc-nav-link-text"
-} };
+const navigationThemeDefaults = {
+	classes: {
+		group: "vc-nav-items",
+		item: "vc-nav-item",
+		itemNested: "vc-nav-item-nested",
+		separator: "vc-nav-separator",
+		link: "vc-nav-link",
+		linkRoot: "vc-nav-link-root",
+		linkIcon: "vc-nav-link-icon",
+		linkText: "vc-nav-link-text",
+		trigger: "vc-nav-trigger",
+		content: "vc-nav-content",
+		viewport: "vc-nav-viewport"
+	},
+	variants: {
+		variant: {
+			list: {},
+			pills: {
+				group: "vc-nav-items--pills",
+				item: "vc-nav-item--pills",
+				link: "vc-nav-link--pills"
+			}
+		},
+		orientation: {
+			horizontal: {},
+			vertical: { group: "vc-nav-items--vertical" }
+		}
+	},
+	defaultVariants: {
+		variant: "list",
+		orientation: "horizontal"
+	}
+};
+//#endregion
+//#region src/components/select-context.ts
+/**
+* Channels a `<VCNavItem>`'s already-normalized + scored `children` down
+* to the nested `<VCNavItems>` that renders its submenu.
+*
+* The top-level nav scores the WHOLE tree once; nested lists must render
+* those results as-is rather than re-resolving / re-scoring a subtree
+* (which would clobber traces and lose whole-tree active context). The
+* nested `<VCNavItems>` reads this when it has no own `data` prop —
+* presence of the injected nodes is what marks it as a nested renderer
+* rather than a resolving root. Each `<VCNavItem>` re-provides its own
+* children, so the value is correctly scoped per nesting level.
+*/
+const NAVIGATION_NODES_KEY = Symbol("vc-navigation-nodes");
+const NAVIGATION_SELECT_KEY = Symbol("vc-navigation-select");
 const VCNavItem = defineComponent({
 	name: "VCNavItem",
 	props: {
@@ -252,6 +280,42 @@ const VCNavItem = defineComponent({
 			type: Object,
 			required: true
 		},
+		variant: {
+			type: String,
+			default: void 0
+		},
+		orientation: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Resolved submenu presentation handed down by the parent
+		* `<VCNavItems>`. `collapse` renders groups as an inline
+		* Reka `Collapsible`; `dropdown` renders them as Reka
+		* `NavigationMenu` flyouts.
+		*/
+		submenu: {
+			type: String,
+			default: "collapse"
+		},
+		/**
+		* The tag (or component) this item renders as — its own wrapper
+		* (`<li>` by default). Receives `<VCNavItems>`' `itemAs`. Honored in
+		* collapse mode only.
+		*/
+		as: {
+			type: [String, Object],
+			default: "li"
+		},
+		/**
+		* The list-container tag for this item's nested submenu
+		* `<VCNavItems>` (`<ul>` by default). Receives `<VCNavItems>`' `as`.
+		* Honored in collapse mode only.
+		*/
+		itemsAs: {
+			type: [String, Object],
+			default: "ul"
+		},
 		themeClass: {
 			type: Object,
 			default: void 0
@@ -264,120 +328,229 @@ const VCNavItem = defineComponent({
 	slots: Object,
 	setup(props, { slots }) {
 		const itemsNode = resolveComponent("VCNavItems");
-		const theme = useComponentTheme("navigation", props, navigationThemeDefaults);
-		const manager = injectNavigationManager();
+		const theme = useComponentTheme("navigation", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...props.themeVariant ?? {},
+					...props.variant !== void 0 ? { variant: props.variant } : {}
+				};
+			}
+		}, navigationThemeDefaults);
 		const data = toRef(props, "data");
 		const hasChildren = computed(() => data.value.children && data.value.children.length > 0);
-		const select = async (value) => {
-			await manager.select(data.value.level, value);
+		provide$1(NAVIGATION_NODES_KEY, computed(() => data.value.children));
+		const open = ref(!!data.value.displayChildren);
+		watch(() => data.value.displayChildren, (value) => {
+			open.value = !!value;
+		});
+		const selectContext = inject$1(NAVIGATION_SELECT_KEY, null);
+		const select = () => {
+			selectContext?.select(data.value);
+		};
+		const toggle = () => {
+			open.value = !open.value;
 		};
 		const renderIcon = (icon) => {
 			if (icon.includes(":")) return h(resolveComponent("VCIcon"), { name: icon });
 			return h("i", { class: icon });
 		};
-		const toggle = async (value) => {
-			await manager.toggle(data.value.level, value);
+		const renderTitleInner = (resolved) => [...data.value.icon ? [h("div", { class: resolved.linkIcon || void 0 }, [renderIcon(data.value.icon)])] : [], h("div", { class: resolved.linkText || void 0 }, [data.value.name])];
+		const renderLeaf = (resolved) => {
+			if (hasNormalizedSlot("link", slots)) return normalizeSlot("link", {
+				data: data.value,
+				select,
+				isActive: data.value.active
+			}, slots);
+			const linkProps = {
+				active: data.value.active,
+				disabled: false,
+				prefetch: true
+			};
+			if (data.value.url) if (isAbsoluteURL(data.value.url) || data.value.url.startsWith("#")) {
+				linkProps.href = data.value.url;
+				if (data.value.urlTarget) linkProps.target = data.value.urlTarget;
+			} else linkProps.to = data.value.url;
+			return h(VCLink, {
+				class: [resolved.link],
+				"data-vc-collection-item": "",
+				...linkProps,
+				onClicked: select
+			}, { default: () => renderTitleInner(resolved) });
+		};
+		const renderChildren = () => {
+			if (hasNormalizedSlot("sub-items", slots)) return normalizeSlot("sub-items", {
+				data: data.value,
+				select,
+				toggle
+			});
+			return h(itemsNode, {
+				variant: props.variant,
+				orientation: props.orientation,
+				submenu: props.submenu === "dropdown" ? "collapse" : props.submenu,
+				as: props.itemsAs,
+				itemAs: props.as,
+				themeClass: props.themeClass,
+				themeVariant: props.themeVariant
+			});
 		};
 		return () => {
 			const resolved = theme.value;
-			const buildItem = () => {
-				if (data.value.type === "separator") {
-					if (hasNormalizedSlot("separator", slots)) return normalizeSlot("separator", { data: data.value }, slots);
-					return h("div", { class: resolved.separator || void 0 }, data.value.name);
-				}
-				if (!hasChildren.value) {
-					if (hasNormalizedSlot("link", slots)) return normalizeSlot("link", {
-						data: data.value,
-						select,
-						isActive: data.value.active
-					}, slots);
-					const linkProps = {
-						active: data.value.active,
-						disabled: false,
-						prefetch: true
-					};
-					if (data.value.url) if (isAbsoluteURL(data.value.url) || data.value.url.startsWith("#")) {
-						linkProps.href = data.value.url;
-						if (data.value.urlTarget) linkProps.target = data.value.urlTarget;
-					} else linkProps.to = data.value.url;
-					return h(VCLink, {
-						class: [resolved.link],
-						"data-vc-collection-item": "",
-						...linkProps,
-						onClicked() {
-							if (!data.value.url) return select.call(null, data.value);
-						},
-						onClick() {
-							return select.call(null, data.value);
-						}
-					}, { default: () => [...data.value.icon ? [h("div", { class: resolved.linkIcon || void 0 }, [renderIcon(data.value.icon)])] : [], h("div", { class: resolved.linkText || void 0 }, [data.value.name])] });
-				}
-				if (hasNormalizedSlot("sub", slots)) return normalizeSlot("sub", {
+			const isDropdown = props.submenu === "dropdown";
+			const isActive = data.value.active || data.value.activeWithin;
+			if (data.value.type === "separator") {
+				const body = hasNormalizedSlot("separator", slots) ? normalizeSlot("separator", { data: data.value }, slots) : h("div", { class: resolved.separator || void 0 }, data.value.name);
+				if (isDropdown) return h(NavigationMenuItem, { class: [resolved.item] }, { default: () => body });
+				return h(props.as, { class: [resolved.item] }, [body]);
+			}
+			if (!hasChildren.value) {
+				const leaf = renderLeaf(resolved);
+				if (isDropdown) return h(NavigationMenuItem, {
+					class: [resolved.item],
+					"data-active": data.value.active ? "" : void 0
+				}, { default: () => h(NavigationMenuLink, {
+					active: data.value.active,
+					asChild: true
+				}, { default: () => leaf }) });
+				return h(props.as, {
+					class: [resolved.item, { active: data.value.active }],
+					"data-active": data.value.active ? "" : void 0
+				}, [leaf]);
+			}
+			if (hasNormalizedSlot("sub", slots)) {
+				const body = normalizeSlot("sub", {
 					data: data.value,
 					select,
 					toggle
 				}, slots);
-				let title;
-				if (hasNormalizedSlot("sub-title", slots)) title = normalizeSlot("sub-title", {
-					data: data.value,
-					select,
-					toggle
-				});
-				else title = h("div", {
-					class: resolved.link,
-					"data-vc-collection-item": "",
-					"data-state": data.value.displayChildren ? "open" : "closed",
-					"data-active": data.value.active ? "" : void 0,
-					tabindex: 0,
-					role: "button",
-					"aria-expanded": data.value.displayChildren ? "true" : "false",
-					onClick($event) {
-						$event.preventDefault();
-						return toggle(data.value);
-					},
-					onKeydown($event) {
-						if ($event.key === "Enter" || $event.key === " ") {
-							$event.preventDefault();
-							return toggle(data.value);
-						}
-					}
-				}, [...data.value.icon ? [h("div", { class: resolved.linkIcon || void 0 }, [renderIcon(data.value.icon)])] : [], h("div", { class: resolved.linkText || void 0 }, [data.value.name])]);
-				if (!hasChildren.value) return title;
-				let vNodes;
-				if (hasNormalizedSlot("sub-items", slots)) vNodes = normalizeSlot("sub-items", {
-					data: data.value,
-					select,
-					toggle
-				});
-				else vNodes = h(itemsNode, {
-					level: data.value.level,
-					data: data.value.children
-				});
-				return [title, vNodes];
-			};
-			return h("li", {
+				if (isDropdown) return h(NavigationMenuItem, {
+					class: [resolved.item, resolved.itemNested],
+					"data-active": isActive ? "" : void 0
+				}, { default: () => body });
+				return h(props.as, {
+					class: [
+						resolved.item,
+						resolved.itemNested,
+						{ active: isActive }
+					],
+					"data-active": isActive ? "" : void 0
+				}, [body]);
+			}
+			const title = hasNormalizedSlot("sub-title", slots) ? normalizeSlot("sub-title", {
+				data: data.value,
+				select,
+				toggle
+			}) : renderTitleInner(resolved);
+			if (isDropdown) return h(NavigationMenuItem, {
+				class: [resolved.item, resolved.itemNested],
+				"data-active": isActive ? "" : void 0
+			}, { default: () => [h(NavigationMenuTrigger, {
+				class: resolved.trigger || void 0,
+				"data-vc-collection-item": "",
+				"data-active": isActive ? "" : void 0
+			}, { default: () => title }), h(NavigationMenuContent, { class: resolved.content || void 0 }, { default: () => renderChildren() })] });
+			return h(CollapsibleRoot, {
+				as: props.as,
 				class: [
 					resolved.item,
-					...hasChildren.value ? [resolved.itemNested] : [],
-					{ active: data.value.active || data.value.displayChildren }
+					resolved.itemNested,
+					{ active: data.value.active || open.value }
 				],
-				"data-active": data.value.active || data.value.displayChildren ? "" : void 0,
-				...hasChildren.value ? { "data-state": data.value.displayChildren ? "open" : "closed" } : {}
-			}, [buildItem()]);
+				"data-active": isActive ? "" : void 0,
+				open: open.value,
+				"onUpdate:open": (value) => {
+					open.value = value;
+				}
+			}, { default: () => [h(CollapsibleTrigger, {
+				class: resolved.trigger || void 0,
+				"data-vc-collection-item": "",
+				"data-active": isActive ? "" : void 0
+			}, { default: () => title }), h(CollapsibleContent, { class: resolved.content || void 0 }, { default: () => renderChildren() })] });
 		};
 	}
 });
 const VCNavItems = defineComponent({
 	name: "VCNavItems",
 	props: {
-		level: {
-			type: Number,
-			default: 0
-		},
+		/**
+		* The source of this nav's items. Plain array, sync fn, or async fn.
+		* A fn receives a NavigationResolverContext and may read reactive
+		* state freely — the nav re-runs it automatically when that state
+		* changes.
+		*
+		* When omitted, the nav checks whether it is a nested submenu of a
+		* parent `<VCNavItem>` (via the {@link NAVIGATION_NODES_KEY} inject)
+		* and, if so, renders that parent's already-scored children as-is.
+		*/
 		data: {
+			type: [Array, Function],
+			default: void 0
+		},
+		/** Opt in to publishing this nav's resolved output into the registry. */
+		registry: {
+			type: Boolean,
+			default: false
+		},
+		/** The key under which to publish. Required when `registry` is true. */
+		registryId: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Current path for active-state matching. When omitted, the nav softly
+		* reads vue-router's current route (via the `$route` global property)
+		* if a router is installed; router-free apps simply get `undefined`.
+		*/
+		path: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* Extra reactive deps that should retrigger the resolver — for state
+		* read only AFTER the first `await` in an async resolver (auto-track
+		* can't see past an await).
+		*/
+		watch: {
 			type: Array,
 			default: void 0
 		},
+		variant: {
+			type: String,
+			default: void 0
+		},
+		orientation: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* How items with children render their submenu. `auto` derives from
+		* orientation (horizontal → dropdown, otherwise collapse).
+		*/
+		submenu: {
+			type: String,
+			default: "auto"
+		},
+		/**
+		* The tag (or component) for this nav's list container. Defaults to
+		* `'ul'`. Forwarded unchanged to every nesting level so the whole tree
+		* renders the same container tag. Honored in collapse mode only —
+		* dropdown mode keeps Reka's NavigationMenu primitives.
+		*/
+		as: {
+			type: [String, Object],
+			default: "ul"
+		},
+		/**
+		* The tag (or component) for each item wrapper. Defaults to `'li'`.
+		* Forwarded unchanged to every nesting level. Honored in collapse mode
+		* only — dropdown mode keeps Reka's NavigationMenu primitives.
+		*/
+		itemAs: {
+			type: [String, Object],
+			default: "li"
+		},
 		themeClass: {
 			type: Object,
 			default: void 0
@@ -388,8 +561,19 @@ const VCNavItems = defineComponent({
 		}
 	},
 	slots: Object,
-	setup(props, { slots }) {
-		const theme = useComponentTheme("navigation", props, navigationThemeDefaults);
+	setup(props, { slots, expose }) {
+		const theme = useComponentTheme("navigation", {
+			get themeClass() {
+				return props.themeClass;
+			},
+			get themeVariant() {
+				return {
+					...props.themeVariant ?? {},
+					...props.variant !== void 0 ? { variant: props.variant } : {},
+					...props.orientation !== void 0 ? { orientation: props.orientation } : {}
+				};
+			}
+		}, navigationThemeDefaults);
 		const rootRef = ref(null);
 		const onKeyDown = (event) => {
 			useArrowNavigation(event, event.target, rootRef.value, {
@@ -398,44 +582,109 @@ const VCNavItems = defineComponent({
 				loop: true
 			});
 		};
-		const manager = injectNavigationManager();
-		const managerItems = ref([]);
-		if (!props.data) managerItems.value = manager.getItems(props.level);
-		const counter = ref(0);
-		let removeListener;
-		onMounted(() => {
-			removeListener = manager.on("levelUpdated", (level, items) => {
-				if (level !== props.level) return;
-				managerItems.value = items;
-				counter.value++;
-			});
+		const registry = tryInjectNavigationRegistry() ?? new NavigationRegistry();
+		const globals = getCurrentInstance()?.appContext.config.globalProperties;
+		const currentPath = computed(() => {
+			if (typeof props.path !== "undefined") return props.path;
+			return (globals?.$route)?.path;
 		});
-		onUnmounted(() => {
-			if (typeof removeListener === "function") {
-				removeListener();
-				removeListener = void 0;
+		const injectedNodes = inject$1(NAVIGATION_NODES_KEY, null);
+		const isNested = computed(() => typeof props.data === "undefined" && injectedNodes !== null);
+		const selectedTrace = ref(null);
+		if (!isNested.value) {
+			provide$1(NAVIGATION_SELECT_KEY, { select: (item) => {
+				selectedTrace.value = item.trace;
+			} });
+			watch(currentPath, () => {
+				selectedTrace.value = null;
+			});
+		}
+		const raw = ref([]);
+		let runToken = 0;
+		async function run() {
+			const token = ++runToken;
+			const value = typeof props.data === "function" ? props.data({
+				path: currentPath.value,
+				registry: (id) => registry.get(id)
+			}) : props.data ?? [];
+			if (!isPromise(value)) {
+				raw.value = value ?? [];
+				return;
 			}
+			try {
+				const awaited = await value ?? [];
+				if (token === runToken) raw.value = awaited;
+			} catch (error) {
+				if (token === runToken) console.error("[vuecs] <VCNavItems> resolver rejected:", error);
+			}
+		}
+		if (!isNested.value) {
+			watchEffect(run);
+			if (props.watch) watch(props.watch, run);
+		}
+		expose({ refresh: run });
+		const resolved = computed(() => {
+			if (isNested.value && injectedNodes) return {
+				items: injectedNodes.value,
+				trace: []
+			};
+			const normalized = normalizeItems(raw.value);
+			const [match] = findBestItemMatches(normalized, { path: currentPath.value });
+			const trace = selectedTrace.value ?? (match ? match.trace : []);
+			resetItemsByTrace(normalized, trace);
+			return {
+				items: normalized,
+				trace
+			};
 		});
-		const items = computed(() => {
-			if (typeof props.data !== "undefined") return props.data;
-			return managerItems.value;
-		});
+		const tree = computed(() => resolved.value.items);
+		const active = computed(() => flattenWhere(tree.value, (item) => !!item.active));
+		const activeTrail = computed(() => collectTrail(tree.value, resolved.value.trace));
+		if (props.registry) {
+			let unsubscribeFn;
+			const entry = {
+				items: tree,
+				active,
+				activeTrail
+			};
+			onMounted(() => {
+				if (!props.registryId) {
+					console.warn("[vuecs] <VCNavItems registry> requires a `registry-id`.");
+					return;
+				}
+				unsubscribeFn = registry.register(props.registryId, entry);
+			});
+			onUnmounted(() => {
+				if (!props.registryId || !unsubscribeFn) return;
+				unsubscribeFn();
+			});
+		}
+		const submenuMode = computed(() => resolveSubmenuMode(props.submenu, props.orientation));
 		return () => {
-			const resolved = theme.value;
+			const resolvedTheme = theme.value;
 			const vNodes = [];
-			for (let i = 0; i < items.value.length; i++) {
-				if (!items.value[i].display && !items.value[i].displayChildren) continue;
+			for (let i = 0; i < tree.value.length; i++) {
+				const item = tree.value[i];
+				if (!item.display && !item.displayChildren) continue;
 				let vNode;
-				if (hasNormalizedSlot("item", slots)) vNode = normalizeSlot("item", { data: items.value[i] }, slots);
+				if (hasNormalizedSlot("item", slots)) vNode = normalizeSlot("item", { data: item }, slots);
 				else vNode = h(VCNavItem, {
-					key: `${i}:${counter.value}`,
-					data: items.value[i]
+					key: item.trace.join("/") || i,
+					data: item,
+					variant: props.variant,
+					orientation: props.orientation,
+					submenu: submenuMode.value,
+					as: props.itemAs,
+					itemsAs: props.as,
+					themeClass: props.themeClass,
+					themeVariant: props.themeVariant
 				});
 				vNodes.push(vNode);
 			}
-			const isRoot = props.level === 0;
-			return h("ul", {
-				class: resolved.group || void 0,
+			if (submenuMode.value === "dropdown") return h(NavigationMenuRoot, { orientation: "horizontal" }, { default: () => h(NavigationMenuList, { class: resolvedTheme.group || void 0 }, { default: () => vNodes }) });
+			const isRoot = !isNested.value;
+			return h(props.as, {
+				class: resolvedTheme.group || void 0,
 				...isRoot ? {
 					ref: rootRef,
 					onKeydown: onKeyDown
@@ -834,7 +1083,7 @@ var StepperSeparator_default = defineComponent({
 //#endregion
 //#region src/index.ts
 function install(instance, options = {}) {
-	provideNavigationManager(new NavigationManager({ items: options.items ?? [] }), instance);
+	provideNavigationRegistry(new NavigationRegistry(), instance);
 	installThemeManager(instance, options);
 	installDefaultsManager(instance, options);
 	Object.entries({
@@ -853,6 +1102,6 @@ function install(instance, options = {}) {
 }
 var src_default = { install };
 //#endregion
-export { NavigationManager, VCNavItem, VCNavItems, Stepper_default as VCStepper, StepperDescription_default as VCStepperDescription, StepperIndicator_default as VCStepperIndicator, StepperItem_default as VCStepperItem, StepperSeparator_default as VCStepperSeparator, StepperTitle_default as VCStepperTitle, StepperTrigger_default as VCStepperTrigger, src_default as default, injectNavigationManager, install, navigationThemeDefaults, provideNavigationManager, provideStepperContext, stepperThemeDefaults, useStepperContext };
+export { NAVIGATION_NODES_KEY, NAVIGATION_SELECT_KEY, NavigationRegistry, VCNavItem, VCNavItems, Stepper_default as VCStepper, StepperDescription_default as VCStepperDescription, StepperIndicator_default as VCStepperIndicator, StepperItem_default as VCStepperItem, StepperSeparator_default as VCStepperSeparator, StepperTitle_default as VCStepperTitle, StepperTrigger_default as VCStepperTrigger, src_default as default, injectNavigationRegistry, install, navigationThemeDefaults, provideNavigationRegistry, provideStepperContext, stepperThemeDefaults, tryInjectNavigationRegistry, useStepperContext };
 
 //# sourceMappingURL=index.mjs.map