@joewinke/jatui 0.39.0 → 0.41.0

package/dist/components/PinInput.svelte

@@ -1,4 +1,20 @@
 <script lang="ts">
+	/**
+	 * PinInput — one box per character for PINs and one-time codes.
+	 *
+	 * OTP autofill (BoardUI wave 1, jatui-owg2z): every cell carries
+	 * `autocomplete="one-time-code"` and accepts multi-character input (no
+	 * maxlength), so iOS/Android SMS autofill and Chrome WebOTP — which drop
+	 * the WHOLE code into whichever cell is focused — fill every cell from the
+	 * first. A paste distributes from the caret cell. Logic: utils/pinInput.ts.
+	 */
+	import {
+		applyCellInput,
+		cellsFromValue,
+		distribute,
+		isPinComplete
+	} from '../utils/pinInput';
+
 	interface Props {
 		length?: number;
 		value?: string;
@@ -7,6 +23,10 @@
 		error?: string;
 		disabled?: boolean;
 		label?: string;
+		/** `name` on the first cell, so a plain form post carries the code. */
+		name?: string;
+		/** Override the autocomplete token. Default `one-time-code`; use `off` for a static PIN. */
+		autocomplete?: HTMLInputElement['autocomplete'];
 		oncomplete?: (value: string) => void;
 	}
 
@@ -18,14 +38,27 @@
 		error = '',
 		disabled = false,
 		label = '',
+		name,
+		autocomplete = 'one-time-code',
 		oncomplete
 	}: Props = $props();
 
-	let cells: string[] = $state(Array(length).fill(''));
+	// Cells mirror `value`; an external write (reset, prefill) re-seeds them.
+	let cells: string[] = $state(cellsFromValue(value, length, numeric));
 	let inputEls: HTMLInputElement[] = $state([]);
 	let poppingCells: boolean[] = $state(Array(length).fill(false));
 	let shaking = $state(false);
 	let hadError = false;
+	let lastCompleted = '';
+
+	$effect(() => {
+		const v = value ?? '';
+		const n = length;
+		if (v !== cells.join('') || cells.length !== n) {
+			cells = cellsFromValue(v, n, numeric);
+			poppingCells = Array(n).fill(false);
+		}
+	});
 
 	$effect(() => {
 		const hasError = !!error;
@@ -48,50 +81,73 @@
 		setTimeout(() => { poppingCells[i] = false; }, 350);
 	}
 
-	function onInput(i: number, e: Event) {
-		const el = e.target as HTMLInputElement;
-		let char = el.value;
-
-		if (numeric) char = char.replace(/\D/g, '');
-
-		if (char.length > 1) {
-			// paste — split across cells
-			const chars = char.slice(0, length - i).split('');
-			chars.forEach((c, offset) => {
-				if (i + offset < length) {
-					cells[i + offset] = c;
-					if (c) popCell(i + offset);
-				}
-			});
-			const nextIdx = Math.min(i + chars.length, length - 1);
-			inputEls[nextIdx]?.focus();
-		} else {
-			cells[i] = char.slice(-1);
-			if (cells[i]) {
-				popCell(i);
-				inputEls[i + 1]?.focus();
+	function commit(next: string[], focus: number) {
+		next.forEach((c, i) => {
+			if (c && c !== cells[i]) popCell(i);
+		});
+		cells = next;
+		// The DOM value may hold extra characters (no maxlength, so OS autofill
+		// can deliver a whole code) — write each cell back to its single char.
+		inputEls.forEach((el, i) => {
+			if (el && el.value !== next[i]) el.value = next[i];
+		});
+		value = next.join('');
+		inputEls[focus]?.focus();
+		if (isPinComplete(next, length)) {
+			if (value !== lastCompleted) {
+				lastCompleted = value;
+				oncomplete?.(value);
 			}
+		} else {
+			lastCompleted = '';
 		}
+	}
 
-		value = cells.join('');
-		if (value.length === length && !value.includes('')) {
-			oncomplete?.(value);
-		}
+	function onInput(i: number, e: Event) {
+		const el = e.target as HTMLInputElement;
+		const r = applyCellInput(cells, i, el.value, { length, numeric });
+		commit(r.cells, r.focus);
+	}
+
+	function onPaste(i: number, e: ClipboardEvent) {
+		const text = e.clipboardData?.getData('text') ?? '';
+		if (!text) return;
+		e.preventDefault();
+		const r = distribute(cells, i, text, { length, numeric });
+		commit(r.cells, r.focus);
 	}
 
 	function onKeydown(i: number, e: KeyboardEvent) {
 		if (e.key === 'Backspace') {
+			e.preventDefault();
 			if (!cells[i]) {
-				inputEls[i - 1]?.focus();
+				if (i > 0) {
+					const next = [...cells];
+					next[i - 1] = '';
+					commit(next, i - 1);
+				}
 			} else {
-				cells[i] = '';
-				value = cells.join('');
+				const next = [...cells];
+				next[i] = '';
+				commit(next, i);
 			}
+		} else if (e.key === 'Delete') {
 			e.preventDefault();
+			const next = [...cells];
+			next[i] = '';
+			commit(next, i);
 		} else if (e.key === 'ArrowLeft') {
+			e.preventDefault();
 			inputEls[i - 1]?.focus();
 		} else if (e.key === 'ArrowRight') {
+			e.preventDefault();
 			inputEls[i + 1]?.focus();
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			inputEls[0]?.focus();
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			inputEls[length - 1]?.focus();
 		}
 	}
 
@@ -111,6 +167,7 @@
 
 	<div
 		class="flex gap-2"
+		dir="ltr"
 		role="group"
 		aria-label={label || 'PIN input'}
 		aria-describedby={error ? `${groupId}-error` : undefined}
@@ -120,7 +177,12 @@
 				bind:this={inputEls[i]}
 				type={masked ? 'password' : 'text'}
 				inputmode={numeric ? 'numeric' : 'text'}
-				maxlength={1}
+				pattern={numeric ? '[0-9]*' : undefined}
+				autocomplete={autocomplete as any}
+				name={i === 0 ? name : undefined}
+				dir="ltr"
+				spellcheck="false"
+				autocapitalize="off"
 				value={cells[i]}
 				{disabled}
 				aria-label={`Digit ${i + 1} of ${length}`}
@@ -129,6 +191,7 @@
 				class:pin-cell--filled={!!cells[i]}
 				class:pin-cell--pop={poppingCells[i]}
 				oninput={(e) => onInput(i, e)}
+				onpaste={(e) => onPaste(i, e)}
 				onkeydown={(e) => onKeydown(i, e)}
 				onfocus={(e) => onFocus(e.target as HTMLInputElement)}
 			/>

package/dist/components/PinInput.svelte.d.ts

@@ -6,6 +6,10 @@ interface Props {
     error?: string;
     disabled?: boolean;
     label?: string;
+    /** `name` on the first cell, so a plain form post carries the code. */
+    name?: string;
+    /** Override the autocomplete token. Default `one-time-code`; use `off` for a static PIN. */
+    autocomplete?: HTMLInputElement['autocomplete'];
     oncomplete?: (value: string) => void;
 }
 declare const PinInput: import("svelte").Component<Props, {}, "value">;

package/dist/components/SegmentedControl.svelte

@@ -0,0 +1,263 @@
+<!--
+  SegmentedControl: single-select toggle group that SETS A VALUE
+  (jatui-6kitr). Use Tabs to switch panels; use this for "Week / Month /
+  Year", view modes and filter scopes.
+
+  Radio semantics (role="radiogroup" + role="radio"), roving tabindex, arrow
+  keys move AND select (as native radios do), Home/End. A sliding thumb marks
+  the selection on motion tokens; it jumps under reduced motion. Variants
+  after BoardUI's segmented control (MIT, © 2026 Mertcan Dundar Esmergul):
+  `solid` (track + raised thumb) and `plain` (tinted thumb, no track).
+-->
+<script lang="ts" module>
+	export interface SegmentedOption<V extends string | number = string> {
+		value: V;
+		label: string;
+		disabled?: boolean;
+		/** Accessible name when `label` is visually hidden by an `option` snippet. */
+		ariaLabel?: string;
+	}
+</script>
+
+<script lang="ts" generics="V extends string | number = string">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Options, or plain strings (value = label). */
+		options: readonly (SegmentedOption<V> | V)[];
+		value?: V;
+		size?: 'xs' | 'sm' | 'md';
+		variant?: 'solid' | 'plain';
+		/** Stretch to the container, segments share the width. */
+		fullWidth?: boolean;
+		disabled?: boolean;
+		ariaLabel?: string;
+		/** Custom segment content (icon + label, counts…). */
+		option?: Snippet<[SegmentedOption<V>, { selected: boolean }]>;
+		onChange?: (value: V) => void;
+		class?: string;
+	}
+
+	let {
+		options,
+		value = $bindable(),
+		size = 'sm',
+		variant = 'solid',
+		fullWidth = false,
+		disabled = false,
+		ariaLabel,
+		option,
+		onChange,
+		class: className = ''
+	}: Props = $props();
+
+	const items = $derived(
+		options.map((o): SegmentedOption<V> =>
+			typeof o === 'object' ? o : { value: o, label: String(o) }
+		)
+	);
+	const selectedIndex = $derived(items.findIndex((o) => o.value === value));
+	const tabIndexOf = $derived(selectedIndex >= 0 ? selectedIndex : items.findIndex((o) => !o.disabled));
+
+	let trackEl: HTMLDivElement | undefined = $state();
+	const buttons: HTMLButtonElement[] = $state([]);
+	let thumb = $state<{ x: number; w: number } | null>(null);
+	let ready = $state(false);
+
+	function measure() {
+		const b = buttons[selectedIndex];
+		if (!b || !trackEl) {
+			thumb = null;
+			return;
+		}
+		thumb = { x: b.offsetLeft, w: b.offsetWidth };
+	}
+
+	$effect(() => {
+		void selectedIndex;
+		void items.length;
+		measure();
+		// Enable the slide only after the first placement (no fly-in on mount).
+		const id = requestAnimationFrame(() => (ready = true));
+		return () => cancelAnimationFrame(id);
+	});
+
+	$effect(() => {
+		if (!trackEl || typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver(() => measure());
+		ro.observe(trackEl);
+		return () => ro.disconnect();
+	});
+
+	function choose(i: number) {
+		const o = items[i];
+		if (!o || o.disabled || disabled) return;
+		if (o.value !== value) {
+			value = o.value;
+			onChange?.(o.value);
+		}
+	}
+
+	function onKeydown(e: KeyboardEvent, i: number) {
+		const step = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 0;
+		let next = -1;
+		const n = items.length;
+		if (step) {
+			for (let k = 1; k <= n; k++) {
+				const j = (((i + step * k) % n) + n) % n;
+				if (!items[j].disabled) {
+					next = j;
+					break;
+				}
+			}
+		} else if (e.key === 'Home') next = items.findIndex((o) => !o.disabled);
+		else if (e.key === 'End') next = items.findLastIndex((o) => !o.disabled);
+		else return;
+		if (next < 0) return;
+		e.preventDefault();
+		choose(next);
+		buttons[next]?.focus();
+	}
+</script>
+
+<div
+	bind:this={trackEl}
+	class="jatui-segmented seg-{size} seg-{variant} {className}"
+	class:seg-full={fullWidth}
+	class:seg-ready={ready}
+	class:seg-disabled={disabled}
+	role="radiogroup"
+	aria-label={ariaLabel}
+	aria-disabled={disabled || undefined}
+>
+	{#if thumb}
+		<span class="seg-thumb" aria-hidden="true" style:--x="{thumb.x}px" style:--w="{thumb.w}px"></span>
+	{/if}
+	{#each items as o, i (o.value)}
+		{@const sel = i === selectedIndex}
+		<button
+			bind:this={buttons[i]}
+			type="button"
+			role="radio"
+			class="seg-item"
+			class:is-selected={sel}
+			aria-checked={sel}
+			aria-label={o.ariaLabel}
+			disabled={o.disabled || disabled}
+			tabindex={i === tabIndexOf ? 0 : -1}
+			onclick={() => choose(i)}
+			onkeydown={(e) => onKeydown(e, i)}
+		>
+			{#if option}{@render option(o, { selected: sel })}{:else}{o.label}{/if}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.jatui-segmented {
+		--seg-h: 2rem;
+		--seg-px: 0.75rem;
+		--seg-pad: 3px;
+		position: relative;
+		display: inline-flex;
+		align-items: stretch;
+		gap: 2px;
+		padding: var(--seg-pad);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		font-size: 0.875rem;
+		isolation: isolate;
+	}
+	.seg-solid {
+		background: color-mix(in oklch, var(--color-base-content) 7%, var(--color-base-100));
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+	.seg-xs {
+		--seg-h: 1.5rem;
+		--seg-px: 0.5rem;
+		--seg-pad: 2px;
+		font-size: 0.75rem;
+	}
+	.seg-sm {
+		--seg-h: 1.75rem;
+		--seg-px: 0.625rem;
+		font-size: 0.8125rem;
+	}
+	.seg-full {
+		display: flex;
+		width: 100%;
+	}
+	.seg-full .seg-item {
+		flex: 1 1 0;
+	}
+
+	.seg-item {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--jatui-space-sm, 4px);
+		min-height: var(--seg-h);
+		padding: 0 var(--seg-px);
+		border: 0;
+		border-radius: calc(var(--jatui-radius-field, 0.25rem) - 1px);
+		background: transparent;
+		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+		font: inherit;
+		font-weight: 500;
+		white-space: nowrap;
+		cursor: pointer;
+		transition: color var(--motion-fast, 150ms) var(--motion-standard, ease);
+	}
+	.seg-item:hover:not(:disabled):not(.is-selected) {
+		color: var(--color-base-content);
+	}
+	.seg-item.is-selected {
+		color: var(--color-base-content);
+	}
+	.seg-plain .seg-item.is-selected {
+		color: var(--color-primary);
+	}
+	.seg-item:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+	.seg-item:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+
+	.seg-thumb {
+		position: absolute;
+		z-index: 0;
+		top: var(--seg-pad);
+		bottom: var(--seg-pad);
+		left: 0;
+		width: var(--w);
+		transform: translateX(var(--x));
+		border-radius: calc(var(--jatui-radius-field, 0.25rem) - 1px);
+		pointer-events: none;
+	}
+	.seg-solid .seg-thumb {
+		background: var(--color-base-100);
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+	}
+	.seg-plain .seg-thumb {
+		background: color-mix(in oklch, var(--color-primary) 14%, transparent);
+	}
+	.seg-ready .seg-thumb {
+		transition:
+			transform var(--motion-move, 250ms) var(--motion-glide, cubic-bezier(0.22, 1, 0.36, 1)),
+			width var(--motion-move, 250ms) var(--motion-glide, cubic-bezier(0.22, 1, 0.36, 1));
+	}
+	.seg-disabled {
+		opacity: 0.6;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.seg-ready .seg-thumb,
+		.seg-item {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/SegmentedControl.svelte.d.ts

@@ -0,0 +1,48 @@
+export interface SegmentedOption<V extends string | number = string> {
+    value: V;
+    label: string;
+    disabled?: boolean;
+    /** Accessible name when `label` is visually hidden by an `option` snippet. */
+    ariaLabel?: string;
+}
+import type { Snippet } from 'svelte';
+declare function $$render<V extends string | number = string>(): {
+    props: {
+        /** Options, or plain strings (value = label). */
+        options: readonly (SegmentedOption<V> | V)[];
+        value?: V;
+        size?: "xs" | "sm" | "md";
+        variant?: "solid" | "plain";
+        /** Stretch to the container, segments share the width. */
+        fullWidth?: boolean;
+        disabled?: boolean;
+        ariaLabel?: string;
+        /** Custom segment content (icon + label, counts…). */
+        option?: Snippet<[SegmentedOption<V>, {
+            selected: boolean;
+        }]>;
+        onChange?: (value: V) => void;
+        class?: string;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V extends string | number = string> {
+    props(): ReturnType<typeof $$render<V>>['props'];
+    events(): ReturnType<typeof $$render<V>>['events'];
+    slots(): ReturnType<typeof $$render<V>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V extends string | number = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V>['props']>, ReturnType<__sveltets_Render<V>['events']>, ReturnType<__sveltets_Render<V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V>['bindings']>;
+    } & ReturnType<__sveltets_Render<V>['exports']>;
+    <V extends string | number = string>(internal: unknown, props: ReturnType<__sveltets_Render<V>['props']> & {}): ReturnType<__sveltets_Render<V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SegmentedControl: $$IsomorphicComponent;
+type SegmentedControl<V extends string | number = string> = InstanceType<typeof SegmentedControl<V>>;
+export default SegmentedControl;

package/dist/components/TextArea.svelte

@@ -4,7 +4,14 @@
 	 *
 	 * Multi-line text input with validation, auto-resize, and character count.
 	 * Converted from Svelte 4 to Svelte 5 runes.
+	 *
+	 * Auto-grow (`autoResize`, or implied by `maxRows`) grows a whole line at a
+	 * time from `minRows` (default `rows`) up to `maxRows`, then scrolls. Where
+	 * the browser supports CSS `field-sizing: content` the growth is pure CSS
+	 * (no per-keystroke measuring); elsewhere it falls back to the row-quantized
+	 * JS path in utils/textareaRows.ts.
 	 */
+	import { textareaRowsHeight } from '../utils/textareaRows';
 
 	interface Props {
 		label?: string;
@@ -17,6 +24,10 @@
 		disabled?: boolean;
 		readonly?: boolean;
 		autoResize?: boolean;
+		/** Auto-grow floor in rows. Default `rows`. */
+		minRows?: number;
+		/** Auto-grow ceiling in rows; past it the field scrolls. Setting it turns auto-grow on. */
+		maxRows?: number;
 		error?: string;
 		helpText?: string;
 		showCount?: boolean;
@@ -39,6 +50,8 @@
 		disabled = false,
 		readonly = false,
 		autoResize = false,
+		minRows,
+		maxRows,
 		error = '',
 		helpText = '',
 		showCount = false,
@@ -73,24 +86,73 @@
 	const characterCount = $derived(value?.length || 0);
 	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
 
+	const grows = $derived(autoResize || maxRows != null);
+	const floorRows = $derived(Math.max(1, minRows ?? rows));
+	// Decided after mount: SSR has no CSS.supports, and hydration does not
+	// repair a style attribute that differs from the server render.
+	let fieldSizing = $state(false);
+	$effect(() => {
+		fieldSizing = typeof CSS !== 'undefined' && CSS.supports?.('field-sizing', 'content') === true;
+	});
+
+	// Vertical padding + border, measured once mounted (border-box sizing).
+	let chromePx = $state(18);
+	let paddingPx = $state(16);
+	let lineHeightPx = $state(24);
+
+	function measureChrome(el: HTMLTextAreaElement) {
+		const cs = getComputedStyle(el);
+		const n = (v: string) => parseFloat(v) || 0;
+		paddingPx = n(cs.paddingTop) + n(cs.paddingBottom);
+		chromePx = paddingPx + n(cs.borderTopWidth) + n(cs.borderBottomWidth);
+		const lh = n(cs.lineHeight);
+		lineHeightPx = lh > 0 ? lh : n(cs.fontSize) * 1.5 || 24;
+	}
+
 	function handleInput(event: Event) {
 		const target = event.target as HTMLTextAreaElement;
 		value = target.value;
-		if (autoResize) autoResizeTextarea(target);
+		if (grows && !fieldSizing) autoResizeTextarea(target);
 		oninput?.(value);
 	}
 
 	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
 		textarea.style.height = 'auto';
-		textarea.style.height = textarea.scrollHeight + 'px';
+		const r = textareaRowsHeight({
+			scrollHeight: textarea.scrollHeight,
+			lineHeight: lineHeightPx,
+			chrome: chromePx,
+			padding: paddingPx,
+			minRows: floorRows,
+			maxRows
+		});
+		textarea.style.height = r.height + 'px';
+		textarea.style.overflowY = r.overflow;
 	}
 
 	$effect(() => {
-		if (autoResize && textareaElement && value !== undefined) {
+		if (grows && textareaElement) measureChrome(textareaElement);
+	});
+
+	$effect(() => {
+		if (grows && !fieldSizing && textareaElement && value !== undefined) {
+			void floorRows;
+			void maxRows;
 			autoResizeTextarea(textareaElement);
 		}
 	});
 
+	const growStyle = $derived.by(() => {
+		if (!grows) return '';
+		const min = `min-height: ${Math.round(floorRows * lineHeightPx + chromePx)}px;`;
+		if (!fieldSizing) return min;
+		const max =
+			maxRows != null
+				? ` max-height: ${Math.round(Math.max(floorRows, maxRows) * lineHeightPx + chromePx)}px; overflow-y: auto;`
+				: '';
+		return `field-sizing: content; ${min}${max}`;
+	});
+
 	// Error-state shake (transitions.dev). Replays `t-input-shake` when `error`
 	// becomes set. See TextInput for the full rationale.
 	let hadError = false;
@@ -127,7 +189,7 @@
 		{id}
 		{name}
 		{placeholder}
-		{rows}
+		rows={grows ? floorRows : rows}
 		{maxlength}
 		{minlength}
 		{required}
@@ -138,7 +200,7 @@
 		class={textareaClass}
 		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
 		aria-invalid={error ? 'true' : 'false'}
-		style={autoResize ? `min-height: calc(1.5em * ${rows} + 1rem);` : ''}
+		style={growStyle}
 		onanimationend={() => textareaElement?.classList.remove('t-input-shake')}
 	></textarea>
 

package/dist/components/TextArea.svelte.d.ts

@@ -1,9 +1,3 @@
-/**
- * TextArea Component
- *
- * Multi-line text input with validation, auto-resize, and character count.
- * Converted from Svelte 4 to Svelte 5 runes.
- */
 interface Props {
     label?: string;
     value?: string;
@@ -15,6 +9,10 @@ interface Props {
     disabled?: boolean;
     readonly?: boolean;
     autoResize?: boolean;
+    /** Auto-grow floor in rows. Default `rows`. */
+    minRows?: number;
+    /** Auto-grow ceiling in rows; past it the field scrolls. Setting it turns auto-grow on. */
+    maxRows?: number;
     error?: string;
     helpText?: string;
     showCount?: boolean;