@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/composables/useSelectionGroup.cjs

@@ -0,0 +1,323 @@
+let vue = require("vue");
+//#region src/composables/useSelectionGroup.ts
+var ESelectionMode = /* @__PURE__ */ function(ESelectionMode) {
+	ESelectionMode["SINGLE"] = "single";
+	ESelectionMode["MULTIPLE"] = "multiple";
+	ESelectionMode["NONE"] = "none";
+	return ESelectionMode;
+}({});
+var ESelectionOrientation = /* @__PURE__ */ function(ESelectionOrientation) {
+	ESelectionOrientation["HORIZONTAL"] = "horizontal";
+	ESelectionOrientation["VERTICAL"] = "vertical";
+	return ESelectionOrientation;
+}({});
+var ESelectionFocusMode = /* @__PURE__ */ function(ESelectionFocusMode) {
+	ESelectionFocusMode["DOM"] = "dom";
+	ESelectionFocusMode["ACTIVE_DESCENDANT"] = "activedescendant";
+	return ESelectionFocusMode;
+}({});
+var SELECTION_ACTIVATION_KEYS = [
+	"Enter",
+	" ",
+	"Spacebar"
+];
+var resolveOwnPropOrGroupedOrFallback = (ownValue, groupedValue, fallback) => {
+	if (ownValue !== void 0) return ownValue;
+	if (groupedValue !== void 0) return groupedValue;
+	return fallback;
+};
+var isSingleSelectionValue = (next) => next !== void 0 && next !== null && !Array.isArray(next);
+var resolveDomElement = (source) => {
+	if (!source) return null;
+	if (source instanceof HTMLElement) return source;
+	const root = source.$el;
+	return root instanceof HTMLElement ? root : null;
+};
+var useSelectionGroup = ({ modelValue, onUpdateModelValue, mode, mandatory, orientation, loop, enableTabNavigation, orderedValues, isValueDisabled, focusMode, onBeforeFocusItem, onFocusGroup, compareValues }) => {
+	const isSameValue = (a, b) => {
+		if (compareValues) return compareValues(a, b);
+		return Object.is(a, b);
+	};
+	const modeRef = (0, vue.computed)(() => (0, vue.toValue)(mode) ?? "single");
+	const mandatoryRef = (0, vue.computed)(() => (0, vue.toValue)(mandatory) ?? false);
+	const orientationRef = (0, vue.computed)(() => (0, vue.toValue)(orientation) ?? "horizontal");
+	const loopRef = (0, vue.computed)(() => (0, vue.toValue)(loop) ?? true);
+	const tabNavigationEnabledRef = (0, vue.computed)(() => (0, vue.toValue)(enableTabNavigation) ?? false);
+	const focusModeRef = (0, vue.computed)(() => (0, vue.toValue)(focusMode) ?? "dom");
+	const usesActiveDescendantFocusRef = (0, vue.computed)(() => {
+		return focusModeRef.value === "activedescendant";
+	});
+	const selectedValues = (0, vue.computed)(() => {
+		const raw = (0, vue.toValue)(modelValue);
+		if (raw === void 0 || raw === null) return [];
+		if (Array.isArray(raw)) return raw;
+		return [raw];
+	});
+	const items = (0, vue.shallowReactive)([]);
+	const focusedValue = (0, vue.ref)(void 0);
+	const isSelected = (value) => {
+		return selectedValues.value.some((selected) => isSameValue(selected, value));
+	};
+	const isItemDisabled = (item) => {
+		return Boolean((0, vue.toValue)(item.disabled));
+	};
+	const emitUpdate = (next) => {
+		if (onUpdateModelValue) onUpdateModelValue(next);
+	};
+	const select = (value, updateFocus = true) => {
+		const currentMode = modeRef.value;
+		if (currentMode === "none") return;
+		if (currentMode === "single") {
+			if (isSelected(value)) return;
+			emitUpdate(value);
+			if (updateFocus) focusedValue.value = value;
+			return;
+		}
+		if (isSelected(value)) return;
+		emitUpdate([...selectedValues.value, value]);
+	};
+	const toggleSingleSelection = (value, updateFocus) => {
+		if (isSelected(value)) {
+			if (mandatoryRef.value) return;
+			emitUpdate(void 0);
+			return;
+		}
+		emitUpdate(value);
+		if (updateFocus) focusedValue.value = value;
+	};
+	const toggleMultipleSelection = (value) => {
+		if (isSelected(value)) {
+			const next = selectedValues.value.filter((selected) => !isSameValue(selected, value));
+			if (mandatoryRef.value && next.length === 0) return;
+			emitUpdate(next);
+			return;
+		}
+		emitUpdate([...selectedValues.value, value]);
+	};
+	const toggle = (value, updateFocus = true) => {
+		const currentMode = modeRef.value;
+		if (currentMode === "none") return;
+		if (currentMode === "single") {
+			toggleSingleSelection(value, updateFocus);
+			return;
+		}
+		toggleMultipleSelection(value);
+	};
+	const clear = () => {
+		const currentMode = modeRef.value;
+		if (currentMode === "none") return;
+		if (currentMode === "single") {
+			if (mandatoryRef.value) return;
+			emitUpdate(void 0);
+			return;
+		}
+		if (mandatoryRef.value) return;
+		emitUpdate([]);
+	};
+	const registeredEnabledItems = () => {
+		return items.filter((item) => !isItemDisabled(item));
+	};
+	const orderedValuesRef = (0, vue.computed)(() => {
+		const order = (0, vue.toValue)(orderedValues);
+		if (!order || order.length === 0) return null;
+		return order;
+	});
+	const orderedValueIndexMapRef = (0, vue.computed)(() => {
+		const order = orderedValuesRef.value;
+		if (!order) return null;
+		const indexMap = /* @__PURE__ */ new Map();
+		for (let index = 0; index < order.length; index += 1) {
+			const orderedValue = order[index];
+			if (orderedValue !== void 0) indexMap.set(orderedValue, index);
+		}
+		return indexMap;
+	});
+	const findRegisteredItemByValue = (value) => {
+		return items.find((item) => isSameValue((0, vue.toValue)(item.value), value));
+	};
+	const isNavigableValueDisabled = (value) => {
+		if (isValueDisabled) return isValueDisabled(value);
+		const registeredItem = findRegisteredItemByValue(value);
+		if (!registeredItem) return false;
+		return isItemDisabled(registeredItem);
+	};
+	const resolveNavigableIndex = (value) => {
+		const indexMap = orderedValueIndexMapRef.value;
+		if (indexMap) return indexMap.get(value) ?? -1;
+		return registeredEnabledItems().findIndex((item) => isSameValue((0, vue.toValue)(item.value), value));
+	};
+	const resolveNavigableCount = () => {
+		const order = orderedValuesRef.value;
+		if (order) return order.length;
+		return registeredEnabledItems().length;
+	};
+	const resolveNavigableValueAtIndex = (targetIndex) => {
+		const order = orderedValuesRef.value;
+		if (order) return order[targetIndex];
+		const enabledItem = registeredEnabledItems()[targetIndex];
+		if (!enabledItem) return;
+		return (0, vue.toValue)(enabledItem.value);
+	};
+	const findNavigableValueFrom = (startIndex, direction, navigableCount) => {
+		let index = startIndex;
+		while (index >= 0 && index < navigableCount) {
+			const candidateValue = resolveNavigableValueAtIndex(index);
+			if (candidateValue !== void 0 && !isNavigableValueDisabled(candidateValue)) return candidateValue;
+			index += direction;
+		}
+	};
+	const resolveAdjacentNavigableValue = (currentValue, direction, allowLoop = true) => {
+		const navigableCount = resolveNavigableCount();
+		if (navigableCount === 0) return;
+		const currentIndex = resolveNavigableIndex(currentValue);
+		const adjacentValue = findNavigableValueFrom((currentIndex === -1 ? direction === 1 ? -1 : navigableCount : currentIndex) + direction, direction, navigableCount);
+		if (adjacentValue !== void 0) return adjacentValue;
+		if (!allowLoop) return;
+		return findNavigableValueFrom(direction === 1 ? 0 : navigableCount - 1, direction, navigableCount);
+	};
+	const resolveBoundaryNavigableValue = (position) => {
+		const navigableCount = resolveNavigableCount();
+		if (navigableCount === 0) return;
+		return position === "start" ? findNavigableValueFrom(0, 1, navigableCount) : findNavigableValueFrom(navigableCount - 1, -1, navigableCount);
+	};
+	const resolveFirstRegisteredTabbableValue = () => {
+		const registeredItems = registeredEnabledItems();
+		if (registeredItems.length === 0) return;
+		const indexMap = orderedValueIndexMapRef.value;
+		if (!indexMap) {
+			const firstRegisteredItem = registeredItems[0];
+			if (!firstRegisteredItem) return;
+			return (0, vue.toValue)(firstRegisteredItem.value);
+		}
+		let firstTabbableValue;
+		let lowestIndex = Number.POSITIVE_INFINITY;
+		for (const registeredItem of registeredItems) {
+			const registeredValue = (0, vue.toValue)(registeredItem.value);
+			const registeredIndex = indexMap.get(registeredValue);
+			if (registeredIndex !== void 0 && registeredIndex < lowestIndex) {
+				lowestIndex = registeredIndex;
+				firstTabbableValue = registeredValue;
+			}
+		}
+		return firstTabbableValue;
+	};
+	const getItemTabIndex = (value) => {
+		if (usesActiveDescendantFocusRef.value) return -1;
+		const focused = focusedValue.value;
+		if (focused !== void 0) return isSameValue(focused, value) ? 0 : -1;
+		for (const selectedValue of selectedValues.value) if (isSameValue(selectedValue, value)) return 0;
+		const firstTabbableValue = resolveFirstRegisteredTabbableValue();
+		if (!firstTabbableValue) return -1;
+		return isSameValue(firstTabbableValue, value) ? 0 : -1;
+	};
+	const getGroupTabIndex = () => {
+		if (!usesActiveDescendantFocusRef.value) return -1;
+		if (resolveNavigableCount() === 0) return -1;
+		return 0;
+	};
+	const resolveRegisteredDomElement = (value) => {
+		const registeredItem = findRegisteredItemByValue(value);
+		if (!registeredItem) return null;
+		return resolveDomElement((0, vue.toValue)(registeredItem.el));
+	};
+	const focusItemByValue = async (value, updateSelection = true) => {
+		focusedValue.value = value;
+		if (onBeforeFocusItem) await onBeforeFocusItem(value);
+		if (usesActiveDescendantFocusRef.value) {
+			if (onFocusGroup) onFocusGroup();
+		} else {
+			let dom = resolveRegisteredDomElement(value);
+			if (!dom) {
+				await (0, vue.nextTick)();
+				dom = resolveRegisteredDomElement(value);
+			}
+			if (dom) dom.focus({ preventScroll: true });
+		}
+		if (updateSelection && modeRef.value === "single") select(value);
+	};
+	const moveFocus = async (currentValue, direction, updateSelection = true, allowLoop = true) => {
+		const nextValue = resolveAdjacentNavigableValue(currentValue, direction, allowLoop && loopRef.value);
+		if (!nextValue) {
+			if (resolveNavigableIndex(currentValue) === -1) {
+				const boundaryValue = direction === 1 ? resolveBoundaryNavigableValue("start") : resolveBoundaryNavigableValue("end");
+				if (boundaryValue) await focusItemByValue(boundaryValue, updateSelection);
+			}
+			return;
+		}
+		await focusItemByValue(nextValue, updateSelection);
+	};
+	const handleTabNavigation = async (event, value) => {
+		if (resolveNavigableIndex(value) === -1) return;
+		const adjacentValue = resolveAdjacentNavigableValue(value, event.shiftKey ? -1 : 1, false);
+		if (adjacentValue) {
+			event.preventDefault();
+			await focusItemByValue(adjacentValue, false);
+		}
+	};
+	const focusBoundaryItem = async (edge) => {
+		const boundaryValue = resolveBoundaryNavigableValue(edge);
+		if (boundaryValue) await focusItemByValue(boundaryValue, false);
+	};
+	const handleItemKeydown = async (event, value) => {
+		if (tabNavigationEnabledRef.value && event.key === "Tab") {
+			await handleTabNavigation(event, value);
+			return;
+		}
+		const isHorizontal = orientationRef.value === "horizontal";
+		const navigationAction = {
+			[isHorizontal ? "ArrowRight" : "ArrowDown"]: () => moveFocus(value, 1, false),
+			[isHorizontal ? "ArrowLeft" : "ArrowUp"]: () => moveFocus(value, -1, false),
+			Home: () => focusBoundaryItem("start"),
+			End: () => focusBoundaryItem("end")
+		}[event.key];
+		if (navigationAction) {
+			event.preventDefault();
+			await navigationAction();
+			return;
+		}
+		if (SELECTION_ACTIVATION_KEYS.includes(event.key)) {
+			event.preventDefault();
+			if (modeRef.value === "none") {
+				resolveRegisteredDomElement(value)?.click();
+				return;
+			}
+			toggle(value);
+		}
+	};
+	const registerItem = (item) => {
+		const internal = {
+			value: item.value,
+			el: item.el,
+			disabled: item.disabled
+		};
+		items.push(internal);
+		const unregister = () => {
+			const index = items.indexOf(internal);
+			if (index !== -1) items.splice(index, 1);
+			const focused = focusedValue.value;
+			if (focused !== void 0 && isSameValue((0, vue.toValue)(internal.value), focused)) focusedValue.value = void 0;
+		};
+		(0, vue.onScopeDispose)(unregister, true);
+		return unregister;
+	};
+	return {
+		selectedValues,
+		isSelected,
+		select,
+		toggle,
+		clear,
+		registerItem,
+		getItemTabIndex,
+		getGroupTabIndex,
+		handleItemKeydown,
+		focusItem: focusItemByValue,
+		focusedValue
+	};
+};
+//#endregion
+exports.ESelectionFocusMode = ESelectionFocusMode;
+exports.ESelectionMode = ESelectionMode;
+exports.ESelectionOrientation = ESelectionOrientation;
+exports.isSingleSelectionValue = isSingleSelectionValue;
+exports.resolveOwnPropOrGroupedOrFallback = resolveOwnPropOrGroupedOrFallback;
+exports.useSelectionGroup = useSelectionGroup;

package/dist/composables/useSelectionGroup.js

@@ -0,0 +1,318 @@
+import { computed, nextTick, onScopeDispose, ref, shallowReactive, toValue } from "vue";
+//#region src/composables/useSelectionGroup.ts
+var ESelectionMode = /* @__PURE__ */ function(ESelectionMode) {
+	ESelectionMode["SINGLE"] = "single";
+	ESelectionMode["MULTIPLE"] = "multiple";
+	ESelectionMode["NONE"] = "none";
+	return ESelectionMode;
+}({});
+var ESelectionOrientation = /* @__PURE__ */ function(ESelectionOrientation) {
+	ESelectionOrientation["HORIZONTAL"] = "horizontal";
+	ESelectionOrientation["VERTICAL"] = "vertical";
+	return ESelectionOrientation;
+}({});
+var ESelectionFocusMode = /* @__PURE__ */ function(ESelectionFocusMode) {
+	ESelectionFocusMode["DOM"] = "dom";
+	ESelectionFocusMode["ACTIVE_DESCENDANT"] = "activedescendant";
+	return ESelectionFocusMode;
+}({});
+var SELECTION_ACTIVATION_KEYS = [
+	"Enter",
+	" ",
+	"Spacebar"
+];
+var resolveOwnPropOrGroupedOrFallback = (ownValue, groupedValue, fallback) => {
+	if (ownValue !== void 0) return ownValue;
+	if (groupedValue !== void 0) return groupedValue;
+	return fallback;
+};
+var isSingleSelectionValue = (next) => next !== void 0 && next !== null && !Array.isArray(next);
+var resolveDomElement = (source) => {
+	if (!source) return null;
+	if (source instanceof HTMLElement) return source;
+	const root = source.$el;
+	return root instanceof HTMLElement ? root : null;
+};
+var useSelectionGroup = ({ modelValue, onUpdateModelValue, mode, mandatory, orientation, loop, enableTabNavigation, orderedValues, isValueDisabled, focusMode, onBeforeFocusItem, onFocusGroup, compareValues }) => {
+	const isSameValue = (a, b) => {
+		if (compareValues) return compareValues(a, b);
+		return Object.is(a, b);
+	};
+	const modeRef = computed(() => toValue(mode) ?? "single");
+	const mandatoryRef = computed(() => toValue(mandatory) ?? false);
+	const orientationRef = computed(() => toValue(orientation) ?? "horizontal");
+	const loopRef = computed(() => toValue(loop) ?? true);
+	const tabNavigationEnabledRef = computed(() => toValue(enableTabNavigation) ?? false);
+	const focusModeRef = computed(() => toValue(focusMode) ?? "dom");
+	const usesActiveDescendantFocusRef = computed(() => {
+		return focusModeRef.value === "activedescendant";
+	});
+	const selectedValues = computed(() => {
+		const raw = toValue(modelValue);
+		if (raw === void 0 || raw === null) return [];
+		if (Array.isArray(raw)) return raw;
+		return [raw];
+	});
+	const items = shallowReactive([]);
+	const focusedValue = ref(void 0);
+	const isSelected = (value) => {
+		return selectedValues.value.some((selected) => isSameValue(selected, value));
+	};
+	const isItemDisabled = (item) => {
+		return Boolean(toValue(item.disabled));
+	};
+	const emitUpdate = (next) => {
+		if (onUpdateModelValue) onUpdateModelValue(next);
+	};
+	const select = (value, updateFocus = true) => {
+		const currentMode = modeRef.value;
+		if (currentMode === "none") return;
+		if (currentMode === "single") {
+			if (isSelected(value)) return;
+			emitUpdate(value);
+			if (updateFocus) focusedValue.value = value;
+			return;
+		}
+		if (isSelected(value)) return;
+		emitUpdate([...selectedValues.value, value]);
+	};
+	const toggleSingleSelection = (value, updateFocus) => {
+		if (isSelected(value)) {
+			if (mandatoryRef.value) return;
+			emitUpdate(void 0);
+			return;
+		}
+		emitUpdate(value);
+		if (updateFocus) focusedValue.value = value;
+	};
+	const toggleMultipleSelection = (value) => {
+		if (isSelected(value)) {
+			const next = selectedValues.value.filter((selected) => !isSameValue(selected, value));
+			if (mandatoryRef.value && next.length === 0) return;
+			emitUpdate(next);
+			return;
+		}
+		emitUpdate([...selectedValues.value, value]);
+	};
+	const toggle = (value, updateFocus = true) => {
+		const currentMode = modeRef.value;
+		if (currentMode === "none") return;
+		if (currentMode === "single") {
+			toggleSingleSelection(value, updateFocus);
+			return;
+		}
+		toggleMultipleSelection(value);
+	};
+	const clear = () => {
+		const currentMode = modeRef.value;
+		if (currentMode === "none") return;
+		if (currentMode === "single") {
+			if (mandatoryRef.value) return;
+			emitUpdate(void 0);
+			return;
+		}
+		if (mandatoryRef.value) return;
+		emitUpdate([]);
+	};
+	const registeredEnabledItems = () => {
+		return items.filter((item) => !isItemDisabled(item));
+	};
+	const orderedValuesRef = computed(() => {
+		const order = toValue(orderedValues);
+		if (!order || order.length === 0) return null;
+		return order;
+	});
+	const orderedValueIndexMapRef = computed(() => {
+		const order = orderedValuesRef.value;
+		if (!order) return null;
+		const indexMap = /* @__PURE__ */ new Map();
+		for (let index = 0; index < order.length; index += 1) {
+			const orderedValue = order[index];
+			if (orderedValue !== void 0) indexMap.set(orderedValue, index);
+		}
+		return indexMap;
+	});
+	const findRegisteredItemByValue = (value) => {
+		return items.find((item) => isSameValue(toValue(item.value), value));
+	};
+	const isNavigableValueDisabled = (value) => {
+		if (isValueDisabled) return isValueDisabled(value);
+		const registeredItem = findRegisteredItemByValue(value);
+		if (!registeredItem) return false;
+		return isItemDisabled(registeredItem);
+	};
+	const resolveNavigableIndex = (value) => {
+		const indexMap = orderedValueIndexMapRef.value;
+		if (indexMap) return indexMap.get(value) ?? -1;
+		return registeredEnabledItems().findIndex((item) => isSameValue(toValue(item.value), value));
+	};
+	const resolveNavigableCount = () => {
+		const order = orderedValuesRef.value;
+		if (order) return order.length;
+		return registeredEnabledItems().length;
+	};
+	const resolveNavigableValueAtIndex = (targetIndex) => {
+		const order = orderedValuesRef.value;
+		if (order) return order[targetIndex];
+		const enabledItem = registeredEnabledItems()[targetIndex];
+		if (!enabledItem) return;
+		return toValue(enabledItem.value);
+	};
+	const findNavigableValueFrom = (startIndex, direction, navigableCount) => {
+		let index = startIndex;
+		while (index >= 0 && index < navigableCount) {
+			const candidateValue = resolveNavigableValueAtIndex(index);
+			if (candidateValue !== void 0 && !isNavigableValueDisabled(candidateValue)) return candidateValue;
+			index += direction;
+		}
+	};
+	const resolveAdjacentNavigableValue = (currentValue, direction, allowLoop = true) => {
+		const navigableCount = resolveNavigableCount();
+		if (navigableCount === 0) return;
+		const currentIndex = resolveNavigableIndex(currentValue);
+		const adjacentValue = findNavigableValueFrom((currentIndex === -1 ? direction === 1 ? -1 : navigableCount : currentIndex) + direction, direction, navigableCount);
+		if (adjacentValue !== void 0) return adjacentValue;
+		if (!allowLoop) return;
+		return findNavigableValueFrom(direction === 1 ? 0 : navigableCount - 1, direction, navigableCount);
+	};
+	const resolveBoundaryNavigableValue = (position) => {
+		const navigableCount = resolveNavigableCount();
+		if (navigableCount === 0) return;
+		return position === "start" ? findNavigableValueFrom(0, 1, navigableCount) : findNavigableValueFrom(navigableCount - 1, -1, navigableCount);
+	};
+	const resolveFirstRegisteredTabbableValue = () => {
+		const registeredItems = registeredEnabledItems();
+		if (registeredItems.length === 0) return;
+		const indexMap = orderedValueIndexMapRef.value;
+		if (!indexMap) {
+			const firstRegisteredItem = registeredItems[0];
+			if (!firstRegisteredItem) return;
+			return toValue(firstRegisteredItem.value);
+		}
+		let firstTabbableValue;
+		let lowestIndex = Number.POSITIVE_INFINITY;
+		for (const registeredItem of registeredItems) {
+			const registeredValue = toValue(registeredItem.value);
+			const registeredIndex = indexMap.get(registeredValue);
+			if (registeredIndex !== void 0 && registeredIndex < lowestIndex) {
+				lowestIndex = registeredIndex;
+				firstTabbableValue = registeredValue;
+			}
+		}
+		return firstTabbableValue;
+	};
+	const getItemTabIndex = (value) => {
+		if (usesActiveDescendantFocusRef.value) return -1;
+		const focused = focusedValue.value;
+		if (focused !== void 0) return isSameValue(focused, value) ? 0 : -1;
+		for (const selectedValue of selectedValues.value) if (isSameValue(selectedValue, value)) return 0;
+		const firstTabbableValue = resolveFirstRegisteredTabbableValue();
+		if (!firstTabbableValue) return -1;
+		return isSameValue(firstTabbableValue, value) ? 0 : -1;
+	};
+	const getGroupTabIndex = () => {
+		if (!usesActiveDescendantFocusRef.value) return -1;
+		if (resolveNavigableCount() === 0) return -1;
+		return 0;
+	};
+	const resolveRegisteredDomElement = (value) => {
+		const registeredItem = findRegisteredItemByValue(value);
+		if (!registeredItem) return null;
+		return resolveDomElement(toValue(registeredItem.el));
+	};
+	const focusItemByValue = async (value, updateSelection = true) => {
+		focusedValue.value = value;
+		if (onBeforeFocusItem) await onBeforeFocusItem(value);
+		if (usesActiveDescendantFocusRef.value) {
+			if (onFocusGroup) onFocusGroup();
+		} else {
+			let dom = resolveRegisteredDomElement(value);
+			if (!dom) {
+				await nextTick();
+				dom = resolveRegisteredDomElement(value);
+			}
+			if (dom) dom.focus({ preventScroll: true });
+		}
+		if (updateSelection && modeRef.value === "single") select(value);
+	};
+	const moveFocus = async (currentValue, direction, updateSelection = true, allowLoop = true) => {
+		const nextValue = resolveAdjacentNavigableValue(currentValue, direction, allowLoop && loopRef.value);
+		if (!nextValue) {
+			if (resolveNavigableIndex(currentValue) === -1) {
+				const boundaryValue = direction === 1 ? resolveBoundaryNavigableValue("start") : resolveBoundaryNavigableValue("end");
+				if (boundaryValue) await focusItemByValue(boundaryValue, updateSelection);
+			}
+			return;
+		}
+		await focusItemByValue(nextValue, updateSelection);
+	};
+	const handleTabNavigation = async (event, value) => {
+		if (resolveNavigableIndex(value) === -1) return;
+		const adjacentValue = resolveAdjacentNavigableValue(value, event.shiftKey ? -1 : 1, false);
+		if (adjacentValue) {
+			event.preventDefault();
+			await focusItemByValue(adjacentValue, false);
+		}
+	};
+	const focusBoundaryItem = async (edge) => {
+		const boundaryValue = resolveBoundaryNavigableValue(edge);
+		if (boundaryValue) await focusItemByValue(boundaryValue, false);
+	};
+	const handleItemKeydown = async (event, value) => {
+		if (tabNavigationEnabledRef.value && event.key === "Tab") {
+			await handleTabNavigation(event, value);
+			return;
+		}
+		const isHorizontal = orientationRef.value === "horizontal";
+		const navigationAction = {
+			[isHorizontal ? "ArrowRight" : "ArrowDown"]: () => moveFocus(value, 1, false),
+			[isHorizontal ? "ArrowLeft" : "ArrowUp"]: () => moveFocus(value, -1, false),
+			Home: () => focusBoundaryItem("start"),
+			End: () => focusBoundaryItem("end")
+		}[event.key];
+		if (navigationAction) {
+			event.preventDefault();
+			await navigationAction();
+			return;
+		}
+		if (SELECTION_ACTIVATION_KEYS.includes(event.key)) {
+			event.preventDefault();
+			if (modeRef.value === "none") {
+				resolveRegisteredDomElement(value)?.click();
+				return;
+			}
+			toggle(value);
+		}
+	};
+	const registerItem = (item) => {
+		const internal = {
+			value: item.value,
+			el: item.el,
+			disabled: item.disabled
+		};
+		items.push(internal);
+		const unregister = () => {
+			const index = items.indexOf(internal);
+			if (index !== -1) items.splice(index, 1);
+			const focused = focusedValue.value;
+			if (focused !== void 0 && isSameValue(toValue(internal.value), focused)) focusedValue.value = void 0;
+		};
+		onScopeDispose(unregister, true);
+		return unregister;
+	};
+	return {
+		selectedValues,
+		isSelected,
+		select,
+		toggle,
+		clear,
+		registerItem,
+		getItemTabIndex,
+		getGroupTabIndex,
+		handleItemKeydown,
+		focusItem: focusItemByValue,
+		focusedValue
+	};
+};
+//#endregion
+export { ESelectionFocusMode, ESelectionMode, ESelectionOrientation, isSingleSelectionValue, resolveOwnPropOrGroupedOrFallback, useSelectionGroup };

package/dist/composables/useSelectionGroupItem.cjs

@@ -0,0 +1,62 @@
+const require_useSelectionGroup = require("./useSelectionGroup.cjs");
+let vue = require("vue");
+//#region src/composables/useSelectionGroupItem.ts
+var useSelectionGroupItem = ({ group, value, el, disabled, interactive }) => {
+	const itemValue = (0, vue.computed)(() => (0, vue.toValue)(value));
+	const itemDisabled = (0, vue.computed)(() => Boolean((0, vue.toValue)(disabled)));
+	const itemInteractive = (0, vue.computed)(() => (0, vue.toValue)(interactive) ?? true);
+	const resolvedGroup = (0, vue.computed)(() => (0, vue.toValue)(group));
+	const isInGroup = (0, vue.computed)(() => Boolean(resolvedGroup.value) && !!itemValue.value);
+	const isActive = (0, vue.computed)(() => {
+		if (!resolvedGroup.value || !itemValue.value) return false;
+		return resolvedGroup.value.isSelected(itemValue.value);
+	});
+	const ariaPressed = (0, vue.computed)(() => {
+		if (!isInGroup.value || !resolvedGroup.value) return;
+		if ((0, vue.toValue)(resolvedGroup.value.mode) !== require_useSelectionGroup.ESelectionMode.MULTIPLE) return;
+		return isActive.value ? "true" : "false";
+	});
+	const ariaChecked = (0, vue.computed)(() => {
+		if (!isInGroup.value || !resolvedGroup.value) return;
+		if ((0, vue.toValue)(resolvedGroup.value.mode) !== require_useSelectionGroup.ESelectionMode.SINGLE) return;
+		return isActive.value ? "true" : "false";
+	});
+	const tabIndex = (0, vue.computed)(() => {
+		if (!isInGroup.value || !resolvedGroup.value || !itemValue.value) return;
+		return resolvedGroup.value.getItemTabIndex(itemValue.value);
+	});
+	const handleClick = () => {
+		if (!itemInteractive.value) return;
+		if (!isInGroup.value || !resolvedGroup.value || !itemValue.value) return;
+		resolvedGroup.value.selectItem(itemValue.value);
+	};
+	const handleKeydown = (event) => {
+		if (!itemInteractive.value) return;
+		if (!isInGroup.value || !resolvedGroup.value || !itemValue.value) return;
+		resolvedGroup.value.handleItemKeydown(event, itemValue.value);
+	};
+	(0, vue.watch)(() => ({
+		inGroup: isInGroup.value,
+		val: itemValue.value,
+		ctx: resolvedGroup.value
+	}), (snapshot, _previous, onCleanup) => {
+		if (!snapshot.inGroup || !snapshot.val || !snapshot.ctx) return;
+		const registeredValue = snapshot.val;
+		onCleanup(snapshot.ctx.registerItem({
+			value: () => registeredValue,
+			el,
+			disabled: () => itemDisabled.value
+		}));
+	}, { immediate: true });
+	return {
+		isInGroup,
+		isActive,
+		ariaPressed,
+		ariaChecked,
+		tabIndex,
+		handleClick,
+		handleKeydown
+	};
+};
+//#endregion
+exports.useSelectionGroupItem = useSelectionGroupItem;