@14ch/svelte-ui 0.0.18 → 0.0.19

package/dist/components/ConfirmDialog.svelte

@@ -27,6 +27,7 @@
 		// 状態/動作
 		isOpen?: boolean;
 		closeIfClickOutside?: boolean;
+		focusFirstOnOpen?: boolean;
 
 		// イベントハンドラー
 		onSubmit?: () => void;
@@ -51,6 +52,7 @@
 		// 状態/動作
 		isOpen = $bindable(false),
 		closeIfClickOutside = true,
+		focusFirstOnOpen = false,
 
 		// イベントハンドラー
 		onSubmit = () => {}, // No params for type inference
@@ -92,6 +94,7 @@
 	{width}
 	{scrollable}
 	{closeIfClickOutside}
+	{focusFirstOnOpen}
 	id={id ? `${id}-dialog` : undefined}
 >
 	<div class="confirm-dialog-message">

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

@@ -9,6 +9,7 @@ export type ConfirmDialogProps = {
     scrollable?: boolean;
     isOpen?: boolean;
     closeIfClickOutside?: boolean;
+    focusFirstOnOpen?: boolean;
     onSubmit?: () => void;
     onCancel?: () => void;
 };

package/dist/components/Dialog.svelte

@@ -43,6 +43,7 @@
 		scrollable?: boolean;
 		closeIfClickOutside?: boolean;
 		restoreFocus?: boolean;
+		focusFirstOnOpen?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
@@ -72,6 +73,7 @@
 		scrollable = false,
 		closeIfClickOutside = true,
 		restoreFocus = false,
+		focusFirstOnOpen = false,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
@@ -130,6 +132,7 @@
 	bind:isOpen
 	{closeIfClickOutside}
 	{restoreFocus}
+	{focusFirstOnOpen}
 	componentType="Dialog"
 	{ariaLabel}
 	{ariaLabelledby}

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

@@ -25,6 +25,7 @@ export type DialogProps = {
     scrollable?: boolean;
     closeIfClickOutside?: boolean;
     restoreFocus?: boolean;
+    focusFirstOnOpen?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;
 };

package/dist/components/Drawer.svelte

@@ -44,6 +44,7 @@
 		scrollable?: boolean;
 		closeIfClickOutside?: boolean;
 		restoreFocus?: boolean;
+		focusFirstOnOpen?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
@@ -74,6 +75,7 @@
 		scrollable = false,
 		closeIfClickOutside = true,
 		restoreFocus = false,
+		focusFirstOnOpen = false,
 
 		// ARIA/アクセシビリティ
 		ariaLabel = 'Drawer',
@@ -143,6 +145,7 @@
 	bind:isOpen
 	{closeIfClickOutside}
 	{restoreFocus}
+	{focusFirstOnOpen}
 	componentType="Drawer"
 	{ariaLabel}
 	{ariaLabelledby}
@@ -267,18 +270,10 @@
   animation: fadeInFromRight var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer-wrapper--right.fade-in::backdrop) {
-  animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
-}
-
 :global(.drawer-wrapper--left.fade-in) {
   animation: fadeInFromLeft var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer-wrapper--left.fade-in::backdrop) {
-  animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
-}
-
 :global(.drawer-wrapper--left.fade-out) {
   animation: fadeOutToLeft var(--svelte-ui-transition-duration, 300ms) forwards;
 }
@@ -287,10 +282,6 @@
   animation: fadeOutToRight var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer-wrapper.fade-out::backdrop) {
-  animation: fadeOut var(--svelte-ui-transition-duration, 300ms) forwards;
-}
-
 .drawer {
   display: flex;
   flex-direction: column;
@@ -362,14 +353,10 @@
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
   :global(.drawer-wrapper.fade-in),
-  :global(.drawer-wrapper.fade-in::backdrop),
   :global(.drawer-wrapper.fade-out),
-  :global(.drawer-wrapper.fade-out::backdrop),
   :global(.drawer-wrapper--left.fade-in),
-  :global(.drawer-wrapper--left.fade-in::backdrop),
   :global(.drawer-wrapper--left.fade-out),
   :global(.drawer-wrapper--right.fade-in),
-  :global(.drawer-wrapper--right.fade-in::backdrop),
   :global(.drawer-wrapper--right.fade-out) {
     animation-duration: 0.01s;
   }

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

@@ -26,6 +26,7 @@ export type DrawerProps = {
     scrollable?: boolean;
     closeIfClickOutside?: boolean;
     restoreFocus?: boolean;
+    focusFirstOnOpen?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;
 };

package/dist/components/Modal.svelte

@@ -33,6 +33,7 @@
 		isOpen?: boolean;
 		closeIfClickOutside?: boolean;
 		restoreFocus?: boolean;
+		focusFirstOnOpen?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
@@ -58,6 +59,7 @@
 		isOpen = $bindable(false),
 		closeIfClickOutside = true,
 		restoreFocus = false,
+		focusFirstOnOpen = false,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
@@ -172,19 +174,11 @@
 		dialogRef.showModal();
 
 		setTimeout(() => {
-			const firstFocusableElement = dialogRef?.querySelector(
-				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-			) as HTMLElement;
-			firstFocusableElement?.focus();
-
+			if (!focusFirstOnOpen) {
+				dialogRef?.focus();
+			}
 			announceOpenClose(componentType, true, title || ariaLabel || '');
 		}, 0);
-
-		// 自動フォーカス時の枠線制御用クラス
-		dialogRef.classList.add('modal-opening');
-		setTimeout(() => {
-			dialogRef?.classList.remove('modal-opening');
-		}, 100); // 短い時間で制御
 	};
 
 	export const close = (title?: string): void => {
@@ -222,6 +216,7 @@
 	bind:this={dialogRef}
 	class="modal {customClass} {isOpen ? 'fade-in' : 'fade-out'}"
 	style={customStyles}
+	tabindex="-1"
 	aria-modal="true"
 	aria-label={ariaLabel}
 	aria-labelledby={ariaLabelledby}
@@ -265,11 +260,6 @@
   outline-offset: var(--svelte-ui-focus-outline-offset-outer);
 }
 
-/* 自動フォーカス時の枠線制御用 */
-.modal.modal-opening *:focus {
-  outline: none !important;
-}
-
 .modal-contents {
   width: 100%;
   height: 100%;
@@ -294,22 +284,27 @@
     opacity: 0;
   }
 }
-.fade-in,
-.fade-in::backdrop {
+.modal.fade-in:not([class*=drawer-wrapper]) {
   animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-.fade-out,
-.fade-out::backdrop {
+.modal.fade-in::backdrop {
+  animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+.modal.fade-out:not([class*=drawer-wrapper]) {
+  animation: fadeOut var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+.modal.fade-out::backdrop {
   animation: fadeOut var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  .fade-in,
-  .fade-in::backdrop,
-  .fade-out,
-  .fade-out::backdrop {
+  .modal.fade-in,
+  .modal.fade-in::backdrop,
+  .modal.fade-out,
+  .modal.fade-out::backdrop {
     animation-duration: 0.01s;
   }
 }</style>

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

@@ -19,6 +19,7 @@ export type ModalProps = {
     isOpen?: boolean;
     closeIfClickOutside?: boolean;
     restoreFocus?: boolean;
+    focusFirstOnOpen?: boolean;
     ariaLabel?: string;
     ariaLabelledby?: string;
     ariaDescribedby?: string;

package/dist/i18n/index.js

@@ -28,9 +28,6 @@ export const t = (key, params) => {
     const locale = (globalLocale && globalLocale in TRANSLATIONS) ? globalLocale : 'en';
     const message = key.split('.').reduce((obj, k) => obj?.[k], TRANSLATIONS[locale]);
     if (typeof message !== 'string') {
-        if (import.meta.env.DEV) {
-            console.warn(`Translation key "${key}" not found for locale "${locale}"`);
-        }
         return key;
     }
     return replaceParams(message, params);

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.18",
+	"version": "0.0.19",
 	"type": "module",
 	"keywords": [
 		"svelte",
@@ -106,6 +106,7 @@
 		"sass": "^1.89.2"
 	},
 	"peerDependencies": {
+		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	}
 }

package/dist/components/COMPONENT_DESIGN_GUIDELINES.md

@@ -1,127 +0,0 @@
-# コンポーネント設計ガイドライン
-
-## ID命名ルール
-
-### コンポーネント内包時のID受け渡しルール
-
-#### 基本ルール
-
-- **親コンポーネント**: `id`プロパティを受け取る
-- **子コンポーネント**: 受け取った`id`にsuffixを付けて自身のIDを生成
-- **内部要素**: 受け取った`id`にsuffixを付けてIDを生成
-
-#### 命名パターン
-
-```typescript
-// 親 → 子コンポーネント
-<ChildComponent id={id ? `${id}-child-suffix` : undefined} />
-
-// 内部要素
-<div id={id ? `${id}-element-suffix` : undefined}>
-```
-
-#### 具体例
-
-```typescript
-// ConfirmDialog → Dialog → Modal
-<Dialog id={id ? `${id}-dialog` : undefined} />
-<Modal id={id ? `${id}-modal` : undefined} />
-
-// 内部要素
-<div id={id ? `${id}-dialog-title` : undefined}>
-<div id={id ? `${id}-modal-description` : undefined}>
-
-// 他の例
-<Input id={id ? `${id}-input` : undefined} />
-<Popup id={id ? `${id}-popup` : undefined} />
-<DatepickerCalendar id={id ? `${id}-calendar` : undefined} />
-```
-
-#### 判断基準
-
-- **✅ IDを渡すべき**: 1対1の親子関係、アクセシビリティ上重要な要素、テストで個別特定が必要
-- **❌ IDを渡さない**: 同じコンポーネントが複数存在、内部実装の詳細、動的生成要素
-
-### 理由
-
-- **階層構造の明確化**: `${id}-suffix`パターンにより、コンポーネントの階層関係が分かりやすい
-- **グローバル一意性**: 親のIDをベースにすることで、DOM全体で一意なIDを保証
-- **アクセシビリティ**: ARIA属性との連携で、スクリーンリーダーなどの支援技術に対応
-- **テストの安定性**: 一意なIDにより、テストでの要素特定が確実
-
-## コンポーネント設計原則
-
-### プロパティ設計
-
-- **基本プロパティ**: 必須の機能に関わるプロパティ
-- **HTML属性**: 標準的なHTML属性（id, class, style等）
-- **スタイル/レイアウト**: 見た目やレイアウトに関わるプロパティ
-- **状態/動作**: コンポーネントの動作状態に関わるプロパティ
-- **ARIA/アクセシビリティ**: アクセシビリティに関わるプロパティ
-- **イベントハンドラー**: イベント処理に関わるプロパティ
-
-### イベントハンドラー設計
-
-```typescript
-// Svelte 5の推奨パターン
-onclick = () => {}, // パラメータなしで型推論を可能にする
-onchange = () => {}, // パラメータなしで型推論を可能にする
-```
-
-### データテストID
-
-- 最上位のDOM要素に`data-testid`を設定
-- テストでの要素特定を容易にする
-- コンポーネント名をベースに命名（例: `data-testid="dialog"`）
-
-## 実装例
-
-### 基本的なコンポーネント構造
-
-```svelte
-<script lang="ts">
-	// Props, States & Constants
-	let {
-		// 基本プロパティ
-		title = 'Default Title',
-
-		// HTML属性
-		id,
-
-		// スタイル/レイアウト
-		variant = 'default',
-
-		// 状態/動作
-		isOpen = $bindable(false),
-
-		// イベントハンドラー
-		onclick = () => {}
-	}: {
-		// 型定義
-		title?: string;
-		id?: string;
-		variant?: 'default' | 'primary';
-		isOpen?: boolean;
-		onclick?: () => void;
-	} = $props();
-</script>
-
-<div class="component" {id} data-testid="component">
-	<!-- コンテンツ -->
-</div>
-```
-
-### 内包コンポーネントの例
-
-```svelte
-<script lang="ts">
-	let { id }: { id?: string } = $props();
-</script>
-
-<div class="parent" {id} data-testid="parent">
-	<ChildComponent id={id ? `${id}-child` : undefined} />
-	<div id={id ? `${id}-element` : undefined}>
-		<!-- 内部要素 -->
-	</div>
-</div>
-```