sveltacular 1.0.32 → 1.0.33

package/dist/forms/index.d.ts

@@ -10,6 +10,7 @@ export { default as NewOrExistingCombo } from './combo/new-or-existing-combo.sve
 export { default as NumberBox } from './number-box/number-box.svelte';
 export { default as NumberRangeBox } from './number-range-box/number-range-box.svelte';
 export { default as PhoneBox } from './phone-box/phone-box.svelte';
+export { default as ReferenceBox } from './reference-box/reference-box.svelte';
 export { default as Slider } from './slider/slider.svelte';
 export { default as TagBox } from './tag-box/tag-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
@@ -20,6 +21,7 @@ export * from './check-box/index.js';
 export * from './list-box/index.js';
 export * from './phone-box/index.js';
 export * from './radio-group/index.js';
+export * from './reference-box/index.js';
 export { default as Form } from './form.svelte';
 export { default as FormActions } from './form-actions/form-actions.svelte';
 export { default as FormField } from './form-field/form-field.svelte';

package/dist/forms/index.js

@@ -11,6 +11,7 @@ export { default as NewOrExistingCombo } from './combo/new-or-existing-combo.sve
 export { default as NumberBox } from './number-box/number-box.svelte';
 export { default as NumberRangeBox } from './number-range-box/number-range-box.svelte';
 export { default as PhoneBox } from './phone-box/phone-box.svelte';
+export { default as ReferenceBox } from './reference-box/reference-box.svelte';
 export { default as Slider } from './slider/slider.svelte';
 export { default as TagBox } from './tag-box/tag-box.svelte';
 export { default as TextArea } from './text-area/text-area.svelte';
@@ -22,6 +23,7 @@ export * from './check-box/index.js';
 export * from './list-box/index.js';
 export * from './phone-box/index.js';
 export * from './radio-group/index.js';
+export * from './reference-box/index.js';
 // Form structure components
 export { default as Form } from './form.svelte';
 export { default as FormActions } from './form-actions/form-actions.svelte';

package/dist/forms/reference-box/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ReferenceBox } from './reference-box.svelte';
+export type { ReferenceItem, SearchFunction, CreateNewFunction } from './reference-box.js';

package/dist/forms/reference-box/index.js

@@ -0,0 +1 @@
+export { default as ReferenceBox } from './reference-box.svelte';

package/dist/forms/reference-box/reference-box.d.ts

@@ -0,0 +1,8 @@
+export type ReferenceItem = {
+    id: string | number;
+    name: string;
+    description?: string;
+};
+export type SearchFunction = (text: string) => Promise<ReferenceItem[]>;
+export type CreateNewFunction = (inputName: string) => Promise<ReferenceItem | null>;
+export type LinkBuilderFunction = (item: ReferenceItem) => string | undefined;

package/dist/forms/reference-box/reference-box.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,709 @@
+<script lang="ts">
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import FormField, { type FormFieldFeedback } from '../form-field/form-field.svelte';
+	import Chip from '../../generic/chip/chip.svelte';
+	import Menu from '../../generic/menu/menu.svelte';
+	import type { FormFieldSizeOptions, MenuOption } from '../../types/form.js';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import debounce from '../../helpers/debounce.js';
+	import type {
+		ReferenceItem,
+		SearchFunction,
+		CreateNewFunction,
+		LinkBuilderFunction
+	} from './reference-box.js';
+	import Prompt from '../../modals/prompt.svelte';
+	import { ucfirst } from '../../helpers/ucfirst.js';
+	import Icon from '../../icons/icon.svelte';
+
+	const id = uniqueId();
+	const listboxId = `${id}-listbox`;
+
+	let {
+		value = $bindable([] as ReferenceItem[]),
+		items = [] as ReferenceItem[],
+		search = undefined as SearchFunction | undefined,
+		createNew = undefined as CreateNewFunction | undefined,
+		linkBuilder = undefined as LinkBuilderFunction | undefined,
+		resourceName = undefined as string | undefined,
+		placeholder = 'Search and add items...',
+		required = false,
+		disabled = false,
+		size = 'full' as FormFieldSizeOptions,
+		label = undefined as string | undefined,
+		helperText = undefined as string | undefined,
+		feedback = undefined as FormFieldFeedback | undefined,
+		maxItems = undefined as number | undefined,
+		onChange = undefined as ((value: ReferenceItem[]) => void) | undefined
+	}: {
+		value?: ReferenceItem[];
+		items?: ReferenceItem[];
+		search?: SearchFunction | undefined;
+		createNew?: CreateNewFunction | undefined;
+		linkBuilder?: LinkBuilderFunction | undefined;
+		resourceName?: string | undefined;
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+		size?: FormFieldSizeOptions;
+		label?: string;
+		helperText?: string;
+		feedback?: FormFieldFeedback | undefined;
+		maxItems?: number | undefined;
+		onChange?: ((value: ReferenceItem[]) => void) | undefined;
+	} = $props();
+
+	let searchText = $state('');
+	let isMenuOpen = $state(false);
+	let highlightIndex = $state(-1);
+	let inputElement: HTMLInputElement | null = $state(null);
+	let containerElement: HTMLDivElement | null = $state(null);
+	let invalidAttempt = $state(false);
+	let localItems = $state<ReferenceItem[]>([]);
+	let isLoading = $state(false);
+	let showPrompt = $state(false);
+	let isCreating = $state(false);
+	let createError = $state<string | null>(null);
+	let promptKey = $state(0);
+
+	// Use local items when search function is provided, otherwise use static items
+	let currentItems = $derived(search ? localItems : items);
+
+	// Convert ReferenceItem[] to MenuOption[] for Menu component
+	let menuOptions = $derived.by(() => {
+		return currentItems
+			.filter((item) => {
+				// Don't show already selected items
+				return !value.some((v) => v.id === item.id);
+			})
+			.map((item, index) => ({
+				value: String(item.id),
+				name: item.name,
+				index
+			}));
+	});
+
+	// Filter suggestions based on current input
+	let filteredSuggestions = $derived.by(() => {
+		if (!searchText.trim()) {
+			return menuOptions;
+		}
+
+		const searchLower = searchText.trim().toLowerCase();
+		return menuOptions.filter((option) => {
+			const optionText = option.name.toLowerCase();
+			return optionText.includes(searchLower);
+		});
+	});
+
+	// Check if an item already exists (by id)
+	function itemExists(item: ReferenceItem): boolean {
+		return value.some((v) => v.id === item.id);
+	}
+
+	// Check if max items reached
+	function isMaxItemsReached(): boolean {
+		return maxItems !== undefined && value.length >= maxItems;
+	}
+
+	function addItem(itemToAdd: ReferenceItem) {
+		// Check max items
+		if (isMaxItemsReached()) {
+			showInvalidFeedback();
+			return;
+		}
+
+		// Check duplicate
+		if (itemExists(itemToAdd)) {
+			showInvalidFeedback();
+			return;
+		}
+
+		// Add the item
+		value = [...value, itemToAdd];
+		searchText = '';
+		invalidAttempt = false;
+		isMenuOpen = false;
+		highlightIndex = -1;
+		onChange?.(value);
+
+		// Focus back on input
+		if (browser && inputElement) {
+			inputElement.focus();
+		}
+	}
+
+	function showInvalidFeedback() {
+		invalidAttempt = true;
+		setTimeout(() => {
+			invalidAttempt = false;
+		}, 500);
+	}
+
+	function removeItem(itemToRemove: ReferenceItem) {
+		value = value.filter((item) => item.id !== itemToRemove.id);
+		onChange?.(value);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (disabled) return;
+
+		// Escape - close dropdown
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			closeDropdown();
+			return;
+		}
+
+		// Enter - add item or select from dropdown
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			if (isMenuOpen && highlightIndex >= 0 && filteredSuggestions[highlightIndex]) {
+				const selectedOption = filteredSuggestions[highlightIndex];
+				const selectedItem = currentItems.find((item) => String(item.id) === selectedOption.value);
+				if (selectedItem) {
+					addItem(selectedItem);
+				}
+			} else if (isMenuOpen && createNew && highlightIndex === filteredSuggestions.length) {
+				// "Create new..." is highlighted
+				openCreatePrompt();
+			} else if (isMenuOpen && filteredSuggestions.length > 0) {
+				// Auto-select first item if available
+				const firstItem = currentItems.find(
+					(item) => String(item.id) === filteredSuggestions[0].value
+				);
+				if (firstItem) {
+					addItem(firstItem);
+				}
+			}
+			return;
+		}
+
+		// Tab - select highlighted suggestion or add current text
+		if (event.key === 'Tab') {
+			if (isMenuOpen && highlightIndex >= 0 && filteredSuggestions[highlightIndex]) {
+				event.preventDefault();
+				const selectedOption = filteredSuggestions[highlightIndex];
+				const selectedItem = currentItems.find((item) => String(item.id) === selectedOption.value);
+				if (selectedItem) {
+					addItem(selectedItem);
+				}
+			} else if (isMenuOpen && createNew && highlightIndex === filteredSuggestions.length) {
+				// "Create new..." is highlighted
+				event.preventDefault();
+				openCreatePrompt();
+			} else if (isMenuOpen && filteredSuggestions.length > 0) {
+				event.preventDefault();
+				const firstItem = currentItems.find(
+					(item) => String(item.id) === filteredSuggestions[0].value
+				);
+				if (firstItem) {
+					addItem(firstItem);
+				}
+			}
+			return;
+		}
+
+		// Arrow Down - navigate suggestions
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			if (!isMenuOpen && (filteredSuggestions.length > 0 || createNew)) {
+				openDropdown();
+			}
+			// Allow highlighting "Create new..." option if it exists
+			const maxIndex = createNew ? filteredSuggestions.length : filteredSuggestions.length - 1;
+			if (maxIndex >= 0) {
+				highlightIndex = Math.min(highlightIndex + 1, maxIndex);
+			}
+			return;
+		}
+
+		// Arrow Up - navigate suggestions
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			if (isMenuOpen) {
+				// Allow highlighting "Create new..." option if it exists
+				const maxIndex = createNew ? filteredSuggestions.length : filteredSuggestions.length - 1;
+				if (maxIndex >= 0) {
+					highlightIndex = Math.max(highlightIndex - 1, 0);
+				}
+			}
+			return;
+		}
+	}
+
+	function handleInput(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const inputValue = input.value;
+		searchText = inputValue;
+
+		// Clear invalid feedback when user types
+		invalidAttempt = false;
+
+		// Open dropdown when typing if there are items or search function
+		if (inputValue.trim() && (currentItems.length > 0 || search)) {
+			openDropdown();
+			// Auto-highlight first item
+			highlightIndex = 0;
+		} else {
+			closeDropdown();
+		}
+
+		// Trigger search if search function is provided
+		if (search && inputValue.trim()) {
+			triggerSearch();
+		}
+	}
+
+	function openDropdown() {
+		if (!disabled && (filteredSuggestions.length > 0 || createNew)) {
+			isMenuOpen = true;
+		}
+	}
+
+	function closeDropdown() {
+		isMenuOpen = false;
+		highlightIndex = -1;
+	}
+
+	function onSelectFromMenu(item: MenuOption) {
+		const selectedItem = currentItems.find((i) => String(i.id) === item.value);
+		if (selectedItem) {
+			addItem(selectedItem);
+		}
+	}
+
+	// Get ARIA active descendant
+	let activeDescendant = $derived(
+		highlightIndex >= 0 && filteredSuggestions[highlightIndex]
+			? `${listboxId}-option-${highlightIndex}`
+			: highlightIndex === filteredSuggestions.length && createNew
+				? `${listboxId}-option-create`
+				: undefined
+	);
+
+	// Check if we should show "Create new..." option
+	let showCreateNew = $derived(!!createNew && isMenuOpen);
+
+	// Check if there are no results when searching
+	let hasNoResults = $derived(
+		searchText.trim() && filteredSuggestions.length === 0 && !isLoading && !createNew
+	);
+
+	// Debounced search function
+	const triggerSearch = debounce(async () => {
+		if (search && searchText.trim()) {
+			isLoading = true;
+			try {
+				localItems = await search(searchText);
+			} finally {
+				isLoading = false;
+			}
+		}
+	}, 300);
+
+	// Handle creating new item
+	const handleCreateNew = async (name: string) => {
+		if (!createNew) return;
+
+		isCreating = true;
+		createError = null;
+
+		try {
+			const result = await createNew(name);
+
+			if (result) {
+				// Add to local items if using search (for display in dropdown)
+				if (search) {
+					localItems = [...localItems, result];
+				}
+				// Note: For static items, the parent should update the items prop
+				// The newly created item will be added to value, which is what matters
+
+				// Add the newly created item
+				addItem(result);
+				showPrompt = false;
+			} else {
+				// Handle error - show message to user
+				createError = 'Failed to create new item';
+				// Keep prompt open so user can try again
+			}
+		} catch (error) {
+			createError = error instanceof Error ? error.message : 'An error occurred';
+			// Keep prompt open so user can try again
+		} finally {
+			isCreating = false;
+		}
+	};
+
+	const openCreatePrompt = () => {
+		createError = null;
+		// Increment key to force Prompt to remount and reset its value
+		promptKey++;
+		showPrompt = true;
+		// Close dropdown when opening prompt
+		isMenuOpen = false;
+	};
+
+	// Reset error when prompt closes
+	$effect(() => {
+		if (!showPrompt) {
+			createError = null;
+		}
+	});
+
+	// Close dropdown when clicking outside
+	onMount(() => {
+		const handleClickOutside = (e: MouseEvent) => {
+			if (containerElement && !containerElement.contains(e.target as Node)) {
+				closeDropdown();
+			}
+		};
+
+		if (browser) {
+			document.addEventListener('mousedown', handleClickOutside);
+			return () => {
+				document.removeEventListener('mousedown', handleClickOutside);
+			};
+		}
+	});
+</script>
+
+<FormField {size} {label} {id} {required} {disabled} {helperText} {feedback}>
+	<!-- ARIA live region for screen reader announcements -->
+	<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+		{#if isMenuOpen && isLoading}
+			Searching...
+		{:else if isMenuOpen && filteredSuggestions.length > 0}
+			{filteredSuggestions.length}
+			{filteredSuggestions.length === 1 ? 'result' : 'results'} available
+		{:else if invalidAttempt}
+			{#if isMaxItemsReached()}
+				Maximum {maxItems} items reached
+			{:else}
+				Item already exists
+			{/if}
+		{/if}
+	</div>
+
+	<div class="reference-box" bind:this={containerElement}>
+		<div class="input-container">
+			<div
+				class="input {disabled ? 'disabled' : 'enabled'} {invalidAttempt
+					? 'invalid'
+					: ''} {isMenuOpen ? 'open' : ''}"
+			>
+				<input
+					{id}
+					type="text"
+					bind:value={searchText}
+					bind:this={inputElement}
+					{placeholder}
+					onkeydown={handleKeydown}
+					oninput={handleInput}
+					{disabled}
+					{required}
+					role="combobox"
+					aria-expanded={isMenuOpen}
+					aria-controls={listboxId}
+					aria-autocomplete="list"
+					aria-activedescendant={activeDescendant}
+					aria-haspopup="listbox"
+					aria-label="Reference input"
+					aria-busy={isLoading}
+				/>
+				{#if isLoading}
+					<div class="loading-indicator" aria-hidden="true">
+						<div class="spinner"></div>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<!-- Autocomplete dropdown -->
+		{#if isMenuOpen}
+			<div class="dropdown">
+				{#if hasNoResults}
+					<div class="no-results" role="status">No results found</div>
+				{:else}
+					<Menu
+						items={filteredSuggestions}
+						open={isMenuOpen}
+						closeAfterSelect={true}
+						{searchText}
+						onSelect={onSelectFromMenu}
+						size="full"
+						bind:highlightIndex
+						{listboxId}
+					/>
+				{/if}
+				{#if showCreateNew}
+					<button
+						type="button"
+						class="create-new"
+						class:selected={highlightIndex === filteredSuggestions.length}
+						onclick={openCreatePrompt}
+						role="option"
+						id={listboxId ? `${listboxId}-option-create` : undefined}
+						aria-selected={highlightIndex === filteredSuggestions.length}
+					>
+						<Icon type="plus" size="sm" />
+						<span>
+							{#if resourceName}
+								Create new {resourceName}...
+							{:else}
+								Create new...
+							{/if}
+						</span>
+					</button>
+				{/if}
+			</div>
+		{/if}
+
+		{#if value.length > 0}
+			<div class="items">
+				{#each value as item}
+					{@const linkUrl = linkBuilder ? linkBuilder(item) : undefined}
+					<span class="item">
+						<Chip
+							label={item.name}
+							removable={!disabled}
+							onRemove={() => removeItem(item)}
+							link={linkUrl ? { url: linkUrl, target: '_blank' } : undefined}
+							tooltip={item.description}
+						>
+							{item.description}
+						</Chip>
+					</span>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</FormField>
+
+{#key promptKey}
+	<Prompt
+		bind:open={showPrompt}
+		title={resourceName ? `Create New ${ucfirst(resourceName)}` : 'Create New'}
+		placeholder="Enter name"
+		required={true}
+		okText={resourceName ? `Create ${ucfirst(resourceName)}` : 'Create'}
+		cancelText="Cancel"
+		onOk={handleCreateNew}
+		onCancel={() => {
+			createError = null;
+		}}
+	>
+		{#if createError}
+			<div class="create-error" role="alert">
+				{createError}
+			</div>
+		{/if}
+		{#if isCreating}
+			<div class="creating-indicator" aria-live="polite">Creating...</div>
+		{/if}
+	</Prompt>
+{/key}
+
+<style>.reference-box {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+  position: relative;
+}
+.reference-box .input-container {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: stretch;
+}
+.reference-box .input-container .input {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 100%;
+  min-height: 2.125rem;
+  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;
+  padding: 0;
+  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), box-shadow var(--transition-base) var(--ease-in-out);
+  user-select: none;
+  white-space: nowrap;
+  flex: 1;
+}
+.reference-box .input-container .input.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.reference-box .input-container .input.open {
+  border-color: var(--focus-ring, #007bff);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+.reference-box .input-container .input.invalid {
+  border-color: var(--danger, #dc3545);
+  animation: shake 0.3s ease-in-out;
+  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
+}
+.reference-box .input-container .input input {
+  background-color: transparent;
+  border: none;
+  line-height: 2rem;
+  height: 2rem;
+  font-size: var(--font-md);
+  width: 100%;
+  flex-grow: 1;
+  padding: 0 var(--spacing-base);
+  margin: 0;
+}
+.reference-box .input-container .input input:focus {
+  outline: none;
+}
+.reference-box .input-container .input input:disabled {
+  cursor: not-allowed;
+}
+.reference-box .input-container .input input::placeholder {
+  color: var(--form-input-placeholder);
+}
+.reference-box .input-container .input .loading-indicator {
+  position: absolute;
+  right: var(--spacing-base);
+  width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+.reference-box .input-container .input .loading-indicator .spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--form-input-border);
+  border-top-color: var(--form-input-fg);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+.reference-box .dropdown {
+  position: absolute;
+  top: calc(100% - var(--spacing-sm));
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  margin-top: 0.25rem;
+}
+.reference-box .dropdown .no-results {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted, #6c757d);
+  font-size: var(--font-sm, 0.875rem);
+  background-color: var(--form-input-bg);
+  border: var(--border-thin) solid var(--form-input-border);
+  border-radius: var(--radius-md);
+}
+.reference-box .dropdown .create-new {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  background-color: var(--form-input-bg);
+  color: var(--form-input-fg);
+  font-size: var(--font-sm, 0.875rem);
+  cursor: pointer;
+  border-top: var(--border-thin) solid var(--form-input-border);
+  transition: background-color var(--transition-base) var(--ease-in-out), color var(--transition-base) var(--ease-in-out);
+  border: var(--border-thin) solid var(--form-input-border);
+  border-top: none;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+}
+.reference-box .dropdown .create-new:hover, .reference-box .dropdown .create-new.selected {
+  background: var(--form-input-selected-bg, #003c75);
+  color: var(--form-input-selected-fg, white);
+}
+.reference-box .dropdown .create-new:focus {
+  outline: none;
+}
+.reference-box .dropdown .create-new:focus-visible {
+  outline: 2px solid var(--focus-ring, #007bff);
+  outline-offset: -2px;
+}
+.reference-box .dropdown .create-new span {
+  flex: 1;
+}
+.reference-box .dropdown :global(.menu) {
+  font-size: var(--font-sm, 0.875rem);
+  border-radius: var(--radius-md);
+}
+.reference-box .dropdown :global(.menu) :global(li) :global(div) {
+  padding: 0.25rem 0.5rem;
+  line-height: 1.25;
+  font-size: var(--font-sm, 0.875rem);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.create-error {
+  color: var(--color-danger, #dc3545);
+  font-size: var(--font-sm, 0.875rem);
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background-color: var(--color-danger-bg, #f8d7da);
+  border-radius: var(--radius-sm, 0.25rem);
+}
+
+.creating-indicator {
+  color: var(--text-muted, #6c757d);
+  font-size: var(--font-sm, 0.875rem);
+  margin-top: 0.5rem;
+  font-style: italic;
+}
+
+.item {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  margin-right: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+}</style>

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

@@ -0,0 +1,23 @@
+import { type FormFieldFeedback } from '../form-field/form-field.svelte';
+import type { FormFieldSizeOptions } from '../../types/form.js';
+import type { ReferenceItem, SearchFunction, CreateNewFunction, LinkBuilderFunction } from './reference-box.js';
+type $$ComponentProps = {
+    value?: ReferenceItem[];
+    items?: ReferenceItem[];
+    search?: SearchFunction | undefined;
+    createNew?: CreateNewFunction | undefined;
+    linkBuilder?: LinkBuilderFunction | undefined;
+    resourceName?: string | undefined;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: FormFieldSizeOptions;
+    label?: string;
+    helperText?: string;
+    feedback?: FormFieldFeedback | undefined;
+    maxItems?: number | undefined;
+    onChange?: ((value: ReferenceItem[]) => void) | undefined;
+};
+declare const ReferenceBox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ReferenceBox = ReturnType<typeof ReferenceBox>;
+export default ReferenceBox;

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

@@ -25,7 +25,8 @@
 		strict = false,
 		caseInsensitive = true,
 		maxTags = undefined as number | undefined,
-		onChange = undefined as ((value: string[]) => void) | undefined
+		onChange = undefined as ((value: string[]) => void) | undefined,
+		deleteOnBackspace = false
 	}: {
 		value?: string[];
 		placeholder?: string;
@@ -42,6 +43,7 @@
 		caseInsensitive?: boolean;
 		maxTags?: number | undefined;
 		onChange?: ((value: string[]) => void) | undefined;
+		deleteOnBackspace?: boolean;
 	} = $props();
 
 	let newTag = $state('');
@@ -118,7 +120,7 @@
 
 	function addTag(tagToAdd?: string) {
 		const tag = (tagToAdd || newTag).trim();
-		
+
 		// Prevent empty tags
 		if (!tag) {
 			newTag = '';
@@ -151,7 +153,7 @@
 		isMenuOpen = false;
 		highlightIndex = -1;
 		onChange?.(value);
-		
+
 		// Focus back on input
 		if (browser && inputElement) {
 			inputElement.focus();
@@ -208,7 +210,9 @@
 
 		// Backspace - remove last tag if input is empty
 		if (event.key === 'Backspace' && newTag === '' && value.length > 0) {
-			removeTag(value[value.length - 1]);
+			if (deleteOnBackspace) {
+				removeTag(value[value.length - 1]);
+			}
 			return;
 		}
 
@@ -312,7 +316,8 @@
 	<!-- ARIA live region for screen reader announcements -->
 	<div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
 		{#if isMenuOpen && filteredSuggestions.length > 0}
-			{filteredSuggestions.length} {filteredSuggestions.length === 1 ? 'suggestion' : 'suggestions'} available
+			{filteredSuggestions.length}
+			{filteredSuggestions.length === 1 ? 'suggestion' : 'suggestions'} available
 		{:else if invalidTagAttempt}
 			{#if isMaxTagsReached()}
 				Maximum {maxTags} tags reached
@@ -326,7 +331,11 @@
 
 	<div class="tag-box" bind:this={containerElement}>
 		<div class="input-container">
-			<div class="input {disabled ? 'disabled' : 'enabled'} {invalidTagAttempt ? 'invalid' : ''} {isMenuOpen ? 'open' : ''}">
+			<div
+				class="input {disabled ? 'disabled' : 'enabled'} {invalidTagAttempt
+					? 'invalid'
+					: ''} {isMenuOpen ? 'open' : ''}"
+			>
 				<input
 					{id}
 					type="text"

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

@@ -16,6 +16,7 @@ type $$ComponentProps = {
     caseInsensitive?: boolean;
     maxTags?: number | undefined;
     onChange?: ((value: string[]) => void) | undefined;
+    deleteOnBackspace?: boolean;
 };
 declare const TagBox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type TagBox = ReturnType<typeof TagBox>;

package/dist/generic/chip/chip.svelte

@@ -1,23 +1,43 @@
 <script lang="ts">
+	import Icon from '../../icons/icon.svelte';
 	import type { ComponentSize } from '../../types/size.js';
+	import type { Snippet } from 'svelte';
 
 	let {
 		label,
+		tooltip = undefined,
 		removable = false,
 		size = 'md' as ComponentSize,
 		variant = 'standard' as 'standard' | 'positive' | 'negative',
-		onRemove = undefined
+		onRemove = undefined,
+		link = undefined,
+		children = undefined
 	}: {
 		label: string;
+		tooltip?: string;
+		link?: { url: string; target?: string };
 		removable?: boolean;
 		size?: ComponentSize;
 		variant?: 'standard' | 'positive' | 'negative';
 		onRemove?: (() => void) | undefined;
+		children?: Snippet;
 	} = $props();
 </script>
 
-<div class="chip {size} {variant}">
+<div class="chip {size} {variant}" title={tooltip}>
 	<span class="label">{label}</span>
+	{#if children}
+		<span class="children">
+			{@render children?.()}
+		</span>
+	{/if}
+
+	{#if link}
+		<a class="link" href={link.url} target={link.target || '_blank'} rel="noopener noreferrer">
+			<Icon type="external-link" size="xs" />
+		</a>
+	{/if}
+
 	{#if removable}
 		<button type="button" class="remove" onclick={onRemove} aria-label="Remove {label}"> × </button>
 	{/if}
@@ -32,10 +52,24 @@
   background-color: var(--chip-bg, #e0e0e0);
   color: var(--chip-fg, #000);
   font-size: 0.875rem;
-  font-weight: 500;
 }
 .chip .label {
   line-height: 1.5;
+  font-weight: 500;
+}
+.chip .children {
+  font-size: 80%;
+  font-style: italic;
+  opacity: 0.5;
+}
+.chip .link {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  padding: 0;
+  border: none;
 }
 .chip .remove {
   background: none;

package/dist/generic/chip/chip.svelte.d.ts

@@ -1,10 +1,17 @@
 import type { ComponentSize } from '../../types/size.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     label: string;
+    tooltip?: string;
+    link?: {
+        url: string;
+        target?: string;
+    };
     removable?: boolean;
     size?: ComponentSize;
     variant?: 'standard' | 'positive' | 'negative';
     onRemove?: (() => void) | undefined;
+    children?: Snippet;
 };
 declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Chip = ReturnType<typeof Chip>;

package/dist/icons/icon-data.js

@@ -229,6 +229,15 @@ export const iconRegistry = {
             }
         ]
     },
+    'external-link': {
+        viewBox: '0 0 122.6 122.88',
+        fill: 'currentColor',
+        paths: [
+            {
+                d: 'M110.6,72.58c0-3.19,2.59-5.78,5.78-5.78c3.19,0,5.78,2.59,5.78,5.78v33.19c0,4.71-1.92,8.99-5.02,12.09 c-3.1,3.1-7.38,5.02-12.09,5.02H17.11c-4.71,0-8.99-1.92-12.09-5.02c-3.1-3.1-5.02-7.38-5.02-12.09V17.19 C0,12.48,1.92,8.2,5.02,5.1C8.12,2,12.4,0.08,17.11,0.08h32.98c3.19,0,5.78,2.59,5.78,5.78c0,3.19-2.59,5.78-5.78,5.78H17.11 c-1.52,0-2.9,0.63-3.91,1.63c-1.01,1.01-1.63,2.39-1.63,3.91v88.58c0,1.52,0.63,2.9,1.63,3.91c1.01,1.01,2.39,1.63,3.91,1.63h87.95 c1.52,0,2.9-0.63,3.91-1.63s1.63-2.39,1.63-3.91V72.58L110.6,72.58z M112.42,17.46L54.01,76.6c-2.23,2.27-5.89,2.3-8.16,0.07 c-2.27-2.23-2.3-5.89-0.07-8.16l56.16-56.87H78.56c-3.19,0-5.78-2.59-5.78-5.78c0-3.19,2.59-5.78,5.78-5.78h26.5 c5.12,0,11.72-0.87,15.65,3.1c2.48,2.51,1.93,22.52,1.61,34.11c-0.08,3-0.15,5.29-0.15,6.93c0,3.19-2.59,5.78-5.78,5.78 c-3.19,0-5.78-2.59-5.78-5.78c0-0.31,0.08-3.32,0.19-7.24C110.96,30.94,111.93,22.94,112.42,17.46L112.42,17.46z'
+            }
+        ]
+    },
     eye: {
         viewBox: '0 0 20 14',
         fill: 'none',

package/dist/icons/types.d.ts

@@ -1,4 +1,4 @@
 /**
  * Type-safe string union of all available icon types
  */
-export type IconType = 'angle-right' | 'angle-up' | 'angle-left' | 'angle-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'check' | 'clipboard' | 'close' | 'copy' | 'download' | 'edit' | 'envelope' | 'envelope-full' | 'export' | 'eye' | 'folder-open' | 'hamburger' | 'heart' | 'heart-full' | 'home' | 'home-full' | 'import' | 'info' | 'link' | 'minus' | 'mobile-phone' | 'phone' | 'plus' | 'print' | 'search' | 'settings' | 'sortable' | 'star' | 'star-full' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'triangle-up-down' | 'upload' | 'user' | 'warning';
+export type IconType = 'angle-right' | 'angle-up' | 'angle-left' | 'angle-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'check' | 'clipboard' | 'close' | 'copy' | 'download' | 'edit' | 'envelope' | 'envelope-full' | 'export' | 'external-link' | 'eye' | 'folder-open' | 'hamburger' | 'heart' | 'heart-full' | 'home' | 'home-full' | 'import' | 'info' | 'link' | 'minus' | 'mobile-phone' | 'phone' | 'plus' | 'print' | 'search' | 'settings' | 'sortable' | 'star' | 'star-full' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'triangle-up-down' | 'upload' | 'user' | 'warning';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.32",
+	"version": "1.0.33",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",