@14ch/svelte-ui 0.0.63 → 0.0.65

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/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

@@ -13,6 +13,7 @@
 	 * This prevents state synchronization bugs and ensures consistent behavior.
 	 */
 	import type { Snippet } from 'svelte';
+	import type { CloseReason } from '../types/propOptions';
 	import { announceOpenClose } from '../utils/accessibility';
 
 	// =========================================================================
@@ -47,6 +48,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 +78,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 +102,7 @@
 			if (!closeIfClickOutside) return;
 			if (!containerRef || !event.target) return;
 			if (!containerRef.contains(event.target as Node)) {
-				close();
+				close(undefined, 'outside');
 			}
 		};
 
@@ -103,18 +116,20 @@
 	});
 
 	$effect(() => {
-		if (!isOpen || !dialogRef) return;
+		if (!dialogRef) return;
 
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') {
-				close();
-			}
+		// showModal() した dialog は最前面の1つだけに cancel が配送されるため、
+		// Escape で多重の Modal がまとめて閉じることを防げる。ネイティブの即時
+		// クローズは抑止し、fade-out アニメーション付きの close() を使う。
+		const handleCancel = (event: Event) => {
+			event.preventDefault();
+			close(undefined, 'escape');
 		};
 
-		document.addEventListener('keydown', handleKeyDown);
+		dialogRef.addEventListener('cancel', handleCancel);
 
 		return () => {
-			document.removeEventListener('keydown', handleKeyDown);
+			dialogRef.removeEventListener('cancel', handleCancel);
 		};
 	});
 
@@ -170,11 +185,14 @@
 	// =========================================================================
 	/** 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();
@@ -184,14 +202,17 @@
 				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 });
 
@@ -209,11 +230,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

@@ -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 ModalProps = {
     children?: Snippet;
     /** Internal label used for accessibility announcements. @default 'Modal' */
@@ -29,10 +30,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

@@ -553,7 +553,7 @@
 	id={popupId}
 	data-testid="popup"
 	use:clickOutside={() => {
-		close('outside');
+		if (isOpen) close('outside');
 	}}
 >
 	{@render children()}

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/package.json

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