@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/components/SDropdown/utils/useDropdownFocus.js

@@ -0,0 +1,145 @@
+import { canTakeFocus, findFocusTarget, isTextEntry, queryPanelMenuItems, queryPanelTabbables } from "./dropdownFocusables.js";
+import { toValue, watch } from "vue";
+//#region src/components/SDropdown/utils/useDropdownFocus.ts
+var PANEL_SELECTOR = ".s-ui-dropdown__panel";
+var MENU_NAVIGATION_KEYS = [
+	"ArrowDown",
+	"ArrowUp",
+	"Home",
+	"End"
+];
+/**
+* Фокус панели по модели WAI-ARIA menu button / non-modal dialog. Панель телепортирована в
+* конец `body`, поэтому браузерный Tab до неё не доходит: открытие с якоря переносит фокус в
+* панель, закрытие возвращает его на якорь, Tab с края панели закрывает её и идёт дальше
+* от якоря — как если бы панель стояла в DOM сразу за ним.
+*/
+var useDropdownFocus = (options) => {
+	/** Элемент с фокусом в момент открытия — на него фокус и вернётся. */
+	let opener = null;
+	let pendingFocusEdge = null;
+	/** Якорь в фокусе с клавиатуры: фокус встаёт на пункт, а не на саму панель. */
+	let isOpenedFromKeyboard = false;
+	let requestedFocusEdge = null;
+	let hadFocusInside = false;
+	const getPanelTree = () => [toValue(options.panel), ...toValue(options.descendantElements)];
+	const isInsidePanelTree = (node) => {
+		return node !== null && getPanelTree().some((element) => element?.contains(node));
+	};
+	const resolveRestoreTarget = () => {
+		if (opener && canTakeFocus(opener) && !isInsidePanelTree(opener)) return opener;
+		return findFocusTarget(toValue(options.trigger));
+	};
+	const captureOpener = () => {
+		const activeElement = document.activeElement;
+		opener = activeElement instanceof HTMLElement && activeElement !== document.body && !isInsidePanelTree(activeElement) ? activeElement : null;
+	};
+	const shouldMoveFocusIn = () => {
+		return toValue(options.focusOnOpen) && opener !== null && !isTextEntry(opener) && !options.isOpenedByHover();
+	};
+	/** Фокус внутри панели (или потерян из неё) — возвращается на якорь. */
+	const restoreFocus = () => {
+		const activeElement = document.activeElement;
+		const isFocusLost = activeElement === null || activeElement === document.body;
+		if (!isInsidePanelTree(activeElement) && !(isFocusLost && hadFocusInside)) return;
+		resolveRestoreTarget()?.focus({ preventScroll: true });
+	};
+	watch(options.open, (isOpen) => {
+		if (!toValue(options.enabled)) return;
+		if (isOpen) {
+			captureOpener();
+			isOpenedFromKeyboard = requestedFocusEdge !== null || Boolean(opener?.matches(":focus-visible"));
+			hadFocusInside = false;
+			pendingFocusEdge = shouldMoveFocusIn() ? requestedFocusEdge ?? "first" : null;
+			requestedFocusEdge = null;
+			return;
+		}
+		pendingFocusEdge = null;
+		requestedFocusEdge = null;
+		restoreFocus();
+	}, { flush: "sync" });
+	const focusEdgeItem = (panel, edge) => {
+		const items = queryPanelMenuItems(panel, PANEL_SELECTOR);
+		const edgeItem = edge === "first" ? items[0] : items.at(-1);
+		if (edgeItem) {
+			edgeItem.focus({ preventScroll: true });
+			return;
+		}
+		((toValue(options.menu) ? void 0 : queryPanelTabbables(panel, PANEL_SELECTOR)[0]) ?? panel).focus({ preventScroll: true });
+	};
+	watch([() => toValue(options.panelReady), () => toValue(options.panel)], ([isReady, panel]) => {
+		if (!pendingFocusEdge || !isReady || !panel || !options.open.value) return;
+		const edge = pendingFocusEdge;
+		pendingFocusEdge = null;
+		if (panel.contains(document.activeElement)) return;
+		if (isOpenedFromKeyboard) focusEdgeItem(panel, edge);
+		else panel.focus({ preventScroll: true });
+	}, { flush: "post" });
+	const handlePanelFocusIn = () => {
+		hadFocusInside = true;
+	};
+	/** Tab с края панели: закрыть и продолжить обход от якоря. */
+	const leavePanel = (event) => {
+		options.close();
+		if (event.shiftKey) event.preventDefault();
+	};
+	const handlePanelTab = (event, panel) => {
+		if (toValue(options.menu)) {
+			leavePanel(event);
+			return;
+		}
+		const tabbables = queryPanelTabbables(panel, PANEL_SELECTOR);
+		const edgeTabbable = event.shiftKey ? tabbables[0] : tabbables.at(-1);
+		if (event.target === edgeTabbable || tabbables.length === 0 || event.target === panel && event.shiftKey) {
+			leavePanel(event);
+			return;
+		}
+		event.stopPropagation();
+	};
+	const moveMenuFocus = (event, panel) => {
+		const items = queryPanelMenuItems(panel, PANEL_SELECTOR);
+		const eventTarget = event.target;
+		if (!(eventTarget instanceof HTMLElement) || items.length === 0) return;
+		const currentIndex = items.indexOf(eventTarget);
+		if (currentIndex === -1 && eventTarget !== panel) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const lastIndex = items.length - 1;
+		items[{
+			Home: 0,
+			End: lastIndex,
+			ArrowDown: currentIndex === -1 || currentIndex === lastIndex ? 0 : currentIndex + 1,
+			ArrowUp: currentIndex <= 0 ? lastIndex : currentIndex - 1
+		}[event.key] ?? 0]?.focus({ preventScroll: true });
+	};
+	const handlePanelKeydown = (event) => {
+		const panel = toValue(options.panel);
+		if (!panel || event.defaultPrevented) return;
+		if (event.key === "Tab") {
+			handlePanelTab(event, panel);
+			return;
+		}
+		if (MENU_NAVIGATION_KEYS.includes(event.key)) moveMenuFocus(event, panel);
+	};
+	/** ↓/↑ на якоре меню: открыть и встать на первый/последний пункт. */
+	const handleTriggerKeydown = (event) => {
+		if (!toValue(options.menu) || event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		if (!(event.target instanceof HTMLElement) || isTextEntry(event.target)) return;
+		event.preventDefault();
+		const edge = event.key === "ArrowDown" ? "first" : "last";
+		const panel = toValue(options.panel);
+		if (options.open.value && panel) {
+			focusEdgeItem(panel, edge);
+			return;
+		}
+		requestedFocusEdge = edge;
+		options.show();
+	};
+	return {
+		handlePanelFocusIn,
+		handlePanelKeydown,
+		handleTriggerKeydown
+	};
+};
+//#endregion
+export { useDropdownFocus };

package/dist/components/SDropdown/utils/useDropdownPanelTransition.cjs

@@ -0,0 +1,30 @@
+let vue = require("vue");
+//#region src/components/SDropdown/utils/useDropdownPanelTransition.ts
+/**
+* Разводит v-model и lifecycle Transition:
+* — `isPanelShown` сразу false при закрытии (запуск leave);
+* — `isPanelActive` остаётся true до @after-leave (позиционирование и dismiss).
+*/
+var useDropdownPanelTransition = (modelValue) => {
+	const isPanelShown = (0, vue.ref)(modelValue.value);
+	const isPanelActive = (0, vue.ref)(modelValue.value);
+	(0, vue.watch)(modelValue, (isOpen) => {
+		if (isOpen) {
+			isPanelShown.value = true;
+			isPanelActive.value = true;
+			return;
+		}
+		isPanelShown.value = false;
+	}, { flush: "sync" });
+	const handlePanelAfterLeave = () => {
+		if (modelValue.value) return;
+		isPanelActive.value = false;
+	};
+	return {
+		isPanelShown,
+		isPanelActive,
+		handlePanelAfterLeave
+	};
+};
+//#endregion
+exports.useDropdownPanelTransition = useDropdownPanelTransition;

package/dist/components/SDropdown/utils/useDropdownPanelTransition.js

@@ -0,0 +1,30 @@
+import { ref, watch } from "vue";
+//#region src/components/SDropdown/utils/useDropdownPanelTransition.ts
+/**
+* Разводит v-model и lifecycle Transition:
+* — `isPanelShown` сразу false при закрытии (запуск leave);
+* — `isPanelActive` остаётся true до @after-leave (позиционирование и dismiss).
+*/
+var useDropdownPanelTransition = (modelValue) => {
+	const isPanelShown = ref(modelValue.value);
+	const isPanelActive = ref(modelValue.value);
+	watch(modelValue, (isOpen) => {
+		if (isOpen) {
+			isPanelShown.value = true;
+			isPanelActive.value = true;
+			return;
+		}
+		isPanelShown.value = false;
+	}, { flush: "sync" });
+	const handlePanelAfterLeave = () => {
+		if (modelValue.value) return;
+		isPanelActive.value = false;
+	};
+	return {
+		isPanelShown,
+		isPanelActive,
+		handlePanelAfterLeave
+	};
+};
+//#endregion
+export { useDropdownPanelTransition };

package/dist/components/SDropdown/utils/useDropdownSheetMode.cjs

@@ -0,0 +1,16 @@
+require("../SDropdown.types.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/SDropdown/utils/useDropdownSheetMode.ts
+/**
+* Решает, показывать содержимое как bottom sheet или как floating-панель.
+* Аналог `<MQ mq="phone">` в приложении: смотрит на ширину viewport.
+*/
+var useDropdownSheetMode = (enabled, breakpoint) => {
+	const isNarrowViewport = (0, _vueuse_core.useMediaQuery)((0, vue.computed)(() => {
+		return `(max-width: ${((0, vue.toValue)(breakpoint) || 768) - .02}px)`;
+	}));
+	return (0, vue.computed)(() => (0, vue.toValue)(enabled) && isNarrowViewport.value);
+};
+//#endregion
+exports.useDropdownSheetMode = useDropdownSheetMode;

package/dist/components/SDropdown/utils/useDropdownSheetMode.js

@@ -0,0 +1,16 @@
+import "../SDropdown.types.js";
+import { computed, toValue } from "vue";
+import { useMediaQuery } from "@vueuse/core";
+//#region src/components/SDropdown/utils/useDropdownSheetMode.ts
+/**
+* Решает, показывать содержимое как bottom sheet или как floating-панель.
+* Аналог `<MQ mq="phone">` в приложении: смотрит на ширину viewport.
+*/
+var useDropdownSheetMode = (enabled, breakpoint) => {
+	const isNarrowViewport = useMediaQuery(computed(() => {
+		return `(max-width: ${(toValue(breakpoint) || 768) - .02}px)`;
+	}));
+	return computed(() => toValue(enabled) && isNarrowViewport.value);
+};
+//#endregion
+export { useDropdownSheetMode };

package/dist/components/SDropdown/utils/useDropdownTree.cjs

@@ -0,0 +1,42 @@
+const require_context = require("./context.cjs");
+let vue = require("vue");
+//#region src/components/SDropdown/utils/useDropdownTree.ts
+/**
+* Дерево вложенных dropdown. Панели телепортируются в body, поэтому по DOM родитель не
+* отличает свою вложенную панель от постороннего элемента: потомки регистрируются через
+* provide/inject, и родитель считает клик и hover внутри них «внутри», а Escape закрывает
+* только самый глубокий открытый слой.
+*/
+var useDropdownTree = (options) => {
+	const parent = (0, vue.inject)(require_context.sDropdownInjectionKey, null);
+	const children = (0, vue.shallowReactive)(/* @__PURE__ */ new Set());
+	const openChildren = (0, vue.computed)(() => [...children].filter((child) => child.isOpen()));
+	const hasOpenChild = (0, vue.computed)(() => openChildren.value.length > 0);
+	const descendantElements = (0, vue.computed)(() => openChildren.value.flatMap((child) => child.getElements()));
+	const node = {
+		isOpen: () => (0, vue.toValue)(options.open),
+		getElements: () => {
+			const element = (0, vue.toValue)(options.element);
+			if (!element) return descendantElements.value;
+			return [element, ...descendantElements.value];
+		}
+	};
+	(0, vue.provide)(require_context.sDropdownInjectionKey, {
+		registerChild: (child) => {
+			children.add(child);
+		},
+		unregisterChild: (child) => {
+			children.delete(child);
+		}
+	});
+	if (parent) {
+		parent.registerChild(node);
+		(0, vue.onScopeDispose)(() => parent.unregisterChild(node));
+	}
+	return {
+		hasOpenChild,
+		descendantElements
+	};
+};
+//#endregion
+exports.useDropdownTree = useDropdownTree;

package/dist/components/SDropdown/utils/useDropdownTree.js

@@ -0,0 +1,42 @@
+import { sDropdownInjectionKey } from "./context.js";
+import { computed, inject, onScopeDispose, provide, shallowReactive, toValue } from "vue";
+//#region src/components/SDropdown/utils/useDropdownTree.ts
+/**
+* Дерево вложенных dropdown. Панели телепортируются в body, поэтому по DOM родитель не
+* отличает свою вложенную панель от постороннего элемента: потомки регистрируются через
+* provide/inject, и родитель считает клик и hover внутри них «внутри», а Escape закрывает
+* только самый глубокий открытый слой.
+*/
+var useDropdownTree = (options) => {
+	const parent = inject(sDropdownInjectionKey, null);
+	const children = shallowReactive(/* @__PURE__ */ new Set());
+	const openChildren = computed(() => [...children].filter((child) => child.isOpen()));
+	const hasOpenChild = computed(() => openChildren.value.length > 0);
+	const descendantElements = computed(() => openChildren.value.flatMap((child) => child.getElements()));
+	const node = {
+		isOpen: () => toValue(options.open),
+		getElements: () => {
+			const element = toValue(options.element);
+			if (!element) return descendantElements.value;
+			return [element, ...descendantElements.value];
+		}
+	};
+	provide(sDropdownInjectionKey, {
+		registerChild: (child) => {
+			children.add(child);
+		},
+		unregisterChild: (child) => {
+			children.delete(child);
+		}
+	});
+	if (parent) {
+		parent.registerChild(node);
+		onScopeDispose(() => parent.unregisterChild(node));
+	}
+	return {
+		hasOpenChild,
+		descendantElements
+	};
+};
+//#endregion
+export { useDropdownTree };

package/dist/components/SDropdown/utils/useSheetDrag.cjs

@@ -0,0 +1,124 @@
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/SDropdown/utils/useSheetDrag.ts
+var DRAG_CONFIG = {
+	/** Максимальное перетягивание вверх, px. */
+	OVERDRAG_LIMIT: 50,
+	/** Доля высоты панели, после которой отпускание закрывает sheet. */
+	CLOSE_DISTANCE_RATIO: .3,
+	/** Предел дистанции закрытия для высоких панелей, px. */
+	CLOSE_DISTANCE_LIMIT: 140,
+	/** Скорость флика вниз, px/ms, закрывающая sheet независимо от дистанции. */
+	CLOSE_VELOCITY: .5,
+	/**
+	* Страховка возврата панели, мс: `transitionend` не приходит при нулевой длительности
+	* (`prefers-reduced-motion`), а без сброса состояние перетаскивания глушило бы клики.
+	*/
+	SETTLE_TIMEOUT: 400,
+	/** Интерактивные элементы шапки: по ним drag не стартует. */
+	INTERACTIVE_SELECTOR: "button, a[href], input, select, textarea, [role=\"button\"], [contenteditable=\"true\"]"
+};
+/**
+* Перетаскивание bottom sheet вниз для закрытия — на pointer events, без сторонних зависимостей.
+* Пока жест активен, панель позиционируется inline-стилем и перебивает CSS-транзишен.
+*/
+var useSheetDrag = (options) => {
+	const offset = (0, vue.shallowRef)(0);
+	const isDragging = (0, vue.shallowRef)(false);
+	const isSettling = (0, vue.shallowRef)(false);
+	let activePointerId = null;
+	let startY = 0;
+	let previousY = 0;
+	let previousTimeStamp = 0;
+	let currentY = 0;
+	let currentTimeStamp = 0;
+	let settleTimeoutId;
+	const isActive = (0, vue.computed)(() => isDragging.value || isSettling.value);
+	const stopSettling = () => {
+		clearTimeout(settleTimeoutId);
+		settleTimeoutId = void 0;
+		isSettling.value = false;
+	};
+	const startSettling = () => {
+		isSettling.value = true;
+		clearTimeout(settleTimeoutId);
+		settleTimeoutId = setTimeout(stopSettling, DRAG_CONFIG.SETTLE_TIMEOUT);
+	};
+	const reset = () => {
+		activePointerId = null;
+		offset.value = 0;
+		isDragging.value = false;
+		stopSettling();
+	};
+	const getPopupHeight = () => (0, vue.toValue)(options.popup)?.offsetHeight ?? 0;
+	const shouldClose = () => {
+		const distance = currentY - startY;
+		if (distance <= 0) return false;
+		const elapsed = currentTimeStamp - previousTimeStamp;
+		if ((elapsed > 0 ? (currentY - previousY) / elapsed : 0) >= DRAG_CONFIG.CLOSE_VELOCITY) return true;
+		return distance >= Math.min(getPopupHeight() * DRAG_CONFIG.CLOSE_DISTANCE_RATIO, DRAG_CONFIG.CLOSE_DISTANCE_LIMIT);
+	};
+	const handlePointerDown = (event) => {
+		if (activePointerId !== null) return;
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		if (event.target instanceof Element && event.target.closest(DRAG_CONFIG.INTERACTIVE_SELECTOR)) return;
+		activePointerId = event.pointerId;
+		startY = event.clientY;
+		currentY = event.clientY;
+		previousY = event.clientY;
+		currentTimeStamp = event.timeStamp;
+		previousTimeStamp = event.timeStamp;
+		stopSettling();
+		isDragging.value = true;
+	};
+	const handlePointerMove = (event) => {
+		if (activePointerId !== event.pointerId) return;
+		previousY = currentY;
+		previousTimeStamp = currentTimeStamp;
+		currentY = event.clientY;
+		currentTimeStamp = event.timeStamp;
+		offset.value = Math.max(event.clientY - startY, -DRAG_CONFIG.OVERDRAG_LIMIT);
+	};
+	const handlePointerEnd = (event) => {
+		if (activePointerId !== event.pointerId) return;
+		activePointerId = null;
+		isDragging.value = false;
+		if (shouldClose()) {
+			isSettling.value = true;
+			offset.value = getPopupHeight() + DRAG_CONFIG.OVERDRAG_LIMIT;
+			options.onClose();
+			return;
+		}
+		if (offset.value === 0) {
+			stopSettling();
+			return;
+		}
+		startSettling();
+		offset.value = 0;
+	};
+	const handleTransitionEnd = (event) => {
+		if (event.propertyName !== "transform" || isDragging.value || offset.value !== 0) return;
+		stopSettling();
+	};
+	(0, _vueuse_core.useEventListener)(() => (0, vue.toValue)(options.handle), "pointerdown", handlePointerDown);
+	(0, _vueuse_core.useEventListener)(window, "pointermove", handlePointerMove);
+	(0, _vueuse_core.useEventListener)(window, "pointerup", handlePointerEnd);
+	(0, _vueuse_core.useEventListener)(window, "pointercancel", handlePointerEnd);
+	(0, _vueuse_core.useEventListener)(() => (0, vue.toValue)(options.popup), "transitionend", handleTransitionEnd);
+	(0, vue.onScopeDispose)(() => {
+		clearTimeout(settleTimeoutId);
+	});
+	return {
+		isActive,
+		popupStyles: (0, vue.computed)(() => {
+			if (!isActive.value) return;
+			return {
+				transform: `translate3d(0, ${offset.value}px, 0)`,
+				transition: isSettling.value ? "transform var(--s-ui-transition-duration-slow) var(--s-ui-transition-easing-standard)" : "none"
+			};
+		}),
+		reset
+	};
+};
+//#endregion
+exports.useSheetDrag = useSheetDrag;

package/dist/components/SDropdown/utils/useSheetDrag.js

@@ -0,0 +1,124 @@
+import { computed, onScopeDispose, shallowRef, toValue } from "vue";
+import { useEventListener } from "@vueuse/core";
+//#region src/components/SDropdown/utils/useSheetDrag.ts
+var DRAG_CONFIG = {
+	/** Максимальное перетягивание вверх, px. */
+	OVERDRAG_LIMIT: 50,
+	/** Доля высоты панели, после которой отпускание закрывает sheet. */
+	CLOSE_DISTANCE_RATIO: .3,
+	/** Предел дистанции закрытия для высоких панелей, px. */
+	CLOSE_DISTANCE_LIMIT: 140,
+	/** Скорость флика вниз, px/ms, закрывающая sheet независимо от дистанции. */
+	CLOSE_VELOCITY: .5,
+	/**
+	* Страховка возврата панели, мс: `transitionend` не приходит при нулевой длительности
+	* (`prefers-reduced-motion`), а без сброса состояние перетаскивания глушило бы клики.
+	*/
+	SETTLE_TIMEOUT: 400,
+	/** Интерактивные элементы шапки: по ним drag не стартует. */
+	INTERACTIVE_SELECTOR: "button, a[href], input, select, textarea, [role=\"button\"], [contenteditable=\"true\"]"
+};
+/**
+* Перетаскивание bottom sheet вниз для закрытия — на pointer events, без сторонних зависимостей.
+* Пока жест активен, панель позиционируется inline-стилем и перебивает CSS-транзишен.
+*/
+var useSheetDrag = (options) => {
+	const offset = shallowRef(0);
+	const isDragging = shallowRef(false);
+	const isSettling = shallowRef(false);
+	let activePointerId = null;
+	let startY = 0;
+	let previousY = 0;
+	let previousTimeStamp = 0;
+	let currentY = 0;
+	let currentTimeStamp = 0;
+	let settleTimeoutId;
+	const isActive = computed(() => isDragging.value || isSettling.value);
+	const stopSettling = () => {
+		clearTimeout(settleTimeoutId);
+		settleTimeoutId = void 0;
+		isSettling.value = false;
+	};
+	const startSettling = () => {
+		isSettling.value = true;
+		clearTimeout(settleTimeoutId);
+		settleTimeoutId = setTimeout(stopSettling, DRAG_CONFIG.SETTLE_TIMEOUT);
+	};
+	const reset = () => {
+		activePointerId = null;
+		offset.value = 0;
+		isDragging.value = false;
+		stopSettling();
+	};
+	const getPopupHeight = () => toValue(options.popup)?.offsetHeight ?? 0;
+	const shouldClose = () => {
+		const distance = currentY - startY;
+		if (distance <= 0) return false;
+		const elapsed = currentTimeStamp - previousTimeStamp;
+		if ((elapsed > 0 ? (currentY - previousY) / elapsed : 0) >= DRAG_CONFIG.CLOSE_VELOCITY) return true;
+		return distance >= Math.min(getPopupHeight() * DRAG_CONFIG.CLOSE_DISTANCE_RATIO, DRAG_CONFIG.CLOSE_DISTANCE_LIMIT);
+	};
+	const handlePointerDown = (event) => {
+		if (activePointerId !== null) return;
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		if (event.target instanceof Element && event.target.closest(DRAG_CONFIG.INTERACTIVE_SELECTOR)) return;
+		activePointerId = event.pointerId;
+		startY = event.clientY;
+		currentY = event.clientY;
+		previousY = event.clientY;
+		currentTimeStamp = event.timeStamp;
+		previousTimeStamp = event.timeStamp;
+		stopSettling();
+		isDragging.value = true;
+	};
+	const handlePointerMove = (event) => {
+		if (activePointerId !== event.pointerId) return;
+		previousY = currentY;
+		previousTimeStamp = currentTimeStamp;
+		currentY = event.clientY;
+		currentTimeStamp = event.timeStamp;
+		offset.value = Math.max(event.clientY - startY, -DRAG_CONFIG.OVERDRAG_LIMIT);
+	};
+	const handlePointerEnd = (event) => {
+		if (activePointerId !== event.pointerId) return;
+		activePointerId = null;
+		isDragging.value = false;
+		if (shouldClose()) {
+			isSettling.value = true;
+			offset.value = getPopupHeight() + DRAG_CONFIG.OVERDRAG_LIMIT;
+			options.onClose();
+			return;
+		}
+		if (offset.value === 0) {
+			stopSettling();
+			return;
+		}
+		startSettling();
+		offset.value = 0;
+	};
+	const handleTransitionEnd = (event) => {
+		if (event.propertyName !== "transform" || isDragging.value || offset.value !== 0) return;
+		stopSettling();
+	};
+	useEventListener(() => toValue(options.handle), "pointerdown", handlePointerDown);
+	useEventListener(window, "pointermove", handlePointerMove);
+	useEventListener(window, "pointerup", handlePointerEnd);
+	useEventListener(window, "pointercancel", handlePointerEnd);
+	useEventListener(() => toValue(options.popup), "transitionend", handleTransitionEnd);
+	onScopeDispose(() => {
+		clearTimeout(settleTimeoutId);
+	});
+	return {
+		isActive,
+		popupStyles: computed(() => {
+			if (!isActive.value) return;
+			return {
+				transform: `translate3d(0, ${offset.value}px, 0)`,
+				transition: isSettling.value ? "transform var(--s-ui-transition-duration-slow) var(--s-ui-transition-easing-standard)" : "none"
+			};
+		}),
+		reset
+	};
+};
+//#endregion
+export { useSheetDrag };

package/dist/components/SDropdownMenu/SDropdownMenu.vue.cjs

@@ -0,0 +1,6 @@
+const require_SDropdownMenu_vue_vue_type_script_setup_true_lang = require("./SDropdownMenu.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                                   */
+//#region src/components/SDropdownMenu/SDropdownMenu.vue
+var SDropdownMenu_default = require_SDropdownMenu_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SDropdownMenu_default;

package/dist/components/SDropdownMenu/SDropdownMenu.vue.js

@@ -0,0 +1,6 @@
+import SDropdownMenu_vue_vue_type_script_setup_true_lang_default from "./SDropdownMenu.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                 */
+//#region src/components/SDropdownMenu/SDropdownMenu.vue
+var SDropdownMenu_default = SDropdownMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SDropdownMenu_default as default };

package/dist/components/SDropdownMenu/SDropdownMenu.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,49 @@
+let vue = require("vue");
+//#region src/components/SDropdownMenu/SDropdownMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "s-ui-dropdown-menu__header"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "s-ui-dropdown-menu__footer"
+};
+var SDropdownMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SDropdownMenu",
+	props: {
+		width: {},
+		maxHeight: {},
+		accent: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const slots = (0, vue.useSlots)();
+		const resolveCssDimension = (dimension) => {
+			if (typeof dimension === "number") return `${dimension}px`;
+			return dimension;
+		};
+		const dropdownMenuClassNames = (0, vue.computed)(() => ({
+			"s-ui-dropdown-menu--accent": __props.accent,
+			"s-ui-dropdown-menu--bounded": Boolean(__props.maxHeight)
+		}));
+		const dropdownMenuBodyClassNames = (0, vue.computed)(() => ({ "s-ui-dropdown-menu__body--scrollable": Boolean(__props.maxHeight) }));
+		const dropdownMenuStyles = (0, vue.computed)(() => ({
+			"--s-ui-dropdown-menu-width": resolveCssDimension(__props.width),
+			"--s-ui-dropdown-menu-max-height": resolveCssDimension(__props.maxHeight)
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)(["s-ui-dropdown-menu", dropdownMenuClassNames.value]),
+				style: (0, vue.normalizeStyle)(dropdownMenuStyles.value)
+			}, [
+				(0, vue.unref)(slots).header ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "header")])) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["s-ui-dropdown-menu__body", dropdownMenuBodyClassNames.value]) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2),
+				(0, vue.unref)(slots).footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [(0, vue.renderSlot)(_ctx.$slots, "footer")])) : (0, vue.createCommentVNode)("", true)
+			], 6);
+		};
+	}
+});
+//#endregion
+exports.default = SDropdownMenu_vue_vue_type_script_setup_true_lang_default;