@salmexio/ui 1.2.0 → 1.3.0

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

@@ -0,0 +1,69 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface MultiSelectGroup {
+    label: string;
+    options: MultiSelectOption[];
+}
+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;
+}
+/**
+ * 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}
+ * />
+ */
+declare const MultiSelect: import("svelte").Component<Props, {}, "values">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;
+//# sourceMappingURL=MultiSelect.svelte.d.ts.map

package/dist/forms/MultiSelect/MultiSelect.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/MultiSelect/MultiSelect.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AAQD,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,UAAU,KAAK;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,uBAAuB;IACvB,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAmaD;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,WAAW,iDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/forms/MultiSelect/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MultiSelect } from './MultiSelect.svelte';
+export type { MultiSelectOption, MultiSelectGroup } from './MultiSelect.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/MultiSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/MultiSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/forms/MultiSelect/index.js

@@ -0,0 +1 @@
+export { default as MultiSelect } from './MultiSelect.svelte';

package/dist/forms/PhoneInput/PhoneInput.svelte

@@ -0,0 +1,591 @@
+<!--
+  @component PhoneInput
+
+  INFRARED — International phone number input with country code selector,
+  auto-formatting, and E.164 output. Zero external dependencies.
+  Country list is curated for common use; extend via the countries prop.
+
+  @example
+  <PhoneInput label="Phone number" bind:value={phone} />
+  <PhoneInput label="Mobile" defaultCountry="GB" />
+-->
+<script lang="ts" module>
+export interface Country {
+	code: string;
+	name: string;
+	dial: string;
+	flag: string;
+}
+
+export const DEFAULT_COUNTRIES: Country[] = [
+	{ code: 'US', name: 'United States', dial: '+1', flag: '\u{1F1FA}\u{1F1F8}' },
+	{ code: 'GB', name: 'United Kingdom', dial: '+44', flag: '\u{1F1EC}\u{1F1E7}' },
+	{ code: 'CA', name: 'Canada', dial: '+1', flag: '\u{1F1E8}\u{1F1E6}' },
+	{ code: 'AU', name: 'Australia', dial: '+61', flag: '\u{1F1E6}\u{1F1FA}' },
+	{ code: 'DE', name: 'Germany', dial: '+49', flag: '\u{1F1E9}\u{1F1EA}' },
+	{ code: 'FR', name: 'France', dial: '+33', flag: '\u{1F1EB}\u{1F1F7}' },
+	{ code: 'JP', name: 'Japan', dial: '+81', flag: '\u{1F1EF}\u{1F1F5}' },
+	{ code: 'IN', name: 'India', dial: '+91', flag: '\u{1F1EE}\u{1F1F3}' },
+	{ code: 'BR', name: 'Brazil', dial: '+55', flag: '\u{1F1E7}\u{1F1F7}' },
+	{ code: 'MX', name: 'Mexico', dial: '+52', flag: '\u{1F1F2}\u{1F1FD}' },
+	{ code: 'ES', name: 'Spain', dial: '+34', flag: '\u{1F1EA}\u{1F1F8}' },
+	{ code: 'IT', name: 'Italy', dial: '+39', flag: '\u{1F1EE}\u{1F1F9}' },
+	{ code: 'NL', name: 'Netherlands', dial: '+31', flag: '\u{1F1F3}\u{1F1F1}' },
+	{ code: 'SE', name: 'Sweden', dial: '+46', flag: '\u{1F1F8}\u{1F1EA}' },
+	{ code: 'CH', name: 'Switzerland', dial: '+41', flag: '\u{1F1E8}\u{1F1ED}' },
+	{ code: 'KR', name: 'South Korea', dial: '+82', flag: '\u{1F1F0}\u{1F1F7}' },
+	{ code: 'SG', name: 'Singapore', dial: '+65', flag: '\u{1F1F8}\u{1F1EC}' },
+	{ code: 'AE', name: 'UAE', dial: '+971', flag: '\u{1F1E6}\u{1F1EA}' },
+	{ code: 'IL', name: 'Israel', dial: '+972', flag: '\u{1F1EE}\u{1F1F1}' },
+	{ code: 'SA', name: 'Saudi Arabia', dial: '+966', flag: '\u{1F1F8}\u{1F1E6}' },
+	{ code: 'MA', name: 'Morocco', dial: '+212', flag: '\u{1F1F2}\u{1F1E6}' },
+	{ code: 'NG', name: 'Nigeria', dial: '+234', flag: '\u{1F1F3}\u{1F1EC}' },
+	{ code: 'ZA', name: 'South Africa', dial: '+27', flag: '\u{1F1FF}\u{1F1E6}' },
+	{ code: 'CN', name: 'China', dial: '+86', flag: '\u{1F1E8}\u{1F1F3}' },
+	{ code: 'RU', name: 'Russia', dial: '+7', flag: '\u{1F1F7}\u{1F1FA}' },
+];
+</script>
+
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { Keys, generateId } from '../../utils/keyboard.js';
+import { onMount } from 'svelte';
+
+type PhoneSize = 'sm' | 'md' | 'lg';
+
+interface Props {
+	/** Visible label. */
+	label: string;
+	/** Phone number value (E.164 format: +1234567890). */
+	value?: string;
+	/** Default country code. */
+	defaultCountry?: string;
+	/** Available countries list. */
+	countries?: Country[];
+	/** Placeholder for the number field. */
+	placeholder?: string;
+	/** Size variant. */
+	size?: PhoneSize;
+	/** Required field. */
+	required?: boolean;
+	/** Disabled state. */
+	disabled?: boolean;
+	/** Error message. */
+	error?: string;
+	/** Hint text. */
+	hint?: string;
+	/** Hide the visible label. */
+	hideLabel?: boolean;
+	/** Reserve footer space even when empty. */
+	alwaysShowFooter?: boolean;
+	/** Additional CSS class. */
+	class?: string;
+	/** Called when value changes. */
+	onchange?: (value: string) => void;
+	/** Custom validation function. */
+	validate?: (value: string) => string | undefined;
+	/** Test ID. */
+	testId?: string;
+}
+
+let {
+	label,
+	value = $bindable(''),
+	defaultCountry = 'US',
+	countries = DEFAULT_COUNTRIES,
+	placeholder = 'Phone number',
+	size = 'md',
+	required = false,
+	disabled = false,
+	error = '',
+	hint = '',
+	hideLabel = false,
+	alwaysShowFooter = true,
+	class: className = '',
+	onchange,
+	validate,
+	testId
+}: Props = $props();
+
+const id = generateId('phone');
+const errorId = `${id}-error`;
+const hintId = `${id}-hint`;
+const dropdownId = `${id}-countries`;
+
+const fallbackCountry: Country = { code: '', name: 'Unknown', dial: '+0', flag: '' };
+
+// svelte-ignore state_referenced_locally — intentional: capture initial country from prop
+let selectedCountry = $state<Country>(
+	countries.find((c) => c.code === defaultCountry) || countries[0] || fallbackCountry
+);
+let nationalNumber = $state('');
+let isOpen = $state(false);
+let isFocused = $state(false);
+let hasInteracted = $state(false);
+let activeIndex = $state(-1);
+let countrySearch = $state('');
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+let triggerEl = $state<HTMLElement | null>(null);
+let dropdownEl = $state<HTMLElement | null>(null);
+let inputRef = $state<HTMLInputElement | null>(null);
+
+let panelTop = $state(0);
+let panelLeft = $state(0);
+let panelWidth = $state(0);
+
+// Parse initial value — use longest dial code match to handle +1 US/CA ambiguity
+$effect(() => {
+	if (value && !nationalNumber) {
+		let match: Country | undefined;
+		for (const c of countries) {
+			if (value.startsWith(c.dial) && (!match || c.dial.length > match.dial.length)) {
+				match = c;
+			}
+		}
+		if (match) {
+			selectedCountry = match;
+			nationalNumber = value.slice(match.dial.length).replace(/\D/g, '');
+		}
+	}
+});
+
+const validationError = $derived.by(() => {
+	if (!validate) return undefined;
+	try { return validate(value); } catch { return undefined; }
+});
+const effectiveError = $derived(error || validationError || '');
+const showError = $derived(hasInteracted && !!effectiveError);
+
+const ariaDescribedBy = $derived(
+	[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+);
+const hasFooterContent = $derived(showError || !!hint);
+
+function formatNumber(num: string): string {
+	const digits = num.replace(/\D/g, '');
+	// Simple grouping: XXX XXX XXXX for most formats
+	if (digits.length <= 3) return digits;
+	if (digits.length <= 6) return `${digits.slice(0, 3)} ${digits.slice(3)}`;
+	return `${digits.slice(0, 3)} ${digits.slice(3, 6)} ${digits.slice(6, 10)}`;
+}
+
+function updateValue() {
+	const digits = nationalNumber.replace(/\D/g, '');
+	if (digits) {
+		// E.164: max 15 digits total (including country code digits)
+		const dialDigits = selectedCountry.dial.replace(/\D/g, '');
+		const maxNational = 15 - dialDigits.length;
+		const clamped = digits.slice(0, Math.max(1, maxNational));
+		value = `${selectedCountry.dial}${clamped}`;
+	} else {
+		value = '';
+	}
+	hasInteracted = true;
+	onchange?.(value);
+}
+
+function handleInput(e: Event) {
+	const target = e.target as HTMLInputElement;
+	// Strip non-digits
+	nationalNumber = target.value.replace(/[^\d\s]/g, '').replace(/\s+/g, ' ').trim();
+	updateValue();
+}
+
+function handleFocus() {
+	isFocused = true;
+}
+
+function handleBlur() {
+	isFocused = false;
+	hasInteracted = true;
+	// Format on blur
+	nationalNumber = formatNumber(nationalNumber);
+}
+
+function positionDropdown() {
+	if (!triggerEl) return;
+	const rect = triggerEl.getBoundingClientRect();
+	panelLeft = rect.left;
+	panelTop = rect.bottom + 2;
+	panelWidth = Math.max(rect.width, 240);
+}
+
+function openCountryPicker() {
+	if (disabled) return;
+	isOpen = true;
+	activeIndex = countries.indexOf(selectedCountry);
+	countrySearch = '';
+	positionDropdown();
+}
+
+function closeCountryPicker() {
+	isOpen = false;
+	activeIndex = -1;
+	countrySearch = '';
+}
+
+function selectCountry(country: Country) {
+	selectedCountry = country;
+	closeCountryPicker();
+	updateValue();
+	inputRef?.focus();
+}
+
+function handleCountryKeydown(e: KeyboardEvent) {
+	if (!isOpen) {
+		if (e.key === Keys.Enter || e.key === Keys.Space || e.key === Keys.ArrowDown) {
+			e.preventDefault();
+			openCountryPicker();
+		}
+		return;
+	}
+
+	switch (e.key) {
+		case Keys.ArrowDown:
+			e.preventDefault();
+			activeIndex = Math.min(activeIndex + 1, countries.length - 1);
+			break;
+		case Keys.ArrowUp:
+			e.preventDefault();
+			activeIndex = Math.max(activeIndex - 1, 0);
+			break;
+		case Keys.Enter:
+		case Keys.Space:
+			e.preventDefault();
+			if (activeIndex >= 0) selectCountry(countries[activeIndex]);
+			break;
+		case Keys.Escape:
+			e.preventDefault();
+			closeCountryPicker();
+			break;
+		default:
+			// Type-ahead
+			if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+				countrySearch += e.key.toLowerCase();
+				clearTimeout(searchTimer);
+				searchTimer = setTimeout(() => (countrySearch = ''), 500);
+				const match = countries.findIndex((c) =>
+					c.name.toLowerCase().startsWith(countrySearch)
+				);
+				if (match >= 0) activeIndex = match;
+			}
+	}
+}
+
+function handleClickOutside(e: MouseEvent) {
+	const target = e.target as Node;
+	if (triggerEl?.contains(target)) return;
+	if (dropdownEl?.contains(target)) return;
+	closeCountryPicker();
+}
+
+// Portal dropdown
+$effect(() => {
+	if (dropdownEl && isOpen) {
+		document.body.appendChild(dropdownEl);
+		return () => {
+			if (dropdownEl?.parentNode === document.body) {
+				document.body.removeChild(dropdownEl);
+			}
+		};
+	}
+});
+
+onMount(() => {
+	document.addEventListener('mousedown', handleClickOutside);
+	return () => {
+		document.removeEventListener('mousedown', handleClickOutside);
+		clearTimeout(searchTimer);
+		if (dropdownEl?.parentNode === document.body) {
+			document.body.removeChild(dropdownEl);
+		}
+	};
+});
+</script>
+
+<div
+	class={cn('sx-phone', `sx-phone-${size}`, disabled && 'sx-phone-disabled', className)}
+	data-testid={testId}
+>
+	<label for={`${id}-number`} class={cn('sx-phone-label', hideLabel && 'sx-sr-only')}>
+		{label}
+		{#if required}
+			<span class="sx-phone-required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+
+	<div
+		class={cn(
+			'sx-phone-field',
+			isFocused && 'sx-phone-focused',
+			showError && 'sx-phone-error-state'
+		)}
+	>
+		<!-- Country selector -->
+		<button
+			bind:this={triggerEl}
+			type="button"
+			class="sx-phone-country"
+			{disabled}
+			aria-haspopup="listbox"
+			aria-expanded={isOpen}
+			aria-controls={isOpen ? dropdownId : undefined}
+			aria-label={`Selected country: ${selectedCountry.name} (${selectedCountry.dial})`}
+			onclick={() => { if (isOpen) closeCountryPicker(); else openCountryPicker(); }}
+			onkeydown={handleCountryKeydown}
+		>
+			<span class="sx-phone-flag">{selectedCountry.flag}</span>
+			<span class="sx-phone-dial">{selectedCountry.dial}</span>
+			<span class="sx-phone-chevron" aria-hidden="true">
+				<svg width="10" height="10" 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>
+
+		<span class="sx-phone-divider" aria-hidden="true"></span>
+
+		<!-- Phone number input -->
+		<input
+			bind:this={inputRef}
+			id={`${id}-number`}
+			type="tel"
+			class="sx-phone-input"
+			value={formatNumber(nationalNumber)}
+			{placeholder}
+			{disabled}
+			{required}
+			inputmode="tel"
+			autocomplete="tel-national"
+			aria-describedby={ariaDescribedBy}
+			aria-invalid={showError || undefined}
+			oninput={handleInput}
+			onfocus={handleFocus}
+			onblur={handleBlur}
+		/>
+	</div>
+
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-phone-footer">
+			{#if showError}
+				<p id={errorId} class="sx-phone-error" role="alert" aria-live="assertive">{effectiveError}</p>
+			{:else if hint}
+				<p id={hintId} class="sx-phone-hint">{hint}</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<!-- Country dropdown -->
+{#if isOpen}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		bind:this={dropdownEl}
+		id={dropdownId}
+		class="sx-phone-dropdown"
+		style="position:fixed;left:{panelLeft}px;top:{panelTop}px;width:{panelWidth}px;"
+		role="listbox"
+		aria-label="Select country"
+		tabindex="-1"
+		onmousedown={(e) => e.preventDefault()}
+	>
+		{#each countries as country, i}
+			{@const isActive = i === activeIndex}
+			{@const isSelected = country.code === selectedCountry.code}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				id={`${id}-country-${country.code}`}
+				class={cn(
+					'sx-phone-country-option',
+					isActive && 'sx-phone-country-active',
+					isSelected && 'sx-phone-country-selected'
+				)}
+				role="option"
+				tabindex="-1"
+				aria-selected={isSelected}
+				onmouseenter={() => { activeIndex = i; }}
+				onmousedown={(e) => { e.preventDefault(); selectCountry(country); }}
+			>
+				<span class="sx-phone-country-flag">{country.flag}</span>
+				<span class="sx-phone-country-name">{country.name}</span>
+				<span class="sx-phone-country-dial">{country.dial}</span>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.sx-phone {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1);
+		font-family: var(--sx-font-body);
+	}
+
+	.sx-phone-disabled { opacity: 0.5; }
+
+	.sx-phone-label {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-phone-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;
+	}
+
+	/* Field wrapper */
+	.sx-phone-field {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		background: var(--sx-color-surface);
+		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);
+	}
+
+	.sx-phone-field:hover:not(.sx-phone-focused):not(.sx-phone-error-state) {
+		border-color: var(--sx-color-border-hover);
+	}
+
+	.sx-phone-focused {
+		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-phone-error-state {
+		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-phone-sm .sx-phone-field { min-height: 32px; }
+	.sx-phone-md .sx-phone-field { min-height: 40px; }
+	.sx-phone-lg .sx-phone-field { min-height: 48px; }
+
+	/* Country button */
+	.sx-phone-country {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-1);
+		padding: 0 var(--sx-space-2) 0 var(--sx-space-3);
+		border: none;
+		background: transparent;
+		color: var(--sx-color-text);
+		cursor: pointer;
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
+		white-space: nowrap;
+		height: 100%;
+	}
+
+	.sx-phone-country:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: -2px;
+		border-radius: var(--sx-radius-md) 0 0 var(--sx-radius-md);
+	}
+
+	.sx-phone-flag { font-size: 1.1em; }
+	.sx-phone-dial { color: var(--sx-color-text-secondary); font-weight: 500; font-size: var(--sx-text-xs); }
+	.sx-phone-chevron { color: var(--sx-color-text-disabled); display: flex; align-items: center; }
+
+	.sx-phone-divider {
+		width: 1px;
+		height: 20px;
+		background: var(--sx-color-border);
+		flex-shrink: 0;
+	}
+
+	/* Phone input */
+	.sx-phone-input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		background: transparent;
+		color: var(--sx-color-text);
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-sm);
+		outline: none;
+		padding: var(--sx-space-2) var(--sx-space-3);
+	}
+
+	.sx-phone-input:focus-visible { box-shadow: none; }
+	.sx-phone-input::placeholder { color: var(--sx-color-text-disabled); }
+
+	/* Footer */
+	.sx-phone-footer { min-height: 1.25rem; }
+	.sx-phone-error { font-size: var(--sx-text-xs); font-weight: 500; color: var(--sx-color-red); margin: 0; }
+	.sx-phone-hint { font-size: var(--sx-text-xs); color: var(--sx-color-text-secondary); margin: 0; }
+
+	/* Country dropdown */
+	.sx-phone-dropdown {
+		z-index: var(--sx-z-dropdown);
+		max-height: 260px;
+		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);
+		padding: var(--sx-space-1) 0;
+		font-family: var(--sx-font-body);
+	}
+
+	.sx-phone-country-option {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-2);
+		padding: var(--sx-space-2) var(--sx-space-3);
+		font-size: var(--sx-text-sm);
+		color: var(--sx-color-text);
+		cursor: pointer;
+		user-select: none;
+		transition: background var(--sx-transition-fast);
+	}
+
+	.sx-phone-country-active {
+		background: var(--sx-color-primary-hover);
+		color: var(--sx-color-primary);
+	}
+
+	.sx-phone-country-selected:not(.sx-phone-country-active) {
+		background: var(--sx-color-primary-subtle);
+	}
+
+	.sx-phone-country-flag { font-size: 1.1em; flex-shrink: 0; }
+
+	.sx-phone-country-name {
+		flex: 1;
+		font-weight: 500;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sx-phone-country-dial {
+		flex-shrink: 0;
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-phone-country-active .sx-phone-country-dial {
+		color: var(--sx-color-primary);
+		opacity: 0.7;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-phone-field, .sx-phone-country-option { transition: none; }
+	}
+</style>