@rdlabo/ionic-theme-ios27 1.2.0-3 → 1.2.0-4

package/dist/sheets-of-glass/index.js

@@ -1,358 +1,295 @@
-import { createGesture } from '@ionic/core';
-import { changeSelectedElement, cloneElement, getStep } from '../utils';
-import { isNativeUIShell } from '../native-integration';
-import { animationRect, createMoveAnimation, createPreMoveAnimation, createTabBarDragAnimation, createTabBarPressAnimation, createTabBarReleaseAnimation, getMoveAnimationKeyframe, getScaleAnimation, } from './animations';
-const GESTURE_NAME = 'ios27-enable-gesture';
-const ANIMATED_NAME = 'ios27-animated';
-export const registerEffect = (targetElement, effectTagName, selectedClassName, scales, vertical = false) => {
-    if (!targetElement.classList.contains('ios')) {
-        return undefined;
-    }
-    let gesture;
-    let moveAnimation;
-    let currentTouchedElement;
-    let selectedElementBeforeGesture;
-    let clearActivatedTimer;
-    let animationPosition = undefined;
-    let scaleAnimationPromise;
-    let startAnimationPromise;
-    let maxVelocity = 0;
-    let releaseAnimation;
-    let tabPressAnimation;
-    let tabPressStartedAt = 0;
-    let tabDragging = false;
-    let destroyed = false;
-    const originalTabBarScale = targetElement.style.getPropertyValue('--ios27-tab-bar-scale');
-    const effectElement = cloneElement(effectTagName, false);
-    if (vertical)
-        effectElement.classList.add('ios27-vertical-tab-effect');
-    const stopTabPress = () => {
-        if (!tabPressAnimation)
-            return;
-        const native = effectElement.shadowRoot.querySelector('[part="native"]');
-        const transform = getComputedStyle(effectElement).transform;
-        const scale = getComputedStyle(native).transform;
-        tabPressAnimation.destroy();
-        tabPressAnimation = undefined;
-        effectElement.style.transform = transform;
-        native.style.transform = scale;
-    };
-    let onPointerUp;
-    let onPointerCancel;
-    const removePointerEndListeners = () => {
-        if (onPointerUp) {
-            document.removeEventListener('pointerup', onPointerUp);
-            onPointerUp = undefined;
-        }
-        if (onPointerCancel) {
-            document.removeEventListener('pointercancel', onPointerCancel);
-            onPointerCancel = undefined;
-        }
-    };
-    const cancelActiveGesture = () => {
-        stopTabPress();
-        releaseAnimation?.destroy();
-        releaseAnimation = undefined;
-        removePointerEndListeners();
-        if (clearActivatedTimer !== undefined) {
-            clearTimeout(clearActivatedTimer);
-            clearActivatedTimer = undefined;
-        }
-        currentTouchedElement?.classList.remove('ion-activated');
-        if (!currentTouchedElement?.classList.contains(selectedClassName)) {
-            selectedElementBeforeGesture?.classList.add(selectedClassName);
-        }
-        currentTouchedElement = undefined;
-        selectedElementBeforeGesture = undefined;
-        moveAnimation?.destroy();
-        moveAnimation = undefined;
-        effectElement.style.display = 'none';
-        maxVelocity = 0;
-        targetElement.classList.remove(ANIMATED_NAME);
-    };
-    const onPointerDown = (event) => {
-        if (isNativeUIShell(targetElement))
-            return;
-        stopTabPress();
-        tabDragging = false;
-        releaseAnimation?.destroy();
-        releaseAnimation = undefined;
-        clearActivated();
-        gesture.destroy();
-        createAnimationGesture();
-        removePointerEndListeners();
-        onPointerUp = () => {
-            clearActivatedTimer = setTimeout(async () => {
-                await onEndGesture();
-                if (destroyed)
-                    return;
-                gesture.destroy();
-                createAnimationGesture();
-            });
-            removePointerEndListeners();
-        };
-        onPointerCancel = () => {
-            cancelActiveGesture();
-            gesture.destroy();
-            createAnimationGesture();
-        };
-        document.addEventListener('pointerup', onPointerUp);
-        document.addEventListener('pointercancel', onPointerCancel);
-    };
-    targetElement.addEventListener('pointerdown', onPointerDown);
-    const onClick = (event) => {
-        if (vertical && tabDragging && event.isTrusted && event.detail > 0) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-    };
-    targetElement.addEventListener('click', onClick, true);
-    const axisDetail = (detail) => vertical
-        ? {
-            ...detail,
-            currentX: detail.currentY,
-            currentY: detail.currentX,
-            startX: detail.startY,
-            startY: detail.startX,
-            velocityX: detail.velocityY,
-            velocityY: detail.velocityX,
-        }
-        : detail;
-    const createAnimationGesture = () => {
-        targetElement.classList.add(GESTURE_NAME);
-        gesture = createGesture({
-            el: targetElement,
-            threshold: 0,
-            direction: vertical ? 'y' : 'x',
-            gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
-            onStart: (event) => onStartGesture(axisDetail(event)),
-            onMove: (event) => onMoveGesture(axisDetail(event)),
-            onEnd: (detail) => {
-                if (effectTagName === 'ion-tab-button' && tabDragging)
-                    onMoveGesture(axisDetail(detail));
-                onEndGesture().then();
-            },
-        });
-        gesture.enable(true);
-    };
-    createAnimationGesture();
-    const clearActivated = (isEndGesture = false) => {
-        if (!currentTouchedElement) {
-            return;
-        }
-        if (!isEndGesture && !currentTouchedElement.classList.contains(selectedClassName)) {
-            currentTouchedElement.click();
-            currentTouchedElement.classList.add(selectedClassName);
-        }
-        currentTouchedElement.classList.remove('ion-activated');
-        currentTouchedElement = undefined;
-        selectedElementBeforeGesture = undefined;
-        effectElement.style.display = 'none';
-        maxVelocity = 0;
-        targetElement.classList.remove(ANIMATED_NAME);
-    };
-    const onStartGesture = (detail) => {
-        if (isNativeUIShell(targetElement))
-            return false;
-        currentTouchedElement = detail.event.target.closest(effectTagName) || undefined;
-        const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
-        if (currentTouchedElement === undefined ||
-            currentTouchedElement.parentElement !== targetElement ||
-            currentTouchedElement.disabled ||
-            tabSelectedElement === null) {
-            currentTouchedElement = undefined;
-            return false;
-        }
-        selectedElementBeforeGesture = tabSelectedElement;
-        if (effectTagName === 'ion-tab-button') {
-            targetElement.style.setProperty('--ios27-tab-bar-scale', String(1 + 14.14 / (vertical ? targetElement.offsetHeight : targetElement.offsetWidth)));
-        }
-        if (vertical)
-            targetElement.classList.add(ANIMATED_NAME);
-        animationPosition = {
-            minPositionX: animationRect(targetElement, vertical).left,
-            maxPositionX: animationRect(targetElement, vertical).right - (vertical ? tabSelectedElement.clientHeight : tabSelectedElement.clientWidth),
-            width: vertical ? tabSelectedElement.clientHeight : tabSelectedElement.clientWidth,
-            positionY: animationRect(tabSelectedElement, vertical).top,
-        };
-        targetElement.classList.add(ANIMATED_NAME);
-        changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
-        if (effectTagName === 'ion-tab-button') {
-            moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition, vertical);
-            moveAnimation.progressStart(true, getStep(animationRect(tabSelectedElement, vertical).left + animationRect(tabSelectedElement, vertical).width / 2, animationPosition));
-            tabPressAnimation = createTabBarPressAnimation(effectElement, tabSelectedElement, currentTouchedElement, targetElement, vertical);
-            tabPressStartedAt = performance.now();
-            void tabPressAnimation.play();
-            return true;
-        }
-        const startAnimation = (() => {
-            if (tabSelectedElement === currentTouchedElement) {
-                return new Promise((resolve) => resolve());
-            }
-            else {
-                const preMoveAnimation = createPreMoveAnimation(effectElement, tabSelectedElement, currentTouchedElement, animationPosition);
-                return preMoveAnimation.play().finally(() => preMoveAnimation.destroy());
-            }
-        })();
-        startAnimationPromise = startAnimation;
-        startAnimation.then(() => {
-            if (!currentTouchedElement) {
-                return;
-            }
-            moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition);
-            moveAnimation.progressStart(true, getStep(currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2, animationPosition));
-        });
-        getScaleAnimation(effectElement).duration(200).to('opacity', 1).to('transform', scales.large).play();
-        return true;
-    };
-    const onMoveGesture = (detail) => {
-        if (currentTouchedElement === undefined || !moveAnimation || releaseAnimation) {
-            return false;
-        }
-        if (effectTagName === 'ion-tab-button') {
-            if (Math.abs(detail.currentX - detail.startX) < 3 && !tabDragging)
-                return;
-            tabDragging = true;
-            stopTabPress();
-            tabPressAnimation = createTabBarDragAnimation(effectElement, targetElement, detail.velocityX, vertical);
-            void tabPressAnimation.play();
-        }
-        else if (scaleAnimationPromise === undefined) {
-            if (Math.abs(detail.velocityX) > maxVelocity) {
-                maxVelocity = Math.abs(detail.velocityX);
-            }
-            if (Math.abs(detail.velocityX) > 0.2) {
-                scaleAnimationPromise = getScaleAnimation(effectElement)
-                    .duration(720)
-                    .keyframes(getMoveAnimationKeyframe('slowly', scales))
-                    .play()
-                    .finally(() => (scaleAnimationPromise = undefined));
-            }
-            if (maxVelocity > 0.2 && Math.abs(detail.velocityX) < 0.15 && Math.abs(detail.startX - detail.currentX) > 100) {
-                scaleAnimationPromise = getScaleAnimation(effectElement)
-                    .duration(720)
-                    .keyframes(getMoveAnimationKeyframe(detail.velocityX > 0 ? 'moveRight' : 'moveLeft', scales))
-                    .play()
-                    .finally(() => (scaleAnimationPromise = undefined));
-                maxVelocity = 0;
-            }
-        }
-        const currentX = detail.currentX;
-        const previousY = animationRect(targetElement, vertical).top + animationRect(targetElement, vertical).height / 2;
-        const nextEl = targetElement.getRootNode().elementFromPoint(vertical ? previousY : currentX, vertical ? currentX : previousY);
-        let latestTouchedElement = nextEl?.closest(effectTagName) || undefined;
-        if (vertical && effectTagName === 'ion-tab-button') {
-            const bar = targetElement.getBoundingClientRect();
-            const tabs = Array.from(targetElement.querySelectorAll(effectTagName)).filter((tab) => tab.offsetWidth > 0);
-            const distance = (tab) => Math.abs(currentX - (bar.top + tab.offsetTop + tab.offsetHeight / 2));
-            latestTouchedElement =
-                currentX >= bar.top && currentX <= bar.bottom
-                    ? tabs.reduce((closest, tab) => (!closest || distance(tab) < distance(closest) ? tab : closest), undefined)
-                    : undefined;
-        }
-        if (latestTouchedElement &&
-            latestTouchedElement.parentElement === targetElement &&
-            !latestTouchedElement.disabled &&
-            currentTouchedElement !== latestTouchedElement) {
-            currentTouchedElement = latestTouchedElement;
-            changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
-        }
-        moveAnimation.progressStep(getStep(detail.currentX, animationPosition));
-        return true;
-    };
-    const onEndGesture = async () => {
-        if (releaseAnimation)
-            return;
-        if (clearActivatedTimer !== undefined) {
-            clearTimeout(clearActivatedTimer);
-            clearActivatedTimer = undefined;
-        }
-        if (currentTouchedElement && !currentTouchedElement.classList.contains(selectedClassName)) {
-            currentTouchedElement.click();
-            currentTouchedElement.classList.add(selectedClassName);
-        }
-        if (startAnimationPromise) {
-            await startAnimationPromise;
-        }
-        const tapElapsed = tabPressAnimation && !tabDragging && selectedElementBeforeGesture !== currentTouchedElement
-            ? performance.now() - tabPressStartedAt
-            : undefined;
-        if (tabPressAnimation && !tabDragging && tapElapsed === undefined) {
-            const pressing = tabPressAnimation;
-            const remaining = 200 - (performance.now() - tabPressStartedAt);
-            if (remaining > 0)
-                await new Promise((resolve) => setTimeout(resolve, remaining));
-            if (tabPressAnimation !== pressing)
-                return;
-        }
-        if (currentTouchedElement === undefined || !moveAnimation || releaseAnimation) {
-            return false;
-        }
-        if (effectTagName !== 'ion-tab-button')
-            setTimeout(() => {
-                if (!currentTouchedElement) {
-                    return;
-                }
-                const targetX = currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2;
-                const step = getStep(targetX, animationPosition);
-                moveAnimation.progressStep(step);
-            });
-        if (effectTagName === 'ion-tab-button') {
-            stopTabPress();
-            moveAnimation.destroy();
-            moveAnimation = undefined;
-            const tabs = Array.from(targetElement.querySelectorAll(effectTagName)).filter((tab) => tab.offsetWidth > 0);
-            if (vertical) {
-                currentTouchedElement.classList.remove('ion-activated');
-                targetElement.classList.remove(ANIMATED_NAME);
-            }
-            const releasing = createTabBarReleaseAnimation(effectElement, currentTouchedElement, tapElapsed !== undefined && tapElapsed < 200
-                ? {
-                    elapsed: tapElapsed,
-                    distance: Math.abs(tabs.indexOf(currentTouchedElement) - tabs.indexOf(selectedElementBeforeGesture)),
-                }
-                : undefined, vertical);
-            currentTouchedElement.classList.remove('ion-activated');
-            releaseAnimation = releasing;
-            await releasing.play();
-            if (releaseAnimation !== releasing)
-                return;
-            clearActivated(true);
-            releasing.destroy();
-            releaseAnimation = undefined;
-        }
-        else {
-            await getScaleAnimation(effectElement).duration(120).to('transform', `scale(1, 0.92)`).play();
-        }
-        moveAnimation?.destroy();
-        clearActivated(true);
-        return true;
-    };
-    const nativeChanged = () => {
-        gesture.enable(!isNativeUIShell(targetElement));
-        cancelActiveGesture();
-    };
-    targetElement.addEventListener('nativeUIShellChange', nativeChanged);
-    if (isNativeUIShell(targetElement))
-        nativeChanged();
-    return {
-        destroy: () => {
-            destroyed = true;
-            cancelActiveGesture();
-            targetElement.removeEventListener('pointerdown', onPointerDown);
-            targetElement.removeEventListener('click', onClick, true);
-            targetElement.removeEventListener('nativeUIShellChange', nativeChanged);
-            if (gesture) {
-                gesture.destroy();
-            }
-            targetElement.classList.remove(GESTURE_NAME);
-            effectElement.remove();
-            if (effectTagName === 'ion-tab-button') {
-                if (originalTabBarScale)
-                    targetElement.style.setProperty('--ios27-tab-bar-scale', originalTabBarScale);
-                else
-                    targetElement.style.removeProperty('--ios27-tab-bar-scale');
-            }
-        },
-    };
+import { changeSelectedElement, cloneElement, getStep } from "../utils.js";
+import { isNativeUIShell } from "../native-integration/index.js";
+import { animationRect, createMoveAnimation, createPreMoveAnimation, createTabBarDragAnimation, createTabBarPressAnimation, createTabBarReleaseAnimation, getMoveAnimationKeyframe, getScaleAnimation } from "./animations.js";
+import { createGesture } from "@ionic/core";
+//#region src/sheets-of-glass/index.ts
+const GESTURE_NAME = "ios27-enable-gesture";
+const ANIMATED_NAME = "ios27-animated";
+const registerEffect = (targetElement, effectTagName, selectedClassName, scales, vertical = false) => {
+	if (!targetElement.classList.contains("ios")) return;
+	let gesture;
+	let moveAnimation;
+	let currentTouchedElement;
+	let selectedElementBeforeGesture;
+	let clearActivatedTimer;
+	let animationPosition = void 0;
+	let scaleAnimationPromise;
+	let startAnimationPromise;
+	let maxVelocity = 0;
+	let releaseAnimation;
+	let tabPressAnimation;
+	let tabPressStartedAt = 0;
+	let tabDragging = false;
+	let destroyed = false;
+	const originalTabBarScale = targetElement.style.getPropertyValue("--ios27-tab-bar-scale");
+	const effectElement = cloneElement(effectTagName, false);
+	if (vertical) effectElement.classList.add("ios27-vertical-tab-effect");
+	const stopTabPress = () => {
+		if (!tabPressAnimation) return;
+		const native = effectElement.shadowRoot.querySelector("[part=\"native\"]");
+		const transform = getComputedStyle(effectElement).transform;
+		const scale = getComputedStyle(native).transform;
+		tabPressAnimation.destroy();
+		tabPressAnimation = void 0;
+		effectElement.style.transform = transform;
+		native.style.transform = scale;
+	};
+	let onPointerUp;
+	let onPointerCancel;
+	const removePointerEndListeners = () => {
+		if (onPointerUp) {
+			document.removeEventListener("pointerup", onPointerUp);
+			onPointerUp = void 0;
+		}
+		if (onPointerCancel) {
+			document.removeEventListener("pointercancel", onPointerCancel);
+			onPointerCancel = void 0;
+		}
+	};
+	const cancelActiveGesture = () => {
+		stopTabPress();
+		releaseAnimation?.destroy();
+		releaseAnimation = void 0;
+		removePointerEndListeners();
+		if (clearActivatedTimer !== void 0) {
+			clearTimeout(clearActivatedTimer);
+			clearActivatedTimer = void 0;
+		}
+		currentTouchedElement?.classList.remove("ion-activated");
+		if (!currentTouchedElement?.classList.contains(selectedClassName)) selectedElementBeforeGesture?.classList.add(selectedClassName);
+		currentTouchedElement = void 0;
+		selectedElementBeforeGesture = void 0;
+		moveAnimation?.destroy();
+		moveAnimation = void 0;
+		effectElement.style.display = "none";
+		maxVelocity = 0;
+		targetElement.classList.remove(ANIMATED_NAME);
+	};
+	/**
+	* These event listeners fix a bug where gestures don't complete properly.
+	* They terminate the gesture using native events as a fallback.
+	*/
+	const onPointerDown = (event) => {
+		if (isNativeUIShell(targetElement)) return;
+		stopTabPress();
+		tabDragging = false;
+		releaseAnimation?.destroy();
+		releaseAnimation = void 0;
+		clearActivated();
+		gesture.destroy();
+		createAnimationGesture();
+		removePointerEndListeners();
+		onPointerUp = () => {
+			clearActivatedTimer = setTimeout(async () => {
+				await onEndGesture();
+				if (destroyed) return;
+				gesture.destroy();
+				createAnimationGesture();
+			});
+			removePointerEndListeners();
+		};
+		onPointerCancel = () => {
+			cancelActiveGesture();
+			gesture.destroy();
+			createAnimationGesture();
+		};
+		document.addEventListener("pointerup", onPointerUp);
+		document.addEventListener("pointercancel", onPointerCancel);
+	};
+	targetElement.addEventListener("pointerdown", onPointerDown);
+	const onClick = (event) => {
+		if (vertical && tabDragging && event.isTrusted && event.detail > 0) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	};
+	targetElement.addEventListener("click", onClick, true);
+	const axisDetail = (detail) => vertical ? {
+		...detail,
+		currentX: detail.currentY,
+		currentY: detail.currentX,
+		startX: detail.startY,
+		startY: detail.startX,
+		velocityX: detail.velocityY,
+		velocityY: detail.velocityX
+	} : detail;
+	const createAnimationGesture = () => {
+		targetElement.classList.add(GESTURE_NAME);
+		gesture = createGesture({
+			el: targetElement,
+			threshold: 0,
+			direction: vertical ? "y" : "x",
+			gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
+			onStart: (event) => onStartGesture(axisDetail(event)),
+			onMove: (event) => onMoveGesture(axisDetail(event)),
+			onEnd: (detail) => {
+				if (effectTagName === "ion-tab-button" && tabDragging) onMoveGesture(axisDetail(detail));
+				onEndGesture().then();
+			}
+		});
+		gesture.enable(true);
+	};
+	createAnimationGesture();
+	const clearActivated = (isEndGesture = false) => {
+		if (!currentTouchedElement) return;
+		if (!isEndGesture && !currentTouchedElement.classList.contains(selectedClassName)) {
+			currentTouchedElement.click();
+			currentTouchedElement.classList.add(selectedClassName);
+		}
+		currentTouchedElement.classList.remove("ion-activated");
+		currentTouchedElement = void 0;
+		selectedElementBeforeGesture = void 0;
+		effectElement.style.display = "none";
+		maxVelocity = 0;
+		targetElement.classList.remove(ANIMATED_NAME);
+	};
+	const onStartGesture = (detail) => {
+		if (isNativeUIShell(targetElement)) return false;
+		currentTouchedElement = detail.event.target.closest(effectTagName) || void 0;
+		const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
+		if (currentTouchedElement === void 0 || currentTouchedElement.parentElement !== targetElement || currentTouchedElement.disabled || tabSelectedElement === null) {
+			currentTouchedElement = void 0;
+			return false;
+		}
+		selectedElementBeforeGesture = tabSelectedElement;
+		if (effectTagName === "ion-tab-button") targetElement.style.setProperty("--ios27-tab-bar-scale", String(1 + 14.14 / (vertical ? targetElement.offsetHeight : targetElement.offsetWidth)));
+		if (vertical) targetElement.classList.add(ANIMATED_NAME);
+		animationPosition = {
+			minPositionX: animationRect(targetElement, vertical).left,
+			maxPositionX: animationRect(targetElement, vertical).right - (vertical ? tabSelectedElement.clientHeight : tabSelectedElement.clientWidth),
+			width: vertical ? tabSelectedElement.clientHeight : tabSelectedElement.clientWidth,
+			positionY: animationRect(tabSelectedElement, vertical).top
+		};
+		targetElement.classList.add(ANIMATED_NAME);
+		changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
+		if (effectTagName === "ion-tab-button") {
+			moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition, vertical);
+			moveAnimation.progressStart(true, getStep(animationRect(tabSelectedElement, vertical).left + animationRect(tabSelectedElement, vertical).width / 2, animationPosition));
+			tabPressAnimation = createTabBarPressAnimation(effectElement, tabSelectedElement, currentTouchedElement, targetElement, vertical);
+			tabPressStartedAt = performance.now();
+			tabPressAnimation.play();
+			return true;
+		}
+		const startAnimation = (() => {
+			if (tabSelectedElement === currentTouchedElement) return new Promise((resolve) => resolve());
+			else {
+				const preMoveAnimation = createPreMoveAnimation(effectElement, tabSelectedElement, currentTouchedElement, animationPosition);
+				return preMoveAnimation.play().finally(() => preMoveAnimation.destroy());
+			}
+		})();
+		startAnimationPromise = startAnimation;
+		startAnimation.then(() => {
+			if (!currentTouchedElement) return;
+			moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition);
+			moveAnimation.progressStart(true, getStep(currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2, animationPosition));
+		});
+		getScaleAnimation(effectElement).duration(200).to("opacity", 1).to("transform", scales.large).play();
+		return true;
+	};
+	const onMoveGesture = (detail) => {
+		if (currentTouchedElement === void 0 || !moveAnimation || releaseAnimation) return false;
+		if (effectTagName === "ion-tab-button") {
+			if (Math.abs(detail.currentX - detail.startX) < 3 && !tabDragging) return;
+			tabDragging = true;
+			stopTabPress();
+			tabPressAnimation = createTabBarDragAnimation(effectElement, targetElement, detail.velocityX, vertical);
+			tabPressAnimation.play();
+		} else if (scaleAnimationPromise === void 0) {
+			if (Math.abs(detail.velocityX) > maxVelocity) maxVelocity = Math.abs(detail.velocityX);
+			if (Math.abs(detail.velocityX) > .2) scaleAnimationPromise = getScaleAnimation(effectElement).duration(720).keyframes(getMoveAnimationKeyframe("slowly", scales)).play().finally(() => scaleAnimationPromise = void 0);
+			if (maxVelocity > .2 && Math.abs(detail.velocityX) < .15 && Math.abs(detail.startX - detail.currentX) > 100) {
+				scaleAnimationPromise = getScaleAnimation(effectElement).duration(720).keyframes(getMoveAnimationKeyframe(detail.velocityX > 0 ? "moveRight" : "moveLeft", scales)).play().finally(() => scaleAnimationPromise = void 0);
+				maxVelocity = 0;
+			}
+		}
+		const currentX = detail.currentX;
+		const previousY = animationRect(targetElement, vertical).top + animationRect(targetElement, vertical).height / 2;
+		let latestTouchedElement = targetElement.getRootNode().elementFromPoint(vertical ? previousY : currentX, vertical ? currentX : previousY)?.closest(effectTagName) || void 0;
+		if (vertical && effectTagName === "ion-tab-button") {
+			const bar = targetElement.getBoundingClientRect();
+			const tabs = Array.from(targetElement.querySelectorAll(effectTagName)).filter((tab) => tab.offsetWidth > 0);
+			const distance = (tab) => Math.abs(currentX - (bar.top + tab.offsetTop + tab.offsetHeight / 2));
+			latestTouchedElement = currentX >= bar.top && currentX <= bar.bottom ? tabs.reduce((closest, tab) => !closest || distance(tab) < distance(closest) ? tab : closest, void 0) : void 0;
+		}
+		if (latestTouchedElement && latestTouchedElement.parentElement === targetElement && !latestTouchedElement.disabled && currentTouchedElement !== latestTouchedElement) {
+			currentTouchedElement = latestTouchedElement;
+			changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
+		}
+		moveAnimation.progressStep(getStep(detail.currentX, animationPosition));
+		return true;
+	};
+	const onEndGesture = async () => {
+		if (releaseAnimation) return;
+		if (clearActivatedTimer !== void 0) {
+			clearTimeout(clearActivatedTimer);
+			clearActivatedTimer = void 0;
+		}
+		if (currentTouchedElement && !currentTouchedElement.classList.contains(selectedClassName)) {
+			currentTouchedElement.click();
+			currentTouchedElement.classList.add(selectedClassName);
+		}
+		if (startAnimationPromise) await startAnimationPromise;
+		const tapElapsed = tabPressAnimation && !tabDragging && selectedElementBeforeGesture !== currentTouchedElement ? performance.now() - tabPressStartedAt : void 0;
+		if (tabPressAnimation && !tabDragging && tapElapsed === void 0) {
+			const pressing = tabPressAnimation;
+			const remaining = 200 - (performance.now() - tabPressStartedAt);
+			if (remaining > 0) await new Promise((resolve) => setTimeout(resolve, remaining));
+			if (tabPressAnimation !== pressing) return;
+		}
+		if (currentTouchedElement === void 0 || !moveAnimation || releaseAnimation) return false;
+		if (effectTagName !== "ion-tab-button") setTimeout(() => {
+			if (!currentTouchedElement) return;
+			const targetX = currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2;
+			const step = getStep(targetX, animationPosition);
+			moveAnimation.progressStep(step);
+		});
+		if (effectTagName === "ion-tab-button") {
+			stopTabPress();
+			moveAnimation.destroy();
+			moveAnimation = void 0;
+			const tabs = Array.from(targetElement.querySelectorAll(effectTagName)).filter((tab) => tab.offsetWidth > 0);
+			if (vertical) {
+				currentTouchedElement.classList.remove("ion-activated");
+				targetElement.classList.remove(ANIMATED_NAME);
+			}
+			const releasing = createTabBarReleaseAnimation(effectElement, currentTouchedElement, tapElapsed !== void 0 && tapElapsed < 200 ? {
+				elapsed: tapElapsed,
+				distance: Math.abs(tabs.indexOf(currentTouchedElement) - tabs.indexOf(selectedElementBeforeGesture))
+			} : void 0, vertical);
+			currentTouchedElement.classList.remove("ion-activated");
+			releaseAnimation = releasing;
+			await releasing.play();
+			if (releaseAnimation !== releasing) return;
+			clearActivated(true);
+			releasing.destroy();
+			releaseAnimation = void 0;
+		} else await getScaleAnimation(effectElement).duration(120).to("transform", `scale(1, 0.92)`).play();
+		moveAnimation?.destroy();
+		clearActivated(true);
+		return true;
+	};
+	const nativeChanged = () => {
+		gesture.enable(!isNativeUIShell(targetElement));
+		cancelActiveGesture();
+	};
+	targetElement.addEventListener("nativeUIShellChange", nativeChanged);
+	if (isNativeUIShell(targetElement)) nativeChanged();
+	return { destroy: () => {
+		destroyed = true;
+		cancelActiveGesture();
+		targetElement.removeEventListener("pointerdown", onPointerDown);
+		targetElement.removeEventListener("click", onClick, true);
+		targetElement.removeEventListener("nativeUIShellChange", nativeChanged);
+		if (gesture) gesture.destroy();
+		targetElement.classList.remove(GESTURE_NAME);
+		effectElement.remove();
+		if (effectTagName === "ion-tab-button") {
+			if (originalTabBarScale) targetElement.style.setProperty("--ios27-tab-bar-scale", originalTabBarScale);
+			else targetElement.style.removeProperty("--ios27-tab-bar-scale");
+		}
+	} };
 };
+//#endregion
+export { registerEffect };
+
+//# sourceMappingURL=index.js.map