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

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

@@ -0,0 +1,218 @@
+<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 { InputUrlControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		placeholder = 'example.com/path',
+		disabled = false,
+		readonly = false,
+		preset: presetKey = 'input.url',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputUrlControlProps = $props();
+
+	const preset = resolvePreset(getPreset(untrack(() => presetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	let inputEl = $state<HTMLInputElement>();
+	let scrollLeft = $state(0);
+
+	// ── Parse URL into segments ──────────────────────────────────────────
+	type Segment = { text: string; kind: 'protocol' | 'host' | 'port' | 'pathname' | 'search' | 'hash' | 'plain' };
+
+	function parseSegments(raw: string): Segment[] {
+		if (!raw) return [];
+
+		// Normalise: if no protocol, add a fake one for URL parsing
+		const hasProtocol = /^[a-z][a-z0-9+\-.]*:\/\//i.test(raw);
+		const forParsing = hasProtocol ? raw : 'https://' + raw;
+
+		try {
+			const u = new URL(forParsing);
+			const segs: Segment[] = [];
+
+			if (hasProtocol) {
+				segs.push({ text: u.protocol + '//', kind: 'protocol' });
+			}
+
+			// username:password@
+			if (u.username) {
+				segs.push({ text: u.username + (u.password ? ':' + u.password : '') + '@', kind: 'plain' });
+			}
+
+			segs.push({ text: u.hostname, kind: 'host' });
+
+			if (u.port) {
+				segs.push({ text: ':' + u.port, kind: 'port' });
+			}
+
+			if (u.pathname && u.pathname !== '/') {
+				segs.push({ text: u.pathname, kind: 'pathname' });
+			} else if (u.pathname === '/' && (u.search || u.hash)) {
+				segs.push({ text: '/', kind: 'pathname' });
+			}
+
+			if (u.search) {
+				segs.push({ text: u.search, kind: 'search' });
+			}
+
+			if (u.hash) {
+				segs.push({ text: u.hash, kind: 'hash' });
+			}
+
+			return segs;
+		} catch {
+			// Not a valid URL yet — return as plain text but try partial segment detection
+			return partialSegments(raw);
+		}
+	}
+
+	function partialSegments(raw: string): Segment[] {
+		const segs: Segment[] = [];
+		let rest = raw;
+
+		// Protocol
+		const protoMatch = rest.match(/^([a-z][a-z0-9+\-.]*:\/\/)/i);
+		if (protoMatch) {
+			segs.push({ text: protoMatch[1], kind: 'protocol' });
+			rest = rest.slice(protoMatch[1].length);
+		}
+
+		if (!rest) return segs;
+
+		// Split on first / ? #
+		const sep = rest.search(/[/?#]/);
+		if (sep === -1) {
+			segs.push({ text: rest, kind: 'host' });
+			return segs;
+		}
+
+		const hostPart = rest.slice(0, sep);
+		const afterHost = rest.slice(sep);
+
+		// host:port
+		const portMatch = hostPart.match(/^(.*):(\d+)$/);
+		if (portMatch) {
+			if (portMatch[1]) segs.push({ text: portMatch[1], kind: 'host' });
+			segs.push({ text: ':' + portMatch[2], kind: 'port' });
+		} else {
+			if (hostPart) segs.push({ text: hostPart, kind: 'host' });
+		}
+
+		// pathname / search / hash
+		const hashIdx = afterHost.indexOf('#');
+		const searchIdx = afterHost.indexOf('?');
+
+		if (searchIdx !== -1) {
+			const path = afterHost.slice(0, searchIdx);
+			const queryAndHash = afterHost.slice(searchIdx);
+			const hashInQuery = queryAndHash.indexOf('#');
+			if (path) segs.push({ text: path, kind: 'pathname' });
+			if (hashInQuery !== -1) {
+				segs.push({ text: queryAndHash.slice(0, hashInQuery), kind: 'search' });
+				segs.push({ text: queryAndHash.slice(hashInQuery), kind: 'hash' });
+			} else {
+				segs.push({ text: queryAndHash, kind: 'search' });
+			}
+		} else if (hashIdx !== -1) {
+			const path = afterHost.slice(0, hashIdx);
+			if (path) segs.push({ text: path, kind: 'pathname' });
+			segs.push({ text: afterHost.slice(hashIdx), kind: 'hash' });
+		} else {
+			segs.push({ text: afterHost, kind: 'pathname' });
+		}
+
+		return segs;
+	}
+
+	const segments = $derived(parseSegments(value));
+
+	const kindStyle: Record<Segment['kind'], string> = {
+		protocol:  'color: var(--input-hl-muted, var(--foreground))',
+		host:      'color: var(--input-hl-primary, var(--foreground)); font-weight: 500',
+		port:      'color: var(--input-hl-warning, var(--foreground))',
+		pathname:  'color: var(--input-hl-secondary, var(--foreground))',
+		search:    'color: var(--input-hl-info, var(--foreground))',
+		hash:      'color: var(--input-hl-accent, var(--foreground))',
+		plain:     'color: var(--input-hl-muted, var(--foreground))',
+	};
+
+	// ── Keep overlay scroll in sync with the real input ──────────────────
+	function syncScroll() {
+		scrollLeft = inputEl?.scrollLeft ?? 0;
+	}
+
+	// ── Event handlers ────────────────────────────────────────────────────
+	function handleInput(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		value = input.value;
+		if (bond) bond.state.props.value = value;
+		syncScroll();
+		oninput?.(ev, { value });
+	}
+
+	function handleChange(ev: Event) {
+		onchange?.(ev, { value });
+	}
+</script>
+
+<!--
+  Layout: relative container with two layers:
+  1. Invisible real <input> on top (handles caret, selection, all native editing)
+  2. Coloured overlay <span> beneath it, same font/padding, pointer-events:none
+  The input has `color: transparent` so only the overlay is visible, but the
+  caret (caret-color) remains in its natural foreground colour.
+-->
+<span class="relative flex h-full w-full flex-1 items-center overflow-hidden">
+
+	<!-- Coloured overlay — scrolls with the input -->
+	<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)
+		)}
+	>
+		<!-- Offset to match input scroll position -->
+		<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>
+
+	<!-- Real input — transparent text, visible caret -->
+	<input
+		bind:this={inputEl}
+		type="text"
+		bind:value
+		{placeholder}
+		{disabled}
+		{readonly}
+		class={cn(
+			'relative h-full w-full flex-1 bg-transparent px-2 font-mono text-sm text-transparent caret-foreground outline-none',
+			'placeholder:text-transparent',
+			disabled && 'cursor-not-allowed',
+			preset?.class,
+			toClassValue(klass, bond)
+		)}
+		oninput={handleInput}
+		onchange={handleChange}
+		onscroll={syncScroll}
+		{...restProps}
+	/>
+</span>

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

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

package/dist/components/input/time/datetime-control.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+	import { getPreset } from '../../../context';
+	import { cn, toClassValue } from '../../../utils';
+	import type { PresetModuleName } from '../../../context/preset.svelte';
+	import { untrack } from 'svelte';
+	import { InputBond } from '../bond.svelte';
+	import type { InputDateTimeControlProps, InputDateControlProps } from '../types';
+	import Segment from './segment.svelte';
+	import {
+		parseDateTimeString, parseDateString, buildDateTimeValue, buildDateValue,
+		maxDaysInMonth, mergeParts,
+		type DateTimeParts,
+	} from './shared';
+	import { resolvePreset } from '../../atom';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		value = $bindable(),
+		date = $bindable<Date | null>(null),
+		mode = 'datetime',
+		withSeconds = false,
+		disabled = false,
+		readonly = false,
+		preset: presetKey = undefined,
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputDateTimeControlProps | InputDateControlProps = $props();
+
+	const isDateOnly = $derived(mode === 'date');
+	const resolvedPresetKey = $derived(presetKey ?? (isDateOnly ? 'input.date' : 'input.datetime'));
+
+	const preset = resolvePreset(getPreset(untrack(() => resolvedPresetKey) as PresetModuleName)?.apply(bond, [bond]));
+
+	// ── Parsed state ($derived from value prop) ───────────────────────────
+	const parsedParts = $derived(
+		isDateOnly ? parseDateString(value) : parseDateTimeString(value)
+	);
+
+	// ── Draft parts: source of truth for segment rendering ────────────────
+	// Segments write here immediately (even when the full value can't be built yet).
+	// Synced from parsedParts when value changes externally.
+	let draftParts = $state<DateTimeParts>({});
+
+	$effect(() => {
+		// Sync draft from external value changes (but don't overwrite mid-edit)
+		const p = parsedParts;
+		untrack(() => { draftParts = { ...p }; });
+	});
+
+	const { year, month, day, hours, minutes, seconds } = $derived(draftParts);
+
+	const maxDay = $derived(maxDaysInMonth(month, year));
+
+	// ── Segment refs ───────────────────────────────────────────────────────
+	let segMonth   = $state<{ focus(): void }>();
+	let segDay     = $state<{ focus(): void }>();
+	let segYear    = $state<{ focus(): void }>();
+	let segHours   = $state<{ focus(): void }>();
+	let segMinutes = $state<{ focus(): void }>();
+	let segSeconds = $state<{ focus(): void }>();
+
+	const segments = $derived(
+		isDateOnly
+			? [segMonth, segDay, segYear]
+			: withSeconds
+				? [segMonth, segDay, segYear, segHours, segMinutes, segSeconds]
+				: [segMonth, segDay, segYear, segHours, segMinutes]
+	);
+
+	// ── Emit ───────────────────────────────────────────────────────────────
+	function emit(ev: Event | undefined, overrides: DateTimeParts = {}) {
+		// Always update draft so segments don't revert
+		const merged = mergeParts(draftParts, overrides);
+		draftParts = merged;
+
+		const v = isDateOnly
+			? buildDateValue(merged)
+			: buildDateTimeValue(merged, withSeconds);
+
+		// Only update value/date when a complete, valid string can be built
+		if (!v || v === value) return;
+
+		value = v;
+		date = new Date(isDateOnly ? v + 'T00:00:00' : v);
+		if (isNaN(date.getTime())) date = null;
+		if (bond) bond.state.props.value = value;
+
+		const detail = { value, date };
+		if (ev) onchange?.(ev, detail);
+		else    oninput?.(undefined as unknown as Event, detail);
+	}
+
+	// ── Focus navigation ──────────────────────────────────────────────────
+	function moveFocus(from: number, dir: -1 | 1) {
+		segments[from + dir]?.focus();
+	}
+
+	// ── Paste ──────────────────────────────────────────────────────────────
+	function handlePaste(ev: ClipboardEvent) {
+		ev.preventDefault();
+		const text = ev.clipboardData?.getData('text') ?? '';
+
+		if (isDateOnly) {
+			// Accept YYYY-MM-DD only
+			const m = text.match(/^(\d{4})-(\d{2})-(\d{2})/);
+			if (!m) return;
+			const yr = parseInt(m[1]!, 10);
+			const mo = Math.min(12, Math.max(1, parseInt(m[2]!, 10)));
+			emit(ev, {
+				year:  yr,
+				month: mo,
+				day:   Math.min(maxDaysInMonth(mo, yr), Math.max(1, parseInt(m[3]!, 10))),
+			});
+			return;
+		}
+
+		const m = text.match(/^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/);
+		if (!m) return;
+		const overrides: DateTimeParts = {
+			year:    parseInt(m[1]!, 10),
+			month:   Math.min(12, Math.max(1, parseInt(m[2]!, 10))),
+		};
+		// Clamp day to actual max for the parsed month/year
+		const parsedYear  = overrides.year;
+		const parsedMonth = overrides.month;
+		overrides.day     = Math.min(maxDaysInMonth(parsedMonth, parsedYear), Math.max(1, parseInt(m[3]!, 10)));
+		overrides.hours   = m[4] ? Math.min(23, parseInt(m[4], 10)) : 0;
+		overrides.minutes = m[5] ? Math.min(59, parseInt(m[5], 10)) : 0;
+		if (withSeconds && m[6]) overrides.seconds = Math.min(59, parseInt(m[6], 10));
+		emit(ev, overrides);
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	class={cn(
+		'flex h-full items-center gap-0 px-2 font-mono',
+		disabled && 'cursor-not-allowed opacity-50',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	onpaste={handlePaste}
+	{...restProps}
+>
+	<!-- Date: MM / DD / YYYY -->
+	<Segment
+		bind:this={segMonth}
+		value={month}
+		min={1} max={12} digits={2} placeholder="MM"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.month = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(0, dir)}
+		onrollover={(dir) => {
+			// month rollover advances/retreats year
+			const nextYear = (year ?? new Date().getFullYear()) + dir;
+			const nextMonth = dir === 1 ? 1 : 12;
+			emit(undefined, { year: nextYear, month: nextMonth });
+		}}
+	/>
+	<span class="text-muted-foreground select-none">/</span>
+	<Segment
+		bind:this={segDay}
+		value={day}
+		min={1} max={maxDay} digits={2} placeholder="DD"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.day = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(1, dir)}
+		onrollover={(dir) => {
+			// day rollover advances/retreats month (and year if needed)
+			const curMonth = month ?? 1;
+			const curYear  = year ?? new Date().getFullYear();
+			let nextMonth = curMonth + dir;
+			let nextYear  = curYear;
+			if (nextMonth > 12) { nextMonth = 1; nextYear++; }
+			if (nextMonth < 1)  { nextMonth = 12; nextYear--; }
+			const nextDay = dir === 1 ? 1 : maxDaysInMonth(nextMonth, nextYear);
+			emit(undefined, { year: nextYear, month: nextMonth, day: nextDay });
+		}}
+	/>
+	<span class="text-muted-foreground select-none">/</span>
+	<Segment
+		bind:this={segYear}
+		value={year}
+		min={1} max={9999} digits={4} placeholder="YYYY"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.year = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(2, dir)}
+	/>
+
+	{#if !isDateOnly}
+		<span class="text-muted-foreground mx-1 select-none">·</span>
+	{/if}
+
+	<!-- Time: HH : MM [: SS] (datetime mode only) -->
+	{#if !isDateOnly}
+	<Segment
+		bind:this={segHours}
+		value={hours}
+		min={0} max={23} digits={2} placeholder="HH"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.hours = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(3, dir)}
+		onrollover={(dir) => {
+			// hours rollover advances/retreats day
+			const curDay   = day ?? 1;
+			const curMonth = month ?? 1;
+			const curYear  = year ?? new Date().getFullYear();
+			const curMax   = maxDaysInMonth(curMonth, curYear);
+			let nextDay   = curDay + dir;
+			let nextMonth = curMonth;
+			let nextYear  = curYear;
+			if (nextDay > curMax) { nextDay = 1; nextMonth++; }
+			if (nextDay < 1)      { nextMonth--; nextDay = maxDaysInMonth(nextMonth < 1 ? 12 : nextMonth, curYear); }
+			if (nextMonth > 12)   { nextMonth = 1; nextYear++; }
+			if (nextMonth < 1)    { nextMonth = 12; nextYear--; }
+			emit(undefined, { year: nextYear, month: nextMonth, day: nextDay, hours: dir === 1 ? 0 : 23 });
+		}}
+	/>
+	<span class="text-muted-foreground select-none">:</span>
+	<Segment
+		bind:this={segMinutes}
+		value={minutes}
+		min={0} max={59} digits={2} placeholder="MM"
+		{disabled} {readonly}
+		onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.minutes = v; emit(undefined, o); }}
+		onfocusmove={(dir) => moveFocus(4, dir)}
+		onrollover={(dir) => {
+			// minutes rollover advances/retreats hours
+			const nextHH = dir === 1
+				? (hours !== undefined && hours >= 23 ? 0 : (hours ?? 0) + 1)
+				: (hours !== undefined && hours <= 0  ? 23 : (hours ?? 23) - 1);
+			const override: DateTimeParts = { minutes: dir === 1 ? 0 : 59, hours: nextHH };
+			// if hours also wrap, advance day
+			if ((dir === 1 && nextHH === 0) || (dir === -1 && nextHH === 23)) {
+				const curDay   = day ?? 1;
+				const curMonth = month ?? 1;
+				const curYear  = year ?? new Date().getFullYear();
+				const curMax   = maxDaysInMonth(curMonth, curYear);
+				let nextDay   = curDay + dir;
+				let nextMonth = curMonth;
+				let nextYear  = curYear;
+				if (nextDay > curMax) { nextDay = 1; nextMonth++; }
+				if (nextDay < 1)      { nextMonth--; nextDay = maxDaysInMonth(nextMonth < 1 ? 12 : nextMonth, curYear); }
+				if (nextMonth > 12)   { nextMonth = 1; nextYear++; }
+				if (nextMonth < 1)    { nextMonth = 12; nextYear--; }
+				override.day = nextDay; override.month = nextMonth; override.year = nextYear;
+			}
+			emit(undefined, override);
+		}}
+	/>
+	{#if withSeconds}
+		<span class="text-muted-foreground select-none">:</span>
+		<Segment
+			bind:this={segSeconds}
+			value={seconds}
+			min={0} max={59} digits={2} placeholder="SS"
+			{disabled} {readonly}
+			onchange={(v) => { const o: DateTimeParts = {}; if (v !== undefined) o.seconds = v; emit(undefined, o); }}
+			onfocusmove={(dir) => moveFocus(5, dir)}
+			onrollover={(dir) => {
+				// seconds rollover advances/retreats minutes (batched)
+				const nextMM = dir === 1
+					? (minutes !== undefined && minutes >= 59 ? 0 : (minutes ?? 0) + 1)
+					: (minutes !== undefined && minutes <= 0  ? 59 : (minutes ?? 59) - 1);
+				const override: DateTimeParts = { seconds: dir === 1 ? 0 : 59, minutes: nextMM };
+				// if minutes also wrap, advance hours
+				if ((dir === 1 && nextMM === 0) || (dir === -1 && nextMM === 59)) {
+					const nextHH = dir === 1
+						? (hours !== undefined && hours >= 23 ? 0 : (hours ?? 0) + 1)
+						: (hours !== undefined && hours <= 0  ? 23 : (hours ?? 23) - 1);
+					override.hours = nextHH;
+				}
+				emit(undefined, override);
+			}}
+		/>
+	{/if}
+	{/if}
+</span>

package/dist/components/input/time/datetime-control.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { InputDateTimeControlProps, InputDateControlProps } from '../types';
+type $$ComponentProps = InputDateTimeControlProps | InputDateControlProps;
+declare const DatetimeControl: import("svelte").Component<$$ComponentProps, {}, "value" | "date">;
+type DatetimeControl = ReturnType<typeof DatetimeControl>;
+export default DatetimeControl;

package/dist/components/input/time/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Segment } from './segment.svelte';
+export { default as TimeControl } from './time-control.svelte';
+export { default as DateTimeControl } from './datetime-control.svelte';
+export { default as DateControl } from './datetime-control.svelte';
+export * from './types';
+export * from './shared';

package/dist/components/input/time/index.js

@@ -0,0 +1,6 @@
+export { default as Segment } from './segment.svelte';
+export { default as TimeControl } from './time-control.svelte';
+export { default as DateTimeControl } from './datetime-control.svelte';
+export { default as DateControl } from './datetime-control.svelte';
+export * from './types';
+export * from './shared';

package/dist/components/input/time/segment.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { SegmentProps } from './shared';
+
+	let {
+		value = undefined,
+		min,
+		max,
+		digits = 2,
+		placeholder,
+		disabled = false,
+		readonly = false,
+		class: klass = '',
+		onchange,
+		onfocusmove,
+		onrollover,
+	}: SegmentProps = $props();
+
+	let el = $state<HTMLSpanElement>();
+	let buffer = $state('');
+
+	const displayPlaceholder = placeholder ?? '—'.repeat(digits);
+
+	function getDisplay(): string {
+		if (buffer !== '') return buffer.padStart(digits, '_');
+		if (value !== undefined) return String(value).padStart(digits, '0');
+		return displayPlaceholder;
+	}
+
+	function isEmpty(): boolean {
+		return value === undefined && buffer === '';
+	}
+
+	// Update DOM imperatively to avoid focus loss
+	$effect(() => {
+		if (!el) return;
+		const text = getDisplay();
+		void buffer; void value; // reactive deps
+
+		untrack(() => {
+			requestAnimationFrame(() => {
+				if (el && el.textContent !== text) el.textContent = text;
+			});
+		});
+
+		el.setAttribute('aria-valuetext', text);
+		el.setAttribute('aria-valuenow', value !== undefined ? String(value) : '');
+		el.setAttribute('data-empty', String(isEmpty()));
+
+		if (isEmpty()) {
+			el.classList.remove('text-foreground');
+			el.classList.add('text-muted-foreground');
+		} else {
+			el.classList.remove('text-muted-foreground');
+			el.classList.add('text-foreground');
+		}
+	});
+
+	function clamp(v: number) {
+		return Math.max(min, Math.min(max, v));
+	}
+
+	function commitBuffer(buf: string, andAdvance: boolean) {
+		const n = parseInt(buf, 10);
+		if (!isNaN(n)) onchange?.(clamp(n));
+		buffer = '';
+		if (andAdvance) onfocusmove?.(1);
+	}
+
+	function handleKeydown(ev: KeyboardEvent) {
+		if (disabled || readonly) return;
+
+		if (ev.key >= '0' && ev.key <= '9') {
+			ev.preventDefault();
+			const next = buffer + ev.key;
+			const nextNum = parseInt(next, 10);
+
+			if (next.length === 1 && nextNum > max) return;
+
+			if (next.length === digits) {
+				commitBuffer(nextNum <= max ? next : String(max), true);
+				return;
+			}
+
+			buffer = next;
+
+			const minCompletion = parseInt(next + '0'.repeat(digits - next.length), 10);
+			if (minCompletion > max) commitBuffer(next, true);
+		} else if (ev.key === 'ArrowUp') {
+			ev.preventDefault();
+			buffer = '';
+			const cur = value ?? min;
+			if (cur >= max) { onchange?.(min); onrollover?.(1); }
+			else onchange?.(cur + 1);
+		} else if (ev.key === 'ArrowDown') {
+			ev.preventDefault();
+			buffer = '';
+			const cur = value ?? max;
+			if (cur <= min) { onchange?.(max); onrollover?.(-1); }
+			else onchange?.(cur - 1);
+		} else if (ev.key === 'ArrowLeft') {
+			ev.preventDefault();
+			if (buffer) buffer = '';
+			else onfocusmove?.(-1);
+		} else if (ev.key === 'ArrowRight') {
+			ev.preventDefault();
+			onfocusmove?.(1);
+		} else if (ev.key === 'Backspace' || ev.key === 'Delete') {
+			ev.preventDefault();
+			if (buffer) buffer = buffer.slice(0, -1);
+			else onchange?.(undefined);
+		} else if (ev.key === 'Tab') {
+			buffer = '';
+		} else if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
+			ev.preventDefault();
+		}
+	}
+
+	export function focus() {
+		el?.focus();
+	}
+</script>
+
+<span
+	bind:this={el}
+	role="spinbutton"
+	tabindex={disabled ? -1 : 0}
+	contenteditable={!disabled && !readonly}
+	aria-valuemin={min}
+	aria-valuemax={max}
+	aria-label={placeholder}
+	aria-disabled={disabled}
+	class={[
+		'inline-flex min-w-[2ch] items-center justify-center px-0.5 text-center font-mono tabular-nums',
+		'focus:bg-foreground/10 focus:outline-none',
+		'text-muted-foreground',
+		disabled && 'cursor-not-allowed opacity-50',
+		klass,
+	].filter(Boolean).join(' ')}
+	onkeydown={handleKeydown}
+	onpaste={(ev) => ev.preventDefault()}
+	onblur={() => { if (buffer) commitBuffer(buffer, false); }}
+>{displayPlaceholder}</span>

package/dist/components/input/time/segment.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { SegmentProps } from './shared';
+declare const Segment: import("svelte").Component<SegmentProps, {
+    focus: () => void;
+}, "">;
+type Segment = ReturnType<typeof Segment>;
+export default Segment;