@14ch/svelte-ui 0.0.12 → 0.0.13

package/dist/components/Tab.svelte

@@ -3,16 +3,34 @@
 <script lang="ts">
 	import TabItem from './TabItem.svelte';
 	import type { MenuItem } from '../types/menuItem';
+	import { afterNavigate } from '$app/navigation';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type TabProps = {
+		// 基本プロパティ
+		tabItems: MenuItem[];
+		pathPrefix?: string;
+		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+		currentPath?: string;
+
+		// スタイル/レイアウト
+		textColor?: string;
+		selectedTextColor?: string;
+		selectedBarColor?: string;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaLabelledby?: string;
+	};
 
 	let {
 		// 基本プロパティ
 		tabItems = [],
 		pathPrefix = '',
 		customPathMatcher,
+		currentPath,
 
 		// スタイル/レイアウト
 		textColor = 'var(--svelte-ui-text-subtle-color)',
@@ -22,34 +40,30 @@
 		// ARIA/アクセシビリティ
 		ariaLabel = 'Tabs',
 		ariaLabelledby
-	}: {
-		// 基本プロパティ
-		tabItems: MenuItem[];
-		pathPrefix?: string;
-		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
-
-		// スタイル/レイアウト
-		textColor?: string;
-		selectedTextColor?: string;
-		selectedBarColor?: string;
+	}: TabProps = $props();
 
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		ariaLabelledby?: string;
-	} = $props();
+	let resolvedCurrentPath = $state('');
 
 	// =========================================================================
 	// Methods
 	// =========================================================================
-
-	// ブラウザ標準APIを使用した現在パス取得
 	const getCurrentPath = () => {
+		// アプリ側から現在パスが明示的に渡されていればそれを優先（SSR対応）
+		if (currentPath && currentPath !== '') {
+			return currentPath;
+		}
+
+		// それ以外の場合はクライアント実行時のみ window.location から取得
 		if (typeof window !== 'undefined') {
 			return window.location.pathname;
 		}
 		return '';
 	};
 
+	afterNavigate(() => {
+		resolvedCurrentPath = getCurrentPath();
+	});
+
 	// パスの正規化処理
 	const normalizePath = (path: string): string => {
 		if (!pathPrefix) return path;
@@ -131,16 +145,13 @@
 	// $derived
 	// =========================================================================
 
-	// 現在のパスを取得
-	const currentPath = $derived(getCurrentPath());
-
 	// アクティブなタブのインデックスを現在のパスに基づいて計算
 	const selectedTabIndex = $derived.by(() => {
 		for (let i = 0; i < tabItems.length; i++) {
 			const item = tabItems[i];
 			if (!item.href) continue;
 
-			if (matchPath(currentPath, item.href, item)) {
+			if (matchPath(resolvedCurrentPath, item.href, item)) {
 				return i;
 			}
 		}

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

@@ -1,14 +1,15 @@
 import type { MenuItem } from '../types/menuItem';
-type $$ComponentProps = {
+export type TabProps = {
     tabItems: MenuItem[];
     pathPrefix?: string;
     customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+    currentPath?: string;
     textColor?: string;
     selectedTextColor?: string;
     selectedBarColor?: string;
     ariaLabel?: string;
     ariaLabelledby?: string;
 };
-declare const Tab: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Tab: import("svelte").Component<TabProps, {}, "">;
 type Tab = ReturnType<typeof Tab>;
 export default Tab;

package/dist/components/TabItem.svelte

@@ -8,6 +8,25 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type TabItemProps = {
+		// 基本プロパティ
+		tabItem: MenuItem;
+
+		// スタイル/レイアウト
+		textColor: string;
+		selectedTextColor: string;
+		selectedBarColor: string;
+
+		// アイコン関連
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// 状態/動作
+		isSelected?: boolean;
+	};
 
 	let {
 		// 基本プロパティ
@@ -27,25 +46,7 @@
 
 		// 状態/動作
 		isSelected = false
-	}: {
-		// 基本プロパティ
-		tabItem: MenuItem;
-
-		// スタイル/レイアウト
-		textColor: string;
-		selectedTextColor: string;
-		selectedBarColor: string;
-
-		// アイコン関連
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-
-		// 状態/動作
-		isSelected?: boolean;
-	} = $props();
+	}: TabItemProps = $props();
 </script>
 
 <a

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

@@ -1,6 +1,6 @@
 import type { MenuItem } from '../types/menuItem';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-type $$ComponentProps = {
+export type TabItemProps = {
     tabItem: MenuItem;
     textColor: string;
     selectedTextColor: string;
@@ -12,6 +12,6 @@ type $$ComponentProps = {
     iconVariant?: IconVariant;
     isSelected?: boolean;
 };
-declare const TabItem: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const TabItem: import("svelte").Component<TabItemProps, {}, "">;
 type TabItem = ReturnType<typeof TabItem>;
 export default TabItem;

package/dist/components/Textarea.svelte

@@ -19,6 +19,85 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type TextareaProps = {
+		// 基本プロパティ
+		name?: string;
+		value: string;
+		placeholder?: string;
+
+		// HTML属性系
+		id?: string | null;
+		tabindex?: number | null;
+		maxlength?: number | null;
+		autocomplete?: HTMLTextareaAttributes['autocomplete'];
+		wrap?: 'soft' | 'hard' | null;
+		spellcheck?: boolean | null;
+		autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
+		textareaAttributes?: HTMLTextareaAttributes | undefined;
+
+		// スタイル/レイアウト
+		rows?: number;
+		minHeight?: string | number | null;
+		maxHeight?: string | number | null;
+		inline?: boolean;
+		focusStyle?: 'background' | 'outline' | 'none';
+		fullWidth?: boolean;
+		fullHeight?: boolean;
+		width?: string | number | null;
+		rounded?: boolean;
+		customStyle?: string;
+
+		// 状態/動作
+		disabled?: boolean;
+		autoResize?: boolean;
+		resizable?: boolean;
+		clearable?: boolean;
+		clearButtonAriaLabel?: string;
+		readonly?: boolean;
+		required?: boolean;
+		iconVariant?: IconVariant;
+		linkify?: boolean;
+
+		// フォーカスイベント
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+
+		// キーボードイベント
+		onkeydown?: KeyboardHandler;
+		onkeyup?: KeyboardHandler;
+
+		// マウスイベント
+		onclick?: MouseHandler;
+		onmousedown?: MouseHandler;
+		onmouseup?: MouseHandler;
+		onmouseenter?: MouseHandler;
+		onmouseleave?: MouseHandler;
+		onmouseover?: MouseHandler;
+		onmouseout?: MouseHandler;
+		oncontextmenu?: MouseHandler;
+		onauxclick?: MouseHandler;
+
+		// タッチイベント
+		ontouchstart?: TouchHandler;
+		ontouchend?: TouchHandler;
+		ontouchmove?: TouchHandler;
+		ontouchcancel?: TouchHandler;
+
+		// ポインターイベント
+		onpointerdown?: PointerHandler;
+		onpointerup?: PointerHandler;
+		onpointerenter?: PointerHandler;
+		onpointerleave?: PointerHandler;
+		onpointermove?: PointerHandler;
+		onpointercancel?: PointerHandler;
+
+		// 入力イベント
+		onchange?: (value: string) => void;
+		oninput?: (value: string) => void;
+
+		// その他
+		[key: string]: any;
+	};
 
 	let {
 		// 基本プロパティ
@@ -98,94 +177,14 @@
 
 		// その他
 		...restProps
-	}: {
-		// 基本プロパティ
-		name?: string;
-		value: string;
-		placeholder?: string;
-
-		// HTML属性系
-		id?: string | null;
-		tabindex?: number | null;
-		maxlength?: number | null;
-		autocomplete?: HTMLTextareaAttributes['autocomplete'];
-		wrap?: 'soft' | 'hard' | null;
-		spellcheck?: boolean | null;
-		autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
-		textareaAttributes?: HTMLTextareaAttributes | undefined;
-
-		// スタイル/レイアウト
-		rows?: number;
-		minHeight?: string | number | null;
-		maxHeight?: string | number | null;
-		inline?: boolean;
-		focusStyle?: 'background' | 'outline' | 'none';
-		fullWidth?: boolean;
-		fullHeight?: boolean;
-		width?: string | number | null;
-		rounded?: boolean;
-		customStyle?: string;
-
-		// 状態/動作
-		disabled?: boolean;
-		autoResize?: boolean;
-		resizable?: boolean;
-		clearable?: boolean;
-		clearButtonAriaLabel?: string;
-		readonly?: boolean;
-		required?: boolean;
-		iconVariant?: IconVariant;
-		linkify?: boolean;
-
-		// フォーカスイベント
-		onfocus?: FocusHandler;
-		onblur?: FocusHandler;
-
-		// キーボードイベント
-		onkeydown?: KeyboardHandler;
-		onkeyup?: KeyboardHandler;
-
-		// マウスイベント
-		onclick?: MouseHandler;
-		onmousedown?: MouseHandler;
-		onmouseup?: MouseHandler;
-		onmouseenter?: MouseHandler;
-		onmouseleave?: MouseHandler;
-		onmouseover?: MouseHandler;
-		onmouseout?: MouseHandler;
-		oncontextmenu?: MouseHandler;
-		onauxclick?: MouseHandler;
-
-		// タッチイベント
-		ontouchstart?: TouchHandler;
-		ontouchend?: TouchHandler;
-		ontouchmove?: TouchHandler;
-		ontouchcancel?: TouchHandler;
-
-		// ポインターイベント
-		onpointerdown?: PointerHandler;
-		onpointerup?: PointerHandler;
-		onpointerenter?: PointerHandler;
-		onpointerleave?: PointerHandler;
-		onpointermove?: PointerHandler;
-		onpointercancel?: PointerHandler;
-
-		// 入力イベント
-		onchange?: BivariantValueHandler<string>;
-		oninput?: BivariantValueHandler<string>;
-
-		// その他
-		[key: string]: any;
-	} = $props();
+	}: TextareaProps = $props();
 
 	let ref: HTMLTextAreaElement | null = null;
 	let isFocused: boolean = $state(false);
 
 	// =========================================================================
-
 	// Methods
 	// =========================================================================
-
 	const clear = (): void => {
 		if (disabled || readonly) return;
 		value = '';
@@ -663,7 +662,8 @@
 	}
 
 	textarea[readonly] {
-		background-color: var(--svelte-ui-input-readonly-bg);
+		/* Match Input behavior: readonly fields keep the same background,
+		 * but use a default cursor to indicate non-editable. */
 		cursor: default;
 	}
 

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

@@ -1,7 +1,7 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+export type TextareaProps = {
     name?: string;
     value: string;
     placeholder?: string;
@@ -55,11 +55,11 @@ type $$ComponentProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: BivariantValueHandler<string>;
-    oninput?: BivariantValueHandler<string>;
+    onchange?: (value: string) => void;
+    oninput?: (value: string) => void;
     [key: string]: any;
 };
-declare const Textarea: import("svelte").Component<$$ComponentProps, {
+declare const Textarea: import("svelte").Component<TextareaProps, {
     focus: () => void;
 }, "value">;
 type Textarea = ReturnType<typeof Textarea>;

package/dist/components/skeleton/Skeleton.svelte

@@ -13,8 +13,17 @@
 	import { DEFAULT_PATTERN_CONFIG, PRESET_PATTERNS } from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
+	export type SkeletonProps = {
+		patterns?: SkeletonPatternConfig[];
+		repeat?: number;
+		repeatGap?: string | number;
+		patternGap?: string | number;
+		className?: string;
+		customStyle?: string;
+		animated?: boolean;
+	};
 
 	let {
 		// 基本プロパティ
@@ -25,22 +34,11 @@
 		className = '',
 		customStyle = '',
 		animated = true
-	}: {
-		patterns?: SkeletonPatternConfig[];
-		repeat?: number;
-		repeatGap?: string | number;
-		patternGap?: string | number;
-		className?: string;
-		customStyle?: string;
-		animated?: boolean;
-	} = $props();
+	}: SkeletonProps = $props();
 
 	// =========================================================================
-	// $derived
+	// Methods
 	// =========================================================================
-
-	const containerClasses = $derived(['skeleton', className].filter(Boolean).join(' '));
-
 	// パターン設定をマージ
 	const mergedPatterns = $derived.by(() => {
 		return patterns
@@ -97,6 +95,10 @@
 			.flat();
 	});
 
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const containerClasses = $derived(['skeleton', className].filter(Boolean).join(' '));
 	const repeatGapStyle = $derived(getStyleFromNumber(repeatGap));
 	const patternGapStyle = $derived(getStyleFromNumber(patternGap));
 </script>

package/dist/components/skeleton/Skeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SkeletonPatternConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonProps = {
     patterns?: SkeletonPatternConfig[];
     repeat?: number;
     repeatGap?: string | number;
@@ -8,6 +8,6 @@ type $$ComponentProps = {
     customStyle?: string;
     animated?: boolean;
 };
-declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/components/skeleton/SkeletonAvatar.svelte

@@ -12,18 +12,22 @@
 	} from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
+	export type SkeletonAvatarProps = {
+		avatarConfig?: Partial<SkeletonAvatarConfig>;
+		animated?: boolean;
+	};
 
 	let {
 		// 基本プロパティ
 		avatarConfig = {},
 		animated = true
-	}: {
-		avatarConfig?: Partial<SkeletonAvatarConfig>;
-		animated?: boolean;
-	} = $props();
+	}: SkeletonAvatarProps = $props();
 
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedAvatarImageConfig = $derived({
 		...DEFAULT_AVATAR_IMAGE_CONFIG,

package/dist/components/skeleton/SkeletonAvatar.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { SkeletonAvatarConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonAvatarProps = {
     avatarConfig?: Partial<SkeletonAvatarConfig>;
     animated?: boolean;
 };
-declare const SkeletonAvatar: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonAvatar: import("svelte").Component<SkeletonAvatarProps, {}, "">;
 type SkeletonAvatar = ReturnType<typeof SkeletonAvatar>;
 export default SkeletonAvatar;

package/dist/components/skeleton/SkeletonBox.svelte

@@ -5,8 +5,17 @@
 	import { DEFAULT_BOX_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
+	export type SkeletonBoxProps = {
+		width?: string | number;
+		height?: string | number;
+		aspectRatio?: string | number;
+		radius?: string | number;
+		animated?: boolean;
+		className?: string;
+		customStyle?: string;
+	};
 
 	let {
 		// 基本プロパティ
@@ -17,20 +26,11 @@
 		animated = true,
 		className = '',
 		customStyle = ''
-	}: {
-		width?: string | number;
-		height?: string | number;
-		aspectRatio?: string | number;
-		radius?: string | number;
-		animated?: boolean;
-		className?: string;
-		customStyle?: string;
-	} = $props();
+	}: SkeletonBoxProps = $props();
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
-
 	const containerClasses = $derived(
 		['skeleton-box', animated && 'skeleton-box--animated', className].filter(Boolean).join(' ')
 	);

package/dist/components/skeleton/SkeletonBox.svelte.d.ts

@@ -1,4 +1,4 @@
-type $$ComponentProps = {
+export type SkeletonBoxProps = {
     width?: string | number;
     height?: string | number;
     aspectRatio?: string | number;
@@ -7,6 +7,6 @@ type $$ComponentProps = {
     className?: string;
     customStyle?: string;
 };
-declare const SkeletonBox: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonBox: import("svelte").Component<SkeletonBoxProps, {}, "">;
 type SkeletonBox = ReturnType<typeof SkeletonBox>;
 export default SkeletonBox;

package/dist/components/skeleton/SkeletonButton.svelte

@@ -6,14 +6,19 @@
 	import type { SkeletonButtonConfig } from '../../types/skeleton';
 	import { DEFAULT_BUTTON_CONFIG } from '../../constants/skeleton';
 
-	let {
-		buttonConfig = {},
-		animated = true
-	}: {
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type SkeletonButtonProps = {
 		buttonConfig?: Partial<SkeletonButtonConfig>;
 		animated?: boolean;
-	} = $props();
+	};
 
+	let { buttonConfig = {}, animated = true }: SkeletonButtonProps = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedButtonConfig = $derived({
 		...DEFAULT_BUTTON_CONFIG,

package/dist/components/skeleton/SkeletonButton.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { SkeletonButtonConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonButtonProps = {
     buttonConfig?: Partial<SkeletonButtonConfig>;
     animated?: boolean;
 };
-declare const SkeletonButton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonButton: import("svelte").Component<SkeletonButtonProps, {}, "">;
 type SkeletonButton = ReturnType<typeof SkeletonButton>;
 export default SkeletonButton;

package/dist/components/skeleton/SkeletonHeading.svelte

@@ -7,27 +7,24 @@
 	import { DEFAULT_HEADING_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
-	// Props
+	// Props, States & Constants
 	// =========================================================================
-
-	let {
-		headingConfig = {},
-		animated = true
-	}: {
+	export type SkeletonHeadingProps = {
 		headingConfig?: Partial<SkeletonHeadingConfig>;
 		animated?: boolean;
-	} = $props();
+	};
+
+	let { headingConfig = {}, animated = true }: SkeletonHeadingProps = $props();
 
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedHeadingConfig = $derived({
 		...DEFAULT_HEADING_CONFIG,
 		...headingConfig
 	});
 
-	// =========================================================================
-	// $derived
-	// =========================================================================
-
 	const widthStyle = $derived(getStyleFromNumber(mergedHeadingConfig.width));
 	const fontSizeStyle = $derived(
 		mergedHeadingConfig.fontSize

package/dist/components/skeleton/SkeletonHeading.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { SkeletonHeadingConfig } from '../../types/skeleton';
-type $$ComponentProps = {
+export type SkeletonHeadingProps = {
     headingConfig?: Partial<SkeletonHeadingConfig>;
     animated?: boolean;
 };
-declare const SkeletonHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SkeletonHeading: import("svelte").Component<SkeletonHeadingProps, {}, "">;
 type SkeletonHeading = ReturnType<typeof SkeletonHeading>;
 export default SkeletonHeading;

package/dist/components/skeleton/SkeletonMedia.svelte

@@ -11,16 +11,20 @@
 		DEFAULT_TEXT_CONFIG_MEDIA
 	} from '../../constants/skeleton';
 
-	let {
-		width = '100%',
-		mediaConfig = {},
-		animated = true
-	}: {
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type SkeletonMediaProps = {
 		width?: string | number;
 		mediaConfig?: Partial<SkeletonMediaConfig>;
 		animated?: boolean;
-	} = $props();
+	};
 
+	let { width = '100%', mediaConfig = {}, animated = true }: SkeletonMediaProps = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// マージされた設定
 	const mergedMediaConfig = $derived({
 		...DEFAULT_MEDIA_CONFIG,