ropav 0.1.6 → 0.1.8

package/dist/tooltip.js

@@ -1,13 +1,18 @@
 import './tooltip.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { r as normalizeDelay } from "./number.js";
 import { a as getComponentVariantColorRoles } from "./componentColors.js";
+import { n as mergeAriaIdRefs } from "./aria.js";
 import { n as useOverlayZIndex } from "./useOverlayZIndex.js";
-import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
-import { n as useTeleportPositioningKey, r as useTeleportTarget } from "./useTeleportTarget.js";
-import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
+import { t as getFloatingOffsetStyle } from "./floatingOffset.js";
+import { t as useFloatingPosition } from "./useFloatingPosition.js";
+import { t as useFloatingTargetLifecycle } from "./useFloatingTargetLifecycle.js";
+import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
 //#region src/internal/composables/useDelayedOpen.ts
 function readOption(value, fallback) {
 	return typeof value === "function" ? value() ?? fallback : value ?? fallback;
@@ -37,7 +42,7 @@ function useDelayedOpen(options = {}) {
 	}
 	function open() {
 		if (isDisabled()) return;
-		const delay = readOption(options.openDelay, 0);
+		const delay = normalizeDelay(readOption(options.openDelay, 0));
 		if (delay <= 0) {
 			setOpen(true);
 			return;
@@ -60,15 +65,32 @@ function useDelayedOpen(options = {}) {
 	};
 }
 //#endregion
-//#region src/components/tooltip/useTooltip.ts
-function resolveTooltipOffsetStyle(offset) {
-	if (offset == null) return void 0;
-	if (typeof offset === "number") return { "--_rp-tooltip-main-axis-offset": `${offset}px` };
-	const style = {};
-	if (offset.mainAxis != null) style["--_rp-tooltip-main-axis-offset"] = `${offset.mainAxis}px`;
-	if (offset.crossAxis != null) style["--_rp-tooltip-cross-axis-offset"] = `${offset.crossAxis}px`;
-	return Object.keys(style).length > 0 ? style : void 0;
+//#region src/components/tooltip/useTooltipTargetBindings.ts
+var TARGET_ATTRIBUTES = ["aria-describedby"];
+function useTooltipTargetBindings({ targetLifecycle, shouldDescribeContent, tooltipId, openTooltip, closeTooltip, onKeydown }) {
+	targetLifecycle.bindTarget({
+		listeners: [
+			["mouseenter", openTooltip],
+			["mouseleave", closeTooltip],
+			["focusin", openTooltip],
+			["focusout", closeTooltip],
+			["keydown", onKeydown]
+		],
+		attributes: {
+			names: TARGET_ATTRIBUTES,
+			isActive: () => shouldDescribeContent.value,
+			apply: (target, snapshot) => {
+				target.setAttribute("aria-describedby", mergeAriaIdRefs(snapshot.get("aria-describedby"), tooltipId.value) ?? "");
+			}
+		}
+	});
 }
+//#endregion
+//#region src/components/tooltip/useTooltip.ts
+var TOOLTIP_OFFSET_PROPERTIES = {
+	mainAxis: "--_rp-tooltip-main-axis-offset",
+	crossAxis: "--_rp-tooltip-cross-axis-offset"
+};
 function resolveTooltipColorStyleWithContrast(color, autoContrast, contrastColor) {
 	if (!color) return void 0;
 	const roles = getComponentVariantColorRoles({
@@ -97,9 +119,11 @@ function useTooltip(props, emitOpenChange) {
 	const shouldRenderContent = computed(() => !isDisabled.value);
 	const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);
 	const teleportTo = useTeleportTarget(() => props.teleportTo);
-	const teleportPositioningKey = useTeleportPositioningKey();
-	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
-	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
+	const targetLifecycle = useFloatingTargetLifecycle({
+		target: () => props.target,
+		fallback: rootRef
+	});
+	const { isExplicitTarget, reference } = targetLifecycle;
 	const zIndex = useOverlayZIndex({
 		baseZIndex: () => props.baseZIndex,
 		defaultBaseZIndex: 1e3
@@ -123,12 +147,7 @@ function useTooltip(props, emitOpenChange) {
 		flipOptions: () => props.flipOptions,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
-		autoUpdateOptions: () => props.autoUpdateOptions,
-		restartKey: () => [
-			Boolean(props.teleport),
-			teleportTo.value,
-			teleportPositioningKey.value
-		]
+		autoUpdateOptions: () => props.autoUpdateOptions
 	});
 	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
 	const rootClass = computed(() => bem("rp-tooltip", {
@@ -143,7 +162,7 @@ function useTooltip(props, emitOpenChange) {
 	const contentAriaHidden = computed(() => isDecorative.value ? "true" : void 0);
 	const contentStyle = computed(() => ({
 		...floating.floatingStyle.value,
-		...resolveTooltipOffsetStyle(props.offset),
+		...getFloatingOffsetStyle(props.offset, TOOLTIP_OFFSET_PROPERTIES),
 		...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast, props.contrastColor),
 		zIndex: zIndex.value
 	}));
@@ -159,37 +178,14 @@ function useTooltip(props, emitOpenChange) {
 	watch(isDisabled, (disabled) => {
 		if (disabled) closeTooltip();
 	});
-	watch([isExplicitTarget, targetElement], ([explicit, target], _previous, onCleanup) => {
-		if (!explicit || !target) return;
-		target.addEventListener("mouseenter", openTooltip);
-		target.addEventListener("mouseleave", closeTooltip);
-		target.addEventListener("focusin", openTooltip);
-		target.addEventListener("focusout", closeTooltip);
-		target.addEventListener("keydown", onKeydown);
-		onCleanup(() => {
-			target.removeEventListener("mouseenter", openTooltip);
-			target.removeEventListener("mouseleave", closeTooltip);
-			target.removeEventListener("focusin", openTooltip);
-			target.removeEventListener("focusout", closeTooltip);
-			target.removeEventListener("keydown", onKeydown);
-		});
-	}, { flush: "sync" });
-	watch([
-		isExplicitTarget,
-		targetElement,
+	useTooltipTargetBindings({
+		targetLifecycle,
 		shouldDescribeContent,
-		tooltipId
-	], ([explicit, target, shouldDescribe, id], _previous, onCleanup) => {
-		if (!explicit || !target || !shouldDescribe) return;
-		const previous = target.getAttribute("aria-describedby");
-		const ids = (previous ?? "").split(/\s+/).filter(Boolean);
-		if (!ids.includes(id)) ids.push(id);
-		target.setAttribute("aria-describedby", ids.join(" "));
-		onCleanup(() => {
-			if (previous == null) target.removeAttribute("aria-describedby");
-			else target.setAttribute("aria-describedby", previous);
-		});
-	}, { flush: "sync" });
+		tooltipId,
+		openTooltip,
+		closeTooltip,
+		onKeydown
+	});
 	return {
 		rootRef,
 		contentRef,
@@ -216,10 +212,10 @@ function useTooltip(props, emitOpenChange) {
 }
 //#endregion
 //#region src/components/tooltip/tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-9457a843 class=rp-tooltip__arrow aria-hidden=true>");
+var t0 = template("<span data-v-19aad69c class=rp-tooltip__arrow aria-hidden=true>");
 var t1 = template(" ");
-var t2 = template("<span data-v-9457a843>");
-var t3 = template("<span data-v-9457a843>", 1);
+var t2 = template("<span data-v-19aad69c>");
+var t3 = template("<span data-v-19aad69c>", 1);
 //#endregion
 //#region src/components/tooltip/tooltip.vue
 var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -283,12 +279,17 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		const { rootRef, contentRef, arrowRef, tooltipId, isDisabled, isVisible, isTargetMode, shouldRenderContent, rootClass, triggerProps, contentRole, contentAriaHidden, contentStyle, actualPlacement, placementSide, arrowStyle, teleportTo, openTooltip, closeTooltip, onKeydown } = useTooltip(props, (open) => {
 			emit("update:open", open);
 		});
+		const templateRefs = {
+			root: rootRef,
+			content: contentRef,
+			arrow: arrowRef
+		};
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const state = computed(() => isVisible.value ? "open" : "closed");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			"data-state": state.value,
-			"data-disabled": presence(isDisabled.value),
+			"data-disabled": toPresenceAttribute(isDisabled.value),
 			onMouseenter: openTooltip,
 			onMouseleave: closeTooltip,
 			onFocusin: openTooltip,
@@ -302,7 +303,7 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
 				...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
 				"data-state": state.value,
-				"data-disabled": presence(isDisabled.value)
+				"data-disabled": toPresenceAttribute(isDisabled.value)
 			};
 		});
 		const contentAttrs = computed(() => ({
@@ -340,10 +341,10 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 					setInsertionState(n11, null, 0);
 					createIf(() => __props.arrow, () => {
 						const n7 = t0();
-						_setTemplateRef(n7, arrowRef, null, "arrowRef");
 						renderEffect(() => {
 							setAttr(n7, "data-side", unref(placementSide));
 							setStyle(n7, unref(arrowStyle));
+							_setTemplateRef(n7, templateRefs.arrow);
 						});
 						return n7;
 					});
@@ -354,14 +355,14 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 						return n10;
 					}, 1);
 					applyVShow(n11, () => unref(isVisible));
-					_setTemplateRef(n11, contentRef, null, "contentRef");
+					setTemplateRefBinding(n11, () => templateRefs.content, _setTemplateRef);
 					return n11;
 				}, null, 129);
 			}, { _: 8 }));
 		});
-		setStaticTemplateRef(n14, rootRef, null, "rootRef");
+		setTemplateRefBinding(n14, () => templateRefs.root);
 		return n14;
 	}
-}), [["__scopeId", "data-v-9457a843"]]);
+}), [["__scopeId", "data-v-19aad69c"]]);
 //#endregion
-export { useDelayedOpen as i, resolveTooltipColorStyleWithContrast as n, resolveTooltipOffsetStyle as r, tooltip_default as t };
+export { resolveTooltipColorStyleWithContrast as n, useDelayedOpen as r, tooltip_default as t };

package/dist/useCollapse.js

@@ -3,15 +3,12 @@ import { t as bem } from "./bem.js";
 import { computed, toValue, useId } from "vue";
 //#region src/components/collapse/useCollapse.ts
 var DEFAULT_ROLE = "region";
-function optionValue(value) {
-	return toValue(value);
-}
 function useCollapse(options = {}, emitOpenChange) {
 	const generatedId = useId();
-	const id = computed(() => optionValue(options.id) ?? `${generatedId}-collapse`);
-	const isDisabled = computed(() => Boolean(optionValue(options.disabled)));
+	const id = computed(() => toValue(options.id) ?? `${generatedId}-collapse`);
+	const isDisabled = computed(() => Boolean(toValue(options.disabled)));
 	const controllableOpen = useControllableValue({
-		modelValue: () => optionValue(options.open),
+		modelValue: () => toValue(options.open),
 		defaultValue: () => false,
 		onChange: (nextOpen) => {
 			options.onOpenChange?.(nextOpen);
@@ -20,7 +17,7 @@ function useCollapse(options = {}, emitOpenChange) {
 	});
 	const isOpen = controllableOpen.value;
 	const state = computed(() => isOpen.value ? "open" : "closed");
-	const shouldRenderContent = computed(() => !optionValue(options.unmountOnExit) || isOpen.value);
+	const shouldRenderContent = computed(() => !toValue(options.unmountOnExit) || isOpen.value);
 	const rootClass = computed(() => bem("rp-collapse", {
 		open: isOpen.value,
 		closed: !isOpen.value,
@@ -48,12 +45,12 @@ function useCollapse(options = {}, emitOpenChange) {
 	const contentProps = computed(() => ({
 		class: "rp-collapse__content",
 		id: id.value,
-		role: optionValue(options.role) ?? DEFAULT_ROLE,
+		role: toValue(options.role) ?? DEFAULT_ROLE,
 		"data-state": state.value,
 		"aria-hidden": isOpen.value ? void 0 : "true",
-		"aria-label": optionValue(options.ariaLabel) || void 0,
-		"aria-labelledby": optionValue(options.ariaLabelledby) || void 0,
-		"aria-describedby": optionValue(options.ariaDescribedby) || void 0
+		"aria-label": toValue(options.ariaLabel) || void 0,
+		"aria-labelledby": toValue(options.ariaLabelledby) || void 0,
+		"aria-describedby": toValue(options.ariaDescribedby) || void 0
 	}));
 	const triggerSlotProps = computed(() => ({
 		triggerProps: triggerProps.value,

package/dist/useControlState.js

@@ -1,9 +1,6 @@
+import { n as mergeAriaIdRefs } from "./aria.js";
 import { computed } from "vue";
 //#region src/internal/composables/useControlState.ts
-function mergeIds(...values) {
-	const ids = values.flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean);
-	return ids.length > 0 ? Array.from(new Set(ids)).join(" ") : void 0;
-}
 function useControlState(options = {}) {
 	const id = computed(() => options.id);
 	const form = computed(() => options.form);
@@ -11,8 +8,8 @@ function useControlState(options = {}) {
 	const required = computed(() => options.required ?? false);
 	const invalid = computed(() => options.invalid ?? false);
 	const valid = computed(() => options.valid ?? false);
-	const ariaDescribedby = computed(() => mergeIds(options.describedby));
-	const ariaLabelledby = computed(() => mergeIds(options.labelledby));
+	const ariaDescribedby = computed(() => mergeAriaIdRefs(options.describedby));
+	const ariaLabelledby = computed(() => mergeAriaIdRefs(options.labelledby));
 	return {
 		get id() {
 			return id.value;

package/dist/useEditableOptionList.js

@@ -0,0 +1,216 @@
+import { i as isNodeWithinElement } from "./events.js";
+import { t as isInteractiveElement } from "./interactive.js";
+import { n as useClickOutside, t as useFlatOptionCollection } from "./useFlatOptionCollection.js";
+import { computed, nextTick, ref, watch } from "vue";
+//#region src/utils/optionFilter.ts
+function defaultOptionFilter(option, searchValue) {
+	return option.label.toLocaleLowerCase().includes(searchValue.trim().toLocaleLowerCase());
+}
+function filterOptions(options, searchValue, filter) {
+	const availableOptions = options ?? [];
+	if (filter === false || searchValue.trim() === "") return [...availableOptions];
+	const predicate = filter ?? defaultOptionFilter;
+	return availableOptions.filter((option) => predicate(option, searchValue));
+}
+//#endregion
+//#region src/internal/composables/useEditableOptionList.ts
+function useEditableOptionList(options) {
+	const selection = options.selection;
+	const isSingle = selection.kind === "single";
+	const isOpen = ref(false);
+	const isSearching = ref(false);
+	const popupId = `${options.baseId}-popup`;
+	const searchValue = ref(isSingle ? selection.displayValue() : "");
+	const filterValue = computed(() => isSingle && !isSearching.value ? "" : searchValue.value);
+	const visibleOptions = computed(() => filterOptions(options.items(), filterValue.value, options.filter()));
+	const optionCollection = useFlatOptionCollection({
+		items: () => visibleOptions.value,
+		baseId: options.baseId,
+		isOpen: () => isOpen.value,
+		collectionRef: options.rootRef,
+		getKey: options.getKey,
+		isDisabled: options.isDisabled,
+		isSelected: selection.isSelected
+	});
+	const itemsSnapshot = computed(() => visibleOptions.value.map((option) => [options.getKey(option), options.isDisabled(option)]));
+	const canClear = computed(() => options.clearable() && !options.disabled() && (selection.hasSelection() || isSingle && searchValue.value !== ""));
+	function setInputValue(value) {
+		searchValue.value = value;
+		if (options.inputRef.value && options.inputRef.value.value !== value) options.inputRef.value.value = value;
+	}
+	function syncInputToSelection() {
+		if (selection.kind !== "single") return;
+		isSearching.value = false;
+		setInputValue(selection.displayValue());
+	}
+	function resetQuery() {
+		if (searchValue.value === "") return;
+		setInputValue("");
+		options.onSearch("");
+	}
+	function focusInput() {
+		nextTick(() => options.inputRef.value?.focus());
+	}
+	function open() {
+		if (options.disabled() || isOpen.value) return;
+		isOpen.value = true;
+		syncInputToSelection();
+		optionCollection.activate("selected");
+	}
+	function close(restoreInput = true) {
+		isOpen.value = false;
+		optionCollection.reset();
+		if (restoreInput) syncInputToSelection();
+	}
+	function toggle() {
+		if (options.disabled()) return;
+		const wasOpen = isOpen.value;
+		if (wasOpen) close();
+		else open();
+		if (!wasOpen || selection.kind === "multiple") focusInput();
+	}
+	function restoreRejectedSingleSelection(option) {
+		if (selection.kind !== "single") return;
+		queueMicrotask(() => {
+			if (!(option ? selection.isSelected(option) : !selection.hasSelection()) && !isOpen.value) syncInputToSelection();
+		});
+	}
+	function selectOption(option) {
+		if (options.isDisabled(option)) return;
+		selection.select(option);
+		if (selection.kind === "single") {
+			isSearching.value = false;
+			setInputValue(option.label);
+			close(false);
+			restoreRejectedSingleSelection(option);
+		} else {
+			resetQuery();
+			optionCollection.activate(option);
+		}
+		focusInput();
+	}
+	function clearSelection() {
+		if (!canClear.value) return;
+		if (selection.kind === "single") {
+			isSearching.value = false;
+			setInputValue("");
+			options.onSearch("");
+			selection.clear();
+			close(false);
+			restoreRejectedSingleSelection();
+		} else {
+			selection.clear();
+			resetQuery();
+		}
+		focusInput();
+	}
+	function resetAfterFormReset() {
+		close();
+		if (selection.kind === "multiple") resetQuery();
+	}
+	function onOptionMouseenter(option) {
+		optionCollection.activate(option);
+	}
+	function onRootMousedown(event) {
+		if (selection.kind !== "multiple" || options.disabled()) return;
+		if (!isNodeWithinElement(event.target, options.inputRef.value) && isInteractiveElement(event.target)) return;
+		open();
+		options.inputRef.value?.focus();
+	}
+	function onFocusout(event) {
+		if (isNodeWithinElement(event.relatedTarget, options.rootRef.value)) return;
+		close();
+	}
+	function onInput(event) {
+		if (options.disabled()) return;
+		const value = event.currentTarget.value;
+		searchValue.value = value;
+		isSearching.value = true;
+		options.onSearch(value);
+		if (!isOpen.value) isOpen.value = true;
+		optionCollection.activate("first");
+	}
+	function onInputFocus() {
+		open();
+	}
+	function onInputClick() {
+		open();
+	}
+	function selectHighlightedOption() {
+		const option = visibleOptions.value[optionCollection.activeIndex.value];
+		if (option) selectOption(option);
+	}
+	function onInputKeydown(event) {
+		if (options.disabled() || event.isComposing) return;
+		switch (event.key) {
+			case "Enter":
+				if (!isOpen.value || selection.kind === "multiple" && optionCollection.activeIndex.value < 0) return;
+				event.preventDefault();
+				selectHighlightedOption();
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				if (!isOpen.value) open();
+				else optionCollection.move(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				if (!isOpen.value) {
+					open();
+					optionCollection.activate("last");
+				} else optionCollection.move(-1);
+				break;
+			case "Backspace":
+				if (selection.kind === "multiple" && searchValue.value === "") selection.removeLast();
+				break;
+			case "Escape":
+				if (!isOpen.value) return;
+				event.preventDefault();
+				close();
+				break;
+		}
+	}
+	watch(itemsSnapshot, () => {
+		if (!isOpen.value || optionCollection.activeIndex.value >= 0) return;
+		if (selection.kind === "multiple" || isSearching.value) optionCollection.activate("first");
+	});
+	if (selection.kind === "single") watch(selection.displayValue, (value) => {
+		if (!isSearching.value) setInputValue(value);
+	});
+	watch(options.disabled, (disabled) => {
+		if (disabled) close();
+	});
+	useClickOutside(options.rootRef, isOpen, () => close());
+	return {
+		actions: {
+			clearSelection,
+			focusInput,
+			resetAfterFormReset,
+			selectOption,
+			toggle
+		},
+		handlers: {
+			onFocusout,
+			onInput,
+			onInputClick,
+			onInputFocus,
+			onInputKeydown,
+			onOptionMouseenter,
+			onRootMousedown
+		},
+		ids: {
+			listbox: `${popupId}-viewport`,
+			popup: popupId
+		},
+		state: {
+			activeDescendantId: optionCollection.activeDescendantId,
+			canClear,
+			isOpen,
+			renderedOptions: optionCollection.options,
+			searchValue,
+			visibleOptions
+		}
+	};
+}
+//#endregion
+export { useEditableOptionList as t };

package/dist/useFlatOptionCollection.js

@@ -0,0 +1,134 @@
+import { n as getNextEnabledIndex, t as getEnabledIndexes } from "./collectionNavigation.js";
+import { n as isEventWithinElement } from "./events.js";
+import { computed, defineVaporComponent, markRaw, onBeforeUnmount, onMounted, shallowRef, template, watch } from "vue";
+//#region ~icons/lucide/chevrons-up-down
+var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
+function render(_ctx) {
+	return t0();
+}
+var chevrons_up_down_default = markRaw(defineVaporComponent({
+	name: "lucide-chevrons-up-down",
+	render
+}));
+//#endregion
+//#region src/internal/composables/useClickOutside.ts
+function useClickOutside(target, active, callback) {
+	const targets = Array.isArray(target) ? target : [target];
+	const listeningDocuments = /* @__PURE__ */ new Set();
+	let stopWatch;
+	function handler(event) {
+		if (!targets.some((current) => {
+			const element = current.value;
+			return element ? isEventWithinElement(event, element) : false;
+		})) callback(event);
+	}
+	function detachListeners() {
+		for (const document of listeningDocuments) document.removeEventListener("click", handler, true);
+		listeningDocuments.clear();
+	}
+	function syncListeners() {
+		detachListeners();
+		if (!active.value) return;
+		for (const current of targets) {
+			const document = current.value?.ownerDocument;
+			if (!document || listeningDocuments.has(document)) continue;
+			document.addEventListener("click", handler, true);
+			listeningDocuments.add(document);
+		}
+	}
+	onMounted(() => {
+		stopWatch = watch([active, ...targets], syncListeners, { immediate: true });
+	});
+	onBeforeUnmount(() => {
+		stopWatch?.();
+		detachListeners();
+	});
+}
+//#endregion
+//#region src/internal/composables/useFlatOptionCollection.ts
+function findActiveDescendant(collection, id) {
+	const documentMatch = collection.ownerDocument.getElementById(id);
+	if (documentMatch && collection.contains(documentMatch)) return documentMatch;
+	return [...collection.querySelectorAll("[id]")].find((element) => element.id === id);
+}
+function useFlatOptionCollection(options) {
+	const activeKey = shallowRef(null);
+	const isDisabled = options.isDisabled ?? (() => false);
+	const isSelected = options.isSelected ?? (() => false);
+	const loop = options.loop ?? true;
+	const activeIndex = computed(() => {
+		if (activeKey.value == null) return -1;
+		return options.items().findIndex((item) => options.getKey(item) === activeKey.value && !isDisabled(item));
+	});
+	const enabledIndexes = computed(() => getEnabledIndexes(options.items(), isDisabled));
+	const optionStates = computed(() => options.items().map((option, index) => ({
+		option,
+		id: `${options.baseId}-option-${index}`,
+		active: index === activeIndex.value,
+		disabled: isDisabled(option),
+		selected: isSelected(option)
+	})));
+	const activeDescendantId = computed(() => {
+		if (!options.isOpen()) return void 0;
+		return optionStates.value[activeIndex.value]?.id;
+	});
+	function reset() {
+		activeKey.value = null;
+	}
+	function activateIndex(index) {
+		const item = options.items()[index];
+		if (!item || isDisabled(item)) return;
+		activeKey.value = options.getKey(item);
+	}
+	function activate(target) {
+		if (target === "first") {
+			const first = enabledIndexes.value[0];
+			if (first === void 0) reset();
+			else activateIndex(first);
+			return;
+		}
+		if (target === "last") {
+			const indexes = enabledIndexes.value;
+			const last = indexes[indexes.length - 1];
+			if (last === void 0) reset();
+			else activateIndex(last);
+			return;
+		}
+		if (target === "selected") {
+			const selectedIndex = options.items().findIndex((item) => isSelected(item) && !isDisabled(item));
+			if (selectedIndex >= 0) activateIndex(selectedIndex);
+			else activate("first");
+			return;
+		}
+		if (!isDisabled(target)) activeKey.value = options.getKey(target);
+	}
+	function move(direction) {
+		if (activeIndex.value < 0) {
+			activate(direction === 1 ? "first" : "last");
+			return;
+		}
+		const nextIndex = getNextEnabledIndex(options.items(), activeIndex.value, direction, isDisabled, loop);
+		if (nextIndex === void 0) reset();
+		else activateIndex(nextIndex);
+	}
+	watch(activeIndex, (index) => {
+		if (activeKey.value != null && index < 0) reset();
+	}, { flush: "sync" });
+	watch([activeDescendantId, options.collectionRef], ([id, collection]) => {
+		if (!id || !collection) return;
+		findActiveDescendant(collection, id)?.scrollIntoView?.({ block: "nearest" });
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	return {
+		options: optionStates,
+		activeIndex,
+		activeDescendantId,
+		activate,
+		move,
+		reset
+	};
+}
+//#endregion
+export { useClickOutside as n, chevrons_up_down_default as r, useFlatOptionCollection as t };