@14ch/svelte-ui 0.0.7 → 0.0.9

package/dist/components/ColorPicker.svelte

@@ -167,7 +167,6 @@
 	// Methods
 	// =========================================================================
 
-
 	const handleChange = (event?: Event): void => {
 		// 空文字列の場合はそのまま処理
 		if (localValue && !localValue.startsWith('#')) {

package/dist/components/Combobox.svelte

@@ -155,7 +155,6 @@
 	let popupRef = $state<any>();
 	let highlightedIndex = $state(-1);
 	let isFocused = $state(false);
-	let comboboxRef = $state<HTMLDivElement>();
 
 	// 各要素のIDを生成
 	const inputId = `${id}-input`;
@@ -479,9 +478,9 @@
 						type="button"
 						class="combobox__option"
 						class:combobox__option--highlighted={index === highlightedIndex}
-						class:combobox__option--selected={option === value}
+						class:combobox__option--selected={option === inputValue}
 						role="option"
-						aria-selected={option === value}
+						aria-selected={option === inputValue}
 						onmousedown={(event) => {
 							event?.preventDefault?.();
 							event?.stopPropagation?.();

package/dist/components/DatepickerCalendar.svelte

@@ -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/Dialog.svelte

@@ -115,7 +115,7 @@
 		return styles.join('; ');
 	});
 
-	const dialogClasses = $derived([scrollable && 'scrollable'].filter(Boolean).join(' ')); // dialogクラス自体はcustomClassに含めない
+	const dialogClasses = $derived('');
 
 	const ariaLabelledby = $derived(title ? 'dialog-title' : undefined);
 	const ariaDescribedbyValue = $derived(
@@ -136,7 +136,7 @@
 	customStyles={dialogStyles}
 	id={id ? `${id}-modal` : undefined}
 >
-	<div class="dialog {scrollable ? 'scrollable' : ''}">
+	<div class="dialog {scrollable ? 'dialog--scrollable' : ''}">
 		{#if header || title}
 			<div class="dialog__header">
 				{#if header}
@@ -166,14 +166,15 @@
 	</div>
 </Modal>
 
-<style>.dialog {
+<style>@charset "UTF-8";
+.dialog {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  max-height: calc(100dvh - 2em - 6px);
   border: var(--svelte-ui-dialog-border);
   border-radius: var(--svelte-ui-dialog-border-radius);
-  overflow: hidden;
+  max-height: calc(100dvh - 2em - 6px);
+  overflow: auto;
 }
 
 .dialog__header {
@@ -183,7 +184,6 @@
   justify-content: stretch;
   min-height: var(--svelte-ui-dialog-header-height);
   padding: var(--svelte-ui-dialog-padding);
-  margin-bottom: calc(0px - var(--svelte-ui-dialog-body-padding));
 }
 .dialog__header .dialog__title {
   flex-grow: 1;
@@ -214,15 +214,26 @@
   border-bottom: 1px solid var(--svelte-ui-border-weak-color);
 }
 
-:global(.scrollable) .dialog__header {
+/* scrollable=true 時: ヘッダー/フッター固定 + bodyのみスクロール */
+.dialog--scrollable {
+  overflow: hidden;
+}
+
+.dialog--scrollable .dialog__header {
   margin-bottom: 0;
   border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
 }
-:global(.scrollable) .dialog__body {
+
+.dialog--scrollable .dialog__body {
   flex-shrink: 1;
   padding: var(--svelte-ui-dialog-body-padding);
   overflow: auto;
 }
-:global(.scrollable) .dialog__footer {
+
+.dialog:not(.dialog--scrollable) .dialog__body {
+  padding-top: 0;
+}
+
+.dialog--scrollable .dialog__footer {
   border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
 }</style>

package/dist/components/Drawer.svelte

@@ -123,9 +123,7 @@
 	});
 
 	const drawerClasses = $derived(
-		['drawer-wrapper', `drawer-wrapper--${position}`, scrollable && 'drawer-wrapper--scrollable']
-			.filter(Boolean)
-			.join(' ')
+		['drawer-wrapper', `drawer-wrapper--${position}`].filter(Boolean).join(' ')
 	);
 
 	const ariaLabelledby = $derived(title ? 'drawer-title' : undefined);

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
@@ -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;

package/dist/components/SegmentedControl.svelte

@@ -528,6 +528,10 @@
   color: var(--svelte-ui-text-subtle-color, var(--svelte-ui-text-color));
   white-space: nowrap;
   cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   transition-property: background-color, color;
   transition-duration: var(--svelte-ui-transition-duration, 0.2s);
   transition-timing-function: ease;

package/dist/components/SnackbarItem.svelte

@@ -112,7 +112,10 @@
 				);
 			const requiredMargin = -containerHeight;
 
-			snackbarRef.style.setProperty('--svelte-ui-snackbar-item-collapse-margin', `${requiredMargin}px`);
+			snackbarRef.style.setProperty(
+				'--svelte-ui-snackbar-item-collapse-margin',
+				`${requiredMargin}px`
+			);
 
 			// CSSカスタムプロパティが確実に設定されるまで少し待つ
 			requestAnimationFrame(() => {
@@ -149,7 +152,8 @@
 		class="snackbar-item__content snackbar-item__content--{type} snackbar-item__content--{variant} snackbar-item__content--{position} {visible
 			? 'snackbar-item__content--visible'
 			: ''}"
-		style="--svelte-ui-snackbar-item-custom-color: {color ?? 'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
+		style="--svelte-ui-snackbar-item-custom-color: {color ??
+			'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
 		role={type === 'error' || type === 'warning' ? 'alert' : 'status'}
 		aria-live={type === 'error' || type === 'warning' ? 'assertive' : 'polite'}
 		aria-atomic="true"
@@ -321,103 +325,208 @@
 
 	/* Type variants - filled */
 	.snackbar-item__content--filled.snackbar-item__content--info {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-info-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-info-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--info .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-info-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-success-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-success-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-success-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-warning-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-warning-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-warning-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-error-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-error-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-error-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-default-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-default-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-default-filled-text-color)
+		);
 	}
 
 	/* Type variants - outlined */
 	.snackbar-item__content--outlined.snackbar-item__content--info {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-info-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-info-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-info-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--info .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-info-outlined-text-color)
+		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-success-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-success-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-success-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-success-outlined-text-color)
+		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-warning-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-warning-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-warning-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-warning-outlined-text-color)
+		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-error-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-error-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-error-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-error-outlined-text-color)
+		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-default-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-default-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-default-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-default-outlined-text-color)
+		);
 	}
 </style>

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';
 
@@ -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
@@ -335,9 +338,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] === '') {
@@ -348,12 +349,22 @@
 			return '';
 		}
 	});
+
+	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
+	const linkHtmlValue = $derived.by(() => {
+		if (!linkify || value === '') {
+			return '';
+		}
+		const result = convertToHtmlWithLink(value);
+		return typeof result === 'string' ? result : String(result ?? '');
+	});
 </script>
 
 <div
 	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}
@@ -438,6 +449,11 @@
 			</div>
 		{/if}
 	</div>
+	{#if linkify}
+		<div class="textarea__link-text" style="{minHeightStyle} {customStyle}">
+			{@html linkHtmlValue}
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -471,11 +487,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 +514,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 +659,8 @@
 	}
 
 	/* =============================================
- * 表示切り替え（フォーカス時・非autoResize時）
- * ============================================= */
+	 * 表示切り替え（フォーカス時・非inline）
+	 * ============================================= */
 	.textarea--focused,
 	.textarea:not(.textarea--inline) {
 		.textarea__display-text {
@@ -639,11 +672,22 @@
 		}
 	}
 
+	/* 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 {
 			padding: var(--svelte-ui-textarea-padding);
 		}
 
@@ -664,6 +708,15 @@
 		}
 	}
 
+	/* linkify=true かつフォーカスがないときは、textarea のテキストカラーだけ透明にして二重描画を防ぐ
+	 * placeholder の色は textarea::placeholder 側で指定しているため、この指定の影響を受けない
+	 */
+	.textarea--linkify:not(.textarea--focused) textarea {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
 	/* =============================================
  * デザインバリアント：rounded
  * ============================================= */
@@ -699,4 +752,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;

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