@14ch/svelte-ui 0.0.8 → 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();
@@ -366,12 +366,23 @@
 		}
 	};
 
+	const getNormalizedRange = () => {
+		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return null;
+
+		const startDate = dayjs(value.start).startOf('day');
+		const endDate = dayjs(value.end).startOf('day');
+
+		if (startDate.isSameOrBefore(endDate)) {
+			return { start: startDate, end: endDate };
+		}
+
+		return { start: endDate, end: startDate };
+	};
+
 	const isSelected = (date: dayjs.Dayjs) => {
-		if (mode === 'range' && value && 'start' in value && 'end' in value) {
-			return (
-				dayjs(date).isSameOrAfter(dayjs(value.start).startOf('day')) &&
-				dayjs(date).isSameOrBefore(dayjs(value.end).startOf('day'))
-			);
+		const range = getNormalizedRange();
+		if (range) {
+			return dayjs(date).isSameOrAfter(range.start) && dayjs(date).isSameOrBefore(range.end);
 		} else if (mode === 'single' && value && value instanceof Date) {
 			return dayjs(date).isSame(dayjs(value).startOf('day'));
 		}
@@ -379,25 +390,29 @@
 	};
 
 	const isRangeStart = (date: dayjs.Dayjs) => {
-		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return false;
+		const range = getNormalizedRange();
+		if (!range) return false;
 		if (isRangePreviewActive) return false;
-		return dayjs(date).isSame(dayjs(value.start).startOf('day'));
+		return dayjs(date).isSame(range.start);
 	};
 
 	const isRangeEnd = (date: dayjs.Dayjs) => {
-		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return false;
+		const range = getNormalizedRange();
+		if (!range) return false;
 		if (isRangePreviewActive) return false;
-		return dayjs(date).isSame(dayjs(value.end).startOf('day'));
+		return dayjs(date).isSame(range.end);
 	};
 
 	const isRangeMiddle = (date: dayjs.Dayjs) => {
-		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return false;
+		const range = getNormalizedRange();
+		if (!range) return false;
 		if (isRangePreviewActive) return false;
 		return isSelected(date) && !isRangeStart(date) && !isRangeEnd(date);
 	};
 
 	const isRangeSingle = (date: dayjs.Dayjs) => {
-		if (mode !== 'range' || !value || !('start' in value && 'end' in value)) return false;
+		const range = getNormalizedRange();
+		if (!range) return false;
 		if (isRangePreviewActive) return false;
 		return isRangeStart(date) && isRangeEnd(date);
 	};

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

@@ -7,6 +7,7 @@
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import { t } from '../i18n';
+	import { convertToHtmlWithLink } from '../utils/formatText';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -58,6 +59,7 @@
 		required = false,
 		clearable = false,
 		clearButtonAriaLabel = t('input.clear'),
+		linkify = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -148,6 +150,7 @@
 		readonly?: boolean;
 		required?: boolean;
 		clearable?: boolean;
+		linkify?: boolean;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -183,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
@@ -374,6 +377,12 @@
 		return String(value);
 	};
 
+	const linkHtmlValue = $derived.by(() => {
+		if (!linkify) return '';
+		const result = convertToHtmlWithLink(getDisplayValue());
+		return typeof result === 'string' ? result : String(result ?? '');
+	});
+
 	const widthStyle = $derived(getStyleFromNumber(width));
 	const maxWidthStyle = $derived(getStyleFromNumber(maxWidth));
 	const minWidthStyle = $derived(getStyleFromNumber(minWidth));
@@ -384,6 +393,7 @@
 	input--focus-{focusStyle}
 	input--type-{type}"
 	class:input--inline={inline}
+	class:input--linkify={linkify}
 	class:input--auto-resize={inline}
 	class:input--full-width={fullWidth}
 	class:input--clearable={clearable}
@@ -456,6 +466,11 @@
 			{...restProps}
 		/>
 	</div>
+	{#if linkify}
+		<div class="input__link-text" style={customStyle}>
+			{@html linkHtmlValue}
+		</div>
+	{/if}
 	<!-- クリアボタン -->
 	{#if clearable && !disabled && !readonly}
 		<div class="input__clear-button">
@@ -613,6 +628,35 @@
 		}
 	}
 
+	/* リンク表示用オーバーレイ */
+	.input__link-text {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		padding: inherit;
+		background: transparent;
+		border-radius: inherit;
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+		line-height: inherit;
+		text-align: inherit;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	.input__link-text :global(a) {
+		pointer-events: auto;
+		text-decoration: underline;
+	}
+
 	.input__clear-button {
 		position: absolute;
 		top: 50%;
@@ -695,7 +739,6 @@
 
 		input {
 			min-height: var(--svelte-ui-input-height);
-			padding: var(--svelte-ui-input-padding);
 			background-color: var(--svelte-ui-input-bg);
 			box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-input-border-color);
 			border: none;
@@ -703,30 +746,40 @@
 			color: var(--svelte-ui-input-text-color);
 		}
 
+		input,
+		.input__display-text,
+		.input__link-text {
+			padding: var(--svelte-ui-input-padding);
+		}
+
 		&.input--has-left-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-left: var(--svelte-ui-input-icon-space);
 			}
 		}
 
 		&.input--has-right-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space);
 			}
 		}
 
 		&.input--clearable {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space);
 			}
 		}
 
 		&.input--clearable.input--has-right-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-double);
 			}
 		}
@@ -741,6 +794,18 @@
 		}
 	}
 
+	/* linkify=true かつフォーカスがないときは、input のテキストカラーだけ透明にして二重描画を防ぐ */
+	.input--linkify:not(.input--focused) input {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
+	/* フォーカス時はリンク用オーバーレイも非表示にして（display:none）、リンクが反応しないようにする */
+	.input--focused .input__link-text {
+		display: none;
+	}
+
 	/* =============================================
  * デザインバリアント：inline
  * ============================================= */
@@ -759,28 +824,32 @@
 
 		&.input--has-left-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-left: var(--svelte-ui-input-icon-space-inline);
 			}
 		}
 
 		&.input--has-right-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-inline);
 			}
 		}
 
 		&.input--clearable {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-inline);
 			}
 		}
 
 		&.input--clearable.input--has-right-icon {
 			input,
-			.input__display-text {
+			.input__display-text,
+			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-double-inline);
 			}
 		}
@@ -796,6 +865,15 @@
 		}
 	}
 
+	/* inline + linkify のときは、display-text を常に隠し、wrapper を常に表示 */
+	.input--inline.input--linkify .input__display-text {
+		opacity: 0;
+	}
+
+	.input--inline.input--linkify .input__wrapper {
+		opacity: 1;
+	}
+
 	/* =============================================
  * レイアウトバリエーション
  * ============================================= */
@@ -812,21 +890,24 @@
  * ============================================= */
 	.input--clearable {
 		input,
-		.input__display-text {
+		.input__display-text,
+		.input__link-text {
 			padding-right: var(--svelte-ui-input-icon-space);
 		}
 	}
 
 	.input.input--has-right-icon {
 		input,
-		.input__display-text {
+		.input__display-text,
+		.input__link-text {
 			padding-right: var(--svelte-ui-input-icon-space);
 		}
 	}
 
 	.input.input--has-left-icon {
 		input,
-		.input__display-text {
+		.input__display-text,
+		.input__link-text {
 			padding-left: var(--svelte-ui-input-icon-space);
 		}
 	}

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

@@ -37,6 +37,7 @@ type $$ComponentProps = {
     readonly?: boolean;
     required?: boolean;
     clearable?: boolean;
+    linkify?: boolean;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;
@@ -60,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

@@ -4,6 +4,7 @@
 	import IconButton from './IconButton.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import { t } from '../i18n';
+	import { convertToHtml, convertToHtmlWithLink } from '../utils/formatText';
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import type { IconVariant } from '../types/icon';
 
@@ -29,7 +30,7 @@
 
 		// スタイル/レイアウト
 		rows = 3,
-		minHeight = 36,
+		minHeight = null,
 		maxHeight = null,
 		inline = false,
 		focusStyle = 'outline',
@@ -48,6 +49,7 @@
 		readonly = false,
 		required = false,
 		iconVariant = 'outlined',
+		linkify = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -125,6 +127,7 @@
 		readonly?: boolean;
 		required?: boolean;
 		iconVariant?: IconVariant;
+		linkify?: boolean;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -160,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;
@@ -324,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));
@@ -335,9 +340,7 @@
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const htmlValue = $derived.by(() => {
 		if (value !== '') {
-			let html = value
-				.replace(/ +/g, (match) => ' '.repeat(match.length))
-				.replace(/\n/g, '<br />');
+			let html = convertToHtml(value) as string;
 			// 最後の行が空だったら空白を追加（高さ調整のため）
 			const lines = html.split('<br />');
 			if (lines.length > 0 && lines[lines.length - 1] === '') {
@@ -345,8 +348,23 @@
 			}
 			return html;
 		} else {
+			// inline かつ value が空のとき、placeholder がなければ
+			// 1行分の高さを確保するためにダミーの &nbsp; を入れる
+			// （placeholder がある場合は :empty::before でプレースホルダを表示したいので空にしておく）
+			if (inline && !placeholder) {
+				return '&nbsp;';
+			}
+			return '';
+		}
+	});
+
+	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
+	const linkHtmlValue = $derived.by(() => {
+		if (!linkify || value === '') {
 			return '';
 		}
+		const result = convertToHtmlWithLink(value);
+		return typeof result === 'string' ? result : String(result ?? '');
 	});
 </script>
 
@@ -354,6 +372,7 @@
 	class="textarea
 	textarea--focus-{focusStyle}"
 	class:textarea--inline={inline}
+	class:textarea--linkify={linkify}
 	class:textarea--full-width={fullWidth}
 	class:textarea--full-height={fullHeight}
 	class:textarea--auto-resize={autoResize}
@@ -369,7 +388,7 @@
 	<div
 		class="textarea__display-text"
 		data-placeholder={placeholder}
-		style="{minHeightStyle} {customStyle}"
+		style="{minHeightVarStyle} {customStyle}"
 	>
 		{@html htmlValue}
 	</div>
@@ -391,7 +410,7 @@
 			{spellcheck}
 			{autocapitalize}
 			class:resizable
-			style="width: {widthStyle}; {minHeightStyle} {customStyle}"
+			style="width: {widthStyle}; {minHeightVarStyle} {customStyle}"
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}
@@ -438,6 +457,11 @@
 			</div>
 		{/if}
 	</div>
+	{#if linkify}
+		<div class="textarea__link-text" style="{minHeightVarStyle} {customStyle}">
+			{@html linkHtmlValue}
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -471,11 +495,11 @@
 	}
 
 	/* =============================================
- * 基本コンポーネント
- * ============================================= */
-	.textarea__display-text {
-		display: flex;
-		align-items: start; /* テーブルの他の列に合わせて高さが高くなっているときに、上寄せになるようにするための措置 */
+	 * 基本コンポーネント
+	 * ============================================= */
+	.textarea__display-text,
+	.textarea__link-text {
+		display: block;
 		width: 100%;
 		background: inherit;
 		border: inherit;
@@ -498,6 +522,23 @@
 		}
 	}
 
+	/* クリック可能なリンク用オーバーレイ */
+	.textarea__link-text {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		padding: inherit;
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	.textarea__link-text :global(a) {
+		pointer-events: auto;
+		text-decoration: underline;
+	}
+
 	textarea {
 		position: absolute;
 		top: 0;
@@ -626,8 +667,8 @@
 	}
 
 	/* =============================================
- * 表示切り替え（フォーカス時・非autoResize時）
- * ============================================= */
+	 * 表示切り替え（フォーカス時・非inline）
+	 * ============================================= */
 	.textarea--focused,
 	.textarea:not(.textarea--inline) {
 		.textarea__display-text {
@@ -639,17 +680,29 @@
 		}
 	}
 
+	/* linkify=true かつ非 inline のときは、display-text は常に非表示（レイアウトだけ保持） */
+	.textarea--linkify:not(.textarea--inline) .textarea__display-text {
+		opacity: 0;
+	}
+
+	/* フォーカス時はリンク用オーバーレイも非表示にして（display:none）、リンクが反応しないようにする */
+	.textarea--focused .textarea__link-text {
+		display: none;
+	}
+
 	/* =============================================
  * デザインバリアント：default
  * ============================================= */
 	.textarea:not(.textarea--inline) {
-		.textarea__display-text {
+		.textarea__display-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;
@@ -664,6 +717,15 @@
 		}
 	}
 
+	/* linkify=true かつフォーカスがないときは、textarea のテキストカラーだけ透明にして二重描画を防ぐ
+	 * placeholder の色は textarea::placeholder 側で指定しているため、この指定の影響を受けない
+	 */
+	.textarea--linkify:not(.textarea--focused) textarea {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
 	/* =============================================
  * デザインバリアント：rounded
  * ============================================= */
@@ -699,4 +761,13 @@
 			top: var(--svelte-ui-textarea-icon-top-inline);
 		}
 	}
+
+	/* inline + linkify のときは、display-text を常に隠し、textarea を常に表示 */
+	.textarea--inline.textarea--linkify .textarea__display-text {
+		opacity: 0;
+	}
+
+	.textarea--inline.textarea--linkify textarea {
+		opacity: 1;
+	}
 </style>

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

@@ -30,6 +30,7 @@ type $$ComponentProps = {
     readonly?: boolean;
     required?: boolean;
     iconVariant?: IconVariant;
+    linkify?: boolean;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;
@@ -53,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.8",
+	"version": "0.0.10",
 	"type": "module",
 	"keywords": [
 		"svelte",