@14ch/svelte-ui 0.0.14 → 0.0.15

package/dist/assets/styles/variables.scss

@@ -376,7 +376,7 @@
 	--svelte-ui-input-icon-space-double-inline: calc(var(--svelte-ui-form-icon-space) * 2);
 	--svelte-ui-input-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-input-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-input-text-color: var(--svelte-ui-text-color);
+	--svelte-ui-input-unit-font-size: max(0.5em, var(--svelte-ui-font-size-sm));
 	--svelte-ui-input-placeholder-color: var(--svelte-ui-text-placeholder-color);
 	--svelte-ui-input-icon-color: var(--svelte-ui-text-subtle-color);
 
@@ -387,7 +387,6 @@
 	--svelte-ui-textarea-border-radius-rounded: calc(var(--svelte-ui-textarea-min-height) / 2);
 	--svelte-ui-textarea-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-textarea-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-textarea-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-textarea-placeholder-color: var(--svelte-ui-text-placeholder-color);
 	--svelte-ui-textarea-icon-space: calc(
 		var(--svelte-ui-form-icon-space) + var(--svelte-ui-form-icon-offset)
@@ -409,7 +408,6 @@
 	--svelte-ui-select-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
 	--svelte-ui-select-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-select-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-select-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-select-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
 	--svelte-ui-select-placeholder-color: var(--svelte-ui-text-placeholder-color);
 
@@ -510,7 +508,6 @@
 	--svelte-ui-colorpicker-border-color: var(--svelte-ui-border-weak-color);
 	--svelte-ui-colorpicker-trigger-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-colorpicker-bg: var(--svelte-ui-form-bg);
-	--svelte-ui-colorpicker-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-colorpicker-placeholder-color: var(--svelte-ui-text-placeholder-color);
 
 	/* Combobox */
@@ -524,7 +521,6 @@
 	--svelte-ui-combobox-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
 	--svelte-ui-combobox-border-color: var(--svelte-ui-border-weak-color);
 	--svelte-ui-combobox-bg: var(--svelte-ui-surface-color);
-	--svelte-ui-combobox-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-combobox-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
 	--svelte-ui-combobox-option-hover-bg: var(--svelte-ui-hover-overlay);
 	--svelte-ui-combobox-option-selected-bg: var(--svelte-ui-select-overlay);

package/dist/components/Checkbox.svelte

@@ -339,10 +339,11 @@
 	 * ========================================================================= */
 
 	.checkbox {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
 		width: fit-content;
 		min-height: var(--svelte-ui-checkbox-min-height);
+		vertical-align: top;
 		contain: layout;
 	}
 

package/dist/components/ColorPicker.svelte

@@ -19,7 +19,7 @@
 	// =========================================================================
 	export type ColorPickerProps = {
 		// 基本プロパティ
-		value: string;
+		value: string | null | undefined;
 
 		// HTML属性系
 		id?: string;
@@ -141,7 +141,12 @@
 		...restProps
 	}: ColorPickerProps = $props();
 
-	let localValue: string | undefined = $state(value);
+	const getNormalizedValue = (val: string | null | undefined): string => {
+		if (val === null || val === undefined) return '';
+		return val;
+	};
+
+	let localValue: string = $state(getNormalizedValue(value));
 	let prevValue: string = $state('');
 	let isFocused: boolean = $state(false);
 
@@ -154,7 +159,7 @@
 		value;
 		untrack(() => {
 			/* value を localValue に反映 */
-			localValue = value;
+			localValue = getNormalizedValue(value);
 
 			/* value が更新されたらonchangeを実行 */
 			handleValueChange();
@@ -165,7 +170,7 @@
 		localValue;
 		untrack(() => {
 			/* localValue がクリアされた時に value もクリア */
-			if (localValue === '' || localValue === undefined) {
+			if (localValue === '') {
 				value = '';
 				prevValue = '';
 			}
@@ -392,7 +397,10 @@
 			{...inputAttributes}
 			{...restProps}
 		/>
-		<div class="color-picker__color-display" style="background-color: {value};"></div>
+		<div
+			class="color-picker__color-display"
+			style="background-color: {getNormalizedValue(value)};"
+		></div>
 	</div>
 </div>
 
@@ -407,6 +415,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		vertical-align: top;
 	}
 
 	/* =============================================

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

@@ -2,7 +2,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type ColorPickerProps = {
-    value: string;
+    value: string | null | undefined;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     customStyle?: string;

package/dist/components/Combobox.svelte

@@ -518,6 +518,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		vertical-align: top;
 	}
 
 	.combobox--full-width {
@@ -547,7 +548,7 @@
 		text-align: left;
 		cursor: pointer;
 		font-size: inherit;
-		color: var(--svelte-ui-combobox-text-color);
+		color: var(--svelte-ui-text-color);
 		transition: background-color var(--svelte-ui-transition-duration) ease;
 
 		@media (hover: hover) {

package/dist/components/Datepicker.svelte

@@ -234,13 +234,13 @@
 	// =========================================================================
 	// Effects
 	// =========================================================================
-	const effectiveLocale = $derived(locale ?? getLocale());
+	const resolvedLocale = $derived(locale ?? getLocale());
 
 	$effect(() => {
 		// range モードのときは、value を「start <= end」の順序に正規化
 		if (mode === 'range' && value && 'start' in value && 'end' in value) {
-			const startDay = dayjs(value.start).locale(effectiveLocale);
-			const endDay = dayjs(value.end).locale(effectiveLocale);
+			const startDay = dayjs(value.start).locale(resolvedLocale);
+			const endDay = dayjs(value.end).locale(resolvedLocale);
 			if (startDay.isAfter(endDay)) {
 				value = { start: value.end, end: value.start };
 			}
@@ -248,8 +248,7 @@
 	});
 
 	$effect(() => {
-		const formatWithLocale = (date: Date) =>
-			dayjs(date).locale(effectiveLocale).format(finalFormat);
+		const formatWithLocale = (date: Date) => dayjs(date).locale(resolvedLocale).format(finalFormat);
 
 		if (mode === 'range' && value && 'start' in value && 'end' in value) {
 			displayValue = `${formatWithLocale(value.start)}${rangeSeparator}${formatWithLocale(value.end)}`;
@@ -267,11 +266,11 @@
 		// スクリーンリーダーアナウンス
 		if (value) {
 			if (mode === 'range' && typeof value === 'object' && 'start' in value && 'end' in value) {
-				const startDate = dayjs(value.start).locale(effectiveLocale).format(finalFormat);
-				const endDate = dayjs(value.end).locale(effectiveLocale).format(finalFormat);
+				const startDate = dayjs(value.start).locale(resolvedLocale).format(finalFormat);
+				const endDate = dayjs(value.end).locale(resolvedLocale).format(finalFormat);
 				announceToScreenReader(`Date range selected: ${startDate} to ${endDate}`);
 			} else if (value instanceof Date) {
-				const formattedDate = dayjs(value).locale(effectiveLocale).format(finalFormat);
+				const formattedDate = dayjs(value).locale(resolvedLocale).format(finalFormat);
 				announceToScreenReader(`Date selected: ${formattedDate}`);
 			}
 		}
@@ -512,7 +511,7 @@
 
 		// 日付パース処理
 		if (mode === 'range') {
-			const parsedRange = parseRangeInput(inputStr, effectiveLocale);
+			const parsedRange = parseRangeInput(inputStr, resolvedLocale);
 			if (!parsedRange) return;
 
 			value = parsedRange;
@@ -521,7 +520,7 @@
 		}
 
 		// single モードでは先頭の「日付本体」のみを解釈する
-		const parsedSingle = parseSingleInput(inputStr, effectiveLocale);
+		const parsedSingle = parseSingleInput(inputStr, resolvedLocale);
 		if (!parsedSingle) return;
 
 		value = parsedSingle;
@@ -589,7 +588,7 @@
 	// $derived
 	// =========================================================================
 	const calendarId = $derived(`${id}-calendar`);
-	const currentLocaleConfig = $derived(localeConfig[effectiveLocale]);
+	const currentLocaleConfig = $derived(localeConfig[resolvedLocale]);
 	const finalFormat = $derived(
 		format ||
 			(mode === 'range' ? currentLocaleConfig.rangeFormat : currentLocaleConfig.defaultFormat)
@@ -670,7 +669,7 @@
 		onchange={handleChange}
 		{minDate}
 		{maxDate}
-		locale={effectiveLocale}
+		locale={resolvedLocale}
 		id={calendarId}
 	/>
 </Popup>
@@ -679,6 +678,7 @@
   position: relative;
   display: inline-block;
   width: auto;
+  vertical-align: top;
 }
 .datepicker.datepicker--full-width {
   display: block;

package/dist/components/Drawer.svelte

@@ -34,7 +34,7 @@
 		id?: string;
 
 		// スタイル/レイアウト
-		width?: string | number;
+		width?: string | number | undefined;
 		position?: 'left' | 'right';
 		bodyStyle?: string;
 		noPadding?: boolean;
@@ -64,7 +64,7 @@
 		id,
 
 		// スタイル/レイアウト
-		width = 240,
+		width = undefined,
 		position = 'left',
 		bodyStyle = '',
 		noPadding = false,
@@ -106,7 +106,11 @@
 	// =========================================================================
 	const drawerStyles = $derived(() => {
 		const styles = [];
-		styles.push(`width: ${getStyleFromNumber(width)}`);
+		if (width !== undefined) {
+			styles.push(`width: ${getStyleFromNumber(width)}`);
+		} else {
+			styles.push('width: max-content');
+		}
 		styles.push('height: 100%');
 		styles.push('min-height: 100%');
 		styles.push(`${position}: 0`);

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

@@ -18,7 +18,7 @@ export type DrawerProps = {
     title?: string;
     description?: string;
     id?: string;
-    width?: string | number;
+    width?: string | number | undefined;
     position?: 'left' | 'right';
     bodyStyle?: string;
     noPadding?: boolean;

package/dist/components/Icon.svelte

@@ -17,7 +17,7 @@
 		fallbackText?: string;
 
 		// スタイル/レイアウト
-		size?: number;
+		size?: number | string;
 		color?: string;
 		customStyle?: string;
 
@@ -53,7 +53,7 @@
 		filled = false,
 		weight = 300,
 		grade = 0,
-		opticalSize = size,
+		opticalSize = typeof size === 'number' ? size : 24,
 		variant = 'outlined',
 
 		// ARIA/アクセシビリティ
@@ -61,13 +61,16 @@
 		decorative = true,
 
 		// その他
+		class: className,
 		...restProps
 	}: IconProps = $props();
 
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const iconClasses = $derived(`material-symbols-${variant}`);
+	const iconClasses = $derived(
+		['icon', `icon--${variant}`, `material-symbols-${variant}`, className].filter(Boolean).join(' ')
+	);
 
 	const fontVariationSettings = $derived(
 		`'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opticalSize}`
@@ -79,12 +82,13 @@
 		role: !decorative && ariaLabel ? 'img' : undefined
 	});
 
-	const iconStyle = $derived(
-		`width: ${size}px; height: ${size}px; font-size: ${size}px; 
-		color: ${color}; line-height: 1; 
+	const iconStyle = $derived.by(() => {
+		const sizeStyle = getStyleFromNumber(size);
+		return `width: ${sizeStyle}; height: ${sizeStyle}; font-size: ${sizeStyle}; 
+		color: ${color}; 
 		font-variation-settings: ${fontVariationSettings}; 
-		${customStyle}`
-	);
+		${customStyle}`;
+	});
 </script>
 
 <i
@@ -102,7 +106,7 @@
 	<!-- Unicode文字での代替表示 -->
 	<span
 		class="icon-fallback-text"
-		style="width: {size}px; height: {size}px; font-size: {size}px; {customStyle}"
+		style={customStyle}
 		{...ariaAttributes}
 		{...restProps}
 		data-testid="icon-fallback"
@@ -112,13 +116,11 @@
 {/if}
 
 <style>
-	.material-symbols-outlined,
-	.material-symbols-rounded,
-	.material-symbols-sharp {
+	.icon {
 		display: block;
 		font-size: inherit;
 		color: inherit;
-		line-height: inherit;
+		line-height: 1;
 		text-transform: none;
 		letter-spacing: normal;
 		word-wrap: normal;
@@ -129,15 +131,15 @@
 		transition-timing-function: ease;
 	}
 
-	.material-symbols-outlined {
+	.icon.material-symbols-outlined {
 		font-family: 'Material Symbols Outlined';
 	}
 
-	.material-symbols-rounded {
+	.icon.material-symbols-rounded {
 		font-family: 'Material Symbols Rounded';
 	}
 
-	.material-symbols-sharp {
+	.icon.material-symbols-sharp {
 		font-family: 'Material Symbols Sharp';
 	}
 
@@ -157,10 +159,7 @@
 
 	/* Prefers reduced motion */
 	@media (prefers-reduced-motion: reduce) {
-		.material-symbols-outlined,
-		.material-symbols-filled,
-		.material-symbols-rounded,
-		.material-symbols-sharp,
+		.icon,
 		.icon-fallback-text {
 			transition: none;
 		}
@@ -168,10 +167,7 @@
 
 	/* Print styles */
 	@media print {
-		.material-symbols-outlined,
-		.material-symbols-filled,
-		.material-symbols-rounded,
-		.material-symbols-sharp,
+		.icon,
 		.icon-fallback-text {
 			color: black !important;
 		}

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

@@ -4,7 +4,7 @@ export type IconProps = {
     children: Snippet;
     title?: string;
     fallbackText?: string;
-    size?: number;
+    size?: number | string;
     color?: string;
     customStyle?: string;
     filled?: boolean;

package/dist/components/Input.svelte

@@ -50,6 +50,7 @@
 		maxWidth?: string | number | null;
 		rounded?: boolean;
 		customStyle?: string;
+		unit?: string;
 
 		// アイコン関連
 		rightIcon?: string;
@@ -137,12 +138,13 @@
 		// スタイル/レイアウト
 		inline = false,
 		focusStyle = 'outline',
-		customStyle = '',
 		fullWidth = false,
 		width = null,
 		minWidth = inline ? null : 120,
 		maxWidth = null,
 		rounded = false,
+		customStyle = '',
+		unit = '',
 
 		// アイコン関連
 		rightIcon = undefined,
@@ -381,17 +383,24 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const getDisplayValue = (): string => {
-		if (value === null || value === undefined) return '';
+	const displayValue = $derived.by(() => {
+		if (!value) {
+			if (inline && !placeholder) {
+				return ' ';
+			}
+			return '';
+		}
 		if (type === 'number' && typeof value === 'number') {
 			return value.toLocaleString();
 		}
-		return String(value);
-	};
+		return convertToHtmlWithLink(value);
+	});
+
+	const isLinkifyActive = $derived(linkify && (type === 'text' || type === 'url'));
 
 	const linkHtmlValue = $derived.by(() => {
-		if (!linkify) return '';
-		const result = convertToHtmlWithLink(getDisplayValue());
+		if (!isLinkifyActive) return '';
+		const result = convertToHtmlWithLink(value);
 		return typeof result === 'string' ? result : String(result ?? '');
 	});
 
@@ -405,7 +414,7 @@
 	input--focus-{focusStyle}
 	input--type-{type}"
 	class:input--inline={inline}
-	class:input--linkify={linkify}
+	class:input--linkify={isLinkifyActive}
 	class:input--auto-resize={inline}
 	class:input--full-width={fullWidth}
 	class:input--clearable={clearable}
@@ -419,12 +428,17 @@
 	data-testid="input"
 	style="width: {widthStyle}; max-width: {maxWidthStyle}; min-width: {minWidthStyle}"
 >
-	<!-- inline時の表示用要素（text-overflow: ellipsisが効く） -->
-	{#if inline}
-		<div class="input__display-text" data-placeholder={placeholder} style={customStyle}>
-			{getDisplayValue()}
+	<!-- 表示用テキスト -->
+	<div class="input__display-text" data-placeholder={placeholder} style={customStyle}>
+		<div class="input__display-text-content">
+			{@html displayValue}
+			{#if type === 'number' && unit !== ''}
+				<span class="input__unit-text">
+					{unit}
+				</span>
+			{/if}
 		</div>
-	{/if}
+	</div>
 	<!-- 入力用要素 -->
 	<div class="input__wrapper">
 		<input
@@ -478,9 +492,11 @@
 			{...restProps}
 		/>
 	</div>
-	{#if linkify}
+	{#if isLinkifyActive}
 		<div class="input__link-text" style={customStyle}>
-			{@html linkHtmlValue}
+			<div class="input__link-text-content">
+				{@html linkHtmlValue}
+			</div>
 		</div>
 	{/if}
 	<!-- クリアボタン -->
@@ -488,7 +504,7 @@
 		<div class="input__clear-button">
 			<IconButton
 				ariaLabel={t('input.clear')}
-				color="var(--svelte-ui-input-text-color)"
+				color="var(--svelte-ui-text-color)"
 				onclick={(event) => {
 					event.stopPropagation();
 					clear();
@@ -568,12 +584,19 @@
 	.input {
 		display: inline-block;
 		position: relative;
+		vertical-align: top;
 		width: auto;
+		height: var(--svelte-ui-input-height);
 		max-width: 100%;
 		height: inherit;
 	}
 
 	.input__wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
 		padding: inherit;
 		border: none;
 		font-size: inherit;
@@ -581,7 +604,7 @@
 		color: inherit;
 		line-height: inherit;
 		text-align: inherit;
-		opacity: 0;
+		opacity: 1;
 	}
 
 	/* =============================================
@@ -610,63 +633,40 @@
 		}
 	}
 
-	.input__display-text {
-		display: inline-block;
-		vertical-align: top;
+	.input__display-text,
+	.input__link-text {
+		display: flex;
+		align-items: center;
 		width: 100%;
 		min-width: 1em;
 		padding: inherit;
-		background: inherit;
-		border: inherit;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
 		line-height: inherit;
 		text-align: inherit;
 		white-space: nowrap;
-		vertical-align: top;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		opacity: 1;
 		transition: none;
-		cursor: text !important;
-
-		&::before {
-			content: '';
-		}
-
-		&:empty::before {
-			content: attr(data-placeholder);
-		}
 	}
 
-	/* リンク表示用オーバーレイ */
 	.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__unit-text {
+		font-size: var(--svelte-ui-input-unit-font-size);
 	}
 
 	.input__clear-button {
@@ -741,26 +741,45 @@
 	}
 
 	/* =============================================
- * デザインバリアント：default
+ * タイプ別スタイル
  * ============================================= */
-	.input:not(.input--inline) {
-		.input__wrapper {
-			position: static;
-			opacity: 1;
+	/* type-number */
+	.input--type-number {
+		.input__display-text,
+		.input__link-text {
+			justify-content: flex-end;
 		}
+	}
+
+	/* type-password */
+	.input--type-password {
+		&:not(.input--linkify) input {
+			color: inherit;
+			caret-color: inherit;
+			text-shadow: inherit;
+		}
+
+		.input__display-text {
+			opacity: 0;
+		}
+	}
 
+	/* =============================================
+ * デザインバリアント：default
+ * ============================================= */
+	.input:not(.input--inline) {
 		input {
 			min-height: var(--svelte-ui-input-height);
 			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;
 			border-radius: var(--svelte-ui-input-border-radius);
-			color: var(--svelte-ui-input-text-color);
 		}
 
 		input,
 		.input__display-text,
 		.input__link-text {
+			height: var(--svelte-ui-input-height);
 			padding: var(--svelte-ui-input-padding);
 		}
 
@@ -806,34 +825,10 @@
 		}
 	}
 
-	/* 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
  * ============================================= */
 	.input--inline {
-		&.input--type-number .input__display-text {
-			text-align: right;
-		}
-
-		.input__wrapper {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
-
 		&.input--has-left-icon {
 			input,
 			.input__display-text,
@@ -865,25 +860,6 @@
 				padding-right: var(--svelte-ui-input-icon-space-double-inline);
 			}
 		}
-
-		&.input--focused {
-			.input__display-text {
-				opacity: 0;
-			}
-
-			.input__wrapper {
-				opacity: 1;
-			}
-		}
-	}
-
-	/* inline + linkify のときは、display-text を常に隠し、wrapper を常に表示 */
-	.input--inline.input--linkify .input__display-text {
-		opacity: 0;
-	}
-
-	.input--inline.input--linkify .input__wrapper {
-		opacity: 1;
 	}
 
 	/* =============================================
@@ -924,6 +900,39 @@
 		}
 	}
 
+	/* not-linkify + not-focused: inputを不可視化、display-textを表示 */
+	/* type=password のときは除外（常に input を表示） */
+	.input:not(.input--linkify):not(.input--focused):not(.input--type-password) input {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
+	/* not-linkify + focused: display-textをopacity: 0 */
+	.input:not(.input--linkify).input--focused .input__display-text {
+		opacity: 0;
+	}
+
+	/* linkify + not-focused: inputを不可視化、display-textをopacity: 0、link-textを表示 */
+	.input--linkify:not(.input--focused) input {
+		color: transparent;
+		caret-color: transparent;
+		text-shadow: none;
+	}
+
+	.input--linkify:not(.input--focused) .input__display-text {
+		opacity: 0;
+	}
+
+	/* linkify + focused: display-textをopacity: 0、link-textをdisplay: none */
+	.input--linkify.input--focused .input__display-text {
+		opacity: 0;
+	}
+
+	.input--focused .input__link-text {
+		display: none;
+	}
+
 	/* =============================================
  * プレースホルダー・テキスト表示
  * ============================================= */

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

@@ -26,6 +26,7 @@ export type InputProps = {
     maxWidth?: string | number | null;
     rounded?: boolean;
     customStyle?: string;
+    unit?: string;
     rightIcon?: string;
     leftIcon?: string;
     leftIconAriaLabel?: string;

package/dist/components/Radio.svelte

@@ -365,10 +365,11 @@
    * ============================================= */
 
 	.radio {
-		display: flex;
+		display: inline-flex;
 		align-items: center;
 		width: fit-content;
 		min-height: var(--svelte-ui-radio-min-height);
+		vertical-align: top;
 		contain: layout;
 	}
 

package/dist/components/SegmentedControl.svelte

@@ -376,7 +376,7 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const effectiveIconSize = $derived(
+	const resolvedIconSize = $derived(
 		iconOpticalSize || (size === 'small' ? 16 : size === 'large' ? 24 : 20)
 	);
 
@@ -458,7 +458,7 @@
 							filled={iconFilled || isSelected}
 							weight={iconWeight}
 							grade={iconGrade}
-							opticalSize={effectiveIconSize}
+							opticalSize={resolvedIconSize}
 							variant={iconVariant}
 						>
 							{item.icon}
@@ -474,7 +474,7 @@
 </div>
 
 <style>.segmented-control {
-  display: inline-flex;
+  display: flex;
   position: relative;
   padding: var(--svelte-ui-segmented-control-base-padding);
   background-color: var(--svelte-ui-segmented-control-base-bg);

package/dist/components/Select.svelte

@@ -355,6 +355,7 @@ select--focus-{focusStyle}"
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		vertical-align: top;
 	}
 
 	/* =============================================
@@ -453,7 +454,6 @@ select--focus-{focusStyle}"
 			border: none;
 			border-radius: var(--svelte-ui-select-border-radius);
 			font-size: 1rem;
-			color: var(--svelte-ui-select-text-color);
 			line-height: var(--svelte-ui-select-height);
 		}
 	}

package/dist/components/Tab.svelte

@@ -171,6 +171,7 @@
 	{#each tabItems as tabItem, index}
 		<TabItem
 			{tabItem}
+			{pathPrefix}
 			isSelected={index === selectedTabIndex}
 			{textColor}
 			{selectedTextColor}

package/dist/components/TabItem.svelte

@@ -11,6 +11,7 @@
 	export type TabItemProps = {
 		// 基本プロパティ
 		tabItem: MenuItem;
+		pathPrefix?: string;
 
 		// スタイル/レイアウト
 		textColor: string;
@@ -31,6 +32,7 @@
 	let {
 		// 基本プロパティ
 		tabItem,
+		pathPrefix = '',
 
 		// スタイル/レイアウト
 		textColor,
@@ -47,10 +49,29 @@
 		// 状態/動作
 		isSelected = false
 	}: TabItemProps = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	// pathPrefixを付与したhrefを計算
+	const hrefWithPrefix = $derived.by(() => {
+		if (!tabItem.href) return undefined;
+		if (!pathPrefix) return tabItem.href;
+
+		// 既にpathPrefixが含まれている場合はそのまま
+		// pathPrefixが完全一致、またはpathPrefix + '/'で始まる場合
+		if (tabItem.href === pathPrefix || tabItem.href.startsWith(`${pathPrefix}/`)) {
+			return tabItem.href;
+		}
+
+		// pathPrefixを付与
+		return `${pathPrefix}${tabItem.href.startsWith('/') ? '' : '/'}${tabItem.href}`;
+	});
 </script>
 
 <a
-	href={tabItem.href}
+	href={hrefWithPrefix}
 	class="tab-item"
 	class:tab-item--selected={isSelected}
 	style="--svelte-ui-tab-item-text-color: {textColor}; --svelte-ui-tab-item-selected-text-color: {selectedTextColor}; --svelte-ui-tab-item-selected-bar-color: {selectedBarColor}"

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

@@ -2,6 +2,7 @@ import type { MenuItem } from '../types/menuItem';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 export type TabItemProps = {
     tabItem: MenuItem;
+    pathPrefix?: string;
     textColor: string;
     selectedTextColor: string;
     selectedBarColor: string;

package/dist/components/Textarea.svelte

@@ -180,6 +180,8 @@
 	}: TextareaProps = $props();
 
 	let ref: HTMLTextAreaElement | null = null;
+	let displayTextRef: HTMLDivElement | null = $state(null);
+	let linkTextRef: HTMLDivElement | null = $state(null);
 	let isFocused: boolean = $state(false);
 
 	// =========================================================================
@@ -330,6 +332,18 @@
 		onpointercancel?.(event);
 	};
 
+	// スクロール同期
+	const handleScroll = () => {
+		if (!ref) return;
+		const scrollTop = ref.scrollTop;
+		if (displayTextRef) {
+			displayTextRef.scrollTop = scrollTop;
+		}
+		if (linkify && linkTextRef) {
+			linkTextRef.scrollTop = scrollTop;
+		}
+	};
+
 	// =========================================================================
 	// $derived
 	// =========================================================================
@@ -388,13 +402,14 @@
 >
 	<!-- autoResize時の表示用要素（HTMLレンダリングで高さ調整） -->
 	<div
+		bind:this={displayTextRef}
 		class="textarea__display-text"
 		data-placeholder={placeholder}
-		style="min-height: {minHeightStyle}; {customStyle}"
+		style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
 	>
 		{@html htmlValue}
 	</div>
-	<div class="textarea__input">
+	<div class="textarea__wrapper">
 		<textarea
 			{id}
 			{name}
@@ -438,32 +453,37 @@
 			onpointerleave={handlePointerLeave}
 			onpointermove={handlePointerMove}
 			onpointercancel={handlePointerCancel}
+			onscroll={handleScroll}
 			{...textareaAttributes}
 			{...restProps}
 		></textarea>
-		<!-- クリアボタン -->
-		{#if clearable && !disabled && !readonly}
-			<div class="textarea__clear-button">
-				<IconButton
-					ariaLabel={clearButtonAriaLabel}
-					color="var(--svelte-ui-textarea-text-color)"
-					onclick={(event) => {
-						event.stopPropagation();
-						clear();
-					}}
-					tabindex={-1}
-					iconFilled={true}
-					{iconVariant}
-					fontSize={18}>cancel</IconButton
-				>
-			</div>
-		{/if}
 	</div>
 	{#if linkify}
-		<div class="textarea__link-text" style="min-height: {minHeightStyle}; {customStyle}">
+		<div
+			bind:this={linkTextRef}
+			class="textarea__link-text"
+			style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
+		>
 			{@html linkHtmlValue}
 		</div>
 	{/if}
+	<!-- クリアボタン -->
+	{#if clearable && !disabled && !readonly}
+		<div class="textarea__clear-button">
+			<IconButton
+				ariaLabel={clearButtonAriaLabel}
+				color="var(--svelte-ui-text-color)"
+				onclick={(event) => {
+					event.stopPropagation();
+					clear();
+				}}
+				tabindex={-1}
+				iconFilled={true}
+				{iconVariant}
+				fontSize={18}>cancel</IconButton
+			>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -481,7 +501,7 @@
 		}
 	}
 
-	.textarea__input {
+	.textarea__wrapper {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -514,6 +534,14 @@
 		opacity: 1;
 		transition: none;
 		cursor: text !important;
+		overflow-y: auto;
+		overflow-x: hidden;
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* IE and Edge */
+
+		&::-webkit-scrollbar {
+			display: none; /* Chrome, Safari, Opera */
+		}
 
 		&::before {
 			content: '';
@@ -602,7 +630,8 @@
  * ============================================= */
 	.textarea--clearable {
 		textarea,
-		.textarea__display-text {
+		.textarea__display-text,
+		.textarea__link-text {
 			padding-right: var(--svelte-ui-textarea-icon-space);
 		}
 	}
@@ -688,9 +717,13 @@
 		opacity: 0;
 	}
 
-	/* フォーカス時はリンク用オーバーレイも非表示にして（display:none）、リンクが反応しないようにする */
+	/* フォーカス時はリンク用オーバーレイも非表示（opacity: 0）にして、リンクが反応しないようにする */
 	.textarea--focused .textarea__link-text {
-		display: none;
+		opacity: 0;
+	}
+
+	.textarea--focused .textarea__link-text :global(a) {
+		pointer-events: none;
 	}
 
 	/* =============================================
@@ -710,11 +743,12 @@
 			box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-textarea-border-color);
 			border: none;
 			border-radius: var(--svelte-ui-textarea-border-radius);
-			color: var(--svelte-ui-textarea-text-color);
 		}
 
 		&.textarea--clearable {
-			textarea {
+			textarea,
+			.textarea__display-text,
+			.textarea__link-text {
 				padding-right: var(--svelte-ui-textarea-icon-space);
 			}
 		}

package/dist/i18n/index.d.ts

@@ -215,5 +215,4 @@ type NestedKeyOf<T> = T extends object ? {
     [K in keyof T]: K extends string ? T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : K : never;
 }[keyof T] : never;
 export declare const t: (key: NestedKeyOf<typeof TRANSLATIONS.en>, params?: Record<string, any>) => string;
-export declare const debugLocale: () => Locale;
 export {};

package/dist/i18n/index.js

@@ -28,20 +28,10 @@ export const t = (key, params) => {
     const locale = (globalLocale && globalLocale in TRANSLATIONS) ? globalLocale : 'en';
     const message = key.split('.').reduce((obj, k) => obj?.[k], TRANSLATIONS[locale]);
     if (typeof message !== 'string') {
-        console.warn(`Translation key "${key}" not found for locale "${locale}"`);
+        if (import.meta.env.DEV) {
+            console.warn(`Translation key "${key}" not found for locale "${locale}"`);
+        }
         return key;
     }
     return replaceParams(message, params);
 };
-// デバッグ用: 現在の言語設定を確認
-export const debugLocale = () => {
-    if (typeof navigator !== 'undefined') {
-        console.log('navigator.language:', navigator.language);
-        console.log('navigator.languages:', navigator.languages);
-    }
-    const globalResolved = getLocale();
-    // グローバル設定のロケールが TRANSLATIONS に存在する場合はそれを使い、存在しない場合は 'en' にフォールバック
-    const effective = (globalResolved && globalResolved in TRANSLATIONS) ? globalResolved : 'en';
-    console.log('effective locale (i18n):', effective);
-    return effective;
-};

package/dist/utils/formatText.d.ts

@@ -1,4 +1,4 @@
-export declare const convertToHtml: (value: string | number | null) => string | number | null;
+export declare const convertToHtml: (value: string | number) => string;
 export declare const convertToLink: (str: string) => string;
 export declare const escapeHtml: (value: string) => string;
-export declare const convertToHtmlWithLink: (value: string | number | null) => string | number | null;
+export declare const convertToHtmlWithLink: (value: string | number) => string;

package/dist/utils/formatText.js

@@ -13,7 +13,7 @@ export const convertToHtml = (value) => {
         return html;
     }
     else {
-        return value;
+        return String(value);
     }
 };
 export const convertToLink = (str) => {
@@ -42,6 +42,6 @@ export const convertToHtmlWithLink = (value) => {
         return htmlWithLink;
     }
     else {
-        return value;
+        return String(value);
     }
 };

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