@14ch/svelte-ui 0.0.68 → 0.0.70

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,212 @@
 		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);
-	};
+	// アイコンの領域は customStyle で消されないよう、customStyle より後ろに指定する
+	const triggerStyle = $derived(
+		[customStyle, `padding-right: var(--svelte-ui-select-icon-space${inline ? '-inline' : ''})`]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	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 +361,334 @@ 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}
-		style={customStyle}
+		{disabled}
+		style={triggerStyle}
 		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);
+  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 {
+  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: 50%;
+  right: 4px;
+  transform: translateY(-50%);
+  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;
+  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;
+  transform: none;
+}
+
+/* =============================================
  * デザインバリアント：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>