sveltacular 1.0.33 → 1.0.36

package/dist/forms/button/button.svelte

@@ -5,19 +5,24 @@
 	 */
 	import type { Snippet } from 'svelte';
 	import { navigateTo } from '../../helpers/navigate-to.js';
-	import type { ButtonVariant, FormFieldSizeOptions } from '../../types/form.js';
+	import type { ButtonVariant, ComponentWidth, FormFieldSizeOptions } from '../../types/form.js';
+	import type { IconType } from '../../icons/types.js';
 	import Spinner from '../../generic/spinner/spinner.svelte';
+	import Icon from '../../icons/icon.svelte';
+	import type { ComponentSize } from '../../types';
 
 	let {
 		/** Optional href for navigation */
 		href = undefined,
-		/** Button size */
+		/** Button size (controls font size and padding) */
 		size = 'md',
+		/** Button width */
+		width = 'md',
 		/** Button variant/style */
 		variant = 'secondary',
 		/** HTML button type */
 		type = 'button',
-		/** Display as block (full width) */
+		/** Display as block (full width) - DEPRECATED: use width="full" instead */
 		block = false,
 		/** Allow flex growth */
 		flex = false,
@@ -33,6 +38,11 @@
 		collapse = false,
 		/** Delay before re-enabling after click (prevents double-clicks) */
 		repeatSubmitDelay = 500,
+		/** Icon to display */
+		icon = undefined,
+		/** Icon alignment */
+		iconAlign = 'left',
+		iconSize = 'default',
 		/** Click handler */
 		onClick = undefined,
 		/** Button content */
@@ -40,6 +50,7 @@
 	}: {
 		href?: string | undefined;
 		size?: FormFieldSizeOptions;
+		width?: ComponentWidth;
 		variant?: ButtonVariant;
 		type?: 'button' | 'submit' | 'reset';
 		block?: boolean;
@@ -50,8 +61,11 @@
 		noMargin?: boolean;
 		collapse?: boolean;
 		repeatSubmitDelay?: number | 'infinite';
+		icon?: IconType | undefined;
+		iconAlign?: 'left' | 'right' | 'above' | 'below';
+		iconSize?: 'default' | ComponentSize;
 		onClick?: ((e?: Event) => void) | undefined;
-		children: Snippet;
+		children?: Snippet;
 	} = $props();
 
 	let isDisabled = $derived(disabled || loading);
@@ -73,16 +87,19 @@
 			navigateTo(href);
 		}
 	};
+
+	const _iconSize = $derived<ComponentSize>(iconSize === 'default' ? size : iconSize);
 </script>
 
 <button
 	{type}
 	onclick={handleClick}
-	class="{size} {variant} {flex ? 'flex' : ''}"
+	class="{size} w-{width} {variant} {flex ? 'flex' : ''} icon-{iconAlign}"
 	class:block
 	class:noMargin
 	class:collapse
 	class:loading
+	class:has-icon={!!icon}
 	disabled={isDisabled}
 	aria-label={ariaLabel}
 	aria-busy={loading}
@@ -93,12 +110,25 @@
 			<Spinner {size} variant={variant === 'outline' ? 'secondary' : 'primary'} />
 		</span>
 	{/if}
-	{@render children()}
+	{#if icon && (iconAlign === 'above' || iconAlign === 'left')}
+		<span class="icon-wrapper" aria-hidden="true">
+			<Icon type={icon} size={_iconSize} fill="currentColor" />
+		</span>
+	{/if}
+	{#if children}
+		<span class="button-content">
+			{@render children()}
+		</span>
+	{/if}
+	{#if icon && (iconAlign === 'below' || iconAlign === 'right')}
+		<span class="icon-wrapper" aria-hidden="true">
+			<Icon type={icon} size={_iconSize} fill="currentColor" />
+		</span>
+	{/if}
 </button>
 
 <style>button {
   display: inline-block;
-  min-width: 10rem;
   cursor: pointer;
   margin-top: var(--spacing-sm);
   margin-bottom: var(--spacing-sm);
@@ -117,6 +147,9 @@
   white-space: nowrap;
   font-family: var(--base-font-family);
   text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 button[disabled] {
   opacity: 0.5;
@@ -136,27 +169,60 @@ button.block {
   display: block;
   width: 100%;
 }
+button.xs {
+  font-size: var(--font-xs);
+  line-height: 0.875rem;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  gap: 0;
+}
 button.sm {
   font-size: var(--font-sm);
   line-height: 1rem;
   padding: var(--spacing-xs) var(--spacing-sm);
+  gap: 0;
+}
+button.md {
+  font-size: var(--font-base);
+  line-height: 1.25rem;
+  padding: var(--spacing-sm) var(--spacing-base);
+  gap: var(--spacing-xs);
 }
 button.lg {
   font-size: var(--font-md);
   line-height: 1.5rem;
   padding: var(--spacing-md) var(--spacing-lg);
+  gap: var(--spacing-sm);
 }
 button.xl {
   font-size: var(--font-xl);
   line-height: 1.75rem;
   padding: var(--spacing-base) var(--spacing-xl);
+  gap: var(--spacing-md);
+}
+button.w-auto {
+  min-width: auto;
+  width: auto;
+}
+button.w-sm {
+  min-width: 5rem;
+  display: inline-block;
+}
+button.w-md {
+  min-width: 10rem;
+  display: inline-block;
+}
+button.w-lg {
+  min-width: 20rem;
+  display: inline-block;
 }
-button.full {
+button.w-xl {
+  min-width: 30rem;
+  display: inline-block;
+}
+button.w-full {
   width: 100%;
-  padding: var(--spacing-sm) 0;
   display: block;
   min-width: auto;
-  flex-grow: 1;
 }
 button:hover {
   background-color: var(--gray-600);
@@ -225,9 +291,44 @@ button.link {
 button.link:hover {
   color: var(--base-link-hover-fg);
 }
+button.ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--body-fg);
+  text-shadow: none;
+}
+button.ghost:hover {
+  background-color: var(--button-secondary-bg);
+  border-color: var(--button-secondary-border);
+  color: var(--button-secondary-fg);
+  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
+}
 button .spinner-wrapper {
   display: inline-flex;
   align-items: center;
   margin-right: var(--spacing-xs);
   vertical-align: middle;
+}
+button .button-content {
+  display: inline;
+}
+button .icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+button.icon-left .icon-wrapper {
+  margin-right: var(--spacing-xs);
+}
+button.icon-right .icon-wrapper {
+  margin-left: var(--spacing-xs);
+}
+button.icon-above, button.icon-below {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+button.icon-above .icon-wrapper {
+  order: -1;
 }</style>

package/dist/forms/button/button.svelte.d.ts

@@ -3,10 +3,13 @@
      * @component
      */
 import type { Snippet } from 'svelte';
-import type { ButtonVariant, FormFieldSizeOptions } from '../../types/form.js';
+import type { ButtonVariant, ComponentWidth, FormFieldSizeOptions } from '../../types/form.js';
+import type { IconType } from '../../icons/types.js';
+import type { ComponentSize } from '../../types';
 type $$ComponentProps = {
     href?: string | undefined;
     size?: FormFieldSizeOptions;
+    width?: ComponentWidth;
     variant?: ButtonVariant;
     type?: 'button' | 'submit' | 'reset';
     block?: boolean;
@@ -17,8 +20,11 @@ type $$ComponentProps = {
     noMargin?: boolean;
     collapse?: boolean;
     repeatSubmitDelay?: number | 'infinite';
+    icon?: IconType | undefined;
+    iconAlign?: 'left' | 'right' | 'above' | 'below';
+    iconSize?: 'default' | ComponentSize;
     onClick?: ((e?: Event) => void) | undefined;
-    children: Snippet;
+    children?: Snippet;
 };
 declare const Button: import("svelte").Component<$$ComponentProps, {}, "disabled">;
 type Button = ReturnType<typeof Button>;

package/dist/forms/check-box/check-box-group.svelte

@@ -41,7 +41,7 @@
 			// Reassign instead of mutate to avoid circular dependency
 			const newItems = currentItems.map((item) => ({
 				...item,
-				isChecked: currentGroup.includes(item.value ?? '')
+				isChecked: currentGroup.includes(item.value != null ? String(item.value) : '')
 			}));
 			itemsWithState = newItems;
 		});
@@ -65,7 +65,7 @@
 		{#each itemsWithState as item}
 			<CheckBox
 				{disabled}
-				value={item.value ?? undefined}
+				value={item.value != null ? String(item.value) : undefined}
 				bind:isChecked={item.isChecked}
 				onChange={handleCheckboxChange}
 				label={item.name}

package/dist/forms/combo/new-or-existing-combo.svelte

@@ -8,7 +8,7 @@
 		TextBox
 	} from '../../index.js';
 	import FlexCol from '../../layout/flex-col.svelte';
-	import type { SearchFunction } from '../list-box/list-box.js';
+	import type { SearchFunction } from '../../types/form.js';
 
 	let {
 		mode = $bindable('existing' as 'new' | 'existing'),
@@ -19,7 +19,7 @@
 		disabled = false,
 		required = false,
 		searchable = false,
-		search = undefined as SearchFunction | undefined,
+		search = undefined,
 		searchPlaceholder = 'Search',
 		newPlaceholder = 'New'
 	}: {
@@ -31,7 +31,7 @@
 		disabled?: boolean;
 		required?: boolean;
 		searchable?: boolean;
-		search?: SearchFunction | undefined;
+		search?: SearchFunction<DropdownOption> | undefined;
 		searchPlaceholder?: string;
 		newPlaceholder?: string;
 	} = $props();

package/dist/forms/combo/new-or-existing-combo.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type DropdownOption, type FormFieldSizeOptions } from '../../index.js';
-import type { SearchFunction } from '../list-box/list-box.js';
+import type { SearchFunction } from '../../types/form.js';
 type $$ComponentProps = {
     mode?: 'new' | 'existing';
     newValue?: string | null;
@@ -9,7 +9,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     searchable?: boolean;
-    search?: SearchFunction | undefined;
+    search?: SearchFunction<DropdownOption> | undefined;
     searchPlaceholder?: string;
     newPlaceholder?: string;
 };

package/dist/forms/form-field/form-field.svelte

@@ -22,8 +22,7 @@
 			sm: 1,
 			md: 2,
 			lg: 3,
-			xl: 4,
-			full: 4 // Map full to same as xl for backwards compatibility
+			xl: 4
 		};
 		return flexMap[size];
 	};

package/dist/forms/form.svelte

@@ -7,7 +7,7 @@
 		method = 'get',
 		title = undefined,
 		action = undefined,
-		size = 'full',
+		size = 'md',
 		onSubmit = undefined,
 		children
 	}: {

package/dist/forms/index.d.ts

@@ -17,11 +17,7 @@ export { default as TextArea } from './text-area/text-area.svelte';
 export { default as TextBox } from './text-box/text-box.svelte';
 export { default as TimeBox } from './time-box/time-box.svelte';
 export { default as UrlBox } from './url-box/url-box.svelte';
-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 ListBox } from './list-box/list-box.svelte';
 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';
@@ -31,4 +27,7 @@ export { default as FormLabel } from './form-label/form-label.svelte';
 export { default as FormSection } from './form-section/form-section.svelte';
 export { default as FormRow } from './form-row/form-row.svelte';
 export type { AdditionalButton } from './form-actions/form-actions.svelte';
+export * from './check-box/index.js';
+export * from './phone-box/index.js';
+export * from './radio-group/index.js';
 export * from './validation.js';

package/dist/forms/index.js

@@ -18,12 +18,7 @@ export { default as TextArea } from './text-area/text-area.svelte';
 export { default as TextBox } from './text-box/text-box.svelte';
 export { default as TimeBox } from './time-box/time-box.svelte';
 export { default as UrlBox } from './url-box/url-box.svelte';
-// Form components with barrel files
-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 ListBox } from './list-box/list-box.svelte';
 // Form structure components
 export { default as Form } from './form.svelte';
 export { default as FormActions } from './form-actions/form-actions.svelte';
@@ -33,5 +28,9 @@ export { default as FormHeader } from './form-header.svelte';
 export { default as FormLabel } from './form-label/form-label.svelte';
 export { default as FormSection } from './form-section/form-section.svelte';
 export { default as FormRow } from './form-row/form-row.svelte';
+// Form components with barrel files
+export * from './check-box/index.js';
+export * from './phone-box/index.js';
+export * from './radio-group/index.js';
 // Validation utilities
 export * from './validation.js';

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

@@ -7,9 +7,9 @@
 	import debounce from '../../helpers/debounce.js';
 	import { browser } from '$app/environment';
 	import { onMount, untrack } from 'svelte';
-	import type { SearchFunction, CreateNewFunction } from './list-box.js';
 	import Prompt from '../../modals/prompt.svelte';
 	import { ucfirst } from '../../helpers/ucfirst.js';
+	import type { CreateNewFunction, SearchFunction } from '../../types/form.js';
 
 	let {
 		value = $bindable(null as string | null),
@@ -19,7 +19,7 @@
 		required = false,
 		readonly = false,
 		searchable = false,
-		search = undefined as SearchFunction | undefined,
+		search = undefined,
 		placeholder = '',
 		onChange = undefined,
 		onFocus = undefined,
@@ -29,7 +29,7 @@
 		feedback = undefined,
 		virtualScroll = false,
 		itemHeight = 40,
-		createNew = undefined as CreateNewFunction | undefined,
+		createNew = undefined,
 		resourceName = undefined
 	}: {
 		value?: string | null;
@@ -39,7 +39,7 @@
 		required?: boolean;
 		readonly?: boolean;
 		searchable?: boolean;
-		search?: SearchFunction | undefined;
+		search?: SearchFunction<DropdownOption> | undefined;
 		placeholder?: string;
 		onChange?: ((value: string | null) => void) | undefined;
 		onFocus?: ((e: FocusEvent) => void) | undefined;
@@ -49,7 +49,7 @@
 		feedback?: FormFieldFeedback;
 		virtualScroll?: boolean;
 		itemHeight?: number;
-		createNew?: CreateNewFunction | undefined;
+		createNew?: CreateNewFunction<DropdownOption> | undefined;
 		resourceName?: string;
 	} = $props();
 
@@ -113,7 +113,9 @@
 	});
 
 	// Check if there are no results when searching
-	let hasNoResults = $derived(isSearchable && text.trim() && filteredItems.length === 0 && !isLoading);
+	let hasNoResults = $derived(
+		isSearchable && text.trim() && filteredItems.length === 0 && !isLoading
+	);
 
 	// Get the ID of the highlighted option for ARIA
 	let activeDescendant = $derived(
@@ -139,7 +141,7 @@
 	// When an item is selected from the dropdown menu
 	const onSelect = (item: MenuOption) => {
 		isUserTyping = false;
-		value = item.value;
+		value = item.value != null ? String(item.value) : null;
 		onChange?.(value);
 		text = getText();
 		isMenuOpen = false;
@@ -216,7 +218,12 @@
 
 		if (e.key === 'Enter') {
 			e.preventDefault();
-			if (isMenuOpen && highlightIndex >= 0 && highlightIndex < filteredItems.length && filteredItems[highlightIndex]) {
+			if (
+				isMenuOpen &&
+				highlightIndex >= 0 &&
+				highlightIndex < filteredItems.length &&
+				filteredItems[highlightIndex]
+			) {
 				onSelect(filteredItems[highlightIndex]);
 			} else if (isMenuOpen && createNew && highlightIndex === filteredItems.length) {
 				// "Create new..." is highlighted
@@ -231,7 +238,12 @@
 		}
 
 		if (e.key === 'Tab') {
-			if (isMenuOpen && highlightIndex >= 0 && highlightIndex < filteredItems.length && filteredItems[highlightIndex]) {
+			if (
+				isMenuOpen &&
+				highlightIndex >= 0 &&
+				highlightIndex < filteredItems.length &&
+				filteredItems[highlightIndex]
+			) {
 				e.preventDefault();
 				onSelect(filteredItems[highlightIndex]);
 			} else if (isMenuOpen && createNew && highlightIndex === filteredItems.length) {
@@ -325,7 +337,7 @@
 				localItems = [...localItems, result];
 
 				// Select the newly created item
-				value = result.value;
+				value = result.value != null ? String(result.value) : null;
 				onChange?.(value);
 				text = result.name;
 				isMenuOpen = false;
@@ -458,7 +470,6 @@
 					closeAfterSelect={true}
 					searchText={isSearchable ? text : ''}
 					{onSelect}
-					size="full"
 					bind:highlightIndex
 					bind:value
 					{listboxId}
@@ -509,9 +520,7 @@
 			</div>
 		{/if}
 		{#if isCreating}
-			<div class="creating-indicator" aria-live="polite">
-				Creating...
-			</div>
+			<div class="creating-indicator" aria-live="polite">Creating...</div>
 		{/if}
 	</Prompt>
 {/key}

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

@@ -1,6 +1,6 @@
 import type { DropdownOption, FormFieldSizeOptions } from '../../types/form.js';
 import { type FormFieldFeedback } from '../form-field/form-field.svelte';
-import type { SearchFunction, CreateNewFunction } from './list-box.js';
+import type { CreateNewFunction, SearchFunction } from '../../types/form.js';
 type $$ComponentProps = {
     value?: string | null;
     items?: DropdownOption[];
@@ -9,7 +9,7 @@ type $$ComponentProps = {
     required?: boolean;
     readonly?: boolean;
     searchable?: boolean;
-    search?: SearchFunction | undefined;
+    search?: SearchFunction<DropdownOption> | undefined;
     placeholder?: string;
     onChange?: ((value: string | null) => void) | undefined;
     onFocus?: ((e: FocusEvent) => void) | undefined;
@@ -19,7 +19,7 @@ type $$ComponentProps = {
     feedback?: FormFieldFeedback;
     virtualScroll?: boolean;
     itemHeight?: number;
-    createNew?: CreateNewFunction | undefined;
+    createNew?: CreateNewFunction<DropdownOption> | undefined;
     resourceName?: string;
 };
 declare const ListBox: import("svelte").Component<$$ComponentProps, {}, "value">;

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

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

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

@@ -1,8 +1,9 @@
+import type { SearchFunction as BaseSearchFunction, CreateNewFunction as BaseCreateNewFunction } from '../../types/form.js';
 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 SearchFunction = BaseSearchFunction<ReferenceItem>;
+export type CreateNewFunction = BaseCreateNewFunction<ReferenceItem>;
 export type LinkBuilderFunction = (item: ReferenceItem) => string | undefined;

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

@@ -7,15 +7,11 @@
 	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';
+	import type { SearchFunction, CreateNewFunction } from '../../types/form.js';
+	import type { ReferenceItem, LinkBuilderFunction } from './reference-box.js';
 
 	const id = uniqueId();
 	const listboxId = `${id}-listbox`;
@@ -23,8 +19,8 @@
 	let {
 		value = $bindable([] as ReferenceItem[]),
 		items = [] as ReferenceItem[],
-		search = undefined as SearchFunction | undefined,
-		createNew = undefined as CreateNewFunction | undefined,
+		search = undefined,
+		createNew = undefined,
 		linkBuilder = undefined as LinkBuilderFunction | undefined,
 		resourceName = undefined as string | undefined,
 		placeholder = 'Search and add items...',
@@ -39,8 +35,8 @@
 	}: {
 		value?: ReferenceItem[];
 		items?: ReferenceItem[];
-		search?: SearchFunction | undefined;
-		createNew?: CreateNewFunction | undefined;
+		search?: SearchFunction<ReferenceItem> | undefined;
+		createNew?: CreateNewFunction<ReferenceItem> | undefined;
 		linkBuilder?: LinkBuilderFunction | undefined;
 		resourceName?: string | undefined;
 		placeholder?: string;
@@ -433,7 +429,6 @@
 						closeAfterSelect={true}
 						{searchText}
 						onSelect={onSelectFromMenu}
-						size="full"
 						bind:highlightIndex
 						{listboxId}
 					/>

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

@@ -1,11 +1,12 @@
 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';
+import type { SearchFunction, CreateNewFunction } from '../../types/form.js';
+import type { ReferenceItem, LinkBuilderFunction } from './reference-box.js';
 type $$ComponentProps = {
     value?: ReferenceItem[];
     items?: ReferenceItem[];
-    search?: SearchFunction | undefined;
-    createNew?: CreateNewFunction | undefined;
+    search?: SearchFunction<ReferenceItem> | undefined;
+    createNew?: CreateNewFunction<ReferenceItem> | undefined;
     linkBuilder?: LinkBuilderFunction | undefined;
     resourceName?: string | undefined;
     placeholder?: string;

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

@@ -377,7 +377,6 @@
 					closeAfterSelect={true}
 					searchText={newTag}
 					onSelect={onSelectFromMenu}
-					size="full"
 					bind:highlightIndex
 					{listboxId}
 				/>

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

@@ -14,7 +14,7 @@
 		feedback = undefined,
 		isLoading = false,
 		showCharacterCount = false,
-		size = 'full',
+		size = 'md',
 		type = 'text',
 		disabled = false,
 		required = false,

package/dist/generic/empty/empty.svelte

@@ -1,32 +1,65 @@
 <script lang="ts">
+	/**
+	 * Empty state component for displaying messages when no data is available.
+	 * Supports icons, messages, descriptions, and custom content.
+	 * @component
+	 */
 	import type { Snippet } from 'svelte';
+	import type { IconType } from '../../icons/types.js';
+	import Icon from '../../icons/icon.svelte';
 
 	let {
-		text = 'No data to display',
-		size = 'md' as 'sm' | 'md' | 'lg' | 'xl',
-		orientation = 'vertical' as 'horizontal' | 'vertical',
-		reverse = false,
-		align = 'center' as 'center' | 'start' | 'end',
+		/** Primary title/heading */
+		title = undefined,
+		/** Main message text (required if no title) */
+		message = 'No data to display',
+		/** Optional secondary description */
+		description = undefined,
+		/** Built-in icon type */
+		icon = undefined,
+		/** Icon size */
+		iconSize = 'xl',
+		/** Component size affects padding and text sizing */
+		size = 'md',
+		/** Custom content (buttons, links, etc.) */
 		children = undefined
 	}: {
-		text?: string;
+		title?: string;
+		message?: string;
+		description?: string;
+		icon?: IconType;
+		iconSize?: 'sm' | 'md' | 'lg' | 'xl';
 		size?: 'sm' | 'md' | 'lg' | 'xl';
-		orientation?: 'horizontal' | 'vertical';
-		reverse?: boolean;
-		align?: 'center' | 'start' | 'end';
 		children?: Snippet;
 	} = $props();
 </script>
 
-<div class="empty {size} {orientation} {reverse ? 'reverse' : ''} {align}">
-	{#if children}
-		<div class="icon">
-			{@render children?.()}
+<div class="empty {size}">
+	{#if icon}
+		<div class="icon-wrapper">
+			<Icon type={icon} size={iconSize} variant="secondary" />
 		</div>
 	{/if}
-	<div class="text">
-		{text}
+
+	<div class="content">
+		{#if title}
+			<h3 class="title">{title}</h3>
+		{/if}
+
+		{#if message}
+			<p class="message">{message}</p>
+		{/if}
+
+		{#if description}
+			<p class="description">{description}</p>
+		{/if}
 	</div>
+
+	{#if children}
+		<div class="actions">
+			{@render children()}
+		</div>
+	{/if}
 </div>
 
 <style>.empty {
@@ -35,80 +68,131 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  color: var(--gray-500);
-  font-weight: 500;
   padding: var(--spacing-2xl);
+  gap: var(--spacing-lg);
 }
 
-.start {
-  justify-content: flex-start;
-}
-
-.end {
-  justify-content: flex-end;
-}
-
-.horizontal {
-  flex-direction: row;
-  gap: var(--spacing-lg);
+.icon-wrapper {
+  color: var(--gray-400);
+  opacity: 0.8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.horizontal.reverse {
-  flex-direction: row-reverse;
+.icon-wrapper :global(svg) {
+  width: 100%;
+  height: 100%;
 }
 
-.vertical.reverse {
-  flex-direction: column-reverse;
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  max-width: 32rem;
 }
 
-.icon {
-  margin-bottom: var(--spacing-base);
-  color: var(--gray-400);
-  opacity: 0.8;
+.title {
+  color: var(--gray-700);
+  font-size: var(--font-lg);
+  font-weight: 600;
+  line-height: 1.4;
+  margin: 0;
 }
 
-.text {
+.message {
   color: var(--gray-600);
   font-size: var(--font-md);
+  font-weight: 500;
   line-height: 1.6;
+  margin: 0;
+}
+
+.description {
+  color: var(--gray-500);
+  font-size: var(--font-base);
+  line-height: 1.5;
+  margin: 0;
 }
 
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  justify-content: center;
+  align-items: center;
+}
+
+/* Size variants */
 .sm {
   padding: var(--spacing-lg);
+  gap: var(--spacing-base);
 }
-.sm .text {
-  font-size: var(--font-base);
+.sm .icon-wrapper {
+  font-size: 2rem;
 }
-.sm .icon {
-  height: 2rem;
+.sm .icon-wrapper :global(.icon) {
   width: 2rem;
+  height: 2rem;
 }
-
-.md .text {
+.sm .title {
   font-size: var(--font-md);
 }
-.md .icon {
-  height: 3rem;
+.sm .message {
+  font-size: var(--font-base);
+}
+.sm .description {
+  font-size: var(--font-sm);
+}
+
+.md .icon-wrapper {
+  font-size: 3rem;
+}
+.md .icon-wrapper :global(.icon) {
   width: 3rem;
+  height: 3rem;
 }
 
 .lg {
   padding: var(--spacing-2xl) var(--spacing-xl);
+  gap: var(--spacing-xl);
 }
-.lg .text {
-  font-size: var(--font-lg);
+.lg .icon-wrapper {
+  font-size: 4rem;
 }
-.lg .icon {
-  height: 4rem;
+.lg .icon-wrapper :global(.icon) {
   width: 4rem;
+  height: 4rem;
+}
+.lg .title {
+  font-size: var(--font-xl);
+}
+.lg .message {
+  font-size: var(--font-lg);
+}
+.lg .description {
+  font-size: var(--font-md);
 }
 
 .xl {
   padding: 4rem var(--spacing-2xl);
+  gap: var(--spacing-2xl);
 }
-.xl .text {
-  font-size: var(--font-xl);
+.xl .icon-wrapper {
+  font-size: 5rem;
 }
-.xl .icon {
-  height: 5rem;
+.xl .icon-wrapper :global(.icon) {
   width: 5rem;
+  height: 5rem;
+}
+.xl .title {
+  font-size: var(--font-2xl);
+}
+.xl .message {
+  font-size: var(--font-xl);
+}
+.xl .description {
+  font-size: var(--font-lg);
+}
+.xl .actions {
+  gap: var(--spacing-base);
 }</style>

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

@@ -1,10 +1,17 @@
+/**
+     * Empty state component for displaying messages when no data is available.
+     * Supports icons, messages, descriptions, and custom content.
+     * @component
+     */
 import type { Snippet } from 'svelte';
+import type { IconType } from '../../icons/types.js';
 type $$ComponentProps = {
-    text?: string;
+    title?: string;
+    message?: string;
+    description?: string;
+    icon?: IconType;
+    iconSize?: 'sm' | 'md' | 'lg' | 'xl';
     size?: 'sm' | 'md' | 'lg' | 'xl';
-    orientation?: 'horizontal' | 'vertical';
-    reverse?: boolean;
-    align?: 'center' | 'start' | 'end';
     children?: Snippet;
 };
 declare const Empty: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/generic/menu/menu.svelte

@@ -34,7 +34,7 @@
 	} = $props();
 
 	const selectItem = (item: MenuOption) => {
-		value = item.value;
+		value = item.value != null ? String(item.value) : null;
 		onSelect?.(item);
 		if (closeAfterSelect) open = false;
 	};

package/dist/generic/overlay.svelte

@@ -4,11 +4,13 @@
 	let {
 		show = true,
 		onClick = undefined,
+		onEscape = undefined,
 		blur = false,
 		children
 	}: {
 		show?: boolean;
 		onClick?: (() => void) | undefined;
+		onEscape?: (() => void) | undefined;
 		blur?: boolean;
 		children?: Snippet;
 	} = $props();
@@ -22,7 +24,7 @@
 
 	const onKeyPress = (event: KeyboardEvent) => {
 		if (event.key === 'Escape') {
-			onClick?.();
+			onEscape?.();
 		}
 	};
 </script>

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

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     show?: boolean;
     onClick?: (() => void) | undefined;
+    onEscape?: (() => void) | undefined;
     blur?: boolean;
     children?: Snippet;
 };

package/dist/generic/section/section.svelte

@@ -8,7 +8,7 @@
 	let {
 		title = undefined,
 		level = 2 as SectionLevel,
-		size = 'full' as FormFieldSizeOptions,
+		size = 'xl' as FormFieldSizeOptions,
 		hidden = false,
 		align = 'left' as 'left' | 'center' | 'right',
 		children

package/dist/modals/alert.svelte

@@ -37,7 +37,7 @@
 </script>
 
 {#if open}
-	<Overlay onClick={close}>
+	<Overlay onEscape={close}>
 		<Dialog
 			{size}
 			role="alertdialog"
@@ -54,10 +54,10 @@
 			<DialogBody>
 				{@render children?.()}
 			</DialogBody>
-		<Divider />
-		<DialogFooter>
-			<Button onClick={close} size="full" variant={buttonVariant}>{buttonText}</Button>
-		</DialogFooter>
+			<Divider />
+			<DialogFooter>
+				<Button onClick={close} variant={buttonVariant}>{buttonText}</Button>
+			</DialogFooter>
 		</Dialog>
 	</Overlay>
 {/if}

package/dist/modals/confirm.svelte

@@ -48,7 +48,7 @@
 </script>
 
 {#if open}
-	<Overlay onClick={no}>
+	<Overlay onEscape={no}>
 		<Dialog
 			{size}
 			role="alertdialog"
@@ -65,11 +65,11 @@
 			<DialogBody>
 				{@render children?.()}
 			</DialogBody>
-		<Divider />
-		<DialogFooter>
-			<Button onClick={no} variant={noVariant} size="full">{noText}</Button>
-			<Button onClick={yes} variant={yesVariant} size="full">{yesText}</Button>
-		</DialogFooter>
+			<Divider />
+			<DialogFooter>
+				<Button onClick={no} variant={noVariant}>{noText}</Button>
+				<Button onClick={yes} variant={yesVariant}>{yesText}</Button>
+			</DialogFooter>
 		</Dialog>
 	</Overlay>
 {/if}

package/dist/modals/modal.svelte

@@ -80,7 +80,7 @@
 </script>
 
 {#if open}
-	<Overlay {blur} onClick={close}>
+	<Overlay {blur} onEscape={dismissable ? close : undefined}>
 		<div bind:this={dialogElement}>
 			<Dialog {size} {glass} role="dialog" aria-modal="true" aria-labelledby={titleId}>
 				<DialogCloseButton show={_showCloseButton} onClick={close} />

package/dist/modals/prompt.svelte

@@ -58,7 +58,7 @@
 </script>
 
 {#if open}
-	<Overlay onClick={no}>
+	<Overlay onEscape={no}>
 		<Dialog
 			{size}
 			role="dialog"
@@ -73,16 +73,16 @@
 			{/if}
 			<DialogCloseButton show={showCloseButton} onClick={no} />
 			<DialogBody>
-				<TextBox bind:value {placeholder} {type} {required} size="full" />
+				<TextBox bind:value {placeholder} {type} {required} />
 				{#if children}
 					{@render children()}
 				{/if}
 			</DialogBody>
-		<Divider />
-		<DialogFooter>
-			<Button onClick={no} variant={cancelVariant} size="full">{cancelText}</Button>
-			<Button onClick={yes} variant={okVariant} size="full">{okText}</Button>
-		</DialogFooter>
+			<Divider />
+			<DialogFooter>
+				<Button onClick={no} variant={cancelVariant}>{cancelText}</Button>
+				<Button onClick={yes} variant={okVariant}>{okText}</Button>
+			</DialogFooter>
 		</Dialog>
 	</Overlay>
 {/if}

package/dist/navigation/drawer/drawer.svelte

@@ -42,7 +42,7 @@
 </script>
 
 {#if open}
-	<Overlay onClick={close}>
+	<Overlay onEscape={dismissable ? close : undefined}>
 		<div
 			bind:this={drawerElement}
 			class="drawer {position}"

package/dist/tables/data-grid.svelte

@@ -12,7 +12,6 @@
 		RowActions
 	} from '../types/data.js';
 	import Empty from '../generic/empty/empty.svelte';
-	import Icon from '../icons/icon.svelte';
 	import Pagination from '../navigation/pagination/pagination.svelte';
 	import Loading from '../placeholders/loading.svelte';
 	import TableCaption from './table-caption.svelte';
@@ -254,9 +253,7 @@
 						{#if rows === undefined}
 							<Loading />
 						{:else}
-							<Empty>
-								<Icon type="folder-open" size="lg" />
-							</Empty>
+							<Empty icon="folder-open" iconSize="lg" />
 						{/if}
 					</div>
 				</TableCell>

package/dist/types/form.d.ts

@@ -1,13 +1,13 @@
-export type { ComponentSize as FormFieldSizeOptions } from './size.js';
+export type { ComponentSize as FormFieldSizeOptions, ComponentWidth } from './size.js';
 /**
  * Button variant options
  */
-export type ButtonVariant = 'primary' | 'secondary' | 'positive' | 'danger' | 'outline' | 'link';
+export type ButtonVariant = 'primary' | 'secondary' | 'positive' | 'danger' | 'outline' | 'link' | 'ghost';
 /**
  * Dropdown option structure
  */
 export type DropdownOption = {
-    value: string | null;
+    value: string | number | null;
     name: string;
     id?: string;
     label?: string;
@@ -27,3 +27,17 @@ export type AllowedTextInputTypes = 'text' | 'email' | 'password' | 'search' | '
  * Radio button value type
  */
 export type RadioButtonValue = string | number | boolean | undefined;
+/**
+ * Generic search function type
+ * @template T The type of item returned (e.g., DropdownOption, ReferenceItem)
+ */
+export type SearchFunction<T extends {
+    name: string;
+} = DropdownOption> = (text: string) => Promise<T[]>;
+/**
+ * Generic create new function type
+ * @template T The type of item returned (e.g., DropdownOption, ReferenceItem)
+ */
+export type CreateNewFunction<T extends {
+    name: string;
+} = DropdownOption> = (inputName: string) => Promise<T | null>;

package/dist/types/size.d.ts

@@ -1,7 +1,15 @@
 /**
  * Unified size type for all components
+ * Controls font size, padding, and general component scale
  */
-export type ComponentSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ComponentSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Width options for components
+ * auto: content-based width (no min-width)
+ * xs-xl: fixed minimum widths
+ * full: fills available space (100%)
+ */
+export type ComponentWidth = 'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 /**
  * Size utility functions for consistent spacing and sizing
  */
@@ -12,11 +20,27 @@ export declare const sizeMap: {
     readonly xl: "auto";
     readonly full: "100%";
 };
+/**
+ * Width map for component widths
+ */
+export declare const widthMap: {
+    readonly auto: "auto";
+    readonly xs: "10rem";
+    readonly sm: "15rem";
+    readonly md: "20rem";
+    readonly lg: "25rem";
+    readonly xl: "30rem";
+    readonly full: "100%";
+};
 /**
  * Get max width for a given size
  */
 export declare const getMaxWidth: (size: ComponentSize) => string;
 /**
- * Get display type for a given size (block for xl/full, inline-block for others)
+ * Get display type for a given size (block for xl, inline-block for others)
  */
 export declare const getDisplayType: (size: ComponentSize) => "block" | "inline-block";
+/**
+ * Get min-width for a given width option
+ */
+export declare const getMinWidth: (width: ComponentWidth) => string;

package/dist/types/size.js

@@ -8,6 +8,18 @@ export const sizeMap = {
     xl: 'auto',
     full: '100%'
 };
+/**
+ * Width map for component widths
+ */
+export const widthMap = {
+    auto: 'auto',
+    xs: '10rem',
+    sm: '15rem',
+    md: '20rem',
+    lg: '25rem',
+    xl: '30rem',
+    full: '100%'
+};
 /**
  * Get max width for a given size
  */
@@ -15,8 +27,14 @@ export const getMaxWidth = (size) => {
     return sizeMap[size];
 };
 /**
- * Get display type for a given size (block for xl/full, inline-block for others)
+ * Get display type for a given size (block for xl, inline-block for others)
  */
 export const getDisplayType = (size) => {
-    return ['xl', 'full'].includes(size) ? 'block' : 'inline-block';
+    return size === 'xl' ? 'block' : 'inline-block';
+};
+/**
+ * Get min-width for a given width option
+ */
+export const getMinWidth = (width) => {
+    return widthMap[width];
 };

package/package.json

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