vgapp 1.5.8 → 1.6.0

package/app/modules/module-fn.js

@@ -23,7 +23,7 @@ const getSVG = (name) => {
 		waiting:             '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M51 10.02C55.5248 12.6326 59.2888 16.3816 61.9194 20.8959C64.5501 25.4103 65.9561 30.5334 65.9983 35.7581C66.0405 40.9828 64.7174 46.1279 62.1601 50.6841C59.6027 55.2404 55.8997 59.0497 51.4177 61.735C46.9357 64.4203 41.8301 65.8885 36.6063 65.9942C31.3825 66.1 26.2216 64.8395 21.6347 62.3378C17.0477 59.836 13.1936 56.1796 10.454 51.7306C7.71439 47.2816 6.18423 42.1942 6.015 36.972L6 36L6.015 35.028C6.18301 29.847 7.69064 24.7979 10.3909 20.373C13.0912 15.9481 16.892 12.2984 21.4227 9.77969C25.9534 7.26098 31.0594 5.95923 36.243 6.00136C41.4266 6.04348 46.5108 7.42804 51 10.02ZM36 18C35.2652 18.0001 34.556 18.2699 34.0069 18.7582C33.4578 19.2465 33.107 19.9193 33.021 20.649L33 21V36L33.027 36.393C33.0954 36.9135 33.2992 37.407 33.618 37.824L33.879 38.124L42.879 47.124L43.161 47.37C43.6871 47.7782 44.3341 47.9998 45 47.9998C45.6659 47.9998 46.3129 47.7782 46.839 47.37L47.121 47.121L47.37 46.839C47.7782 46.3129 47.9998 45.6659 47.9998 45C47.9998 44.3341 47.7782 43.6872 47.37 43.161L47.121 42.879L39 34.755V21L38.979 20.649C38.893 19.9193 38.5422 19.2465 37.9931 18.7582C37.444 18.2699 36.7348 18.0001 36 18Z" fill="black"/></svg>',
 		warning:             '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.5 5C44.8543 5 52.8665 8.31874 58.7739 14.2261C64.6813 20.1335 68 28.1457 68 36.5C68 44.8543 64.6813 52.8665 58.7739 58.7739C52.8665 64.6813 44.8543 68 36.5 68C28.1457 68 20.1335 64.6813 14.2261 58.7739C8.31874 52.8665 5 44.8543 5 36.5C5 28.1457 8.31874 20.1335 14.2261 14.2261C20.1335 8.31874 28.1457 5 36.5 5ZM36.5 18.5C35.9287 18.4995 35.3635 18.6181 34.8406 18.8484C34.3178 19.0786 33.8487 19.4154 33.4633 19.8372C33.0779 20.259 32.7848 20.7565 32.6025 21.298C32.4203 21.8395 32.353 22.413 32.405 22.982L34.0475 41.009C34.1112 41.6151 34.397 42.1761 34.8499 42.5839C35.3028 42.9917 35.8906 43.2173 36.5 43.2173C37.1094 43.2173 37.6972 42.9917 38.1501 42.5839C38.603 42.1761 38.8888 41.6151 38.9525 41.009L40.5905 22.982C40.6424 22.4134 40.5753 21.8403 40.3933 21.2991C40.2114 20.7579 39.9186 20.2606 39.5337 19.8389C39.1488 19.4171 38.6803 19.0803 38.1579 18.8498C37.6356 18.6192 37.0709 18.5001 36.5 18.5ZM36.5 54.5C37.4548 54.5 38.3705 54.1207 39.0456 53.4456C39.7207 52.7705 40.1 51.8548 40.1 50.9C40.1 49.9452 39.7207 49.0295 39.0456 48.3544C38.3705 47.6793 37.4548 47.3 36.5 47.3C35.5452 47.3 34.6295 47.6793 33.9544 48.3544C33.2793 49.0295 32.9 49.9452 32.9 50.9C32.9 51.8548 33.2793 52.7705 33.9544 53.4456C34.6295 54.1207 35.5452 54.5 36.5 54.5Z" fill="#000000"/></svg>',
 		info:                '<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 4.5C18.6047 4.5 4.5 18.6047 4.5 36C4.5 53.3953 18.6047 67.5 36 67.5C53.3953 67.5 67.5 53.3953 67.5 36C67.5 18.6047 53.3953 4.5 36 4.5ZM33.75 20.8125C33.75 20.5031 34.0031 20.25 34.3125 20.25H37.6875C37.9969 20.25 38.25 20.5031 38.25 20.8125V39.9375C38.25 40.2469 37.9969 40.5 37.6875 40.5H34.3125C34.0031 40.5 33.75 40.2469 33.75 39.9375V20.8125ZM36 51.75C35.1168 51.732 34.2759 51.3685 33.6577 50.7375C33.0395 50.1065 32.6932 49.2584 32.6932 48.375C32.6932 47.4916 33.0395 46.6435 33.6577 46.0125C34.2759 45.3815 35.1168 45.018 36 45C36.8832 45.018 37.7241 45.3815 38.3423 46.0125C38.9605 46.6435 39.3068 47.4916 39.3068 48.375C39.3068 49.2584 38.9605 50.1065 38.3423 50.7375C37.7241 51.3685 36.8832 51.732 36 51.75Z" fill="#000000"/></svg>',
-		dots:                '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17C11.1046 17 12 16.1046 12 15C12 13.8954 11.1046 13 10 13C8.89543 13 8 13.8954 8 15C8 16.1046 8.89543 17 10 17Z" fill="black"/><path d="M10 12C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8C8.89543 8 8 8.89543 8 10C8 11.1046 8.89543 12 10 12Z" fill="black"/><path d="M10 7C11.1046 7 12 6.10457 12 5C12 3.89543 11.1046 3 10 3C8.89543 3 8 3.89543 8 5C8 6.10457 8.89543 7 10 7Z" fill="black"/></svg>',
+		dots:                '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 17C11.1046 17 12 16.1046 12 15C12 13.8954 11.1046 13 10 13C8.89543 13 8 13.8954 8 15C8 16.1046 8.89543 17 10 17Z" fill="currentColor"/><path d="M10 12C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8C8.89543 8 8 8.89543 8 10C8 11.1046 8.89543 12 10 12Z" fill="currentColor"/><path d="M10 7C11.1046 7 12 6.10457 12 5C12 3.89543 11.1046 3 10 3C8.89543 3 8 3.89543 8 5C8 6.10457 8.89543 7 10 7Z" fill="currentColor"/></svg>',
 		remove:              '<svg class="vg-icon-remove" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.05 5.636 12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414L12 13.414l-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636Z" fill="currentColor"/></svg>',
 		cross:               '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.3149 0.340332C15.4478 0.20752 15.6027 0.118978 15.7798 0.074707C15.9569 0.0249023 16.134 0.0249023 16.311 0.074707C16.4881 0.118978 16.6431 0.20752 16.7759 0.340332C16.9142 0.473145 17.0055 0.630859 17.0498 0.813477C17.0941 0.99056 17.0941 1.16764 17.0498 1.34473C17.0055 1.52181 16.917 1.67676 16.7842 1.80957L1.80127 16.8008C1.67399 16.9281 1.52181 17.0111 1.34473 17.0498C1.16764 17.0941 0.987793 17.0941 0.805176 17.0498C0.628092 17.0111 0.470378 16.9253 0.332031 16.7925C0.199219 16.6597 0.110677 16.502 0.0664062 16.3193C0.0221354 16.1423 0.0221354 15.9652 0.0664062 15.7881C0.110677 15.611 0.196452 15.4588 0.32373 15.3315L15.3149 0.340332ZM16.7842 15.3232C16.917 15.4561 17.0028 15.6082 17.0415 15.7798C17.0858 15.9569 17.0858 16.134 17.0415 16.311C17.0028 16.4937 16.9142 16.6541 16.7759 16.7925C16.6431 16.9253 16.4881 17.0138 16.311 17.0581C16.134 17.1024 15.9569 17.1024 15.7798 17.0581C15.6027 17.0138 15.4478 16.9253 15.3149 16.7925L0.32373 1.80127C0.201986 1.67952 0.116211 1.53011 0.0664062 1.35303C0.0221354 1.17594 0.0221354 0.996094 0.0664062 0.813477C0.116211 0.630859 0.204753 0.473145 0.332031 0.340332C0.464844 0.20752 0.622559 0.118978 0.805176 0.074707C0.987793 0.0304362 1.16488 0.0304362 1.33643 0.074707C1.51351 0.118978 1.66846 0.204753 1.80127 0.332031L16.7842 15.3232Z" fill="#000"/></svg>',
 		'eye-open':          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>',

package/app/modules/vgalert/js/vgalert.js

@@ -456,10 +456,13 @@ class VGAlert {
 			: VGModal.getOrCreateInstance(containerWrap);
 		const container = Selectors.find('.vg-modal-content', containerWrap) || containerWrap;
 
-		const overlay = document.createElement('div');
-
-		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
-		this._applySizeClass(overlay);
+		const overlay = document.createElement('div');
+
+		overlay.className = `${CLASS_NAME_ALERT}-overlay`;
+		if (containerWrap.classList.contains('vg-modal')) {
+			overlay.classList.add(`${CLASS_NAME_ALERT}-overlay--modal`);
+		}
+		this._applySizeClass(overlay);
 		overlay.append(this._buildContent());
 
 		container.append(overlay);

package/app/modules/vgalert/scss/vgalert.scss

@@ -55,17 +55,24 @@
 			}
 		}
 
-		.vg-alert-wrapper {
-			background-color: var(--vg-alert-overlay-wrapper-bg);
-			width: var(--vg-alert-overlay-wrapper-width);
+		.vg-alert-wrapper {
+			background-color: var(--vg-alert-overlay-wrapper-bg);
+			width: var(--vg-alert-overlay-wrapper-width);
 			position: absolute;
 			left: var(--vg-alert-overlay-wrapper-start);
 			z-index: 1;
 			transform: var(--vg-alert-overlay-wrapper-transform);
 			top: var(--vg-alert-overlay-wrapper-top);
-			transition: var(--vg-alert-overlay-wrapper-transition);
-		}
-	}
+			transition: var(--vg-alert-overlay-wrapper-transition);
+		}
+
+		&--modal {
+			.vg-alert-wrapper {
+				position: sticky;
+				top: calc(var(--vg-alert-overlay-wrapper-top) + 1rem);
+			}
+		}
+	}
 
 	&-dropdown {
 		width: 360px;

package/app/modules/vgnav/js/vgnav.js

@@ -1,12 +1,13 @@
 /**
  * Описание: адаптивная навигация VGNav с выпадающими пунктами и гамбургером.
- * Возможности: click/hover, вложенные меню, позиционирование, события и интеграция с VGSidebar.
+ * Возможности: click/hover, overflow первого уровня, вложенные меню, позиционирование, события и интеграция с VGSidebar.
  */
 import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
 import {
-	execute,
-	isDisabled,
+	execute,
+	getTransitionDurationFromElement,
+	isDisabled,
 	isMobileDevice,
 	isVisible,
 	mergeDeepObject,
@@ -14,7 +15,8 @@ import {
 } from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
-import Placement from "../../../utils/js/components/placement";
+import Placement from "../../../utils/js/components/placement";
+import {getSVG} from "../../module-fn";
 
 /**
  * Constants
@@ -59,8 +61,22 @@ class VGNav extends BaseModule {
 			placement: 'horizontal',
 			// Включает открытие выпадающих пунктов при наведении на десктопе.
 			hover: true,
-			// Включает ограничение высоты и overflow для списка внутри выпадающего меню.
-			dropListScroll: true,
+			// Включает ограничение высоты и overflow для списка внутри выпадающего меню.
+			dropListScroll: true,
+			// Переносит лишние пункты первого уровня горизонтального меню в dropdown.
+			overflow: {
+				enable: false,
+				// Максимум видимых исходных пунктов; 0 оставляет только ограничение по ширине.
+				count: 0,
+				// Элементы, которые нельзя переносить (megamenu сохраняет геометрию первого уровня).
+				keep: '.dropdown-mega, [data-vg-nav-overflow="keep"]',
+				trigger: {
+					icon: 'dots',
+					body: null,
+					label: '',
+					ariaLabel: 'Другие разделы'
+				}
+			},
 			// Настройки плавного переключения между соседними пунктами первого уровня.
 			hoversmoothfirstlevel: {
 				// Включает режим плавного перехода без мгновенного закрытия соседнего дропа.
@@ -104,8 +120,11 @@ class VGNav extends BaseModule {
 			hamburgerAlways: 'vg-nav-hamburger-always',
 			hamburger: 'vg-nav-hamburger',
 			container: 'vg-nav-container',
-			wrapper: 'vg-nav-wrapper',
-			dropListScroll: 'vg-nav-drop-list-scroll',
+			wrapper: 'vg-nav-wrapper',
+			dropListScroll: 'vg-nav-drop-list-scroll',
+			overflowEnabled: 'vg-nav-overflow-enabled',
+			overflow: 'vg-nav-overflow',
+			overflowList: 'vg-nav-overflow-list',
 			active: 'vg-nav-active',
 			expand: 'vg-nav-expand',
 			cloned: 'vg-nav-cloned',
@@ -127,10 +146,19 @@ class VGNav extends BaseModule {
 			this._params.animation.timeout = 10;
 		}
 
-		this._openDrops = new Map();
-		this._pointerPosition = null;
-		this._handleScroll = this._handleScroll.bind(this);
-		this._handleResize = this._handleResize.bind(this);
+		this._openDrops = new Map();
+		this._pointerPosition = null;
+		this._smoothSwitch = null;
+		this._handleScroll = this._handleScroll.bind(this);
+		this._handleResize = this._handleResize.bind(this);
+		this._handleOverflowResize = this._handleOverflowResize.bind(this);
+		this._overflowTrigger = null;
+		this._overflowList = null;
+		this._overflowItems = [];
+		this._overflowAnchors = new Map();
+		this._overflowObserver = null;
+		this._overflowFrame = null;
+		this._overflowWindowFallback = false;
 	}
 
 	static get NAME() {
@@ -160,7 +188,8 @@ class VGNav extends BaseModule {
 		// Вешаем основные классы
 		this._element.classList.add(classes.container);
 		this._element.classList.add('vg-nav-' + params.placement);
-		this._element.classList.toggle(classes.dropListScroll, !!params.dropListScroll);
+		this._element.classList.toggle(classes.dropListScroll, !!params.dropListScroll);
+		this._setupOverflow();
 
 		if (!params.hamburger.always) {
 			if (!params.breakpoint) {
@@ -200,7 +229,7 @@ class VGNav extends BaseModule {
 		}
 
 		// Устанавливаем указатель дропа
-		if (params.toggle) {
+		if (params.toggle) {
 			let $dropdown_a = [...Selectors.findAll('.dropdown > a', this._element)],
 				toggle = '<span class="toggle">' + params.toggle + '</span>';
 
@@ -211,10 +240,12 @@ class VGNav extends BaseModule {
 						elem.insertAdjacentHTML('beforeend', toggle);
 					}
 				});
-			}
-		}
-
-		if ('afterInit' in this._params.callbacks) {
+			}
+		}
+
+		this.refresh();
+
+		if ('afterInit' in this._params.callbacks) {
 			execute(this._params.callbacks.afterInit, [this]);
 		}
 	}
@@ -397,7 +428,7 @@ class VGNav extends BaseModule {
 		return drop.previousElementSibling === relatedDrop || drop.nextElementSibling === relatedDrop;
 	}
 
-	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
+	_canSmoothSwitchFirstLevel(event, currentDrop, relatedDrop) {
 		const smoothParams = this._params.hoversmoothfirstlevel || {};
 		if (!smoothParams.enable) return false;
 		if (!currentDrop || !relatedDrop || currentDrop === relatedDrop) return false;
@@ -406,8 +437,251 @@ class VGNav extends BaseModule {
 		if (!this._isAdjacentDropdown(currentDrop, relatedDrop)) return false;
 		if (smoothParams.horizontalOnly && !this._isHorizontalPointerMove(event)) return false;
 
-		return true;
-	}
+		return true;
+	}
+
+	_scheduleSmoothSwitchCompletion(dropContent, callback) {
+		const duration = getTransitionDurationFromElement(dropContent);
+		if (!duration) {
+			callback();
+			return;
+		}
+
+		window.setTimeout(callback, duration);
+	}
+
+	/**
+	 * Пересчитывает пункты первого уровня, перенесённые в overflow-dropdown.
+	 * Полезно вызывать после динамического изменения состава или текста меню.
+	 */
+	refresh() {
+		if (!this._isOverflowEnabled()) return;
+		this._collectOverflowItems();
+		this._redistributeOverflowItems();
+	}
+
+	_isOverflowEnabled() {
+		return !!this._params.overflow?.enable && this._params.placement === 'horizontal';
+	}
+
+	_setupOverflow() {
+		if (!this._isOverflowEnabled() || this._overflowTrigger) return;
+
+		this._element.classList.add(this._classes.overflowEnabled);
+		const triggerParams = this._params.overflow.trigger || {};
+		const item = document.createElement('li');
+		item.classList.add('dropdown', 'dots', this._classes.overflow);
+		item.hidden = true;
+
+		const link = document.createElement('a');
+		link.href = '#';
+		link.setAttribute('aria-expanded', 'false');
+		link.setAttribute('aria-label', triggerParams.ariaLabel || 'Другие разделы');
+
+		const icon = document.createElement('span');
+		icon.classList.add(this._classes.overflow + '-icon');
+		icon.setAttribute('aria-hidden', 'true');
+		icon.innerHTML = triggerParams.body !== null
+			? triggerParams.body
+			: (getSVG(triggerParams.icon || 'dots') || '');
+		link.append(icon);
+
+		if (triggerParams.label) {
+			const label = document.createElement('span');
+			label.classList.add(this._classes.overflow + '-label');
+			label.textContent = triggerParams.label;
+			link.append(label);
+		}
+
+		const content = document.createElement('div');
+		content.classList.add('dropdown-content');
+		const list = document.createElement('ul');
+		list.classList.add('vg-nav-drop-list', this._classes.overflowList);
+		content.append(list);
+		item.append(link, content);
+		this.navigation.append(item);
+
+		this._overflowTrigger = item;
+		this._overflowList = list;
+		this._collectOverflowItems();
+		this._startOverflowObserver();
+	}
+
+	_collectOverflowItems() {
+		if (!this.navigation || !this._overflowTrigger) return;
+
+		[...this.navigation.children].forEach((item) => {
+			if (item === this._overflowTrigger || this._overflowAnchors.has(item)) return;
+			const anchor = document.createComment('vg-nav-overflow-item');
+			this.navigation.insertBefore(anchor, item);
+			this._overflowAnchors.set(item, anchor);
+			this._overflowItems.push(item);
+		});
+	}
+
+	_restoreOverflowItems(removeAnchors = false) {
+		this._overflowItems.forEach((item) => {
+			const anchor = this._overflowAnchors.get(item);
+			if (!anchor?.parentNode) return;
+			if (removeAnchors) {
+				anchor.replaceWith(item);
+			} else {
+				anchor.after(item);
+			}
+		});
+
+		if (removeAnchors) this._overflowAnchors.clear();
+	}
+
+	_redistributeOverflowItems() {
+		if (!this.navigation || !this._overflowTrigger || !this._overflowList) return;
+
+		this._closeOverflowDrops();
+		this._restoreOverflowItems();
+		this._overflowTrigger.hidden = true;
+
+		if (!this._isOverflowMeasurable()) return;
+
+		const moved = new Set();
+		const movable = this._overflowItems.filter((item) => !this._isOverflowKept(item));
+		const count = Math.max(0, Number.parseInt(this._params.overflow.count, 10) || 0);
+		let visibleCount = this._overflowItems.length;
+
+		if (count > 0) {
+			for (let index = movable.length - 1; index >= 0 && visibleCount > count; index--) {
+				moved.add(movable[index]);
+				this._overflowList.prepend(movable[index]);
+				visibleCount--;
+			}
+		}
+
+		if (moved.size || !this._overflowFits()) {
+			this._overflowTrigger.hidden = false;
+		}
+
+		for (let index = movable.length - 1; index >= 0 && !this._overflowFits(); index--) {
+			const item = movable[index];
+			if (moved.has(item)) continue;
+			moved.add(item);
+			this._overflowList.prepend(item);
+		}
+
+		this._overflowItems.forEach((item) => {
+			if (moved.has(item)) this._overflowList.append(item);
+		});
+
+		this._overflowTrigger.hidden = moved.size === 0;
+		this._element.classList.toggle(this._classes.overflow + '-active', moved.size > 0);
+	}
+
+	_isOverflowKept(item) {
+		const selector = String(this._params.overflow.keep || '').trim();
+		return !!selector && item.matches(selector);
+	}
+
+	_isOverflowMeasurable() {
+		if (!this._element.isConnected) return false;
+		if (this.navigation.getClientRects().length === 0) return false;
+		return this.navigation.clientWidth > 0 || this.navigation.getBoundingClientRect().width > 0;
+	}
+
+	_overflowFits() {
+		const width = this.navigation.clientWidth || this.navigation.getBoundingClientRect().width;
+		if (!width) return true;
+
+		const style = window.getComputedStyle(this.navigation);
+		const gap = Number.parseFloat(style.columnGap) || 0;
+		const children = [...this.navigation.children].filter((item) => !item.hidden);
+		const used = children.reduce((sum, item) => {
+			const itemStyle = window.getComputedStyle(item);
+			return sum + item.getBoundingClientRect().width
+				+ (Number.parseFloat(itemStyle.marginLeft) || 0)
+				+ (Number.parseFloat(itemStyle.marginRight) || 0);
+		}, 0) + Math.max(0, children.length - 1) * gap;
+
+		return used <= width + 0.5;
+	}
+
+	_closeOverflowDrops() {
+		[...this.navigation.querySelectorAll('.dropdown.active')].forEach((item) => {
+			this.hide({relatedTarget: item});
+		});
+	}
+
+	_startOverflowObserver() {
+		if (typeof ResizeObserver !== 'undefined') {
+			this._overflowObserver = new ResizeObserver(this._handleOverflowResize);
+			this._overflowObserver.observe(this.navigation);
+			this._overflowObserver.observe(this._element);
+		} else {
+			window.addEventListener('resize', this._handleOverflowResize);
+			this._overflowWindowFallback = true;
+		}
+
+		if (document.fonts?.ready) {
+			document.fonts.ready.then(() => {
+				if (this._element) this._handleOverflowResize();
+			});
+		}
+	}
+
+	_handleOverflowResize() {
+		if (this._overflowFrame !== null) return;
+		const schedule = typeof window.requestAnimationFrame === 'function'
+			? window.requestAnimationFrame.bind(window)
+			: (callback) => window.setTimeout(callback, 0);
+
+		this._overflowFrame = schedule(() => {
+			this._overflowFrame = null;
+			this.refresh();
+		});
+	}
+
+	dispose() {
+		if (this._overflowObserver) this._overflowObserver.disconnect();
+		if (this._overflowWindowFallback) window.removeEventListener('resize', this._handleOverflowResize);
+		if (this._overflowFrame !== null && typeof window.cancelAnimationFrame === 'function') {
+			window.cancelAnimationFrame(this._overflowFrame);
+		}
+		this._restoreOverflowItems(true);
+		this._overflowTrigger?.remove();
+		this._element.classList.remove(this._classes.overflowEnabled, this._classes.overflow + '-active');
+		super.dispose();
+	}
+
+	_startSmoothSwitch(currentDrop, previousDrop, dropContent) {
+		const staleSwitch = this._smoothSwitch;
+		const transfer = { currentDrop, previousDrop };
+		this._smoothSwitch = transfer;
+
+		if (
+			staleSwitch?.previousDrop
+			&& staleSwitch.previousDrop !== currentDrop
+			&& staleSwitch.previousDrop !== previousDrop
+			&& staleSwitch.previousDrop.classList.contains(CLASS_NAME_ACTIVE)
+		) {
+			this.hide({ relatedTarget: staleSwitch.previousDrop });
+		}
+
+		this._scheduleSmoothSwitchCompletion(dropContent, () => {
+			if (this._smoothSwitch !== transfer) return;
+			this._smoothSwitch = null;
+			if (!currentDrop.isConnected || !previousDrop.isConnected) return;
+			if (!currentDrop.classList.contains(CLASS_NAME_ACTIVE)) return;
+			if (previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+				this.hide({ relatedTarget: previousDrop });
+			}
+		});
+	}
+
+	_cancelSmoothSwitch(exceptDrop = null) {
+		const transfer = this._smoothSwitch;
+		this._smoothSwitch = null;
+		if (!transfer?.previousDrop || transfer.previousDrop === exceptDrop) return;
+		if (transfer.previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+			this.hide({ relatedTarget: transfer.previousDrop });
+		}
+	}
 
 	static init(element, params = {}) {
 		const instance = VGNav.getOrCreateInstance(element, params);
@@ -435,19 +709,24 @@ class VGNav extends BaseModule {
 					const previousDrop = event.relatedTarget?.closest('.dropdown');
 					const useSmoothSwitch = instance._canSmoothSwitchFirstLevel(event, target, previousDrop);
 
-					if (!useSmoothSwitch) {
-						VGNav.hideOpenDrops(event);
+					if (!useSmoothSwitch) {
+						instance._cancelSmoothSwitch(target);
+						VGNav.hideOpenDrops(event);
 					}
 
 					let relatedTarget = {
 						relatedTarget: target
 					};
 
-					instance.show(relatedTarget);
-
-					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
-						instance.hide({ relatedTarget: previousDrop });
-					}
+					instance.show(relatedTarget);
+
+					if (useSmoothSwitch && previousDrop && previousDrop.classList.contains(CLASS_NAME_ACTIVE)) {
+						const nextDropContent = Selectors.find(':scope > .dropdown-content', target);
+						if (nextDropContent) {
+							nextDropContent.classList.add(CLASS_NAME_FADE);
+							instance._startSmoothSwitch(target, previousDrop, nextDropContent);
+						}
+					}
 
 					instance._updatePointerPosition(event);
 				});
@@ -464,14 +743,16 @@ class VGNav extends BaseModule {
 						relatedTarget = relatedTarget.parentNode;
 					}
 
-					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
-						currentElem = null;
-						instance._updatePointerPosition(event);
-						return;
-					}
-
-					currentElem = null;
-					instance.hide({ relatedTarget: relatedTarget, elm: elm });
+					if (instance._canSmoothSwitchFirstLevel(event, elm, nextDrop)) {
+						currentElem = null;
+						// Сохраняем предыдущую точку до mouseover соседнего пункта:
+						// она нужна повторной проверке направления и передаче открытого состояния.
+						return;
+					}
+
+					currentElem = null;
+					instance._cancelSmoothSwitch(elm);
+					instance.hide({ relatedTarget: relatedTarget, elm: elm });
 					instance._updatePointerPosition(event);
 				});
 			});

package/app/modules/vgnav/scss/vgnav.scss

@@ -150,6 +150,41 @@
 		}
 	}
 
+	&.vg-nav-overflow-enabled.vg-nav-horizontal {
+		> .vg-nav-wrapper {
+			width: 100%;
+			min-width: 0;
+			flex-wrap: nowrap;
+
+			> li {
+				flex: 0 0 auto;
+			}
+		}
+
+		.vg-nav-overflow {
+			> a {
+				align-items: center;
+				justify-content: center;
+			}
+
+			&-icon {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				line-height: 1;
+			}
+
+			&-label:not(:first-child) {
+				margin-left: .375rem;
+			}
+
+			> .dropdown-content > .vg-nav-overflow-list {
+				max-height: none;
+				overflow: visible;
+			}
+		}
+	}
+
 	/** set placement **/
 	@include placement.placement();
 

package/app/modules/vgtable/scss/_fixed-columns.scss

@@ -54,31 +54,29 @@
 		inset-inline-end: var(--vg-table-fixed-offset);
 	}
 
-	tbody tr > [data-vg-table-fixed-side],
-	tfoot tr > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: none;
-	}
-
-	.vg-table-striped tbody tr:nth-child(even) > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: linear-gradient(var(--vg-table-tbody-bg-striped), var(--vg-table-tbody-bg-striped));
-	}
-
-	.vg-table-hovered tbody tr:hover > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: linear-gradient(var(--vg-table-tbody-bg-hovered), var(--vg-table-tbody-bg-hovered));
-	}
-
-	tbody tr.vg-table-row-selected > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: linear-gradient(var(--vg-table-selection-row-background), var(--vg-table-selection-row-background));
-	}
-
-	tbody tr.vg-table-row-selected:hover > [data-vg-table-fixed-side] {
-		background-color: var(--vg-table-fixed-cell-bg);
-		background-image: linear-gradient(var(--vg-table-selection-row-background-hovered), var(--vg-table-selection-row-background-hovered));
-	}
+	tbody tr > [data-vg-table-fixed-side],
+	tfoot tr > [data-vg-table-fixed-side] {
+		background-color: var(--vg-table-fixed-cell-bg);
+		background-image: none;
+		box-shadow: inset 0 0 0 100vmax transparent;
+		transition: var(--vg-table-transition);
+	}
+
+	.vg-table-striped tbody tr:nth-child(even) > [data-vg-table-fixed-side] {
+		box-shadow: inset 0 0 0 100vmax var(--vg-table-tbody-bg-striped);
+	}
+
+	.vg-table-hovered tbody tr:hover > [data-vg-table-fixed-side] {
+		box-shadow: inset 0 0 0 100vmax var(--vg-table-tbody-bg-hovered);
+	}
+
+	tbody tr.vg-table-row-selected > [data-vg-table-fixed-side] {
+		box-shadow: inset 0 0 0 100vmax var(--vg-table-selection-row-background);
+	}
+
+	tbody tr.vg-table-row-selected:hover > [data-vg-table-fixed-side] {
+		box-shadow: inset 0 0 0 100vmax var(--vg-table-selection-row-background-hovered);
+	}
 
 	[data-vg-table-fixed-edge]::after {
 		content: "";