@vuetify/v0 0.1.7 → 0.1.8

package/dist/{useClickOutside-YOGwKo7v.mjs → useClickOutside-W0Sur1rC.mjs}

@@ -1,16 +1,16 @@
-import { a as SUPPORTS_OBSERVER, i as SUPPORTS_MUTATION_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, r as SUPPORTS_MATCH_MEDIA, t as IN_BROWSER } from "./globals-BqRH_jdr.mjs";
+import { a as SUPPORTS_OBSERVER, i as SUPPORTS_MUTATION_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, r as SUPPORTS_MATCH_MEDIA, t as IN_BROWSER } from "./globals-ClSU6mqC.mjs";
 import { clamp, instanceExists, isElement, isFunction, isNull, isNullOrUndefined, isNumber, isObject, isString, isUndefined, mergeDeep, useId as useId$1 } from "./utilities/index.mjs";
 import { i as useContext, n as createContext, t as createTrinity } from "./createTrinity-C_c8eedz.mjs";
-import { a as createPlugin, i as useLogger, o as createPluginContext } from "./useLogger-B70T4SgK.mjs";
-import { i as createRegistry } from "./createTokens-CMRBDlzN.mjs";
-import { i as createModel, t as createSelection } from "./createSelection-DvOR2tKk.mjs";
-import { t as createSingle } from "./createSingle-Bbcwcq4R.mjs";
-import { t as createGroup } from "./createGroup-Cf6lK9BR.mjs";
+import { a as createPlugin, i as useLogger, o as createPluginContext } from "./useLogger-DY1Hbcy1.mjs";
+import { i as createRegistry } from "./createTokens-CXlT0Vc6.mjs";
+import { i as createModel, t as createSelection } from "./createSelection-8MX0OHXR.mjs";
+import { t as createSingle } from "./createSingle-CbuOBb-E.mjs";
+import { t as createGroup } from "./createGroup-BpJFi41X.mjs";
 import { t as toArray } from "./toArray-VdROPpy-.mjs";
-import { a as useLocale } from "./useLocale-C8I_fNAS.mjs";
-import { a as useRules, o as isStandardSchema, s as toRule } from "./useRules-7C92Xzyt.mjs";
+import { a as useLocale } from "./useLocale-cQlPxbpV.mjs";
+import { a as useRules, o as isStandardSchema } from "./useRules-BbA6_gvs.mjs";
 import { t as MemoryAdapter } from "./memory-XCMtkld1.mjs";
-import { computed, effectScope, isRef, nextTick, onScopeDispose, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, unref, watch, watchEffect } from "vue";
+import { computed, effectScope, isRef, nextTick, onMounted, onScopeDispose, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, unref, watch, watchEffect } from "vue";
 //#region src/composables/createBreadcrumbs/index.ts
 /**
 * @module createBreadcrumbs
@@ -1047,6 +1047,7 @@ function createBreakpoints(_options = {}) {
 	}
 	return {
 		breakpoints,
+		mobileBreakpoint,
 		name: readonly(name),
 		width: readonly(width),
 		height: readonly(height),
@@ -1073,8 +1074,10 @@ function createBreakpoints(_options = {}) {
 }
 function createBreakpointsFallback(options = {}) {
 	if (options.ssr) return createBreakpoints(options);
+	const defaults = createDefaultBreakpoints();
 	return {
-		breakpoints: createDefaultBreakpoints().breakpoints,
+		breakpoints: defaults.breakpoints,
+		mobileBreakpoint: defaults.mobileBreakpoint,
 		name: readonly(shallowRef("xs")),
 		width: readonly(shallowRef(0)),
 		height: readonly(shallowRef(0)),
@@ -1362,14 +1365,14 @@ function useDate(namespace = "v0:date") {
 * @example
 * ```ts
 * import { createForm, createValidation } from '@vuetify/v0'
+* import { shallowRef } from 'vue'
 *
 * const form = createForm()
 *
-* // Validations register themselves — form is just the coordinator
-* const validation = createValidation()
-* const email = validation.register({
-*   id: 'email',
-*   value: '',
+* // Each validation is one input — form is just the coordinator
+* const email = shallowRef('')
+* const validation = createValidation({
+*   value: email,
 *   rules: ['required', 'email'],
 * })
 *
@@ -1379,12 +1382,12 @@ function useDate(namespace = "v0:date") {
 * form.reset()
 * ```
 */
-function createForm(options) {
-	const registry = createRegistry(options);
-	const disabled = shallowRef(false);
-	const readonly = shallowRef(false);
-	if (!/* @__PURE__ */ isNullOrUndefined(options?.disabled)) disabled.value = toValue(options.disabled) ?? false;
-	if (!/* @__PURE__ */ isNullOrUndefined(options?.readonly)) readonly.value = toValue(options.readonly) ?? false;
+function createForm(options = {}) {
+	const { disabled = false, readonly = false, ..._options } = options;
+	const registry = createRegistry({
+		..._options,
+		reactive: true
+	});
 	const isValidating = computed(() => {
 		for (const ticket of registry.values()) if (ticket.value.isValidating.value) return true;
 		return false;
@@ -1404,14 +1407,14 @@ function createForm(options) {
 		return registry.register(registration);
 	}
 	function reset() {
-		for (const ticket of registry.values()) for (const field of ticket.value.values()) field.reset();
+		for (const ticket of registry.values()) ticket.value.reset();
 	}
 	async function submit(id) {
 		const ids = id ? toArray(id) : [...registry.keys()];
-		return (await Promise.all(ids.map(async (id) => {
-			const ticket = registry.get(id);
+		return (await Promise.all(ids.map(async (key) => {
+			const ticket = registry.get(key);
 			if (!ticket) return true;
-			return (await Promise.all([...ticket.value.values()].map((field) => field.validate()))).every(Boolean);
+			return ticket.value.validate();
 		}))).every(Boolean);
 	}
 	return {
@@ -2932,6 +2935,83 @@ function useNested(namespace = "v0:nested") {
 	return useContext(namespace);
 }
 //#endregion
+//#region src/composables/usePopover/index.ts
+/**
+* @module usePopover
+*
+* @remarks
+* Composable for native popover API behavior with CSS anchor positioning.
+* Manages open/close state, anchor styles, content attributes, and
+* bidirectional sync between reactive state and native popover events.
+*
+* Key features:
+* - Native popover API (showPopover/hidePopover)
+* - CSS anchor positioning (position-area, position-try-fallbacks)
+* - Toggle event sync for native state changes
+* - SSR-safe (no DOM ops outside browser)
+* - Optional external isOpen ref for v-model integration
+*
+* Perfect for building select, combobox, tooltip, and menu components
+* without wrapping the Popover compound component.
+*/
+function usePopover(options = {}) {
+	const { id: _id, positionArea = "bottom", positionTry = "most-width bottom" } = options;
+	const id = _id ?? /* @__PURE__ */ useId$1();
+	const isOpen = options.isOpen ?? shallowRef(false);
+	function open() {
+		isOpen.value = true;
+	}
+	function close() {
+		isOpen.value = false;
+	}
+	function toggle() {
+		isOpen.value = !isOpen.value;
+	}
+	const anchorStyles = toRef(() => ({ anchorName: `--${id}` }));
+	const contentAttrs = toRef(() => ({
+		id,
+		popover: ""
+	}));
+	const contentStyles = toRef(() => ({
+		"position": "fixed",
+		"margin": "unset",
+		"inset-area": positionArea,
+		"position-area": positionArea,
+		"position-anchor": `--${id}`,
+		"position-try-fallbacks": positionTry
+	}));
+	/* v8 ignore start -- browser popover API */
+	function attach(el) {
+		onMounted(() => {
+			const element = toValue(el);
+			if (isOpen.value) element?.showPopover();
+		});
+		watch(isOpen, (value) => {
+			const element = toValue(el);
+			if (!element?.isConnected) return;
+			if (value === element.matches?.(":popover-open")) return;
+			if (value) element.showPopover?.();
+			else element.hidePopover?.();
+		});
+		useEventListener(el, "toggle", (e) => {
+			if (!toValue(el)?.isConnected) return;
+			isOpen.value = e.newState === "open";
+		});
+	}
+	/* v8 ignore stop */
+	return {
+		isOpen,
+		id,
+		open,
+		close,
+		toggle,
+		anchorStyles,
+		contentAttrs,
+		contentStyles,
+		attach
+	};
+}
+//#endregion
 //#region src/composables/createQueue/index.ts
 /**
 * @module createQueue
@@ -3125,6 +3205,236 @@ function useQueue(namespace = "v0:queue") {
 	return useContext(namespace);
 }
 //#endregion
+//#region src/composables/createFocusTraversal/index.ts
+/**
+* @module createFocusTraversal
+*
+* @remarks
+* Internal factory for keyboard-driven traversal of ordered item lists.
+* Encapsulates stride-based navigation, disabled-item skipping, circular/bounded
+* movement, grid row scoping, and key-to-action mapping shared by
+* useRovingFocus and useVirtualFocus.
+*
+* Not exported from the package barrel — consumed only by sibling composables.
+*/
+function mod(length, index) {
+	return (index % length + length) % length;
+}
+function isRtl(e) {
+	if (!IN_BROWSER) return false;
+	const el = e.currentTarget;
+	return el ? getComputedStyle(el).direction === "rtl" : false;
+}
+function createFocusTraversal(items, activate, options = {}) {
+	const { orientation = "vertical", circular = false, columns: _columns } = options;
+	const activeId = shallowRef();
+	function enabled() {
+		return items().filter((item) => !toValue(item.disabled));
+	}
+	function indexOf(id) {
+		return items().findIndex((item) => item.id === id);
+	}
+	function go(id) {
+		activeId.value = id;
+		activate(id);
+	}
+	function step(stride) {
+		const all = items();
+		const length = all.length;
+		if (!length) return;
+		const current = /* @__PURE__ */ isUndefined(activeId.value) ? -1 : indexOf(activeId.value);
+		const direction = stride > 0 ? 1 : -1;
+		const absStride = Math.abs(stride);
+		let index = current + stride;
+		const maxHops = Math.ceil(length / absStride);
+		let hops = 0;
+		if (circular) index = mod(length, index);
+		else if (index < 0 || index >= length) return;
+		while (hops < maxHops) {
+			const item = all[index];
+			if (item && !toValue(item.disabled)) {
+				go(item.id);
+				return;
+			}
+			hops++;
+			index = circular ? mod(length, index + stride) : index + direction * absStride;
+			if (!circular && (index < 0 || index >= length)) return;
+		}
+	}
+	function next() {
+		step(1);
+	}
+	function prev() {
+		step(-1);
+	}
+	function first() {
+		const list = enabled();
+		if (list.length > 0) go(list[0].id);
+	}
+	function last() {
+		const list = enabled();
+		if (list.length > 0) go(list.at(-1).id);
+	}
+	/** Focus first non-disabled item in the current row (grid mode) */
+	function rowFirst() {
+		const cols = toValue(_columns) ?? 0;
+		if (!cols) return first();
+		const all = items();
+		const current = /* @__PURE__ */ isUndefined(activeId.value) ? 0 : indexOf(activeId.value);
+		const rowStart = current - current % cols;
+		const rowEnd = Math.min(rowStart + cols, all.length);
+		for (let i = rowStart; i < rowEnd; i++) {
+			const item = all[i];
+			if (item && !toValue(item.disabled)) {
+				go(item.id);
+				return;
+			}
+		}
+	}
+	/** Focus last non-disabled item in the current row (grid mode) */
+	function rowLast() {
+		const cols = toValue(_columns) ?? 0;
+		if (!cols) return last();
+		const all = items();
+		const current = /* @__PURE__ */ isUndefined(activeId.value) ? 0 : indexOf(activeId.value);
+		const rowStart = current - current % cols;
+		const rowEnd = Math.min(rowStart + cols, all.length);
+		for (let i = rowEnd - 1; i >= rowStart; i--) {
+			const item = all[i];
+			if (item && !toValue(item.disabled)) {
+				go(item.id);
+				return;
+			}
+		}
+	}
+	function onKeydown(e) {
+		const cols = toValue(_columns);
+		const rtl = isRtl(e);
+		if (cols) {
+			switch (e.key) {
+				case "ArrowRight":
+					e.preventDefault();
+					step(rtl ? -1 : 1);
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					step(rtl ? 1 : -1);
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					step(cols);
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					step(-cols);
+					break;
+				case "Home":
+					e.preventDefault();
+					if (e.ctrlKey) first();
+					else rowFirst();
+					break;
+				case "End":
+					e.preventDefault();
+					if (e.ctrlKey) last();
+					else rowLast();
+					break;
+			}
+			return;
+		}
+		const prevKeys = [];
+		const nextKeys = [];
+		if (orientation === "vertical" || orientation === "both") {
+			prevKeys.push("ArrowUp");
+			nextKeys.push("ArrowDown");
+		}
+		if (orientation === "horizontal" || orientation === "both") {
+			prevKeys.push(rtl ? "ArrowRight" : "ArrowLeft");
+			nextKeys.push(rtl ? "ArrowLeft" : "ArrowRight");
+		}
+		if (prevKeys.includes(e.key)) {
+			e.preventDefault();
+			prev();
+		} else if (nextKeys.includes(e.key)) {
+			e.preventDefault();
+			next();
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			first();
+		} else if (e.key === "End") {
+			e.preventDefault();
+			last();
+		}
+	}
+	return {
+		activeId,
+		step,
+		next,
+		prev,
+		first,
+		last,
+		onKeydown
+	};
+}
+//#endregion
+//#region src/composables/useRovingFocus/index.ts
+/**
+* @module useRovingFocus
+*
+* @remarks
+* Roving tabindex composable for keyboard navigation within composite widgets.
+*
+* Key features:
+* - Arrow key navigation with orientation support
+* - Grid mode for 2D navigation (data tables, calendars)
+* - Automatic disabled item skipping
+* - Optional circular navigation
+* - Home/End key support (row-scoped in grid mode)
+* - Auto-attaches keydown listener when target is provided
+*
+* Perfect for toolbars, menus, tree items, grids, and other composite widgets.
+*/
+function useRovingFocus(items, options = {}) {
+	const { orientation, circular, columns, onFocus, target } = options;
+	function applyFocus(id) {
+		const item = items().find((i) => i.id === id);
+		if (!item?.el) return false;
+		onFocus?.(id);
+		nextTick(() => {
+			toValue(item.el)?.focus();
+		});
+		return true;
+	}
+	const traversal = createFocusTraversal(items, (id) => applyFocus(id), {
+		orientation,
+		circular,
+		columns
+	});
+	function focus(id) {
+		const prev = traversal.activeId.value;
+		traversal.activeId.value = id;
+		if (!applyFocus(id)) traversal.activeId.value = prev;
+	}
+	function enabled() {
+		return items().filter((item) => !toValue(item.disabled));
+	}
+	function isTabbable(id) {
+		if (!/* @__PURE__ */ isUndefined(traversal.activeId.value)) return traversal.activeId.value === id;
+		const list = enabled();
+		return list.length > 0 && list[0]?.id === id;
+	}
+	if (target) useEventListener(target, "keydown", traversal.onKeydown);
+	return {
+		focusedId: traversal.activeId,
+		isTabbable,
+		focus,
+		next: traversal.next,
+		prev: traversal.prev,
+		first: traversal.first,
+		last: traversal.last,
+		onKeydown: traversal.onKeydown
+	};
+}
+//#endregion
 //#region src/composables/useRtl/adapters/v0.ts
 var Vuetify0RtlAdapter = class {
 	setup(app, context, target) {
@@ -4093,31 +4403,27 @@ function useTimeline(namespace = "v0:timeline") {
 * @module createValidation
 *
 * @remarks
-* Per-field validation lifecycle composable.
+* Per-input validation composable built on createGroup.
 *
 * Key features:
+* - Each ticket is a rule — enable/disable via select/unselect
 * - Auto-register with parent form via useForm() injection
 * - Async rule support with generation-based race safety
 * - Silent validation mode
 * - Tri-state isValid (null/true/false)
-* - isPristine tracking
 *
 * Uses useRules() to resolve alias strings via shared context.
 */
+const UNSET = Symbol("unset");
 /**
-* Resolves raw rule inputs to FormValidationRule[].
-* Uses the provided RulesContext if available, otherwise handles
-* functions and Standard Schema objects directly.
-*/
-function resolveRules(raw, context) {
-	if (context) return context.resolve(raw);
-	return raw.filter((r) => /* @__PURE__ */ isFunction(r) || isStandardSchema(r)).map((r) => isStandardSchema(r) ? toRule(r) : r);
-}
-/**
-* Creates a new validation instance.
+* Creates a per-input validation instance.
+*
+* Built on `createGroup` — each registered rule becomes a ticket that can be
+* enabled/disabled via selection methods (`select`, `unselect`, `toggle`).
+* Only selected (active) rules run during validation.
 *
 * @param options The options for the validation instance.
-* @returns A new validation context with register(), aggregate state, etc.
+* @returns A new validation context.
 *
 * @see https://0.vuetifyjs.com/composables/forms/create-validation
 *
@@ -4125,111 +4431,83 @@ function resolveRules(raw, context) {
 * ```ts
 * import { createValidation } from '@vuetify/v0'
 *
-* const validation = createValidation()
-*
-* const field = validation.register({
-*   id: 'email',
-*   value: '',
-*   rules: [(v) => !!v || 'Required'],
+* const validation = createValidation({
+*   rules: [
+*     v => !!v || 'Required',
+*     v => /^.+@\S+\.\S+$/.test(String(v)) || 'Invalid email',
+*   ],
 * })
 *
-* await field.validate()
+* await validation.validate('')
 *
-* console.log(field.errors.value) // ['Required']
+* console.log(validation.errors.value) // ['Required', 'Invalid email']
 *
-* field.reset()
+* validation.reset()
 * ```
 */
-function createValidation(options = {}) {
-	const registry = createRegistry(options);
-	const rules = useRules();
-	const isValidating = computed(() => {
-		for (const ticket of registry.values()) if (ticket.isValidating.value) return true;
-		return false;
+function createValidation(_options = {}) {
+	const { rules: initialRules = [], value: valueSource, enroll = true, ...options } = _options;
+	const group = createGroup({
+		...options,
+		enroll,
+		multiple: true
 	});
-	const isValid = computed(() => {
-		let hasNull = false;
-		let hasFields = false;
-		for (const ticket of registry.values()) {
-			hasFields = true;
-			if (ticket.isValid.value === false) return false;
-			if (/* @__PURE__ */ isNull(ticket.isValid.value)) hasNull = true;
+	const rulesContext = useRules();
+	const errors = shallowRef([]);
+	const isValid = shallowRef(null);
+	const isValidating = shallowRef(false);
+	let generation = 0;
+	function register(input) {
+		if (/* @__PURE__ */ isFunction(input) || /* @__PURE__ */ isString(input) || isStandardSchema(input)) {
+			const resolved = rulesContext.resolve([input]);
+			return group.register({ value: resolved[0] ?? (() => true) });
 		}
-		if (!hasFields) return null;
-		return hasNull ? null : true;
-	});
-	function register(registration = {}) {
-		const model = shallowRef(/* @__PURE__ */ isNullOrUndefined(registration.value) ? "" : toValue(registration.value));
-		const resolved = resolveRules(registration.rules || [], rules);
-		const errors = shallowRef([]);
-		const isFieldValidating = shallowRef(false);
-		const initialValue = model.value;
-		const isPristine = shallowRef(true);
-		const isFieldValid = shallowRef(null);
-		function reset() {
-			model.value = initialValue;
-			errors.value = [];
-			isPristine.value = true;
-			isFieldValid.value = null;
-			isFieldValidating.value = false;
-			validationGeneration++;
+		return group.register(input);
+	}
+	function onboard(rules) {
+		return group.batch(() => rules.map((r) => register(r)));
+	}
+	async function validate(_value = UNSET, silent = false) {
+		const val = _value === UNSET ? toValue(valueSource) : _value;
+		const activeRules = [];
+		for (const ticket of group.selectedItems.value) activeRules.push(ticket.value);
+		if (activeRules.length === 0) {
+			if (!silent) isValid.value = true;
+			return true;
 		}
-		let validationGeneration = 0;
-		async function validate(silent = false) {
-			if (resolved.length === 0) return isFieldValid.value = true;
-			const generation = ++validationGeneration;
-			isFieldValidating.value = true;
-			try {
-				const results = await Promise.all(resolved.map((rule) => rule(model.value)));
-				if (generation !== validationGeneration) return isFieldValid.value ?? false;
-				const errorMessages = results.filter((result) => /* @__PURE__ */ isString(result) || result === false).map((result) => result === false ? "Validation failed" : result);
-				if (!silent) {
-					errors.value = errorMessages;
-					isFieldValid.value = errorMessages.length === 0;
-					isPristine.value = model.value === initialValue;
-				}
-				return errorMessages.length === 0;
-			} finally {
-				if (generation === validationGeneration) isFieldValidating.value = false;
+		const gen = ++generation;
+		if (!silent) isValidating.value = true;
+		try {
+			const results = await Promise.all(activeRules.map((rule) => rule(val)));
+			if (gen !== generation) return isValid.value ?? false;
+			const errorMessages = results.filter((result) => /* @__PURE__ */ isString(result) || result === false).map((result) => result === false ? "Validation failed" : result);
+			if (!silent) {
+				errors.value = errorMessages;
+				isValid.value = errorMessages.length === 0;
 			}
+			return errorMessages.length === 0;
+		} finally {
+			if (gen === generation && !silent) isValidating.value = false;
 		}
-		const item = {
-			...registration,
-			rules: resolved,
-			errors,
-			disabled: registration.disabled || false,
-			isValidating: isFieldValidating,
-			isPristine,
-			isValid: isFieldValid,
-			reset,
-			validate
-		};
-		const ticket = registry.register(item);
-		Object.defineProperty(ticket, "value", {
-			get() {
-				return model.value;
-			},
-			set(val) {
-				model.value = val;
-				isPristine.value = val === initialValue;
-				isFieldValid.value = null;
-			},
-			enumerable: true,
-			configurable: true
-		});
-		return ticket;
 	}
-	function onboard(registrations) {
-		return registry.batch(() => registrations.map((r) => register(r)));
+	function reset() {
+		errors.value = [];
+		isValid.value = null;
+		isValidating.value = false;
+		generation++;
 	}
+	if (initialRules.length > 0) onboard(initialRules);
 	const context = {
-		...registry,
+		...group,
 		register,
 		onboard,
+		validate,
+		reset,
+		errors,
 		isValid,
 		isValidating,
 		get size() {
-			return registry.size;
+			return group.size;
 		}
 	};
 	const form = useForm();
@@ -4684,6 +4962,80 @@ function useVirtual(namespace = "v0:virtual") {
 	return useContext(namespace);
 }
 //#endregion
+//#region src/composables/useVirtualFocus/index.ts
+/**
+* @module useVirtualFocus
+*
+* @remarks
+* Virtual focus composable for aria-activedescendant keyboard navigation.
+* DOM focus stays on a control element while a virtual cursor highlights
+* items in a list.
+*
+* Key features:
+* - Arrow key navigation with orientation support
+* - Grid mode for 2D navigation
+* - Automatic disabled item skipping
+* - Optional circular navigation
+* - Home/End key support (row-scoped in grid mode)
+* - Auto-attaches keydown listener when target is provided
+* - Sets aria-activedescendant and data-highlighted attributes
+*
+* Perfect for comboboxes, autocompletes, listboxes, and other widgets
+* where DOM focus must remain on the control element.
+*/
+function useVirtualFocus(items, options) {
+	const { control, target, orientation, circular, columns, onHighlight } = options;
+	let previousEl = null;
+	function applyHighlight(id) {
+		const item = items().find((i) => i.id === id);
+		if (!item?.el) return false;
+		const el = toValue(item.el);
+		if (!el) return false;
+		const controlEl = toValue(control);
+		if (controlEl) {
+			const itemId = el.getAttribute("id");
+			if (itemId) controlEl.setAttribute("aria-activedescendant", itemId);
+		}
+		if (previousEl) delete previousEl.dataset.highlighted;
+		el.dataset.highlighted = "";
+		previousEl = el;
+		el.scrollIntoView({ block: "nearest" });
+		onHighlight?.(id);
+		return true;
+	}
+	const traversal = createFocusTraversal(items, (id) => applyHighlight(id), {
+		orientation,
+		circular,
+		columns
+	});
+	function highlight(id) {
+		const prev = traversal.activeId.value;
+		traversal.activeId.value = id;
+		if (!applyHighlight(id)) traversal.activeId.value = prev;
+	}
+	function clear() {
+		traversal.activeId.value = void 0;
+		const controlEl = toValue(control);
+		if (controlEl) controlEl.removeAttribute("aria-activedescendant");
+		if (previousEl) {
+			delete previousEl.dataset.highlighted;
+			previousEl = null;
+		}
+	}
+	const listener = target ?? control;
+	if (listener) useEventListener(listener, "keydown", traversal.onKeydown);
+	return {
+		highlightedId: traversal.activeId,
+		highlight,
+		clear,
+		next: traversal.next,
+		prev: traversal.prev,
+		first: traversal.first,
+		last: traversal.last,
+		onKeydown: traversal.onKeydown
+	};
+}
+//#endregion
 //#region src/composables/useEventListener/index.ts
 /**
 * @module useEventListener
@@ -5029,4 +5381,4 @@ function useClickOutside(target, handler, options = {}) {
 	};
 }
 //#endregion
-export { createDatePlugin as $, Vuetify0RtlAdapter as A, useMediaQuery as B, useStack as C, createRtlFallback as D, createRtlContext as E, createNestedContext as F, useElementIntersection as G, usePrefersDark as H, useNested as I, createForm as J, useIntersectionObserver as K, multipleOpenStrategy as L, createQueueContext as M, useQueue as N, createRtlPlugin as O, createNested as P, createDateContext as Q, singleOpenStrategy as R, createStackPlugin as S, createRtl as T, usePrefersReducedMotion as U, usePrefersContrast as V, useLazy as W, useForm as X, createFormContext as Y, createDate as Z, createStep as _, useHydration as _t, createVirtual as a, toReactive as at, createStack as b, useBreadcrumbs as bt, useToggleScope as c, createOverflowContext as ct, createTimelineContext as d, useResizeObserver as dt, useDate as et, useTimeline as f, toElement as ft, useStorage as g, createHydrationPlugin as gt, createStoragePlugin as h, createHydrationContext as ht, useWindowEventListener as i, useBreakpoints as it, createQueue as j, useRtl as k, createValidation as l, useOverflow as lt, createStorageContext as m, createHydration as mt, useDocumentEventListener as n, createBreakpointsContext as nt, createVirtualContext as o, useProxyModel as ot, createStorage as p, createFallbackHydration as pt, useHotkey as q, useEventListener as r, createBreakpointsPlugin as rt, useVirtual as s, createOverflow as st, useClickOutside as t, createBreakpoints as tt, createTimeline as u, useElementSize as ut, createStepContext as v, createBreadcrumbs as vt, createSlider as w, createStackContext as x, useStep as y, createBreadcrumbsContext as yt, useMutationObserver as z };
+export { useForm as $, useRtl as A, multipleOpenStrategy as B, createStackPlugin as C, useBreadcrumbs as Ct, createRtlContext as D, createRtl as E, useQueue as F, usePrefersDark as G, useMutationObserver as H, usePopover as I, useElementIntersection as J, usePrefersReducedMotion as K, createNested as L, useRovingFocus as M, createQueue as N, createRtlFallback as O, createQueueContext as P, createFormContext as Q, createNestedContext as R, createStackContext as S, createBreadcrumbsContext as St, createSlider as T, useMediaQuery as U, singleOpenStrategy as V, usePrefersContrast as W, useHotkey as X, useIntersectionObserver as Y, createForm as Z, useStorage as _, createHydration as _t, useVirtualFocus as a, createBreakpointsContext as at, useStep as b, useHydration as bt, useVirtual as c, toReactive as ct, createTimeline as d, createOverflowContext as dt, createDate as et, createTimelineContext as f, useOverflow as ft, createStoragePlugin as g, createFallbackHydration as gt, createStorageContext as h, toElement as ht, useWindowEventListener as i, createBreakpoints as it, Vuetify0RtlAdapter as j, createRtlPlugin as k, useToggleScope as l, useProxyModel as lt, createStorage as m, useResizeObserver as mt, useDocumentEventListener as n, createDatePlugin as nt, createVirtual as o, createBreakpointsPlugin as ot, useTimeline as p, useElementSize as pt, useLazy as q, useEventListener as r, useDate as rt, createVirtualContext as s, useBreakpoints as st, useClickOutside as t, createDateContext as tt, createValidation as u, createOverflow as ut, createStep as v, createHydrationContext as vt, useStack as w, createStack as x, createBreadcrumbs as xt, createStepContext as y, createHydrationPlugin as yt, useNested as z };