@14ch/svelte-ui 0.0.68 → 0.0.69

package/dist/assets/styles/import.css

@@ -139,10 +139,13 @@
     * ==================================== */
   /* 基本テキスト色の定義 */
   --svelte-ui-text-color: var(--base-800-transparent);
-  --svelte-ui-text-subtle-color: var(--base-500-transparent);
+  --svelte-ui-text-weak-color: var(--base-500-transparent);
+  /* weak のエイリアス。weak から派生させることでどちらを上書きしても効く */
+  --svelte-ui-text-subtle-color: var(--svelte-ui-text-weak-color);
   --svelte-ui-text-on-filled-color: #ffffff;
   --svelte-ui-text-inverse-color: var(--white-800-transparent);
-  --svelte-ui-text-inverse-subtle-color: var(--white-500-transparent);
+  --svelte-ui-text-inverse-weak-color: var(--white-500-transparent);
+  --svelte-ui-text-inverse-subtle-color: var(--svelte-ui-text-inverse-weak-color);
   --svelte-ui-text-placeholder-color: var(--base-500-transparent);
   /* ボーダーカラー */
   --svelte-ui-border-color: var(--base-200-transparent);
@@ -179,10 +182,12 @@
 [data-theme=dark] {
   /* 基本テキスト色の定義 */
   --svelte-ui-text-color: var(--white-800-transparent);
-  --svelte-ui-text-subtle-color: var(--white-500-transparent);
+  --svelte-ui-text-weak-color: var(--white-500-transparent);
+  --svelte-ui-text-subtle-color: var(--svelte-ui-text-weak-color);
   --svelte-ui-text-on-filled-color: #ffffff;
   --svelte-ui-text-inverse-color: var(--base-800-transparent);
-  --svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
+  --svelte-ui-text-inverse-weak-color: var(--base-500-transparent);
+  --svelte-ui-text-inverse-subtle-color: var(--svelte-ui-text-inverse-weak-color);
   --svelte-ui-text-placeholder-color: var(--white-500-transparent);
   /* ボーダーカラー */
   --svelte-ui-border-color: var(--white-200-transparent);
@@ -460,6 +465,15 @@
   --svelte-ui-select-border-color: var(--svelte-ui-border-weak-color);
   --svelte-ui-select-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
   --svelte-ui-select-placeholder-color: var(--svelte-ui-text-placeholder-color);
+  --svelte-ui-select-options-min-width: 160px;
+  --svelte-ui-select-options-max-height: 280px;
+  --svelte-ui-select-option-padding: 8px 12px;
+  --svelte-ui-select-option-gap: 4px;
+  --svelte-ui-select-option-check-size: 18px;
+  --svelte-ui-select-option-hover-bg: var(--svelte-ui-hover-overlay);
+  --svelte-ui-select-option-selected-bg: var(--svelte-ui-select-overlay);
+  --svelte-ui-select-separator-margin: 4px 0;
+  --svelte-ui-select-separator-color: var(--svelte-ui-border-color);
   /* Checkbox */
   --svelte-ui-checkbox-size: 16px;
   --svelte-ui-checkbox-size-sm: 14px;
@@ -789,7 +803,7 @@
   [data-theme=dark] {
     /* ===== 基本色の上書き ===== */
     --svelte-ui-text-color: CanvasText;
-    --svelte-ui-text-subtle-color: CanvasText;
+    --svelte-ui-text-weak-color: CanvasText;
     --svelte-ui-surface-accent-color: CanvasText;
     --svelte-ui-text-on-filled-color: HighlightText;
     --svelte-ui-text-placeholder-color: CanvasText;
@@ -827,6 +841,7 @@
     --svelte-ui-select-border-color: CanvasText;
     --svelte-ui-select-text-color: CanvasText;
     --svelte-ui-select-dropdown-icon-color: CanvasText;
+    --svelte-ui-select-separator-color: CanvasText;
     --svelte-ui-colorpicker-border-color: CanvasText;
     --svelte-ui-colorpicker-trigger-border-color: CanvasText;
     --svelte-ui-colorpicker-bg: Canvas;
@@ -875,6 +890,8 @@
     /* ===== オーバーレイ・インタラクション色の上書き ===== */
     --svelte-ui-hover-overlay: Highlight;
     --svelte-ui-select-overlay: Highlight;
+    --svelte-ui-select-option-hover-bg: Highlight;
+    --svelte-ui-select-option-selected-bg: Highlight;
     --svelte-ui-combobox-option-hover-bg: Highlight;
     --svelte-ui-combobox-option-selected-bg: Highlight;
     /* ===== アイコンボタンの上書き ===== */

package/dist/assets/styles/variables.scss

@@ -141,10 +141,13 @@
 
 	/* 基本テキスト色の定義 */
 	--svelte-ui-text-color: var(--base-800-transparent);
-	--svelte-ui-text-subtle-color: var(--base-500-transparent);
+	--svelte-ui-text-weak-color: var(--base-500-transparent);
+	/* weak のエイリアス。weak から派生させることでどちらを上書きしても効く */
+	--svelte-ui-text-subtle-color: var(--svelte-ui-text-weak-color);
 	--svelte-ui-text-on-filled-color: #ffffff;
 	--svelte-ui-text-inverse-color: var(--white-800-transparent);
-	--svelte-ui-text-inverse-subtle-color: var(--white-500-transparent);
+	--svelte-ui-text-inverse-weak-color: var(--white-500-transparent);
+	--svelte-ui-text-inverse-subtle-color: var(--svelte-ui-text-inverse-weak-color);
 	--svelte-ui-text-placeholder-color: var(--base-500-transparent);
 
 	/* ボーダーカラー */
@@ -193,10 +196,12 @@
 [data-theme='dark'] {
 	/* 基本テキスト色の定義 */
 	--svelte-ui-text-color: var(--white-800-transparent);
-	--svelte-ui-text-subtle-color: var(--white-500-transparent);
+	--svelte-ui-text-weak-color: var(--white-500-transparent);
+	--svelte-ui-text-subtle-color: var(--svelte-ui-text-weak-color);
 	--svelte-ui-text-on-filled-color: #ffffff;
 	--svelte-ui-text-inverse-color: var(--base-800-transparent);
-	--svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
+	--svelte-ui-text-inverse-weak-color: var(--base-500-transparent);
+	--svelte-ui-text-inverse-subtle-color: var(--svelte-ui-text-inverse-weak-color);
 	--svelte-ui-text-placeholder-color: var(--white-500-transparent);
 
 	/* ボーダーカラー */
@@ -502,6 +507,15 @@
 	--svelte-ui-select-border-color: var(--svelte-ui-border-weak-color);
 	--svelte-ui-select-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
 	--svelte-ui-select-placeholder-color: var(--svelte-ui-text-placeholder-color);
+	--svelte-ui-select-options-min-width: 160px;
+	--svelte-ui-select-options-max-height: 280px;
+	--svelte-ui-select-option-padding: 8px 12px;
+	--svelte-ui-select-option-gap: 4px;
+	--svelte-ui-select-option-check-size: 18px;
+	--svelte-ui-select-option-hover-bg: var(--svelte-ui-hover-overlay);
+	--svelte-ui-select-option-selected-bg: var(--svelte-ui-select-overlay);
+	--svelte-ui-select-separator-margin: 4px 0;
+	--svelte-ui-select-separator-color: var(--svelte-ui-border-color);
 
 	/* Checkbox */
 	--svelte-ui-checkbox-size: 16px;
@@ -860,7 +874,7 @@
 	[data-theme='dark'] {
 		/* ===== 基本色の上書き ===== */
 		--svelte-ui-text-color: CanvasText;
-		--svelte-ui-text-subtle-color: CanvasText;
+		--svelte-ui-text-weak-color: CanvasText;
 		--svelte-ui-surface-accent-color: CanvasText;
 		--svelte-ui-text-on-filled-color: HighlightText;
 		--svelte-ui-text-placeholder-color: CanvasText;
@@ -905,6 +919,7 @@
 		--svelte-ui-select-border-color: CanvasText;
 		--svelte-ui-select-text-color: CanvasText;
 		--svelte-ui-select-dropdown-icon-color: CanvasText;
+		--svelte-ui-select-separator-color: CanvasText;
 		--svelte-ui-colorpicker-border-color: CanvasText;
 		--svelte-ui-colorpicker-trigger-border-color: CanvasText;
 		--svelte-ui-colorpicker-bg: Canvas;
@@ -960,6 +975,8 @@
 		/* ===== オーバーレイ・インタラクション色の上書き ===== */
 		--svelte-ui-hover-overlay: Highlight;
 		--svelte-ui-select-overlay: Highlight;
+		--svelte-ui-select-option-hover-bg: Highlight;
+		--svelte-ui-select-option-selected-bg: Highlight;
 		--svelte-ui-combobox-option-hover-bg: Highlight;
 		--svelte-ui-combobox-option-selected-bg: Highlight;
 

package/dist/components/MultiSelect.svelte

@@ -16,8 +16,8 @@
 		// 基本プロパティ
 		/** Selected values array. Supports `bind:value`. */
 		value: OptionValue[];
-		/** `{ label, value, disabled? }[]` */
-		options: Option[];
+		/** `{ label, value, disabled? }[]` or `'separator'` for dividers. */
+		options: (Option | 'separator')[];
 
 		// HTML属性系
 		id?: string | null;
@@ -86,7 +86,9 @@
 	const listboxId = $derived(`${id ?? fallbackId}-listbox`);
 
 	const selectedLabels = $derived(
-		options.filter((o) => value.includes(o.value)).map((o) => o.label)
+		options
+			.filter((option): option is Option => option !== 'separator' && value.includes(option.value))
+			.map((option) => option.label)
 	);
 
 	// =========================================================================
@@ -199,20 +201,24 @@
 			role="listbox"
 			aria-multiselectable="true"
 			aria-label={ariaLabel ?? t('multiSelect.accessibleName')}
-			style:min-width="{triggerWidth}px"
+			style:--internal-multi-select-trigger-width="{triggerWidth}px"
 		>
-			{#each options as option (option.value)}
-				<li role="presentation" class="multi-select__item">
-					<Checkbox
-						value={value.includes(option.value)}
-						disabled={option.disabled}
-						fullWidth
-						customStyle="padding: 8px 12px"
-						onchange={() => toggleOption(option.value)}
-					>
-						{option.label}
-					</Checkbox>
-				</li>
+			{#each options as option, index (option === 'separator' ? `separator-${index}` : option.value)}
+				{#if option === 'separator'}
+					<li class="multi-select__separator" role="separator"></li>
+				{:else}
+					<li role="presentation" class="multi-select__item">
+						<Checkbox
+							value={value.includes(option.value)}
+							disabled={option.disabled}
+							fullWidth
+							customStyle="padding: 8px 12px"
+							onchange={() => toggleOption(option.value)}
+						>
+							{option.label}
+						</Checkbox>
+					</li>
+				{/if}
 			{/each}
 		</ul>
 	</Popup>
@@ -346,7 +352,7 @@
  * ============================================= */
 .multi-select.multi-select--inline .multi-select__trigger {
   padding: inherit;
-  padding-right: var(--svelte-ui-input-icon-space-inline);
+  padding-right: var(--svelte-ui-select-icon-space-inline);
   background: transparent;
   border: none;
   border-radius: 0;
@@ -364,7 +370,7 @@
   right: 0;
   margin-top: 0;
   margin-bottom: 0;
-  margin-right: calc(0px - var(--svelte-ui-input-icon-space-inline));
+  margin-right: calc(0px - var(--svelte-ui-select-icon-space-inline));
 }
 
 /* =============================================
@@ -381,8 +387,9 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  min-width: 160px;
-  max-height: var(--svelte-ui-combobox-options-max-height);
+  /* トリガー幅に合わせつつ、トリガーが狭いときはテーマの下限を保つ */
+  min-width: max(var(--internal-multi-select-trigger-width, 0px), var(--svelte-ui-select-options-min-width));
+  max-height: var(--svelte-ui-select-options-max-height);
   overflow-y: auto;
 }
 
@@ -397,11 +404,8 @@
   }
 }
 
-.multi-select__option-cover {
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-}
-.multi-select__option-cover--disabled {
-  cursor: not-allowed;
+.multi-select__separator {
+  height: 0;
+  margin: var(--svelte-ui-select-separator-margin);
+  border-bottom: solid 1px var(--svelte-ui-select-separator-color);
 }</style>

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

@@ -4,8 +4,8 @@ import type { PopupPosition } from '../types/propOptions';
 export type MultiSelectProps = {
     /** Selected values array. Supports `bind:value`. */
     value: OptionValue[];
-    /** `{ label, value, disabled? }[]` */
-    options: Option[];
+    /** `{ label, value, disabled? }[]` or `'separator'` for dividers. */
+    options: (Option | 'separator')[];
     id?: string | null;
     ariaLabel?: string;
     tabindex?: number | null;

package/dist/components/Select.svelte

@@ -1,7 +1,10 @@
 <!-- Select.svelte -->
 
 <script lang="ts">
+	import { tick } from 'svelte';
 	import Icon from './Icon.svelte';
+	import Popup from './Popup.svelte';
+	import { announceSelection } from '../utils/accessibility';
 	import { t } from '../i18n';
 	import type {
 		FocusHandler,
@@ -11,59 +14,27 @@
 		PointerHandler,
 		BivariantValueHandler
 	} from '../types/callbackHandlers';
-	import type { Option } from '../types/options';
-	import type { HTMLSelectAttributes } from 'svelte/elements';
+	import type { Option, OptionValue } from '../types/options';
+	import type { CloseReason, PopupPosition } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
-	export type SelectProps = Omit<
-		HTMLSelectAttributes,
-		// 独自の型で再定義するためベースの HTML 属性から除外
-		| 'value'
-		| 'id'
-		| 'tabindex'
-		| 'size'
-		// 独自ハンドラ型（callbackHandlers）で再定義するイベント系
-		| 'onfocus'
-		| 'onblur'
-		| 'onkeydown'
-		| 'onkeyup'
-		| 'onclick'
-		| 'onmousedown'
-		| 'onmouseup'
-		| 'onmouseenter'
-		| 'onmouseleave'
-		| 'onmouseover'
-		| 'onmouseout'
-		| 'oncontextmenu'
-		| 'onauxclick'
-		| 'ontouchstart'
-		| 'ontouchend'
-		| 'ontouchmove'
-		| 'ontouchcancel'
-		| 'onpointerdown'
-		| 'onpointerup'
-		| 'onpointerenter'
-		| 'onpointerleave'
-		| 'onpointermove'
-		| 'onpointercancel'
-		| 'onchange'
-	> & {
+	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')[];
 
 		// HTML属性系
 		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' */
@@ -76,6 +47,10 @@
 		disabled?: boolean;
 		required?: boolean;
 
+		// ポップアップ
+		/** @default 'bottom-left' */
+		position?: PopupPosition;
+
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -110,7 +85,7 @@
 		onpointercancel?: PointerHandler;
 
 		// 入力イベント
-		onchange?: BivariantValueHandler<string | number | null | undefined>;
+		onchange?: BivariantValueHandler<OptionValue>;
 	};
 
 	let {
@@ -126,7 +101,6 @@
 		placeholder = '',
 
 		// スタイル/レイアウト
-		size = null,
 		inline = false,
 		focusStyle = 'outline',
 		fullWidth = false,
@@ -137,6 +111,9 @@
 		disabled = false,
 		required = false,
 
+		// ポップアップ
+		position = 'bottom-left',
+
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -171,151 +148,205 @@
 		onpointercancel = () => {}, // No params for type inference
 
 		// 入力イベント
-		onchange = () => {}, // No params for type inference
-
-		// その他
-		...restProps
+		onchange = () => {} // No params for type inference
 	}: SelectProps = $props();
 
-	let isFocused: boolean = $state(false);
-	let selectRef = $state<HTMLSelectElement>();
+	const TYPEAHEAD_RESET_MS = 600;
+
+	let popupRef = $state<Popup>();
+	let triggerEl = $state<HTMLButtonElement>();
+	let listEl = $state<HTMLUListElement>();
+	let optionEls: HTMLLIElement[] = $state([]);
+	let isPopupOpen = $state(false);
+	let isFocused = $state(false);
+	let triggerWidth = $state(0);
+	/** ハイライト中の選択肢の options 内インデックス（未選択は -1） */
+	let activeIndex = $state(-1);
+	let typeaheadBuffer = '';
+	let typeaheadTimer: ReturnType<typeof setTimeout> | undefined;
 
 	// =========================================================================
-	// Methods
+	// $derived
 	// =========================================================================
-	const handleFocus = (event: FocusEvent) => {
-		if (disabled) return;
-		isFocused = true;
-		onfocus?.(event);
-	};
-
-	const handleBlur = (event: FocusEvent) => {
-		if (disabled) return;
-		isFocused = false;
-		onblur?.(event);
-	};
+	const fallbackId = `select-${Math.random().toString(36).substring(2, 15)}`;
+	const baseId = $derived(id ?? fallbackId);
+	const listboxId = $derived(`${baseId}-listbox`);
+	const accessibleName = $derived(ariaLabel ?? t('select.accessibleName'));
+
+	const selectedOption = $derived(
+		options.find((option) => option !== 'separator' && option.value === value) as Option | undefined
+	);
+
+	/** キーボード操作で移動できる選択肢の options 内インデックス */
+	const navigableIndexes = $derived(
+		options.reduce<number[]>((indexes, option, index) => {
+			if (option !== 'separator' && !option.disabled) {
+				indexes.push(index);
+			}
+			return indexes;
+		}, [])
+	);
 
-	const handleKeydown = (event: KeyboardEvent) => {
-		if (disabled) return;
-		onkeydown?.(event);
-	};
-
-	const handleKeyup = (event: KeyboardEvent) => {
-		if (disabled) return;
-		onkeyup?.(event);
-	};
-
-	// マウスイベント
-	const handleClick = (event: MouseEvent) => {
-		if (disabled) return;
-		onclick?.(event);
-	};
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	const getOptionId = (index: number): string => `${baseId}-option-${index}`;
 
-	const handleMouseDown = (event: MouseEvent) => {
-		if (disabled) return;
-		onmousedown?.(event);
+	const getOptionAt = (index: number): Option | undefined => {
+		const option = options[index];
+		return option === 'separator' ? undefined : option;
 	};
 
-	const handleMouseUp = (event: MouseEvent) => {
-		if (disabled) return;
-		onmouseup?.(event);
+	const setActiveIndex = async (index: number) => {
+		activeIndex = index;
+		await tick();
+		optionEls[index]?.scrollIntoView({ block: 'nearest' });
 	};
 
-	const handleMouseEnter = (event: MouseEvent) => {
-		if (disabled) return;
-		onmouseenter?.(event);
+	const moveActiveIndex = (step: number) => {
+		if (navigableIndexes.length === 0) return;
+		const current = navigableIndexes.indexOf(activeIndex);
+		const next =
+			current === -1
+				? step > 0
+					? 0
+					: navigableIndexes.length - 1
+				: (current + step + navigableIndexes.length) % navigableIndexes.length;
+		setActiveIndex(navigableIndexes[next]);
 	};
 
-	const handleMouseLeave = (event: MouseEvent) => {
-		if (disabled) return;
-		onmouseleave?.(event);
+	/** 入力した文字で始まる選択肢へ移動する（ネイティブ select 相当の挙動） */
+	const moveByTypeahead = (key: string) => {
+		clearTimeout(typeaheadTimer);
+		typeaheadBuffer += key.toLowerCase();
+		typeaheadTimer = setTimeout(() => {
+			typeaheadBuffer = '';
+		}, TYPEAHEAD_RESET_MS);
+
+		// 1文字目は現在位置の次から探し、同じ文字の連打で候補を巡回できるようにする
+		const offset = typeaheadBuffer.length === 1 ? navigableIndexes.indexOf(activeIndex) + 1 : 0;
+		const searchOrder = [...navigableIndexes.slice(offset), ...navigableIndexes.slice(0, offset)];
+		const matched = searchOrder.find((index) =>
+			getOptionAt(index)?.label.toLowerCase().startsWith(typeaheadBuffer)
+		);
+
+		if (matched !== undefined) {
+			setActiveIndex(matched);
+		}
 	};
 
-	const handleMouseOver = (event: MouseEvent) => {
-		if (disabled) return;
-		onmouseover?.(event);
-	};
+	const selectOption = (option: Option) => {
+		if (disabled || option.disabled) return;
 
-	const handleMouseOut = (event: MouseEvent) => {
-		if (disabled) return;
-		onmouseout?.(event);
+		value = option.value;
+		announceSelection(option.label);
+		onchange?.(value);
+		popupRef?.close();
 	};
 
-	const handleContextMenu = (event: MouseEvent) => {
-		if (disabled) return;
-		oncontextmenu?.(event);
+	const handleFocus = (event: FocusEvent) => {
+		isFocused = true;
+		onfocus?.(event);
 	};
 
-	const handleAuxClick = (event: MouseEvent) => {
-		if (disabled) return;
-		onauxclick?.(event);
+	const handleBlur = (event: FocusEvent) => {
+		isFocused = false;
+		onblur?.(event);
 	};
 
-	// タッチイベント
-	const handleTouchStart = (event: TouchEvent) => {
-		if (disabled) return;
-		ontouchstart?.(event);
+	const handleTriggerClick = (event: MouseEvent) => {
+		popupRef?.toggle();
+		onclick?.(event);
 	};
 
-	const handleTouchEnd = (event: TouchEvent) => {
-		if (disabled) return;
-		ontouchend?.(event);
-	};
+	const handleTriggerKeydown = (event: KeyboardEvent) => {
+		onkeydown?.(event);
 
-	const handleTouchMove = (event: TouchEvent) => {
-		if (disabled) return;
-		ontouchmove?.(event);
+		switch (event.key) {
+			case 'Enter':
+			case ' ':
+			case 'ArrowDown':
+			case 'ArrowUp':
+				event.preventDefault();
+				popupRef?.open();
+				break;
+		}
 	};
 
-	const handleTouchCancel = (event: TouchEvent) => {
-		if (disabled) return;
-		ontouchcancel?.(event);
-	};
+	const handleListClick = (event: MouseEvent) => {
+		const optionEl = (event.target as HTMLElement | null)?.closest<HTMLElement>(
+			'[data-option-index]'
+		);
+		if (!optionEl) return;
 
-	// ポインターイベント
-	const handlePointerDown = (event: PointerEvent) => {
-		if (disabled) return;
-		onpointerdown?.(event);
+		const option = getOptionAt(Number(optionEl.dataset.optionIndex));
+		if (option) selectOption(option);
 	};
 
-	const handlePointerUp = (event: PointerEvent) => {
-		if (disabled) return;
-		onpointerup?.(event);
+	const handleListKeydown = (event: KeyboardEvent) => {
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				moveActiveIndex(1);
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				moveActiveIndex(-1);
+				break;
+			case 'Home':
+				event.preventDefault();
+				if (navigableIndexes.length > 0) setActiveIndex(navigableIndexes[0]);
+				break;
+			case 'End':
+				event.preventDefault();
+				if (navigableIndexes.length > 0)
+					setActiveIndex(navigableIndexes[navigableIndexes.length - 1]);
+				break;
+			case 'Enter':
+			case ' ': {
+				event.preventDefault();
+				const option = getOptionAt(activeIndex);
+				if (option) selectOption(option);
+				break;
+			}
+			case 'Tab':
+				popupRef?.close();
+				break;
+			default:
+				if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+					event.preventDefault();
+					moveByTypeahead(event.key);
+				}
+				break;
+		}
 	};
 
-	const handlePointerEnter = (event: PointerEvent) => {
-		if (disabled) return;
-		onpointerenter?.(event);
-	};
+	const handlePopupOpen = () => {
+		triggerWidth = triggerEl?.offsetWidth ?? 0;
 
-	const handlePointerLeave = (event: PointerEvent) => {
-		if (disabled) return;
-		onpointerleave?.(event);
-	};
+		const selectedIndex = options.findIndex(
+			(option) => option !== 'separator' && option.value === value && !option.disabled
+		);
+		setActiveIndex(selectedIndex >= 0 ? selectedIndex : (navigableIndexes[0] ?? -1));
 
-	const handlePointerMove = (event: PointerEvent) => {
-		if (disabled) return;
-		onpointermove?.(event);
+		tick().then(() => {
+			listEl?.focus();
+		});
 	};
 
-	const handlePointerCancel = (event: PointerEvent) => {
-		if (disabled) return;
-		onpointercancel?.(event);
-	};
+	const handlePopupClose = (reason: CloseReason) => {
+		activeIndex = -1;
+		typeaheadBuffer = '';
+		clearTimeout(typeaheadTimer);
 
-	// 選択イベント
-	const handleChange = () => {
-		onchange?.(value);
-		// 選択完了後にフォーカスを解除
-		if (selectRef) {
-			selectRef.blur();
+		if (reason !== 'outside') {
+			triggerEl?.focus();
 		}
 	};
 </script>
 
 <div
-	class="select
-select--focus-{focusStyle}"
+	class="select select--focus-{focusStyle}"
 	class:select--inline={inline}
 	class:select--full-width={fullWidth}
 	class:select--disabled={disabled}
@@ -323,198 +354,341 @@ select--focus-{focusStyle}"
 	class:select--rounded={rounded}
 	data-testid="select"
 >
-	<select
-		bind:this={selectRef}
+	<button
+		bind:this={triggerEl}
 		{id}
-		{name}
-		aria-label={ariaLabel ?? t('select.accessibleName')}
-		bind:value
-		{disabled}
-		{required}
+		type="button"
+		class="select__trigger"
+		role="combobox"
+		aria-expanded={isPopupOpen}
+		aria-haspopup="listbox"
+		aria-controls={isPopupOpen ? listboxId : undefined}
+		aria-label={accessibleName}
+		aria-required={required ? 'true' : undefined}
 		{tabindex}
-		{size}
+		{disabled}
 		style={customStyle}
 		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}
-		onchange={handleChange}
-		{...restProps}
+		onclick={handleTriggerClick}
+		onkeydown={handleTriggerKeydown}
+		{onkeyup}
+		{onmousedown}
+		{onmouseup}
+		{onmouseenter}
+		{onmouseleave}
+		{onmouseover}
+		{onmouseout}
+		{oncontextmenu}
+		{onauxclick}
+		{ontouchstart}
+		{ontouchend}
+		{ontouchmove}
+		{ontouchcancel}
+		{onpointerdown}
+		{onpointerup}
+		{onpointerenter}
+		{onpointerleave}
+		{onpointermove}
+		{onpointercancel}
 	>
-		<!-- プレースホルダーオプション -->
-		{#if placeholder}
-			<option value="" disabled selected={value === undefined || value === null}>
-				{placeholder}
-			</option>
-		{/if}
-		<!-- 通常のオプション -->
-		{#each options as option (option.value)}
-			<option value={option.value} disabled={option.disabled}>
-				{option.label}
-			</option>
-		{/each}
-	</select>
-	<!-- ドロップダウンアイコン -->
-	<div class="select__dropdown-icon" aria-hidden="true">
-		<Icon>arrow_drop_down</Icon>
-	</div>
+		<span class="select__inner">
+			{#if selectedOption}
+				<span class="select__display-text">{selectedOption.label}</span>
+			{:else if placeholder}
+				<span class="select__placeholder">{placeholder}</span>
+			{/if}
+			<span class="select__dropdown-icon" aria-hidden="true">
+				<Icon>arrow_drop_down</Icon>
+			</span>
+		</span>
+	</button>
+
+	<!-- フォーム送信用（ネイティブ select を使わないため値を hidden で送る） -->
+	{#if name}
+		<input type="hidden" {name} value={value ?? ''} />
+	{/if}
+
+	<Popup
+		bind:this={popupRef}
+		bind:isOpen={isPopupOpen}
+		anchorElement={triggerEl}
+		{position}
+		role="presentation"
+		mobileFullscreen={true}
+		onOpen={handlePopupOpen}
+		onClose={handlePopupClose}
+		margin={4}
+		id={id ? `${id}-popup` : undefined}
+	>
+		<ul
+			bind:this={listEl}
+			id={listboxId}
+			class="select__options"
+			role="listbox"
+			tabindex="-1"
+			aria-label={accessibleName}
+			aria-activedescendant={activeIndex >= 0 ? getOptionId(activeIndex) : undefined}
+			style:--internal-select-trigger-width="{triggerWidth}px"
+			onclick={handleListClick}
+			onkeydown={handleListKeydown}
+		>
+			{#each options as option, index (option === 'separator' ? `separator-${index}` : option.value)}
+				{#if option === 'separator'}
+					<li class="select__separator" role="separator"></li>
+				{:else}
+					<li
+						bind:this={optionEls[index]}
+						id={getOptionId(index)}
+						data-option-index={index}
+						class="select__option"
+						class:select__option--selected={option.value === value}
+						class:select__option--active={index === activeIndex}
+						class:select__option--disabled={option.disabled}
+						role="option"
+						aria-selected={option.value === value}
+						aria-disabled={option.disabled ? 'true' : undefined}
+						onmouseenter={() => {
+							if (!option.disabled) activeIndex = index;
+						}}
+					>
+						<span class="select__option-check">
+							{#if option.value === value}
+								<Icon size="var(--svelte-ui-select-option-check-size)">check</Icon>
+							{/if}
+						</span>
+						<span class="select__option-label">{option.label}</span>
+					</li>
+				{/if}
+			{/each}
+		</ul>
+	</Popup>
 </div>
 
-<style>
-	/* =============================================
+<style>@charset "UTF-8";
+/* =============================================
  * 基本構造・レイアウト
  * ============================================= */
-	.select {
-		display: inline-block;
-		position: relative;
-		width: auto;
-		max-width: 100%;
-		vertical-align: top;
-	}
-
-	/* =============================================
- * 基本コンポーネント
+.select {
+  display: inline-block;
+  position: relative;
+  width: auto;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+/* =============================================
+ * トリガーボタン
  * ============================================= */
-	select {
-		width: 100%;
-		min-height: var(--svelte-ui-select-height);
-		padding: var(--svelte-ui-select-padding);
-		padding-right: var(--svelte-ui-select-icon-space);
-		background: transparent;
-		border: none;
-		border-radius: 0;
-		font-family: inherit;
-		font-size: inherit;
-		font-weight: inherit;
-		color: inherit;
-		line-height: inherit;
-		text-align: inherit;
-		cursor: pointer;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-	}
-
-	.select__dropdown-icon {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		position: absolute;
-		top: 50%;
-		right: 4px;
-		width: 32px;
-		height: 32px;
-		transform: translateY(-50%);
-		color: var(--svelte-ui-select-dropdown-icon-color);
-		pointer-events: none;
-	}
-
-	/* =============================================
+.select__trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--svelte-ui-select-height);
+  padding: var(--svelte-ui-select-padding);
+  padding-right: var(--svelte-ui-select-icon-space);
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  line-height: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.select__inner {
+  position: relative;
+  flex: 1;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.select__display-text,
+.select__placeholder {
+  flex: 1;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select__placeholder {
+  color: var(--svelte-ui-select-placeholder-color);
+}
+
+.select__dropdown-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 4px;
+  margin-top: calc((var(--svelte-ui-select-height) - 32px) / 2);
+  margin-bottom: calc((var(--svelte-ui-select-height) - 32px) / 2);
+  margin-right: calc(0px - var(--svelte-ui-select-icon-space));
+  width: 32px;
+  height: 32px;
+  color: var(--svelte-ui-select-dropdown-icon-color);
+  pointer-events: none;
+}
+
+/* =============================================
  * レイアウトバリエーション
  * ============================================= */
-	.select--full-width {
-		width: 100%;
-	}
-
-	/* =============================================
- * プレースホルダー・オプション表示
- * ============================================= */
-	option[value=''] {
-		color: var(--svelte-ui-select-placeholder-color);
-	}
+.select--full-width {
+  width: 100%;
+}
 
-	/* =============================================
+/* =============================================
  * フォーカス効果バリエーション
  * ============================================= */
-	.select--focus-outline select:focus {
-		outline: var(--svelte-ui-focus-outline-inner);
-		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
-	}
-
-	/* デザインバリアントの背景指定より詳細度を上げるため .select を併記 */
-	.select.select--focus-background select:focus {
-		outline: none;
-		background: var(--svelte-ui-hover-overlay);
-	}
-
-	.select--focus-none select:focus {
-		outline: none;
-	}
-
-	/* =============================================
- * 状態管理（disabled, readonly等）
+.select--focus-outline .select__trigger:focus-visible {
+  outline: var(--svelte-ui-focus-outline-inner);
+  outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+}
+
+/* デザインバリアントの背景指定より詳細度を上げるため .select を併記 */
+.select.select--focus-background .select__trigger:focus-visible {
+  outline: none;
+  background: var(--svelte-ui-hover-overlay);
+}
+
+.select--focus-none .select__trigger:focus-visible {
+  outline: none;
+}
+
+/* =============================================
+ * 状態管理（disabled等）
  * ============================================= */
-	.select--disabled {
-		opacity: var(--svelte-ui-input-disabled-opacity);
-		cursor: not-allowed;
-	}
-
-	.select--disabled select {
-		cursor: not-allowed;
-	}
-
-	select:disabled {
-		opacity: 1;
-	}
-
-	/* =============================================
+.select--disabled {
+  opacity: var(--svelte-ui-input-disabled-opacity);
+  cursor: not-allowed;
+}
+.select--disabled .select__trigger {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* =============================================
  * デザインバリアント：default
  * ============================================= */
-	.select:not(.select--inline) {
-		select {
-			min-height: var(--svelte-ui-select-height);
-			background-color: var(--svelte-ui-select-bg);
-			box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-select-border-color);
-			border: none;
-			border-radius: var(--svelte-ui-select-border-radius);
-			font-size: var(--svelte-ui-font-size);
-			line-height: var(--svelte-ui-select-height);
-		}
-	}
-
-	/* =============================================
+.select:not(.select--inline) .select__trigger {
+  min-height: var(--svelte-ui-select-height);
+  background-color: var(--svelte-ui-select-bg);
+  box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-select-border-color);
+  border: none;
+  border-radius: var(--svelte-ui-select-border-radius);
+  font-size: var(--svelte-ui-font-size);
+}
+
+/* =============================================
  * デザインバリアント：inline
  * ============================================= */
-	.select.select--inline {
-		select {
-			padding: inherit;
-			padding-right: var(--svelte-ui-input-icon-space-inline);
-			background: transparent;
-			border: none;
-			border-radius: 0;
-			color: inherit;
-			min-height: auto;
-			line-height: inherit;
-		}
-
-		.select__dropdown-icon {
-			right: 0;
-		}
-	}
-
-	/* =============================================
+.select.select--inline .select__trigger {
+  padding: inherit;
+  padding-right: var(--svelte-ui-select-icon-space-inline);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  min-height: auto;
+  line-height: inherit;
+}
+.select.select--inline .select__inner {
+  align-self: auto;
+  align-items: flex-start;
+  min-height: 1lh;
+}
+.select.select--inline .select__dropdown-icon {
+  top: calc((1lh - 32px) / 2);
+  right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: calc(0px - var(--svelte-ui-select-icon-space-inline));
+}
+
+/* =============================================
  * デザインバリアント：rounded
  * ============================================= */
-	.select--rounded:not(.select--inline) select {
-		border-radius: var(--svelte-ui-select-border-radius-rounded);
-	}
-</style>
+.select--rounded:not(.select--inline) .select__trigger {
+  border-radius: var(--svelte-ui-select-border-radius-rounded);
+}
+
+/* =============================================
+ * オプションリスト（ポップアップ内）
+ * ============================================= */
+.select__options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  /* トリガー幅に合わせつつ、トリガーが狭いときはテーマの下限を保つ */
+  min-width: max(var(--internal-select-trigger-width, 0px), var(--svelte-ui-select-options-min-width));
+  max-height: var(--svelte-ui-select-options-max-height);
+  overflow-y: auto;
+  outline: none;
+}
+
+.select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--svelte-ui-select-option-gap);
+  padding: var(--svelte-ui-select-option-padding);
+  color: var(--svelte-ui-text-color);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--svelte-ui-transition-duration) ease;
+}
+@media (hover: hover) {
+  .select__option:hover {
+    background-color: var(--svelte-ui-select-option-hover-bg);
+  }
+}
+.select__option.select__option--active {
+  background-color: var(--svelte-ui-select-option-hover-bg);
+}
+.select__option.select__option--selected {
+  background-color: var(--svelte-ui-select-option-selected-bg);
+}
+.select__option.select__option--disabled {
+  opacity: var(--svelte-ui-input-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.select__option-check {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 auto;
+  width: var(--svelte-ui-select-option-check-size);
+  height: var(--svelte-ui-select-option-check-size);
+}
+
+.select__separator {
+  height: 0;
+  margin: var(--svelte-ui-select-separator-margin);
+  border-bottom: solid 1px var(--svelte-ui-select-separator-color);
+}
+
+/* =============================================
+ * モバイル（タッチターゲット確保）
+ * ============================================= */
+@media (max-width: 768px) {
+  .select__option {
+    min-height: var(--svelte-ui-touch-target);
+  }
+}
+:global(.popup--fullscreen) .select__option {
+  min-height: var(--svelte-ui-touch-target-lg);
+  padding: 16px 24px;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .select__option {
+    transition: none;
+  }
+}</style>

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/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.69",
 	"type": "module",
 	"keywords": [
 		"svelte",