@14ch/svelte-ui 0.0.5 → 0.0.7

package/dist/assets/styles/variables.scss

@@ -341,6 +341,25 @@
 	--svelte-ui-iconbutton-hover-overlay: var(--svelte-ui-hover-overlay);
 	--svelte-ui-iconbutton-focus-color: var(--svelte-ui-focus-color);
 
+	/* SegmentedControl */
+	--svelte-ui-segmented-control-base-padding: 4px;
+	--svelte-ui-segmented-control-base-border-radius: var(--svelte-ui-border-radius);
+	--svelte-ui-segmented-control-gap: 4px;
+	--svelte-ui-segmented-control-button-radius: calc(var(--svelte-ui-border-radius) - 1px);
+	--svelte-ui-segmented-control-button-height-sm: 24px;
+	--svelte-ui-segmented-control-button-height: 32px;
+	--svelte-ui-segmented-control-button-height-lg: 40px;
+	--svelte-ui-segmented-control-font-size-sm: 12px;
+	--svelte-ui-segmented-control-font-size: 14px;
+	--svelte-ui-segmented-control-font-size-lg: 16px;
+	--svelte-ui-segmented-control-button-padding-sm: 4px 8px;
+	--svelte-ui-segmented-control-button-padding: 6px 12px;
+	--svelte-ui-segmented-control-button-padding-lg: 8px 16px;
+	--svelte-ui-segmented-control-base-bg: var(--svelte-ui-surface-accent-color);
+	--svelte-ui-segmented-control-selected-bg: var(--svelte-ui-primary-color);
+	--svelte-ui-segmented-control-selected-text-color: var(--svelte-ui-text-on-filled-color);
+	--svelte-ui-segmented-control-hover-overlay: var(--svelte-ui-hover-overlay);
+
 	/* Input */
 	--svelte-ui-input-height: var(--svelte-ui-form-height);
 	--svelte-ui-input-padding: var(--svelte-ui-form-padding);
@@ -490,7 +509,7 @@
 	/* ColorPicker */
 	--svelte-ui-colorpicker-trigger-size: 28px;
 	--svelte-ui-colorpicker-text-padding-left: 40px;
-	--svelte-ui-colorpicker-trigger-border-radius: calc(var(--svelte-ui-border-radius) - 2px);
+	--svelte-ui-colorpicker-trigger-border-radius: calc(var(--svelte-ui-border-radius) - 1px);
 	--svelte-ui-colorpicker-trigger-border-style: dashed;
 	--svelte-ui-colorpicker-trigger-border-width: 1px;
 	--svelte-ui-colorpicker-trigger-offset: 4px;

package/dist/components/Button.svelte

@@ -494,7 +494,7 @@
 	}
 
 	.button__icon {
-		margin-left: -4px;
+		margin: -12px 0 -12px -4px;
 		display: flex;
 		align-items: center;
 		justify-content: center;

package/dist/components/ColorPicker.svelte

@@ -72,7 +72,7 @@
 		...restProps
 	}: {
 		// 基本プロパティ
-		value?: string;
+		value: string;
 
 		// HTML属性系
 		id?: string;
@@ -167,10 +167,6 @@
 	// Methods
 	// =========================================================================
 
-	const handleSubmit = (event: SubmitEvent) => {
-		event?.preventDefault?.();
-		handleChange();
-	};
 
 	const handleChange = (event?: Event): void => {
 		// 空文字列の場合はそのまま処理
@@ -207,6 +203,11 @@
 		onclick?.(event);
 	};
 	const handleKeydown = (event: KeyboardEvent) => {
+		// Enterキーで色の変更を確定
+		if (event.key === 'Enter' && !disabled && !readonly) {
+			event.preventDefault();
+			handleChange();
+		}
 		if (disabled) return;
 		onkeydown(event);
 	};
@@ -361,7 +362,6 @@
 		onpointerleave={handlePointerLeave}
 		onpointermove={handlePointerMove}
 		onpointercancel={handlePointerCancel}
-		onsubmit={handleSubmit}
 		{...restProps}
 	/>
 

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 type $$ComponentProps = {
-    value?: string;
+    value: string;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     customStyle?: string;

package/dist/components/FileUploader.svelte

@@ -61,7 +61,7 @@
 		onpointerleave = () => {} // No params for type inference
 	}: {
 		// 基本プロパティ
-		value: FileList | undefined;
+		value: FileList | null | undefined;
 		multiple?: boolean;
 		maxFileSize?: number;
 		placeholder?: string;
@@ -86,7 +86,7 @@
 		removeFileAriaLabel?: string;
 
 		// 入力イベント
-		onchange?: (value: FileList | null) => void;
+		onchange?: (value: FileList | null | undefined) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -187,7 +187,7 @@
 				dt.items.add(value[i]);
 			}
 		}
-		value = dt.files.length > 0 ? dt.files : undefined;
+		value = dt.files.length > 0 ? dt.files : null;
 	};
 
 	const validateFile = (file: File): boolean => {
@@ -240,7 +240,7 @@
 	export const reset = () => {
 		if (fileInputRef) {
 			fileInputRef.value = '';
-			value = undefined;
+			value = null;
 			errorMessage = '';
 		}
 	};

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
-    value: FileList | undefined;
+    value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
     placeholder?: string;
@@ -17,7 +17,7 @@ type $$ComponentProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     removeFileAriaLabel?: string;
-    onchange?: (value: FileList | null) => void;
+    onchange?: (value: FileList | null | undefined) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/ImageUploader.svelte

@@ -66,7 +66,7 @@
 		onpointerleave = () => {} // No params for type inference
 	}: {
 		// 基本プロパティ
-		value: FileList | undefined;
+		value: FileList | null | undefined;
 		multiple?: boolean;
 		maxFileSize?: number;
 		placeholder?: string;
@@ -93,7 +93,7 @@
 		removeFileAriaLabel?: string;
 
 		// 入力イベント
-		onchange?: (value: FileList | null) => void;
+		onchange?: (value: FileList | null | undefined) => void;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference
@@ -295,7 +295,7 @@
 	export const reset = () => {
 		if (fileInputRef) {
 			fileInputRef.value = '';
-			value = undefined;
+			value = null;
 			errorMessage = '';
 			cleanupObjectUrls();
 		}

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
-    value: FileList | undefined;
+    value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
     placeholder?: string;
@@ -19,7 +19,7 @@ type $$ComponentProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     removeFileAriaLabel?: string;
-    onchange?: (value: FileList | null) => void;
+    onchange?: (value: FileList | null | undefined) => void;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/Input.svelte

@@ -28,6 +28,7 @@
 		step = null,
 		size = null,
 		autocomplete = null,
+		spellcheck = null,
 		inputAttributes,
 
 		// スタイル/レイアウト
@@ -94,11 +95,6 @@
 		// 入力イベント
 		onchange = () => {}, // No params for type inference
 		oninput = () => {}, // No params for type inference
-		onsubmit = () => {}, // No params for type inference
-
-		// IMEイベント
-		oncompositionstart = () => {}, // No params for type inference
-		oncompositionend = () => {}, // No params for type inference
 
 		// アイコンイベント
 		onRightIconClick,
@@ -109,7 +105,7 @@
 	}: {
 		// 基本プロパティ
 		name?: string;
-		value: string | number | undefined;
+		value: string | number;
 
 		// HTML属性系
 		id?: string | null;
@@ -122,6 +118,7 @@
 		step?: number | null;
 		size?: number | null;
 		autocomplete?: HTMLInputElement['autocomplete'] | null;
+		spellcheck?: boolean | null;
 		inputAttributes?: HTMLInputAttributes | undefined;
 
 		// スタイル/レイアウト
@@ -188,11 +185,6 @@
 		// 入力イベント
 		onchange?: (value: any) => void;
 		oninput?: (value: any) => void;
-		onsubmit?: (value: any) => void;
-
-		// IMEイベント
-		oncompositionstart?: Function; // No params for type inference
-		oncompositionend?: Function; // No params for type inference
 
 		// アイコンイベント
 		onRightIconClick?: Function; // No params for type inference
@@ -204,6 +196,7 @@
 
 	let ref: HTMLInputElement | undefined = $state();
 	let isFocused: boolean = $state(false);
+	let isComposing: boolean = $state(false);
 
 	// =========================================================================
 	// Methods
@@ -212,8 +205,8 @@
 	const clear = (): void => {
 		if (disabled || readonly) return;
 		ref?.focus();
-		onchange?.(undefined);
-		value = undefined;
+		value = '';
+		onchange?.('');
 	};
 
 	export const focus = () => {
@@ -241,6 +234,10 @@
 
 	// キーボードイベント
 	const handleKeydown = (event: KeyboardEvent) => {
+		// Enterキーで入力確定（blur）する（IME変換中は除く）
+		if (event.key === 'Enter' && !disabled && !readonly && !isComposing) {
+			ref?.blur();
+		}
 		onkeydown?.(event);
 	};
 
@@ -249,12 +246,6 @@
 	};
 
 	// 入力イベント
-	const handleSubmit = (event: SubmitEvent) => {
-		if (disabled || readonly) return;
-		event?.preventDefault?.();
-		ref?.blur();
-		onsubmit?.(value);
-	};
 
 	const handleChange = () => {
 		if (disabled || readonly) return;
@@ -364,11 +355,19 @@
 		onpointercancel?.(event);
 	};
 
+	// IMEイベント
+	const handleCompositionStart = () => {
+		isComposing = true;
+	};
+
+	const handleCompositionEnd = () => {
+		isComposing = false;
+	};
+
 	// =========================================================================
 	// $derived
 	// =========================================================================
 	const getDisplayValue = (): string => {
-		if (value === undefined) return '';
 		if (type === 'number' && typeof value === 'number') {
 			return value.toLocaleString();
 		}
@@ -404,8 +403,8 @@
 			{getDisplayValue()}
 		</div>
 	{/if}
-	<!-- 入力用フォーム -->
-	<form onsubmit={handleSubmit}>
+	<!-- 入力用要素 -->
+	<div class="input__wrapper">
 		<input
 			{id}
 			{name}
@@ -425,6 +424,7 @@
 			{required}
 			{tabindex}
 			{size}
+			{spellcheck}
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}
@@ -450,10 +450,12 @@
 			onpointerleave={handlePointerLeave}
 			onpointermove={handlePointerMove}
 			onpointercancel={handlePointerCancel}
+			oncompositionstart={handleCompositionStart}
+			oncompositionend={handleCompositionEnd}
 			{...inputAttributes}
 			{...restProps}
 		/>
-	</form>
+	</div>
 	<!-- クリアボタン -->
 	{#if clearable && !disabled && !readonly}
 		<div class="input__clear-button">
@@ -544,7 +546,7 @@
 		height: inherit;
 	}
 
-	form {
+	.input__wrapper {
 		padding: inherit;
 		border: none;
 		font-size: inherit;
@@ -686,7 +688,7 @@
  * デザインバリアント：default
  * ============================================= */
 	.input:not(.input--inline) {
-		form {
+		.input__wrapper {
 			position: static;
 			opacity: 1;
 		}
@@ -747,7 +749,7 @@
 			text-align: right;
 		}
 
-		form {
+		.input__wrapper {
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -788,7 +790,7 @@
 				opacity: 0;
 			}
 
-			form {
+			.input__wrapper {
 				opacity: 1;
 			}
 		}

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

@@ -2,7 +2,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 type $$ComponentProps = {
     name?: string;
-    value: string | number | undefined;
+    value: string | number;
     id?: string | null;
     type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
     tabindex?: number | null;
@@ -13,6 +13,7 @@ type $$ComponentProps = {
     step?: number | null;
     size?: number | null;
     autocomplete?: HTMLInputElement['autocomplete'] | null;
+    spellcheck?: boolean | null;
     inputAttributes?: HTMLInputAttributes | undefined;
     inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';
@@ -61,9 +62,6 @@ type $$ComponentProps = {
     onpointercancel?: Function;
     onchange?: (value: any) => void;
     oninput?: (value: any) => void;
-    onsubmit?: (value: any) => void;
-    oncompositionstart?: Function;
-    oncompositionend?: Function;
     onRightIconClick?: Function;
     onLeftIconClick?: Function;
     [key: string]: any;

package/dist/components/SegmentedControl.svelte

@@ -0,0 +1,622 @@
+<!-- SegmentedControl.svelte -->
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+	import type { SegmentedControlItem } from '../types/segmentedControlItem';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// 基本プロパティ
+		items = [],
+		value = $bindable(''),
+
+		// HTML属性系
+		id,
+		name = `segmented-control-${Math.random().toString(36).substring(2, 15)}`,
+
+		// スタイル/レイアウト
+		size = 'medium',
+		fullWidth = false,
+		color,
+		rounded = false,
+
+		// アイコン関連
+		iconFilled = false,
+		iconWeight = 300,
+		iconGrade = 0,
+		iconOpticalSize,
+		iconVariant = 'outlined',
+
+		// 状態/動作
+		disabled = false,
+
+		// ARIA/アクセシビリティ
+		ariaLabel,
+		ariaLabelledby,
+		reducedMotion = false,
+
+		// 入力イベント
+		onchange = () => {}, // No params for type inference
+
+		// フォーカスイベント
+		onfocus = () => {}, // No params for type inference
+		onblur = () => {}, // No params for type inference
+
+		// キーボードイベント
+		onkeydown = () => {}, // No params for type inference
+		onkeyup = () => {}, // No params for type inference
+
+		// マウスイベント
+		onclick = () => {}, // No params for type inference
+		onmousedown = () => {}, // No params for type inference
+		onmouseup = () => {}, // No params for type inference
+		onmouseenter = () => {}, // No params for type inference
+		onmouseleave = () => {}, // No params for type inference
+		onmouseover = () => {}, // No params for type inference
+		onmouseout = () => {}, // No params for type inference
+		oncontextmenu = () => {}, // No params for type inference
+		onauxclick = () => {}, // No params for type inference
+
+		// タッチイベント
+		ontouchstart = () => {}, // No params for type inference
+		ontouchend = () => {}, // No params for type inference
+		ontouchmove = () => {}, // No params for type inference
+		ontouchcancel = () => {}, // No params for type inference
+
+		// ポインターイベント
+		onpointerdown = () => {}, // No params for type inference
+		onpointerup = () => {}, // No params for type inference
+		onpointerenter = () => {}, // No params for type inference
+		onpointerleave = () => {}, // No params for type inference
+		onpointermove = () => {}, // No params for type inference
+		onpointercancel = () => {}, // No params for type inference
+
+		// その他
+		...restProps
+	}: {
+		// 基本プロパティ
+		items: SegmentedControlItem[];
+		value: string;
+
+		// HTML属性系
+		id?: string;
+		name?: string;
+
+		// スタイル/レイアウト
+		size?: 'small' | 'medium' | 'large';
+		fullWidth?: boolean;
+		color?: string;
+		rounded?: boolean;
+
+		// アイコン関連
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// 状態/動作
+		disabled?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaLabelledby?: string;
+		reducedMotion?: boolean;
+
+		// 入力イベント
+		onchange?: (value: string) => void;
+
+		// フォーカスイベント
+		onfocus?: Function; // No params for type inference
+		onblur?: Function; // No params for type inference
+
+		// キーボードイベント
+		onkeydown?: Function; // No params for type inference
+		onkeyup?: Function; // No params for type inference
+
+		// マウスイベント
+		onclick?: Function; // No params for type inference
+		onmousedown?: Function; // No params for type inference
+		onmouseup?: Function; // No params for type inference
+		onmouseenter?: Function; // No params for type inference
+		onmouseleave?: Function; // No params for type inference
+		onmouseover?: Function; // No params for type inference
+		onmouseout?: Function; // No params for type inference
+		oncontextmenu?: Function; // No params for type inference
+		onauxclick?: Function; // No params for type inference
+
+		// タッチイベント
+		ontouchstart?: Function; // No params for type inference
+		ontouchend?: Function; // No params for type inference
+		ontouchmove?: Function; // No params for type inference
+		ontouchcancel?: Function; // No params for type inference
+
+		// ポインターイベント
+		onpointerdown?: Function; // No params for type inference
+		onpointerup?: Function; // No params for type inference
+		onpointerenter?: Function; // No params for type inference
+		onpointerleave?: Function; // No params for type inference
+		onpointermove?: Function; // No params for type inference
+		onpointercancel?: Function; // No params for type inference
+
+		// その他
+		[key: string]: any;
+	} = $props();
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	const handleChange = (item: SegmentedControlItem, event: Event) => {
+		if (disabled || item.disabled) return;
+
+		const target = event.target as HTMLInputElement;
+		if (target.checked) {
+			value = item.value;
+			onchange(item.value);
+		}
+	};
+
+	const handleFocus = (event: FocusEvent) => {
+		onfocus(event);
+	};
+
+	const handleBlur = (event: FocusEvent) => {
+		onblur(event);
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (disabled || items.length === 0) {
+			onkeydown(event);
+			return;
+		}
+
+		// Radioコンポーネントと同じキーボードナビゲーション
+		if (
+			event.key === 'ArrowUp' ||
+			event.key === 'ArrowDown' ||
+			event.key === 'ArrowLeft' ||
+			event.key === 'ArrowRight'
+		) {
+			const radioInputs = document.querySelectorAll(
+				`input[type="radio"][name="${name}"]`
+			) as NodeListOf<HTMLInputElement>;
+			const currentIndex = Array.from(radioInputs).findIndex((input) => input === event.target);
+
+			if (currentIndex !== -1) {
+				event.preventDefault();
+				let nextIndex;
+
+				if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+					// 前の有効なアイテムを探す
+					for (let i = currentIndex - 1; i >= 0; i--) {
+						if (!items[i]?.disabled && !radioInputs[i].disabled) {
+							nextIndex = i;
+							break;
+						}
+					}
+					// 見つからなければ最後の有効なアイテムへ
+					if (nextIndex === undefined) {
+						for (let i = items.length - 1; i > currentIndex; i--) {
+							if (!items[i]?.disabled && !radioInputs[i].disabled) {
+								nextIndex = i;
+								break;
+							}
+						}
+					}
+				} else {
+					// 次の有効なアイテムを探す
+					for (let i = currentIndex + 1; i < items.length; i++) {
+						if (!items[i]?.disabled && !radioInputs[i].disabled) {
+							nextIndex = i;
+							break;
+						}
+					}
+					// 見つからなければ最初の有効なアイテムへ
+					if (nextIndex === undefined) {
+						for (let i = 0; i < currentIndex; i++) {
+							if (!items[i]?.disabled && !radioInputs[i].disabled) {
+								nextIndex = i;
+								break;
+							}
+						}
+					}
+				}
+
+				if (nextIndex !== undefined) {
+					const nextInput = radioInputs[nextIndex];
+					if (nextInput && !nextInput.disabled) {
+						nextInput.focus();
+						nextInput.click();
+					}
+				}
+			}
+		} else if (event.key === 'Home') {
+			event.preventDefault();
+			const radioInputs = document.querySelectorAll(
+				`input[type="radio"][name="${name}"]`
+			) as NodeListOf<HTMLInputElement>;
+			for (let i = 0; i < items.length; i++) {
+				if (!items[i]?.disabled && !radioInputs[i].disabled) {
+					radioInputs[i].focus();
+					radioInputs[i].click();
+					break;
+				}
+			}
+		} else if (event.key === 'End') {
+			event.preventDefault();
+			const radioInputs = document.querySelectorAll(
+				`input[type="radio"][name="${name}"]`
+			) as NodeListOf<HTMLInputElement>;
+			for (let i = items.length - 1; i >= 0; i--) {
+				if (!items[i]?.disabled && !radioInputs[i].disabled) {
+					radioInputs[i].focus();
+					radioInputs[i].click();
+					break;
+				}
+			}
+		}
+
+		onkeydown(event);
+	};
+
+	const handleKeyup = (event: KeyboardEvent) => {
+		onkeyup(event);
+	};
+
+	// マウスイベント
+	const handleClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onclick(event);
+	};
+
+	const handleMouseDown = (event: MouseEvent) => {
+		if (disabled) return;
+		onmousedown(event);
+	};
+
+	const handleMouseUp = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseup(event);
+	};
+
+	const handleMouseEnter = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseenter(event);
+	};
+
+	const handleMouseLeave = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseleave(event);
+	};
+
+	const handleMouseOver = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseover(event);
+	};
+
+	const handleMouseOut = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseout(event);
+	};
+
+	const handleContextMenu = (event: MouseEvent) => {
+		if (disabled) return;
+		oncontextmenu(event);
+	};
+
+	const handleAuxClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onauxclick(event);
+	};
+
+	// タッチイベント
+	const handleTouchStart = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchstart(event);
+	};
+
+	const handleTouchEnd = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchend(event);
+	};
+
+	const handleTouchMove = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchmove(event);
+	};
+
+	const handleTouchCancel = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchcancel(event);
+	};
+
+	// ポインターイベント
+	const handlePointerDown = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerdown(event);
+	};
+
+	const handlePointerUp = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerup(event);
+	};
+
+	const handlePointerEnter = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerenter(event);
+	};
+
+	const handlePointerLeave = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerleave(event);
+	};
+
+	const handlePointerMove = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointermove(event);
+	};
+
+	const handlePointerCancel = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointercancel(event);
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const effectiveIconSize = $derived(
+		iconOpticalSize || (size === 'small' ? 16 : size === 'large' ? 24 : 20)
+	);
+
+	const containerClasses = $derived(
+		[
+			'segmented-control',
+			`segmented-control--${size}`,
+			fullWidth && 'segmented-control--full-width',
+			rounded && 'segmented-control--rounded',
+			disabled && 'segmented-control--disabled',
+			reducedMotion && 'segmented-control--no-motion'
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<div
+	class={containerClasses}
+	role="radiogroup"
+	aria-label={ariaLabelledby ? undefined : ariaLabel}
+	aria-labelledby={ariaLabelledby}
+	style="--svelte-ui-segmented-control-selected-bg: {color || 'var(--svelte-ui-primary-color)'};"
+	{id}
+	data-testid="segmented-control"
+	{...restProps}
+>
+	{#each items as item, index}
+		{@const isSelected = value === item.value}
+		{@const isDisabled = disabled || item.disabled}
+		{@const inputId = `${name}-${index}`}
+		<div class="segmented-control__item">
+			<input
+				type="radio"
+				id={inputId}
+				{name}
+				value={item.value}
+				checked={isSelected}
+				disabled={isDisabled}
+				class="segmented-control__input"
+				onchange={(e) => handleChange(item, e)}
+				onfocus={handleFocus}
+				onblur={handleBlur}
+				onkeydown={handleKeydown}
+				onkeyup={handleKeyup}
+				onclick={handleClick}
+				onmousedown={handleMouseDown}
+				onmouseup={handleMouseUp}
+				onmouseenter={handleMouseEnter}
+				onmouseleave={handleMouseLeave}
+				onmouseover={handleMouseOver}
+				onmouseout={handleMouseOut}
+				oncontextmenu={handleContextMenu}
+				onauxclick={handleAuxClick}
+				ontouchstart={handleTouchStart}
+				ontouchend={handleTouchEnd}
+				ontouchmove={handleTouchMove}
+				ontouchcancel={handleTouchCancel}
+				onpointerdown={handlePointerDown}
+				onpointerup={handlePointerUp}
+				onpointerenter={handlePointerEnter}
+				onpointerleave={handlePointerLeave}
+				onpointermove={handlePointerMove}
+				onpointercancel={handlePointerCancel}
+				data-testid="segmented-control-input"
+				data-value={item.value}
+			/>
+			<label
+				for={inputId}
+				class="segmented-control__label"
+				class:segmented-control__label--selected={isSelected}
+				class:segmented-control__label--first={index === 0}
+				class:segmented-control__label--last={index === items.length - 1}
+				aria-label={item.ariaLabel || item.label || undefined}
+			>
+				{#if item.icon}
+					<span class="segmented-control__icon">
+						<Icon
+							filled={iconFilled || isSelected}
+							weight={iconWeight}
+							grade={iconGrade}
+							opticalSize={effectiveIconSize}
+							variant={iconVariant}
+						>
+							{item.icon}
+						</Icon>
+					</span>
+				{/if}
+				{#if item.label}
+					<span class="segmented-control__label-text">{item.label}</span>
+				{/if}
+			</label>
+		</div>
+	{/each}
+</div>
+
+<style>.segmented-control {
+  display: inline-flex;
+  position: relative;
+  padding: var(--svelte-ui-segmented-control-base-padding);
+  background-color: var(--svelte-ui-segmented-control-base-bg);
+  border-radius: var(--svelte-ui-segmented-control-base-border-radius);
+  gap: var(--svelte-ui-segmented-control-gap);
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  -ms-overflow-style: none;
+  overscroll-behavior: contain;
+}
+
+.segmented-control::-webkit-scrollbar {
+  display: none;
+}
+
+.segmented-control--full-width {
+  width: 100%;
+}
+
+.segmented-control--full-width .segmented-control__item {
+  flex: 1;
+}
+
+.segmented-control--rounded {
+  border-radius: var(--svelte-ui-border-radius-rounded, 9999px);
+}
+
+.segmented-control--disabled {
+  opacity: var(--svelte-ui-button-disabled-opacity);
+  pointer-events: none;
+}
+
+.segmented-control__item {
+  position: relative;
+  flex: 0 1 auto;
+  display: flex;
+  align-items: stretch;
+}
+
+.segmented-control__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.segmented-control__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  position: relative;
+  border: none;
+  background-color: transparent;
+  color: var(--svelte-ui-text-subtle-color, var(--svelte-ui-text-color));
+  white-space: nowrap;
+  cursor: pointer;
+  transition-property: background-color, color;
+  transition-duration: var(--svelte-ui-transition-duration, 0.2s);
+  transition-timing-function: ease;
+  outline: none;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1;
+  box-sizing: border-box;
+  width: 100%;
+  text-align: center;
+  border-radius: var(--svelte-ui-segmented-control-button-radius);
+}
+
+.segmented-control--small .segmented-control__label {
+  height: var(--svelte-ui-segmented-control-button-height-sm);
+  font-size: var(--svelte-ui-segmented-control-font-size-sm);
+  padding: var(--svelte-ui-segmented-control-button-padding-sm);
+}
+
+.segmented-control--small .segmented-control__label:not(:has(.segmented-control__label-text)) {
+  width: var(--svelte-ui-segmented-control-button-height-sm);
+}
+
+.segmented-control--medium .segmented-control__label {
+  height: var(--svelte-ui-segmented-control-button-height);
+  font-size: var(--svelte-ui-segmented-control-font-size);
+  padding: var(--svelte-ui-segmented-control-button-padding);
+}
+
+.segmented-control--medium .segmented-control__label:not(:has(.segmented-control__label-text)) {
+  width: var(--svelte-ui-segmented-control-button-height);
+}
+
+.segmented-control--large .segmented-control__label {
+  height: var(--svelte-ui-segmented-control-button-height-lg);
+  font-size: var(--svelte-ui-segmented-control-font-size-lg);
+  padding: var(--svelte-ui-segmented-control-button-padding-lg);
+}
+
+.segmented-control--large .segmented-control__label:not(:has(.segmented-control__label-text)) {
+  width: var(--svelte-ui-segmented-control-button-height-lg);
+}
+
+.segmented-control--rounded .segmented-control__label {
+  border-radius: calc(var(--svelte-ui-border-radius-rounded, 9999px) - 2px);
+}
+
+@media (hover: hover) {
+  .segmented-control__input:not(:disabled) + .segmented-control__label:hover:not(.segmented-control__label--selected) {
+    background-color: var(--svelte-ui-segmented-control-hover-overlay);
+    color: var(--svelte-ui-text-color);
+  }
+}
+.segmented-control__input:focus-visible + .segmented-control__label {
+  outline: var(--svelte-ui-focus-outline-inner, 2px solid currentColor);
+  outline-offset: var(--svelte-ui-focus-outline-offset-inner, 2px);
+}
+
+.segmented-control__input:checked + .segmented-control__label,
+.segmented-control__label--selected {
+  background-color: var(--svelte-ui-segmented-control-selected-bg);
+  color: var(--svelte-ui-segmented-control-selected-text-color, white);
+}
+
+.segmented-control:not(.segmented-control--disabled) .segmented-control__input:disabled + .segmented-control__label {
+  opacity: var(--svelte-ui-button-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.segmented-control__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.segmented-control__label-text {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}
+
+/* Reduced motion */
+.segmented-control--no-motion,
+.segmented-control--no-motion .segmented-control__label {
+  transition-duration: 0.01s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .segmented-control,
+  .segmented-control__label {
+    transition-duration: 0.01s;
+  }
+}</style>

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

@@ -0,0 +1,49 @@
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+import type { SegmentedControlItem } from '../types/segmentedControlItem';
+type $$ComponentProps = {
+    items: SegmentedControlItem[];
+    value: string;
+    id?: string;
+    name?: string;
+    size?: 'small' | 'medium' | 'large';
+    fullWidth?: boolean;
+    color?: string;
+    rounded?: boolean;
+    iconFilled?: boolean;
+    iconWeight?: IconWeight;
+    iconGrade?: IconGrade;
+    iconOpticalSize?: IconOpticalSize;
+    iconVariant?: IconVariant;
+    disabled?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    reducedMotion?: boolean;
+    onchange?: (value: string) => void;
+    onfocus?: Function;
+    onblur?: Function;
+    onkeydown?: Function;
+    onkeyup?: Function;
+    onclick?: Function;
+    onmousedown?: Function;
+    onmouseup?: Function;
+    onmouseenter?: Function;
+    onmouseleave?: Function;
+    onmouseover?: Function;
+    onmouseout?: Function;
+    oncontextmenu?: Function;
+    onauxclick?: Function;
+    ontouchstart?: Function;
+    ontouchend?: Function;
+    ontouchmove?: Function;
+    ontouchcancel?: Function;
+    onpointerdown?: Function;
+    onpointerup?: Function;
+    onpointerenter?: Function;
+    onpointerleave?: Function;
+    onpointermove?: Function;
+    onpointercancel?: Function;
+    [key: string]: any;
+};
+declare const SegmentedControl: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/components/Slider.svelte

@@ -71,7 +71,7 @@
 		...restProps
 	}: {
 		// 基本プロパティ
-		value?: number;
+		value: number;
 		name?: string;
 		id?: string;
 

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

@@ -1,6 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = {
-    value?: number;
+    value: number;
     name?: string;
     id?: string;
     min?: number;

package/dist/components/Switch.svelte

@@ -71,7 +71,7 @@
 		children?: Snippet;
 
 		// 基本プロパティ
-		value?: boolean;
+		value: boolean;
 
 		// HTML属性系
 		id?: string;

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     children?: Snippet;
-    value?: boolean;
+    value: boolean;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     size?: 'small' | 'medium' | 'large';

package/dist/components/Textarea.svelte

@@ -91,7 +91,7 @@
 	}: {
 		// 基本プロパティ
 		name?: string;
-		value: string | undefined;
+		value: string;
 		placeholder?: string;
 
 		// HTML属性系
@@ -177,9 +177,9 @@
 
 	const clear = (): void => {
 		if (disabled || readonly) return;
-		value = undefined;
+		value = '';
 		ref?.focus();
-		onchange?.(value);
+		onchange?.('');
 	};
 
 	// 外部からフォーカスを当てる（キャレットを先頭に移動）
@@ -334,7 +334,7 @@
 
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const htmlValue = $derived.by(() => {
-		if (typeof value === 'string' && value !== '') {
+		if (value !== '') {
 			let html = value
 				.replace(/ +/g, (match) => ' '.repeat(match.length))
 				.replace(/\n/g, '<br />');
@@ -345,7 +345,7 @@
 			}
 			return html;
 		} else {
-			return value ?? '';
+			return '';
 		}
 	});
 </script>

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

@@ -2,7 +2,7 @@ import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 type $$ComponentProps = {
     name?: string;
-    value: string | undefined;
+    value: string;
     placeholder?: string;
     id?: string | null;
     tabindex?: number | null;

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { default as PopupMenuButton } from './components/PopupMenuButton.svelte'
 export { default as Radio } from './components/Radio.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as Select } from './components/Select.svelte';
+export { default as SegmentedControl } from './components/SegmentedControl.svelte';
 export { default as Slider } from './components/Slider.svelte';
 export { default as Snackbar } from './components/Snackbar.svelte';
 export { default as SnackbarItem } from './components/SnackbarItem.svelte';
@@ -40,3 +41,4 @@ export * from './utils/mobile';
 export * from './utils/snackbar.svelte';
 export * from './utils/style';
 export type { MenuItem } from './types/menuItem';
+export type { SegmentedControlItem } from './types/segmentedControlItem';

package/dist/index.js

@@ -24,6 +24,7 @@ export { default as PopupMenuButton } from './components/PopupMenuButton.svelte'
 export { default as Radio } from './components/Radio.svelte';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as Select } from './components/Select.svelte';
+export { default as SegmentedControl } from './components/SegmentedControl.svelte';
 export { default as Slider } from './components/Slider.svelte';
 export { default as Snackbar } from './components/Snackbar.svelte';
 export { default as SnackbarItem } from './components/SnackbarItem.svelte';

package/dist/types/segmentedControlItem.d.ts

@@ -0,0 +1,13 @@
+export type SegmentedControlItem = {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+} | {
+    label?: never;
+    value: string;
+    icon: string;
+    disabled?: boolean;
+    ariaLabel: string;
+};

package/dist/types/segmentedControlItem.js

@@ -0,0 +1 @@
+export {};

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