sveltacular 1.0.6 → 1.0.9

package/dist/forms/list-box/list-box.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import type { DropdownOption, FormFieldSizeOptions, MenuOption } from '../../types/form.js';
-	import FormField from '../form-field/form-field.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import { uniqueId } from '../../helpers/unique-id.js';
 	import Menu from '../../generic/menu/menu.svelte';
 	import AngleUpIcon from '../../icons/angle-up-icon.svelte';
 	import debounce from '../../helpers/debounce.js';
 	import { browser } from '$app/environment';
+	import { onMount, untrack } from 'svelte';
 	import type { SearchFunction } from './list-box.js';
 
 	let {
@@ -19,6 +20,8 @@
 		placeholder = '',
 		onChange = undefined,
 		label = undefined,
+		helperText = undefined,
+		feedback = undefined,
 		virtualScroll = false,
 		itemHeight = 40
 	}: {
@@ -32,19 +35,65 @@
 		placeholder?: string;
 		onChange?: ((value: string | null) => void) | undefined;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
 		virtualScroll?: boolean;
 		itemHeight?: number;
 	} = $props();
 
 	const id = uniqueId();
 	const listboxId = `${id}-listbox`;
-	const getText = () => items.find((item) => item.value == value)?.name || '';
 
-	let text = $state(getText());
+	// Use local items state when search function is provided, otherwise use prop
+	let localItems = $state<DropdownOption[]>([]);
+	let currentItems = $derived(search ? localItems : items);
+
+	const getText = () => currentItems.find((item) => item.value == value)?.name || '';
+
+	let text = $state('');
 	let isMenuOpen = $state(false);
 	let highlightIndex = $state(-1);
-	let filteredItems = $state<MenuOption[]>([]);
-	let isSeachable = $derived(searchable || !!search);
+	let isSearchable = $derived(searchable || !!search);
+	let inputElement: HTMLInputElement | null = $state(null);
+	let containerElement: HTMLDivElement | null = $state(null);
+	let isUserTyping = $state(false);
+
+	// Initialize localItems when items prop changes (only when no search function)
+	$effect(() => {
+		if (!search) {
+			localItems = [...items];
+		}
+	});
+
+	// Initialize text from value on mount and when value/items change (but not when user is typing)
+	$effect(() => {
+		// Track value and currentItems to update text when they change
+		const currentValue = value;
+		const itemsForText = currentItems;
+		const userIsTyping = isUserTyping;
+
+		// Don't change text if user is currently typing in searchable mode
+		if (isSearchable && userIsTyping) {
+			return;
+		}
+
+		const newText = itemsForText.find((item) => item.value == currentValue)?.name || '';
+		// Use untrack to read current text without making effect reactive to text changes
+		const currentText = untrack(() => text);
+		if (currentText !== newText) {
+			text = newText;
+		}
+	});
+
+	// Compute filtered items reactively
+	let filteredItems = $derived.by(() => {
+		const searchText = text.trim().toLowerCase();
+		return searchText && isSearchable
+			? currentItems
+					.map((item, index) => ({ ...item, index }))
+					.filter((item) => item.name.toLowerCase().includes(searchText))
+			: currentItems.map((item, index) => ({ ...item, index }));
+	});
 
 	// Get the ID of the highlighted option for ARIA
 	let activeDescendant = $derived(
@@ -53,121 +102,203 @@
 			: undefined
 	);
 
+	// Reset highlight when filter changes
+	$effect(() => {
+		if (highlightIndex >= filteredItems.length) {
+			highlightIndex = -1;
+		}
+	});
+
 	// When an item is selected from the dropdown menu
 	const onSelect = (item: MenuOption) => {
+		isUserTyping = false;
 		value = item.value;
 		onChange?.(value);
 		text = getText();
-		applyFilter();
 		isMenuOpen = false;
+		highlightIndex = -1;
+		if (browser && inputElement) {
+			inputElement.blur();
+		}
+	};
+
+	// Open/close dropdown
+	const openDropdown = () => {
+		if (!disabled) {
+			isMenuOpen = true;
+			if (browser && inputElement) {
+				inputElement.focus();
+			}
+		}
+	};
+
+	const closeDropdown = () => {
+		isMenuOpen = false;
+		highlightIndex = -1;
+		isUserTyping = false;
+		if (!isSearchable && browser && inputElement) {
+			// Reset text to selected value when closing non-searchable dropdown
+			text = getText();
+		}
 	};
 
-	const focusOnInput = () => {
-		if (browser) document.getElementById(id)?.focus();
+	const toggleDropdown = () => {
+		if (isMenuOpen) {
+			closeDropdown();
+		} else {
+			openDropdown();
+		}
 	};
 
-	// Toggle open or closed
-	const toggle = () => (isMenuOpen = !open);
+	// Click arrow button
+	const clickArrow = (e: MouseEvent | KeyboardEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (disabled) return;
+		toggleDropdown();
+	};
 
-	// Click arrow
-	const clickArrow = () => {
+	// Handle clicks on the input (for non-searchable mode)
+	const handleInputClick = (e: MouseEvent) => {
 		if (disabled) return;
-		toggle();
-		if (isMenuOpen) focusOnInput();
+		// For non-searchable mode, clicking the input should open the dropdown
+		if (!isSearchable && !isMenuOpen) {
+			e.preventDefault();
+			openDropdown();
+		}
 	};
 
 	// Handle key presses in the input
-	const onInputKeyPress = (e: KeyboardEvent) => {
+	const onInputKeyDown = (e: KeyboardEvent) => {
 		if (disabled) return;
-		if (e.key == 'Escape') {
-			isMenuOpen = false;
+
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			closeDropdown();
+			if (browser && inputElement) {
+				inputElement.blur();
+			}
 			return;
 		}
-		if (e.key == 'Enter' || e.key == 'Tab') {
-			isMenuOpen = false;
-			if (highlightIndex > -1) {
+
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			if (isMenuOpen && highlightIndex >= 0 && filteredItems[highlightIndex]) {
 				onSelect(filteredItems[highlightIndex]);
+			} else if (!isMenuOpen) {
+				openDropdown();
 			}
 			return;
 		}
-		if (e.key == 'ArrowDown') {
-			highlightIndex = Math.min(highlightIndex + 1, filteredItems.length - 1);
-			isMenuOpen = true;
+
+		if (e.key === 'Tab') {
+			if (isMenuOpen && highlightIndex >= 0 && filteredItems[highlightIndex]) {
+				e.preventDefault();
+				onSelect(filteredItems[highlightIndex]);
+			}
 			return;
 		}
-		if (e.key == 'ArrowUp') {
-			highlightIndex = Math.max(highlightIndex - 1, -1);
-			if (highlightIndex == -1) isMenuOpen = false;
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			if (!isMenuOpen) {
+				openDropdown();
+			}
+			if (filteredItems.length > 0) {
+				highlightIndex = Math.min(highlightIndex + 1, filteredItems.length - 1);
+			}
 			return;
 		}
-		if (e.key.length == 1 || e.key == 'Backspace' || e.key == 'Delete') {
-			isMenuOpen = true;
-			highlightIndex = 0;
-			triggerSearch();
+
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			if (isMenuOpen && filteredItems.length > 0) {
+				highlightIndex = Math.max(highlightIndex - 1, 0);
+			}
+			return;
+		}
+
+		// For searchable mode, allow typing
+		if (isSearchable && (e.key.length === 1 || e.key === 'Backspace' || e.key === 'Delete')) {
+			isUserTyping = true;
+			if (!isMenuOpen) {
+				openDropdown();
+			}
+			highlightIndex = -1;
+			// Let the input handle the character, then trigger search
+			if (browser) {
+				setTimeout(() => triggerSearch(), 0);
+			}
 		}
 	};
 
 	// User is typing in the search box
 	const triggerSearch = debounce(async () => {
-		if (search && isSeachable) {
-			items = await search(text);
+		if (search && isSearchable) {
+			localItems = await search(text);
 		}
-		updateText();
-		applyFilter();
 	}, 300);
 
-	// Text or items have changed, we should apply the filter
-	const applyFilter = () => {
-		const searchText = text.trim().toLowerCase();
-		filteredItems =
-			searchText && isSeachable
-				? items
-						.map((item, index) => ({ ...item, index }))
-						.filter((item) => item.name.toLowerCase().includes(searchText))
-				: items.map((item, index) => ({ ...item, index }));
-	};
-
-	const clear = () => {
+	const clear = (e: MouseEvent | KeyboardEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
 		if (disabled) return;
+		isUserTyping = false;
 		text = '';
-		value = '';
-		triggerSearch();
-		focusOnInput();
+		value = null;
+		onChange?.(null);
+		if (browser && inputElement) {
+			inputElement.focus();
+		}
 	};
 
-	// When items change, we should change the text to match the value
-	const updateText = async () => {
+	// Close dropdown when clicking outside
+	onMount(() => {
+		const handleClickOutside = (e: MouseEvent) => {
+			if (containerElement && !containerElement.contains(e.target as Node)) {
+				closeDropdown();
+			}
+		};
+
 		if (browser) {
-			const textBox = document.getElementById(id) as HTMLInputElement;
-			// Don't change text if they're currently typing
-			if (document.activeElement != textBox) text = getText();
+			document.addEventListener('mousedown', handleClickOutside);
+			return () => {
+				document.removeEventListener('mousedown', handleClickOutside);
+			};
 		}
-	};
-
-	// Do initial search
-	triggerSearch();
+	});
 
 	let open = $derived(isMenuOpen && !disabled);
 </script>
 
-<FormField {size} {label} {id} {required} {disabled}>
-	<div class="{open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}">
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+	<div
+		class="listbox-container {open ? 'open' : 'closed'} {disabled ? 'disabled' : 'enabled'}"
+		bind:this={containerElement}
+	>
 		<input
 			type="text"
 			{id}
 			bind:value={text}
+			bind:this={inputElement}
 			{required}
 			{disabled}
 			{placeholder}
-			readonly={!isSeachable}
+			readonly={!isSearchable}
 			role="combobox"
 			aria-expanded={open}
 			aria-controls={listboxId}
-			aria-autocomplete={isSeachable ? 'list' : 'none'}
+			aria-autocomplete={isSearchable ? 'list' : 'none'}
 			aria-activedescendant={activeDescendant}
 			aria-haspopup="listbox"
-			onfocus={() => (isMenuOpen = true)}
-			onkeyup={onInputKeyPress}
+			onkeydown={onInputKeyDown}
+			onclick={handleInputClick}
+			oninput={() => {
+				if (isSearchable) {
+					isUserTyping = true;
+					triggerSearch();
+				}
+			}}
 			data-value={value}
 			data-text={text}
 		/>
@@ -182,7 +313,7 @@
 		>
 			<AngleUpIcon />
 		</button>
-		{#if text && isSeachable}
+		{#if text && isSearchable}
 			<button
 				type="button"
 				class="clear"
@@ -199,8 +330,8 @@
 			<Menu
 				items={filteredItems}
 				{open}
-				closeAfterSelect={false}
-				searchText={text}
+				closeAfterSelect={true}
+				searchText={isSearchable ? text : ''}
 				{onSelect}
 				size="full"
 				bind:highlightIndex
@@ -213,56 +344,106 @@
 	</div>
 </FormField>
 
-<style>div {
+<style>.listbox-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
   position: relative;
-}
-div.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-div input {
   width: 100%;
-  padding: var(--spacing-sm) var(--spacing-base);
+  height: 100%;
   border-radius: var(--radius-md);
   border: var(--border-thin) solid var(--form-input-border);
   background-color: var(--form-input-bg);
   color: var(--form-input-fg);
-  font-size: var(--font-base);
+  font-size: var(--font-md);
   font-weight: 500;
-  line-height: 1.25rem;
+  line-height: 2rem;
   transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
+}
+.listbox-container.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.listbox-container input {
+  background-color: transparent;
+  border: none;
+  line-height: 2rem;
+  font-size: var(--font-md);
+  width: 100%;
+  flex-grow: 1;
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
+  color: var(--form-input-fg);
   user-select: none;
   white-space: nowrap;
+  cursor: pointer;
+}
+.listbox-container input:focus {
+  outline: none;
+}
+.listbox-container input:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
 }
-div button {
+.listbox-container input[readonly] {
+  cursor: pointer;
+}
+.listbox-container button {
   border: 0;
   appearance: none;
   background: transparent;
   padding: 0;
   margin: 0;
   position: absolute;
-  top: 0.65rem;
-  width: 1rem;
-  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 2;
   color: var(--form-input-fg, black);
+  cursor: pointer;
+}
+.listbox-container button:focus {
+  outline: none;
+}
+.listbox-container button:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: 2px;
 }
-div button.icon {
-  right: 1rem;
+.listbox-container button.icon {
+  right: var(--spacing-base);
+  width: 1rem;
+  height: 1rem;
   transition: transform 0.3s linear;
   transform: rotate(180deg);
 }
-div button.clear {
-  right: 3rem;
+.listbox-container button.icon :global(svg) {
+  width: 100%;
+  height: 100%;
+}
+.listbox-container button.clear {
+  right: calc(var(--spacing-base) + 2rem);
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: var(--font-sm);
+  font-weight: 600;
 }
-div.open .icon {
+.listbox-container.open .icon {
   transform: rotate(0deg);
 }
-div .dropdown {
+.listbox-container .dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
-  z-index: 3;
+  z-index: 1000;
+  margin-top: 0.25rem;
+}
+.listbox-container .dropdown :global(.menu) {
+  font-size: var(--font-sm, 0.875rem);
+}
+.listbox-container .dropdown :global(.menu) :global(li) :global(div) {
+  padding: 0.25rem 0.5rem;
+  line-height: 1.25;
+  font-size: var(--font-sm, 0.875rem);
 }</style>

package/dist/forms/list-box/list-box.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { SearchFunction } from './list-box.js';
 type $$ComponentProps = {
     value?: string | null;
@@ -11,6 +12,8 @@ type $$ComponentProps = {
     placeholder?: string;
     onChange?: ((value: string | null) => void) | undefined;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
     virtualScroll?: boolean;
     itemHeight?: number;
 };

package/dist/forms/money-box/money-box.svelte

@@ -274,23 +274,27 @@
   position: relative;
   width: 100%;
   height: 100%;
-  border-radius: 0.25rem;
-  border: 1px solid var(--form-input-border, black);
-  background-color: var(--form-input-bg, white);
-  color: var(--form-input-fg, black);
-  font-size: 1rem;
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--form-input-border);
+  background-color: var(--form-input-bg);
+  color: var(--form-input-fg);
+  font-size: var(--font-md);
   font-weight: 500;
   line-height: 2rem;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
+  transition: background-color var(--transition-base) var(--ease-in-out), border-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out), fill var(--transition-base) var(--ease-in-out), stroke var(--transition-base) var(--ease-in-out);
   user-select: none;
   white-space: nowrap;
 }
 .input input {
   background-color: transparent;
   border: none;
+  box-sizing: border-box;
   line-height: 2rem;
-  font-size: 1rem;
-  padding-left: 1rem;
+  font-size: var(--font-md);
+  padding: 0;
+  padding-left: var(--spacing-base);
+  margin: 0;
 }
 .input input:focus {
   outline: none;
@@ -299,7 +303,7 @@
   flex-grow: 1;
 }
 .input .separator {
-  width: 1rem;
+  width: var(--spacing-base);
   text-align: center;
 }
 .input .cents {
@@ -307,16 +311,16 @@
 }
 .input .prefix,
 .input .suffix {
-  font-size: 1rem;
+  font-size: var(--font-md);
   line-height: 2rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  background-color: var(--form-input-accent-bg, #ccc);
-  color: var(--form-input-accent-fg, black);
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-base);
+  background-color: var(--form-input-accent-bg);
+  color: var(--form-input-accent-fg);
 }
 .input .prefix {
-  border-right: 1px solid var(--form-input-border, black);
+  border-right: var(--border-thin) solid var(--form-input-border);
 }
 .input .suffix {
-  border-left: 1px solid var(--form-input-border, black);
+  border-left: var(--border-thin) solid var(--form-input-border);
 }</style>

package/dist/forms/number-box/number-box.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { roundToDecimals } from '../../helpers/round-to-decimals.js';
 	import { uniqueId } from '../../helpers/unique-id.js';
-	import FormField from '../form-field/form-field.svelte';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
 	import type { FormFieldSizeOptions } from '../../types/form.js';
 	const id = uniqueId();
 
@@ -19,7 +19,12 @@
 		suffix = null as string | null,
 		step = 1,
 		onChange = undefined,
-		label = undefined
+		label = undefined,
+		helperText = undefined,
+		feedback = undefined,
+		disabled = false,
+		required = false,
+		readonly = false
 	}: {
 		value?: number | null;
 		placeholder?: string;
@@ -33,6 +38,11 @@
 		step?: number;
 		onChange?: ((value: number | null) => void) | undefined;
 		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback;
+		disabled?: boolean;
+		required?: boolean;
+		readonly?: boolean;
 	} = $props();
 
 	const valueChanged = () => {
@@ -66,7 +76,7 @@
 	};
 </script>
 
-<FormField {size} {label} {id}>
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
 	<div class="input {type}">
 		{#if prefix}
 			<span class="prefix">{prefix}</span>
@@ -80,6 +90,9 @@
 			{step}
 			{min}
 			{max}
+			{disabled}
+			{readonly}
+			{required}
 			onchange={valueChanged}
 			oninput={onInput}
 			onkeypress={onKeyPress}

package/dist/forms/number-box/number-box.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
 import type { FormFieldSizeOptions } from '../../types/form.js';
 type AllowedInputTypes = 'number' | 'currency';
 type $$ComponentProps = {
@@ -13,6 +14,11 @@ type $$ComponentProps = {
     step?: number;
     onChange?: ((value: number | null) => void) | undefined;
     label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
 };
 declare const NumberBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type NumberBox = ReturnType<typeof NumberBox>;