vgapp 1.4.7 → 1.4.9

package/app/modules/vgfiles/scss/_variables.scss

@@ -52,9 +52,11 @@ $files-map: (
 	drop-file-flex: calc(25% - 6px),
 
 	drop-remove-offset: 10px,
-	drop-remove-size: 36px,
+	drop-remove-size: 28px,
 	drop-remove-radius: 3px,
 	drop-remove-hover-bg: rgb(var(--vg-body-bg-rgb, 255 255 255) / .4),
+	drop-actions-gap: 4px,
+	drop-control-icon-size: 16px,
 
 	// stat
 	stat-padding: 12px 8px,

package/app/modules/vgfiles/scss/vgfiles.scss

@@ -48,6 +48,7 @@
 
 			svg {
 				width: 24px;
+				height: 24px;
 
 				path {
 					fill: var(--vg-files-label-color);
@@ -195,7 +196,7 @@
 				.stat-label {
 					svg {
 						path {
-							fill: var(--vg-secondary-bg);
+							fill: var(--vg-text-color);
 						}
 					}
 				}
@@ -261,7 +262,7 @@
 			}
 
 			.file {
-				--vg-button-color: var(--vg-secondary);
+				--vg-button-color: var(--vg-secondary-color, var(--vg-secondary, var(--vg-text-muted-color, #6b7280)));
 				display: flex;
 				align-items: center;
 				gap: var(--vg-files-info-gap);
@@ -434,7 +435,7 @@
 						position: relative;
 
 						&:hover {
-							--vg-button-color: var(--vg-danger);
+							--vg-button-color: var(--vg-danger-color, var(--vg-danger, #ff2a2c));
 						}
 
 						i {
@@ -531,6 +532,7 @@
 	}
 
 	&-drop {
+		display: block;
 		background-color: var(--vg-files-drop-bg);
 		border: var(--vg-files-drop-border-width) var(--vg-files-drop-border-style) var(--vg-files-drop-border-color);
 		cursor: pointer;
@@ -548,6 +550,14 @@
 			height: auto;
 			min-height: var(--vg-files-drop-height);
 
+			&:has(.vg-files-drop-message.has-files) {
+				cursor: default;
+			}
+
+			.vg-files-drop-message.has-files {
+				cursor: pointer;
+			}
+
 			&:hover {
 				animation: none;
 				background-image: none;
@@ -637,7 +647,7 @@
 			overflow: hidden;
 
 			.file {
-				--vg-button-color: var(--vg-body-color);
+				--vg-button-color: var(--vg-text-color, var(--vg-body-color, #000000));
 				border-radius: var(--vg-files-drop-file-radius);
 				position: relative;
 				overflow: hidden;
@@ -708,7 +718,33 @@
 					top: var(--vg-files-drop-remove-offset);
 					display: flex;
 					flex-direction: column;
-					gap: 8px;
+					align-items: flex-end;
+					gap: var(--vg-files-drop-actions-gap);
+					opacity: .2;
+					transform: var(--vg-transition-base);
+
+					.file-actions {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						gap: var(--vg-files-drop-actions-gap);
+
+						button {
+							width: var(--vg-files-drop-remove-size);
+							height: var(--vg-files-drop-remove-size);
+							min-width: var(--vg-files-drop-remove-size);
+							min-height: var(--vg-files-drop-remove-size);
+							max-width: var(--vg-files-drop-remove-size);
+							max-height: var(--vg-files-drop-remove-size);
+							padding: 0;
+							justify-content: center;
+
+							svg {
+								width: var(--vg-files-drop-control-icon-size);
+								height: var(--vg-files-drop-control-icon-size);
+							}
+						}
+					}
 
 					.file-remove {
 						.file-failing-actions {
@@ -717,7 +753,7 @@
 
 						button {
 							background: var(--vg-body-bg);
-							color: var(--vg-body-color);
+							color: var(--vg-text-color, var(--vg-body-color, #000000));
 							border: none;
 							cursor: pointer;
 							outline: none;
@@ -729,12 +765,12 @@
 							position: relative;
 							width: var(--vg-files-drop-remove-size);
 							height: var(--vg-files-drop-remove-size);
+							min-width: var(--vg-files-drop-remove-size);
+							min-height: var(--vg-files-drop-remove-size);
+							max-width: var(--vg-files-drop-remove-size);
+							max-height: var(--vg-files-drop-remove-size);
 							border-radius: var(--vg-files-drop-remove-radius);
 
-							&:hover {
-								background-color: var(--vg-files-drop-remove-hover-bg);
-							}
-
 							i {
 								position: absolute;
 								left: 0;
@@ -746,6 +782,9 @@
 								justify-content: center;
 
 								svg {
+									width: var(--vg-files-drop-control-icon-size);
+									height: var(--vg-files-drop-control-icon-size);
+
 									path {
 										fill: var(--vg-button-color);
 									}
@@ -754,6 +793,12 @@
 						}
 					}
 				}
+
+				&:hover {
+					.file-custom {
+						opacity: 1;
+					}
+				}
 			}
 		}
 	}

package/app/modules/vgformsender/js/vgformsender.js

@@ -1,4 +1,4 @@
-/**
+/**
  * VGFormSender Module
  *
  * Этот модуль отвечает за отправку форм с поддержкой AJAX, валидации, отображения уведомлений
@@ -702,7 +702,10 @@ class VGFormSender extends BaseModule {
 			$collapse.classList.add(_this._params.classes.alertCollapse);
 			$collapse.classList.add('vg-collapse');
 			$collapse.id = _this._params.classes.general + '-' + makeRandomString();
-			$collapse.append(_this.setDataRelationStatus($collapse, status, data, 'collapse'));
+
+			const $alert = _this.setDataRelationStatus($collapse, status, data, 'collapse');
+			$alert.classList.add(CLASS_NAME_ALERT, CLASS_NAME_ALERT + '-' + status);
+			$collapse.append($alert);
 
 			_this._element.prepend($collapse);
 		}

package/app/modules/vgloadmore/js/vgloadmore.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: подгрузка статического и удалённого контента по кнопке или при прокрутке.
+ * Возможности: Data API, AJAX-пагинация, infinite scroll, события, анимация и автоcкрытие триггера.
+ */
 import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import { execute, isObject, mergeDeepObject, normalizeData } from "../../../utils/js/functions";
@@ -213,7 +217,7 @@ class VGLoadMore extends BaseModule {
 
 		const buttonData = {
 			limit: this._params.limit,
-			offset: this._params.offset,
+			offset: this._params.offset || this._params.limit,
 			output: this._params.output,
 			autohide: this._params.autohide,
 			animate: this._params.animate,
@@ -278,7 +282,7 @@ class VGLoadMore extends BaseModule {
 
 		this._observer.disconnect();
 
-		const container = Selectors.find(this._params.target) || this._element.parentNode;
+		const container = this._getTargetContainer();
 		const items = Selectors.findAll(`.${this._params.elements}`, container);
 		const visibleItems = items.filter(item => item.classList.contains(CLASS_NAME_SHOW));
 		const lastVisible = visibleItems[visibleItems.length - 1];
@@ -331,7 +335,10 @@ class VGLoadMore extends BaseModule {
 
 		const originalText = this._params.button.text;
 
-		this._params.ajax.data = { limit: this._params.limit, offset: this._params.offset };
+		this._params.ajax.data = mergeDeepObject(this._params.ajax.data, {
+			limit: this._params.limit,
+			offset: this._params.offset
+		});
 
 		this._route((status, data, responseTarget) => {
 			if (status === 'error' || typeof data?.response !== 'string') return;
@@ -348,7 +355,7 @@ class VGLoadMore extends BaseModule {
 			this._observeLastVisibleItem();
 
 			const noMoreData = !data.response.trim();
-			if (this._params.autohide && this._params.detach && noMoreData) {
+			if (this._params.autohide && noMoreData) {
 				this._autohideTrigger();
 			}
 
@@ -366,7 +373,7 @@ class VGLoadMore extends BaseModule {
 	 * @private
 	 */
 	staticLoad(callback) {
-		const container = Selectors.find(this._params.target) || this._element.parentNode;
+		const container = this._getTargetContainer();
 		const items = Selectors.findAll(`.${this._params.elements}`, container);
 		const start = this._params.offset;
 		const end = start + this._params.limit;
@@ -394,14 +401,32 @@ class VGLoadMore extends BaseModule {
 		this._observeLastVisibleItem();
 
 		const remaining = items.slice(end);
-		if (this._params.autohide && this._params.detach && remaining.length === 0) {
+		if (this._params.autohide && remaining.length === 0) {
 			this._autohideTrigger();
 		}
 
 		this._restoreElementState(this._params.button.text);
+		EventHandler.trigger(this._element, EVENT_KEY_LOADED, {
+			stats: 'success',
+			data: {
+				items: newItems,
+				offset: this._params.offset,
+				remaining: remaining.length
+			}
+		});
 		execute(callback, [this, this._element]);
 	}
 
+	/**
+	 * Возвращает контейнер элементов для container- и trigger-режимов.
+	 * @returns {Element|null}
+	 * @private
+	 */
+	_getTargetContainer() {
+		return Selectors.find(this._params.target)
+			|| (this._isToggleElement ? this._element.parentNode : this._element);
+	}
+
 	/**
 	 * Восстанавливает состояние кнопки (включает, устанавливает текст)
 	 * @param {string} text - Текст кнопки
@@ -425,6 +450,9 @@ class VGLoadMore extends BaseModule {
 			this._observer = null;
 		} else if (this._params.detach && this._element.parentNode) {
 			this._element.remove();
+		} else {
+			this._element.classList.add(CLASS_NAME_HIDE);
+			this._element.setAttribute('aria-hidden', 'true');
 		}
 	}
 
@@ -456,4 +484,4 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	VGLoadMore.getOrCreateInstance(this).toggle();
 });
 
-export default VGLoadMore;
+export default VGLoadMore;

package/app/modules/vgnestable/js/vgnestable.js

@@ -1,3 +1,7 @@
+/**
+ * Описание: доступная вложенная сортировка списков в стиле Nestable без зависимости от jQuery.
+ * Возможности: drag-and-drop мышью и touch, клавиатурное перемещение, связанные списки, collapse API, сериализация и AJAX-сохранение.
+ */
 import BaseModule from "../../base-module";
 import VGCollapse from "../../vgcollapse/js/vgcollapse";
 import { mergeDeepObject, normalizeData } from "../../../utils/js/functions";
@@ -11,6 +15,7 @@ const NAME = "nestable";
 const NAME_KEY = "vg.nestable";
 
 const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="nestable"]';
+const SELECTOR_DATA_ACTION = '[data-vg-nestable-action]';
 
 const CLASS_ITEM_DRAGGING = "is-dragging";
 const CLASS_ITEM_GHOST = "is-drag-ghost";
@@ -24,6 +29,7 @@ const CLASS_INNER = "vg-nestable-inner";
 const CLASS_HANDLE = "vg-nestable-handle";
 const CLASS_HANDLE_ICON = "vg-nestable-handle-icon";
 const CLASS_COLLAPSE_TOGGLE = "vg-nestable-collapse-toggle";
+const CLASS_EMPTY = "vg-nestable-empty";
 const CLASS_DROP_TARGET = "is-drop-target";
 const CLASS_DROP_DENIED = "is-drop-denied";
 const CLASS_DROP_BEFORE = "is-drop-before";
@@ -44,6 +50,8 @@ const EVENT_KEY_DROP = `${NAME_KEY}.drop`;
 const EVENT_KEY_TRANSFER = `${NAME_KEY}.transfer`;
 const EVENT_KEY_PLACEHOLDER_MOVE = `${NAME_KEY}.placeholdermove`;
 const EVENT_KEY_DESTROY = `${NAME_KEY}.destroy`;
+const EVENT_KEY_COLLAPSE = `${NAME_KEY}.collapse`;
+const EVENT_KEY_EXPAND = `${NAME_KEY}.expand`;
 
 class VGNestable extends BaseModule {
 	static _groups = new Map();
@@ -58,8 +66,10 @@ class VGNestable extends BaseModule {
 			itemselector: ".vg-nestable-item", // Sortable item selector.
 			handleselector: ".vg-nestable-handle", // Drag handle selector.
 			idattribute: "data-id", // Item id attribute used by serialize().
+			serializedata: true, // Include the remaining data-* attributes, like the original Nestable.
 			childlistclass: "vg-nestable-list", // Class for auto-created child list.
 			handleicon: '', // иконка для хендлера
+			emptytext: "Drop items here", // Accessible empty-list hint.
 			indent: 18, // Small horizontal gesture (px) that moves the item under the previous sibling.
 			maxdepth: 6, // Maximum nesting depth.
 			moveaxis: "default", // Drag direction: default | vertical | horizontal.
@@ -85,6 +95,8 @@ class VGNestable extends BaseModule {
 				drop: null,
 				transfer: null,
 				change: null,
+				collapse: null,
+				expand: null,
 				end: null,
 				save: null,
 				destroy: null
@@ -143,6 +155,7 @@ class VGNestable extends BaseModule {
 		this._activeTouchId = null;
 		this._keyboardDraggedItem = null;
 		this._keyboardStartSnapshot = "";
+		this._keyboardOrigin = null;
 		this._liveRegion = null;
 
 		if (!this._rootList) {
@@ -192,6 +205,10 @@ class VGNestable extends BaseModule {
 			return EVENT_KEY_SAVE;
 		case "destroy":
 			return EVENT_KEY_DESTROY;
+		case "collapse":
+			return EVENT_KEY_COLLAPSE;
+		case "expand":
+			return EVENT_KEY_EXPAND;
 		default:
 			return `${NAME_KEY}.${action}`;
 		}
@@ -307,11 +324,100 @@ class VGNestable extends BaseModule {
 			this._syncItemCollapse(item);
 		});
 
+		this._syncEmptyState();
+
 		this._emit("refresh", {
 			items: this._getItems().length
 		});
 	}
 
+	/**
+	 * Expands one branch and keeps its toggle state synchronized.
+	 * @param {HTMLElement|string} item Item element or selector inside this tree.
+	 * @returns {boolean}
+	 */
+	expandItem(item) {
+		return this._setItemExpanded(item, true);
+	}
+
+	/**
+	 * Collapses one branch and keeps its toggle state synchronized.
+	 * @param {HTMLElement|string} item Item element or selector inside this tree.
+	 * @returns {boolean}
+	 */
+	collapseItem(item) {
+		return this._setItemExpanded(item, false);
+	}
+
+	/** Expand every branch, matching the original Nestable public method. */
+	expandAll() {
+		let changed = 0;
+		this._getItems().forEach((item) => {
+			if (this.expandItem(item)) changed += 1;
+		});
+		return changed;
+	}
+
+	/** Collapse every branch, matching the original Nestable public method. */
+	collapseAll() {
+		let changed = 0;
+		this._getItems().forEach((item) => {
+			if (this.collapseItem(item)) changed += 1;
+		});
+		return changed;
+	}
+
+	_setItemExpanded(item, expanded) {
+		const target = typeof item === "string" ? this._element.querySelector(item) : item;
+		if (!target || !target.matches?.(this._params.itemselector) || !this._rootList.contains(target)) {
+			return false;
+		}
+
+		const childList = this._getDirectChildBySelector(target, this._params.listselector);
+		if (!childList) return false;
+
+		const isExpanded = childList.classList.contains("show");
+		if (isExpanded === expanded) return false;
+
+		const collapse = VGCollapse.getOrCreateInstance(childList, { toggle: false });
+		if (expanded) {
+			collapse.show();
+		} else {
+			collapse.hide();
+		}
+
+		this._emit(expanded ? "expand" : "collapse", {
+			item: target,
+			list: childList,
+			expanded
+		});
+		return true;
+	}
+
+	_syncEmptyState() {
+		if (!this._rootList) return;
+
+		const hasItems = Array.from(this._rootList.children)
+			.some((child) => child.matches(this._params.itemselector));
+		let empty = this._getDirectChildBySelector(this._rootList, `.${CLASS_EMPTY}`);
+
+		if (hasItems) {
+			empty?.remove();
+			this._rootList.classList.remove("is-empty");
+			return;
+		}
+
+		if (!empty) {
+			empty = document.createElement(this._rootList.tagName?.toLowerCase() === "ol" ? "li" : "div");
+			empty.className = CLASS_EMPTY;
+			empty.setAttribute("aria-live", "polite");
+			this._rootList.append(empty);
+		}
+
+		empty.textContent = String(this._params.emptytext || "Drop items here");
+		this._rootList.classList.add("is-empty");
+	}
+
 	_syncItemCollapse(item) {
 		if (!item || !this._params.collapse?.enabled) {
 			return;
@@ -826,6 +932,10 @@ class VGNestable extends BaseModule {
 
 		this._keyboardDraggedItem = item;
 		this._keyboardStartSnapshot = JSON.stringify(this.serialize());
+		this._keyboardOrigin = {
+			parent: item.parentElement,
+			next: item.nextSibling
+		};
 		item.classList.add(CLASS_ITEM_DRAGGING);
 		item.setAttribute("aria-grabbed", "true");
 
@@ -844,6 +954,13 @@ class VGNestable extends BaseModule {
 
 		const draggedItem = this._keyboardDraggedItem;
 		const previousPayload = this._keyboardStartSnapshot ? JSON.parse(this._keyboardStartSnapshot) : [];
+		if (options.cancelled && this._keyboardOrigin?.parent) {
+			const { parent, next } = this._keyboardOrigin;
+			parent.insertBefore(draggedItem, next?.parentElement === parent ? next : null);
+			this._cleanupEmptyLists();
+			this.refresh();
+			draggedItem.focus?.();
+		}
 		const payload = this.serialize();
 		const changed = this._keyboardStartSnapshot !== JSON.stringify(payload);
 
@@ -890,6 +1007,7 @@ class VGNestable extends BaseModule {
 
 		this._keyboardDraggedItem = null;
 		this._keyboardStartSnapshot = "";
+		this._keyboardOrigin = null;
 	}
 
 	_moveKeyboardUp(item) {
@@ -1878,6 +1996,15 @@ class VGNestable extends BaseModule {
 			const childList = item.querySelector(`:scope > ${this._params.listselector}`);
 
 			const data = { id: id ?? null };
+			if (normalizeData(this._params.serializedata) !== false) {
+				Array.from(item.attributes).forEach((attribute) => {
+					if (!attribute.name.startsWith("data-") || attribute.name === this._params.idattribute) return;
+					const key = attribute.name
+						.slice(5)
+						.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+					data[key] = normalizeData(attribute.value === "" ? "true" : attribute.value);
+				});
+			}
 
 			if (childList) {
 				const children = this._serializeList(childList);
@@ -1895,6 +2022,19 @@ EventHandler.on(document, `DOMContentLoaded.${NAME_KEY}.data.api`, () => {
 	Selectors.findAll(SELECTOR_DATA_TOGGLE).forEach((el) => VGNestable.getOrCreateInstance(el));
 });
 
+EventHandler.on(document, `click.${NAME_KEY}.data.api`, SELECTOR_DATA_ACTION, function (event) {
+	event.preventDefault();
+	const selector = this.getAttribute("data-vg-target");
+	const element = selector ? Selectors.find(selector) : this.closest(SELECTOR_DATA_TOGGLE);
+	if (!element) return;
+
+	const instance = VGNestable.getOrCreateInstance(element);
+	const action = String(this.getAttribute("data-vg-nestable-action") || "").trim();
+	if (["expandAll", "collapseAll"].includes(action)) {
+		instance[action]();
+	}
+});
+
 export default VGNestable;
 
 

package/app/modules/vgnestable/scss/_variables.scss

@@ -1,6 +1,13 @@
 @use "../../../utils/scss" as vg;
 
 $nestable-map: (
+	max-width: 40rem,
+	empty-min-height: 5rem,
+	empty-padding: 1rem,
+	empty-border: vg.$border-width dashed var(--vg-border-disabled-color, rgba(0, 0, 0, .18)),
+	empty-bg: var(--vg-surface-subtle-bg, rgba(0, 0, 0, .025)),
+	empty-color: var(--vg-text-muted-color, rgba(0, 0, 0, .6)),
+	empty-border-radius: .5rem,
 	list-transition: "background-color .15s ease, outline-color .15s ease",
 	list-drop-target-bg: var(--vg-primary-subtle-bg, rgba(13, 110, 253, .06)),
 	list-drop-target-outline: vg.$border-width dashed var(--vg-primary-outline-color, rgba(13, 110, 253, .45)),
@@ -9,7 +16,7 @@ $nestable-map: (
 	list-drop-denied-outline: vg.$border-width dashed var(--vg-danger-outline-color, rgba(220, 53, 69, .5)),
 	list-drop-denied-outline-offset: 2px,
 	list-nested-margin-top: .35rem,
-	list-nested-padding-left: 1.25rem,
+	list-nested-padding-left: 1.875rem,
 	list-nested-border-left: vg.$border-width dashed var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
 
 	item-margin: .35rem 0,
@@ -25,15 +32,15 @@ $nestable-map: (
 	item-disabled-handle-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .28)),
 
 	inner-gap: .5rem,
-	inner-min-height: 40px,
-	inner-padding: .45rem .65rem,
+	inner-min-height: 42px,
+	inner-padding: .4rem .65rem .4rem .35rem,
 	inner-border: vg.$border-width vg.$border-style var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
 	inner-bg: var(--vg-surface-bg, #{vg.$surface-bg}),
 	inner-border-radius: .45rem,
 
-	handle-size: 1.85rem,
-	handle-border: vg.$border-width vg.$border-style var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
-	handle-bg: var(--vg-surface-subtle-bg, rgba(0, 0, 0, .03)),
+	handle-size: 2rem,
+	handle-border: 0,
+	handle-bg: transparent,
 	handle-border-radius: .35rem,
 	handle-cursor: grab,
 	handle-active-cursor: grabbing,
@@ -61,9 +68,9 @@ $nestable-map: (
 	placeholder-bg: var(--vg-primary-subtle-bg, rgba(13, 110, 253, .08)),
 	placeholder-border-radius: .45rem,
 	placeholder-margin: .35rem 0,
-	placeholder-min-height: 40px,
+	placeholder-min-height: 42px,
 
 	drag-element-opacity: 1,
-	drag-element-transform: scale(1.01),
-	drag-element-shadow: 0 12px 30px var(--vg-shadow-color, rgba(0, 0, 0, .2))
+	drag-element-transform: translate3d(0, 0, 0) scale(1.01),
+	drag-element-shadow: 0 10px 24px var(--vg-shadow-color, rgba(0, 0, 0, .18))
 ) !default;

package/app/modules/vgnestable/scss/vgnestable.scss

@@ -12,6 +12,23 @@
 
 .vg-nestable {
 	@include vg.mix-vars('nestable', vars.$nestable-map);
+	position: relative;
+	display: block;
+	width: 100%;
+	max-width: var(--vg-nestable-max-width);
+
+	&-empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: var(--vg-nestable-empty-min-height);
+		padding: var(--vg-nestable-empty-padding);
+		border: var(--vg-nestable-empty-border);
+		background: var(--vg-nestable-empty-bg);
+		color: var(--vg-nestable-empty-color);
+		border-radius: var(--vg-nestable-empty-border-radius);
+		text-align: center;
+	}
 
 	&-list {
 		list-style: none;
@@ -19,6 +36,10 @@
 		padding: 0;
 		transition: var(--vg-nestable-list-transition);
 
+		&.is-empty {
+			min-height: var(--vg-nestable-empty-min-height);
+		}
+
 		&.is-drop-target {
 			background: var(--vg-nestable-list-drop-target-bg);
 			outline: var(--vg-nestable-list-drop-target-outline);
@@ -94,6 +115,7 @@
 		border: var(--vg-nestable-inner-border);
 		background: var(--vg-nestable-inner-bg);
 		border-radius: var(--vg-nestable-inner-border-radius);
+		box-shadow: 0 1px 1px rgba(0, 0, 0, .025);
 	}
 
 	&-handle {
@@ -110,6 +132,14 @@
 		cursor: var(--vg-nestable-handle-cursor);
 		user-select: none;
 		touch-action: none;
+		color: var(--vg-nestable-handle-icon-color);
+
+		&:hover,
+		&:focus-visible {
+			background: var(--vg-nestable-toggle-hover-bg);
+			color: var(--vg-text-color, currentColor);
+			outline: none;
+		}
 
 		&:active {
 			cursor: var(--vg-nestable-handle-active-cursor);
@@ -178,6 +208,7 @@
 		border-radius: var(--vg-nestable-placeholder-border-radius);
 		margin: var(--vg-nestable-placeholder-margin);
 		min-height: var(--vg-nestable-placeholder-min-height);
+		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vg-nestable-item-drop-line) 12%, transparent);
 	}
 
 	&-placeholder-hidden {
@@ -191,10 +222,12 @@
 	&-item.is-drag-ghost#{&}-drag-element {
 		opacity: var(--vg-nestable-drag-element-opacity);
 		transform: var(--vg-nestable-drag-element-transform);
-		box-shadow: var(--vg-nestable-drag-element-shadow);
+		transform-origin: top left;
+		filter: drop-shadow(var(--vg-nestable-drag-element-shadow));
 
-		> .vg-nestable-inner {
+		.vg-nestable-inner {
 			background: var(--vg-nestable-inner-bg);
+			box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
 		}
 	}
 }

package/app/modules/vgtable/index.js

@@ -0,0 +1,3 @@
+import VGTable from "./js/vgtable";
+
+export default VGTable;