@14ch/svelte-ui 0.0.17 → 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/config.d.ts

@@ -0,0 +1,16 @@
+export type SvelteUiConfig = {
+    /**
+     * ライブラリ全体で使用するロケール。
+     * 各コンポーネントの props で locale が明示されている場合は、そちらが優先されます。
+     */
+    locale?: 'en' | 'ja' | 'fr' | 'de' | 'es' | 'zh-cn';
+    /**
+     * グローバル / コンポーネントの locale がどちらも未指定の場合に、
+     * ブラウザの言語設定からロケールを推測するかどうか。
+     * SSR 環境では navigator がないため、このフォールバックは無効になり、'en' になります。
+     */
+    useBrowserLocale?: boolean;
+};
+export declare const setSvelteUiConfig: (newConfig: SvelteUiConfig) => void;
+export declare const getSvelteUiConfig: () => SvelteUiConfig;
+export declare const getLocale: () => SvelteUiConfig["locale"];

package/dist/config.js

@@ -0,0 +1,32 @@
+let config = {
+    useBrowserLocale: true
+};
+export const setSvelteUiConfig = (newConfig) => {
+    config = { ...config, ...newConfig };
+};
+export const getSvelteUiConfig = () => config;
+// グローバル設定からロケールを取得
+export const getLocale = () => {
+    // 1. グローバル設定で明示されていればそれを使う
+    if (config.locale) {
+        return config.locale;
+    }
+    // 2. ブラウザの言語設定から推測（SPA / CSR 時のみ有効）
+    if (config.useBrowserLocale !== false && typeof navigator !== 'undefined') {
+        const languages = navigator.languages && navigator.languages.length ? navigator.languages : [navigator.language];
+        const primary = (languages[0] || '').toLowerCase();
+        if (primary.startsWith('ja'))
+            return 'ja';
+        if (primary.startsWith('fr'))
+            return 'fr';
+        if (primary.startsWith('de'))
+            return 'de';
+        if (primary.startsWith('es'))
+            return 'es';
+        if (primary.startsWith('zh'))
+            return 'zh-cn';
+        return 'en';
+    }
+    // 3. それ以外は English をデフォルトとする
+    return 'en';
+};

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.17",
+	"version": "0.0.19",
 	"type": "module",
 	"keywords": [
 		"svelte",
@@ -41,6 +41,8 @@
 		"dist/constants/",
 		"dist/assets/",
 		"dist/i18n/",
+		"dist/config.js",
+		"dist/config.d.ts",
 		"dist/index.js",
 		"dist/index.d.ts"
 	],
@@ -61,7 +63,8 @@
 		"test:browser": "vitest --config vitest.config.ts --run",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
-		"prepublishOnly": "npm run package",
+		"verify-package": "node scripts/verify-package.js",
+		"prepublishOnly": "npm run package && npm run verify-package",
 		"publish": "npm publish"
 	},
 	"devDependencies": {
@@ -103,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>
-```