@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/input/input-location.svelte

@@ -0,0 +1,335 @@
+<script lang="ts">
+	import { getPreset } from '../../context';
+	import { resolvePreset } from '../atom';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import { untrack } from 'svelte';
+	import { InputBond } from './bond.svelte';
+	import type { InputLocationControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		lat = $bindable<number | undefined>(undefined),
+		lng = $bindable<number | undefined>(undefined),
+		format = 'dd',
+		precision = 6,
+		locate = true,
+		placeholder = 'lat, lng',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.location',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputLocationControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	let inputEl = $state<HTMLInputElement>();
+	let scrollLeft = $state(0);
+	let locating = $state(false);
+	let locationError = $state<string | undefined>(undefined);
+	let isFocused = $state(false);
+
+	// ── Coord parsing ──────────────────────────────────────────────────────
+	type ParsedCoords = { lat: number; lng: number } | null;
+
+	/**
+	 * Accepts: "lat, lng" | "lat lng" | "lat;lng"
+	 * Numbers may be signed decimals or have a trailing N/S/E/W suffix.
+	 */
+	function parseCoords(raw: string): ParsedCoords {
+		if (!raw.trim()) return null;
+
+		// Strip degree/minute/second symbols for DMS pasting, then extract numeric parts
+		const clean = raw.replace(/[°'"]/g, ' ').trim();
+		const parts = clean.split(/[\s,;]+/).filter(Boolean);
+		if (parts.length < 2) return null;
+
+		function parsePart(s: string): number | null {
+			const dir = /[NSEWnsew]$/.exec(s)?.[0]?.toUpperCase();
+			const numeric = parseFloat(s.replace(/[NSEWnsew]$/i, ''));
+			if (isNaN(numeric)) return null;
+			if (dir === 'S' || dir === 'W') return -numeric;
+			return numeric;
+		}
+
+		const parsedLat = parsePart(parts[0]!);
+		const parsedLng = parsePart(parts[1]!);
+		if (parsedLat === null || parsedLng === null) return null;
+		return { lat: parsedLat, lng: parsedLng };
+	}
+
+	const isValidLat = (v: number) => v >= -90 && v <= 90;
+	const isValidLng = (v: number) => v >= -180 && v <= 180;
+
+	// ── Overlay segment types ──────────────────────────────────────────────
+	type SegmentKind =
+		| 'lat-val' | 'lat-min' | 'lat-sec' | 'lat-dir'
+		| 'lng-val' | 'lng-min' | 'lng-sec' | 'lng-dir'
+		| 'sep' | 'symbol' | 'error';
+
+	type Segment = { text: string; kind: SegmentKind };
+
+	const kindStyle: Record<SegmentKind, string> = {
+		'lat-val': 'color: var(--input-hl-positive, var(--foreground)); font-weight: 500',
+		'lat-min': 'color: var(--input-hl-positive, var(--foreground))',
+		'lat-sec': 'color: var(--input-hl-dim, var(--foreground))',
+		'lat-dir': 'color: var(--input-hl-positive, var(--foreground)); font-weight: 600',
+		'lng-val': 'color: var(--input-hl-primary, var(--foreground)); font-weight: 500',
+		'lng-min': 'color: var(--input-hl-primary, var(--foreground))',
+		'lng-sec': 'color: var(--input-hl-dim, var(--foreground))',
+		'lng-dir': 'color: var(--input-hl-primary, var(--foreground)); font-weight: 600',
+		'sep':     'color: var(--input-hl-muted, var(--foreground))',
+		'symbol':  'color: var(--input-hl-muted, var(--foreground)); opacity: 0.6',
+		'error':   'color: var(--input-hl-error, var(--destructive))',
+	};
+
+	// ── DMS helpers ────────────────────────────────────────────────────────
+	function toDms(deg: number, hemi: 'lat' | 'lng') {
+		const abs = Math.abs(deg);
+		const d = Math.floor(abs);
+		const mFull = (abs - d) * 60;
+		const m = Math.floor(mFull);
+		const s = (mFull - m) * 60;
+		const pos = hemi === 'lat' ? 'N' : 'E';
+		const neg = hemi === 'lat' ? 'S' : 'W';
+		return { d, m, s, dir: deg >= 0 ? pos : neg };
+	}
+
+	// ── Build overlay segments ─────────────────────────────────────────────
+	function buildSegments(raw: string): Segment[] {
+		if (!raw.trim()) return [];
+
+		const coords = parseCoords(raw);
+		if (!coords) return [{ text: raw, kind: 'error' }];
+
+		const { lat: lt, lng: ln } = coords;
+		const latOk = isValidLat(lt);
+		const lngOk = isValidLng(ln);
+
+		const segs: Segment[] = [];
+
+		if (format === 'dms') {
+			const ld = toDms(lt, 'lat');
+			const nd = toDms(ln, 'lng');
+
+			segs.push({ text: String(ld.d),                   kind: latOk ? 'lat-val' : 'error' });
+			segs.push({ text: '°',                            kind: 'symbol' });
+			segs.push({ text: String(ld.m).padStart(2, '0'), kind: 'lat-min' });
+			segs.push({ text: "'",                            kind: 'symbol' });
+			segs.push({ text: ld.s.toFixed(2).padStart(5, '0'), kind: 'lat-sec' });
+			segs.push({ text: '"',                            kind: 'symbol' });
+			segs.push({ text: ld.dir,                         kind: 'lat-dir' });
+
+			segs.push({ text: ',  ', kind: 'sep' });
+
+			segs.push({ text: String(nd.d),                   kind: lngOk ? 'lng-val' : 'error' });
+			segs.push({ text: '°',                            kind: 'symbol' });
+			segs.push({ text: String(nd.m).padStart(2, '0'), kind: 'lng-min' });
+			segs.push({ text: "'",                            kind: 'symbol' });
+			segs.push({ text: nd.s.toFixed(2).padStart(5, '0'), kind: 'lng-sec' });
+			segs.push({ text: '"',                            kind: 'symbol' });
+			segs.push({ text: nd.dir,                         kind: 'lng-dir' });
+		} else {
+			// Decimal degrees
+			segs.push({ text: lt.toFixed(precision), kind: latOk ? 'lat-val' : 'error' });
+			segs.push({ text: '°',                  kind: 'symbol' });
+			segs.push({ text: ',  ',                kind: 'sep' });
+			segs.push({ text: ln.toFixed(precision), kind: lngOk ? 'lng-val' : 'error' });
+			segs.push({ text: '°',                  kind: 'symbol' });
+		}
+
+		return segs;
+	}
+
+	const segments = $derived(buildSegments(value));
+	const parsedCoords = $derived(parseCoords(value));
+	const coordsValid = $derived(
+		parsedCoords !== null &&
+		isValidLat(parsedCoords.lat) &&
+		isValidLng(parsedCoords.lng)
+	);
+
+	// ── Sync value → lat/lng props ─────────────────────────────────────────
+	$effect(() => {
+		const coords = parseCoords(value);
+		if (coords && isValidLat(coords.lat) && isValidLng(coords.lng)) {
+			lat = coords.lat;
+			lng = coords.lng;
+		} else if (!value.trim()) {
+			lat = undefined;
+			lng = undefined;
+		}
+	});
+
+	// ── Sync lat/lng props → value string (external writes) ───────────────
+	$effect(() => {
+		if (lat !== undefined && lng !== undefined) {
+			const current = parseCoords(value);
+			if (current?.lat !== lat || current?.lng !== lng) {
+				value = `${lat}, ${lng}`;
+				if (bond) bond.state.props.value = value;
+			}
+		}
+	});
+
+	// ── Geolocation ────────────────────────────────────────────────────────
+	function handleLocate() {
+		if (!navigator?.geolocation || locating || disabled || readonly) return;
+		locating = true;
+		locationError = undefined;
+		navigator.geolocation.getCurrentPosition(
+			(pos) => {
+				locating = false;
+				const lt = parseFloat(pos.coords.latitude.toFixed(precision));
+				const ln = parseFloat(pos.coords.longitude.toFixed(precision));
+				lat = lt;
+				lng = ln;
+				value = `${lt}, ${ln}`;
+				if (bond) bond.state.props.value = value;
+				onchange?.(new Event('change'), { lat, lng, value });
+			},
+			(err) => {
+				locating = false;
+				locationError = err.message;
+			},
+			{ enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
+		);
+	}
+
+	// ── Input / change handlers ────────────────────────────────────────────
+	function handleInput(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		value = input.value;
+		if (bond) bond.state.props.value = value;
+		syncScroll();
+		oninput?.(ev, { lat, lng, value });
+	}
+
+	function handleChange(ev: Event) {
+		onchange?.(ev, { lat, lng, value });
+	}
+
+	function syncScroll() {
+		scrollLeft = inputEl?.scrollLeft ?? 0;
+	}
+
+	function handleFocus() {
+		isFocused = true;
+	}
+
+	function handleBlur() {
+		isFocused = false;
+	}
+
+	// ── Paste: normalise common coordinate formats ─────────────────────────
+	function handlePaste(ev: ClipboardEvent) {
+		ev.preventDefault();
+		const pasted = ev.clipboardData?.getData('text') ?? '';
+		// Accept "lat, lng", "lat lng", "lat;lng", even with degree symbols
+		const coords = parseCoords(pasted);
+		if (coords) {
+			value = `${coords.lat}, ${coords.lng}`;
+		} else {
+			value = pasted;
+		}
+		if (inputEl) inputEl.value = value;
+		if (bond) bond.state.props.value = value;
+		oninput?.(new Event('input'), { lat, lng, value });
+	}
+</script>
+
+<span class="relative flex h-full w-full flex-1 items-center overflow-hidden">
+
+	<!-- Display mode overlay (hidden while focused) -->
+	{#if !isFocused}
+		<span
+			aria-hidden="true"
+			class={cn(
+				'pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-pre px-2 font-mono text-sm',
+				preset?.class,
+				toClassValue(klass, bond)
+			)}
+		>
+			<span style="transform: translateX(-{scrollLeft}px)">
+				{#if segments.length}
+					{#each segments as seg}
+						<span style={kindStyle[seg.kind]}>{seg.text}</span>
+					{/each}
+				{:else}
+					<span class="text-muted-foreground">{placeholder}</span>
+				{/if}
+			</span>
+		</span>
+	{/if}
+
+	<!-- Real <input> — transparent text in display mode, visible in input mode -->
+	<input
+		bind:this={inputEl}
+		type="text"
+		inputmode="decimal"
+		autocomplete="off"
+		spellcheck={false}
+		bind:value
+		{placeholder}
+		{disabled}
+		{readonly}
+		class={cn(
+			'relative h-full w-full flex-1 bg-transparent px-2 font-mono text-sm caret-foreground outline-none',
+			isFocused ? 'text-foreground placeholder:text-muted-foreground' : 'text-transparent placeholder:text-transparent',
+			disabled && 'cursor-not-allowed opacity-50',
+			preset?.class,
+			toClassValue(klass, bond)
+		)}
+		oninput={handleInput}
+		onchange={handleChange}
+		onscroll={syncScroll}
+		onpaste={handlePaste}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		{...restProps}
+	/>
+
+	<!-- Locate-me button (Geolocation API) -->
+	{#if locate && !readonly && !disabled}
+		<button
+			type="button"
+			title={locating ? 'Locating…' : locationError ?? 'Use current location'}
+			aria-label="Use current location"
+			class={cn(
+				'mr-1.5 flex shrink-0 cursor-pointer items-center justify-center rounded p-0.5 transition-colors',
+				'text-muted-foreground hover:text-foreground focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1',
+				locating && 'animate-pulse text-sky-500 dark:text-sky-400',
+				locationError && !locating && 'text-destructive hover:text-destructive',
+				coordsValid && !locating && !locationError && 'text-emerald-600 dark:text-emerald-400'
+			)}
+			onclick={handleLocate}
+			tabindex={-1}
+		>
+			<!-- Crosshair / target icon (lucide-style) -->
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<circle cx="12" cy="12" r="10" />
+				<circle cx="12" cy="12" r="3" />
+				<line x1="12" y1="2"  x2="12" y2="5"  />
+				<line x1="12" y1="19" x2="12" y2="22" />
+				<line x1="2"  y1="12" x2="5"  y2="12" />
+				<line x1="19" y1="12" x2="22" y2="12" />
+			</svg>
+		</button>
+	{/if}
+</span>

package/dist/components/input/input-location.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputLocationControlProps } from './types';
+declare const InputLocation: import("svelte").Component<InputLocationControlProps, {}, "value" | "lat" | "lng">;
+type InputLocation = ReturnType<typeof InputLocation>;
+export default InputLocation;

package/dist/components/input/input-number-control.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { InputBond } from './bond.svelte';
+	import type { InputNumberControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		number = $bindable(0),
+		min = undefined,
+		max = undefined,
+		step = 1,
+		showControls = true,
+		disabled = false,
+		placeholder = undefined,
+		preset = 'input.number',
+		decrement = undefined,
+		increment = undefined,
+		onchange = undefined,
+		...restProps
+	}: InputNumberControlProps & HTMLAttributes<HTMLDivElement> = $props();
+
+	const numberValue = $derived(number ?? 0);
+
+	const canDecrement = $derived(!disabled && (min === undefined || numberValue - step >= min));
+	const canIncrement = $derived(!disabled && (max === undefined || numberValue + step <= max));
+
+	const decrementSnippet = $derived(showControls ? (decrement ?? defaultDecrement) : undefined);
+	const incrementSnippet = $derived(showControls ? (increment ?? defaultIncrement) : undefined);
+	
+	function handleDecrement() {
+		if (!canDecrement) return;
+		number = parseFloat((number - step).toPrecision(10));
+		onchange?.(undefined, { number });
+		bond?.state?.props && (bond.state.props.value = number);
+	}
+
+	function handleIncrement() {
+		if (!canIncrement) return;
+		number = parseFloat((number + step).toPrecision(10));
+		onchange?.(undefined, { number });
+		bond?.state?.props && (bond.state.props.value = number);
+	}
+
+	function handleInput(ev: Event) {
+		const input = ev.target as HTMLInputElement;
+		const parsed = parseFloat(input.value);
+		if (!isNaN(parsed)) {
+			number = parsed;
+			onchange?.(ev, { number });
+			bond?.state?.props && (bond.state.props.value = number);
+		}
+	}
+</script>
+
+<!-- ─── Default part snippets ──────────────────────────────────────────── -->
+
+{#snippet defaultDecrement({ action: dec, disabled: dis }: { action: () => void; disabled: boolean })}
+	<button
+		type="button"
+		onclick={dec}
+		disabled={dis}
+		aria-label="Decrement"
+		class="input-number-decrement text-foreground hover:bg-muted disabled:text-muted-foreground flex h-full aspect-square shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
+	>
+		<svg viewBox="0 0 16 16" fill="none" class="h-3 w-3" aria-hidden="true">
+			<path d="M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+		</svg>
+	</button>
+{/snippet}
+
+{#snippet defaultIncrement({ action: inc, disabled: dis }: { action: () => void; disabled: boolean })}
+	<button
+		type="button"
+		onclick={inc}
+		disabled={dis}
+		aria-label="Increment"
+		class="input-number-increment text-foreground hover:bg-muted disabled:text-muted-foreground flex h-full aspect-square shrink-0 cursor-pointer items-center justify-center transition-colors disabled:cursor-not-allowed"
+	>
+		<svg viewBox="0 0 16 16" fill="none" class="h-3 w-3" aria-hidden="true">
+			<path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+		</svg>
+	</button>
+{/snippet}
+
+<!-- ─── Render ────────────────────────────────────────────────────────── -->
+
+{@render decrementSnippet?.({ action: handleDecrement, disabled: !canDecrement })}
+
+<input
+	type="number"
+	bind:value={number}
+	{min}
+	{max}
+	{step}
+	{disabled}
+	{placeholder}
+	oninput={handleInput}
+	class={["input-number-field text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent text-center text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", '$preset', klass]}
+	aria-valuemin={min}
+	aria-valuemax={max}
+	aria-valuenow={number}
+	{...restProps}
+/>
+
+{@render incrementSnippet?.({ action: handleIncrement, disabled: !canIncrement })}

package/dist/components/input/input-number-control.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { InputNumberControlProps } from './types';
+type $$ComponentProps = InputNumberControlProps & HTMLAttributes<HTMLDivElement>;
+declare const InputNumberControl: import("svelte").Component<$$ComponentProps, {}, "number">;
+type InputNumberControl = ReturnType<typeof InputNumberControl>;
+export default InputNumberControl;

package/dist/components/input/input-otp-control.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { getPreset } from '../../context';
+	import { resolvePreset } from '../atom';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import { untrack } from 'svelte';
+	import { InputBond } from './bond.svelte';
+	import type { InputOtpControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		length = 6,
+		type = 'numeric',
+		groupSize = undefined,
+		placeholder = '·',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.otp',
+		onchange = undefined,
+		oninput = undefined,
+		oncomplete = undefined,
+		...restProps
+	}: InputOtpControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	// ── Slot refs ──────────────────────────────────────────────────────────
+	let slotEls = $state<Array<HTMLInputElement | undefined>>([]);
+
+	// ── Derived slots ─────────────────────────────────────────────────────
+	const slots  = $derived(Array.from({ length }, (_, i) => value?.[i] ?? ''));
+	const isFull = $derived(slots.every(s => s !== ''));
+
+	// ── Track previous full state so oncomplete only fires once per fill ──
+	let wasFull = $state(false);
+
+	// ── Input validation per type ─────────────────────────────────────────
+	function isValidChar(char: string): boolean {
+		if (type === 'numeric')     return /^\d$/.test(char);
+		if (type === 'alpha')       return /^[a-zA-Z]$/.test(char);
+		return /^[a-zA-Z0-9]$/.test(char); // alphanumeric
+	}
+
+	function normalizeChar(char: string): string {
+		return type !== 'numeric' ? char.toUpperCase() : char;
+	}
+
+	// ── Commit value ──────────────────────────────────────────────────────
+	function commit(arr: string[]) {
+		value = arr.join('');
+		if (bond) bond.state.props.value = value;
+	}
+
+	function getArr(): string[] {
+		return Array.from({ length }, (_, i) => value[i] ?? '');
+	}
+
+	// ── Focus helpers ─────────────────────────────────────────────────────
+	function focusSlot(index: number) {
+		slotEls[Math.max(0, Math.min(length - 1, index))]?.focus();
+	}
+
+	// ── Emit ──────────────────────────────────────────────────────────────
+	function emit(ev: Event) {
+		const detail = { value };
+		oninput?.(ev, detail);
+		if (isFull) {
+			onchange?.(ev, detail);
+			if (!wasFull) {
+				oncomplete?.(value);
+			}
+		}
+		wasFull = isFull;
+	}
+
+	// ── Keydown ───────────────────────────────────────────────────────────
+	function handleKeydown(ev: KeyboardEvent, index: number) {
+		if (disabled || readonly) return;
+
+		const { key } = ev;
+
+		if (key === 'Backspace') {
+			ev.preventDefault();
+			const arr = getArr();
+			if (arr[index]) {
+				// Clear current slot
+				arr[index] = '';
+				commit(arr);
+			} else if (index > 0) {
+				// Already empty — clear previous and move back
+				arr[index - 1] = '';
+				commit(arr);
+				focusSlot(index - 1);
+			}
+			emit(ev);
+			return;
+		}
+
+		if (key === 'Delete') {
+			ev.preventDefault();
+			const arr = getArr();
+			arr[index] = '';
+			commit(arr);
+			emit(ev);
+			return;
+		}
+
+		if (key === 'ArrowLeft')  { ev.preventDefault(); focusSlot(index - 1);     return; }
+		if (key === 'ArrowRight') { ev.preventDefault(); focusSlot(index + 1);     return; }
+		if (key === 'Home')       { ev.preventDefault(); focusSlot(0);             return; }
+		if (key === 'End')        { ev.preventDefault(); focusSlot(length - 1);    return; }
+
+		// Printable character
+		if (key.length === 1 && !ev.ctrlKey && !ev.metaKey && !ev.altKey) {
+			ev.preventDefault();
+			if (!isValidChar(key)) return;
+			const arr = getArr();
+			arr[index] = normalizeChar(key);
+			commit(arr);
+			emit(ev);
+			if (index < length - 1) focusSlot(index + 1);
+		}
+	}
+
+	// ── Paste ─────────────────────────────────────────────────────────────
+	function handlePaste(ev: ClipboardEvent, fromIndex: number) {
+		ev.preventDefault();
+		const pasted = ev.clipboardData?.getData('text') ?? '';
+		const chars = pasted
+			.split('')
+			.filter(isValidChar)
+			.map(normalizeChar)
+			.slice(0, length - fromIndex);
+
+		if (!chars.length) return;
+
+		const arr = getArr();
+		chars.forEach((c, i) => { arr[fromIndex + i] = c; });
+		commit(arr);
+		focusSlot(Math.min(length - 1, fromIndex + chars.length));
+		emit(ev);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	role="group"
+	aria-label="One-time password"
+	class={cn(
+		'inline-flex items-center gap-1',
+		bond && 'h-full py-1 px-1',
+		disabled && 'cursor-not-allowed opacity-50',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	{...restProps}
+>
+	{#each slots as slotVal, i (i)}
+		{#if groupSize !== undefined && i > 0 && i % groupSize === 0}
+			{#if bond}
+				<span class="bg-border h-5 w-px shrink-0 select-none"></span>
+			{:else}
+				<span class="text-muted-foreground select-none px-0.5">—</span>
+			{/if}
+		{/if}
+
+		<!-- Sizing wrapper — aspect-ratio doesn't apply to <input> elements -->
+		<div class={cn('shrink-0', bond ? 'h-full flex-1' : 'h-10 w-7')}>
+			<input
+				bind:this={slotEls[i]}
+				type="text"
+				inputmode={type === 'numeric' ? 'numeric' : 'text'}
+				maxlength={1}
+				value={slotVal}
+				{disabled}
+				{readonly}
+				autocomplete={i === 0 ? 'one-time-code' : 'off'}
+				aria-label={`Digit ${i + 1} of ${length}`}
+				aria-disabled={disabled}
+				data-filled={slotVal !== ''}
+				class={cn(
+					'h-full w-full text-center font-mono text-sm font-medium tabular-nums',
+					'caret-transparent select-none outline-none',
+					'text-foreground transition-colors duration-150 rounded-md',
+					!bond && 'border border-border bg-input',
+					'focus:bg-foreground/5',
+					!bond && 'focus:border-foreground/40 focus:ring-2 focus:ring-foreground/20',
+					// bond && i > 0 && !(groupSize !== undefined && i % groupSize === 0) && 'border-l border-border rounded-none',
+					disabled && 'cursor-not-allowed',
+					readonly && 'cursor-default',
+				)}
+				placeholder={slotVal === '' ? placeholder : ''}
+				onkeydown={(ev) => handleKeydown(ev, i)}
+				onpaste={(ev) => handlePaste(ev, i)}
+				onclick={() => slotEls[i]?.select()}
+				oninput={(ev) => {
+					// All input handled via keydown — suppress native input
+					(ev.currentTarget as HTMLInputElement).value = slotVal;
+				}}
+			/>
+		</div>
+	{/each}
+</span>

package/dist/components/input/input-otp-control.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputOtpControlProps } from './types';
+declare const InputOtpControl: import("svelte").Component<InputOtpControlProps, {}, "value">;
+type InputOtpControl = ReturnType<typeof InputOtpControl>;
+export default InputOtpControl;