@14ch/svelte-ui 0.0.69 → 0.0.71

package/dist/components/ColorPicker.svelte

@@ -385,7 +385,6 @@
 	class:color-picker--readonly={readonly}
 	class:color-picker--focused={isFocused}
 	data-testid="color-picker"
-	style={customStyle}
 >
 	<Input
 		id={id ? `${id}-input` : undefined}
@@ -402,7 +401,7 @@
 		{minWidth}
 		{maxWidth}
 		{rounded}
-		customStyle={`padding-left: var(--svelte-ui-colorpicker-text-padding-left); ${customStyle}`}
+		customStyle={`${customStyle}; padding-left: var(--svelte-ui-colorpicker-text-padding-left)`}
 		onchange={handleChange}
 		oninput={handleInput}
 		onfocus={handleFocus}

package/dist/components/Input.svelte

@@ -704,9 +704,37 @@
 	// --------------------------------
 	// style from number
 	// --------------------------------
+	// アイコンの領域は customStyle で消されないよう、customStyle より後ろに指定する
+	const iconSpaceSuffix = $derived(inline ? '-inline' : '');
+	const iconPaddingStyle = $derived(
+		[
+			hasLeftIcon ? `padding-left: var(--svelte-ui-input-icon-space${iconSpaceSuffix})` : '',
+			clearable && hasRightIcon
+				? `padding-right: var(--svelte-ui-input-icon-space-double${iconSpaceSuffix})`
+				: clearable || hasRightIcon
+					? `padding-right: var(--svelte-ui-input-icon-space${iconSpaceSuffix})`
+					: ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 	const widthStyle = $derived(getStyleFromNumber(width));
 	const maxWidthStyle = $derived(getStyleFromNumber(maxWidth));
 	const minWidthStyle = $derived(getStyleFromNumber(minWidth));
+
+	// style: ディレクティブは style 属性に勝つため、幅の指定も customStyle と同じ文字列に混ぜる。
+	// 専用プロップが指定されたときだけ customStyle より後ろに置いてプロップを優先させる
+	const boxStyle = $derived(
+		[
+			customStyle,
+			iconPaddingStyle,
+			widthStyle ? `width: ${widthStyle}` : '',
+			minWidthStyle ? `min-width: ${minWidthStyle}` : '',
+			maxWidthStyle ? `max-width: ${maxWidthStyle}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <div
@@ -727,12 +755,10 @@
 	class:input--readonly={readonly}
 	class:input--focused={isFocused}
 	data-testid="input"
-	style:width={widthStyle}
-	style:max-width={maxWidthStyle}
-	style:min-width={minWidthStyle}
+	style={boxStyle}
 >
 	<!-- 表示用テキスト -->
-	<div class="input__display-text" style={customStyle}>
+	<div class="input__display-text">
 		<div
 			class="input__display-text-content"
 			class:input__display-text-content--placeholder={!hasDisplayValue}
@@ -753,7 +779,6 @@
 			bind:value
 			bind:this={ref}
 			type={resolvedType}
-			style={customStyle}
 			{placeholder}
 			{autocomplete}
 			{min}
@@ -798,7 +823,7 @@
 		/>
 	</div>
 	{#if isLinkifyActive}
-		<div class="input__link-text" style={customStyle}>
+		<div class="input__link-text">
 			<div class="input__link-text-content">
 				{@html linkHtmlValue}
 			</div>
@@ -905,6 +930,11 @@
 		width: auto;
 		max-width: 100%;
 		height: inherit;
+		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-radius: var(--svelte-ui-input-border-radius);
 	}
 
 	.input__wrapper {
@@ -915,9 +945,8 @@
 		height: 100%;
 		padding: inherit;
 		border: none;
-		border-radius: var(--svelte-ui-input-border-radius);
-		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-radius: inherit;
+		background-color: transparent;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
@@ -935,10 +964,10 @@
 		width: 100%;
 		min-width: 1em;
 		min-height: var(--svelte-ui-input-height);
-		padding: var(--svelte-ui-input-padding);
+		padding: 0;
 		background-color: transparent;
 		border: none;
-		border-radius: var(--svelte-ui-input-border-radius);
+		border-radius: inherit;
 		font-family: inherit;
 		font-size: inherit;
 		font-weight: inherit;
@@ -962,7 +991,7 @@
 		width: 100%;
 		min-width: 1em;
 		height: var(--svelte-ui-input-height);
-		padding: var(--svelte-ui-input-padding);
+		padding: 0;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
@@ -990,6 +1019,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
+		padding: inherit;
 		pointer-events: none;
 		z-index: 1;
 	}
@@ -1005,7 +1035,7 @@
 	/* =============================================
  * 表示制御
  * ============================================= */
-	/* 非フォーカス時: input要素自体を不可視化（枠線・背景はラッパーにあるため display-text のみ表示） */
+	/* 非フォーカス時: input要素自体を不可視化（枠線・背景はルートにあるため display-text のみ表示） */
 	.input:not(.input--focused) input {
 		opacity: 0;
 	}
@@ -1027,7 +1057,11 @@
 	/* =============================================
  * フォーカス効果バリエーション
  * ============================================= */
-	.input--focus-outline input:focus {
+	input:focus {
+		outline: none;
+	}
+
+	.input--focus-outline.input--focused .input__wrapper {
 		outline: var(--svelte-ui-focus-outline-inner);
 		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
 	}
@@ -1036,14 +1070,6 @@
 		background: var(--svelte-ui-hover-overlay);
 	}
 
-	.input--focus-background input:focus {
-		outline: none;
-	}
-
-	.input--focus-none input:focus {
-		outline: none;
-	}
-
 	/* =============================================
  * 状態管理（disabled, readonly等）
  * ============================================= */
@@ -1078,33 +1104,21 @@
  * 機能バリエーション
  * ============================================= */
 	/* clearable */
+	/* 装飾はテキストと同じ content box を基準に中央寄せする（padding-block: inherit）。
+	   絶対配置の基準はルートの padding box なので、そのままだと padding が上下非対称なときにズレる */
 	.input__clear-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		position: absolute;
-		top: 50%;
+		inset-block: 0;
 		right: 4px;
 		width: 32px;
-		height: 32px;
-		transform: translate(0, -50%);
+		padding-block: inherit;
 		opacity: 0;
 		transition: var(--svelte-ui-transition-duration);
 	}
 
-	.input--clearable {
-		input,
-		.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__link-text {
-			padding-right: var(--svelte-ui-input-icon-space-double);
-		}
-	}
-
 	.input--has-right-icon .input__clear-button {
 		right: var(--svelte-ui-input-icon-space);
 	}
@@ -1122,32 +1136,15 @@
 	}
 
 	/* アイコン */
-	.input--has-left-icon {
-		input,
-		.input__display-text,
-		.input__link-text {
-			padding-left: var(--svelte-ui-input-icon-space);
-		}
-	}
-
-	.input--has-right-icon {
-		input,
-		.input__display-text,
-		.input__link-text {
-			padding-right: var(--svelte-ui-input-icon-space);
-		}
-	}
-
 	.input__icon-left {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		position: absolute;
-		top: 50%;
+		inset-block: 0;
 		left: 4px;
 		width: 32px;
-		height: 32px;
-		transform: translateY(-50%);
+		padding-block: inherit;
 		color: var(--svelte-ui-input-icon-color);
 		pointer-events: none;
 		z-index: 1;
@@ -1158,11 +1155,10 @@
 		justify-content: center;
 		align-items: center;
 		position: absolute;
-		top: 50%;
+		inset-block: 0;
 		right: 4px;
 		width: 32px;
-		height: 32px;
-		transform: translateY(-50%);
+		padding-block: inherit;
 		color: var(--svelte-ui-input-icon-color);
 		pointer-events: none;
 		z-index: 2;
@@ -1214,29 +1210,27 @@
  * デザインバリエーション
  * ============================================= */
 	/* rounded */
-	.input--rounded .input__wrapper,
-	.input--rounded input {
+	.input--rounded {
 		border-radius: var(--svelte-ui-input-border-radius-rounded);
 	}
 
 	/* inline */
-	.input--inline .input__wrapper,
-	.input--inline input {
-		min-height: inherit;
-		line-height: inherit;
+	.input--inline {
+		min-height: 0;
+		padding: 0;
 		background-color: transparent;
 		box-shadow: none;
-		border: inherit;
 		border-radius: 0;
-	}
 
-	.input--inline {
+		input {
+			min-height: 0;
+		}
+
 		input,
 		.input__display-text,
 		.input__link-text {
 			height: inherit;
 			line-height: inherit;
-			padding: inherit;
 		}
 
 		/*
@@ -1249,41 +1243,11 @@
 			line-height: normal;
 		}
 
-		&.input--has-left-icon {
-			input,
-			.input__display-text,
-			.input__link-text {
-				padding-left: var(--svelte-ui-input-icon-space-inline);
-			}
-		}
-
 		&.input--has-right-icon {
-			input,
-			.input__display-text,
-			.input__link-text {
-				padding-right: var(--svelte-ui-input-icon-space-inline);
-			}
-
 			.input__icon-right {
 				right: 0;
 			}
 		}
-
-		&.input--clearable {
-			input,
-			.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__link-text {
-				padding-right: var(--svelte-ui-input-icon-space-double-inline);
-			}
-		}
 	}
 
 	/* full-width */

package/dist/components/MultiSelect.svelte

@@ -82,6 +82,13 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
+	// アイコンの領域は customStyle で消されないよう、customStyle より後ろに指定する
+	const triggerStyle = $derived(
+		[customStyle, `padding-right: var(--svelte-ui-select-icon-space${inline ? '-inline' : ''})`]
+			.filter(Boolean)
+			.join('; ')
+	);
+
 	const fallbackId = `multi-select-${Math.random().toString(36).substring(2, 15)}`;
 	const listboxId = $derived(`${id ?? fallbackId}-listbox`);
 
@@ -161,7 +168,7 @@
 		aria-required={required ? 'true' : undefined}
 		{tabindex}
 		{disabled}
-		style={customStyle}
+		style={triggerStyle}
 		onfocus={handleFocus}
 		onblur={handleBlur}
 		onclick={handleTriggerClick}
@@ -179,9 +186,9 @@
 			{:else if placeholder}
 				<span class="multi-select__placeholder">{placeholder}</span>
 			{/if}
-			<span class="multi-select__dropdown-icon" aria-hidden="true">
-				<Icon>arrow_drop_down</Icon>
-			</span>
+		</span>
+		<span class="multi-select__dropdown-icon" aria-hidden="true">
+			<Icon>arrow_drop_down</Icon>
 		</span>
 	</button>
 
@@ -240,10 +247,10 @@
  * トリガーボタン
  * ============================================= */
 .multi-select__trigger {
+  position: relative;
   width: 100%;
   min-height: var(--svelte-ui-select-height);
   padding: var(--svelte-ui-select-padding);
-  padding-right: var(--svelte-ui-select-icon-space);
   background: transparent;
   border: none;
   font-family: inherit;
@@ -258,7 +265,6 @@
 }
 
 .multi-select__inner {
-  position: relative;
   flex: 1;
   align-self: stretch;
   display: flex;
@@ -282,18 +288,17 @@
   flex: 1;
 }
 
+/* アイコンはテキストと同じ content box を基準に中央寄せする（padding-block: inherit）。
+   絶対配置の基準はトリガーの padding box なので、そのままだと padding が上下非対称なときにズレる */
 .multi-select__dropdown-icon {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
-  top: 0;
+  inset-block: 0;
   right: 4px;
-  margin-top: calc((var(--svelte-ui-select-height) - 32px) / 2);
-  margin-bottom: calc((var(--svelte-ui-select-height) - 32px) / 2);
-  margin-right: calc(0px - var(--svelte-ui-select-icon-space));
   width: 32px;
-  height: 32px;
+  padding-block: inherit;
   color: var(--svelte-ui-select-dropdown-icon-color);
   pointer-events: none;
 }
@@ -352,7 +357,6 @@
  * ============================================= */
 .multi-select.multi-select--inline .multi-select__trigger {
   padding: inherit;
-  padding-right: var(--svelte-ui-select-icon-space-inline);
   background: transparent;
   border: none;
   border-radius: 0;
@@ -366,11 +370,12 @@
   min-height: 1lh;
 }
 .multi-select.multi-select--inline .multi-select__dropdown-icon {
-  top: calc((1lh - 32px) / 2);
+  /* 複数行になりうるので、箱の中央ではなく最初の行にそろえる */
+  bottom: auto;
+  box-sizing: content-box;
+  height: 1lh;
+  padding-bottom: 0;
   right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-right: calc(0px - var(--svelte-ui-select-icon-space-inline));
 }
 
 /* =============================================

package/dist/components/Select.svelte

@@ -168,6 +168,13 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
+	// アイコンの領域は customStyle で消されないよう、customStyle より後ろに指定する
+	const triggerStyle = $derived(
+		[customStyle, `padding-right: var(--svelte-ui-select-icon-space${inline ? '-inline' : ''})`]
+			.filter(Boolean)
+			.join('; ')
+	);
+
 	const fallbackId = `select-${Math.random().toString(36).substring(2, 15)}`;
 	const baseId = $derived(id ?? fallbackId);
 	const listboxId = $derived(`${baseId}-listbox`);
@@ -367,7 +374,7 @@
 		aria-required={required ? 'true' : undefined}
 		{tabindex}
 		{disabled}
-		style={customStyle}
+		style={triggerStyle}
 		onfocus={handleFocus}
 		onblur={handleBlur}
 		onclick={handleTriggerClick}
@@ -398,9 +405,9 @@
 			{:else if placeholder}
 				<span class="select__placeholder">{placeholder}</span>
 			{/if}
-			<span class="select__dropdown-icon" aria-hidden="true">
-				<Icon>arrow_drop_down</Icon>
-			</span>
+		</span>
+		<span class="select__dropdown-icon" aria-hidden="true">
+			<Icon>arrow_drop_down</Icon>
 		</span>
 	</button>
 
@@ -483,10 +490,10 @@
 .select__trigger {
   display: flex;
   align-items: center;
+  position: relative;
   width: 100%;
   min-height: var(--svelte-ui-select-height);
   padding: var(--svelte-ui-select-padding);
-  padding-right: var(--svelte-ui-select-icon-space);
   background: transparent;
   border: none;
   font-family: inherit;
@@ -499,7 +506,6 @@
 }
 
 .select__inner {
-  position: relative;
   flex: 1;
   align-self: stretch;
   display: flex;
@@ -520,18 +526,17 @@
   color: var(--svelte-ui-select-placeholder-color);
 }
 
+/* アイコンはテキストと同じ content box を基準に中央寄せする（padding-block: inherit）。
+   絶対配置の基準はトリガーの padding box なので、そのままだと padding が上下非対称なときにズレる */
 .select__dropdown-icon {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
-  top: 0;
+  inset-block: 0;
   right: 4px;
-  margin-top: calc((var(--svelte-ui-select-height) - 32px) / 2);
-  margin-bottom: calc((var(--svelte-ui-select-height) - 32px) / 2);
-  margin-right: calc(0px - var(--svelte-ui-select-icon-space));
   width: 32px;
-  height: 32px;
+  padding-block: inherit;
   color: var(--svelte-ui-select-dropdown-icon-color);
   pointer-events: none;
 }
@@ -590,7 +595,6 @@
  * ============================================= */
 .select.select--inline .select__trigger {
   padding: inherit;
-  padding-right: var(--svelte-ui-select-icon-space-inline);
   background: transparent;
   border: none;
   border-radius: 0;
@@ -604,11 +608,12 @@
   min-height: 1lh;
 }
 .select.select--inline .select__dropdown-icon {
-  top: calc((1lh - 32px) / 2);
+  /* 複数行になりうるので、箱の中央ではなく最初の行にそろえる */
+  bottom: auto;
+  box-sizing: content-box;
+  height: 1lh;
+  padding-bottom: 0;
   right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-right: calc(0px - var(--svelte-ui-select-icon-space-inline));
 }
 
 /* =============================================

package/dist/components/StepNav.svelte

@@ -12,6 +12,7 @@
 		KeyboardHandler,
 		BivariantValueHandler
 	} from '../types/callbackHandlers';
+	import { getStyleFromNumber } from '../utils/style';
 	import { getCurrentPath, matchPath } from '../utils/navPath';
 	import { subscribeUrlChange } from '../utils/urlChange';
 	import { t } from '../i18n';
@@ -52,6 +53,10 @@
 		size?: ComponentSize;
 		/** 現在／完了ステップの強調色。テーマ色より優先。 */
 		color?: string;
+		/** 幅。数値は px として扱う。 */
+		width?: string | number | null;
+		minWidth?: string | number | null;
+		maxWidth?: string | number | null;
 		/** 番号の代わりに各ステップの icon を表示。 @default false */
 		showIcon?: boolean;
 		/** 追加インラインスタイル。 */
@@ -103,6 +108,9 @@
 		orientation = 'horizontal',
 		size = 'medium',
 		color,
+		width = null,
+		minWidth = null,
+		maxWidth = null,
 		showIcon = false,
 		customStyle = '',
 
@@ -204,12 +212,19 @@
 			.join(' ')
 	);
 
+	const widthStyle = $derived(getStyleFromNumber(width));
+	const minWidthStyle = $derived(getStyleFromNumber(minWidth));
+	const maxWidthStyle = $derived(getStyleFromNumber(maxWidth));
+
 	const rootStyle = $derived(
 		[
 			// color 指定時は強調色を上書き。リングは半透明の色なので同率で合成した値も注入する。
 			color ? `--internal-step-nav-accent:${color}` : '',
 			color ? `--internal-step-nav-ring-color:color-mix(in srgb, ${color} 40%, transparent)` : '',
-			customStyle
+			customStyle,
+			widthStyle ? `width: ${widthStyle}` : '',
+			minWidthStyle ? `min-width: ${minWidthStyle}` : '',
+			maxWidthStyle ? `max-width: ${maxWidthStyle}` : ''
 		]
 			.filter(Boolean)
 			.join('; ')
@@ -504,14 +519,12 @@ button.step-nav__step {
 
 /* upcoming: 淡いアウトライン + 番号 */
 .step-nav__step--upcoming .step-nav__marker {
-  background: var(--svelte-ui-surface-color);
   color: var(--svelte-ui-step-nav-upcoming-text-color);
   border: var(--svelte-ui-step-nav-marker-border-width) solid var(--svelte-ui-step-nav-upcoming-marker-color);
 }
 
 /* in-progress: primary アウトライン + 番号 */
 .step-nav__step--in-progress .step-nav__marker {
-  background: var(--svelte-ui-surface-color);
   color: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
   border: var(--svelte-ui-step-nav-marker-border-width) solid var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
 }
@@ -525,14 +538,15 @@ button.step-nav__step {
 
 /* error: error 色 + error アイコン（進捗軸を上書き） */
 .step-nav__step--error .step-nav__marker {
-  background: var(--svelte-ui-surface-color);
   color: var(--svelte-ui-step-nav-error-color);
   border: var(--svelte-ui-step-nav-marker-border-width) solid var(--svelte-ui-step-nav-error-color);
 }
 
-/* 表示中: 外周リング（フォーカス表示とは別レイヤー・別色） */
+/* 表示中: 外周リング（フォーカス表示とは別レイヤー・別色）。
+   リングとマーカーの隙間に背景が透けるよう、box-shadow ではなく outline で描く */
 .step-nav__step--viewing .step-nav__marker {
-  box-shadow: 0 0 0 var(--svelte-ui-step-nav-ring-offset) var(--svelte-ui-surface-color), 0 0 0 calc(var(--svelte-ui-step-nav-ring-offset) + var(--svelte-ui-step-nav-ring-width)) var(--internal-step-nav-ring-color, var(--svelte-ui-step-nav-ring-color));
+  outline: var(--svelte-ui-step-nav-ring-width) solid var(--internal-step-nav-ring-color, var(--svelte-ui-step-nav-ring-color));
+  outline-offset: var(--svelte-ui-step-nav-ring-offset);
 }
 
 /* ---- ラベル/説明 ---- */

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

@@ -31,6 +31,10 @@ export type StepNavProps = {
     size?: ComponentSize;
     /** 現在／完了ステップの強調色。テーマ色より優先。 */
     color?: string;
+    /** 幅。数値は px として扱う。 */
+    width?: string | number | null;
+    minWidth?: string | number | null;
+    maxWidth?: string | number | null;
     /** 番号の代わりに各ステップの icon を表示。 @default false */
     showIcon?: boolean;
     /** 追加インラインスタイル。 */

package/dist/components/Textarea.svelte

@@ -469,13 +469,18 @@
 		const width = rect.width;
 		if (!height || !width) return;
 
+		// 箱（ルート）は padding を持つため、textarea の実寸に padding 分を足す
+		const rootStyle = getComputedStyle(containerRef);
+		const paddingY = parseFloat(rootStyle.paddingTop) + parseFloat(rootStyle.paddingBottom);
+		const paddingX = parseFloat(rootStyle.paddingLeft) + parseFloat(rootStyle.paddingRight);
+
 		// コンポーネント全体の高さは textarea に合わせる
-		containerRef.style.height = `${height}px`;
+		containerRef.style.height = `${height + paddingY}px`;
 
 		// 幅は、初期状態では width プロップを優先し、
 		// ユーザーがリサイズ（ResizeObserver 経由）したあとは textarea の幅で上書きする
 		if (forceWidth || !widthStyle) {
-			containerRef.style.width = `${width}px`;
+			containerRef.style.width = `${width + paddingX}px`;
 		}
 
 		// display-text / link-text はコンテナにフィットさせる
@@ -549,6 +554,27 @@
 	);
 	const maxHeightStyle = $derived(getStyleFromNumber(maxHeight));
 	const widthStyle = $derived(getStyleFromNumber(width));
+	// 箱（ルート）は border-box、内側のテキスト層は padding を持たないので縦 padding を差し引く
+	const innerMinHeightStyle = $derived(
+		`calc(${minHeightStyle} - var(--internal-textarea-vertical-padding))`
+	);
+	const innerMaxHeightStyle = $derived(
+		maxHeightStyle
+			? `calc(${maxHeightStyle} - var(--internal-textarea-vertical-padding))`
+			: undefined
+	);
+	// アイコンの領域は customStyle で消されないよう、customStyle より後ろに指定する。
+	// style: ディレクティブは style 属性に勝つため、幅・最大高さも同じ文字列に混ぜる
+	const boxStyle = $derived(
+		[
+			customStyle,
+			clearable ? 'padding-right: var(--svelte-ui-textarea-icon-space)' : '',
+			widthStyle ? `width: ${widthStyle}` : '',
+			!inline && maxHeightStyle ? `max-height: ${maxHeightStyle}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <div
@@ -567,16 +593,14 @@
 	class:textarea--readonly={readonly}
 	class:textarea--focused={isFocused}
 	data-testid="textarea"
-	style:width={widthStyle}
-	style:max-height={!inline ? maxHeightStyle : undefined}
+	style={boxStyle}
 >
 	<div
 		bind:this={displayTextRef}
 		class="textarea__display-text"
 		class:textarea__display-text--placeholder={!hasDisplayValue}
-		style:min-height={minHeightStyle}
-		style:max-height={maxHeightStyle}
-		style={customStyle}
+		style:min-height={innerMinHeightStyle}
+		style:max-height={innerMaxHeightStyle}
 	>
 		{@html displayValue}
 	</div>
@@ -599,8 +623,7 @@
 			{spellcheck}
 			{autocapitalize}
 			class:resizable
-			style:min-height={minHeightStyle}
-			style={customStyle}
+			style:min-height={innerMinHeightStyle}
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}
@@ -634,9 +657,8 @@
 		<div
 			bind:this={linkTextRef}
 			class="textarea__link-text"
-			style:min-height={minHeightStyle}
-			style:max-height={maxHeightStyle}
-			style={customStyle}
+			style:min-height={innerMinHeightStyle}
+			style:max-height={innerMaxHeightStyle}
 		>
 			{@html linkHtmlValue}
 		</div>
@@ -670,6 +692,13 @@
 		width: auto;
 		max-width: 100%;
 		overflow: hidden;
+		--internal-textarea-vertical-padding: calc(
+			var(--svelte-ui-textarea-min-height) - var(--svelte-ui-textarea-line-height)
+		);
+		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-radius: var(--svelte-ui-textarea-border-radius);
 
 		&.textarea--full-height {
 			height: 100%;
@@ -684,9 +713,8 @@
 		height: 100%;
 		padding: inherit;
 		border: none;
-		border-radius: var(--svelte-ui-textarea-border-radius);
-		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-radius: inherit;
+		background-color: transparent;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
@@ -700,11 +728,11 @@
 	textarea {
 		width: 100%;
 		height: auto;
-		min-height: var(--svelte-ui-textarea-min-height);
-		padding: var(--svelte-ui-textarea-padding);
+		min-height: var(--svelte-ui-textarea-line-height);
+		padding: 0;
 		background-color: transparent;
 		border: none;
-		border-radius: var(--svelte-ui-textarea-border-radius);
+		border-radius: inherit;
 		font-family: inherit;
 		font-size: inherit;
 		font-weight: inherit;
@@ -724,10 +752,10 @@
 	.textarea__link-text {
 		display: block;
 		width: 100%;
-		min-height: var(--svelte-ui-textarea-min-height);
-		padding: var(--svelte-ui-textarea-padding);
-		background: inherit;
-		border: inherit;
+		min-height: var(--svelte-ui-textarea-line-height);
+		padding: 0;
+		background: transparent;
+		border: none;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
@@ -774,6 +802,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
+		padding: inherit;
 		pointer-events: none;
 		z-index: 1;
 	}
@@ -818,7 +847,11 @@
 	/* =============================================
  * フォーカス効果バリエーション
  * ============================================= */
-	.textarea--focus-outline textarea:focus {
+	textarea:focus {
+		outline: none;
+	}
+
+	.textarea--focus-outline.textarea--focused .textarea__wrapper {
 		outline: var(--svelte-ui-focus-outline-inner);
 		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
 	}
@@ -827,14 +860,6 @@
 		background: var(--svelte-ui-hover-overlay);
 	}
 
-	.textarea--focus-background textarea:focus {
-		outline: none;
-	}
-
-	.textarea--focus-none textarea:focus {
-		outline: none;
-	}
-
 	/* =============================================
  * 状態管理（disabled, readonly等）
  * ============================================= */
@@ -853,7 +878,7 @@
 	/* =============================================
 	 * 表示切り替え
 	 * ============================================= */
-	/* 非フォーカス時: textarea要素自体を不可視化（枠線・背景はラッパーにあるため display-text のみ表示） */
+	/* 非フォーカス時: textarea要素自体を不可視化（枠線・背景はルートにあるため display-text のみ表示） */
 	.textarea:not(.textarea--focused) textarea {
 		opacity: 0;
 	}
@@ -868,14 +893,6 @@
 	 * 機能バリエーション
 	 * ============================================= */
 	/* clearable */
-	.textarea--clearable {
-		textarea,
-		.textarea__display-text,
-		.textarea__link-text {
-			padding-right: var(--svelte-ui-textarea-icon-space);
-		}
-	}
-
 	@media (hover: hover) {
 		.textarea--clearable:hover .textarea__clear-button {
 			opacity: 1;
@@ -913,29 +930,22 @@
  * デザインバリエーション
  * ============================================= */
 	/* rounded */
-	.textarea--rounded:not(.textarea--inline) .textarea__wrapper,
-	.textarea--rounded:not(.textarea--inline) textarea {
+	.textarea--rounded:not(.textarea--inline) {
 		border-radius: var(--svelte-ui-textarea-border-radius-rounded);
 	}
 
 	/* inline */
 	.textarea--inline {
+		--internal-textarea-vertical-padding: 0px;
+		padding: 0;
+		background-color: transparent;
+		box-shadow: none;
+		border-radius: 0;
+
 		.textarea__display-text,
 		.textarea__link-text,
 		textarea {
 			min-height: auto;
-			padding-top: inherit;
-			padding-bottom: inherit;
-			padding-left: inherit;
-			padding-right: inherit;
-		}
-
-		.textarea__wrapper,
-		textarea {
-			padding: inherit;
-			background: transparent;
-			box-shadow: none;
-			border-radius: 0;
 		}
 
 		textarea {

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