@vuecs/navigation 2.4.1 → 3.0.1

package/dist/index.mjs

@@ -1,606 +1,858 @@
-import { createComponentOptionsManager, mergeOption, inject, provide, hasNormalizedSlot, normalizeSlot, installStoreManager, applyStoreManagerOptions } from '@vuecs/core';
-import { EventEmitter } from '@posva/event-emitter';
-import { VCLink } from '@vuecs/link';
-import { defineComponent, resolveComponent, toRef, computed, h, ref, onMounted, onUnmounted } from 'vue';
-
-function buildComponentOptions() {
-    const manager = createComponentOptionsManager({
-        name: 'navigation'
-    });
-    return {
-        groupClass: mergeOption('class', manager.get('groupClass'), 'vc-nav-items'),
-        groupTag: manager.get('groupTag') || 'ul',
-        itemClass: mergeOption('class', manager.get('itemClass'), 'vc-nav-item'),
-        itemNestedClass: mergeOption('class', manager.get('itemNestedClass'), 'vc-nav-item-nested'),
-        itemTag: manager.get('itemTag') || 'li',
-        separatorTag: manager.get('separatorTag') || 'div',
-        separatorClass: mergeOption('class', manager.get('linkIconClass'), 'vc-nav-separator'),
-        linkIconTag: manager.get('linkIconTag') || 'div',
-        linkIconClass: mergeOption('class', manager.get('linkIconClass'), 'vc-nav-link-icon'),
-        linkClass: mergeOption('class', manager.get('linkClass'), 'vc-nav-link'),
-        linkRootClass: mergeOption('class', manager.get('linkRootClass'), 'vc-nav-link-root'),
-        linkTextTag: manager.get('linkTextTag') || 'div',
-        linkTextClass: mergeOption('class', manager.get('linkTextClass'), 'vc-nav-link-text')
-    };
-}
-
+import { hasNormalizedSlot, inject, installDefaultsManager, installThemeManager, normalizeSlot, provide, useArrowNavigation, useComponentTheme } from "@vuecs/core";
+import { EventEmitter } from "@posva/event-emitter";
+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";
+//#region src/helpers/match.ts
 function calculateItemScoreForPath(item, currentPath) {
-    if (item.url === '/') {
-        return 1;
-    }
-    if (item.activeMatch) {
-        if (item.activeMatch === currentPath) {
-            return 6;
-        }
-        if (currentPath.startsWith(item.activeMatch)) {
-            return 4;
-        }
-    }
-    if (item.url) {
-        if (item.url === currentPath) {
-            return 3;
-        }
-        if (currentPath.startsWith(item.url)) {
-            return 2;
-        }
-    }
-    return 0;
+	if (item.url === "/") return 1;
+	if (item.activeMatch) {
+		if (item.activeMatch === currentPath) return 6;
+		if (currentPath.startsWith(item.activeMatch)) return 4;
+	}
+	if (item.url) {
+		if (item.url === currentPath) return 3;
+		if (currentPath.startsWith(item.url)) return 2;
+	}
+	return 0;
 }
 function findItemMatchesIF(items, options, parent) {
-    const output = [];
-    for(let i = 0; i < items.length; i++){
-        const item = items[i];
-        let { score } = parent;
-        if (options.path) {
-            score += calculateItemScoreForPath(item, options.path);
-        }
-        if (item.default) {
-            score += 1;
-        }
-        if (item.children) {
-            const childMatches = findItemMatchesIF(item.children, options, {
-                score
-            });
-            output.push(...childMatches);
-        }
-        output.push({
-            data: item,
-            score
-        });
-    }
-    return output.sort((a, b)=>b.score - a.score);
+	const output = [];
+	for (const item of items) {
+		let { score } = parent;
+		if (options.path) score += calculateItemScoreForPath(item, options.path);
+		if (item.default) score += 1;
+		if (item.children) {
+			const childMatches = findItemMatchesIF(item.children, options, { score });
+			output.push(...childMatches);
+		}
+		output.push({
+			data: item,
+			score
+		});
+	}
+	return output.sort((a, b) => b.score - a.score);
 }
 function findBestItemMatches(items, options = {}) {
-    const result = findItemMatchesIF(items, options, {
-        score: 0
-    });
-    const [first] = result;
-    if (!first) {
-        return [];
-    }
-    return result.filter((match)=>match.score === first.score).map((match)=>match.data);
+	const result = findItemMatchesIF(items, options, { score: 0 });
+	const [first] = result;
+	if (!first) return [];
+	return result.filter((match) => match.score === first.score).map((match) => match.data);
 }
-
-/*
- * Copyright (c) 2024.
- * Author Peter Placzek (tada5hi)
- * For the full copyright and license information,
- * view the LICENSE file that was distributed with this source code.
- */ function normalizeItemIF(item, defaults, 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));
-    }
-    return output;
+//#endregion
+//#region src/helpers/normalize.ts
+function normalizeItemIF(item, defaults, 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));
+	return output;
 }
 function normalizeItem(item, defaults) {
-    return normalizeItemIF(item, defaults, []);
+	return normalizeItemIF(item, defaults, []);
 }
 function normalizeItems(items, options) {
-    return items.map((item)=>normalizeItem(item, options));
+	return items.map((item) => normalizeItem(item, options));
 }
-
-/*
- * Copyright (c) 2024.
- * Author Peter Placzek (tada5hi)
- * For the full copyright and license information,
- * view the LICENSE file that was distributed with this source code.
- */ function isTraceEqual(a, b) {
-    if (a.length !== b.length) {
-        return false;
-    }
-    for(let i = 0; i < a.length; i++){
-        if (a[i] !== b[i]) {
-            return false;
-        }
-    }
-    return true;
+//#endregion
+//#region src/helpers/trace.ts
+function isTraceEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (const [i, element] of a.entries()) if (element !== b[i]) return false;
+	return true;
 }
 function isTracePartOf(item, parent) {
-    for(let i = 0; i < item.length; i++){
-        if (parent[i] !== item[i]) {
-            return false;
-        }
-    }
-    return true;
+	for (const [i, element] of item.entries()) if (parent[i] !== element) return false;
+	return true;
 }
-
+//#endregion
+//#region src/helpers/reset.ts
 function resetItemsByTraceIF(items, trace) {
-    for(let i = 0; i < items.length; i++){
-        const item = items[i];
-        const isEqual = isTraceEqual(items[i].trace, trace);
-        item.active = isEqual;
-        item.display = true;
-        if (isEqual) {
-            item.displayChildren = true;
-        } else {
-            item.displayChildren = isTracePartOf(item.trace, trace);
-        }
-        item.children = resetItemsByTraceIF(item.children, trace);
-    }
-    return items;
+	for (const item of items) {
+		const isEqual = isTraceEqual(item.trace, trace);
+		item.active = isEqual;
+		item.display = true;
+		if (isEqual) item.displayChildren = true;
+		else item.displayChildren = isTracePartOf(item.trace, trace);
+		item.children = resetItemsByTraceIF(item.children, trace);
+	}
+	return items;
 }
 function resetItemsByTrace(items, trace) {
-    return resetItemsByTraceIF(items, trace);
+	return resetItemsByTraceIF(items, trace);
 }
-
+//#endregion
+//#region src/helpers/level.ts
 function findItemsWithLevel(items, tier) {
-    return items.filter((item)=>item.level === tier);
+	return items.filter((item) => item.level === tier);
 }
 function findItemWithLevel(tier, items) {
-    const data = findItemsWithLevel(items, tier);
-    if (data.length >= 1) {
-        return data[0];
-    }
-    return undefined;
+	const data = findItemsWithLevel(items, tier);
+	if (data.length >= 1) return data[0];
 }
 function removeItemsWithLevel(tier, items) {
-    return items.filter((item)=>item.level !== tier);
+	return items.filter((item) => item.level !== tier);
 }
 function replaceLevelItem(tier, input, next) {
-    const output = removeItemsWithLevel(tier, input);
-    if (next) {
-        next.level = tier;
-        return [
-            ...output,
-            next
-        ];
-    }
-    return output;
+	const output = removeItemsWithLevel(tier, input);
+	if (next) {
+		next.level = tier;
+		return [...output, next];
+	}
+	return output;
 }
 function replaceLevelItems(tier, src, next) {
-    const componentsExisting = removeItemsWithLevel(tier, src);
-    return [
-        ...componentsExisting,
-        ...next
-    ];
+	return [...removeItemsWithLevel(tier, src), ...next];
 }
-
+//#endregion
+//#region src/helpers/url.ts
 function isAbsoluteURL(str) {
-    return str.substring(0, 7) === 'http://' || str.substring(0, 8) === 'https://';
-}
-
-class NavigationManager extends EventEmitter {
-    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 items = normalizeItems(raw, {
-                level
-            });
-            const matches = findBestItemMatches(items, {
-                path: options.path
-            });
-            const [match] = matches;
-            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){
-            const built = await this.buildLevel(level, startLevel === level);
-            if (!built) {
-                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;
-    }
-    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;
-    }
+	return str.substring(0, 7) === "http://" || str.substring(0, 8) === "https://";
 }
-
-const sym = Symbol.for('VCNavigationManager');
+//#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;
+	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);
+	provide(sym, manager, app);
 }
-
-var SlotName = /*#__PURE__*/ function(SlotName) {
-    SlotName["ITEM"] = "item";
-    SlotName["SEPARATOR"] = "separator";
-    SlotName["LINK"] = "link";
-    SlotName["SUB"] = "sub";
-    SlotName["SUB_TITLE"] = "sub-title";
-    SlotName["SUB_ITEMS"] = "sub-items";
-    return SlotName;
-}({});
-var ElementType = /*#__PURE__*/ function(ElementType) {
-    ElementType["LINK"] = "link";
-    ElementType["SEPARATOR"] = "separator";
-    return ElementType;
-}({});
-
+//#endregion
+//#region src/components/items/theme.ts
+/**
+* Default classes for the `navigation` theme entry. Shared between
+* `<VCNavItems>` (the container) and `<VCNavItem>` (the per-row
+* 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 VCNavItem = defineComponent({
-    props: {
-        data: {
-            type: Object,
-            required: true
-        }
-    },
-    setup (props, { slots }) {
-        const itemsNode = resolveComponent('VCNavItems');
-        const options = buildComponentOptions();
-        const manager = injectNavigationManager();
-        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);
-        };
-        const toggle = async (value)=>{
-            await manager.toggle(data.value.level, value);
-        };
-        return ()=>{
-            const buildItem = ()=>{
-                // type: separator
-                if (data.value.type === ElementType.SEPARATOR) {
-                    const hasSlot = hasNormalizedSlot(SlotName.SEPARATOR, slots);
-                    if (hasSlot) {
-                        return normalizeSlot(SlotName.SEPARATOR, {
-                            data: data.value
-                        }, slots);
-                    }
-                    return h(options.separatorTag, {
-                        class: options.separatorClass
-                    }, data.value.name);
-                }
-                // type: group
-                if (!hasChildren.value) {
-                    const hasSlot = hasNormalizedSlot(SlotName.LINK, slots);
-                    if (hasSlot) {
-                        return normalizeSlot(SlotName.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: [
-                            options.linkClass
-                        ],
-                        ...linkProps,
-                        onClicked () {
-                            if (!data.value.url) {
-                                return select.call(null, data.value);
-                            }
-                            return undefined;
-                        },
-                        onClick () {
-                            return select.call(null, data.value);
-                        }
-                    }, {
-                        default: ()=>[
-                                ...data.value.icon ? [
-                                    h(options.linkIconTag, {
-                                        class: options.linkIconClass
-                                    }, [
-                                        h('i', {
-                                            class: data.value.icon
-                                        })
-                                    ])
-                                ] : [],
-                                h(options.linkTextTag, {
-                                    class: options.linkTextClass
-                                }, [
-                                    data.value.name
-                                ])
-                            ]
-                    });
-                }
-                if (hasNormalizedSlot(SlotName.SUB, slots)) {
-                    return normalizeSlot(SlotName.SUB, {
-                        data: data.value,
-                        select,
-                        toggle
-                    }, slots);
-                }
-                let title;
-                if (hasNormalizedSlot(SlotName.SUB_TITLE, slots)) {
-                    title = normalizeSlot(SlotName.SUB_TITLE, {
-                        data: data.value,
-                        select,
-                        toggle
-                    });
-                } else {
-                    title = h('div', {
-                        class: options.linkClass,
-                        onClick ($event) {
-                            $event.preventDefault();
-                            return toggle(data.value);
-                        }
-                    }, [
-                        ...data.value.icon ? [
-                            h(options.linkIconTag, {
-                                class: options.linkIconClass
-                            }, [
-                                h('i', {
-                                    class: data.value.icon
-                                })
-                            ])
-                        ] : [],
-                        h(options.linkTextTag, {
-                            class: options.linkTextClass
-                        }, [
-                            data.value.name
-                        ])
-                    ]);
-                }
-                if (!hasChildren.value) {
-                    return title;
-                }
-                let vNodes;
-                if (hasNormalizedSlot(SlotName.SUB_ITEMS, slots)) {
-                    vNodes = normalizeSlot(SlotName.SUB_ITEMS, {
-                        data: data.value,
-                        select,
-                        toggle
-                    });
-                } else {
-                    vNodes = h(itemsNode, {
-                        level: data.value.level,
-                        data: data.value.children
-                    });
-                }
-                return [
-                    title,
-                    vNodes
-                ];
-            };
-            return h(options.itemTag, {
-                class: [
-                    options.itemClass,
-                    ...hasChildren.value ? [
-                        options.itemNestedClass
-                    ] : [],
-                    {
-                        active: data.value.active || data.value.displayChildren
-                    }
-                ]
-            }, [
-                buildItem()
-            ]);
-        };
-    }
+	name: "VCNavItem",
+	props: {
+		data: {
+			type: Object,
+			required: true
+		},
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const itemsNode = resolveComponent("VCNavItems");
+		const theme = useComponentTheme("navigation", props, navigationThemeDefaults);
+		const manager = injectNavigationManager();
+		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);
+		};
+		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);
+		};
+		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", {
+					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", {
+				class: [
+					resolved.item,
+					...hasChildren.value ? [resolved.itemNested] : [],
+					{ active: data.value.active || data.value.displayChildren }
+				],
+				"data-active": data.value.active || data.value.displayChildren ? "" : void 0,
+				...hasChildren.value ? { "data-state": data.value.displayChildren ? "open" : "closed" } : {}
+			}, [buildItem()]);
+		};
+	}
 });
-
 const VCNavItems = defineComponent({
-    props: {
-        level: {
-            type: Number,
-            default: 0
-        },
-        data: {
-            type: Array,
-            default: undefined
-        }
-    },
-    setup (props, { slots }) {
-        const options = buildComponentOptions();
-        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++;
-            });
-        });
-        onUnmounted(()=>{
-            if (typeof removeListener === 'function') {
-                removeListener();
-                removeListener = undefined;
-            }
-        });
-        const items = computed(()=>{
-            if (typeof props.data !== 'undefined') {
-                return props.data;
-            }
-            return managerItems.value;
-        });
-        return ()=>{
-            const vNodes = [];
-            for(let i = 0; i < items.value.length; i++){
-                if (!items.value[i].display && !items.value[i].displayChildren) {
-                    continue;
-                }
-                let vNode;
-                if (hasNormalizedSlot(SlotName.ITEM, slots)) {
-                    vNode = normalizeSlot(SlotName.ITEM, {
-                        data: items.value[i]
-                    }, slots);
-                } else {
-                    vNode = h(VCNavItem, {
-                        key: `${i}:${counter.value}`,
-                        data: items.value[i]
-                    });
-                }
-                vNodes.push(vNode);
-            }
-            return h(options.groupTag, {
-                class: options.groupClass
-            }, vNodes);
-        };
-    }
+	name: "VCNavItems",
+	props: {
+		level: {
+			type: Number,
+			default: 0
+		},
+		data: {
+			type: Array,
+			default: void 0
+		},
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const theme = useComponentTheme("navigation", props, navigationThemeDefaults);
+		const rootRef = ref(null);
+		const onKeyDown = (event) => {
+			useArrowNavigation(event, event.target, rootRef.value, {
+				arrowKeyOptions: "vertical",
+				focus: true,
+				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++;
+			});
+		});
+		onUnmounted(() => {
+			if (typeof removeListener === "function") {
+				removeListener();
+				removeListener = void 0;
+			}
+		});
+		const items = computed(() => {
+			if (typeof props.data !== "undefined") return props.data;
+			return managerItems.value;
+		});
+		return () => {
+			const resolved = theme.value;
+			const vNodes = [];
+			for (let i = 0; i < items.value.length; i++) {
+				if (!items.value[i].display && !items.value[i].displayChildren) continue;
+				let vNode;
+				if (hasNormalizedSlot("item", slots)) vNode = normalizeSlot("item", { data: items.value[i] }, slots);
+				else vNode = h(VCNavItem, {
+					key: `${i}:${counter.value}`,
+					data: items.value[i]
+				});
+				vNodes.push(vNode);
+			}
+			const isRoot = props.level === 0;
+			return h("ul", {
+				class: resolved.group || void 0,
+				...isRoot ? {
+					ref: rootRef,
+					onKeydown: onKeyDown
+				} : {}
+			}, vNodes);
+		};
+	}
 });
-
-function install(instance, options) {
-    const manager = new NavigationManager({
-        items: options.items
-    });
-    provideNavigationManager(manager, instance);
-    const storeManager = installStoreManager(instance);
-    if (options.storeManager) {
-        applyStoreManagerOptions(storeManager, options.storeManager);
-    }
-    Object.entries({
-        VCNavItem,
-        VCNavItems
-    }).forEach(([componentName, component])=>{
-        instance.component(componentName, component);
-    });
+//#endregion
+//#region src/components/stepper/context.ts
+const STEPPER_CONTEXT_KEY = Symbol("vcStepperContext");
+function provideStepperContext(ctx) {
+	provide$1(STEPPER_CONTEXT_KEY, ctx);
 }
-var index = {
-    install
-};
+function useStepperContext() {
+	return inject$1(STEPPER_CONTEXT_KEY, null);
+}
+//#endregion
+//#region src/components/stepper/theme.ts
+const stepperThemeDefaults = { classes: {
+	root: "vc-stepper",
+	item: "vc-stepper-item",
+	trigger: "vc-stepper-trigger",
+	indicator: "vc-stepper-indicator",
+	title: "vc-stepper-title",
+	description: "vc-stepper-description",
+	separator: "vc-stepper-separator"
+} };
+//#endregion
+//#region src/components/stepper/Stepper.vue
+var Stepper_default = defineComponent({
+	name: "VCStepper",
+	inheritAttrs: false,
+	props: {
+		/** Active step (1-based). v-modeled. */
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
+		/** Initial active step for uncontrolled usage. */
+		defaultValue: {
+			type: Number,
+			default: 1
+		},
+		/** Layout direction. */
+		orientation: {
+			type: String,
+			default: "horizontal"
+		},
+		/** Reading direction. Falls back to the ConfigManager's `dir` value when omitted. */
+		dir: {
+			type: String,
+			default: void 0
+		},
+		/** When `true`, steps must be completed in order — Reka blocks navigation past the next incomplete step. */
+		linear: {
+			type: Boolean,
+			default: true
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(props, { attrs, slots, emit }) {
+		provideStepperContext({
+			themeClass: () => props.themeClass,
+			themeVariant: () => props.themeVariant
+		});
+		const theme = useComponentTheme("stepper", props, stepperThemeDefaults);
+		return () => h(StepperRoot, mergeProps(attrs, {
+			modelValue: props.modelValue,
+			defaultValue: props.defaultValue,
+			orientation: props.orientation,
+			dir: props.dir,
+			linear: props.linear,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			class: theme.value.root || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/stepper/StepperItem.vue
+var StepperItem_default = defineComponent({
+	name: "VCStepperItem",
+	inheritAttrs: false,
+	props: {
+		/** 1-based step index. Required by Reka — used to determine completion / active state. */
+		step: {
+			type: Number,
+			required: true
+		},
+		/** Block interaction with this step. */
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		/** Force completion state. Reka derives this automatically when `false`. */
+		completed: {
+			type: Boolean,
+			default: false
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const ctx = useStepperContext();
+		const theme = useComponentTheme("stepper", {
+			get themeClass() {
+				return {
+					...ctx?.themeClass() ?? {},
+					...props.themeClass ?? {}
+				};
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, stepperThemeDefaults);
+		return () => h(StepperItem, {
+			step: props.step,
+			disabled: props.disabled,
+			completed: props.completed,
+			...mergeProps(attrs, { class: ["group", theme.value.item || void 0] })
+		}, { default: ({ state }) => slots.default?.({ state }) });
+	}
+});
+//#endregion
+//#region src/components/stepper/StepperTrigger.vue
+var StepperTrigger_default = defineComponent({
+	name: "VCStepperTrigger",
+	inheritAttrs: false,
+	props: {
+		/** Render the consumer's slot child as the trigger root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** HTML tag to render. */
+		as: {
+			type: [String, Object],
+			default: "button"
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useStepperContext();
+		const theme = useComponentTheme("stepper", {
+			get themeClass() {
+				return {
+					...ctx?.themeClass() ?? {},
+					...props.themeClass ?? {}
+				};
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, stepperThemeDefaults);
+		return () => h(StepperTrigger, mergeProps(props.as === "button" ? { type: "button" } : {}, attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.trigger || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/stepper/StepperIndicator.vue
+var StepperIndicator_default = defineComponent({
+	name: "VCStepperIndicator",
+	inheritAttrs: false,
+	props: {
+		/** Render the consumer's slot child as the indicator root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** HTML tag to render. */
+		as: {
+			type: [String, Object],
+			default: "div"
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useStepperContext();
+		const theme = useComponentTheme("stepper", {
+			get themeClass() {
+				return {
+					...ctx?.themeClass() ?? {},
+					...props.themeClass ?? {}
+				};
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, stepperThemeDefaults);
+		return () => h(StepperIndicator, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.indicator || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/stepper/StepperTitle.vue
+var StepperTitle_default = defineComponent({
+	name: "VCStepperTitle",
+	inheritAttrs: false,
+	props: {
+		/** Render the consumer's slot child as the title root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** HTML tag to render. */
+		as: {
+			type: [String, Object],
+			default: "h4"
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useStepperContext();
+		const theme = useComponentTheme("stepper", {
+			get themeClass() {
+				return {
+					...ctx?.themeClass() ?? {},
+					...props.themeClass ?? {}
+				};
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, stepperThemeDefaults);
+		return () => h(StepperTitle, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.title || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/stepper/StepperDescription.vue
+var StepperDescription_default = defineComponent({
+	name: "VCStepperDescription",
+	inheritAttrs: false,
+	props: {
+		/** Render the consumer's slot child as the description root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** HTML tag to render. */
+		as: {
+			type: [String, Object],
+			default: "p"
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useStepperContext();
+		const theme = useComponentTheme("stepper", {
+			get themeClass() {
+				return {
+					...ctx?.themeClass() ?? {},
+					...props.themeClass ?? {}
+				};
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, stepperThemeDefaults);
+		return () => h(StepperDescription, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.description || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/components/stepper/StepperSeparator.vue
+var StepperSeparator_default = defineComponent({
+	name: "VCStepperSeparator",
+	inheritAttrs: false,
+	props: {
+		/** Render the consumer's slot child as the separator root (Reka `asChild` pattern). */
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		/** HTML tag to render. */
+		as: {
+			type: [String, Object],
+			default: "div"
+		},
+		/** Theme-class overrides for this component instance. */
+		themeClass: {
+			type: Object,
+			default: void 0
+		},
+		/** Theme-variant values for this component instance. */
+		themeVariant: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { attrs, slots }) {
+		const ctx = useStepperContext();
+		const theme = useComponentTheme("stepper", {
+			get themeClass() {
+				return {
+					...ctx?.themeClass() ?? {},
+					...props.themeClass ?? {}
+				};
+			},
+			get themeVariant() {
+				return {
+					...ctx?.themeVariant() ?? {},
+					...props.themeVariant ?? {}
+				};
+			}
+		}, stepperThemeDefaults);
+		return () => h(StepperSeparator, mergeProps(attrs, {
+			as: props.as,
+			asChild: props.asChild,
+			class: theme.value.separator || void 0
+		}), { default: () => slots.default?.() });
+	}
+});
+//#endregion
+//#region src/index.ts
+function install(instance, options = {}) {
+	provideNavigationManager(new NavigationManager({ items: options.items ?? [] }), instance);
+	installThemeManager(instance, options);
+	installDefaultsManager(instance, options);
+	Object.entries({
+		VCNavItem,
+		VCNavItems,
+		VCStepper: Stepper_default,
+		VCStepperItem: StepperItem_default,
+		VCStepperTrigger: StepperTrigger_default,
+		VCStepperIndicator: StepperIndicator_default,
+		VCStepperTitle: StepperTitle_default,
+		VCStepperDescription: StepperDescription_default,
+		VCStepperSeparator: StepperSeparator_default
+	}).forEach(([componentName, component]) => {
+		instance.component(componentName, component);
+	});
+}
+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 { NavigationManager, VCNavItem, VCNavItems, index as default, injectNavigationManager, install, provideNavigationManager };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map