@14ch/svelte-ui 0.0.64 → 0.0.66

package/dist/components/ConfirmDialog.svelte

@@ -5,6 +5,7 @@
 	import Button from './Button.svelte';
 	import { convertToHtml } from '../utils/formatText';
 	import type { SvelteComponent } from 'svelte';
+	import type { CloseReason } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -35,7 +36,11 @@
 
 		// イベントハンドラー
 		onSubmit?: () => void;
+		/** Called on cancel, including dismissal via Escape or a backdrop click. */
 		onCancel?: () => void;
+		onOpen?: () => void;
+		/** Called after the close animation completes, with the reason it was closed. */
+		onClose?: (reason: CloseReason) => void;
 	};
 
 	let {
@@ -60,7 +65,9 @@
 
 		// イベントハンドラー
 		onSubmit = () => {}, // No params for type inference
-		onCancel = () => {} // No params for type inference
+		onCancel = () => {}, // No params for type inference
+		onOpen = () => {},
+		onClose = () => {}
 	}: ConfirmDialogProps = $props();
 
 	let dialogRef: SvelteComponent | undefined = $state();
@@ -78,6 +85,14 @@
 		close();
 	};
 
+	const handleClose = (reason: CloseReason): void => {
+		// Escape / 背景クリックでの離脱もキャンセルとして扱う
+		if (reason !== 'explicit') {
+			onCancel();
+		}
+		onClose(reason);
+	};
+
 	/** Opens the dialog. */
 	export const open = (): void => {
 		isOpen = true;
@@ -102,6 +117,8 @@
 	{scrollable}
 	{closeIfClickOutside}
 	{focusFirstOnOpen}
+	{onOpen}
+	onClose={handleClose}
 	id={id ? `${id}-dialog` : undefined}
 >
 	<div class="confirm-dialog-message">

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

@@ -1,3 +1,4 @@
+import type { CloseReason } from '../types/propOptions';
 export type ConfirmDialogProps = {
     title?: string;
     description?: string;
@@ -15,7 +16,11 @@ export type ConfirmDialogProps = {
     closeIfClickOutside?: boolean;
     focusFirstOnOpen?: boolean;
     onSubmit?: () => void;
+    /** Called on cancel, including dismissal via Escape or a backdrop click. */
     onCancel?: () => void;
+    onOpen?: () => void;
+    /** Called after the close animation completes, with the reason it was closed. */
+    onClose?: (reason: CloseReason) => void;
 };
 declare const ConfirmDialog: import("svelte").Component<ConfirmDialogProps, {
     /** Opens the dialog. */ open: () => void;

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/Dialog.svelte

@@ -14,6 +14,7 @@
 	 * This prevents state synchronization bugs and ensures consistent behavior.
 	 */
 	import type { Snippet } from 'svelte';
+	import type { CloseReason } from '../types/propOptions';
 	import Modal from './Modal.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 
@@ -56,6 +57,11 @@
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
 		ariaDescribedby?: string;
+
+		// イベントハンドラー
+		onOpen?: () => void;
+		/** Called after the close animation completes, with the reason it was closed. */
+		onClose?: (reason: CloseReason) => void;
 	};
 
 	let {
@@ -85,7 +91,11 @@
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
-		ariaDescribedby
+		ariaDescribedby,
+
+		// イベントハンドラー
+		onOpen = () => {}, // No params for type inference
+		onClose = () => {}
 	}: DialogProps = $props();
 
 	let modalRef: Modal;
@@ -145,6 +155,8 @@
 	{closeIfClickOutside}
 	{restoreFocus}
 	{focusFirstOnOpen}
+	{onOpen}
+	{onClose}
 	componentType="Dialog"
 	{ariaLabel}
 	{ariaLabelledby}

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

@@ -11,6 +11,7 @@
      * This prevents state synchronization bugs and ensures consistent behavior.
      */
 import type { Snippet } from 'svelte';
+import type { CloseReason } from '../types/propOptions';
 export type DialogProps = {
     header?: Snippet;
     children?: Snippet;
@@ -36,6 +37,9 @@ export type DialogProps = {
     focusFirstOnOpen?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;
+    onOpen?: () => void;
+    /** Called after the close animation completes, with the reason it was closed. */
+    onClose?: (reason: CloseReason) => void;
 };
 declare const Dialog: import("svelte").Component<DialogProps, {
     /** Opens the dialog. */ open: () => void;

package/dist/components/Drawer.svelte

@@ -14,6 +14,7 @@
 	 * This prevents state synchronization bugs and ensures consistent behavior.
 	 */
 	import type { Snippet } from 'svelte';
+	import type { CloseReason } from '../types/propOptions';
 	import Modal from './Modal.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 
@@ -58,6 +59,11 @@
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
 		ariaDescribedby?: string;
+
+		// イベントハンドラー
+		onOpen?: () => void;
+		/** Called after the close animation completes, with the reason it was closed. */
+		onClose?: (reason: CloseReason) => void;
 	};
 
 	let {
@@ -88,7 +94,11 @@
 
 		// ARIA/アクセシビリティ
 		ariaLabel = 'Drawer',
-		ariaDescribedby
+		ariaDescribedby,
+
+		// イベントハンドラー
+		onOpen = () => {}, // No params for type inference
+		onClose = () => {}
 	}: DrawerProps = $props();
 
 	let modalRef: Modal;
@@ -159,6 +169,8 @@
 	{closeIfClickOutside}
 	{restoreFocus}
 	{focusFirstOnOpen}
+	{onOpen}
+	{onClose}
 	componentType="Drawer"
 	{ariaLabel}
 	{ariaLabelledby}

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

@@ -11,6 +11,7 @@
      * This prevents state synchronization bugs and ensures consistent behavior.
      */
 import type { Snippet } from 'svelte';
+import type { CloseReason } from '../types/propOptions';
 export type DrawerProps = {
     header?: Snippet;
     children?: Snippet;
@@ -38,6 +39,9 @@ export type DrawerProps = {
     focusFirstOnOpen?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;
+    onOpen?: () => void;
+    /** Called after the close animation completes, with the reason it was closed. */
+    onClose?: (reason: CloseReason) => void;
 };
 declare const Drawer: import("svelte").Component<DrawerProps, {
     /** Opens the drawer. */ open: () => void;

package/dist/components/Modal.svelte

@@ -12,8 +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
@@ -47,6 +50,11 @@
 		ariaLabel?: string;
 		ariaLabelledby?: string;
 		ariaDescribedby?: string;
+
+		// イベントハンドラー
+		onOpen?: () => void;
+		/** Called after the close animation completes, with the reason it was closed. */
+		onClose?: (reason: CloseReason) => void;
 	};
 
 	let {
@@ -72,12 +80,19 @@
 		// ARIA/アクセシビリティ
 		ariaLabel,
 		ariaLabelledby,
-		ariaDescribedby
+		ariaDescribedby,
+
+		// イベントハンドラー
+		onOpen = () => {}, // No params for type inference
+		onClose = () => {}
 	}: ModalProps = $props();
 
 	let dialogRef: HTMLDialogElement;
 	let containerRef: HTMLDivElement;
 	let previousActiveElement: HTMLElement | null = null;
+	// isOpen は bind でも変わるため、実際に開いているかは内部で持つ
+	let isVisible = false;
+	let pendingCloseReason: CloseReason | null = null;
 
 	// =========================================================================
 	// Effects
@@ -89,7 +104,7 @@
 			if (!closeIfClickOutside) return;
 			if (!containerRef || !event.target) return;
 			if (!containerRef.contains(event.target as Node)) {
-				close();
+				close(undefined, 'outside');
 			}
 		};
 
@@ -110,7 +125,7 @@
 		// クローズは抑止し、fade-out アニメーション付きの close() を使う。
 		const handleCancel = (event: Event) => {
 			event.preventDefault();
-			close();
+			close(undefined, 'escape');
 		};
 
 		dialogRef.addEventListener('cancel', handleCancel);
@@ -172,13 +187,15 @@
 	// =========================================================================
 	/** Opens the modal. */
 	export const open = (title?: string): void => {
-		if (!dialogRef) return;
+		if (!dialogRef || isVisible) return;
 
+		isVisible = true;
 		isOpen = true;
 		previousActiveElement = document.activeElement as HTMLElement;
 
+		// 閉じるアニメーションの途中で開き直した場合は close を取り消す
+		pendingCloseReason = null;
 		dialogRef.classList.add('fade-in');
-		dialogRef.removeEventListener('animationend', closeEnd);
 		dialogRef.showModal();
 
 		setTimeout(() => {
@@ -186,20 +203,33 @@
 				dialogRef?.focus();
 			}
 			announceOpenClose(componentType, true, title || ariaLabel || '');
+			onOpen?.();
 		}, 0);
 	};
 
 	/** Closes the modal. */
-	export const close = (title?: string): void => {
-		if (!dialogRef) return;
+	export const close = (title?: string, reason: CloseReason = 'explicit'): void => {
+		if (!dialogRef || !isVisible) return;
 
+		isVisible = false;
 		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;
@@ -211,11 +241,18 @@
 			previousActiveElement.focus();
 		}
 		previousActiveElement = null;
+
+		// アニメーション完了後に onClose を呼ぶ
+		if (pendingCloseReason) {
+			const reason = pendingCloseReason;
+			pendingCloseReason = null;
+			onClose?.(reason);
+		}
 	};
 
 	/** Toggles between open and closed. */
 	export const toggle = (title?: string): void => {
-		if (isOpen) {
+		if (isVisible) {
 			close(title);
 		} else {
 			open(title);

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

@@ -1,16 +1,5 @@
-/**
-     * 🚨 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 = {
     children?: Snippet;
     /** Internal label used for accessibility announcements. @default 'Modal' */
@@ -29,10 +18,13 @@ export type ModalProps = {
     ariaLabel?: string;
     ariaLabelledby?: string;
     ariaDescribedby?: string;
+    onOpen?: () => void;
+    /** Called after the close animation completes, with the reason it was closed. */
+    onClose?: (reason: CloseReason) => void;
 };
 declare const Modal: import("svelte").Component<ModalProps, {
     /** Opens the modal. */ open: (title?: string) => void;
-    /** Closes the modal. */ close: (title?: string) => void;
+    /** Closes the modal. */ close: (title?: string, reason?: CloseReason) => void;
     /** @internal Completes the close animation. Called automatically. */ closeEnd: () => void;
     /** Toggles between open and closed. */ toggle: (title?: string) => void;
 }, "isOpen">;

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 = () => {
@@ -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()の前に位置を画面下部に設定
@@ -504,17 +521,22 @@
 
 	/** 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/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/index.d.ts

@@ -85,7 +85,7 @@ export type { NavProps } from './components/Nav.svelte';
 export type { NavItemProps, NavItemSelectedVariant } from './components/NavItem.svelte';
 export type { TabProps } from './components/Tab.svelte';
 export type { TextareaProps } from './components/Textarea.svelte';
-export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, IconPosition, ComponentSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant, StepNavOrientation } from './types/propOptions';
+export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, IconPosition, ComponentSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant, StepNavOrientation, CloseReason } from './types/propOptions';
 export type { MenuItem } from './types/menuItem';
 export type { StepItem } from './types/stepItem';
 export type { SegmentedControlItem } from './types/segmentedControlItem';

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.64",
+	"version": "0.0.66",
 	"type": "module",
 	"keywords": [
 		"svelte",