@joewinke/jatui 0.1.27 → 0.1.29

package/dist/actions/railNav.js

@@ -60,17 +60,6 @@
  *   3. Handle Left/Right in `onAction` and call `rail.bump(host)` on change:
  *        onAction: (id, dir, host) => { formData[id] = cycle(opts[id], …, dir); rail.bump(host); }
  */
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 // ─── Exported helpers ──────────────────────────────────────────────────────────
 /**
  * Cycle through `list`, returning the item `dir` steps from `current`.
@@ -84,34 +73,39 @@ var __assign = (this && this.__assign) || function () {
 export function cycle(list, current, dir) {
     if (list.length === 0)
         return current;
-    var i = list.indexOf(current);
+    const i = list.indexOf(current);
     // When `current` is not in the list, treat it as if we're at position -1
     // so that `dir=1` lands at index 0 (the first item) and `dir=-1` lands at
     // the last item — matching the "not found → start from the beginning" idiom.
-    var base = i === -1 ? -1 : i;
+    const base = i === -1 ? -1 : i;
     return list[(((base + dir) % list.length) + list.length) % list.length];
 }
 // ─── Internals ─────────────────────────────────────────────────────────────────
-var BUMP_DURATION_MS = 280;
-var RAIL_FOCUS_CLASS = 'rail-focus';
-var RAIL_CYCLED_CLASS = 'rail-cycled';
+const BUMP_DURATION_MS = 280;
+const RAIL_FOCUS_CLASS = 'rail-focus';
+const RAIL_CYCLED_CLASS = 'rail-cycled';
 function resolveOrder(opts) {
     return typeof opts.order === 'function' ? opts.order() : opts.order;
 }
 function resolveAttr(opts) {
-    var _a;
-    return (_a = opts.attr) !== null && _a !== void 0 ? _a : 'data-rail-id';
+    return opts.attr ?? 'data-rail-id';
 }
 /** Return all currently-rendered rung hosts in the rail order. */
 function resolveHosts(optsRef) {
-    var container = optsRef.current.container;
+    const { container } = optsRef.current;
     if (!container)
         return [];
-    var attr = resolveAttr(optsRef.current);
-    var order = resolveOrder(optsRef.current);
+    const attr = resolveAttr(optsRef.current);
+    const order = resolveOrder(optsRef.current);
     return order
-        .map(function (id) { return container.querySelector("[".concat(attr, "=\"").concat(id, "\"]")); })
-        .filter(function (el) { return !!el; });
+        .map((id) => container.querySelector(`[${attr}="${id}"]`))
+        // checkVisibility() correctly returns false for elements inside a closed <details>
+        // (browsers keep offsetParent non-null for those, so that check alone is insufficient).
+        // Where checkVisibility is unavailable (jsdom, older engines) treat the rung as
+        // visible — a rendered element in `order` is navigable by default; only the
+        // closed-<details> case needs the extra exclusion, and that only exists in a
+        // real layout engine.
+        .filter((el) => !!el && (el.checkVisibility?.() ?? true));
 }
 /**
  * Focus the most appropriate control inside a rung host:
@@ -126,17 +120,17 @@ function resolveHosts(optsRef) {
  *  4. Last resort: focus the host itself (requires tabindex on the host).
  */
 function focusRailHost(host) {
-    var _a;
     if (host.matches('input,select,textarea,button,[contenteditable="true"],[tabindex]')) {
         host.focus();
         return;
     }
-    var inner = (_a = host.querySelector('[contenteditable="true"],input,select,textarea')) !== null && _a !== void 0 ? _a : host.querySelector('.sd-trigger,button');
-    (inner !== null && inner !== void 0 ? inner : host).focus();
+    const inner = host.querySelector('[contenteditable="true"],input,select,textarea') ??
+        host.querySelector('.sd-trigger,button');
+    (inner ?? host).focus();
 }
 function makeController(optsRef) {
-    var _currentRailId = '';
-    var _lastFocusedHost = null;
+    let _currentRailId = '';
+    let _lastFocusedHost = null;
     function applyFocusClass(host) {
         if (_lastFocusedHost && _lastFocusedHost !== host) {
             _lastFocusedHost.classList.remove(RAIL_FOCUS_CLASS);
@@ -151,14 +145,14 @@ function makeController(optsRef) {
         host.classList.remove(RAIL_CYCLED_CLASS);
         void host.offsetWidth; // reflow so the animation restarts on rapid presses
         host.classList.add(RAIL_CYCLED_CLASS);
-        setTimeout(function () { return host.classList.remove(RAIL_CYCLED_CLASS); }, BUMP_DURATION_MS);
+        setTimeout(() => host.classList.remove(RAIL_CYCLED_CLASS), BUMP_DURATION_MS);
     }
     function focus(id) {
-        var container = optsRef.current.container;
+        const { container } = optsRef.current;
         if (!container)
             return;
-        var attr = resolveAttr(optsRef.current);
-        var host = container.querySelector("[".concat(attr, "=\"").concat(id, "\"]"));
+        const attr = resolveAttr(optsRef.current);
+        const host = container.querySelector(`[${attr}="${id}"]`);
         if (host) {
             focusRailHost(host);
             applyFocusClass(host);
@@ -169,21 +163,20 @@ function makeController(optsRef) {
         }
     }
     function moveRung(dir) {
-        var _a;
-        var hosts = resolveHosts(optsRef);
+        const hosts = resolveHosts(optsRef);
         if (hosts.length === 0)
             return;
-        var attr = resolveAttr(optsRef.current);
-        var ids = hosts.map(function (h) { return h.getAttribute(attr); });
+        const attr = resolveAttr(optsRef.current);
+        const ids = hosts.map((h) => h.getAttribute(attr));
         // Anchor on the actually-focused rung first. Fall back to the last tracked
         // rung (covers focus parked on the container after an Escape pop-out).
-        var active = document.activeElement;
-        var activeFocused = (_a = (active === null || active === void 0 ? void 0 : active.closest("[".concat(attr, "]")))) === null || _a === void 0 ? void 0 : _a.getAttribute(attr);
-        var fromId = activeFocused && ids.includes(activeFocused) ? activeFocused : _currentRailId;
-        var pos = fromId ? ids.indexOf(fromId) : -1;
+        const active = document.activeElement;
+        const activeFocused = (active?.closest(`[${attr}]`))?.getAttribute(attr);
+        const fromId = activeFocused && ids.includes(activeFocused) ? activeFocused : _currentRailId;
+        let pos = fromId ? ids.indexOf(fromId) : -1;
         if (pos === -1)
             pos = dir === 1 ? -1 : hosts.length;
-        var next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
+        const next = (((pos + dir) % hosts.length) + hosts.length) % hosts.length;
         focusRailHost(hosts[next]);
         applyFocusClass(hosts[next]);
         _currentRailId = ids[next];
@@ -191,10 +184,9 @@ function makeController(optsRef) {
     function refresh() {
         // Re-derive hosts; re-apply focus class if the current rung is still rendered
         // (DOM may have been reconstructed by Svelte's reactive updates).
-        var hosts = resolveHosts(optsRef);
-        var attr = resolveAttr(optsRef.current);
-        for (var _i = 0, hosts_1 = hosts; _i < hosts_1.length; _i++) {
-            var h = hosts_1[_i];
+        const hosts = resolveHosts(optsRef);
+        const attr = resolveAttr(optsRef.current);
+        for (const h of hosts) {
             if (h.getAttribute(attr) === _currentRailId) {
                 applyFocusClass(h);
                 return;
@@ -202,11 +194,10 @@ function makeController(optsRef) {
         }
     }
     function handleFocusin(event) {
-        var _a;
-        var attr = resolveAttr(optsRef.current);
-        var order = resolveOrder(optsRef.current);
-        var host = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("[".concat(attr, "]"));
-        var id = host === null || host === void 0 ? void 0 : host.getAttribute(attr);
+        const attr = resolveAttr(optsRef.current);
+        const order = resolveOrder(optsRef.current);
+        const host = event.target?.closest(`[${attr}]`);
+        const id = host?.getAttribute(attr);
         // Only track rungs that are in the rail order. Tabbing into an off-rail
         // control (e.g. a description textarea) leaves the last real rung intact
         // so Up / Down can resume from it after the user tabs back out.
@@ -216,18 +207,17 @@ function makeController(optsRef) {
         }
     }
     function handleKeydown(event) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        var opts = optsRef.current;
-        var el = document.activeElement;
-        var tag = el === null || el === void 0 ? void 0 : el.tagName;
-        var isTextField = !!el &&
+        const opts = optsRef.current;
+        const el = document.activeElement;
+        const tag = el?.tagName;
+        const isTextField = !!el &&
             (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable === true);
-        var isMultiline = !!el && (tag === 'TEXTAREA' || el.isContentEditable === true);
-        var hasMod = event.metaKey || event.ctrlKey || event.altKey;
+        const isMultiline = !!el && (tag === 'TEXTAREA' || el.isContentEditable === true);
+        const hasMod = event.metaKey || event.ctrlKey || event.altKey;
         // Modal trap — stop non-text keystrokes from bubbling to window-level page
         // listeners (e.g., a listNav attached to `window`). Text-field keystrokes
         // propagate normally so typing in the drawer doesn't interfere.
-        var trap = opts.trap !== false;
+        const trap = opts.trap !== false;
         if (trap && !isTextField)
             event.stopPropagation();
         // Escape cascade:
@@ -235,33 +225,33 @@ function makeController(optsRef) {
         //  2. focus inside a descendant control → pop back to container
         //  3. focus already on the container (or just popped) → call onEscape
         if (event.key === 'Escape' && !hasMod) {
-            var popoverOpen_1 = (_b = (_a = opts.isPopoverOpen) === null || _a === void 0 ? void 0 : _a.call(opts)) !== null && _b !== void 0 ? _b : false;
-            if (popoverOpen_1) {
+            const popoverOpen = opts.isPopoverOpen?.() ?? false;
+            if (popoverOpen) {
                 event.preventDefault();
-                (_c = opts.onPopoverEscape) === null || _c === void 0 ? void 0 : _c.call(opts);
+                opts.onPopoverEscape?.();
                 return true;
             }
-            var container = opts.container;
+            const { container } = opts;
             if (container && el && el !== container && container.contains(el)) {
                 event.preventDefault();
                 container.focus();
                 return true;
             }
             event.preventDefault();
-            (_d = opts.onEscape) === null || _d === void 0 ? void 0 : _d.call(opts);
+            opts.onEscape?.();
             return true;
         }
         // Rail motion — suppressed when a popover is open or a modifier is held.
-        var popoverOpen = (_f = (_e = opts.isPopoverOpen) === null || _e === void 0 ? void 0 : _e.call(opts)) !== null && _f !== void 0 ? _f : false;
+        const popoverOpen = opts.isPopoverOpen?.() ?? false;
         if (!hasMod && !popoverOpen) {
             // Vertical: ArrowDown / j step down; ArrowUp / k step up.
             // j / k are blocked in ANY text field; arrows are blocked only inside
             // multiline fields so the caret can still move line-by-line.
-            var goDown = event.key === 'ArrowDown' || event.key === 'j';
-            var goUp = event.key === 'ArrowUp' || event.key === 'k';
+            const goDown = event.key === 'ArrowDown' || event.key === 'j';
+            const goUp = event.key === 'ArrowUp' || event.key === 'k';
             if (goDown || goUp) {
-                var isVimKey = event.key === 'j' || event.key === 'k';
-                var blocked = isVimKey ? isTextField : isMultiline;
+                const isVimKey = event.key === 'j' || event.key === 'k';
+                const blocked = isVimKey ? isTextField : isMultiline;
                 if (!blocked) {
                     event.preventDefault();
                     moveRung(goDown ? 1 : -1);
@@ -273,14 +263,15 @@ function makeController(optsRef) {
             if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
                 !isTextField) {
                 event.preventDefault();
-                var attr = resolveAttr(opts);
+                const attr = resolveAttr(opts);
                 // Prefer the element that actually has DOM focus, then fall back to
                 // the last tracked rung (focus parked on the container after pop-out).
-                var focusedHost = (_g = (el === null || el === void 0 ? void 0 : el.closest("[".concat(attr, "]")))) !== null && _g !== void 0 ? _g : (opts.container && _currentRailId
-                    ? opts.container.querySelector("[".concat(attr, "=\"").concat(_currentRailId, "\"]"))
-                    : null);
+                const focusedHost = (el?.closest(`[${attr}]`)) ??
+                    (opts.container && _currentRailId
+                        ? opts.container.querySelector(`[${attr}="${_currentRailId}"]`)
+                        : null);
                 if (focusedHost && opts.onAction) {
-                    var rungId = (_h = focusedHost.getAttribute(attr)) !== null && _h !== void 0 ? _h : '';
+                    const rungId = focusedHost.getAttribute(attr) ?? '';
                     opts.onAction(rungId, event.key === 'ArrowRight' ? 1 : -1, focusedHost);
                 }
                 return true;
@@ -289,13 +280,13 @@ function makeController(optsRef) {
         return false;
     }
     return {
-        handleKeydown: handleKeydown,
-        handleFocusin: handleFocusin,
-        moveRung: moveRung,
-        focus: focus,
-        refresh: refresh,
-        currentId: function () { return _currentRailId; },
-        bump: bump,
+        handleKeydown,
+        handleFocusin,
+        moveRung,
+        focus,
+        refresh,
+        currentId: () => _currentRailId,
+        bump,
     };
 }
 // ─── Composable ────────────────────────────────────────────────────────────────
@@ -310,7 +301,7 @@ function makeController(optsRef) {
  *   panel.addEventListener('focusin', (e) => rail.handleFocusin(e));
  */
 export function createRailNav(options) {
-    var ref = { current: options };
+    const ref = { current: options };
     return makeController(ref);
 }
 // ─── Action ────────────────────────────────────────────────────────────────────
@@ -325,10 +316,9 @@ export function createRailNav(options) {
  *     <div   data-rail-id="priority" tabindex="-1">…</div>
  *   </div>
  */
-export var railNav = function (node, initial) {
-    if (initial === void 0) { initial = { order: [] }; }
-    var ref = { current: __assign(__assign({}, initial), { container: node }) };
-    var controller = makeController(ref);
+export const railNav = (node, initial = { order: [] }) => {
+    const ref = { current: { ...initial, container: node } };
+    const controller = makeController(ref);
     function onKeydown(e) {
         controller.handleKeydown(e);
     }
@@ -338,12 +328,11 @@ export var railNav = function (node, initial) {
     node.addEventListener('keydown', onKeydown);
     node.addEventListener('focusin', onFocusin);
     return {
-        update: function (next) {
-            if (next === void 0) { next = { order: [] }; }
-            ref.current = __assign(__assign({}, next), { container: node });
+        update(next = { order: [] }) {
+            ref.current = { ...next, container: node };
             controller.refresh();
         },
-        destroy: function () {
+        destroy() {
             node.removeEventListener('keydown', onKeydown);
             node.removeEventListener('focusin', onFocusin);
         },

package/dist/components/InlineEdit.svelte

@@ -46,6 +46,17 @@
 		truncate?: boolean;
 		/** Optional display segments for formula-aware rendering */
 		displaySegments?: DisplaySegment[];
+		/**
+		 * Optional Svelte action applied to the textarea while editing. Lets the
+		 * host inject richer paste/undo handling without this library depending on
+		 * it. No-op by default.
+		 */
+		pasteAction?: (node: HTMLTextAreaElement) => { destroy?: () => void } | void;
+		/**
+		 * Optional guard consulted on blur: return true to keep the editor open
+		 * (e.g. a paste-undo toast is still showing). Receives the textarea node.
+		 */
+		keepOpenOnBlur?: (node: HTMLTextAreaElement) => boolean;
 	}
 
 	let {
@@ -58,9 +69,14 @@
 		rows = 3,
 		showButtons = false,
 		truncate = false,
-		displaySegments = []
+		displaySegments = [],
+		pasteAction,
+		keepOpenOnBlur
 	}: Props = $props();
 
+	// No-op action so `use:` always has a valid target.
+	const applyPaste = (node: HTMLTextAreaElement) => pasteAction?.(node);
+
 	// --- Formula rendering ---
 	let hasFormulas = $derived(displaySegments.length > 0);
 
@@ -127,6 +143,14 @@
 	// Handle blur (auto-save when not using buttons)
 	function handleBlur() {
 		if (!showButtons) {
+			// Host may veto auto-save (e.g. a paste-undo toast is still available).
+			if (
+				type === 'textarea' &&
+				inputElement instanceof HTMLTextAreaElement &&
+				keepOpenOnBlur?.(inputElement)
+			) {
+				return;
+			}
 			saveValue();
 		}
 	}
@@ -178,6 +202,7 @@
 				onblur={handleBlur}
 				use:autofocus
 				use:autoresize
+				use:applyPaste
 			></textarea>
 		{:else}
 			<input

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

@@ -39,6 +39,19 @@ interface Props {
     truncate?: boolean;
     /** Optional display segments for formula-aware rendering */
     displaySegments?: DisplaySegment[];
+    /**
+     * Optional Svelte action applied to the textarea while editing. Lets the
+     * host inject richer paste/undo handling without this library depending on
+     * it. No-op by default.
+     */
+    pasteAction?: (node: HTMLTextAreaElement) => {
+        destroy?: () => void;
+    } | void;
+    /**
+     * Optional guard consulted on blur: return true to keep the editor open
+     * (e.g. a paste-undo toast is still showing). Receives the textarea node.
+     */
+    keepOpenOnBlur?: (node: HTMLTextAreaElement) => boolean;
 }
 declare const InlineEdit: import("svelte").Component<Props, {}, "">;
 type InlineEdit = ReturnType<typeof InlineEdit>;

package/dist/components/PhoneInput.svelte

@@ -3,13 +3,22 @@
 	 * PhoneInput Component — International phone number input.
 	 *
 	 * Country selector dropdown (flag + dial code + search) alongside a tel input.
-	 * Formats numbers with libphonenumber-js AsYouType as the user types.
+	 * Formats numbers with libphonenumber-js AsYouType as the user types, and caps
+	 * national digits at the country's example-number length so users can't overtype.
 	 * Exposes the parsed E.164 value via `bind:value` and a hidden form field
-	 * named `name` so it submits cleanly with native `<form>` actions.
+	 * named `name` so it submits cleanly with native `<form>` actions. Also fires the
+	 * optional `onChange(value)` callback on every change.
 	 *
 	 * Auto-detects country when the user's input begins with a `+` prefix.
 	 */
-	import { AsYouType, parsePhoneNumberFromString, type CountryCode } from "libphonenumber-js";
+	import {
+		AsYouType,
+		parsePhoneNumberFromString,
+		getCountryCallingCode,
+		getExampleNumber,
+		type CountryCode,
+	} from "libphonenumber-js";
+	import examples from "libphonenumber-js/examples.mobile.json";
 	import { listCountries, PRIORITY_COUNTRIES, type CountryOption } from "../utils/phone";
 
 	type Props = {
@@ -22,6 +31,7 @@
 		class?: string;
 		disabled?: boolean;
 		autocomplete?: HTMLInputElement["autocomplete"];
+		onChange?: (value: string) => void;
 	};
 
 	let {
@@ -34,8 +44,25 @@
 		class: klass = "",
 		disabled = false,
 		autocomplete = "tel" as HTMLInputElement["autocomplete"],
+		onChange,
 	}: Props = $props();
 
+	function maxNationalDigits(cc: CountryCode): number {
+		const example = getExampleNumber(cc, examples);
+		return example?.nationalNumber.length ?? 15;
+	}
+
+	function capNationalDigits(raw: string, cc: CountryCode, max: number): string {
+		const allDigits = raw.replace(/\D/g, "");
+		if (!allDigits) return "";
+		const callingCode = getCountryCallingCode(cc);
+		const stripped =
+			allDigits.length > max && allDigits.startsWith(callingCode)
+				? allDigits.slice(callingCode.length)
+				: allDigits;
+		return stripped.slice(0, max);
+	}
+
 	const all = listCountries();
 	const priorityOptions = PRIORITY_COUNTRIES.map((c) => all.find((o) => o.code === c)).filter(
 		(o): o is CountryOption => !!o,
@@ -68,28 +95,49 @@
 		);
 	});
 
+	function setValue(next: string) {
+		value = next;
+		onChange?.(next);
+	}
+
 	function updateE164(raw: string, cc: CountryCode) {
 		const parsed = parsePhoneNumberFromString(raw, cc);
-		value = parsed?.isValid() ? parsed.number : "";
+		setValue(parsed?.isValid() ? parsed.number : display || "");
 	}
 
 	function onInput(e: Event) {
-		const raw = (e.target as HTMLInputElement).value;
+		const inputEl = e.target as HTMLInputElement;
+		const raw = inputEl.value;
 		if (raw.startsWith("+")) {
-			const parsed = parsePhoneNumberFromString(raw);
+			const allDigits = raw.replace(/\D/g, "");
+			let parsed = parsePhoneNumberFromString(`+${allDigits}`);
+			for (let len = allDigits.length - 1; !parsed?.country && len >= 1; len--) {
+				parsed = parsePhoneNumberFromString(`+${allDigits.slice(0, len)}`);
+			}
 			if (parsed?.country) {
 				country = parsed.country;
-				display = parsed.formatNational();
-				value = parsed.isValid() ? parsed.number : "";
+				const max = maxNationalDigits(parsed.country);
+				const cc = getCountryCallingCode(parsed.country);
+				const national = allDigits.startsWith(cc) ? allDigits.slice(cc.length) : allDigits;
+				const capped = national.slice(0, max);
+				const formatter = new AsYouType();
+				display = formatter.input(`+${cc}${capped}`);
+				inputEl.value = display;
+				const reparsed = parsePhoneNumberFromString(`+${cc}${capped}`);
+				setValue(reparsed?.isValid() ? reparsed.number : display || "");
 				return;
 			}
-			display = raw;
-			value = "";
+			display = `+${allDigits.slice(0, 15)}`;
+			inputEl.value = display;
+			setValue("");
 			return;
 		}
+		const max = maxNationalDigits(country);
+		const nationalDigits = capNationalDigits(raw, country, max);
 		const formatter = new AsYouType(country);
-		display = formatter.input(raw);
-		updateE164(raw, country);
+		display = formatter.input(nationalDigits);
+		inputEl.value = display;
+		updateE164(nationalDigits, country);
 	}
 
 	function pickCountry(code: CountryCode) {
@@ -118,11 +166,13 @@
 	});
 </script>
 
-<div class="flex w-full {klass}">
+<div
+	class="flex w-full rounded-field has-[input:focus]:ring-2 has-[input:focus]:ring-primary/40 transition-shadow {klass}"
+>
 	<div class="relative">
 		<button
 			type="button"
-			class="btn btn-outline rounded-r-none border-r-0 px-3 min-w-[5.5rem] justify-start"
+			class="btn btn-outline rounded-r-none border-r-0 px-3 min-w-[5.5rem] justify-start focus-visible:outline-0"
 			onclick={toggleDropdown}
 			{disabled}
 			aria-label="Select country code"
@@ -131,14 +181,14 @@
 		>
 			<span class="text-lg leading-none">{current?.flag}</span>
 			<span class="text-sm font-mono">{current?.dialCode}</span>
-			<svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<svg class="w-3 h-3 opacity-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
 			</svg>
 		</button>
 
 		{#if dropdownOpen}
 			<div
-				class="absolute z-50 mt-1 w-72 max-h-80 overflow-y-auto bg-base-200 border border-base-300 rounded-lg"
+				class="absolute z-50 mt-1 w-72 max-h-80 overflow-y-auto bg-base-100 border border-base-300 rounded-box shadow-lg"
 				role="listbox"
 			>
 				<div class="sticky top-0 bg-base-100 p-2 border-b border-base-300">
@@ -163,7 +213,7 @@
 								>
 									<span class="text-lg leading-none">{opt.flag}</span>
 									<span class="flex-1 text-left">{opt.name}</span>
-									<span class="text-base-content/60 font-mono text-xs">{opt.dialCode}</span>
+									<span class="text-base-content/45 font-mono text-xs">{opt.dialCode}</span>
 								</button>
 							</li>
 						{/each}
@@ -180,12 +230,12 @@
 							>
 								<span class="text-lg leading-none">{opt.flag}</span>
 								<span class="flex-1 text-left">{opt.name}</span>
-								<span class="text-base-content/60 font-mono text-xs">{opt.dialCode}</span>
+								<span class="text-base-content/45 font-mono text-xs">{opt.dialCode}</span>
 							</button>
 						</li>
 					{/each}
 					{#if filteredOthers.length === 0}
-						<li class="px-3 py-2 text-sm text-base-content/60">No matches</li>
+						<li class="px-3 py-2 text-sm text-base-content/45">No matches</li>
 					{/if}
 				</ul>
 			</div>
@@ -194,7 +244,7 @@
 
 	<input
 		type="tel"
-		class="input input-bordered rounded-l-none flex-1 min-w-0"
+		class="input input-bordered rounded-l-none flex-1 min-w-0 focus:outline-0"
 		{id}
 		{placeholder}
 		{required}

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

@@ -2,9 +2,11 @@
      * PhoneInput Component — International phone number input.
      *
      * Country selector dropdown (flag + dial code + search) alongside a tel input.
-     * Formats numbers with libphonenumber-js AsYouType as the user types.
+     * Formats numbers with libphonenumber-js AsYouType as the user types, and caps
+     * national digits at the country's example-number length so users can't overtype.
      * Exposes the parsed E.164 value via `bind:value` and a hidden form field
-     * named `name` so it submits cleanly with native `<form>` actions.
+     * named `name` so it submits cleanly with native `<form>` actions. Also fires the
+     * optional `onChange(value)` callback on every change.
      *
      * Auto-detects country when the user's input begins with a `+` prefix.
      */
@@ -19,6 +21,7 @@ type Props = {
     class?: string;
     disabled?: boolean;
     autocomplete?: HTMLInputElement["autocomplete"];
+    onChange?: (value: string) => void;
 };
 declare const PhoneInput: import("svelte").Component<Props, {}, "value">;
 type PhoneInput = ReturnType<typeof PhoneInput>;