@feugene/granularity 0.42.0 → 0.44.0

package/dist/components/GrTransfer/chunks/GrTransfer-8FA78ny6.js

@@ -0,0 +1,1368 @@
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CPMRfwVr.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as usePortalTarget } from "../../../chunks/usePortalTarget-BhrRgdqW.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { i as normalizeOptionQuery, r as matchesQueryParts } from "../../../chunks/optionFilter-DYw9XPPx.js";
+import { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
+import { t as GrButton_default } from "../../GrButton/chunks/GrButton-CS4TqMtG.js";
+import { t as GrButtonGroup_default } from "../../GrButtonGroup/chunks/GrButtonGroup-CKyiAV8K.js";
+import { useAnnouncer } from "../../../composables/useAnnouncer.js";
+import { t as resolveScrollOverflow } from "../../../chunks/scrollOverflow-B_kEdcol.js";
+import { useDragGesture } from "../../../composables/useDragGesture.js";
+import { t as chevron_left_default } from "../../../chunks/chevron-left-D8AUBAM7.js";
+import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
+import { t as GrCheckbox_default } from "../../GrCheckbox/chunks/GrCheckbox-Dp201frb.js";
+import { t as GrInput_default } from "../../GrInput/chunks/GrInput-TFeBm3gQ.js";
+import { n as hitTest, t as autoScrollDelta } from "../../../chunks/dragSortGeometry-CY-llfrQ.js";
+import { C as transferTitleClass, S as transferStatusClass, _ as transferLabelClass, a as grTransferHeaderClass, b as transferReorderIconClass, c as grTransferPanelClass, d as transferActionIconClass, f as transferActionInertClass, g as transferGhostLabelClass, h as transferGhostCountClass, i as grTransferEmptyClass, l as grTransferReorderClass, m as transferGhostClass, o as grTransferMarkClass, p as transferCounterClass, r as grTransferActionsClass, s as grTransferOptionClass, u as grTransferSearchClass, v as transferListBase, x as transferRootBase, y as transferMarkIconClass } from "../../../chunks/config-DmED6aJV.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useSlots, watch, withCtx } from "vue";
+import '../styles.css';//#region src/components/GrTransfer/transferModel.ts
+/**
+* Ключи без дублей, первый выигрывает.
+*
+* Нормализация идёт **на чтение** и наружу сама по себе не эмитится: эмит из
+* рендера — источник петель обновления. Нормализованный вид уезжает потребителю
+* при первом же коммите.
+*/
+function normalizeKeys(keys) {
+	const seen = /* @__PURE__ */ new Set();
+	const next = [];
+	for (const key of keys) {
+		if (seen.has(key)) continue;
+		seen.add(key);
+		next.push(key);
+	}
+	return next;
+}
+/**
+* Раскладка каталога по панелям.
+*
+* `target` строится обходом **модели**, а не `items`: порядок правой панели
+* задаёт пользователь, и он же является значением. `source` — обходом `items`,
+* потому что порядок каталога принадлежит потребителю.
+*/
+function splitByModel(items, keyOf, model) {
+	const byKey = /* @__PURE__ */ new Map();
+	const duplicated = [];
+	for (const item of items) {
+		const key = keyOf(item);
+		if (byKey.has(key)) {
+			duplicated.push(key);
+			continue;
+		}
+		byKey.set(key, item);
+	}
+	const wanted = normalizeKeys(model);
+	const inTarget = new Set(wanted);
+	const target = [];
+	const unresolved = [];
+	for (const key of wanted) {
+		const item = byKey.get(key);
+		if (item === void 0) {
+			unresolved.push(key);
+			continue;
+		}
+		target.push(item);
+	}
+	return {
+		source: items.filter((item) => !inTarget.has(keyOf(item)) && byKey.get(keyOf(item)) === item),
+		target,
+		unresolved,
+		duplicated
+	};
+}
+/** Изъятие блока. Вход не мутируется. */
+function removeKeys(order, moving) {
+	const drop = new Set(moving);
+	return order.filter((key) => !drop.has(key));
+}
+/**
+* Вставка блока перед ключом `before`; `null` или ненайденный ключ — в конец.
+*
+* Цель выражена ключом, а не индексом, намеренно: индекс пришлось бы
+* пересчитывать после изъятия блока, и это ровно тот класс off-by-one, из-за
+* которого `insertionIndex` в `dragSortGeometry` носит поправку «элемент
+* временно вынут». Здесь поправка не нужна вовсе.
+*/
+function insertKeys(order, moving, before) {
+	const block = normalizeKeys(moving);
+	if (block.length === 0) return order.slice();
+	const rest = removeKeys(order, block);
+	const at = before === null ? -1 : rest.indexOf(before);
+	if (at < 0) return [...rest, ...block];
+	return [
+		...rest.slice(0, at),
+		...block,
+		...rest.slice(at)
+	];
+}
+/**
+* Куда встанет блок при сдвиге на шаг; `undefined` — двигаться некуда.
+*
+* Рассыпанное выделение при сдвиге схлопывается в непрерывный блок: это
+* предсказуемо и объяснимо, в отличие от попытки двигать каждый кусок
+* независимо.
+*/
+function stepTarget(order, moving, delta) {
+	const block = normalizeKeys(moving).filter((key) => order.includes(key));
+	if (block.length === 0) return void 0;
+	const rest = removeKeys(order, block);
+	const first = order.findIndex((key) => block.includes(key));
+	const before = order.slice(0, first).filter((key) => !block.includes(key)).length;
+	const next = Math.min(rest.length, Math.max(0, before + delta));
+	if (next === before) return void 0;
+	return rest[next] ?? null;
+}
+/** Крайняя позиция блока: `-1` — в начало, `1` — в конец. */
+function edgeTarget(order, moving, edge) {
+	const block = normalizeKeys(moving).filter((key) => order.includes(key));
+	if (block.length === 0) return void 0;
+	const rest = removeKeys(order, block);
+	if (edge === "end") return rest.length === 0 ? void 0 : null;
+	const first = rest[0];
+	return first === void 0 ? void 0 : first;
+}
+/**
+* Какая строка останется под фокусом после изъятия.
+*
+* Без этого фокус после переноса падает на тело документа, и клавиатурный
+* сценарий обрывается на первом же шаге — тот же довод, что у `drop()` в
+* `GrSortableList`.
+*/
+function keyAfterRemoval(visible, removed, focused) {
+	const drop = new Set(removed);
+	const rest = visible.filter((key) => !drop.has(key));
+	if (rest.length === 0) return void 0;
+	if (focused !== void 0 && !drop.has(focused)) return focused;
+	const from = focused === void 0 ? 0 : visible.indexOf(focused);
+	for (let index = from; index < visible.length; index += 1) {
+		const key = visible[index];
+		if (!drop.has(key)) return key;
+	}
+	for (let index = from - 1; index >= 0; index -= 1) {
+		const key = visible[index];
+		if (!drop.has(key)) return key;
+	}
+	return rest[0];
+}
+function contains(rect, point) {
+	return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+}
+/**
+* Панель под указателем; `null` — указатель в зазоре или за пределами обеих.
+*
+* Считается по прямоугольнику **обёртки панели**, а не по ближайшей строке:
+* `hitTest` при промахе возвращает ближайший элемент, и указатель над пустой
+* правой панелью резолвился бы в строку левой.
+*/
+function sideAtPoint(rects, point) {
+	if (rects.source && contains(rects.source, point)) return "source";
+	if (rects.target && contains(rects.target, point)) return "target";
+	return null;
+}
+/**
+* Перед какой строкой встанет блок; `null` — в конец панели.
+*
+* Цель — ключ, а не индекс: индекс пришлось бы пересчитывать после изъятия
+* блока, и именно ради этого `insertionIndex` в `dragSortGeometry` носит
+* поправку «элемент временно вынут». Для вставки из чужой панели поправка
+* вредна — там ничего не вынимается, — поэтому та функция здесь не годится.
+*/
+function dropBefore(keys, spans, position) {
+	if (keys.length === 0 || spans.length === 0) return null;
+	const hit = hitTest(spans, position);
+	if (!hit) return null;
+	const index = hit.fraction < .5 ? hit.index : hit.index + 1;
+	return index >= keys.length ? null : keys[index] ?? null;
+}
+/** Пройден ли порог начала жеста. */
+function passedThreshold(from, to, threshold = 4) {
+	return Math.hypot(to.x - from.x, to.y - from.y) >= threshold;
+}
+//#endregion
+//#region src/components/GrTransfer/useTransferDrag.ts
+function rectOf(el) {
+	if (!el) return null;
+	const box = el.getBoundingClientRect();
+	return {
+		left: box.left,
+		right: box.right,
+		top: box.top,
+		bottom: box.bottom
+	};
+}
+/**
+* Перетаскивание между панелями.
+*
+* `useDragSort` здесь не подходит: его `resolveTarget` получает попадание, но не
+* точку указателя, а панель-приёмник определяется прямоугольником под точкой —
+* `hitTest` при промахе отдаёт ближайшую строку, и указатель над пустой правой
+* панелью резолвился бы в строку левой.
+*/
+function useTransferDrag(options) {
+	const session = shallowRef(null);
+	const spot = shallowRef(null);
+	const moved = ref(false);
+	const pointer = shallowRef({
+		x: 0,
+		y: 0
+	});
+	let origin = {
+		x: 0,
+		y: 0
+	};
+	let pending = null;
+	/** Последняя непустая сторона: в зазоре между панелями индикатор не мигает. */
+	let lastSide = null;
+	let frame = null;
+	let cursor = {
+		x: 0,
+		y: 0
+	};
+	function stopAutoScroll() {
+		if (frame !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
+		frame = null;
+	}
+	function tickAutoScroll() {
+		frame = null;
+		const side = lastSide;
+		const scroller = side ? options.scrollerEl(side) : null;
+		if (scroller) {
+			const box = scroller.getBoundingClientRect();
+			const delta = autoScrollDelta({
+				start: box.top,
+				end: box.bottom
+			}, cursor.y);
+			if (delta !== 0) scroller.scrollTop += delta;
+		}
+		scheduleAutoScroll();
+	}
+	function scheduleAutoScroll() {
+		if (session.value === null || typeof requestAnimationFrame !== "function") return;
+		frame = requestAnimationFrame(tickAutoScroll);
+	}
+	function reset() {
+		session.value = null;
+		spot.value = null;
+		pending = null;
+		lastSide = null;
+		stopAutoScroll();
+		detachEscape();
+		unlockSelection();
+	}
+	function onEscape(event) {
+		if (event.key !== "Escape" || session.value === null) return;
+		event.preventDefault();
+		event.stopPropagation();
+		abort();
+	}
+	/**
+	* Выделение текста на время жеста.
+	*
+	* `select-none` на самих строках недостаточно: выделение **начинается** внутри
+	* компонента, а тянется по всему документу — и пользователь, ведя строку через
+	* страницу, подсвечивает попутно чужие заголовки и абзацы. Гасим на теле
+	* документа и возвращаем прежнее значение, а не пустую строку: потребитель мог
+	* задать своё.
+	*/
+	let selectionLock = null;
+	function lockSelection() {
+		if (typeof document === "undefined" || selectionLock !== null) return;
+		const style = document.body.style;
+		selectionLock = {
+			userSelect: style.userSelect,
+			webkitUserSelect: style.webkitUserSelect ?? ""
+		};
+		style.userSelect = "none";
+		style.webkitUserSelect = "none";
+		window.getSelection?.()?.removeAllRanges();
+	}
+	function unlockSelection() {
+		if (typeof document === "undefined" || selectionLock === null) return;
+		const style = document.body.style;
+		style.userSelect = selectionLock.userSelect;
+		style.webkitUserSelect = selectionLock.webkitUserSelect;
+		selectionLock = null;
+	}
+	let escapeAttached = false;
+	function attachEscape() {
+		if (escapeAttached || typeof window === "undefined") return;
+		window.addEventListener("keydown", onEscape, true);
+		escapeAttached = true;
+	}
+	function detachEscape() {
+		if (!escapeAttached || typeof window === "undefined") return;
+		window.removeEventListener("keydown", onEscape, true);
+		escapeAttached = false;
+	}
+	function resolveSpot(point) {
+		const active = session.value;
+		if (!active) return;
+		const side = sideAtPoint({
+			source: rectOf(options.panelEl("source")),
+			target: rectOf(options.panelEl("target"))
+		}, point) ?? lastSide;
+		if (side === null) {
+			spot.value = null;
+			return;
+		}
+		lastSide = side;
+		if (side === active.side && !options.allowSameSide(side)) {
+			spot.value = null;
+			return;
+		}
+		const keys = options.visibleKeys(side);
+		const spans = keys.map((key) => {
+			const box = options.rowEl(side, key)?.getBoundingClientRect();
+			return {
+				start: box?.top ?? 0,
+				end: box?.bottom ?? 0
+			};
+		});
+		spot.value = {
+			side,
+			before: dropBefore(keys, spans, point.y)
+		};
+	}
+	const drag = useDragGesture({
+		disabled: options.disabled,
+		onMove: (event) => {
+			cursor = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			pointer.value = cursor;
+			if (session.value === null) {
+				if (pending === null || !passedThreshold(origin, cursor)) return;
+				session.value = pending;
+				moved.value = true;
+				lockSelection();
+				attachEscape();
+				scheduleAutoScroll();
+			}
+			event.preventDefault();
+			resolveSpot(cursor);
+		},
+		onEnd: () => {
+			const active = session.value;
+			const target = spot.value;
+			if (active && target) options.onDrop(active, target);
+			reset();
+		},
+		onCancel: () => {
+			if (session.value !== null) options.onCancel?.();
+			reset();
+		}
+	});
+	/** Объявлен после `drag`: слушатель `Esc` вешается раньше и зовёт его косвенно. */
+	function abort() {
+		drag.stop(false);
+	}
+	onScopeDispose(reset);
+	return {
+		session,
+		spot,
+		pointer,
+		consumeClick: () => {
+			const was = moved.value;
+			moved.value = false;
+			return was;
+		},
+		startFrom: (side, key) => (event) => {
+			if (event.pointerType === "touch" || options.disabled()) return;
+			const block = options.blockFor(side, key);
+			if (block.length === 0) return;
+			origin = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			pending = {
+				side,
+				keys: block
+			};
+			moved.value = false;
+			drag.start(event);
+		},
+		cancel: () => drag.stop(false)
+	};
+}
+//#endregion
+//#region src/components/GrTransfer/transferSelection.ts
+var emptySelection = {
+	keys: /* @__PURE__ */ new Set(),
+	anchor: void 0
+};
+/** `Shift` сильнее `Ctrl`; их сочетание объединяет диапазон с выделением. */
+function selectIntentFrom(event) {
+	const additive = event.ctrlKey || event.metaKey;
+	if (event.shiftKey) return {
+		mode: "range",
+		additive
+	};
+	return {
+		mode: additive ? "toggle" : "replace",
+		additive
+	};
+}
+function rangeBetween(visible, from, to) {
+	const start = visible.indexOf(from);
+	const end = visible.indexOf(to);
+	if (start < 0 || end < 0) return [];
+	return visible.slice(Math.min(start, end), Math.max(start, end) + 1);
+}
+/**
+* Новое состояние выделения после жеста по строке `key`.
+*
+* Диапазон считается по **видимому** порядку, а не по каталогу: пользователь
+* растягивает то, что видит, и после фильтра «от сих до сих» обязано значить
+* то же самое.
+*/
+function applySelect(state, key, intent, visible, isSelectable) {
+	if (!isSelectable(key)) return state;
+	if (intent.mode === "range" && state.anchor !== void 0) {
+		const range = rangeBetween(visible, state.anchor, key).filter(isSelectable);
+		if (range.length > 0) {
+			const keys = intent.additive ? new Set(state.keys) : /* @__PURE__ */ new Set();
+			range.forEach((item) => keys.add(item));
+			return {
+				keys,
+				anchor: state.anchor
+			};
+		}
+	}
+	if (intent.mode === "toggle") {
+		const keys = new Set(state.keys);
+		if (keys.has(key)) keys.delete(key);
+		else keys.add(key);
+		return {
+			keys,
+			anchor: key
+		};
+	}
+	return {
+		keys: /* @__PURE__ */ new Set([key]),
+		anchor: key
+	};
+}
+/** Всё видимое и выбираемое; уже выбрано всё — снять. */
+function toggleAllVisible(state, visible, isSelectable) {
+	const selectable = visible.filter(isSelectable);
+	if (selectable.length === 0) return {
+		keys: new Set(state.keys),
+		anchor: void 0
+	};
+	if (selectable.every((key) => state.keys.has(key))) {
+		const keys = new Set(state.keys);
+		selectable.forEach((key) => keys.delete(key));
+		return {
+			keys,
+			anchor: void 0
+		};
+	}
+	const keys = new Set(state.keys);
+	selectable.forEach((key) => keys.add(key));
+	return {
+		keys,
+		anchor: void 0
+	};
+}
+/** Ключи, которых больше нет в панели. Якорь исчез — забываем и его. */
+function pruneSelection(state, present) {
+	const alive = new Set(present);
+	const keys = /* @__PURE__ */ new Set();
+	state.keys.forEach((key) => {
+		if (alive.has(key)) keys.add(key);
+	});
+	const anchor = state.anchor !== void 0 && alive.has(state.anchor) ? state.anchor : void 0;
+	if (keys.size === state.keys.size && anchor === state.anchor) return state;
+	return {
+		keys,
+		anchor
+	};
+}
+/** Состояние отметки «выбрать всё видимое» в шапке панели. */
+function allVisibleState(state, visible, isSelectable) {
+	const selectable = visible.filter(isSelectable);
+	if (selectable.length === 0) return "unchecked";
+	const picked = selectable.filter((key) => state.keys.has(key)).length;
+	if (picked === 0) return "unchecked";
+	return picked === selectable.length ? "checked" : "indeterminate";
+}
+//#endregion
+//#region ~icons/lucide/arrow-left
+var _hoisted_1$2 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$2(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "m12 19l-7-7l7-7m7 7H5"
+	}, null, -1)])]);
+}
+var arrow_left_default = markRaw({
+	name: "lucide-arrow-left",
+	render: render$2
+});
+//#endregion
+//#region ~icons/lucide/arrow-right
+var _hoisted_1$1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M5 12h14m-7-7l7 7l-7 7"
+	}, null, -1)])]);
+}
+var arrow_right_default = markRaw({
+	name: "lucide-arrow-right",
+	render: render$1
+});
+//#endregion
+//#region src/components/GrTransfer/GrTransfer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-dragging",
+	"aria-label",
+	"aria-disabled"
+];
+var _hoisted_2 = ["data-gr-transfer-panel"];
+var _hoisted_3 = ["id"];
+var _hoisted_4 = ["aria-disabled", "aria-label"];
+var _hoisted_5 = ["aria-disabled", "aria-label"];
+var _hoisted_6 = [
+	"id",
+	"data-gr-transfer-list",
+	"data-overflow",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required",
+	"aria-readonly",
+	"aria-disabled",
+	"onKeydown"
+];
+var _hoisted_7 = [
+	"aria-selected",
+	"aria-disabled",
+	"tabindex",
+	"onPointerdown",
+	"onClick",
+	"onFocus",
+	"onDblclick"
+];
+//#endregion
+//#region src/components/GrTransfer/GrTransfer.vue
+var GrTransfer_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTransfer",
+	props: {
+		items: {},
+		modelValue: {},
+		itemKey: {
+			type: [String, Function],
+			default: void 0
+		},
+		itemLabel: {
+			type: [String, Function],
+			default: void 0
+		},
+		itemDisabled: {
+			type: [String, Function],
+			default: void 0
+		},
+		sourceTitle: { default: void 0 },
+		targetTitle: { default: void 0 },
+		searchable: {
+			type: Boolean,
+			default: true
+		},
+		filter: {
+			type: Function,
+			default: void 0
+		},
+		sortable: {
+			type: Boolean,
+			default: true
+		},
+		draggable: {
+			type: Boolean,
+			default: void 0
+		},
+		maxHeight: { default: void 0 },
+		size: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"transfer",
+		"search",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		/**
+		* Свой `#header` уносит с собой заголовок панели, а вместе с ним и `id`, на
+		* который смотрит `aria-labelledby` списка: панель осталась бы без доступного
+		* имени, и axe ловит это как `aria-input-field-name`. Имя поэтому не зависит от
+		* разметки потребителя — при своей шапке оно приходит из `aria-label`.
+		*/
+		const hasHeaderSlot = computed(() => Boolean(slots.header));
+		const { t } = useGranularityTranslations();
+		const { announce } = useAnnouncer();
+		const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget();
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrTransfer" });
+		const resolvedDraggable = useGrComponentProp("GrTransfer", "draggable", () => props.draggable, true);
+		const { disabled: isDisabled, readonly: isReadonly, invalid: isInvalid, required: isRequired, locked: isLocked, id: fieldId, labelId: fieldLabelId, describedBy } = useGrFormControl(() => props);
+		const rootEl = ref(null);
+		const uid = useId();
+		const sourceTitleId = `${uid}-source-title`;
+		const targetTitleId = `${uid}-target-title`;
+		const sourceListId = `${uid}-source-list`;
+		const targetListId = `${uid}-target-list`;
+		if (process.env.NODE_ENV !== "production") {
+			if (!Array.isArray(props.items)) console.warn(`[granularity] GrTransfer: обязательный проп \`items\` должен быть массивом — получено ${typeof props.items}.`);
+			if (!Array.isArray(props.modelValue)) console.warn(`[granularity] GrTransfer: обязательный проп \`modelValue\` должен быть массивом — получено ${typeof props.modelValue}.`);
+		}
+		/**
+		* Синтетический ключ для элемента без своего: общий ключ пометил бы выбранными
+		* все строки разом. Приём и причина — из `GrDataTable`.
+		*/
+		const syntheticKeys = /* @__PURE__ */ new WeakMap();
+		let syntheticCount = 0;
+		let warnedSynthetic = false;
+		function keyOf(item) {
+			const source = props.itemKey ?? "id";
+			const value = typeof source === "function" ? source(item) : item[source];
+			if (typeof value === "string" && value !== "") return value;
+			if (typeof value === "number") return value;
+			const known = syntheticKeys.get(item);
+			if (known !== void 0) return known;
+			syntheticCount += 1;
+			const generated = `${uid}-synthetic-${syntheticCount}`;
+			syntheticKeys.set(item, generated);
+			if (process.env.NODE_ENV !== "production" && !warnedSynthetic) {
+				warnedSynthetic = true;
+				console.warn("[granularity] GrTransfer: у элемента нет значения `itemKey` — выдан временный ключ. Он не переживёт перезагрузку данных, и `modelValue` с ним не сойдётся: задайте `itemKey`.");
+			}
+			return generated;
+		}
+		function labelOf(item) {
+			const source = props.itemLabel ?? "label";
+			return typeof source === "function" ? source(item) : String(item[source] ?? "");
+		}
+		function disabledOf(item) {
+			const source = props.itemDisabled ?? "disabled";
+			return typeof source === "function" ? source(item) : Boolean(item[source]);
+		}
+		const split = computed(() => splitByModel(props.items ?? [], keyOf, props.modelValue ?? []));
+		if (process.env.NODE_ENV !== "production") watch(split, (value) => {
+			if (value.duplicated.length > 0) console.warn(`[granularity] GrTransfer: ключи повторяются в \`items\` (${value.duplicated.join(", ")}) — рисуется первый элемент с таким ключом.`);
+			if (value.unresolved.length > 0 && (props.items?.length ?? 0) > 0) console.warn(`[granularity] GrTransfer: ключи из \`modelValue\` не найдены в \`items\` (${value.unresolved.join(", ")}). Они сохранены в значении, но не показаны: каталог мог ещё не приехать.`);
+		}, { immediate: true });
+		const queries = ref({
+			source: "",
+			target: ""
+		});
+		const selections = ref({
+			source: emptySelection,
+			target: emptySelection
+		});
+		function itemsOf(side) {
+			return side === "source" ? split.value.source : split.value.target;
+		}
+		function matches(item, query) {
+			if (props.filter) return props.filter(item, query);
+			return matchesQueryParts([labelOf(item)], normalizeOptionQuery(query));
+		}
+		function visibleOf(side) {
+			const query = queries.value[side];
+			if (!props.searchable || normalizeOptionQuery(query) === "") return itemsOf(side);
+			return itemsOf(side).filter((item) => matches(item, query));
+		}
+		const visible = computed(() => ({
+			source: visibleOf("source"),
+			target: visibleOf("target")
+		}));
+		const visibleKeys = computed(() => ({
+			source: visible.value.source.map(keyOf),
+			target: visible.value.target.map(keyOf)
+		}));
+		function selectableOf(side) {
+			return (key) => {
+				const item = itemsOf(side).find((candidate) => keyOf(candidate) === key);
+				return item !== void 0 && !disabledOf(item);
+			};
+		}
+		watch(split, () => {
+			selections.value = {
+				source: pruneSelection(selections.value.source, split.value.source.map(keyOf)),
+				target: pruneSelection(selections.value.target, split.value.target.map(keyOf))
+			};
+		});
+		const titles = computed(() => ({
+			source: props.sourceTitle ?? t("gr.transfer.sourceTitle", "Available"),
+			target: props.targetTitle ?? t("gr.transfer.targetTitle", "Selected")
+		}));
+		function setSelection(side, next) {
+			selections.value = {
+				...selections.value,
+				[side]: next
+			};
+		}
+		function toggleAll(side) {
+			if (isDisabled.value) return;
+			setSelection(side, toggleAllVisible(selections.value[side], visibleKeys.value[side], selectableOf(side)));
+		}
+		/** Что реально уедет: отмеченное минус запрещённое. Скрытое поиском — уезжает. */
+		function movableOf(side) {
+			const selectable = selectableOf(side);
+			return itemsOf(side).map(keyOf).filter((key) => selections.value[side].keys.has(key) && selectable(key));
+		}
+		const canToTarget = computed(() => !isLocked.value && movableOf("source").length > 0);
+		const canToSource = computed(() => !isLocked.value && movableOf("target").length > 0);
+		function commit(next) {
+			emit("update:modelValue", next);
+			emit("change", next);
+		}
+		async function transfer(keys, direction) {
+			if (isLocked.value || keys.length === 0) return;
+			const from = direction === "toTarget" ? "source" : "target";
+			const to = direction === "toTarget" ? "target" : "source";
+			const model = normalizeKeys(props.modelValue ?? []);
+			const nextFocus = keyAfterRemoval(visibleKeys.value[from], keys, rovingOf(from).rovingKey.value);
+			commit(direction === "toTarget" ? insertKeys(model, keys, null) : removeKeys(model, keys));
+			selections.value = {
+				...selections.value,
+				[from]: emptySelection,
+				[to]: {
+					keys: new Set(keys),
+					anchor: keys[0]
+				}
+			};
+			markArrived(keys);
+			emit("transfer", keys, direction);
+			announce(t("gr.transfer.moved", "{count} moved to {list}", {
+				count: keys.length,
+				n: keys.length,
+				list: titles.value[to]
+			}));
+			await nextTick();
+			if (nextFocus !== void 0) rovingOf(from).focusKey(nextFocus);
+			else rovingOf(to).focusKey(keys[0]);
+		}
+		function transferSelected(direction) {
+			const side = direction === "toTarget" ? "source" : "target";
+			const keys = movableOf(side);
+			if (keys.length > 0) {
+				transfer(keys, direction);
+				return;
+			}
+			const focused = rovingOf(side).rovingKey.value;
+			if (focused !== void 0 && selectableOf(side)(focused)) transfer([focused], direction);
+		}
+		/** Перестановка отключена, пока панель отфильтрована: см. `docs/components/GrTransfer.md`. */
+		const reorderAllowed = computed(() => props.sortable && !isLocked.value && normalizeOptionQuery(queries.value.target) === "");
+		function reorder(target, keys) {
+			if (target === void 0 || keys.length === 0) return;
+			const model = normalizeKeys(props.modelValue ?? []);
+			commit(insertKeys(model, keys, target));
+			const position = removeKeys(model, keys).findIndex((key) => key === target);
+			announce(t("gr.transfer.reordered", "Position {position} of {count}", {
+				position: (position < 0 ? model.length - keys.length : position) + 1,
+				count: model.length
+			}));
+		}
+		function moveBlock(delta) {
+			const keys = movableOf("target");
+			const moving = keys.length > 0 ? keys : blockUnderFocus("target");
+			if (moving.length === 0) return;
+			if (!reorderAllowed.value) {
+				if (props.sortable && !isLocked.value) announce(t("gr.transfer.reorderFiltered", "Reordering is off while a search is active"));
+				return;
+			}
+			reorder(stepTarget(normalizeKeys(props.modelValue ?? []), moving, delta), moving);
+		}
+		function moveBlockToEdge(edge) {
+			const keys = movableOf("target");
+			const moving = keys.length > 0 ? keys : blockUnderFocus("target");
+			if (moving.length === 0 || !reorderAllowed.value) return;
+			reorder(edgeTarget(normalizeKeys(props.modelValue ?? []), moving, edge), moving);
+		}
+		function blockUnderFocus(side) {
+			const focused = rovingOf(side).rovingKey.value;
+			return focused !== void 0 && selectableOf(side)(focused) ? [focused] : [];
+		}
+		const sourceRows = ref(/* @__PURE__ */ new Map());
+		const targetRows = ref(/* @__PURE__ */ new Map());
+		const searchEls = ref({
+			source: null,
+			target: null
+		});
+		const panelEls = ref({
+			source: null,
+			target: null
+		});
+		const listEls = ref({
+			source: null,
+			target: null
+		});
+		function rowsOf(side) {
+			return side === "source" ? sourceRows.value : targetRows.value;
+		}
+		function registerRow(side, key, el) {
+			const map = rowsOf(side);
+			if (el instanceof HTMLElement) map.set(key, el);
+			else map.delete(key);
+		}
+		function makeRoving(side) {
+			return useRovingFocus({
+				items: () => visibleKeys.value[side],
+				elementFor: (key) => rowsOf(side).get(key) ?? null,
+				orientation: () => "vertical",
+				wrap: () => false,
+				skipDisabled: () => false,
+				onOverflow: (edge) => {
+					if (edge !== "start") return false;
+					const input = searchEls.value[side]?.querySelector("input");
+					if (!input) return false;
+					input.focus();
+					return true;
+				}
+			});
+		}
+		const sourceRoving = makeRoving("source");
+		const targetRoving = makeRoving("target");
+		function rovingOf(side) {
+			return side === "source" ? sourceRoving : targetRoving;
+		}
+		/**
+		* Признак того, что список продолжается за краем.
+		*
+		* Полоса прокрутки у панели своя и на macOS невидима, поэтому обрезанная
+		* посередине строка читается как дефект отрисовки, а не как «прокрути». Затухание
+		* рисует CSS по `data-overflow` — тот же приём, что у ряда вкладок `GrTabs`.
+		*/
+		const listOverflow = ref({
+			source: "none",
+			target: "none"
+		});
+		let overflowObserver = null;
+		let overflowScheduled = false;
+		function measureOverflow() {
+			const next = {
+				source: "none",
+				target: "none"
+			};
+			for (const side of ["source", "target"]) {
+				const el = listEls.value[side];
+				if (el) next[side] = resolveScrollOverflow(el.scrollTop, el.scrollHeight, el.clientHeight);
+			}
+			listOverflow.value = next;
+		}
+		function scheduleOverflow() {
+			if (overflowScheduled) return;
+			overflowScheduled = true;
+			nextTick(() => {
+				overflowScheduled = false;
+				measureOverflow();
+			});
+		}
+		onMounted(() => {
+			scheduleOverflow();
+			if (typeof ResizeObserver === "undefined") return;
+			overflowObserver = new ResizeObserver(scheduleOverflow);
+			for (const side of ["source", "target"]) {
+				const el = listEls.value[side];
+				if (el) overflowObserver.observe(el);
+			}
+		});
+		onBeforeUnmount(() => {
+			overflowObserver?.disconnect();
+			overflowObserver = null;
+		});
+		watch([split, visible], scheduleOverflow);
+		/** Есть ли что переставлять: иначе кнопки в шапке гасятся, оставаясь в таб-порядке. */
+		const canReorder = computed(() => reorderAllowed.value && itemsOf("target").length > 1 && (movableOf("target").length > 0 || blockUnderFocus("target").length > 0));
+		/**
+		* Ключи, только что приехавшие в панель: подсветка живёт ~1.2 с и снимается сама.
+		* Таймер один на компонент — быстрый повторный перенос перезапускает его, а не
+		* копит хвосты.
+		*/
+		const arrived = ref(/* @__PURE__ */ new Set());
+		let arrivedTimer = null;
+		function markArrived(keys) {
+			if (typeof window === "undefined") return;
+			arrived.value = new Set(keys);
+			if (arrivedTimer !== null) clearTimeout(arrivedTimer);
+			arrivedTimer = window.setTimeout(() => {
+				arrivedTimer = null;
+				arrived.value = /* @__PURE__ */ new Set();
+			}, 1200);
+		}
+		onBeforeUnmount(() => {
+			if (arrivedTimer !== null) clearTimeout(arrivedTimer);
+		});
+		const dragging = useTransferDrag({
+			disabled: () => isLocked.value || !resolvedDraggable.value,
+			visibleKeys: (side) => visibleKeys.value[side],
+			rowEl: (side, key) => rowsOf(side).get(key) ?? null,
+			panelEl: (side) => panelEls.value[side],
+			scrollerEl: (side) => listEls.value[side],
+			blockFor: (side, key) => {
+				if (!selectableOf(side)(key)) return [];
+				const chosen = movableOf(side);
+				return chosen.includes(key) ? chosen : [key];
+			},
+			allowSameSide: (side) => side === "target" && reorderAllowed.value,
+			onDrop: (session, spot) => {
+				const model = normalizeKeys(props.modelValue ?? []);
+				if (spot.side === session.side) {
+					reorder(spot.before, [...session.keys]);
+					return;
+				}
+				if (spot.side === "target") {
+					commit(insertKeys(model, [...session.keys], spot.before));
+					markArrived(session.keys);
+					emit("transfer", [...session.keys], "toTarget");
+					announce(t("gr.transfer.moved", "{count} moved to {list}", {
+						count: session.keys.length,
+						n: session.keys.length,
+						list: titles.value.target
+					}));
+					return;
+				}
+				commit(removeKeys(model, [...session.keys]));
+				markArrived(session.keys);
+				emit("transfer", [...session.keys], "toSource");
+				announce(t("gr.transfer.moved", "{count} moved to {list}", {
+					count: session.keys.length,
+					n: session.keys.length,
+					list: titles.value.source
+				}));
+			},
+			onCancel: () => announce(t("gr.transfer.cancelled", "Move cancelled"))
+		});
+		/**
+		* Вызов через обработчик, а не `@pointerdown="dragging.startFrom(...)"`: Vue
+		* считает такое выражение инлайн-инструкцией и возвращённую функцию
+		* выбрасывает — жест не начинался бы вовсе. Приём `GrSortableList`.
+		*/
+		function onRowPointerDown(side, key, event) {
+			dragging.startFrom(side, key)(event);
+		}
+		/**
+		* Подпись переносимого. Первая строка блока названа, остальные — числом: список
+		* из десяти имён под курсором закрыл бы то самое место, куда человек целится.
+		*/
+		const ghost = computed(() => {
+			const session = dragging.session.value;
+			if (!session || session.keys.length === 0) return null;
+			const first = itemsOf(session.side).find((item) => keyOf(item) === session.keys[0]);
+			return {
+				label: first ? labelOf(first) : String(session.keys[0]),
+				rest: session.keys.length - 1
+			};
+		});
+		const ghostStyle = computed(() => ({ transform: `translate3d(${dragging.pointer.value.x + 12}px, ${dragging.pointer.value.y + 12}px, 0)` }));
+		function indicatorFor(side, key) {
+			const spot = dragging.spot.value;
+			if (!spot || spot.side !== side) return null;
+			if (spot.before === key) return "before";
+			const keys = visibleKeys.value[side];
+			return spot.before === null && keys[keys.length - 1] === key ? "after" : null;
+		}
+		function isDraggingKey(side, key) {
+			const session = dragging.session.value;
+			return session !== null && session.side === side && session.keys.includes(key);
+		}
+		function onOptionClick(side, key, event) {
+			if (isDisabled.value || dragging.consumeClick()) return;
+			rovingOf(side).setActive(key);
+			setSelection(side, applySelect(selections.value[side], key, selectIntentFrom(event), visibleKeys.value[side], selectableOf(side)));
+		}
+		function extendRange(side, key) {
+			setSelection(side, applySelect(selections.value[side], key, {
+				mode: "range",
+				additive: false
+			}, visibleKeys.value[side], selectableOf(side)));
+		}
+		function onListKeydown(side, event) {
+			if (isDisabled.value || visibleKeys.value[side].length === 0) return;
+			const roving = rovingOf(side);
+			const current = roving.rovingKey.value;
+			if ((event.ctrlKey || event.metaKey) && (event.key === "a" || event.key === "A")) {
+				event.preventDefault();
+				toggleAll(side);
+				return;
+			}
+			if (event.key === " ") {
+				event.preventDefault();
+				if (current === void 0) return;
+				if (event.shiftKey) extendRange(side, current);
+				else setSelection(side, applySelect(selections.value[side], current, {
+					mode: "toggle",
+					additive: true
+				}, visibleKeys.value[side], selectableOf(side)));
+				return;
+			}
+			if (event.key === "Enter") {
+				event.preventDefault();
+				transferSelected(side === "source" ? "toTarget" : "toSource");
+				return;
+			}
+			if (side === "target" && event.altKey) {
+				if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+					event.preventDefault();
+					moveBlock(event.key === "ArrowDown" ? 1 : -1);
+					return;
+				}
+				if (event.key === "Home" || event.key === "End") {
+					event.preventDefault();
+					moveBlockToEdge(event.key === "Home" ? "start" : "end");
+					return;
+				}
+			}
+			if (!roving.handleNavigationKeys(event)) return;
+			const next = roving.rovingKey.value;
+			if (event.shiftKey && next !== void 0) extendRange(side, next);
+		}
+		function onSearchKeydown(side, event) {
+			if (event.key !== "ArrowDown") return;
+			const first = visibleKeys.value[side][0];
+			if (first === void 0) return;
+			event.preventDefault();
+			rovingOf(side).focusKey(first);
+		}
+		function onSearch(side, value) {
+			queries.value = {
+				...queries.value,
+				[side]: value
+			};
+			emit("search", value, side);
+		}
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event)
+		});
+		const panelStyle = computed(() => ({ maxHeight: props.maxHeight === void 0 ? "var(--gr-transfer-panel-max-h, 18rem)" : typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight }));
+		function counterText(side) {
+			return t("gr.transfer.selected", "{count} of {total}", {
+				count: selections.value[side].keys.size,
+				total: itemsOf(side).length
+			});
+		}
+		function shownText(side) {
+			return t("gr.transfer.shown", "Showing {shown} of {total}", {
+				shown: visible.value[side].length,
+				total: itemsOf(side).length
+			});
+		}
+		function emptyText(side) {
+			return normalizeOptionQuery(queries.value[side]) === "" ? t("gr.transfer.empty", "Nothing here yet") : t("gr.transfer.emptyFiltered", "Nothing matches the search");
+		}
+		function isFiltered(side) {
+			return normalizeOptionQuery(queries.value[side]) !== "";
+		}
+		function allState(side) {
+			return allVisibleState(selections.value[side], visibleKeys.value[side], selectableOf(side));
+		}
+		function focusSide(side) {
+			const roving = rovingOf(side);
+			const key = roving.rovingKey.value ?? visibleKeys.value[side][0];
+			if (key !== void 0) {
+				roving.focusKey(key);
+				return;
+			}
+			searchEls.value[side]?.querySelector("input")?.focus();
+		}
+		__expose({
+			focus: () => focusSide("target"),
+			blur: () => {
+				const active = document.activeElement;
+				if (active instanceof HTMLElement && rootEl.value?.contains(active)) active.blur();
+			},
+			focusSide,
+			transfer: (keys, direction) => void transfer(keys, direction),
+			selectAll: (side) => toggleAll(side),
+			clearSelection: (side) => {
+				if (side) {
+					setSelection(side, emptySelection);
+					return;
+				}
+				selections.value = {
+					source: emptySelection,
+					target: emptySelection
+				};
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-transfer": "",
+				"data-dragging": unref(dragging).session.value ? "true" : void 0,
+				role: "group",
+				class: normalizeClass(unref(transferRootBase)),
+				"aria-label": __props.ariaLabel,
+				"aria-disabled": unref(isDisabled) ? "true" : void 0,
+				onFocusin: _cache[4] || (_cache[4] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[5] || (_cache[5] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [
+				(openBlock(), createElementBlock(Fragment, null, renderList(["source", "target"], (side) => {
+					return createElementVNode("div", {
+						key: side,
+						ref_for: true,
+						ref: (el) => {
+							panelEls.value[side] = el;
+						},
+						"data-gr-transfer-panel": side,
+						class: normalizeClass(unref(grTransferPanelClass)(unref(dragging).spot.value?.side === side)),
+						style: normalizeStyle(panelStyle.value)
+					}, [
+						renderSlot(_ctx.$slots, "header", {
+							side,
+							title: titles.value[side],
+							selected: selections.value[side].keys.size,
+							total: itemsOf(side).length,
+							shown: visible.value[side].length
+						}, () => [createElementVNode("div", { class: normalizeClass(unref(grTransferHeaderClass)(unref(resolvedSize))) }, [
+							visible.value[side].length > 0 ? (openBlock(), createBlock(unref(GrCheckbox_default), {
+								key: 0,
+								"model-value": allState(side) === "checked",
+								indeterminate: allState(side) === "indeterminate",
+								disabled: unref(isDisabled),
+								size: unref(resolvedSize),
+								"aria-label": unref(t)("gr.transfer.selectAll", "Select everything shown"),
+								"onUpdate:modelValue": ($event) => toggleAll(side)
+							}, null, 8, [
+								"model-value",
+								"indeterminate",
+								"disabled",
+								"size",
+								"aria-label",
+								"onUpdate:modelValue"
+							])) : createCommentVNode("", true),
+							createElementVNode("span", {
+								id: side === "source" ? sourceTitleId : targetTitleId,
+								class: normalizeClass(unref(transferTitleClass))
+							}, toDisplayString(titles.value[side]), 11, _hoisted_3),
+							createElementVNode("span", { class: normalizeClass(unref(transferCounterClass)) }, toDisplayString(counterText(side)), 3),
+							side === "target" && __props.sortable && visible.value[side].length > 1 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
+								type: "button",
+								"data-gr-transfer-move-up": "",
+								class: normalizeClass(unref(grTransferReorderClass)(unref(resolvedSize))),
+								"aria-disabled": canReorder.value ? void 0 : "true",
+								"aria-label": unref(t)("gr.transfer.moveUp", "Move earlier"),
+								onClick: _cache[0] || (_cache[0] = ($event) => canReorder.value && moveBlock(-1))
+							}, [createVNode(unref(arrow_left_default), {
+								class: normalizeClass(unref(transferReorderIconClass)),
+								"aria-hidden": "true"
+							}, null, 8, ["class"])], 10, _hoisted_4), createElementVNode("button", {
+								type: "button",
+								"data-gr-transfer-move-down": "",
+								class: normalizeClass(unref(grTransferReorderClass)(unref(resolvedSize))),
+								"aria-disabled": canReorder.value ? void 0 : "true",
+								"aria-label": unref(t)("gr.transfer.moveDown", "Move later"),
+								onClick: _cache[1] || (_cache[1] = ($event) => canReorder.value && moveBlock(1))
+							}, [createVNode(unref(arrow_right_default), {
+								class: normalizeClass(unref(transferReorderIconClass)),
+								"aria-hidden": "true"
+							}, null, 8, ["class"])], 10, _hoisted_5)], 64)) : createCommentVNode("", true)
+						], 2)]),
+						__props.searchable ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							ref_for: true,
+							ref: (el) => {
+								searchEls.value[side] = el;
+							},
+							class: normalizeClass(unref(grTransferSearchClass)(unref(resolvedSize)))
+						}, [createVNode(unref(GrInput_default), {
+							"model-value": queries.value[side],
+							type: "search",
+							clearable: "",
+							size: unref(resolvedSize),
+							disabled: unref(isDisabled),
+							placeholder: unref(t)("gr.transfer.search", "Search"),
+							"aria-label": `${titles.value[side]} — ${unref(t)("gr.transfer.search", "Search")}`,
+							"onUpdate:modelValue": (value) => onSearch(side, value),
+							onKeydown: (event) => onSearchKeydown(side, event)
+						}, null, 8, [
+							"model-value",
+							"size",
+							"disabled",
+							"placeholder",
+							"aria-label",
+							"onUpdate:modelValue",
+							"onKeydown"
+						])], 2)) : createCommentVNode("", true),
+						createElementVNode("p", {
+							class: normalizeClass(unref(transferStatusClass)),
+							role: "status",
+							"aria-live": "polite"
+						}, toDisplayString(isFiltered(side) ? shownText(side) : ""), 3),
+						createElementVNode("div", {
+							id: side === "source" ? sourceListId : unref(fieldId) ?? targetListId,
+							ref_for: true,
+							ref: (el) => {
+								listEls.value[side] = el;
+							},
+							"data-gr-transfer-list": side,
+							"data-overflow": listOverflow.value[side],
+							role: "listbox",
+							"aria-multiselectable": "true",
+							class: normalizeClass(unref(transferListBase)),
+							"aria-label": hasHeaderSlot.value ? titles.value[side] : void 0,
+							"aria-labelledby": hasHeaderSlot.value ? side === "target" ? unref(fieldLabelId) : void 0 : side === "target" && unref(fieldLabelId) ? `${unref(fieldLabelId)} ${targetTitleId}` : side === "source" ? sourceTitleId : targetTitleId,
+							"aria-describedby": side === "target" ? unref(describedBy) : void 0,
+							"aria-invalid": side === "target" && unref(isInvalid) ? "true" : void 0,
+							"aria-required": side === "target" && unref(isRequired) ? "true" : void 0,
+							"aria-readonly": side === "target" && unref(isReadonly) ? "true" : void 0,
+							"aria-disabled": unref(isDisabled) ? "true" : void 0,
+							onKeydown: (event) => onListKeydown(side, event),
+							onScrollPassive: scheduleOverflow
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visible.value[side], (item, index) => {
+							return openBlock(), createElementBlock("div", {
+								key: keyOf(item),
+								ref_for: true,
+								ref: (el) => registerRow(side, keyOf(item), el),
+								"data-gr-transfer-option": "",
+								role: "option",
+								"aria-selected": selections.value[side].keys.has(keyOf(item)) ? "true" : "false",
+								"aria-disabled": disabledOf(item) ? "true" : void 0,
+								tabindex: rovingOf(side).tabindexFor(keyOf(item)),
+								class: normalizeClass(unref(grTransferOptionClass)({
+									size: unref(resolvedSize),
+									selected: selections.value[side].keys.has(keyOf(item)),
+									disabled: disabledOf(item),
+									draggable: unref(resolvedDraggable) && !unref(isLocked),
+									dragging: isDraggingKey(side, keyOf(item)),
+									arrived: arrived.value.has(keyOf(item)),
+									indicator: indicatorFor(side, keyOf(item))
+								})),
+								onPointerdown: (event) => onRowPointerDown(side, keyOf(item), event),
+								onClick: (event) => onOptionClick(side, keyOf(item), event),
+								onFocus: ($event) => rovingOf(side).setActive(keyOf(item)),
+								onDblclick: ($event) => !disabledOf(item) && transfer([keyOf(item)], side === "source" ? "toTarget" : "toSource")
+							}, [createElementVNode("span", {
+								"aria-hidden": "true",
+								class: normalizeClass(unref(grTransferMarkClass)(unref(resolvedSize), selections.value[side].keys.has(keyOf(item))))
+							}, [selections.value[side].keys.has(keyOf(item)) ? (openBlock(), createBlock(unref(check_default), {
+								key: 0,
+								class: normalizeClass(unref(transferMarkIconClass))
+							}, null, 8, ["class"])) : createCommentVNode("", true)], 2), renderSlot(_ctx.$slots, "item", {
+								item,
+								side,
+								index,
+								selected: selections.value[side].keys.has(keyOf(item)),
+								disabled: disabledOf(item)
+							}, () => [createElementVNode("span", { class: normalizeClass(unref(transferLabelClass)) }, toDisplayString(labelOf(item)), 3)])], 42, _hoisted_7);
+						}), 128))], 42, _hoisted_6),
+						visible.value[side].length === 0 ? renderSlot(_ctx.$slots, "empty", {
+							side,
+							filtered: isFiltered(side)
+						}, () => [createElementVNode("p", { class: normalizeClass(unref(grTransferEmptyClass)(unref(resolvedSize))) }, toDisplayString(emptyText(side)), 3)], void 0, 1) : createCommentVNode("", true)
+					], 14, _hoisted_2);
+				}), 64)),
+				(openBlock(), createBlock(Teleport, {
+					to: unref(portalTarget),
+					disabled: !unref(teleportEnabled)
+				}, [ghost.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-gr-transfer-ghost": "",
+					"aria-hidden": "true",
+					class: normalizeClass(unref(transferGhostClass)),
+					style: normalizeStyle(ghostStyle.value)
+				}, [createElementVNode("span", { class: normalizeClass(unref(transferGhostLabelClass)) }, toDisplayString(ghost.value.label), 3), ghost.value.rest > 0 ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(transferGhostCountClass))
+				}, "+" + toDisplayString(ghost.value.rest), 3)) : createCommentVNode("", true)], 6)) : createCommentVNode("", true)], 8, ["to", "disabled"])),
+				createElementVNode("div", {
+					class: normalizeClass(unref(grTransferActionsClass)(unref(resolvedSize))),
+					style: { "order": "1" }
+				}, [renderSlot(_ctx.$slots, "actions", {
+					toTarget: () => transferSelected("toTarget"),
+					toSource: () => transferSelected("toSource"),
+					canToTarget: canToTarget.value,
+					canToSource: canToSource.value
+				}, () => [createVNode(unref(GrButtonGroup_default), {
+					orientation: "vertical",
+					attached: "",
+					size: unref(resolvedSize)
+				}, {
+					default: withCtx(() => [createVNode(unref(GrButton_default), {
+						"data-gr-transfer-to-target": "",
+						variant: "secondary",
+						"aria-disabled": canToTarget.value ? void 0 : "true",
+						class: normalizeClass(canToTarget.value ? "" : unref(transferActionInertClass)),
+						"aria-label": unref(t)("gr.transfer.toTarget", "Move to selected"),
+						onClick: _cache[2] || (_cache[2] = ($event) => canToTarget.value && transferSelected("toTarget"))
+					}, {
+						default: withCtx(() => [createVNode(unref(chevron_right_default), {
+							class: normalizeClass(unref(transferActionIconClass)),
+							"aria-hidden": "true"
+						}, null, 8, ["class"])]),
+						_: 1
+					}, 8, [
+						"aria-disabled",
+						"class",
+						"aria-label"
+					]), createVNode(unref(GrButton_default), {
+						"data-gr-transfer-to-source": "",
+						variant: "secondary",
+						"aria-disabled": canToSource.value ? void 0 : "true",
+						class: normalizeClass(canToSource.value ? "" : unref(transferActionInertClass)),
+						"aria-label": unref(t)("gr.transfer.toSource", "Move back to available"),
+						onClick: _cache[3] || (_cache[3] = ($event) => canToSource.value && transferSelected("toSource"))
+					}, {
+						default: withCtx(() => [createVNode(unref(chevron_left_default), {
+							class: normalizeClass(unref(transferActionIconClass)),
+							"aria-hidden": "true"
+						}, null, 8, ["class"])]),
+						_: 1
+					}, 8, [
+						"aria-disabled",
+						"class",
+						"aria-label"
+					])]),
+					_: 1
+				}, 8, ["size"])])], 2)
+			], 42, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrTransfer_default as t };