@feugene/granularity 0.19.0 → 0.21.0

package/dist/components/GrSortableList/chunks/GrSortableList-DPjxilmN.js

@@ -0,0 +1,277 @@
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as GrCard_default } from "../../GrCard/chunks/GrCard-Bc7nRfbe.js";
+import { useAnnouncer } from "../../../composables/useAnnouncer.js";
+import { n as insertionIndex, r as moveItem, t as useDragSort } from "../../../chunks/useDragSort-0l47h4yb.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { t as grip_vertical_default } from "../../../chunks/grip-vertical-lRha2S7q.js";
+import { a as emptyClass, c as indicatorAfterClass, d as rowDisabledClass, f as rowDraggingClass, h as rowLayoutClass, i as dividedClass, l as indicatorBeforeClass, m as rowGrabbedClass, o as handleClass, p as rowFocusClass, r as contentClass, s as handleDisabledClass, u as listClass } from "../../../chunks/config-DAX8Deh12.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+//#region src/components/GrSortableList/GrSortableList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "aria-disabled"];
+var _hoisted_2 = [
+	"tabindex",
+	"aria-roledescription",
+	"aria-posinset",
+	"aria-setsize",
+	"aria-grabbed",
+	"onKeydown",
+	"onFocus",
+	"onPointerdown"
+];
+var _hoisted_3 = [
+	"aria-label",
+	"disabled",
+	"onPointerdown"
+];
+//#endregion
+//#region src/components/GrSortableList/GrSortableList.vue
+var GrSortableList_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSortableList",
+	props: {
+		modelValue: {},
+		itemKey: {
+			type: [String, Function],
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		orientation: { default: "vertical" },
+		variant: { default: void 0 },
+		divided: {
+			type: Boolean,
+			default: true
+		},
+		handleOnly: {
+			type: Boolean,
+			default: true
+		},
+		maxHeight: { default: void 0 },
+		emptyText: { default: void 0 },
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"move",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const { announce } = useAnnouncer();
+		const listEl = ref(null);
+		const rowEls = /* @__PURE__ */ new Map();
+		const count = computed(() => props.modelValue.length);
+		const isEmpty = computed(() => count.value === 0);
+		const isVertical = computed(() => props.orientation === "vertical");
+		function keyOf(item, index) {
+			if (typeof props.itemKey === "function") return String(props.itemKey(item, index));
+			if (typeof props.itemKey === "string") return String(item[props.itemKey]);
+			return String(index);
+		}
+		const keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)));
+		function indexOfKey(key) {
+			return keys.value.indexOf(key);
+		}
+		function registerRow(key, el) {
+			if (el instanceof HTMLElement) {
+				rowEls.set(key, el);
+				return;
+			}
+			const previous = rowEls.get(key);
+			if (previous && !previous.isConnected) rowEls.delete(key);
+		}
+		const roving = useRovingFocus({
+			items: () => keys.value,
+			elementFor: (key) => rowEls.get(key) ?? null,
+			orientation: () => isVertical.value ? "vertical" : "horizontal",
+			wrap: () => false
+		});
+		function applyMove(from, to) {
+			if (from < 0 || to < 0 || from === to) return;
+			const next = moveItem(props.modelValue, from, to);
+			emit("update:modelValue", next);
+			emit("move", from, to);
+			emit("change", next);
+		}
+		const sort = useDragSort({
+			items: () => keys.value,
+			elementFor: (key) => rowEls.get(key) ?? null,
+			orientation: () => props.orientation,
+			scroller: () => props.maxHeight === void 0 ? null : listEl.value,
+			disabled: () => props.disabled,
+			resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),
+			onDrop: (source, to) => applyMove(indexOfKey(source), to),
+			onUpdate: (source, target, mode) => {
+				if (mode !== "keyboard" || source === null) return;
+				const position = (target ?? indexOfKey(source)) + 1;
+				announce(t("gr.sortable.moved", "Position {position} of {count}", {
+					position,
+					count: count.value
+				}));
+			}
+		});
+		const activeIndex = computed(() => sort.source.value === null ? -1 : indexOfKey(sort.source.value));
+		/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */
+		function indicatorFor(index) {
+			const target = sort.target.value;
+			if (target === null || !sort.isActive.value || index === activeIndex.value) return null;
+			if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? "before" : "after";
+			return null;
+		}
+		function rowClass(index, key) {
+			const grabbed = sort.mode.value === "keyboard" && sort.source.value === key;
+			const dragging = sort.mode.value === "pointer" && sort.source.value === key;
+			const indicator = indicatorFor(index);
+			return [
+				rowLayoutClass,
+				rowFocusClass,
+				props.disabled ? rowDisabledClass : "",
+				grabbed ? rowGrabbedClass : "",
+				dragging ? rowDraggingClass : "",
+				indicator === "before" ? indicatorBeforeClass : "",
+				indicator === "after" ? indicatorAfterClass : ""
+			];
+		}
+		function startPointer(key, event) {
+			if (props.disabled) return;
+			sort.startFrom(key)(event);
+		}
+		function grab(key) {
+			sort.grab(key);
+			if (sort.mode.value !== "keyboard") return;
+			sort.setTarget(indexOfKey(key));
+			announce(t("gr.sortable.grabbed", "Grabbed. Position {position} of {count}", {
+				position: indexOfKey(key) + 1,
+				count: count.value
+			}));
+		}
+		async function drop(key) {
+			const target = sort.target.value;
+			sort.drop();
+			announce(t("gr.sortable.dropped", "Dropped at position {position} of {count}", {
+				position: (target ?? 0) + 1,
+				count: count.value
+			}));
+			await nextTick();
+			await roving.focusKey(key);
+		}
+		function cancel() {
+			if (!sort.isActive.value) return;
+			sort.cancel();
+			announce(t("gr.sortable.cancelled", "Move cancelled"));
+		}
+		function moveTargetBy(delta) {
+			const current = sort.target.value ?? activeIndex.value;
+			const next = Math.min(count.value - 1, Math.max(0, current + delta));
+			if (next !== current) sort.setTarget(next);
+		}
+		function onRowKeydown(event, key) {
+			if (props.disabled) return;
+			const forward = isVertical.value ? "ArrowDown" : "ArrowRight";
+			const backward = isVertical.value ? "ArrowUp" : "ArrowLeft";
+			const grabbed = sort.mode.value === "keyboard";
+			if (event.key === "Escape") {
+				if (!grabbed) return;
+				event.preventDefault();
+				cancel();
+				return;
+			}
+			if (event.key === " " || event.key === "Enter") {
+				event.preventDefault();
+				if (grabbed) drop(key);
+				else grab(key);
+				return;
+			}
+			if (grabbed) {
+				if (event.key === forward || event.key === backward) {
+					event.preventDefault();
+					moveTargetBy(event.key === forward ? 1 : -1);
+				}
+				return;
+			}
+			roving.handleNavigationKeys(event);
+		}
+		/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */
+		function onFocusout(event) {
+			if (sort.mode.value !== "keyboard") return;
+			const next = event.relatedTarget;
+			if (next && listEl.value?.contains(next)) return;
+			cancel();
+		}
+		const resolvedEmptyText = computed(() => props.emptyText ?? t("gr.sortable.empty", "Nothing to sort yet"));
+		const resolvedLabel = computed(() => props.ariaLabel ?? t("gr.sortable.label", "Sortable list"));
+		const handleLabel = computed(() => t("gr.sortable.handle", "Reorder"));
+		const listStyle = computed(() => props.maxHeight === void 0 ? void 0 : {
+			maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
+			overflow: "auto"
+		});
+		__expose({
+			/** Программная перестановка — та же, что делает перенос. */
+			move: (from, to) => applyMove(from, to),
+			focusItem: (index) => roving.focusKey(keys.value[index])
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(GrCard_default), { variant: __props.variant }, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "listEl",
+					ref: listEl,
+					role: "list",
+					"data-gr-sortable": "",
+					"aria-label": resolvedLabel.value,
+					"aria-disabled": __props.disabled ? "true" : void 0,
+					class: normalizeClass([unref(listClass)[__props.orientation], __props.divided ? unref(dividedClass) : ""]),
+					style: normalizeStyle(listStyle.value),
+					onFocusout
+				}, [isEmpty.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-gr-sortable-empty": "",
+					class: normalizeClass(unref(emptyClass))
+				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 2)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.modelValue, (item, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: keys.value[index],
+						ref_for: true,
+						ref: (el) => registerRow(keys.value[index], el),
+						role: "listitem",
+						"data-gr-sortable-item": "",
+						tabindex: __props.disabled ? -1 : unref(roving).tabindexFor(keys.value[index]),
+						"aria-roledescription": handleLabel.value,
+						"aria-posinset": index + 1,
+						"aria-setsize": count.value,
+						"aria-grabbed": unref(sort).mode.value === "keyboard" && unref(sort).source.value === keys.value[index] ? "true" : void 0,
+						class: normalizeClass(rowClass(index, keys.value[index])),
+						onKeydown: ($event) => onRowKeydown($event, keys.value[index]),
+						onFocus: ($event) => unref(roving).setActive(keys.value[index]),
+						onPointerdown: ($event) => __props.handleOnly ? void 0 : startPointer(keys.value[index], $event)
+					}, [createElementVNode("button", {
+						type: "button",
+						tabindex: "-1",
+						"data-gr-sortable-handle": "",
+						class: normalizeClass([unref(handleClass), __props.disabled ? unref(handleDisabledClass) : ""]),
+						"aria-label": handleLabel.value,
+						disabled: __props.disabled,
+						onPointerdown: ($event) => startPointer(keys.value[index], $event),
+						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+					}, [renderSlot(_ctx.$slots, "handle", {
+						item,
+						index,
+						disabled: __props.disabled
+					}, () => [createVNode(unref(grip_vertical_default), {
+						class: "block",
+						"aria-hidden": "true"
+					})])], 42, _hoisted_3), createElementVNode("div", { class: normalizeClass(unref(contentClass)) }, [renderSlot(_ctx.$slots, "item", {
+						item,
+						index,
+						dragging: unref(sort).mode.value === "pointer" && unref(sort).source.value === keys.value[index],
+						grabbed: unref(sort).mode.value === "keyboard" && unref(sort).source.value === keys.value[index]
+					}, () => [createTextVNode(toDisplayString(item), 1)])], 2)], 42, _hoisted_2);
+				}), 128))], 46, _hoisted_1)]),
+				_: 3
+			}, 8, ["variant"]);
+		};
+	}
+});
+//#endregion
+export { GrSortableList_default as t };

package/dist/components/GrSortableList/chunks/GrSortableList-DPjxilmN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSortableList-DPjxilmN.js","names":[],"sources":["../../../../src/components/GrSortableList/GrSortableList.vue","../../../../src/components/GrSortableList/GrSortableList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, nextTick, ref } from 'vue'\n\nimport GrCard, { type GrCardVariant } from '../GrCard'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useDragSort } from '../../composables/useDragSort'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { insertionIndex, moveItem } from '../../composables/internal/dragSortGeometry'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport type { GrSortableOrientation } from './grSortableListStyles'\nimport {\n  contentClass,\n  dividedClass,\n  emptyClass,\n  handleClass,\n  handleDisabledClass,\n  indicatorAfterClass,\n  indicatorBeforeClass,\n  listClass,\n  rowDisabledClass,\n  rowDraggingClass,\n  rowFocusClass,\n  rowGrabbedClass,\n  rowLayoutClass,\n} from './grSortableListStyles'\n\nimport IconGripVertical from '~icons/lucide/grip-vertical'\n\nexport interface GrSortableListProps<TItem = unknown> {\n  /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */\n  modelValue: TItem[]\n  /** Ключ элемента: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Список только для чтения: ни указателем, ни с клавиатуры. */\n  disabled?: boolean\n  /** Ось переноса. `horizontal` — ряд с переносом по ширине. */\n  orientation?: GrSortableOrientation\n  /** Поверхность под списком — вариант карточки. */\n  variant?: GrCardVariant\n  /** Разделители между строками. */\n  divided?: boolean\n  /** Тянуть можно только за ручку. Выключено — тянется вся строка. */\n  handleOnly?: boolean\n  /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */\n  maxHeight?: number | string\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Имя списка для скринридера. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSortableListEmits<TItem = unknown> {\n  (e: 'update:modelValue', value: TItem[]): void\n  (e: 'move', from: number, to: number): void\n  (e: 'change', value: TItem[]): void\n}\n\nconst props = withDefaults(defineProps<GrSortableListProps<T>>(), {\n  itemKey: undefined,\n  disabled: false,\n  orientation: 'vertical',\n  variant: undefined,\n  divided: true,\n  handleOnly: true,\n  maxHeight: undefined,\n  emptyText: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrSortableListEmits<T>>()\n\ndefineSlots<{\n  item?: (props: { item: T, index: number, dragging: boolean, grabbed: boolean }) => any\n  handle?: (props: { item: T, index: number, disabled: boolean }) => any\n  empty?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst listEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<string, HTMLElement>()\n\nconst count = computed(() => props.modelValue.length)\nconst isEmpty = computed(() => count.value === 0)\nconst isVertical = computed(() => props.orientation === 'vertical')\n\nfunction keyOf(item: T, index: number): string {\n  if (typeof props.itemKey === 'function') return String(props.itemKey(item, index))\n  if (typeof props.itemKey === 'string') return String((item as Record<string, unknown>)[props.itemKey])\n\n  return String(index)\n}\n\nconst keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)))\n\nfunction indexOfKey(key: string): number {\n  return keys.value.indexOf(key)\n}\n\nfunction registerRow(key: string, el: unknown): void {\n  if (el instanceof HTMLElement) {\n    rowEls.set(key, el)\n    return\n  }\n\n  // Перестановка размонтирует старый узел уже после того, как встал новый:\n  // снимаем запись, только если она протухла (приём из `GrTree`).\n  const previous = rowEls.get(key)\n  if (previous && !previous.isConnected) rowEls.delete(key)\n}\n\nconst roving = useRovingFocus<string>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => (isVertical.value ? 'vertical' : 'horizontal'),\n  wrap: () => false,\n})\n\nfunction applyMove(from: number, to: number): void {\n  if (from < 0 || to < 0 || from === to) return\n\n  const next = moveItem(props.modelValue, from, to)\n  emit('update:modelValue', next)\n  emit('move', from, to)\n  emit('change', next)\n}\n\nconst sort = useDragSort<string, number>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => props.orientation,\n  scroller: () => (props.maxHeight === undefined ? null : listEl.value),\n  disabled: () => props.disabled,\n  resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),\n  onDrop: (source, to) => applyMove(indexOfKey(source), to),\n  onUpdate: (source, target, mode) => {\n    // Объявляется только клавиатурный перенос: у мыши всё видно на экране, а\n    // поток объявлений на каждом движении указателя делает диктор бесполезным.\n    if (mode !== 'keyboard' || source === null) return\n\n    const position = (target ?? indexOfKey(source)) + 1\n    announce(t('gr.sortable.moved', 'Position {position} of {count}', { position, count: count.value }))\n  },\n})\n\nconst activeIndex = computed(() => (sort.source.value === null ? -1 : indexOfKey(sort.source.value)))\n\n/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */\nfunction indicatorFor(index: number): 'before' | 'after' | null {\n  const target = sort.target.value\n  if (target === null || !sort.isActive.value || index === activeIndex.value) return null\n\n  if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? 'before' : 'after'\n\n  return null\n}\n\nfunction rowClass(index: number, key: string): string[] {\n  const grabbed = sort.mode.value === 'keyboard' && sort.source.value === key\n  const dragging = sort.mode.value === 'pointer' && sort.source.value === key\n  const indicator = indicatorFor(index)\n\n  return [\n    rowLayoutClass,\n    rowFocusClass,\n    props.disabled ? rowDisabledClass : '',\n    grabbed ? rowGrabbedClass : '',\n    dragging ? rowDraggingClass : '',\n    indicator === 'before' ? indicatorBeforeClass : '',\n    indicator === 'after' ? indicatorAfterClass : '',\n  ]\n}\n\nfunction startPointer(key: string, event: PointerEvent): void {\n  if (props.disabled) return\n\n  sort.startFrom(key)(event)\n}\n\nfunction grab(key: string): void {\n  sort.grab(key)\n  if (sort.mode.value !== 'keyboard') return\n\n  // Цель ставится до объявления: `setTarget` сам объявляет позицию, и обратный\n  // порядок стёр бы более полное сообщение о захвате.\n  sort.setTarget(indexOfKey(key))\n  announce(t('gr.sortable.grabbed', 'Grabbed. Position {position} of {count}', {\n    position: indexOfKey(key) + 1,\n    count: count.value,\n  }))\n}\n\nasync function drop(key: string): Promise<void> {\n  const target = sort.target.value\n  sort.drop()\n\n  announce(t('gr.sortable.dropped', 'Dropped at position {position} of {count}', {\n    position: (target ?? 0) + 1,\n    count: count.value,\n  }))\n\n  // Фокус остаётся на перенесённой строке: иначе после переноса он падает на\n  // тело документа и клавиатурный сценарий обрывается на первом же шаге.\n  await nextTick()\n  await roving.focusKey(key)\n}\n\nfunction cancel(): void {\n  if (!sort.isActive.value) return\n\n  sort.cancel()\n  announce(t('gr.sortable.cancelled', 'Move cancelled'))\n}\n\nfunction moveTargetBy(delta: number): void {\n  const current = sort.target.value ?? activeIndex.value\n  const next = Math.min(count.value - 1, Math.max(0, current + delta))\n\n  if (next !== current) sort.setTarget(next)\n}\n\nfunction onRowKeydown(event: KeyboardEvent, key: string): void {\n  if (props.disabled) return\n\n  const forward = isVertical.value ? 'ArrowDown' : 'ArrowRight'\n  const backward = isVertical.value ? 'ArrowUp' : 'ArrowLeft'\n  const grabbed = sort.mode.value === 'keyboard'\n\n  if (event.key === 'Escape') {\n    if (!grabbed) return\n\n    event.preventDefault()\n    cancel()\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    if (grabbed) void drop(key)\n    else grab(key)\n    return\n  }\n\n  if (grabbed) {\n    // Взятая строка забирает стрелки себе: двигается она, а не фокус.\n    if (event.key === forward || event.key === backward) {\n      event.preventDefault()\n      moveTargetBy(event.key === forward ? 1 : -1)\n    }\n    return\n  }\n\n  roving.handleNavigationKeys(event)\n}\n\n/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */\nfunction onFocusout(event: FocusEvent): void {\n  if (sort.mode.value !== 'keyboard') return\n\n  const next = event.relatedTarget as Node | null\n  if (next && listEl.value?.contains(next)) return\n\n  cancel()\n}\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.sortable.empty', 'Nothing to sort yet'))\nconst resolvedLabel = computed(() => props.ariaLabel ?? t('gr.sortable.label', 'Sortable list'))\nconst handleLabel = computed(() => t('gr.sortable.handle', 'Reorder'))\n\nconst listStyle = computed(() => (props.maxHeight === undefined\n  ? undefined\n  : { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflow: 'auto' }))\n\ndefineExpose({\n  /** Программная перестановка — та же, что делает перенос. */\n  move: (from: number, to: number) => applyMove(from, to),\n  focusItem: (index: number) => roving.focusKey(keys.value[index]),\n})\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      role=\"list\"\n      data-gr-sortable\n      :aria-label=\"resolvedLabel\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"[listClass[orientation], divided ? dividedClass : '']\"\n      :style=\"listStyle\"\n      @focusout=\"onFocusout\"\n    >\n      <div\n        v-if=\"isEmpty\"\n        data-gr-sortable-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div\n        v-for=\"(item, index) in modelValue\"\n        v-else\n        :key=\"keys[index]\"\n        :ref=\"el => registerRow(keys[index], el)\"\n        role=\"listitem\"\n        data-gr-sortable-item\n        :tabindex=\"disabled ? -1 : roving.tabindexFor(keys[index])\"\n        :aria-roledescription=\"handleLabel\"\n        :aria-posinset=\"index + 1\"\n        :aria-setsize=\"count\"\n        :aria-grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index] ? 'true' : undefined\"\n        :class=\"rowClass(index, keys[index])\"\n        @keydown=\"onRowKeydown($event, keys[index])\"\n        @focus=\"roving.setActive(keys[index])\"\n        @pointerdown=\"handleOnly ? undefined : startPointer(keys[index], $event)\"\n      >\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          data-gr-sortable-handle\n          :class=\"[handleClass, disabled ? handleDisabledClass : '']\"\n          :aria-label=\"handleLabel\"\n          :disabled=\"disabled\"\n          @pointerdown=\"startPointer(keys[index], $event)\"\n          @click.stop\n        >\n          <slot\n            name=\"handle\"\n            :item=\"item\"\n            :index=\"index\"\n            :disabled=\"disabled\"\n          >\n            <IconGripVertical class=\"block\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n\n        <div :class=\"contentClass\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n            :dragging=\"sort.mode.value === 'pointer' && sort.source.value === keys[index]\"\n            :grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index]\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n      </div>\n    </div>\n  </GrCard>\n</template>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { computed, nextTick, ref } from 'vue'\n\nimport GrCard, { type GrCardVariant } from '../GrCard'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useDragSort } from '../../composables/useDragSort'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { insertionIndex, moveItem } from '../../composables/internal/dragSortGeometry'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport type { GrSortableOrientation } from './grSortableListStyles'\nimport {\n  contentClass,\n  dividedClass,\n  emptyClass,\n  handleClass,\n  handleDisabledClass,\n  indicatorAfterClass,\n  indicatorBeforeClass,\n  listClass,\n  rowDisabledClass,\n  rowDraggingClass,\n  rowFocusClass,\n  rowGrabbedClass,\n  rowLayoutClass,\n} from './grSortableListStyles'\n\nimport IconGripVertical from '~icons/lucide/grip-vertical'\n\nexport interface GrSortableListProps<TItem = unknown> {\n  /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */\n  modelValue: TItem[]\n  /** Ключ элемента: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Список только для чтения: ни указателем, ни с клавиатуры. */\n  disabled?: boolean\n  /** Ось переноса. `horizontal` — ряд с переносом по ширине. */\n  orientation?: GrSortableOrientation\n  /** Поверхность под списком — вариант карточки. */\n  variant?: GrCardVariant\n  /** Разделители между строками. */\n  divided?: boolean\n  /** Тянуть можно только за ручку. Выключено — тянется вся строка. */\n  handleOnly?: boolean\n  /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */\n  maxHeight?: number | string\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Имя списка для скринридера. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSortableListEmits<TItem = unknown> {\n  (e: 'update:modelValue', value: TItem[]): void\n  (e: 'move', from: number, to: number): void\n  (e: 'change', value: TItem[]): void\n}\n\nconst props = withDefaults(defineProps<GrSortableListProps<T>>(), {\n  itemKey: undefined,\n  disabled: false,\n  orientation: 'vertical',\n  variant: undefined,\n  divided: true,\n  handleOnly: true,\n  maxHeight: undefined,\n  emptyText: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrSortableListEmits<T>>()\n\ndefineSlots<{\n  item?: (props: { item: T, index: number, dragging: boolean, grabbed: boolean }) => any\n  handle?: (props: { item: T, index: number, disabled: boolean }) => any\n  empty?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst listEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<string, HTMLElement>()\n\nconst count = computed(() => props.modelValue.length)\nconst isEmpty = computed(() => count.value === 0)\nconst isVertical = computed(() => props.orientation === 'vertical')\n\nfunction keyOf(item: T, index: number): string {\n  if (typeof props.itemKey === 'function') return String(props.itemKey(item, index))\n  if (typeof props.itemKey === 'string') return String((item as Record<string, unknown>)[props.itemKey])\n\n  return String(index)\n}\n\nconst keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)))\n\nfunction indexOfKey(key: string): number {\n  return keys.value.indexOf(key)\n}\n\nfunction registerRow(key: string, el: unknown): void {\n  if (el instanceof HTMLElement) {\n    rowEls.set(key, el)\n    return\n  }\n\n  // Перестановка размонтирует старый узел уже после того, как встал новый:\n  // снимаем запись, только если она протухла (приём из `GrTree`).\n  const previous = rowEls.get(key)\n  if (previous && !previous.isConnected) rowEls.delete(key)\n}\n\nconst roving = useRovingFocus<string>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => (isVertical.value ? 'vertical' : 'horizontal'),\n  wrap: () => false,\n})\n\nfunction applyMove(from: number, to: number): void {\n  if (from < 0 || to < 0 || from === to) return\n\n  const next = moveItem(props.modelValue, from, to)\n  emit('update:modelValue', next)\n  emit('move', from, to)\n  emit('change', next)\n}\n\nconst sort = useDragSort<string, number>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => props.orientation,\n  scroller: () => (props.maxHeight === undefined ? null : listEl.value),\n  disabled: () => props.disabled,\n  resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),\n  onDrop: (source, to) => applyMove(indexOfKey(source), to),\n  onUpdate: (source, target, mode) => {\n    // Объявляется только клавиатурный перенос: у мыши всё видно на экране, а\n    // поток объявлений на каждом движении указателя делает диктор бесполезным.\n    if (mode !== 'keyboard' || source === null) return\n\n    const position = (target ?? indexOfKey(source)) + 1\n    announce(t('gr.sortable.moved', 'Position {position} of {count}', { position, count: count.value }))\n  },\n})\n\nconst activeIndex = computed(() => (sort.source.value === null ? -1 : indexOfKey(sort.source.value)))\n\n/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */\nfunction indicatorFor(index: number): 'before' | 'after' | null {\n  const target = sort.target.value\n  if (target === null || !sort.isActive.value || index === activeIndex.value) return null\n\n  if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? 'before' : 'after'\n\n  return null\n}\n\nfunction rowClass(index: number, key: string): string[] {\n  const grabbed = sort.mode.value === 'keyboard' && sort.source.value === key\n  const dragging = sort.mode.value === 'pointer' && sort.source.value === key\n  const indicator = indicatorFor(index)\n\n  return [\n    rowLayoutClass,\n    rowFocusClass,\n    props.disabled ? rowDisabledClass : '',\n    grabbed ? rowGrabbedClass : '',\n    dragging ? rowDraggingClass : '',\n    indicator === 'before' ? indicatorBeforeClass : '',\n    indicator === 'after' ? indicatorAfterClass : '',\n  ]\n}\n\nfunction startPointer(key: string, event: PointerEvent): void {\n  if (props.disabled) return\n\n  sort.startFrom(key)(event)\n}\n\nfunction grab(key: string): void {\n  sort.grab(key)\n  if (sort.mode.value !== 'keyboard') return\n\n  // Цель ставится до объявления: `setTarget` сам объявляет позицию, и обратный\n  // порядок стёр бы более полное сообщение о захвате.\n  sort.setTarget(indexOfKey(key))\n  announce(t('gr.sortable.grabbed', 'Grabbed. Position {position} of {count}', {\n    position: indexOfKey(key) + 1,\n    count: count.value,\n  }))\n}\n\nasync function drop(key: string): Promise<void> {\n  const target = sort.target.value\n  sort.drop()\n\n  announce(t('gr.sortable.dropped', 'Dropped at position {position} of {count}', {\n    position: (target ?? 0) + 1,\n    count: count.value,\n  }))\n\n  // Фокус остаётся на перенесённой строке: иначе после переноса он падает на\n  // тело документа и клавиатурный сценарий обрывается на первом же шаге.\n  await nextTick()\n  await roving.focusKey(key)\n}\n\nfunction cancel(): void {\n  if (!sort.isActive.value) return\n\n  sort.cancel()\n  announce(t('gr.sortable.cancelled', 'Move cancelled'))\n}\n\nfunction moveTargetBy(delta: number): void {\n  const current = sort.target.value ?? activeIndex.value\n  const next = Math.min(count.value - 1, Math.max(0, current + delta))\n\n  if (next !== current) sort.setTarget(next)\n}\n\nfunction onRowKeydown(event: KeyboardEvent, key: string): void {\n  if (props.disabled) return\n\n  const forward = isVertical.value ? 'ArrowDown' : 'ArrowRight'\n  const backward = isVertical.value ? 'ArrowUp' : 'ArrowLeft'\n  const grabbed = sort.mode.value === 'keyboard'\n\n  if (event.key === 'Escape') {\n    if (!grabbed) return\n\n    event.preventDefault()\n    cancel()\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    if (grabbed) void drop(key)\n    else grab(key)\n    return\n  }\n\n  if (grabbed) {\n    // Взятая строка забирает стрелки себе: двигается она, а не фокус.\n    if (event.key === forward || event.key === backward) {\n      event.preventDefault()\n      moveTargetBy(event.key === forward ? 1 : -1)\n    }\n    return\n  }\n\n  roving.handleNavigationKeys(event)\n}\n\n/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */\nfunction onFocusout(event: FocusEvent): void {\n  if (sort.mode.value !== 'keyboard') return\n\n  const next = event.relatedTarget as Node | null\n  if (next && listEl.value?.contains(next)) return\n\n  cancel()\n}\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.sortable.empty', 'Nothing to sort yet'))\nconst resolvedLabel = computed(() => props.ariaLabel ?? t('gr.sortable.label', 'Sortable list'))\nconst handleLabel = computed(() => t('gr.sortable.handle', 'Reorder'))\n\nconst listStyle = computed(() => (props.maxHeight === undefined\n  ? undefined\n  : { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflow: 'auto' }))\n\ndefineExpose({\n  /** Программная перестановка — та же, что делает перенос. */\n  move: (from: number, to: number) => applyMove(from, to),\n  focusItem: (index: number) => roving.focusKey(keys.value[index]),\n})\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      role=\"list\"\n      data-gr-sortable\n      :aria-label=\"resolvedLabel\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"[listClass[orientation], divided ? dividedClass : '']\"\n      :style=\"listStyle\"\n      @focusout=\"onFocusout\"\n    >\n      <div\n        v-if=\"isEmpty\"\n        data-gr-sortable-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div\n        v-for=\"(item, index) in modelValue\"\n        v-else\n        :key=\"keys[index]\"\n        :ref=\"el => registerRow(keys[index], el)\"\n        role=\"listitem\"\n        data-gr-sortable-item\n        :tabindex=\"disabled ? -1 : roving.tabindexFor(keys[index])\"\n        :aria-roledescription=\"handleLabel\"\n        :aria-posinset=\"index + 1\"\n        :aria-setsize=\"count\"\n        :aria-grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index] ? 'true' : undefined\"\n        :class=\"rowClass(index, keys[index])\"\n        @keydown=\"onRowKeydown($event, keys[index])\"\n        @focus=\"roving.setActive(keys[index])\"\n        @pointerdown=\"handleOnly ? undefined : startPointer(keys[index], $event)\"\n      >\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          data-gr-sortable-handle\n          :class=\"[handleClass, disabled ? handleDisabledClass : '']\"\n          :aria-label=\"handleLabel\"\n          :disabled=\"disabled\"\n          @pointerdown=\"startPointer(keys[index], $event)\"\n          @click.stop\n        >\n          <slot\n            name=\"handle\"\n            :item=\"item\"\n            :index=\"index\"\n            :disabled=\"disabled\"\n          >\n            <IconGripVertical class=\"block\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n\n        <div :class=\"contentClass\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n            :dragging=\"sort.mode.value === 'pointer' && sort.source.value === keys[index]\"\n            :grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index]\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n      </div>\n    </div>\n  </GrCard>\n</template>\n"],"mappings":"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"}

package/dist/components/GrSortableList/index.js

@@ -1,3 +1,3 @@
-import { n as grSortableListSafelist, t as grSortableListConfig } from "../../chunks/config-DAX8Deh1.js";
-import { t as GrSortableList_default } from "./chunks/GrSortableList-XB7mXM1W.js";
+import { n as grSortableListSafelist, t as grSortableListConfig } from "../../chunks/config-DAX8Deh12.js";
+import { t as GrSortableList_default } from "./chunks/GrSortableList-DPjxilmN.js";
 export { GrSortableList_default as GrSortableList, GrSortableList_default as default, grSortableListConfig, grSortableListSafelist };

package/dist/components/GrSplitter/chunks/GrSplitter-B9_JrT7q.js

@@ -0,0 +1,259 @@
+import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { useDragGesture } from "../../../composables/useDragGesture.js";
+import { a as separatorClass, i as rootClass, r as paneClass } from "../../../chunks/config-BE6n20np.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useId, watch } from "vue";
+import '../styles.css';//#region src/components/GrSplitter/splitterGeometry.ts
+function toFinite(value, fallback) {
+	return Number.isFinite(value) ? value : fallback;
+}
+/**
+* Приводит долю первой панели к допустимой.
+*
+* При конфликте `min` и `minEnd` побеждает `min`: первая панель не должна
+* уезжать под свой минимум, даже если вторая при этом окажется уже своего.
+* Обратный порядок дал бы панель, которую пользователь не может вернуть.
+*/
+function clampSize(value, bounds) {
+	const min = Math.min(100, Math.max(0, toFinite(bounds.min, 0)));
+	const max = Math.min(100, Math.max(min, toFinite(bounds.max, 100)));
+	const minEnd = Math.min(100, Math.max(0, toFinite(bounds.minEnd, 0)));
+	const upper = Math.max(min, Math.min(max, 100 - minEnd));
+	return Math.min(upper, Math.max(min, toFinite(value, min)));
+}
+/** Доля, соответствующая позиции указателя. Вне контейнера — его края. */
+function sizeFromPointer(rect, clientX, clientY, orientation) {
+	const total = orientation === "horizontal" ? rect.width : rect.height;
+	if (!(total > 0)) return 0;
+	const offset = orientation === "horizontal" ? clientX - rect.left : clientY - rect.top;
+	return Math.min(100, Math.max(0, offset / total * 100));
+}
+/**
+* Тянуть панель ниже половины её минимума пользователь может только с одним
+* намерением — убрать её совсем. Это единственный способ свернуть панель
+* мышью: двойной клик занят сбросом к дефолту, `Enter` — клавиатурой.
+*/
+function shouldCollapse(value, bounds) {
+	const min = Math.min(100, Math.max(0, toFinite(bounds.min, 0)));
+	if (min <= 0) return false;
+	return toFinite(value, min) < min / 2;
+}
+//#endregion
+//#region src/components/GrSplitter/GrSplitter.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-orientation",
+	"data-dragging",
+	"data-collapsed"
+];
+var _hoisted_2 = ["id"];
+var _hoisted_3 = [
+	"tabindex",
+	"aria-orientation",
+	"aria-label",
+	"aria-controls",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-disabled"
+];
+//#endregion
+//#region src/components/GrSplitter/GrSplitter.vue
+var GrSplitter_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSplitter",
+	props: {
+		modelValue: { default: void 0 },
+		defaultSize: { default: 50 },
+		orientation: { default: void 0 },
+		min: { default: 10 },
+		max: { default: 90 },
+		minEnd: { default: 10 },
+		step: { default: 1 },
+		bigStep: { default: 10 },
+		collapsible: {
+			type: Boolean,
+			default: void 0
+		},
+		collapsed: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"update:collapsed",
+		"change"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const orientation = useGrComponentProp("GrSplitter", "orientation", () => props.orientation, "horizontal");
+		const collapsible = useGrComponentProp("GrSplitter", "collapsible", () => props.collapsible, false);
+		const startId = useId();
+		const rootEl = ref(null);
+		const bounds = computed(() => ({
+			min: props.min,
+			max: props.max,
+			minEnd: props.minEnd
+		}));
+		/**
+		* Локальное состояние с синхронизацией из пропа — поддерживает и controlled
+		* (`v-model`), и uncontrolled (сплиттер помнит размер сам), как `collapsed`
+		* у `GrSidebar`.
+		*/
+		const sizeState = ref(clampSize(props.modelValue ?? props.defaultSize, bounds.value));
+		watch(() => props.modelValue, (value) => {
+			if (value !== void 0) sizeState.value = clampSize(value, bounds.value);
+		});
+		const collapsedState = ref(props.collapsed);
+		watch(() => props.collapsed, (value) => collapsedState.value = value);
+		/** Размер, к которому возвращает `Enter`: свёрнутость не должна его терять. */
+		const restoreSize = ref(sizeState.value);
+		/** Значение до начала жеста: `pointercancel` откатывает к нему. */
+		let sizeBeforeDrag = sizeState.value;
+		let collapsedBeforeDrag = false;
+		const isCollapsed = computed(() => collapsible.value && collapsedState.value);
+		/** Что видно на экране: свёрнутая панель — это ноль в треке, но не ноль в модели. */
+		const renderedSize = computed(() => isCollapsed.value ? 0 : clampSize(sizeState.value, bounds.value));
+		const gridStyle = computed(() => {
+			const track = `${renderedSize.value}% var(--gr-splitter-size, 6px) 1fr`;
+			return orientation.value === "horizontal" ? { gridTemplateColumns: track } : { gridTemplateRows: track };
+		});
+		/**
+		* `aria-orientation` описывает **сам разделитель**, а не раскладку: панели,
+		* стоящие рядом, разделяет вертикальная полоса.
+		*/
+		const separatorOrientation = computed(() => orientation.value === "horizontal" ? "vertical" : "horizontal");
+		const label = computed(() => props.ariaLabel ?? t("gr.splitter.label", "Resize panels"));
+		function setSize(next, commit) {
+			const value = clampSize(next, bounds.value);
+			const changed = value !== sizeState.value;
+			sizeState.value = value;
+			if (changed) emit("update:modelValue", value);
+			if (commit) emit("change", value);
+		}
+		function setCollapsed(value) {
+			if (collapsedState.value === value) return;
+			collapsedState.value = value;
+			emit("update:collapsed", value);
+		}
+		/**
+		* Шаг размера. Свёрнутая панель на первое нажатие возвращается — двигать
+		* то, чего не видно, значит менять раскладку вслепую.
+		*/
+		function moveBy(delta) {
+			if (isCollapsed.value) {
+				setCollapsed(false);
+				setSize(restoreSize.value, true);
+				return;
+			}
+			restoreSize.value = clampSize(sizeState.value + delta, bounds.value);
+			setSize(sizeState.value + delta, true);
+		}
+		function toggleCollapsed() {
+			if (!collapsible.value) return;
+			if (isCollapsed.value) {
+				setCollapsed(false);
+				setSize(restoreSize.value, true);
+				return;
+			}
+			restoreSize.value = sizeState.value;
+			setCollapsed(true);
+			emit("change", 0);
+		}
+		function reset() {
+			setCollapsed(false);
+			restoreSize.value = clampSize(props.defaultSize, bounds.value);
+			setSize(props.defaultSize, true);
+		}
+		function onPointerMove(event) {
+			const rect = rootEl.value?.getBoundingClientRect();
+			if (!rect) return;
+			event.preventDefault();
+			const raw = sizeFromPointer(rect, event.clientX, event.clientY, orientation.value);
+			if (collapsible.value && shouldCollapse(raw, bounds.value)) {
+				if (!collapsedState.value) restoreSize.value = sizeState.value;
+				setCollapsed(true);
+				return;
+			}
+			setCollapsed(false);
+			restoreSize.value = clampSize(raw, bounds.value);
+			setSize(raw, false);
+		}
+		const { isDragging, start: onPointerDown } = useDragGesture({
+			disabled: () => props.disabled,
+			onStart: () => {
+				sizeBeforeDrag = sizeState.value;
+				collapsedBeforeDrag = collapsedState.value;
+			},
+			onMove: onPointerMove,
+			onEnd: () => emit("change", renderedSize.value),
+			onCancel: () => {
+				setCollapsed(collapsedBeforeDrag);
+				setSize(sizeBeforeDrag, false);
+			}
+		});
+		const decreaseKey = computed(() => orientation.value === "horizontal" ? "ArrowLeft" : "ArrowUp");
+		const increaseKey = computed(() => orientation.value === "horizontal" ? "ArrowRight" : "ArrowDown");
+		function onKeydown(event) {
+			if (props.disabled) return;
+			const step = event.shiftKey ? props.bigStep : props.step;
+			if (event.key === decreaseKey.value) moveBy(-step);
+			else if (event.key === increaseKey.value) moveBy(step);
+			else if (event.key === "Home") moveBy(-100);
+			else if (event.key === "End") moveBy(100);
+			else if (event.key === "Enter") toggleCollapsed();
+			else return;
+			event.preventDefault();
+		}
+		function onDoubleClick() {
+			if (props.disabled) return;
+			reset();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-splitter": "",
+				"data-orientation": unref(orientation),
+				"data-dragging": unref(isDragging) ? "" : void 0,
+				"data-collapsed": isCollapsed.value ? "" : void 0,
+				class: normalizeClass(unref(rootClass)),
+				style: normalizeStyle(gridStyle.value)
+			}, [
+				createElementVNode("div", {
+					id: unref(startId),
+					"data-gr-splitter-pane": "start",
+					class: normalizeClass(unref(paneClass))
+				}, [renderSlot(_ctx.$slots, "start")], 10, _hoisted_2),
+				createElementVNode("div", {
+					"data-gr-splitter-separator": "",
+					role: "separator",
+					tabindex: __props.disabled ? void 0 : 0,
+					"aria-orientation": separatorOrientation.value,
+					"aria-label": label.value,
+					"aria-controls": unref(startId),
+					"aria-valuenow": Math.round(renderedSize.value),
+					"aria-valuemin": Math.round(__props.min),
+					"aria-valuemax": Math.round(__props.max),
+					"aria-disabled": __props.disabled ? "true" : void 0,
+					class: normalizeClass(unref(separatorClass)),
+					onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args)),
+					onKeydown,
+					onDblclick: onDoubleClick
+				}, null, 42, _hoisted_3),
+				createElementVNode("div", {
+					"data-gr-splitter-pane": "end",
+					class: normalizeClass(unref(paneClass))
+				}, [renderSlot(_ctx.$slots, "end")], 2)
+			], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { sizeFromPointer as n, GrSplitter_default as t };