@14ch/svelte-ui 0.0.6 → 0.0.8

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

@@ -167,11 +167,6 @@
 	// Methods
 	// =========================================================================
 
-	const handleSubmit = (event: SubmitEvent) => {
-		event?.preventDefault?.();
-		handleChange();
-	};
-
 	const handleChange = (event?: Event): void => {
 		// 空文字列の場合はそのまま処理
 		if (localValue && !localValue.startsWith('#')) {
@@ -207,6 +202,11 @@
 		onclick?.(event);
 	};
 	const handleKeydown = (event: KeyboardEvent) => {
+		// Enterキーで色の変更を確定
+		if (event.key === 'Enter' && !disabled && !readonly) {
+			event.preventDefault();
+			handleChange();
+		}
 		if (disabled) return;
 		onkeydown(event);
 	};
@@ -361,7 +361,6 @@
 		onpointerleave={handlePointerLeave}
 		onpointermove={handlePointerMove}
 		onpointercancel={handlePointerCancel}
-		onsubmit={handleSubmit}
 		{...restProps}
 	/>
 

package/dist/components/Combobox.svelte

@@ -155,7 +155,6 @@
 	let popupRef = $state<any>();
 	let highlightedIndex = $state(-1);
 	let isFocused = $state(false);
-	let comboboxRef = $state<HTMLDivElement>();
 
 	// 各要素のIDを生成
 	const inputId = `${id}-input`;
@@ -479,9 +478,9 @@
 						type="button"
 						class="combobox__option"
 						class:combobox__option--highlighted={index === highlightedIndex}
-						class:combobox__option--selected={option === value}
+						class:combobox__option--selected={option === inputValue}
 						role="option"
-						aria-selected={option === value}
+						aria-selected={option === inputValue}
 						onmousedown={(event) => {
 							event?.preventDefault?.();
 							event?.stopPropagation?.();

package/dist/components/Dialog.svelte

@@ -115,7 +115,7 @@
 		return styles.join('; ');
 	});
 
-	const dialogClasses = $derived([scrollable && 'scrollable'].filter(Boolean).join(' ')); // dialogクラス自体はcustomClassに含めない
+	const dialogClasses = $derived('');
 
 	const ariaLabelledby = $derived(title ? 'dialog-title' : undefined);
 	const ariaDescribedbyValue = $derived(
@@ -136,7 +136,7 @@
 	customStyles={dialogStyles}
 	id={id ? `${id}-modal` : undefined}
 >
-	<div class="dialog {scrollable ? 'scrollable' : ''}">
+	<div class="dialog {scrollable ? 'dialog--scrollable' : ''}">
 		{#if header || title}
 			<div class="dialog__header">
 				{#if header}
@@ -166,14 +166,15 @@
 	</div>
 </Modal>
 
-<style>.dialog {
+<style>@charset "UTF-8";
+.dialog {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  max-height: calc(100dvh - 2em - 6px);
   border: var(--svelte-ui-dialog-border);
   border-radius: var(--svelte-ui-dialog-border-radius);
-  overflow: hidden;
+  max-height: calc(100dvh - 2em - 6px);
+  overflow: auto;
 }
 
 .dialog__header {
@@ -183,7 +184,6 @@
   justify-content: stretch;
   min-height: var(--svelte-ui-dialog-header-height);
   padding: var(--svelte-ui-dialog-padding);
-  margin-bottom: calc(0px - var(--svelte-ui-dialog-body-padding));
 }
 .dialog__header .dialog__title {
   flex-grow: 1;
@@ -214,15 +214,26 @@
   border-bottom: 1px solid var(--svelte-ui-border-weak-color);
 }
 
-:global(.scrollable) .dialog__header {
+/* scrollable=true 時: ヘッダー/フッター固定 + bodyのみスクロール */
+.dialog--scrollable {
+  overflow: hidden;
+}
+
+.dialog--scrollable .dialog__header {
   margin-bottom: 0;
   border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
 }
-:global(.scrollable) .dialog__body {
+
+.dialog--scrollable .dialog__body {
   flex-shrink: 1;
   padding: var(--svelte-ui-dialog-body-padding);
   overflow: auto;
 }
-:global(.scrollable) .dialog__footer {
+
+.dialog:not(.dialog--scrollable) .dialog__body {
+  padding-top: 0;
+}
+
+.dialog--scrollable .dialog__footer {
   border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
 }</style>

package/dist/components/Drawer.svelte

@@ -123,9 +123,7 @@
 	});
 
 	const drawerClasses = $derived(
-		['drawer-wrapper', `drawer-wrapper--${position}`, scrollable && 'drawer-wrapper--scrollable']
-			.filter(Boolean)
-			.join(' ')
+		['drawer-wrapper', `drawer-wrapper--${position}`].filter(Boolean).join(' ')
 	);
 
 	const ariaLabelledby = $derived(title ? 'drawer-title' : undefined);

package/dist/components/Input.svelte

@@ -95,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,
@@ -190,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
@@ -206,6 +196,7 @@
 
 	let ref: HTMLInputElement | undefined = $state();
 	let isFocused: boolean = $state(false);
+	let isComposing: boolean = $state(false);
 
 	// =========================================================================
 	// Methods
@@ -243,6 +234,10 @@
 
 	// キーボードイベント
 	const handleKeydown = (event: KeyboardEvent) => {
+		// Enterキーで入力確定（blur）する（IME変換中は除く）
+		if (event.key === 'Enter' && !disabled && !readonly && !isComposing) {
+			ref?.blur();
+		}
 		onkeydown?.(event);
 	};
 
@@ -251,12 +246,6 @@
 	};
 
 	// 入力イベント
-	const handleSubmit = (event: SubmitEvent) => {
-		if (disabled || readonly) return;
-		event?.preventDefault?.();
-		ref?.blur();
-		onsubmit?.(value);
-	};
 
 	const handleChange = () => {
 		if (disabled || readonly) return;
@@ -366,6 +355,15 @@
 		onpointercancel?.(event);
 	};
 
+	// IMEイベント
+	const handleCompositionStart = () => {
+		isComposing = true;
+	};
+
+	const handleCompositionEnd = () => {
+		isComposing = false;
+	};
+
 	// =========================================================================
 	// $derived
 	// =========================================================================
@@ -405,8 +403,8 @@
 			{getDisplayValue()}
 		</div>
 	{/if}
-	<!-- 入力用フォーム -->
-	<form onsubmit={handleSubmit}>
+	<!-- 入力用要素 -->
+	<div class="input__wrapper">
 		<input
 			{id}
 			{name}
@@ -452,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">
@@ -546,7 +546,7 @@
 		height: inherit;
 	}
 
-	form {
+	.input__wrapper {
 		padding: inherit;
 		border: none;
 		font-size: inherit;
@@ -688,7 +688,7 @@
  * デザインバリアント：default
  * ============================================= */
 	.input:not(.input--inline) {
-		form {
+		.input__wrapper {
 			position: static;
 			opacity: 1;
 		}
@@ -749,7 +749,7 @@
 			text-align: right;
 		}
 
-		form {
+		.input__wrapper {
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -790,7 +790,7 @@
 				opacity: 0;
 			}
 
-			form {
+			.input__wrapper {
 				opacity: 1;
 			}
 		}

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

@@ -62,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,626 @@
+<!-- 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;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  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/SnackbarItem.svelte

@@ -112,7 +112,10 @@
 				);
 			const requiredMargin = -containerHeight;
 
-			snackbarRef.style.setProperty('--svelte-ui-snackbar-item-collapse-margin', `${requiredMargin}px`);
+			snackbarRef.style.setProperty(
+				'--svelte-ui-snackbar-item-collapse-margin',
+				`${requiredMargin}px`
+			);
 
 			// CSSカスタムプロパティが確実に設定されるまで少し待つ
 			requestAnimationFrame(() => {
@@ -149,7 +152,8 @@
 		class="snackbar-item__content snackbar-item__content--{type} snackbar-item__content--{variant} snackbar-item__content--{position} {visible
 			? 'snackbar-item__content--visible'
 			: ''}"
-		style="--svelte-ui-snackbar-item-custom-color: {color ?? 'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
+		style="--svelte-ui-snackbar-item-custom-color: {color ??
+			'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
 		role={type === 'error' || type === 'warning' ? 'alert' : 'status'}
 		aria-live={type === 'error' || type === 'warning' ? 'assertive' : 'polite'}
 		aria-atomic="true"
@@ -321,103 +325,208 @@
 
 	/* Type variants - filled */
 	.snackbar-item__content--filled.snackbar-item__content--info {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-info-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-info-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--info .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-info-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-success-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-success-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-success-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-warning-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-warning-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-warning-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-error-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-error-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-error-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-filled-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-default-filled-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-default-filled-text-color)
+		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-default-filled-text-color)
+		);
 	}
 
 	/* Type variants - outlined */
 	.snackbar-item__content--outlined.snackbar-item__content--info {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-info-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-info-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-info-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--info .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-info-outlined-text-color)
+		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-success-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-success-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-success-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-success-outlined-text-color)
+		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-warning-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-warning-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-warning-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-warning-outlined-text-color)
+		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-error-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-error-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-error-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-error-outlined-text-color)
+		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default {
-		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-outlined-bg));
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
+		background-color: var(
+			--svelte-ui-snackbar-item-custom-color,
+			var(--svelte-ui-snackbar-default-outlined-bg)
+		);
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-default-outlined-text-color)
+		);
 		box-shadow: inset 0 0 0 1px
-			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-outlined-border-color));
+			var(
+				--svelte-ui-snackbar-item-custom-color,
+				var(--svelte-ui-snackbar-default-outlined-border-color)
+			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default .snackbar-item__icon {
-		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
+		color: var(
+			--svelte-ui-snackbar-item-custom-text-color,
+			var(--svelte-ui-snackbar-default-outlined-text-color)
+		);
 	}
 </style>

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