@salmexio/ui 0.2.0 → 0.3.0

package/dist/forms/Select/Select.svelte

@@ -0,0 +1,883 @@
+<!--
+  @component Select
+
+  Win2K × Basquiat — Dropdown select with sunken trigger field, raised panel,
+  keyboard-first navigation, type-ahead search, option groups, and multi-select.
+
+  Follows WAI-ARIA APG Select-Only Combobox pattern: DOM focus stays on
+  the trigger button; visual focus in the listbox is communicated via
+  aria-activedescendant. The dropdown is portaled to document.body via
+  $effect to escape transforms/overflow on ancestor elements.
+
+  @example
+  <Select
+    label="Country"
+    options={[{ value: 'us', label: 'United States' }, { value: 'uk', label: 'United Kingdom' }]}
+    bind:value={selectedCountry}
+  />
+-->
+<script lang="ts" module>
+export interface SelectOption {
+	value: string;
+	label: string;
+	disabled?: boolean;
+}
+
+export interface SelectGroup {
+	label: string;
+	options: SelectOption[];
+}
+</script>
+
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { Keys } from '../../utils/keyboard.js';
+import { onMount, tick } from 'svelte';
+
+type SelectSize = 'sm' | 'md' | 'lg';
+
+interface Props {
+	/** Visible label (required for a11y) */
+	label: string;
+	/** Flat list of options */
+	options?: SelectOption[];
+	/** Grouped options (mutually exclusive with options) */
+	groups?: SelectGroup[];
+	/** Selected value (single mode) */
+	value?: string;
+	/** Selected values (multi mode) */
+	values?: string[];
+	/** Enable multi-select with checkboxes */
+	multiple?: boolean;
+	/** Placeholder when nothing selected */
+	placeholder?: string;
+	/** Error message */
+	error?: string;
+	/** Hint text */
+	hint?: string;
+	/** Size variant */
+	size?: SelectSize;
+	/** Disabled state */
+	disabled?: boolean;
+	/** Required field */
+	required?: boolean;
+	/** Hide label visually (still accessible) */
+	hideLabel?: boolean;
+	/** Additional CSS class */
+	class?: string;
+	/** Called when value changes (single mode) */
+	onchange?: (value: string) => void;
+	/** Called when values change (multi mode) */
+	onchangemulti?: (values: string[]) => void;
+	/** Test ID */
+	testId?: string;
+}
+
+let {
+	label,
+	options = [],
+	groups = [],
+	value = $bindable(''),
+	values = $bindable([]),
+	multiple = false,
+	placeholder = 'Select an option',
+	error = '',
+	hint = '',
+	size = 'md',
+	disabled = false,
+	required = false,
+	hideLabel = false,
+	class: className = '',
+	onchange,
+	onchangemulti,
+	testId
+}: Props = $props();
+
+const id = `select-${Math.random().toString(36).slice(2, 9)}`;
+const listboxId = `${id}-listbox`;
+const labelId = `${id}-label`;
+const errorId = `${id}-error`;
+const hintId = `${id}-hint`;
+
+let isOpen = $state(false);
+let activeIndex = $state(-1);
+let typeAhead = $state('');
+let typeAheadTimer: ReturnType<typeof setTimeout> | undefined;
+let triggerEl = $state<HTMLButtonElement | null>(null);
+let listboxEl = $state<HTMLDivElement | null>(null);
+let hasInteracted = $state(false);
+
+// Fixed-position coordinates for the dropdown
+let panelTop = $state(0);
+let panelLeft = $state(0);
+let panelWidth = $state(0);
+let panelMaxHeight = $state(260);
+let placeAbove = $state(false);
+
+// Flatten all options for keyboard navigation
+const flatOptions = $derived<SelectOption[]>(
+	groups.length > 0
+		? groups.flatMap((g) => g.options)
+		: options
+);
+
+const enabledIndices = $derived(
+	flatOptions.map((o, i) => ({ i, disabled: o.disabled })).filter((x) => !x.disabled).map((x) => x.i)
+);
+
+const selectedOption = $derived(
+	multiple ? null : flatOptions.find((o) => o.value === value)
+);
+
+const selectedLabels = $derived(
+	multiple
+		? flatOptions.filter((o) => values.includes(o.value)).map((o) => o.label)
+		: []
+);
+
+const displayText = $derived(
+	multiple
+		? selectedLabels.length > 0
+			? selectedLabels.length <= 2
+				? selectedLabels.join(', ')
+				: `${selectedLabels.length} selected`
+			: placeholder
+		: selectedOption?.label ?? placeholder
+);
+
+const showError = $derived(hasInteracted && !!error);
+
+const ariaDescribedBy = $derived(
+	[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+);
+
+function positionDropdown() {
+	if (!triggerEl) return;
+	const rect = triggerEl.getBoundingClientRect();
+	const viewportH = window.innerHeight;
+	const spaceBelow = viewportH - rect.bottom;
+	const spaceAbove = rect.top;
+	const maxH = 260;
+
+	// Prefer below; flip above if not enough room below but more room above
+	placeAbove = spaceBelow < Math.min(maxH, 150) && spaceAbove > spaceBelow;
+
+	panelLeft = rect.left;
+	panelWidth = rect.width;
+
+	if (placeAbove) {
+		panelMaxHeight = Math.min(maxH, spaceAbove - 8);
+		panelTop = rect.top - 2; // 2px gap
+	} else {
+		panelMaxHeight = Math.min(maxH, spaceBelow - 8);
+		panelTop = rect.bottom + 2; // 2px gap
+	}
+}
+
+function openDropdown() {
+	if (disabled) return;
+	isOpen = true;
+	// Set active to current value or first enabled
+	const currentIdx = flatOptions.findIndex((o) => o.value === value);
+	activeIndex = currentIdx >= 0 ? currentIdx : (enabledIndices[0] ?? -1);
+
+	positionDropdown();
+
+	// After render, scroll active option into view within the listbox
+	tick().then(() => scrollActiveIntoView());
+}
+
+function closeDropdown() {
+	isOpen = false;
+	activeIndex = -1;
+}
+
+function toggle() {
+	if (isOpen) closeDropdown();
+	else openDropdown();
+}
+
+function selectOption(opt: SelectOption) {
+	if (opt.disabled) return;
+	if (multiple) {
+		const next = values.includes(opt.value)
+			? values.filter((v) => v !== opt.value)
+			: [...values, opt.value];
+		values = next;
+		onchangemulti?.(next);
+	} else {
+		value = opt.value;
+		onchange?.(opt.value);
+		closeDropdown();
+	}
+	hasInteracted = true;
+	// Focus stays on trigger per APG pattern
+	triggerEl?.focus();
+}
+
+function scrollActiveIntoView() {
+	if (!listboxEl || activeIndex < 0) return;
+	const active = listboxEl.querySelector(`[data-option-index="${activeIndex}"]`) as HTMLElement;
+	if (!active) return;
+	// Manual scroll math — only scrolls the listbox, never the page
+	const listTop = listboxEl.scrollTop;
+	const listHeight = listboxEl.clientHeight;
+	const elTop = active.offsetTop;
+	const elHeight = active.offsetHeight;
+	if (elTop < listTop) {
+		listboxEl.scrollTop = elTop;
+	} else if (elTop + elHeight > listTop + listHeight) {
+		listboxEl.scrollTop = elTop + elHeight - listHeight;
+	}
+}
+
+function navigateUp() {
+	const pos = enabledIndices.indexOf(activeIndex);
+	if (pos > 0) {
+		activeIndex = enabledIndices[pos - 1];
+		scrollActiveIntoView();
+	}
+}
+
+function navigateDown() {
+	const pos = enabledIndices.indexOf(activeIndex);
+	if (pos < enabledIndices.length - 1) {
+		activeIndex = enabledIndices[pos + 1];
+		scrollActiveIntoView();
+	}
+}
+
+function handleTypeAhead(char: string) {
+	typeAhead += char.toLowerCase();
+	clearTimeout(typeAheadTimer);
+	typeAheadTimer = setTimeout(() => (typeAhead = ''), 500);
+
+	// If all chars are the same, cycle through matches starting with that char
+	const allSame = typeAhead.split('').every((c) => c === typeAhead[0]);
+	if (allSame && typeAhead.length > 1) {
+		const singleChar = typeAhead[0];
+		const matches = enabledIndices.filter((i) =>
+			flatOptions[i].label.toLowerCase().startsWith(singleChar)
+		);
+		if (matches.length > 0) {
+			const currentMatchPos = matches.indexOf(activeIndex);
+			const nextPos = (currentMatchPos + 1) % matches.length;
+			activeIndex = matches[nextPos];
+			scrollActiveIntoView();
+		}
+	} else {
+		// Multi-char prefix search
+		const match = enabledIndices.find((i) =>
+			flatOptions[i].label.toLowerCase().startsWith(typeAhead)
+		);
+		if (match !== undefined) {
+			activeIndex = match;
+			scrollActiveIntoView();
+		}
+	}
+}
+
+// Single unified keydown handler on the trigger (DOM focus always stays here)
+function handleKeydown(e: KeyboardEvent) {
+	if (!isOpen) {
+		// --- CLOSED STATE ---
+		switch (e.key) {
+			case Keys.Enter:
+			case Keys.Space:
+			case Keys.ArrowDown:
+				e.preventDefault();
+				openDropdown();
+				return;
+			case Keys.ArrowUp:
+				e.preventDefault();
+				openDropdown();
+				// Jump to last enabled
+				activeIndex = enabledIndices[enabledIndices.length - 1] ?? -1;
+				tick().then(() => scrollActiveIntoView());
+				return;
+			case Keys.Home:
+				e.preventDefault();
+				openDropdown();
+				activeIndex = enabledIndices[0] ?? -1;
+				tick().then(() => scrollActiveIntoView());
+				return;
+			case Keys.End:
+				e.preventDefault();
+				openDropdown();
+				activeIndex = enabledIndices[enabledIndices.length - 1] ?? -1;
+				tick().then(() => scrollActiveIntoView());
+				return;
+			default:
+				// Type-ahead opens the dropdown
+				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+					e.preventDefault();
+					openDropdown();
+					handleTypeAhead(e.key);
+				}
+				return;
+		}
+	}
+
+	// --- OPEN STATE ---
+	switch (e.key) {
+		case Keys.ArrowDown:
+			e.preventDefault();
+			navigateDown();
+			break;
+		case Keys.ArrowUp:
+			e.preventDefault();
+			navigateUp();
+			break;
+		case Keys.Home:
+			e.preventDefault();
+			activeIndex = enabledIndices[0] ?? -1;
+			scrollActiveIntoView();
+			break;
+		case Keys.End:
+			e.preventDefault();
+			activeIndex = enabledIndices[enabledIndices.length - 1] ?? -1;
+			scrollActiveIntoView();
+			break;
+		case Keys.Enter:
+		case Keys.Space:
+			e.preventDefault();
+			if (activeIndex >= 0) selectOption(flatOptions[activeIndex]);
+			break;
+		case Keys.Escape:
+			e.preventDefault();
+			closeDropdown();
+			break;
+		case Keys.Tab:
+			// Per APG: Tab selects current option and closes
+			if (activeIndex >= 0 && !multiple) {
+				selectOption(flatOptions[activeIndex]);
+			} else {
+				closeDropdown();
+			}
+			break;
+		default:
+			// Type-ahead search while open
+			if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+				e.preventDefault();
+				handleTypeAhead(e.key);
+			}
+	}
+}
+
+function handleOptionMouseDown(e: MouseEvent, opt: SelectOption) {
+	// preventDefault keeps focus on trigger (crucial for the combobox pattern)
+	e.preventDefault();
+	selectOption(opt);
+}
+
+function handleOptionMouseEnter(index: number, opt: SelectOption) {
+	if (!opt.disabled) activeIndex = index;
+}
+
+function handleClickOutside(e: MouseEvent) {
+	const target = e.target as Node;
+	if (triggerEl?.contains(target)) return;
+	if (listboxEl?.contains(target)) return;
+	closeDropdown();
+}
+
+function getOptionId(index: number) {
+	return `${id}-option-${index}`;
+}
+
+function getGlobalIndex(groupIdx: number, optIdx: number): number {
+	let offset = 0;
+	for (let g = 0; g < groupIdx; g++) {
+		offset += groups[g].options.length;
+	}
+	return offset + optIdx;
+}
+
+// Reposition on scroll/resize when open
+function handleReposition() {
+	if (isOpen) positionDropdown();
+}
+
+// Portal: move listbox DOM node to document.body to escape transform/overflow ancestors
+$effect(() => {
+	if (listboxEl && isOpen) {
+		document.body.appendChild(listboxEl);
+		return () => {
+			// Svelte will clean up the node; if still in body, remove it
+			if (listboxEl?.parentNode === document.body) {
+				document.body.removeChild(listboxEl);
+			}
+		};
+	}
+});
+
+onMount(() => {
+	document.addEventListener('mousedown', handleClickOutside);
+	window.addEventListener('scroll', handleReposition, true);
+	window.addEventListener('resize', handleReposition);
+
+	return () => {
+		document.removeEventListener('mousedown', handleClickOutside);
+		window.removeEventListener('scroll', handleReposition, true);
+		window.removeEventListener('resize', handleReposition);
+		clearTimeout(typeAheadTimer);
+		// Clean up portaled node if still in body
+		if (listboxEl?.parentNode === document.body) {
+			document.body.removeChild(listboxEl);
+		}
+	};
+});
+</script>
+
+<div
+	class={cn('salmex-select-wrapper', `salmex-select-${size}`, className)}
+	data-testid={testId}
+>
+	<!-- Label -->
+	<label
+		id={labelId}
+		for={id}
+		class={cn('salmex-select-label', hideLabel && 'salmex-sr-only')}
+	>
+		{label}
+		{#if required}<span class="salmex-select-required" aria-hidden="true">*</span>{/if}
+	</label>
+
+	<!-- Trigger button — DOM focus always stays here -->
+	<button
+		bind:this={triggerEl}
+		{id}
+		type="button"
+		class={cn(
+			'salmex-select-trigger',
+			isOpen && 'salmex-select-trigger-open',
+			showError && 'salmex-select-trigger-error',
+			disabled && 'salmex-select-trigger-disabled'
+		)}
+		role="combobox"
+		aria-expanded={isOpen}
+		aria-haspopup="listbox"
+		aria-controls={isOpen ? listboxId : undefined}
+		aria-activedescendant={isOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined}
+		aria-labelledby={labelId}
+		aria-describedby={ariaDescribedBy}
+		aria-required={required}
+		aria-invalid={showError}
+		{disabled}
+		onclick={toggle}
+		onkeydown={handleKeydown}
+	>
+		<span class="salmex-select-value" class:salmex-select-placeholder={!selectedOption && selectedLabels.length === 0}>
+			{displayText}
+		</span>
+		<span class="salmex-select-chevron" aria-hidden="true">
+			<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+				<path d="M3 4.5L6 7.5L9 4.5" />
+			</svg>
+		</span>
+	</button>
+
+	<!-- Footer: error / hint -->
+	<div class="salmex-select-footer">
+		{#if showError}
+			<p id={errorId} class="salmex-select-error" role="alert" aria-live="assertive">{error}</p>
+		{:else if hint}
+			<p id={hintId} class="salmex-select-hint">{hint}</p>
+		{/if}
+	</div>
+</div>
+
+<!-- Dropdown panel — fixed positioning to escape overflow/stacking contexts -->
+{#if isOpen}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		bind:this={listboxEl}
+		id={listboxId}
+		class="salmex-select-panel"
+		style="position:fixed;left:{panelLeft}px;{placeAbove ? `bottom:${window.innerHeight - panelTop}px` : `top:${panelTop}px`};width:{panelWidth}px;max-height:{panelMaxHeight}px;"
+		role="listbox"
+		aria-labelledby={labelId}
+		aria-multiselectable={multiple || undefined}
+		tabindex="-1"
+		onmousedown={(e) => e.preventDefault()}
+	>
+		{#if groups.length > 0}
+			{#each groups as group, gi}
+				<div role="group" aria-label={group.label}>
+					<div class="salmex-select-group-label">{group.label}</div>
+					{#each group.options as opt, oi}
+						{@const globalIdx = getGlobalIndex(gi, oi)}
+						{@const isActive = globalIdx === activeIndex}
+						{@const isSelected = multiple ? values.includes(opt.value) : opt.value === value}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							id={getOptionId(globalIdx)}
+							class={cn(
+								'salmex-select-option',
+								isActive && 'salmex-select-option-active',
+								isSelected && 'salmex-select-option-selected',
+								opt.disabled && 'salmex-select-option-disabled'
+							)}
+							role="option"
+							tabindex="-1"
+							aria-selected={isSelected}
+							aria-disabled={opt.disabled || undefined}
+							data-option-index={globalIdx}
+							onmouseenter={() => handleOptionMouseEnter(globalIdx, opt)}
+							onmousedown={(e) => handleOptionMouseDown(e, opt)}
+						>
+							{#if multiple}
+								<span class="salmex-select-check" aria-hidden="true">
+									{#if isSelected}
+										<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2.5 6L5 8.5L9.5 3.5" /></svg>
+									{/if}
+								</span>
+							{/if}
+							<span class="salmex-select-option-label">{opt.label}</span>
+							{#if !multiple && isSelected}
+								<span class="salmex-select-checkmark" aria-hidden="true">
+									<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2.5 6L5 8.5L9.5 3.5" /></svg>
+								</span>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/each}
+		{:else}
+			{#each flatOptions as opt, i}
+				{@const isActive = i === activeIndex}
+				{@const isSelected = multiple ? values.includes(opt.value) : opt.value === value}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					id={getOptionId(i)}
+					class={cn(
+						'salmex-select-option',
+						isActive && 'salmex-select-option-active',
+						isSelected && 'salmex-select-option-selected',
+						opt.disabled && 'salmex-select-option-disabled'
+					)}
+					role="option"
+					tabindex="-1"
+					aria-selected={isSelected}
+					aria-disabled={opt.disabled || undefined}
+					data-option-index={i}
+					onmouseenter={() => handleOptionMouseEnter(i, opt)}
+					onmousedown={(e) => handleOptionMouseDown(e, opt)}
+				>
+					{#if multiple}
+						<span class="salmex-select-check" aria-hidden="true">
+							{#if isSelected}
+								<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2.5 6L5 8.5L9.5 3.5" /></svg>
+							{/if}
+						</span>
+					{/if}
+					<span class="salmex-select-option-label">{opt.label}</span>
+					{#if !multiple && isSelected}
+						<span class="salmex-select-checkmark" aria-hidden="true">
+							<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M2.5 6L5 8.5L9.5 3.5" /></svg>
+						</span>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+	</div>
+{/if}
+
+<style>
+	/* ========================================
+	   WRAPPER
+	   ======================================== */
+	.salmex-select-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--salmex-space-1);
+		font-family: var(--salmex-font-system);
+	}
+
+	/* ========================================
+	   LABEL
+	   ======================================== */
+	.salmex-select-label {
+		font-size: var(--salmex-font-size-sm);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.3px;
+		color: rgb(var(--salmex-text-primary));
+	}
+
+	.salmex-select-required {
+		color: rgb(var(--salmex-street-red));
+		margin-left: 2px;
+	}
+
+	.salmex-sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* ========================================
+	   TRIGGER — Sunken field matching TextInput
+	   ======================================== */
+	.salmex-select-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--salmex-space-2);
+		width: 100%;
+		border: 2px solid rgb(var(--salmex-border-dark));
+		background: rgb(var(--salmex-bg-primary));
+		color: rgb(var(--salmex-text-primary));
+		font-family: var(--salmex-font-system);
+		font-weight: 600;
+		cursor: pointer;
+		text-align: left;
+		transition: all var(--salmex-transition-fast);
+		/* Sunken inset — same as TextInput */
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
+			inset -1px -1px 0 rgb(var(--salmex-button-highlight));
+	}
+
+	.salmex-select-trigger:hover:not(:disabled) {
+		border-color: rgb(var(--salmex-text-primary));
+	}
+
+	.salmex-select-trigger:focus-visible {
+		outline: none;
+		border-color: rgb(var(--salmex-text-primary));
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
+			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
+			0 0 0 2px rgb(var(--salmex-midnight-black)),
+			0 0 0 5px rgb(var(--salmex-crown-yellow));
+	}
+
+	:global([data-theme='dark']) .salmex-select-trigger:focus-visible {
+		box-shadow:
+			inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
+			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
+			0 0 0 3px rgb(var(--salmex-crown-yellow));
+	}
+
+	.salmex-select-trigger-open {
+		border-color: rgb(var(--salmex-text-primary));
+	}
+
+	.salmex-select-trigger-error {
+		border-color: rgb(var(--salmex-street-red));
+	}
+
+	.salmex-select-trigger-disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		filter: grayscale(0.5);
+	}
+
+	/* ========================================
+	   SIZES
+	   ======================================== */
+	.salmex-select-sm .salmex-select-trigger {
+		min-height: 28px;
+		padding: 0 var(--salmex-space-3);
+		font-size: var(--salmex-font-size-xs);
+	}
+
+	.salmex-select-md .salmex-select-trigger {
+		min-height: 36px;
+		padding: 0 var(--salmex-space-4);
+		font-size: var(--salmex-font-size-base);
+	}
+
+	.salmex-select-lg .salmex-select-trigger {
+		min-height: 44px;
+		padding: 0 var(--salmex-space-5);
+		font-size: var(--salmex-font-size-md);
+	}
+
+	/* ========================================
+	   VALUE DISPLAY
+	   ======================================== */
+	.salmex-select-value {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.salmex-select-placeholder {
+		color: rgb(var(--salmex-text-disabled));
+	}
+
+	.salmex-select-chevron {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		transition: transform var(--salmex-transition-fast);
+		color: rgb(var(--salmex-text-secondary));
+	}
+
+	.salmex-select-trigger-open .salmex-select-chevron {
+		transform: rotate(180deg);
+	}
+
+	/* ========================================
+	   DROPDOWN PANEL — Raised, bold shadow, fixed position
+	   ======================================== */
+	.salmex-select-panel {
+		z-index: var(--salmex-z-dropdown);
+		overflow-y: auto;
+		overflow-x: hidden;
+		background: rgb(var(--salmex-bg-primary));
+		border: 3px solid rgb(var(--salmex-border-dark));
+		box-shadow:
+			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
+			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
+			5px 5px 0 rgb(0 0 0 / 0.35);
+		outline: none;
+		padding: var(--salmex-space-1) 0;
+		font-family: var(--salmex-font-system);
+	}
+
+	:global([data-theme='dark']) .salmex-select-panel {
+		box-shadow:
+			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
+			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
+			5px 5px 0 rgb(0 0 0 / 0.7);
+	}
+
+	/* ========================================
+	   OPTION
+	   ======================================== */
+	.salmex-select-option {
+		display: flex;
+		align-items: center;
+		gap: var(--salmex-space-2);
+		padding: var(--salmex-space-2) var(--salmex-space-4);
+		font-size: var(--salmex-font-size-sm);
+		font-weight: 600;
+		color: rgb(var(--salmex-text-primary));
+		cursor: pointer;
+		user-select: none;
+		transition: background var(--salmex-transition-fast);
+	}
+
+	.salmex-select-option-active {
+		background: rgb(var(--salmex-electric-blue));
+		color: rgb(var(--salmex-chalk-white));
+	}
+
+	:global([data-theme='dark']) .salmex-select-option-active {
+		background: rgb(var(--salmex-primary-light));
+		color: rgb(var(--salmex-midnight-black));
+	}
+
+	.salmex-select-option-selected:not(.salmex-select-option-active) {
+		background: rgb(var(--salmex-electric-blue) / 0.1);
+	}
+
+	:global([data-theme='dark']) .salmex-select-option-selected:not(.salmex-select-option-active) {
+		background: rgb(var(--salmex-primary-light) / 0.15);
+	}
+
+	.salmex-select-option-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.salmex-select-option-label {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* Checkmark for single select */
+	.salmex-select-checkmark {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		color: rgb(var(--salmex-electric-blue));
+	}
+
+	.salmex-select-option-active .salmex-select-checkmark {
+		color: rgb(var(--salmex-chalk-white));
+	}
+
+	:global([data-theme='dark']) .salmex-select-option-active .salmex-select-checkmark {
+		color: rgb(var(--salmex-midnight-black));
+	}
+
+	/* Checkbox square for multi select */
+	.salmex-select-check {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		border: 2px solid rgb(var(--salmex-border-dark));
+		background: rgb(var(--salmex-bg-primary));
+		box-shadow:
+			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
+			inset -1px -1px 0 rgb(var(--salmex-button-highlight));
+	}
+
+	.salmex-select-option-active .salmex-select-check {
+		border-color: rgb(var(--salmex-chalk-white));
+	}
+
+	:global([data-theme='dark']) .salmex-select-option-active .salmex-select-check {
+		border-color: rgb(var(--salmex-midnight-black));
+	}
+
+	/* ========================================
+	   GROUP LABELS
+	   ======================================== */
+	.salmex-select-group-label {
+		padding: var(--salmex-space-2) var(--salmex-space-4) var(--salmex-space-1);
+		font-size: var(--salmex-font-size-xs);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.4px;
+		color: rgb(var(--salmex-text-secondary));
+		user-select: none;
+	}
+
+	/* ========================================
+	   FOOTER — Error / Hint
+	   ======================================== */
+	.salmex-select-footer {
+		min-height: 18px;
+	}
+
+	.salmex-select-error {
+		font-size: var(--salmex-font-size-xs);
+		font-weight: 600;
+		color: rgb(var(--salmex-street-red));
+		margin: 0;
+	}
+
+	.salmex-select-hint {
+		font-size: var(--salmex-font-size-xs);
+		color: rgb(var(--salmex-text-secondary));
+		margin: 0;
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-select-trigger,
+		.salmex-select-option,
+		.salmex-select-chevron {
+			transition: none;
+		}
+	}
+</style>