@14ch/svelte-ui 0.0.40 → 0.0.42

package/dist/components/MultiSelect.svelte

@@ -168,7 +168,9 @@
 			{#if selectedLabels.length > 0}
 				<span class="multi-select__display-text">
 					{#each selectedLabels as label, i}
-						<span>{label}{#if i < selectedLabels.length - 1},{/if}</span>
+						<span
+							>{label}{#if i < selectedLabels.length - 1},{/if}</span
+						>
 					{/each}
 				</span>
 			{:else if placeholder}
@@ -234,7 +236,7 @@
   width: 100%;
   min-height: var(--svelte-ui-select-height);
   padding: var(--svelte-ui-select-padding);
-  padding-right: 0;
+  padding-right: var(--svelte-ui-select-icon-space);
   background: transparent;
   border: none;
   font-family: inherit;
@@ -258,7 +260,6 @@
   align-self: stretch;
   display: flex;
   align-items: center;
-  padding-right: var(--svelte-ui-select-icon-space);
 }
 
 .multi-select__display-text {
@@ -287,6 +288,7 @@
   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;
   font-size: var(--svelte-ui-select-dropdown-icon-size);
@@ -342,7 +344,7 @@
  * ============================================= */
 .multi-select.multi-select--inline .multi-select__trigger {
   padding: inherit;
-  padding-right: 0;
+  padding-right: var(--svelte-ui-input-icon-space-inline);
   background: transparent;
   border: none;
   border-radius: 0;
@@ -354,12 +356,13 @@
   align-self: auto;
   align-items: flex-start;
   min-height: 1lh;
-  padding-right: var(--svelte-ui-input-icon-space-inline);
 }
 .multi-select.multi-select--inline .multi-select__dropdown-icon {
+  top: calc((1lh - 32px) / 2);
   right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  margin-right: calc(0px - var(--svelte-ui-input-icon-space-inline));
 }
 
 /* =============================================

package/dist/components/Textarea.svelte

@@ -4,7 +4,7 @@
 	import IconButton from './IconButton.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import { t } from '../i18n';
-	import { convertToHtml, convertToHtmlWithLink } from '../utils/formatText';
+	import { escapeHtml, convertToLink } from '../utils/formatText';
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import type {
@@ -475,21 +475,14 @@
 		value !== null && value !== undefined && !(typeof value === 'string' && value === '')
 	);
 
-	// HTML表示用の値（autoResize時の高さ調整用）
+	// HTML表示用の値（pre-wrap で表示するため HTML エスケープのみ行う）
 	const displayValue = $derived.by(() => {
 		const normalizedValue = value ?? '';
 		if (normalizedValue !== '') {
-			const converted = convertToHtml(normalizedValue);
-			const html = String(converted ?? '');
-			// 最後の行が空だったら空白を追加（高さ調整のため）
-			const lines = html.split('<br />');
-			if (lines.length > 0 && lines[lines.length - 1] === '') {
-				return html + '&nbsp;';
-			}
-			return html;
+			return escapeHtml(normalizedValue);
 		}
 		// 値が空のとき: placeholder があればその幅・高さを確保して表示、なければ inline 時のみ &nbsp;
-		return placeholder ? convertToHtml(placeholder) : inline ? '&nbsp;' : '';
+		return placeholder ? escapeHtml(placeholder) : inline ? '&nbsp;' : '';
 	});
 
 	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
@@ -498,8 +491,7 @@
 		if (!linkify || normalizedValue === '') {
 			return '';
 		}
-		const result = convertToHtmlWithLink(normalizedValue);
-		return String(result ?? '');
+		return convertToLink(escapeHtml(normalizedValue));
 	});
 
 	// --------------------------------
@@ -631,6 +623,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		overflow: hidden;
 
 		&.textarea--full-height {
 			height: 100%;
@@ -699,6 +692,7 @@
 		transition: none;
 		overflow-y: auto;
 		overflow-x: hidden;
+		max-height: 100%;
 
 		&::before {
 			content: '';
@@ -709,13 +703,15 @@
 		}
 	}
 
-	/* display-text: スクロールバーの幅を確保しつつ透明にする（textarea と幅を一致させる） */
+	/* display-text: textarea の white-space: pre-wrap に合わせて空白・改行を同じルールで扱う */
 	.textarea__display-text {
+		white-space: pre-wrap;
 		scrollbar-color: transparent transparent;
 	}
 
-	/* link-text: 絶対配置のオーバーレイなのでスクロールバーを完全に非表示 */
+	/* link-text: 絶対配置オーバーレイ。pre-wrap で textarea と空白・改行を同じルールで扱う */
 	.textarea__link-text {
+		white-space: pre-wrap;
 		scrollbar-width: none;
 
 		&::-webkit-scrollbar {

package/dist/utils/formatText.js

@@ -18,7 +18,7 @@ export const convertToHtml = (value) => {
 };
 export const convertToLink = (str) => {
     let text = str;
-    text = text.replace(/((http|https|ftp):\/\/[\w?=&./#~%-;,*!$'():@+]+(?![\w\s?&./#~%";,=*'()-]*>))/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a> ');
+    text = text.replace(/((http|https|ftp):\/\/[\w?=&./#~%-;,*!$'():@+]+(?![\w\s?&./#~%";,=*'()-]*>))/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
     return text;
 };
 export const escapeHtml = (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.40",
+	"version": "0.0.42",
 	"type": "module",
 	"keywords": [
 		"svelte",