@salmexio/ui 1.2.0 → 1.3.0

package/dist/forms/MultiSelect/MultiSelect.svelte

@@ -0,0 +1,820 @@
+<!--
+  @component MultiSelect
+
+  INFRARED — Multi-selection with removable chips, searchable dropdown,
+  max selection limit, and keyboard navigation.
+  Uses WAI-ARIA combobox + listbox pattern.
+
+  @example
+  <MultiSelect
+    label="Capabilities"
+    options={[
+      { value: 'code', label: 'Code generation' },
+      { value: 'search', label: 'Web search' },
+      { value: 'vision', label: 'Image analysis' },
+    ]}
+    bind:values={selectedCaps}
+    maxSelections={5}
+  />
+-->
+<script lang="ts" module>
+export interface MultiSelectOption {
+	value: string;
+	label: string;
+	disabled?: boolean;
+}
+
+export interface MultiSelectGroup {
+	label: string;
+	options: MultiSelectOption[];
+}
+</script>
+
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { Keys, generateId } from '../../utils/keyboard.js';
+import { onMount, tick } from 'svelte';
+
+type MultiSelectSize = 'sm' | 'md' | 'lg';
+
+interface Props {
+	/** Visible label. */
+	label: string;
+	/** Flat list of options. */
+	options?: MultiSelectOption[];
+	/** Grouped options. */
+	groups?: MultiSelectGroup[];
+	/** Selected values (bindable). */
+	values?: string[];
+	/** Placeholder when nothing selected. */
+	placeholder?: string;
+	/** Enable search filtering. */
+	searchable?: boolean;
+	/** Max number of selections allowed. */
+	maxSelections?: number;
+	/** Error message. */
+	error?: string;
+	/** Hint text. */
+	hint?: string;
+	/** Size variant. */
+	size?: MultiSelectSize;
+	/** Disabled state. */
+	disabled?: boolean;
+	/** Required field. */
+	required?: boolean;
+	/** Hide the visible label. */
+	hideLabel?: boolean;
+	/** Reserve footer space even when empty. */
+	alwaysShowFooter?: boolean;
+	/** Additional CSS class. */
+	class?: string;
+	/** Called when values change. */
+	onchange?: (values: string[]) => void;
+	/** Test ID. */
+	testId?: string;
+}
+
+let {
+	label,
+	options = [],
+	groups = [],
+	values = $bindable([]),
+	placeholder = 'Select options...',
+	searchable = true,
+	maxSelections,
+	error = '',
+	hint = '',
+	size = 'md',
+	disabled = false,
+	required = false,
+	hideLabel = false,
+	alwaysShowFooter = true,
+	class: className = '',
+	onchange,
+	testId
+}: Props = $props();
+
+const id = generateId('multiselect');
+const listboxId = `${id}-listbox`;
+const labelId = `${id}-label`;
+const errorId = `${id}-error`;
+const hintId = `${id}-hint`;
+
+let triggerEl = $state<HTMLDivElement | null>(null);
+let inputRef = $state<HTMLInputElement | null>(null);
+let listboxEl = $state<HTMLDivElement | null>(null);
+let isOpen = $state(false);
+let activeIndex = $state(-1);
+let searchQuery = $state('');
+let hasInteracted = $state(false);
+
+let panelTop = $state(0);
+let panelLeft = $state(0);
+let panelWidth = $state(0);
+let panelMaxHeight = $state(260);
+let placeAbove = $state(false);
+
+const flatOptions = $derived<MultiSelectOption[]>(
+	groups.length > 0
+		? groups.flatMap((g) => g.options)
+		: options
+);
+
+const filteredFlat = $derived<MultiSelectOption[]>(
+	searchQuery
+		? flatOptions.filter((o) => o.label.toLowerCase().includes(searchQuery.toLowerCase()))
+		: flatOptions
+);
+
+const filteredGroups = $derived(
+	groups.length > 0 && searchQuery
+		? groups
+				.map((g) => ({
+					...g,
+					options: g.options.filter((o) =>
+						o.label.toLowerCase().includes(searchQuery.toLowerCase())
+					),
+				}))
+				.filter((g) => g.options.length > 0)
+		: groups
+);
+
+const displayOptions = $derived<MultiSelectOption[]>(
+	groups.length > 0
+		? (searchQuery ? filteredGroups : groups).flatMap((g) => g.options)
+		: filteredFlat
+);
+
+const enabledIndices = $derived(
+	displayOptions
+		.map((o, i) => ({
+			i,
+			disabled: o.disabled || (!!maxSelections && values.length >= maxSelections && !values.includes(o.value)),
+		}))
+		.filter((x) => !x.disabled)
+		.map((x) => x.i)
+);
+
+const selectedOptions = $derived(
+	flatOptions.filter((o) => values.includes(o.value))
+);
+
+const showError = $derived(hasInteracted && !!error);
+const atMax = $derived(!!maxSelections && values.length >= maxSelections);
+
+const ariaDescribedBy = $derived(
+	[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+);
+const hasFooterContent = $derived(showError || !!hint);
+
+// Clamp activeIndex when filtered list changes
+$effect(() => {
+	if (isOpen && activeIndex >= displayOptions.length) {
+		activeIndex = -1;
+	}
+});
+
+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;
+
+	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;
+	} else {
+		panelMaxHeight = Math.min(maxH, spaceBelow - 8);
+		panelTop = rect.bottom + 2;
+	}
+}
+
+function openDropdown() {
+	if (disabled) return;
+	isOpen = true;
+	activeIndex = -1;
+	searchQuery = '';
+	positionDropdown();
+	tick().then(() => inputRef?.focus());
+}
+
+function closeDropdown() {
+	isOpen = false;
+	activeIndex = -1;
+	searchQuery = '';
+}
+
+function toggleOption(opt: MultiSelectOption) {
+	if (opt.disabled) return;
+	const isSelected = values.includes(opt.value);
+	if (isSelected) {
+		values = values.filter((v) => v !== opt.value);
+	} else if (!atMax) {
+		values = [...values, opt.value];
+	}
+	hasInteracted = true;
+	onchange?.(values);
+}
+
+function removeChip(optValue: string) {
+	values = values.filter((v) => v !== optValue);
+	hasInteracted = true;
+	onchange?.(values);
+	if (isOpen) inputRef?.focus();
+}
+
+function scrollActiveIntoView() {
+	if (!listboxEl || activeIndex < 0) return;
+	const active = listboxEl.querySelector(`[data-option-index="${activeIndex}"]`) as HTMLElement;
+	if (!active) return;
+	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 handleKeydown(e: KeyboardEvent) {
+	if (!isOpen) {
+		if (e.key === Keys.Enter || e.key === Keys.Space || e.key === Keys.ArrowDown) {
+			e.preventDefault();
+			openDropdown();
+		}
+		return;
+	}
+
+	switch (e.key) {
+		case Keys.ArrowDown:
+			e.preventDefault();
+			{
+				const pos = enabledIndices.indexOf(activeIndex);
+				if (pos < enabledIndices.length - 1) {
+					activeIndex = enabledIndices[pos + 1];
+				} else if (pos === -1 && enabledIndices.length > 0) {
+					activeIndex = enabledIndices[0];
+				}
+				tick().then(scrollActiveIntoView);
+			}
+			break;
+		case Keys.ArrowUp:
+			e.preventDefault();
+			{
+				const pos = enabledIndices.indexOf(activeIndex);
+				if (pos > 0) {
+					activeIndex = enabledIndices[pos - 1];
+				}
+				tick().then(scrollActiveIntoView);
+			}
+			break;
+		case Keys.Enter:
+			e.preventDefault();
+			if (activeIndex >= 0 && displayOptions[activeIndex]) {
+				toggleOption(displayOptions[activeIndex]);
+			}
+			break;
+		case Keys.Space:
+			// Allow typing spaces in the search input
+			if (searchable && document.activeElement === inputRef) break;
+			e.preventDefault();
+			if (activeIndex >= 0 && displayOptions[activeIndex]) {
+				toggleOption(displayOptions[activeIndex]);
+			}
+			break;
+		case Keys.Escape:
+			e.preventDefault();
+			closeDropdown();
+			triggerEl?.focus();
+			break;
+		case 'Backspace':
+			if (searchQuery === '' && values.length > 0) {
+				removeChip(values[values.length - 1]);
+			}
+			break;
+		case Keys.Home:
+			e.preventDefault();
+			if (enabledIndices.length > 0) {
+				activeIndex = enabledIndices[0];
+				tick().then(scrollActiveIntoView);
+			}
+			break;
+		case Keys.End:
+			e.preventDefault();
+			if (enabledIndices.length > 0) {
+				activeIndex = enabledIndices[enabledIndices.length - 1];
+				tick().then(scrollActiveIntoView);
+			}
+			break;
+	}
+}
+
+function handleClickOutside(e: MouseEvent) {
+	const target = e.target as Node;
+	if (triggerEl?.contains(target)) return;
+	if (listboxEl?.contains(target)) return;
+	closeDropdown();
+}
+
+function handleReposition() {
+	if (isOpen) positionDropdown();
+}
+
+function getOptionId(index: number) {
+	return `${id}-option-${index}`;
+}
+
+function getGlobalIndex(groupIdx: number, optIdx: number): number {
+	const srcGroups = searchQuery ? filteredGroups : groups;
+	let offset = 0;
+	for (let g = 0; g < groupIdx; g++) {
+		offset += srcGroups[g].options.length;
+	}
+	return offset + optIdx;
+}
+
+$effect(() => {
+	if (listboxEl && isOpen) {
+		document.body.appendChild(listboxEl);
+		return () => {
+			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);
+		if (listboxEl?.parentNode === document.body) {
+			document.body.removeChild(listboxEl);
+		}
+	};
+});
+</script>
+
+<div
+	class={cn('sx-multi-wrapper', `sx-multi-${size}`, disabled && 'sx-multi-disabled', className)}
+	data-testid={testId}
+>
+	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<label id={labelId} class={cn('sx-multi-label', hideLabel && 'sx-sr-only')}>
+		{label}
+		{#if required}
+			<span class="sx-multi-required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		bind:this={triggerEl}
+		class={cn(
+			'sx-multi-trigger',
+			isOpen && 'sx-multi-trigger-open',
+			showError && 'sx-multi-trigger-error',
+			disabled && 'sx-multi-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 || undefined}
+		aria-invalid={showError || undefined}
+		tabindex={disabled ? -1 : 0}
+		onclick={() => { if (!isOpen) openDropdown(); }}
+		onkeydown={handleKeydown}
+	>
+		<div class="sx-multi-chips">
+			{#each selectedOptions as opt (opt.value)}
+				<span class="sx-multi-chip">
+					<span class="sx-multi-chip-label">{opt.label}</span>
+					<button
+						type="button"
+						class="sx-multi-chip-remove"
+						aria-label={`Remove ${opt.label}`}
+						tabindex={-1}
+						onclick={(e) => { e.stopPropagation(); removeChip(opt.value); }}
+					>
+						<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+					</button>
+				</span>
+			{/each}
+
+			{#if searchable && isOpen}
+				<input
+					bind:this={inputRef}
+					type="text"
+					class="sx-multi-search"
+					bind:value={searchQuery}
+					placeholder={selectedOptions.length === 0 ? placeholder : ''}
+					aria-label="Filter options"
+					tabindex={-1}
+				/>
+			{:else if selectedOptions.length === 0}
+				<span class="sx-multi-placeholder">{placeholder}</span>
+			{/if}
+		</div>
+
+		<span class="sx-multi-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>
+	</div>
+
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-multi-footer">
+			{#if showError}
+				<p id={errorId} class="sx-multi-error" role="alert" aria-live="assertive">{error}</p>
+			{:else if hint}
+				<p id={hintId} class="sx-multi-hint">{hint}</p>
+			{/if}
+			{#if maxSelections}
+				<span class="sx-multi-count">{values.length}/{maxSelections}</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<!-- Dropdown panel -->
+{#if isOpen}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		bind:this={listboxEl}
+		id={listboxId}
+		class="sx-multi-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="true"
+		tabindex="-1"
+		onmousedown={(e) => e.preventDefault()}
+	>
+		{#if displayOptions.length === 0}
+			<div class="sx-multi-empty">No options found</div>
+		{:else if (searchQuery ? filteredGroups : groups).length > 0}
+			{#each (searchQuery ? filteredGroups : groups) as group, gi}
+				<div role="group" aria-label={group.label}>
+					<div class="sx-multi-group-label">{group.label}</div>
+					{#each group.options as opt, oi}
+						{@const globalIdx = getGlobalIndex(gi, oi)}
+						{@const isActive = globalIdx === activeIndex}
+						{@const isSelected = values.includes(opt.value)}
+						{@const isMaxed = atMax && !isSelected}
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							id={getOptionId(globalIdx)}
+							class={cn(
+								'sx-multi-option',
+								isActive && 'sx-multi-option-active',
+								isSelected && 'sx-multi-option-selected',
+								(opt.disabled || isMaxed) && 'sx-multi-option-disabled'
+							)}
+							role="option"
+							tabindex="-1"
+							aria-selected={isSelected}
+							aria-disabled={opt.disabled || isMaxed || undefined}
+							data-option-index={globalIdx}
+							onmouseenter={() => { if (!opt.disabled && !isMaxed) activeIndex = globalIdx; }}
+							onmousedown={(e) => { e.preventDefault(); if (!isMaxed) toggleOption(opt); }}
+						>
+							<span class="sx-multi-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>
+							<span class="sx-multi-option-label">{opt.label}</span>
+						</div>
+					{/each}
+				</div>
+			{/each}
+		{:else}
+			{#each displayOptions as opt, i}
+				{@const isActive = i === activeIndex}
+				{@const isSelected = values.includes(opt.value)}
+				{@const isMaxed = atMax && !isSelected}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					id={getOptionId(i)}
+					class={cn(
+						'sx-multi-option',
+						isActive && 'sx-multi-option-active',
+						isSelected && 'sx-multi-option-selected',
+						(opt.disabled || isMaxed) && 'sx-multi-option-disabled'
+					)}
+					role="option"
+					tabindex="-1"
+					aria-selected={isSelected}
+					aria-disabled={opt.disabled || isMaxed || undefined}
+					data-option-index={i}
+					onmouseenter={() => { if (!opt.disabled && !isMaxed) activeIndex = i; }}
+					onmousedown={(e) => { e.preventDefault(); if (!isMaxed) toggleOption(opt); }}
+				>
+					<span class="sx-multi-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>
+					<span class="sx-multi-option-label">{opt.label}</span>
+				</div>
+			{/each}
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.sx-multi-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1);
+		font-family: var(--sx-font-body);
+	}
+
+	.sx-multi-disabled { opacity: 0.5; }
+
+	.sx-multi-label {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-multi-required { color: var(--sx-color-red); margin-left: 2px; }
+
+	.sx-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 */
+	.sx-multi-trigger {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-2);
+		width: 100%;
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		background: var(--sx-color-surface);
+		cursor: pointer;
+		transition: border-color var(--sx-transition-fast), box-shadow var(--sx-transition-fast);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+		min-height: 40px;
+		padding: var(--sx-space-1) var(--sx-space-3);
+	}
+
+	.sx-multi-trigger:hover:not(.sx-multi-trigger-disabled) {
+		border-color: var(--sx-color-border-hover);
+	}
+
+	.sx-multi-trigger:focus-visible {
+		outline: none;
+		border-color: var(--sx-color-primary);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-primary-ring);
+	}
+
+	.sx-multi-trigger-open {
+		border-color: var(--sx-color-primary);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-primary-ring);
+	}
+
+	.sx-multi-trigger-error {
+		border-color: var(--sx-color-red);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-red-ring);
+	}
+
+	.sx-multi-trigger-disabled {
+		cursor: not-allowed;
+		box-shadow: none;
+	}
+
+	.sx-multi-sm .sx-multi-trigger { min-height: 32px; font-size: var(--sx-text-xs); }
+	.sx-multi-lg .sx-multi-trigger { min-height: 48px; font-size: var(--sx-text-base); }
+
+	/* Chips area */
+	.sx-multi-chips {
+		flex: 1;
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sx-space-1);
+		align-items: center;
+		min-width: 0;
+	}
+
+	.sx-multi-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sx-space-1);
+		padding: 2px var(--sx-space-2);
+		background: var(--sx-color-primary-subtle);
+		border: 1px solid rgba(255, 107, 53, 0.2);
+		border-radius: var(--sx-radius-full);
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		color: var(--sx-color-primary);
+		animation: sx-badge-pop 150ms var(--sx-ease-spring) both;
+	}
+
+	.sx-multi-chip-label {
+		max-width: 150px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sx-multi-chip-remove {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		padding: 0;
+		border: none;
+		border-radius: 50%;
+		background: transparent;
+		color: var(--sx-color-primary);
+		cursor: pointer;
+		transition: background var(--sx-transition-fast);
+	}
+
+	.sx-multi-chip-remove:hover {
+		background: rgba(255, 107, 53, 0.2);
+	}
+
+	.sx-multi-search {
+		flex: 1;
+		min-width: 60px;
+		border: none;
+		background: transparent;
+		outline: none;
+		color: var(--sx-color-text);
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
+		padding: var(--sx-space-1) 0;
+	}
+
+	.sx-multi-search::placeholder {
+		color: var(--sx-color-text-disabled);
+	}
+
+	.sx-multi-placeholder {
+		color: var(--sx-color-text-disabled);
+		font-size: var(--sx-text-sm);
+	}
+
+	.sx-multi-chevron {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		color: var(--sx-color-text-secondary);
+		transition: transform var(--sx-transition-fast);
+	}
+
+	.sx-multi-trigger-open .sx-multi-chevron {
+		transform: rotate(180deg);
+	}
+
+	/* Footer */
+	.sx-multi-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		min-height: 1.25rem;
+	}
+
+	.sx-multi-error {
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		color: var(--sx-color-red);
+		margin: 0;
+	}
+
+	.sx-multi-hint {
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+		margin: 0;
+	}
+
+	.sx-multi-count {
+		font-size: var(--sx-text-xs);
+		font-family: var(--sx-font-mono);
+		color: var(--sx-color-text-secondary);
+	}
+
+	/* Dropdown panel */
+	.sx-multi-panel {
+		z-index: var(--sx-z-dropdown);
+		overflow-y: auto;
+		background: var(--sx-color-surface-2);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		box-shadow: var(--sx-shadow-lg);
+		backdrop-filter: var(--sx-glass-blur);
+		-webkit-backdrop-filter: var(--sx-glass-blur);
+		outline: none;
+		padding: var(--sx-space-1) 0;
+		font-family: var(--sx-font-body);
+	}
+
+	.sx-multi-option {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-2);
+		padding: var(--sx-space-2) var(--sx-space-4);
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text);
+		cursor: pointer;
+		user-select: none;
+		transition: background var(--sx-transition-fast);
+	}
+
+	.sx-multi-option-active {
+		background: var(--sx-color-primary-hover);
+		color: var(--sx-color-primary);
+	}
+
+	.sx-multi-option-selected:not(.sx-multi-option-active) {
+		background: var(--sx-color-primary-subtle);
+	}
+
+	.sx-multi-option-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.sx-multi-option-label {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sx-multi-check {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-sm);
+		background: var(--sx-color-surface);
+	}
+
+	.sx-multi-option-active .sx-multi-check {
+		border-color: var(--sx-color-primary);
+	}
+
+	.sx-multi-option-selected .sx-multi-check {
+		background: var(--sx-gradient-brand);
+		border-color: rgba(255, 107, 53, 0.6);
+		color: #fff;
+	}
+
+	.sx-multi-group-label {
+		padding: var(--sx-space-2) var(--sx-space-4) var(--sx-space-1);
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		color: var(--sx-color-text-disabled);
+		user-select: none;
+	}
+
+	.sx-multi-empty {
+		padding: var(--sx-space-4);
+		text-align: center;
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text-disabled);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-multi-trigger, .sx-multi-option, .sx-multi-chevron { transition: none; }
+		.sx-multi-chip { animation: none; }
+	}
+</style>