@14ch/svelte-ui 0.0.16 → 0.0.17

package/dist/components/Textarea.svelte

@@ -41,9 +41,9 @@
 		maxHeight?: string | number | null;
 		inline?: boolean;
 		focusStyle?: FocusStyle;
+		width?: string | number | null;
 		fullWidth?: boolean;
 		fullHeight?: boolean;
-		width?: string | number | null;
 		rounded?: boolean;
 		customStyle?: string;
 
@@ -127,9 +127,9 @@
 		maxHeight = null,
 		inline = false,
 		focusStyle = 'outline',
+		width = null,
 		fullWidth = false,
 		fullHeight = false,
-		width = null,
 		rounded = false,
 		customStyle = '',
 
@@ -465,6 +465,10 @@
 	// --------------------------------
 	// display & link value
 	// --------------------------------
+	const hasDisplayValue = $derived(
+		value !== null && value !== undefined && !(typeof value === 'string' && value === '')
+	);
+
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const displayValue = $derived.by(() => {
 		const normalizedValue = value ?? '';
@@ -477,14 +481,9 @@
 				return html + ' ';
 			}
 			return html;
-		} else {
-			// inline かつ value が空のとき
-			// 1行分の高さを確保するためにダミーの   を入れる
-			if (inline) {
-				return ' ';
-			}
-			return '';
 		}
+		// 値が空のとき: placeholder があればその幅・高さを確保して表示、なければ inline 時のみ  
+		return placeholder ? convertToHtml(placeholder) : inline ? ' ' : '';
 	});
 
 	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
@@ -500,7 +499,12 @@
 	// --------------------------------
 	// style from number
 	// --------------------------------
-	const minHeightStyle = $derived(getStyleFromNumber(minHeight));
+	// minHeight 未指定時は rows から算出（rows を効かせる）
+	const minHeightStyle = $derived(
+		minHeight != null
+			? getStyleFromNumber(minHeight)
+			: `calc(${rows - 1} * var(--svelte-ui-textarea-line-height) + var(--svelte-ui-textarea-min-height))`
+	);
 	const maxHeightStyle = $derived(getStyleFromNumber(maxHeight));
 	const widthStyle = $derived(getStyleFromNumber(width));
 </script>
@@ -525,6 +529,7 @@
 	<div
 		bind:this={displayTextRef}
 		class="textarea__display-text"
+		class:textarea__display-text--placeholder={!hasDisplayValue}
 		style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
 	>
 		{@html displayValue}
@@ -629,6 +634,9 @@
 		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);
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
@@ -644,8 +652,7 @@
 		height: auto;
 		min-height: var(--svelte-ui-textarea-min-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);
+		background-color: transparent;
 		border: none;
 		border-radius: var(--svelte-ui-textarea-border-radius);
 		font-size: inherit;
@@ -678,7 +685,6 @@
 		word-break: inherit;
 		opacity: 1;
 		transition: none;
-		cursor: text !important;
 		overflow-y: auto;
 		overflow-x: hidden;
 		scrollbar-width: none; /* Firefox */
@@ -734,7 +740,8 @@
  * プレースホルダー・テキスト表示
  * ============================================= */
 	textarea::placeholder,
-	.textarea__display-text:empty::before {
+	.textarea__display-text:empty::before,
+	.textarea__display-text--placeholder {
 		color: var(--svelte-ui-textarea-placeholder-color);
 	}
 
@@ -746,8 +753,11 @@
 		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
 	}
 
-	.textarea--focus-background textarea:focus {
+	.textarea--focus-background.textarea--focused .textarea__wrapper {
 		background: var(--svelte-ui-hover-overlay);
+	}
+
+	.textarea--focus-background textarea:focus {
 		outline: none;
 	}
 
@@ -758,35 +768,24 @@
 	/* =============================================
  * 状態管理（disabled, readonly等）
  * ============================================= */
-	.textarea--disabled {
-		opacity: var(--svelte-ui-input-disabled-opacity);
+	.textarea--readonly textarea {
+		cursor: default;
 		pointer-events: none;
 	}
 
-	.textarea--readonly {
+	.textarea--disabled {
+		opacity: var(--svelte-ui-input-disabled-opacity);
 		textarea {
-			cursor: default;
+			cursor: not-allowed;
 		}
 	}
 
-	textarea:disabled {
-		opacity: var(--svelte-ui-button-disabled-opacity);
-		cursor: not-allowed;
-	}
-
-	textarea[readonly] {
-		/* Match Input behavior: readonly fields keep the same background,
-		 * but use a default cursor to indicate non-editable. */
-		cursor: default;
-	}
-
 	/* =============================================
 	 * 表示切り替え
 	 * ============================================= */
+	/* 非フォーカス時: textarea要素自体を不可視化（枠線・背景はラッパーにあるため display-text のみ表示） */
 	.textarea:not(.textarea--focused) textarea {
-		color: transparent;
-		caret-color: transparent;
-		text-shadow: none;
+		opacity: 0;
 	}
 
 	.textarea--focused {
@@ -844,10 +843,9 @@
  * デザインバリエーション
  * ============================================= */
 	/* rounded */
-	.textarea--rounded:not(.textarea--inline) {
-		textarea {
-			border-radius: var(--svelte-ui-textarea-border-radius-rounded);
-		}
+	.textarea--rounded:not(.textarea--inline) .textarea__wrapper,
+	.textarea--rounded:not(.textarea--inline) textarea {
+		border-radius: var(--svelte-ui-textarea-border-radius-rounded);
 	}
 
 	/* inline */
@@ -861,11 +859,15 @@
 			padding-left: inherit;
 		}
 
+		.textarea__wrapper,
 		textarea {
 			padding: inherit;
 			background: transparent;
 			box-shadow: none;
 			border-radius: 0;
+		}
+
+		textarea {
 			font-size: inherit;
 			font-weight: inherit;
 			color: inherit;

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

@@ -19,9 +19,9 @@ export type TextareaProps = {
     maxHeight?: string | number | null;
     inline?: boolean;
     focusStyle?: FocusStyle;
+    width?: string | number | null;
     fullWidth?: boolean;
     fullHeight?: boolean;
-    width?: string | number | null;
     rounded?: boolean;
     customStyle?: string;
     clearButtonAriaLabel?: string;

package/dist/i18n/index.d.ts

@@ -27,6 +27,15 @@ export declare const TRANSLATIONS: {
             readonly optionsList: "Options list";
             readonly noOptions: "No matching options";
         };
+        readonly colorpicker: {
+            readonly chooseColor: "Choose color";
+        };
+        readonly select: {
+            readonly accessibleName: "Select option";
+        };
+        readonly slider: {
+            readonly accessibleName: "Slider";
+        };
         readonly input: {
             readonly clear: "Clear";
             readonly show_password: "Show password";
@@ -36,6 +45,9 @@ export declare const TRANSLATIONS: {
             readonly increment: "Increment";
             readonly decrement: "Decrement";
         };
+        readonly popupMenuButton: {
+            readonly openMenu: "Open menu";
+        };
         readonly pagination: {
             readonly prevPage: "Go to previous page";
             readonly nextPage: "Go to next page";
@@ -70,6 +82,15 @@ export declare const TRANSLATIONS: {
             readonly optionsList: "オプション一覧";
             readonly noOptions: "該当するオプションがありません";
         };
+        readonly colorpicker: {
+            readonly chooseColor: "色を選択";
+        };
+        readonly select: {
+            readonly accessibleName: "選択";
+        };
+        readonly slider: {
+            readonly accessibleName: "スライダー";
+        };
         readonly input: {
             readonly clear: "クリア";
             readonly show_password: "パスワードを表示";
@@ -79,6 +100,9 @@ export declare const TRANSLATIONS: {
             readonly increment: "増やす";
             readonly decrement: "減らす";
         };
+        readonly popupMenuButton: {
+            readonly openMenu: "メニューを開く";
+        };
         readonly pagination: {
             readonly prevPage: "前のページへ移動";
             readonly nextPage: "次のページへ移動";
@@ -113,6 +137,15 @@ export declare const TRANSLATIONS: {
             readonly optionsList: "Liste des options";
             readonly noOptions: "Aucune option correspondante";
         };
+        readonly colorpicker: {
+            readonly chooseColor: "Choisir la couleur";
+        };
+        readonly select: {
+            readonly accessibleName: "Choisir une option";
+        };
+        readonly slider: {
+            readonly accessibleName: "Curseur";
+        };
         readonly input: {
             readonly clear: "Effacer";
             readonly show_password: "Afficher le mot de passe";
@@ -122,6 +155,9 @@ export declare const TRANSLATIONS: {
             readonly increment: "Incrémenter";
             readonly decrement: "Décrémenter";
         };
+        readonly popupMenuButton: {
+            readonly openMenu: "Ouvrir le menu";
+        };
         readonly pagination: {
             readonly prevPage: "Aller à la page précédente";
             readonly nextPage: "Aller à la page suivante";
@@ -156,6 +192,15 @@ export declare const TRANSLATIONS: {
             readonly optionsList: "Optionsliste";
             readonly noOptions: "Keine passenden Optionen";
         };
+        readonly colorpicker: {
+            readonly chooseColor: "Farbe wählen";
+        };
+        readonly select: {
+            readonly accessibleName: "Option auswählen";
+        };
+        readonly slider: {
+            readonly accessibleName: "Schieberegler";
+        };
         readonly input: {
             readonly clear: "Löschen";
             readonly show_password: "Passwort anzeigen";
@@ -165,6 +210,9 @@ export declare const TRANSLATIONS: {
             readonly increment: "Erhöhen";
             readonly decrement: "Verringern";
         };
+        readonly popupMenuButton: {
+            readonly openMenu: "Menü öffnen";
+        };
         readonly pagination: {
             readonly prevPage: "Zur vorherigen Seite gehen";
             readonly nextPage: "Zur nächsten Seite gehen";
@@ -199,6 +247,15 @@ export declare const TRANSLATIONS: {
             readonly optionsList: "Lista de opciones";
             readonly noOptions: "No hay opciones coincidentes";
         };
+        readonly colorpicker: {
+            readonly chooseColor: "Elegir color";
+        };
+        readonly select: {
+            readonly accessibleName: "Seleccionar opción";
+        };
+        readonly slider: {
+            readonly accessibleName: "Control deslizante";
+        };
         readonly input: {
             readonly clear: "Limpiar";
             readonly show_password: "Mostrar contraseña";
@@ -208,6 +265,9 @@ export declare const TRANSLATIONS: {
             readonly increment: "Incrementar";
             readonly decrement: "Decrementar";
         };
+        readonly popupMenuButton: {
+            readonly openMenu: "Abrir menú";
+        };
         readonly pagination: {
             readonly prevPage: "Ir a la página anterior";
             readonly nextPage: "Ir a la página siguiente";
@@ -242,6 +302,15 @@ export declare const TRANSLATIONS: {
             readonly optionsList: "选项列表";
             readonly noOptions: "没有匹配的选项";
         };
+        readonly colorpicker: {
+            readonly chooseColor: "选择颜色";
+        };
+        readonly select: {
+            readonly accessibleName: "选择";
+        };
+        readonly slider: {
+            readonly accessibleName: "滑块";
+        };
         readonly input: {
             readonly clear: "清除";
             readonly show_password: "显示密码";
@@ -251,6 +320,9 @@ export declare const TRANSLATIONS: {
             readonly increment: "增加";
             readonly decrement: "减少";
         };
+        readonly popupMenuButton: {
+            readonly openMenu: "打开菜单";
+        };
         readonly pagination: {
             readonly prevPage: "转到上一页";
             readonly nextPage: "转到下一页";

package/dist/i18n/locales/de.d.ts

@@ -25,6 +25,15 @@ export declare const de: {
         readonly optionsList: "Optionsliste";
         readonly noOptions: "Keine passenden Optionen";
     };
+    readonly colorpicker: {
+        readonly chooseColor: "Farbe wählen";
+    };
+    readonly select: {
+        readonly accessibleName: "Option auswählen";
+    };
+    readonly slider: {
+        readonly accessibleName: "Schieberegler";
+    };
     readonly input: {
         readonly clear: "Löschen";
         readonly show_password: "Passwort anzeigen";
@@ -34,6 +43,9 @@ export declare const de: {
         readonly increment: "Erhöhen";
         readonly decrement: "Verringern";
     };
+    readonly popupMenuButton: {
+        readonly openMenu: "Menü öffnen";
+    };
     readonly pagination: {
         readonly prevPage: "Zur vorherigen Seite gehen";
         readonly nextPage: "Zur nächsten Seite gehen";

package/dist/i18n/locales/de.js

@@ -25,6 +25,15 @@ export const de = {
         optionsList: 'Optionsliste',
         noOptions: 'Keine passenden Optionen'
     },
+    colorpicker: {
+        chooseColor: 'Farbe wählen'
+    },
+    select: {
+        accessibleName: 'Option auswählen'
+    },
+    slider: {
+        accessibleName: 'Schieberegler'
+    },
     input: {
         clear: 'Löschen',
         show_password: 'Passwort anzeigen',
@@ -34,6 +43,9 @@ export const de = {
         increment: 'Erhöhen',
         decrement: 'Verringern'
     },
+    popupMenuButton: {
+        openMenu: 'Menü öffnen'
+    },
     pagination: {
         prevPage: 'Zur vorherigen Seite gehen',
         nextPage: 'Zur nächsten Seite gehen',

package/dist/i18n/locales/en.d.ts

@@ -25,6 +25,15 @@ export declare const en: {
         readonly optionsList: "Options list";
         readonly noOptions: "No matching options";
     };
+    readonly colorpicker: {
+        readonly chooseColor: "Choose color";
+    };
+    readonly select: {
+        readonly accessibleName: "Select option";
+    };
+    readonly slider: {
+        readonly accessibleName: "Slider";
+    };
     readonly input: {
         readonly clear: "Clear";
         readonly show_password: "Show password";
@@ -34,6 +43,9 @@ export declare const en: {
         readonly increment: "Increment";
         readonly decrement: "Decrement";
     };
+    readonly popupMenuButton: {
+        readonly openMenu: "Open menu";
+    };
     readonly pagination: {
         readonly prevPage: "Go to previous page";
         readonly nextPage: "Go to next page";

package/dist/i18n/locales/en.js

@@ -25,6 +25,15 @@ export const en = {
         optionsList: 'Options list',
         noOptions: 'No matching options'
     },
+    colorpicker: {
+        chooseColor: 'Choose color'
+    },
+    select: {
+        accessibleName: 'Select option'
+    },
+    slider: {
+        accessibleName: 'Slider'
+    },
     input: {
         clear: 'Clear',
         show_password: 'Show password',
@@ -34,6 +43,9 @@ export const en = {
         increment: 'Increment',
         decrement: 'Decrement'
     },
+    popupMenuButton: {
+        openMenu: 'Open menu'
+    },
     pagination: {
         prevPage: 'Go to previous page',
         nextPage: 'Go to next page',

package/dist/i18n/locales/es.d.ts

@@ -25,6 +25,15 @@ export declare const es: {
         readonly optionsList: "Lista de opciones";
         readonly noOptions: "No hay opciones coincidentes";
     };
+    readonly colorpicker: {
+        readonly chooseColor: "Elegir color";
+    };
+    readonly select: {
+        readonly accessibleName: "Seleccionar opción";
+    };
+    readonly slider: {
+        readonly accessibleName: "Control deslizante";
+    };
     readonly input: {
         readonly clear: "Limpiar";
         readonly show_password: "Mostrar contraseña";
@@ -34,6 +43,9 @@ export declare const es: {
         readonly increment: "Incrementar";
         readonly decrement: "Decrementar";
     };
+    readonly popupMenuButton: {
+        readonly openMenu: "Abrir menú";
+    };
     readonly pagination: {
         readonly prevPage: "Ir a la página anterior";
         readonly nextPage: "Ir a la página siguiente";

package/dist/i18n/locales/es.js

@@ -25,6 +25,15 @@ export const es = {
         optionsList: 'Lista de opciones',
         noOptions: 'No hay opciones coincidentes'
     },
+    colorpicker: {
+        chooseColor: 'Elegir color'
+    },
+    select: {
+        accessibleName: 'Seleccionar opción'
+    },
+    slider: {
+        accessibleName: 'Control deslizante'
+    },
     input: {
         clear: 'Limpiar',
         show_password: 'Mostrar contraseña',
@@ -34,6 +43,9 @@ export const es = {
         increment: 'Incrementar',
         decrement: 'Decrementar'
     },
+    popupMenuButton: {
+        openMenu: 'Abrir menú'
+    },
     pagination: {
         prevPage: 'Ir a la página anterior',
         nextPage: 'Ir a la página siguiente',

package/dist/i18n/locales/fr.d.ts

@@ -25,6 +25,15 @@ export declare const fr: {
         readonly optionsList: "Liste des options";
         readonly noOptions: "Aucune option correspondante";
     };
+    readonly colorpicker: {
+        readonly chooseColor: "Choisir la couleur";
+    };
+    readonly select: {
+        readonly accessibleName: "Choisir une option";
+    };
+    readonly slider: {
+        readonly accessibleName: "Curseur";
+    };
     readonly input: {
         readonly clear: "Effacer";
         readonly show_password: "Afficher le mot de passe";
@@ -34,6 +43,9 @@ export declare const fr: {
         readonly increment: "Incrémenter";
         readonly decrement: "Décrémenter";
     };
+    readonly popupMenuButton: {
+        readonly openMenu: "Ouvrir le menu";
+    };
     readonly pagination: {
         readonly prevPage: "Aller à la page précédente";
         readonly nextPage: "Aller à la page suivante";

package/dist/i18n/locales/fr.js

@@ -25,6 +25,15 @@ export const fr = {
         optionsList: 'Liste des options',
         noOptions: 'Aucune option correspondante'
     },
+    colorpicker: {
+        chooseColor: 'Choisir la couleur'
+    },
+    select: {
+        accessibleName: 'Choisir une option'
+    },
+    slider: {
+        accessibleName: 'Curseur'
+    },
     input: {
         clear: 'Effacer',
         show_password: 'Afficher le mot de passe',
@@ -34,6 +43,9 @@ export const fr = {
         increment: 'Incrémenter',
         decrement: 'Décrémenter'
     },
+    popupMenuButton: {
+        openMenu: 'Ouvrir le menu'
+    },
     pagination: {
         prevPage: 'Aller à la page précédente',
         nextPage: 'Aller à la page suivante',

package/dist/i18n/locales/ja.d.ts

@@ -25,6 +25,15 @@ export declare const ja: {
         readonly optionsList: "オプション一覧";
         readonly noOptions: "該当するオプションがありません";
     };
+    readonly colorpicker: {
+        readonly chooseColor: "色を選択";
+    };
+    readonly select: {
+        readonly accessibleName: "選択";
+    };
+    readonly slider: {
+        readonly accessibleName: "スライダー";
+    };
     readonly input: {
         readonly clear: "クリア";
         readonly show_password: "パスワードを表示";
@@ -34,6 +43,9 @@ export declare const ja: {
         readonly increment: "増やす";
         readonly decrement: "減らす";
     };
+    readonly popupMenuButton: {
+        readonly openMenu: "メニューを開く";
+    };
     readonly pagination: {
         readonly prevPage: "前のページへ移動";
         readonly nextPage: "次のページへ移動";

package/dist/i18n/locales/ja.js

@@ -25,6 +25,15 @@ export const ja = {
         optionsList: 'オプション一覧',
         noOptions: '該当するオプションがありません'
     },
+    colorpicker: {
+        chooseColor: '色を選択'
+    },
+    select: {
+        accessibleName: '選択'
+    },
+    slider: {
+        accessibleName: 'スライダー'
+    },
     input: {
         clear: 'クリア',
         show_password: 'パスワードを表示',
@@ -34,6 +43,9 @@ export const ja = {
         increment: '増やす',
         decrement: '減らす'
     },
+    popupMenuButton: {
+        openMenu: 'メニューを開く'
+    },
     pagination: {
         prevPage: '前のページへ移動',
         nextPage: '次のページへ移動',

package/dist/i18n/locales/zh-cn.d.ts

@@ -25,6 +25,15 @@ export declare const zhCn: {
         readonly optionsList: "选项列表";
         readonly noOptions: "没有匹配的选项";
     };
+    readonly colorpicker: {
+        readonly chooseColor: "选择颜色";
+    };
+    readonly select: {
+        readonly accessibleName: "选择";
+    };
+    readonly slider: {
+        readonly accessibleName: "滑块";
+    };
     readonly input: {
         readonly clear: "清除";
         readonly show_password: "显示密码";
@@ -34,6 +43,9 @@ export declare const zhCn: {
         readonly increment: "增加";
         readonly decrement: "减少";
     };
+    readonly popupMenuButton: {
+        readonly openMenu: "打开菜单";
+    };
     readonly pagination: {
         readonly prevPage: "转到上一页";
         readonly nextPage: "转到下一页";

package/dist/i18n/locales/zh-cn.js

@@ -25,6 +25,15 @@ export const zhCn = {
         optionsList: '选项列表',
         noOptions: '没有匹配的选项'
     },
+    colorpicker: {
+        chooseColor: '选择颜色'
+    },
+    select: {
+        accessibleName: '选择'
+    },
+    slider: {
+        accessibleName: '滑块'
+    },
     input: {
         clear: '清除',
         show_password: '显示密码',
@@ -34,6 +43,9 @@ export const zhCn = {
         increment: '增加',
         decrement: '减少'
     },
+    popupMenuButton: {
+        openMenu: '打开菜单'
+    },
     pagination: {
         prevPage: '转到上一页',
         nextPage: '转到下一页',

package/dist/types/menuItem.d.ts

@@ -5,4 +5,5 @@ export type MenuItem = {
     icon?: string;
     matchingPath?: string[];
     strictMatch?: boolean;
+    disabled?: boolean;
 };