@14ch/svelte-ui 0.0.9 → 0.0.10

package/dist/assets/styles/variables.scss

@@ -684,18 +684,24 @@
 	--svelte-ui-snackbar-error-outlined-border-color: var(--svelte-ui-error-color);
 
 	/* Skeleton */
+	--svelte-ui-skeleton-box-height: 240px;
 	--svelte-ui-skeleton-box-border-radius: var(--svelte-ui-border-radius);
-	--svelte-ui-skeleton-text-border-radius: var(--svelte-ui-border-radius);
+	--svelte-ui-skeleton-text-border-radius: var(--svelte-ui-border-radius-rounded);
+	--svelte-ui-skeleton-text-line-height: 1em;
 	--svelte-ui-skeleton-avatar-image-border-radius: var(--svelte-ui-border-radius-rounded);
-	--svelte-ui-skeleton-image-border-radius: var(--svelte-ui-border-radius);
+	--svelte-ui-skeleton-avatar-image-size: 48px;
+	--svelte-ui-skeleton-avatar-text-width: 160px;
 	--svelte-ui-skeleton-button-border-radius: var(--svelte-ui-border-radius);
-	--svelte-ui-skeleton-bg-color: var(--svelte-ui-skeleton-color);
-	--svelte-ui-skeleton-text-bg-color: var(--svelte-ui-skeleton-color);
-	--svelte-ui-skeleton-image-bg-color: var(--svelte-ui-skeleton-color);
-	--svelte-ui-skeleton-button-bg-color: var(--svelte-ui-skeleton-color);
-	--svelte-ui-skeleton-input-bg-color: var(--svelte-ui-skeleton-color);
-	--svelte-ui-skeleton-textarea-bg-color: var(--svelte-ui-skeleton-color);
-	--svelte-ui-skeleton-avatar-bg-color: var(--svelte-ui-skeleton-color);
+	--svelte-ui-skeleton-button-width: 120px;
+	--svelte-ui-skeleton-button-height: 36px;
+	--svelte-ui-skeleton-media-thumbnail-border-radius: var(--svelte-ui-border-radius);
+	--svelte-ui-skeleton-media-thumbnail-width: 160px;
+	--svelte-ui-skeleton-media-gap: 16px;
+	--svelte-ui-skeleton-media-vertical-gap: 8px;
+	--svelte-ui-skeleton-heading-width: 50%;
+	--svelte-ui-skeleton-heading-font-size: 2rem;
+	--svelte-ui-skeleton-pattern-gap: 16px;
+	--svelte-ui-skeleton-repeat-gap: 24px;
 
 	/* Badge */
 	--svelte-ui-badge-font-size: var(--svelte-ui-font-size-sm);
@@ -821,12 +827,5 @@
 		/* ===== スケルトンの上書き ===== */
 		--svelte-ui-skeleton-color: CanvasText;
 		--svelte-ui-skeleton-shimmer-color: Highlight;
-		--svelte-ui-skeleton-bg-color: CanvasText;
-		--svelte-ui-skeleton-text-bg-color: CanvasText;
-		--svelte-ui-skeleton-image-bg-color: CanvasText;
-		--svelte-ui-skeleton-button-bg-color: CanvasText;
-		--svelte-ui-skeleton-input-bg-color: CanvasText;
-		--svelte-ui-skeleton-textarea-bg-color: CanvasText;
-		--svelte-ui-skeleton-avatar-bg-color: CanvasText;
 	}
 }

package/dist/components/ColorPicker.svelte

@@ -92,8 +92,8 @@
 		iconVariant?: IconVariant;
 
 		// 入力イベント
-		onchange?: (value: any) => void;
-		oninput?: (value: any) => void;
+		onchange?: (value: string) => void;
+		oninput?: (value: string) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -148,7 +148,7 @@
 			localValue = value;
 
 			/* value が更新されたらonchangeを実行 */
-			handleChange();
+			handleValueChange();
 		});
 	});
 
@@ -167,10 +167,11 @@
 	// Methods
 	// =========================================================================
 
-	const handleChange = (event?: Event): void => {
-		// 空文字列の場合はそのまま処理
-		if (localValue && !localValue.startsWith('#')) {
-			localValue = '#' + localValue;
+	const handleChange = (value: string): void => {
+		if (value && !value.startsWith('#')) {
+			localValue = '#' + value;
+		} else {
+			localValue = value;
 		}
 
 		if (value !== prevValue || localValue !== prevValue) {
@@ -180,9 +181,13 @@
 		}
 	};
 
-	const handleInput = (event?: Event): void => {
+	const handleValueChange = (): void => {
+		handleChange(localValue);
+	};
+
+	const handleInput = (inputValue: string | number): void => {
 		if (disabled) return;
-		oninput?.(localValue);
+		oninput?.(String(inputValue));
 	};
 
 	const handleFocus = (event: FocusEvent): void => {
@@ -205,7 +210,7 @@
 		// Enterキーで色の変更を確定
 		if (event.key === 'Enter' && !disabled && !readonly) {
 			event.preventDefault();
-			handleChange();
+			handleValueChange();
 		}
 		if (disabled) return;
 		onkeydown(event);
@@ -368,7 +373,7 @@
 		<input
 			type="color"
 			bind:value
-			onchange={handleChange}
+			onchange={handleValueChange}
 			onfocus={handleFocus}
 			onblur={handleBlur}
 			onclick={handleClick}

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

@@ -13,8 +13,8 @@ type $$ComponentProps = {
     clearable?: boolean;
     clearButtonAriaLabel?: string;
     iconVariant?: IconVariant;
-    onchange?: (value: any) => void;
-    oninput?: (value: any) => void;
+    onchange?: (value: string) => void;
+    oninput?: (value: string) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/Combobox.svelte

@@ -108,8 +108,8 @@
 		clearable?: boolean;
 
 		// 入力イベント
-		onchange?: (value: any) => void;
-		oninput?: (value: any) => void;
+		onchange?: (value: string | number | null | undefined) => void;
+		oninput?: (value: string | number | null | undefined) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -206,7 +206,7 @@
 		// 入力中はvalueを更新しない（入力値をそのまま保持）
 		highlightedIndex = -1;
 		popupRef?.open();
-		oninput?.(currentInputValue);
+		oninput?.(currentValue ?? null);
 	};
 
 	// 値確定ハンドラー

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

@@ -20,8 +20,8 @@ type $$ComponentProps = {
     required?: boolean;
     filterable?: boolean;
     clearable?: boolean;
-    onchange?: (value: any) => void;
-    oninput?: (value: any) => void;
+    onchange?: (value: string | number | null | undefined) => void;
+    oninput?: (value: string | number | null | undefined) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/ConfirmDialog.svelte

@@ -13,7 +13,7 @@
 		// 基本プロパティ
 		title = 'Confirm',
 		description = 'Are you sure?',
-		confirmLabel = 'Confirm',
+		submitLabel = 'Confirm',
 		cancelLabel = 'Cancel',
 
 		// HTML属性
@@ -28,13 +28,13 @@
 		closeIfClickOutside = true,
 
 		// イベントハンドラー
-		onConfirm = () => {}, // No params for type inference
+		onSubmit = () => {}, // No params for type inference
 		onCancel = () => {} // No params for type inference
 	}: {
 		// 基本プロパティ
 		title?: string;
 		description?: string;
-		confirmLabel?: string;
+		submitLabel?: string;
 		cancelLabel?: string;
 
 		// HTML属性
@@ -49,7 +49,7 @@
 		closeIfClickOutside?: boolean;
 
 		// イベントハンドラー
-		onConfirm?: () => void;
+		onSubmit?: () => void;
 		onCancel?: () => void;
 	} = $props();
 
@@ -58,8 +58,8 @@
 	// =========================================================================
 	// Methods
 	// =========================================================================
-	const handleConfirm = (): void => {
-		onConfirm();
+	const handleSubmit = (): void => {
+		onSubmit();
 		close();
 	};
 
@@ -104,9 +104,9 @@
 				: variant === 'warning'
 					? 'var(--svelte-ui-warning-color)'
 					: undefined}
-			onclick={handleConfirm}
+			onclick={handleSubmit}
 		>
-			{confirmLabel}
+			{submitLabel}
 		</Button>
 	{/snippet}
 </Dialog>

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

@@ -1,14 +1,14 @@
 type $$ComponentProps = {
     title?: string;
     description?: string;
-    confirmLabel?: string;
+    submitLabel?: string;
     cancelLabel?: string;
     id?: string;
     variant?: 'info' | 'warning' | 'danger';
     width?: string | number;
     isOpen?: boolean;
     closeIfClickOutside?: boolean;
-    onConfirm?: () => void;
+    onSubmit?: () => void;
     onCancel?: () => void;
 };
 declare const ConfirmDialog: import("svelte").Component<$$ComponentProps, {

package/dist/components/DatepickerCalendar.svelte

@@ -53,7 +53,7 @@
 		mode?: 'single' | 'range';
 
 		// 入力イベント
-		onchange: (value: Date | { start: Date; end: Date } | undefined) => void;
+		onchange?: (value: Date | { start: Date; end: Date } | undefined) => void;
 		onOpen?: Function;
 		onClose?: Function;
 	} = $props();

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

@@ -14,7 +14,7 @@ type $$ComponentProps = {
     maxDate?: Date;
     id?: string;
     mode?: 'single' | 'range';
-    onchange: (value: Date | {
+    onchange?: (value: Date | {
         start: Date;
         end: Date;
     } | undefined) => void;

package/dist/components/Input.svelte

@@ -186,8 +186,8 @@
 		onpointercancel?: Function; // No params for type inference
 
 		// 入力イベント
-		onchange?: (value: any) => void;
-		oninput?: (value: any) => void;
+		onchange?: (value: string | number) => void;
+		oninput?: (value: string | number) => void;
 
 		// アイコンイベント
 		onRightIconClick?: Function; // No params for type inference

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

@@ -61,8 +61,8 @@ type $$ComponentProps = {
     onpointerleave?: Function;
     onpointermove?: Function;
     onpointercancel?: Function;
-    onchange?: (value: any) => void;
-    oninput?: (value: any) => void;
+    onchange?: (value: string | number) => void;
+    oninput?: (value: string | number) => void;
     onRightIconClick?: Function;
     onLeftIconClick?: Function;
     [key: string]: any;

package/dist/components/Radio.svelte

@@ -92,7 +92,7 @@
 		reducedMotion?: boolean;
 
 		// 入力イベント
-		onchange?: (value: any) => void;
+		onchange?: (value: string | number | boolean) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference

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

@@ -11,7 +11,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     reducedMotion?: boolean;
-    onchange?: (value: any) => void;
+    onchange?: (value: string | number | boolean) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/Select.svelte

@@ -128,7 +128,7 @@
 		onpointercancel?: Function; // No params for type inference
 
 		// 入力イベント
-		onchange?: (value: any) => void;
+		onchange?: (value: string | number | null | undefined) => void;
 
 		// その他
 		[key: string]: any;

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

@@ -39,7 +39,7 @@ type $$ComponentProps = {
     onpointerleave?: Function;
     onpointermove?: Function;
     onpointercancel?: Function;
-    onchange?: (value: any) => void;
+    onchange?: (value: string | number | null | undefined) => void;
     [key: string]: any;
 };
 declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/Slider.svelte

@@ -126,8 +126,8 @@
 		onpointercancel?: Function; // No params for type inference
 
 		// 入力イベント
-		onchange?: Function; // No params for type inference
-		oninput?: Function; // No params for type inference
+		onchange?: (value: number) => void;
+		oninput?: (value: number) => void;
 
 		// その他
 		[key: string]: any;

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

@@ -37,8 +37,8 @@ type $$ComponentProps = {
     onpointerleave?: Function;
     onpointermove?: Function;
     onpointercancel?: Function;
-    onchange?: Function;
-    oninput?: Function;
+    onchange?: (value: number) => void;
+    oninput?: (value: number) => void;
     [key: string]: any;
 };
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/Textarea.svelte

@@ -30,7 +30,7 @@
 
 		// スタイル/レイアウト
 		rows = 3,
-		minHeight = 36,
+		minHeight = null,
 		maxHeight = null,
 		inline = false,
 		focusStyle = 'outline',
@@ -163,8 +163,8 @@
 		onpointercancel?: Function; // No params for type inference
 
 		// 入力イベント
-		onchange?: (value: any) => void;
-		oninput?: (value: any) => void;
+		onchange?: (value: string) => void;
+		oninput?: (value: string) => void;
 
 		// その他
 		[key: string]: any;
@@ -327,9 +327,11 @@
 	// $derived
 	// =========================================================================
 
-	// min-heightスタイルの計算
-	const minHeightStyle = $derived(
-		inline ? 'min-height: 1.6em; min-height: 1lh;' : `min-height: ${minHeight}px;`
+	// min-height用CSS変数の上書きスタイル
+	// デフォルト値は variables.scss の --svelte-ui-textarea-min-height に委譲し、
+	// props で minHeight が指定されたときだけ上書きする
+	const minHeightVarStyle = $derived(
+		!inline && minHeight != null ? `--svelte-ui-textarea-min-height: ${minHeight}px;` : ''
 	);
 
 	const maxHeightStyle = $derived(getStyleFromNumber(maxHeight));
@@ -346,6 +348,12 @@
 			}
 			return html;
 		} else {
+			// inline かつ value が空のとき、placeholder がなければ
+			// 1行分の高さを確保するためにダミーの   を入れる
+			// （placeholder がある場合は :empty::before でプレースホルダを表示したいので空にしておく）
+			if (inline && !placeholder) {
+				return ' ';
+			}
 			return '';
 		}
 	});
@@ -380,7 +388,7 @@
 	<div
 		class="textarea__display-text"
 		data-placeholder={placeholder}
-		style="{minHeightStyle} {customStyle}"
+		style="{minHeightVarStyle} {customStyle}"
 	>
 		{@html htmlValue}
 	</div>
@@ -402,7 +410,7 @@
 			{spellcheck}
 			{autocapitalize}
 			class:resizable
-			style="width: {widthStyle}; {minHeightStyle} {customStyle}"
+			style="width: {widthStyle}; {minHeightVarStyle} {customStyle}"
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}
@@ -450,7 +458,7 @@
 		{/if}
 	</div>
 	{#if linkify}
-		<div class="textarea__link-text" style="{minHeightStyle} {customStyle}">
+		<div class="textarea__link-text" style="{minHeightVarStyle} {customStyle}">
 			{@html linkHtmlValue}
 		</div>
 	{/if}
@@ -687,13 +695,14 @@
  * ============================================= */
 	.textarea:not(.textarea--inline) {
 		.textarea__display-text,
-		.textarea__link-text {
+		.textarea__link-text,
+		textarea {
+			min-height: var(--svelte-ui-textarea-min-height);
 			padding: var(--svelte-ui-textarea-padding);
 		}
 
 		textarea {
 			position: static;
-			padding: var(--svelte-ui-textarea-padding);
 			background-color: var(--svelte-ui-textarea-bg);
 			box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-textarea-border-color);
 			border: none;

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

@@ -54,8 +54,8 @@ type $$ComponentProps = {
     onpointerleave?: Function;
     onpointermove?: Function;
     onpointercancel?: Function;
-    onchange?: (value: any) => void;
-    oninput?: (value: any) => void;
+    onchange?: (value: string) => void;
+    oninput?: (value: string) => void;
     [key: string]: any;
 };
 declare const Textarea: import("svelte").Component<$$ComponentProps, {

package/dist/components/skeleton/Skeleton.svelte

@@ -10,6 +10,7 @@
 	import { getStyleFromNumber } from '../../utils/style';
 	import type { SkeletonPatternConfig, SkeletonPresetConfig } from '../../types/skeleton';
 	import { isPresetPattern, isMediaPattern, isAvatarPattern } from '../../types/skeleton';
+	import { DEFAULT_PATTERN_CONFIG, PRESET_PATTERNS } from '../../constants/skeleton';
 
 	// =========================================================================
 	// Props
@@ -19,8 +20,8 @@
 		// 基本プロパティ
 		patterns = [{ type: 'box' }] as SkeletonPatternConfig[],
 		repeat = 1,
-		repeatGap = '64px',
-		itemGap = '24px',
+		repeatGap = 'var(--svelte-ui-skeleton-repeat-gap)',
+		patternGap = 'var(--svelte-ui-skeleton-pattern-gap)',
 		className = '',
 		customStyle = '',
 		animated = true
@@ -28,77 +29,12 @@
 		patterns?: SkeletonPatternConfig[];
 		repeat?: number;
 		repeatGap?: string | number;
-		itemGap?: string | number;
+		patternGap?: string | number;
 		className?: string;
 		customStyle?: string;
 		animated?: boolean;
 	} = $props();
 
-	const DEFAULT_PATTERN_CONFIG = {
-		repeat: 1,
-		repeatDirection: 'vertical' as const,
-		repeatGap: '24px'
-	};
-
-	// プリセットパターンの定義
-	const PRESET_PATTERNS: Record<string, SkeletonPatternConfig[]> = {
-		'article-detail': [
-			{
-				type: 'box'
-			},
-			{ type: 'avatar', showName: true },
-			{
-				type: 'text',
-				lines: 5,
-				repeat: 1
-			}
-		],
-		'article-list': [
-			{
-				type: 'media',
-				layout: 'horizontal',
-				thumbnailConfig: { width: '160px', aspectRatio: '4/3' },
-				textConfig: { lines: 3 },
-				repeat: 3
-			}
-		],
-		'product-list': [
-			{
-				type: 'media',
-				layout: 'vertical',
-				thumbnailConfig: { width: '100%', aspectRatio: '1' },
-				textConfig: { lines: 2 },
-				repeat: 4,
-				repeatDirection: 'horizontal'
-			}
-		],
-		'video-list': [
-			{
-				type: 'media',
-				layout: 'vertical',
-				thumbnailConfig: { width: '100%', aspectRatio: '16/9' },
-				textConfig: { lines: 2 },
-				repeat: 3,
-				repeatDirection: 'horizontal'
-			}
-		],
-		'user-list': [
-			{
-				type: 'avatar',
-				showName: true
-			}
-		],
-		'button-group': [
-			{
-				type: 'button',
-				width: '120px',
-				repeat: 2,
-				repeatDirection: 'horizontal',
-				repeatGap: '16px'
-			}
-		]
-	};
-
 	// =========================================================================
 	// $derived
 	// =========================================================================
@@ -162,17 +98,19 @@
 	});
 
 	const repeatGapStyle = $derived(getStyleFromNumber(repeatGap));
-	const itemGapStyle = $derived(getStyleFromNumber(itemGap));
+	const patternGapStyle = $derived(getStyleFromNumber(patternGap));
 </script>
 
 <div class={containerClasses} style={customStyle} data-testid="skeleton">
 	<div class="skeleton__items" style="gap: {repeatGapStyle};">
 		{#each Array(repeat) as _, index}
-			<div class="skeleton__item" style="gap: {itemGapStyle};">
+			<div class="skeleton__item" style="gap: {patternGapStyle};">
 				{#each mergedPatterns as patternConfig}
 					{@const patternRepeat = patternConfig.repeat || 1}
 					{@const patternRepeatDirection = patternConfig.repeatDirection || 'vertical'}
-					{@const patternRepeatGap = getStyleFromNumber(patternConfig.repeatGap) || '8px'}
+					{@const patternRepeatGap =
+						getStyleFromNumber(patternConfig.repeatGap) ||
+						getStyleFromNumber(DEFAULT_PATTERN_CONFIG.repeatGap)}
 					<div
 						class="skeleton__pattern"
 						class:skeleton__pattern--horizontal={patternRepeatDirection === 'horizontal'}

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

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     patterns?: SkeletonPatternConfig[];
     repeat?: number;
     repeatGap?: string | number;
-    itemGap?: string | number;
+    patternGap?: string | number;
     className?: string;
     customStyle?: string;
     animated?: boolean;

package/dist/components/skeleton/SkeletonAvatar.svelte

@@ -4,11 +4,12 @@
 	import SkeletonBox from './SkeletonBox.svelte';
 	import SkeletonText from './SkeletonText.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
-	import type {
-		SkeletonAvatarConfig,
-		SkeletonTextConfig,
-		SkeletonAvatarImageConfig
-	} from '../../types/skeleton';
+	import type { SkeletonAvatarConfig } from '../../types/skeleton';
+	import {
+		DEFAULT_AVATAR_IMAGE_CONFIG,
+		DEFAULT_TEXT_CONFIG_AVATAR,
+		DEFAULT_AVATAR_CONFIG
+	} from '../../constants/skeleton';
 
 	// =========================================================================
 	// Props
@@ -23,25 +24,6 @@
 		animated?: boolean;
 	} = $props();
 
-	// デフォルト設定
-	const DEFAULT_AVATAR_IMAGE_CONFIG: SkeletonAvatarImageConfig = {
-		type: 'avatar-image',
-		size: '48px',
-		radius: 'var(--svelte-ui-skeleton-avatar-image-border-radius)',
-		customStyle: ''
-	};
-	const DEFAULT_TEXT_CONFIG: SkeletonTextConfig = {
-		type: 'text',
-		width: '160px',
-		lines: 1,
-		customStyle: ''
-	};
-	const DEFAULT_AVATAR_CONFIG: SkeletonAvatarConfig = {
-		type: 'avatar',
-		avatarImageConfig: DEFAULT_AVATAR_IMAGE_CONFIG,
-		textConfig: DEFAULT_TEXT_CONFIG
-	};
-
 	// マージされた設定
 	const mergedAvatarImageConfig = $derived({
 		...DEFAULT_AVATAR_IMAGE_CONFIG,
@@ -49,7 +31,7 @@
 	});
 
 	const mergedTextConfig = $derived({
-		...DEFAULT_TEXT_CONFIG,
+		...DEFAULT_TEXT_CONFIG_AVATAR,
 		...(avatarConfig.textConfig || {})
 	});
 

package/dist/components/skeleton/SkeletonBox.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import { getStyleFromNumber } from '../../utils/style';
+	import { DEFAULT_BOX_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
 	// Props
@@ -26,16 +27,6 @@
 		customStyle?: string;
 	} = $props();
 
-	// =========================================================================
-	// Constants
-	// =========================================================================
-
-	const DEFAULT_BOX_CONFIG = {
-		width: '100%',
-		height: '240px',
-		radius: 'var(--svelte-ui-skeleton-box-border-radius, 8px)'
-	};
-
 	// =========================================================================
 	// $derived
 	// =========================================================================
@@ -86,7 +77,7 @@
 .skeleton-box__content {
   width: 100%;
   height: 100%;
-  background-color: var(--svelte-ui-skeleton-bg-color, #e5e7eb);
+  background-color: var(--svelte-ui-skeleton-color);
   display: block;
 }
 

package/dist/components/skeleton/SkeletonButton.svelte

@@ -4,6 +4,7 @@
 	import SkeletonBox from './SkeletonBox.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
 	import type { SkeletonButtonConfig } from '../../types/skeleton';
+	import { DEFAULT_BUTTON_CONFIG } from '../../constants/skeleton';
 
 	let {
 		buttonConfig = {},
@@ -13,16 +14,6 @@
 		animated?: boolean;
 	} = $props();
 
-	// デフォルト設定
-	const DEFAULT_BUTTON_CONFIG: SkeletonButtonConfig = {
-		type: 'button',
-		width: '120px',
-		height: '36px',
-		radius: 'var(--svelte-ui-skeleton-button-border-radius)',
-		align: 'left',
-		customStyle: ''
-	};
-
 	// マージされた設定
 	const mergedButtonConfig = $derived({
 		...DEFAULT_BUTTON_CONFIG,

package/dist/components/skeleton/SkeletonHeading.svelte

@@ -4,6 +4,7 @@
 	import SkeletonText from './SkeletonText.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
 	import type { SkeletonHeadingConfig } from '../../types/skeleton';
+	import { DEFAULT_HEADING_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
 	// Props
@@ -17,14 +18,6 @@
 		animated?: boolean;
 	} = $props();
 
-	// デフォルト設定
-	const DEFAULT_HEADING_CONFIG: SkeletonHeadingConfig = {
-		type: 'heading',
-		width: '50%',
-		fontSize: '2rem',
-		customStyle: ''
-	};
-
 	// マージされた設定
 	const mergedHeadingConfig = $derived({
 		...DEFAULT_HEADING_CONFIG,
@@ -36,11 +29,18 @@
 	// =========================================================================
 
 	const widthStyle = $derived(getStyleFromNumber(mergedHeadingConfig.width));
-	const fontSizeStyle = $derived(getStyleFromNumber(mergedHeadingConfig.fontSize));
+	const fontSizeStyle = $derived(
+		mergedHeadingConfig.fontSize
+			? typeof mergedHeadingConfig.fontSize === 'string' &&
+				mergedHeadingConfig.fontSize.startsWith('var(')
+				? mergedHeadingConfig.fontSize
+				: getStyleFromNumber(mergedHeadingConfig.fontSize)
+			: DEFAULT_HEADING_CONFIG.fontSize
+	);
 </script>
 
 <div class="skeleton-heading" style="font-size: {fontSizeStyle}; {mergedHeadingConfig.customStyle}">
-	<SkeletonText textConfig={{ width: widthStyle, fontSize: fontSizeStyle }} {animated} />
+	<SkeletonText textConfig={{ width: widthStyle }} {animated} />
 </div>
 
 <style>.skeleton-heading {

package/dist/components/skeleton/SkeletonMedia.svelte

@@ -4,11 +4,12 @@
 	import SkeletonBox from './SkeletonBox.svelte';
 	import SkeletonText from './SkeletonText.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
-	import type {
-		SkeletonMediaConfig,
-		SkeletonThumbnailConfig,
-		SkeletonTextConfig
-	} from '../../types/skeleton';
+	import type { SkeletonMediaConfig } from '../../types/skeleton';
+	import {
+		DEFAULT_MEDIA_CONFIG,
+		DEFAULT_THUMBNAIL_CONFIG,
+		DEFAULT_TEXT_CONFIG_MEDIA
+	} from '../../constants/skeleton';
 
 	let {
 		width = '100%',
@@ -20,14 +21,6 @@
 		animated?: boolean;
 	} = $props();
 
-	// デフォルト設定
-	const DEFAULT_MEDIA_CONFIG: Partial<SkeletonMediaConfig> = {
-		type: 'media',
-		layout: 'horizontal',
-		thumbnailConfig: { width: '160px', aspectRatio: '16/9' },
-		textConfig: { width: '100%', lines: 2 }
-	};
-
 	// マージされた設定
 	const mergedMediaConfig = $derived({
 		...DEFAULT_MEDIA_CONFIG,
@@ -37,20 +30,6 @@
 	// レイアウト方向を取得
 	const layoutDirection = $derived(mergedMediaConfig.layout || 'horizontal');
 
-	// デフォルト設定
-	const DEFAULT_THUMBNAIL_CONFIG: SkeletonThumbnailConfig = {
-		type: 'thumbnail',
-		width: '120px',
-		radius: 'var(--svelte-ui-skeleton-button-border-radius)',
-		customStyle: ''
-	};
-	const DEFAULT_TEXT_CONFIG: SkeletonTextConfig = {
-		type: 'text',
-		width: '100%',
-		lines: 2,
-		customStyle: ''
-	};
-
 	// マージされた設定
 	const mergedThumbnailConfig = $derived({
 		...DEFAULT_THUMBNAIL_CONFIG,
@@ -58,7 +37,7 @@
 	});
 
 	const mergedTextConfig = $derived({
-		...DEFAULT_TEXT_CONFIG,
+		...DEFAULT_TEXT_CONFIG_MEDIA,
 		...(mergedMediaConfig.textConfig || {})
 	});
 
@@ -103,13 +82,13 @@
 	.skeleton-media {
 		display: grid;
 		grid-template-columns: auto 1fr;
-		gap: 16px;
+		gap: var(--svelte-ui-skeleton-media-gap);
 	}
 
 	.skeleton-media--vertical {
 		grid-template-columns: 1fr;
 		grid-template-rows: auto 1fr;
 		justify-items: center;
-		gap: 8px;
+		gap: var(--svelte-ui-skeleton-media-vertical-gap);
 	}
 </style>

package/dist/components/skeleton/SkeletonText.svelte

@@ -4,6 +4,7 @@
 	import SkeletonBox from './SkeletonBox.svelte';
 	import { getStyleFromNumber } from '../../utils/style';
 	import type { SkeletonTextConfig } from '../../types/skeleton';
+	import { DEFAULT_TEXT_CONFIG } from '../../constants/skeleton';
 
 	// =========================================================================
 	// Props
@@ -18,14 +19,6 @@
 		animated?: boolean;
 	} = $props();
 
-	// デフォルト設定
-	const DEFAULT_TEXT_CONFIG: SkeletonTextConfig = {
-		type: 'text',
-		width: '100%',
-		lines: 1,
-		customStyle: ''
-	};
-
 	// マージされた設定
 	const mergedTextConfig = $derived({
 		...DEFAULT_TEXT_CONFIG,
@@ -55,7 +48,7 @@
 		<div class="skeleton-text__line" style="width: {widthStyle}">
 			<SkeletonBox
 				width="100%"
-				height="1.2em"
+				height="var(--svelte-ui-skeleton-text-line-height)"
 				radius="var(--svelte-ui-skeleton-text-border-radius)"
 				{animated}
 			/>

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