@14ch/svelte-ui 0.0.68 → 0.0.70

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

@@ -1,17 +1,16 @@
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
-import type { Option } from '../types/options';
-import type { HTMLSelectAttributes } from 'svelte/elements';
-export type SelectProps = Omit<HTMLSelectAttributes, 'value' | 'id' | 'tabindex' | 'size' | 'onfocus' | 'onblur' | 'onkeydown' | 'onkeyup' | 'onclick' | 'onmousedown' | 'onmouseup' | 'onmouseenter' | 'onmouseleave' | 'onmouseover' | 'onmouseout' | 'oncontextmenu' | 'onauxclick' | 'ontouchstart' | 'ontouchend' | 'ontouchmove' | 'ontouchcancel' | 'onpointerdown' | 'onpointerup' | 'onpointerenter' | 'onpointerleave' | 'onpointermove' | 'onpointercancel' | 'onchange'> & {
+import type { Option, OptionValue } from '../types/options';
+import type { PopupPosition } from '../types/propOptions';
+export type SelectProps = {
     name?: string;
-    value: string | number | null | undefined;
-    /** `{ label, value, disabled? }[]` */
-    options: Option[];
+    /** Supports `bind:value`. */
+    value: OptionValue;
+    /** `{ label, value, disabled? }[]` or `'separator'` for dividers. */
+    options: (Option | 'separator')[];
     id?: string | null;
     ariaLabel?: string;
     tabindex?: number | null;
     placeholder?: string;
-    /** Number of visible rows (multi-line mode). @default null */
-    size?: number | null;
     /** Renders inline. @default false */
     inline?: boolean;
     /** @default 'outline' */
@@ -21,6 +20,8 @@ export type SelectProps = Omit<HTMLSelectAttributes, 'value' | 'id' | 'tabindex'
     customStyle?: string;
     disabled?: boolean;
     required?: boolean;
+    /** @default 'bottom-left' */
+    position?: PopupPosition;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -44,7 +45,7 @@ export type SelectProps = Omit<HTMLSelectAttributes, 'value' | 'id' | 'tabindex'
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: BivariantValueHandler<string | number | null | undefined>;
+    onchange?: BivariantValueHandler<OptionValue>;
 };
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

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