@14ch/svelte-ui 0.0.65 → 0.0.67

package/dist/components/DatepickerCalendar.svelte

@@ -12,7 +12,7 @@
 	import 'dayjs/locale/es';
 	import 'dayjs/locale/zh-cn';
 	import IconButton from './IconButton.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { t } from '../i18n';
 	import type { BivariantValueHandler } from '../types/callbackHandlers';
 
@@ -151,6 +151,10 @@
 		}
 	});
 
+	onDestroy(() => {
+		document.removeEventListener('keydown', handleKeyDown);
+	});
+
 	// =========================================================================
 	// Effects
 	// =========================================================================

package/dist/components/Modal.svelte

@@ -12,9 +12,11 @@
 	 *
 	 * This prevents state synchronization bugs and ensures consistent behavior.
 	 */
+	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { CloseReason } from '../types/propOptions';
 	import { announceOpenClose } from '../utils/accessibility';
+	import { waitForAnimations } from '../utils/animation';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -194,7 +196,6 @@
 		// 閉じるアニメーションの途中で開き直した場合は close を取り消す
 		pendingCloseReason = null;
 		dialogRef.classList.add('fade-in');
-		dialogRef.removeEventListener('animationend', closeEnd);
 		dialogRef.showModal();
 
 		setTimeout(() => {
@@ -214,11 +215,21 @@
 		isOpen = false;
 		pendingCloseReason = reason;
 		dialogRef.classList.add('fade-out');
-		dialogRef.addEventListener('animationend', closeEnd, { once: true });
+		void finishClose();
 
 		announceOpenClose(componentType, false, title || ariaLabel || '');
 	};
 
+	/** 閉じるアニメーションの完了を待って後始末する。 */
+	const finishClose = async (): Promise<void> => {
+		await tick();
+		await waitForAnimations(dialogRef);
+
+		// 閉じるアニメーションの途中で開き直した場合は何もしない
+		if (pendingCloseReason === null) return;
+		closeEnd();
+	};
+
 	/** @internal Completes the close animation. Called automatically. */
 	export const closeEnd = (): void => {
 		if (!dialogRef) return;

package/dist/components/Modal.svelte.d.ts

@@ -1,15 +1,3 @@
-/**
-     * 🚨 CRITICAL: DO NOT MANAGE MODAL STATE FROM PARENT COMPONENTS
-     *
-     * This Modal component manages its own open/closed state internally.
-     * Parent components must NEVER create their own Modal state variables.
-     *
-     * ❌ WRONG: let isModalOpen = $state(false)
-     * ✅ RIGHT: Use modalRef.open(), modalRef.close(), modalRef.toggle()
-     * ✅ RIGHT: Use onOpen/onClose callbacks for side effects
-     *
-     * This prevents state synchronization bugs and ensures consistent behavior.
-     */
 import type { Snippet } from 'svelte';
 import type { CloseReason } from '../types/propOptions';
 export type ModalProps = {

package/dist/components/Popup.svelte

@@ -18,6 +18,7 @@
 	import { onDestroy, tick, onMount } from 'svelte';
 	import { isMobileDevice, disableBodyScroll } from '../utils/mobile';
 	import { announceOpenClose } from '../utils/accessibility';
+	import { waitForAnimations } from '../utils/animation';
 	import { popupManager } from '../utils/popupManager';
 	import type { CloseReason, PopupPosition } from '../types/propOptions';
 
@@ -106,6 +107,10 @@
 	let isMobile: boolean = $state(false);
 	let bodyScrollCleanup: (() => void) | undefined = $state();
 	let pendingCloseReason: CloseReason = 'explicit';
+	let openTimer: ReturnType<typeof setTimeout> | undefined;
+	// open()/close() のたびに進め、進行中の終了処理が古い場合に破棄するための番号
+	let closeSequence = 0;
+	let isClosing = false;
 
 	// =========================================================================
 	// Lifecycle
@@ -115,6 +120,9 @@
 	});
 
 	onDestroy(() => {
+		cancelPendingOpen();
+		closeSequence++;
+		isClosing = false;
 		removeEventListenersToClose();
 		removeKeyboardListener();
 		cleanupMobileFeatures();
@@ -346,16 +354,25 @@
 
 	const closeOnResize = () => close();
 
+	const handleClickOutside = (event: MouseEvent) => {
+		if (!(event.target instanceof Node)) return;
+		if (popupRef?.contains(event.target)) return;
+		if (anchorElement?.contains(event.target)) return;
+		close('outside');
+	};
+
 	const addEventListenersToClose = () => {
 		if (typeof window === 'undefined' || typeof document === 'undefined') return;
 		window.addEventListener('resize', closeOnResize);
 		document.addEventListener('scroll', handleScroll, true);
+		document.addEventListener('click', handleClickOutside, true);
 	};
 
 	const removeEventListenersToClose = () => {
 		if (typeof window === 'undefined' || typeof document === 'undefined') return;
 		window.removeEventListener('resize', closeOnResize);
 		document.removeEventListener('scroll', handleScroll, true);
+		document.removeEventListener('click', handleClickOutside, true);
 	};
 
 	const addKeyboardListener = () => {
@@ -382,7 +399,7 @@
 		}
 	};
 
-	const announceToScreenReader = () => {
+	const announceOpened = () => {
 		if (!ariaLabel && !ariaLabelledby) return;
 		announceOpenClose('Popup', true, ariaLabel);
 	};
@@ -403,6 +420,9 @@
 	};
 
 	const closeEnd = () => {
+		if (!isClosing) return;
+		isClosing = false;
+
 		popupRef?.hidePopover();
 
 		if (popupRef) {
@@ -421,29 +441,19 @@
 		onClose?.(reason);
 	};
 
-	const clickOutside = (element: HTMLElement, callbackFunction: () => void) => {
-		function onClick(event: MouseEvent) {
-			if (!(event.target instanceof Node)) return;
+	/** 閉じるアニメーションの完了を待って後始末する。 */
+	const finishClose = async (sequence: number) => {
+		await tick();
+		await waitForAnimations(popupRef);
 
-			const isInsidePopup = element.contains(event.target);
-			const isInsideAnchor = anchorElement && anchorElement.contains(event.target);
-			const isOutside = !isInsidePopup && !isInsideAnchor;
+		if (sequence !== closeSequence) return;
+		closeEnd();
+	};
 
-			if (isOutside) {
-				callbackFunction();
-			}
-		}
-		setTimeout(() => {
-			document.body.addEventListener('click', onClick);
-		}, 1);
-		return {
-			update(newCallbackFunction: () => void) {
-				callbackFunction = newCallbackFunction;
-			},
-			destroy() {
-				document.body.removeEventListener('click', onClick);
-			}
-		};
+	const cancelPendingOpen = () => {
+		if (openTimer === undefined) return;
+		clearTimeout(openTimer);
+		openTimer = undefined;
 	};
 
 	/** Opens the popup. */
@@ -451,10 +461,17 @@
 		// 他の開いているPopupをすべて閉じる
 		popupManager.closeOthers(close);
 
+		// 閉じるアニメーションの途中で開き直した場合は close を取り消す
+		closeSequence++;
+		isClosing = false;
+		pendingCloseReason = 'explicit';
+
 		previousActiveElement = document.activeElement as HTMLElement;
 
-		setTimeout(async () => {
-			popupRef?.removeEventListener('animationend', closeEnd);
+		cancelPendingOpen();
+		openTimer = setTimeout(async () => {
+			openTimer = undefined;
+			if (!popupRef?.isConnected) return;
 
 			if (shouldUseFullscreen && popupRef) {
 				// ボトムシート: showPopover()の前に位置を画面下部に設定
@@ -497,24 +514,29 @@
 				focusFirstElement();
 			}
 
-			announceToScreenReader();
+			announceOpened();
 			onOpen?.();
 		}, 1);
 	};
 
 	/** Closes the popup. */
 	export const close = (reason: CloseReason = 'explicit') => {
+		cancelPendingOpen();
+		// 開いていないPopupのcloseは、close reasonを汚さないよう何もしない
+		if (!isOpen && !isClosing && !popupRef?.matches(':popover-open')) return;
+
 		if (pendingCloseReason === 'explicit') {
 			pendingCloseReason = reason;
 		}
 		isOpen = false;
+		isClosing = true;
 		removeEventListenersToClose();
 		removeKeyboardListener();
 		cleanupMobileFeatures();
 		popupManager.unregister(close);
 		// アニメーション完了後に閉じる（fullscreen/通常共通）
-		popupRef?.addEventListener('animationend', closeEnd, { once: true });
 		// onCloseはアニメーション完了後に呼ぶ（closeEndで実行）
+		void finishClose(++closeSequence);
 	};
 
 	/** Toggles between open and closed. */
@@ -552,9 +574,6 @@
 	aria-modal={undefined}
 	id={popupId}
 	data-testid="popup"
-	use:clickOutside={() => {
-		if (isOpen) close('outside');
-	}}
 >
 	{@render children()}
 </div>

package/dist/components/PopupMenu.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
 	import Popup from './Popup.svelte';
 	import Icon from './Icon.svelte';
+	import { announceToScreenReader } from '../utils/accessibility';
 	import type { MenuItem } from '../types/menuItem';
 
 	import type { SvelteComponent } from 'svelte';
@@ -167,26 +168,13 @@
 		activeIndex = index;
 	};
 
-	const announceMenuOpened = () => {
-		const announcement = document.createElement('div');
-		announcement.setAttribute('aria-live', 'polite');
-		announcement.setAttribute('aria-atomic', 'true');
-		announcement.className = 'sr-only';
-		announcement.textContent = `${ariaLabel} opened with ${actionableItems.length} items`;
-		document.body.appendChild(announcement);
-
-		setTimeout(() => {
-			document.body.removeChild(announcement);
-		}, 1000);
-	};
-
 	const handlePopupOpen = () => {
 		activeIndex = -1; // 初期状態ではハイライトなし
 		tick().then(() => {
 			menuContainerRef?.focus();
 		});
 
-		announceMenuOpened();
+		announceToScreenReader(`${ariaLabel} opened with ${actionableItems.length} items`);
 	};
 
 	const handlePopupClose = (reason: 'escape' | 'outside' | 'explicit') => {
@@ -255,7 +243,7 @@
 		onkeydown={handleKeyDown}
 	>
 		<ul class="popup-menu__list" role="none">
-			{#each menuItems as item, index}
+			{#each menuItems as item, index (item === 'separator' ? `separator-${index}` : item)}
 				<li class="popup-menu__item" role="none">
 					{#if item === 'separator'}
 						<div class="popup-menu__separator" role="separator" aria-orientation="horizontal"></div>

package/dist/components/SnackbarItem.svelte

@@ -1,9 +1,10 @@
 <!-- SnackbarItem.svelte -->
 
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy, tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { snackbar } from '../utils/snackbar.svelte';
+	import { waitForAnimations } from '../utils/animation';
 	import type { IconVariant } from '../types/icon';
 	import type { SnackbarType, SnackbarVariant, SnackbarPosition } from '../types/propOptions';
 	import Icon from './Icon.svelte';
@@ -89,15 +90,23 @@
 	onMount(() => {
 		if (duration > 0) {
 			timeoutId = setTimeout(() => {
+				timeoutId = null;
 				handleClose();
 			}, duration);
 		}
 	});
 
+	onDestroy(() => {
+		if (timeoutId !== null) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+	});
+
 	// =========================================================================
 	// Methods
 	// =========================================================================
-	const handleClose = () => {
+	const handleClose = async () => {
 		// アニメーション開始前に、他のSnackbarの位置を測定
 		if (snackbarRef) {
 			// 現在の要素の位置と親コンテナを取得
@@ -119,21 +128,17 @@
 			);
 
 			// CSSカスタムプロパティが確実に設定されるまで少し待つ
-			requestAnimationFrame(() => {
-				visible = false;
-			});
-
-			// animationendイベントでSnackbar削除
-			snackbarRef.addEventListener(
-				'animationend',
-				() => {
-					snackbar.remove(id);
-				},
-				{ once: true }
-			);
+			await new Promise((resolve) => requestAnimationFrame(resolve));
+			visible = false;
+
+			// アニメーション完了後にSnackbar削除
+			await tick();
+			await waitForAnimations(snackbarRef);
 		} else {
 			visible = false;
 		}
+
+		snackbar.remove(id);
 	};
 
 	const handleAction = () => {

package/dist/utils/animation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Animation utilities
+ */
+/**
+ * 要素で実行中のアニメーションの完了を待つ。
+ *
+ * animationend イベントに依存すると、アニメーションが動かない状況
+ * （アニメーション無効化・要素が非表示・テスト環境など）でイベントが発火せず、
+ * 閉じる処理の後始末が永久に実行されないままになる。実際の Animation を待つことで、
+ * アニメーションが無い場合は即座に解決する。
+ */
+export declare const waitForAnimations: (element: Element | null | undefined) => Promise<void>;

package/dist/utils/animation.js

@@ -0,0 +1,19 @@
+/**
+ * Animation utilities
+ */
+/**
+ * 要素で実行中のアニメーションの完了を待つ。
+ *
+ * animationend イベントに依存すると、アニメーションが動かない状況
+ * （アニメーション無効化・要素が非表示・テスト環境など）でイベントが発火せず、
+ * 閉じる処理の後始末が永久に実行されないままになる。実際の Animation を待つことで、
+ * アニメーションが無い場合は即座に解決する。
+ */
+export const waitForAnimations = async (element) => {
+    if (!element?.isConnected)
+        return;
+    const animations = element.getAnimations();
+    if (animations.length === 0)
+        return;
+    await Promise.allSettled(animations.map((animation) => animation.finished));
+};

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.65",
+	"version": "0.0.67",
 	"type": "module",
 	"keywords": [
 		"svelte",