1.1.3

.nvmrc

@@ -1 +0,0 @@
-24.12.0

package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "https://gitea.auvem.com/svelte-toolkit/sui.git"
 	},
-	"version": "1.2.0",
+	"version": "1.1.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",

src/lib/Combobox.svelte

@@ -29,11 +29,10 @@
 	};
 
 	/** returns option label, falling back to value or 'Undefined Option' if no option provided */
-	const getLabel = (opt: ComboboxOption | undefined | null): string =>
+	const getLabel = (opt: ComboboxOption | undefined): string =>
 		opt ? (opt.label ?? opt.value) : 'Undefined Option';
 	/** returns option preview, falling back to getLabel if missing */
-	const getPreview = (opt: ComboboxOption | undefined | null): string =>
+	const getPreview = (opt: ComboboxOption | undefined): string => opt?.preview ?? getLabel(opt);
-		opt?.preview ?? getLabel(opt);
 </script>
 
 <script lang="ts">
@@ -42,7 +41,7 @@
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
-	import { type Snippet } from 'svelte';
+	import { untrack, type Snippet } from 'svelte';
 	import { scale } from 'svelte/transition';
 	import { generateIdentifier, type IconDef } from './util';
 	import type { ClassValue, MouseEventHandler } from 'svelte/elements';
@@ -79,7 +78,7 @@
 		stateless?: boolean;
 
 		/** Bindable value of the combobox, the currently selected option */
-		value?: ComboboxOption | null;
+		value?: ComboboxOption;
 		/** Array of ComboboxOptions for the picker */
 		options: ComboboxOption[];
 		/**
@@ -272,7 +271,7 @@
 	});
 
 	/** currently highlighted option, updated by keyboard navigation or defaults to first item */
-	let highlighted = $derived.by((): ComboboxOption | undefined | null => {
+	let highlighted = $derived.by((): ComboboxOption | undefined => {
 		if (!searching) return undefined; // otherwise, the first item is highlighted on first open
 		if (filteredItems.length === 0) return undefined;
 		if (value !== undefined && filteredItems.find((v) => v.value === value?.value)) return value;
@@ -315,8 +314,12 @@
 		easing: cubicOut
 	});
 	$effect(() => {
+		if (iconWidth >= 0) {
+			untrack(() => {
 				inputPadding.target = calculatePadding();
 			});
+		}
+	});
 
 	/*** HELPER FUNCTIONS ***/
 
@@ -651,9 +654,9 @@
 			>
 				{#if loading}
 					<Spinner class="stroke-sui-accent! -mt-0.5" size="1em" />
-				{:else if useHighlighted && highlighted && highlighted.icon}
+				{:else if useHighlighted && highlighted}
 					{@render optionIcon(highlighted)}
-				{:else if value && value.icon}
+				{:else if value}
 					{@render optionIcon(value)}
 				{:else if icon}
 					{#if typeof icon === 'function'}

src/lib/Dialog.svelte

@@ -76,9 +76,9 @@
 
 	/**
 	 * Stores internal state of the dialog, everything necessary to render
-	 * internal and override capable snippets.
+	 * internal snippets.
 	 */
-	export type DialogState = {
+	type DialogState = {
 		frozen: boolean;
 		loading: boolean;
 		disabled: boolean;
@@ -126,7 +126,7 @@
 		/** Sets bottom alignment of controls (default: end) */
 		controlsAlign?: 'start' | 'center' | 'end';
 		/** Top-right close control */
-		close?: Snippet<[state: DialogState]> | Omit<DialogControlButton, 'label'> | null;
+		close?: Snippet | Omit<DialogControlButton, 'label'> | null;
 		/**
 		 * Callback when the dialog is opened
 		 * @deprecated use onopenchange instead and check the open parameter
@@ -141,10 +141,8 @@
 		onopenchange?: ({ open, dialog }: { open: boolean; dialog: DialogAPI }) => void;
 		/** If default controls are used, controls loading state of submit button */
 		loading?: boolean;
-		/** If default controls are used, freezes all interactions preventing user input */
+		/** If default controls are used, freezes all interactions */
 		frozen?: boolean;
-		/** If enabled, automatically freezes dialog when loading (default: true) */
-		autoFreeze?: boolean;
 		/** If default controls are used, disables submit button */
 		disabled?: boolean;
 	}
@@ -164,7 +162,6 @@
 		onopenchange,
 		loading = $bindable(false),
 		frozen = $bindable(false),
-		autoFreeze = true,
 		disabled = $bindable(false)
 	}: Props = $props();
 
@@ -183,8 +180,6 @@
 	let stackIndex = $state(-1);
 	const zIndex = $derived(1000 + stackIndex * 100);
 
-	const reallyFrozen = $derived(autoFreeze ? frozen || loading : frozen);
-
 	/** handles open change */
 	const handleOpenChange = (localOpen: boolean) => {
 		if (localOpen) {
@@ -249,7 +244,7 @@
 	/** Returns the current state of the dialog */
 	export const getState = (): DialogState => {
 		return {
-			frozen: reallyFrozen,
+			frozen,
 			loading,
 			disabled,
 			api: dialogAPI
@@ -276,11 +271,11 @@
 		transition:fade={{ duration: 150 }}
 		onclick={(e) => {
 			const target = e.target as HTMLElement;
-			if (open && !reallyFrozen && !dialogContainer?.contains(target) && target !== dialogContainer)
+			if (open && !frozen && !dialogContainer?.contains(target) && target !== dialogContainer)
 				open = false;
 		}}
 		onkeydown={(e) => {
-			if (e.key === 'Escape' && !reallyFrozen) {
+			if (e.key === 'Escape' && !frozen) {
 				if (stackIndex === dialogStack.length - 1) {
 					// only close if this dialog is the topmost dialog
 					open = false;
@@ -319,7 +314,7 @@
 				<!-- Close Button -->
 				{#if close !== null}
 					{#if typeof close === 'function'}
-						{@render close(getState())}
+						{@render close()}
 					{:else}
 						{@render dialogCloseButton(getState(), close)}
 					{/if}
@@ -379,7 +374,7 @@
 				state.api.close();
 			}
 		}}
-		disabled={state.frozen || state.disabled}
+		disabled={state.frozen}
 	>
 		{opts?.label || 'Cancel'}
 	</Button>

src/lib/Tabs.svelte

@@ -23,22 +23,12 @@
 		activeIndex?: number;
 		/** Callback fired when the active tab changes */
 		onchange?: (event: { index: number; tab: TabPage }) => void;
-		/** Applies layout padding to the tab header (default: false) */
+		/** Applies layout padding to the tab header & content areas (default: false) */
-		padHeader?: boolean;
+		padded?: boolean;
-		/** Applies layout padding to the content areas (default: false) */
-		padContent?: 'padding' | 'margin' | 'none';
-		/** Additional classes applied to the outer container */
 		class?: ClassValue | null;
 	}
 
-	let {
+	let { pages, activeIndex = 0, onchange, padded = false, class: classValue }: Props = $props();
-		pages,
-		activeIndex = 0,
-		onchange,
-		padHeader = false,
-		padContent = 'none',
-		class: classValue
-	}: Props = $props();
 
 	let primaryContainerEl: HTMLDivElement;
 	let tabContainerEl: HTMLDivElement;
@@ -109,7 +99,7 @@
 		bind:this={tabContainerEl}
 		class={[
 			'border-sui-text/15 relative mb-4 flex items-center gap-5 border-b-2',
-			padHeader && 'px-layout'
+			padded && 'px-layout'
 		]}
 	>
 		{#each pages as page, i (page.title)}
@@ -144,7 +134,7 @@
 
 	{#key activeIndex}
 		<div
-			class={[padContent === 'padding' && 'px-layout', padContent === 'margin' && 'mx-layout']}
+			class={[padded && 'px-layout']}
 			in:flyX={{ direction: activeIndex > prevIndex ? 1 : -1, duration: 180, delay: 181 }}
 			out:flyX={{ direction: activeIndex > prevIndex ? -1 : 1, duration: 180 }}
 			onoutrostart={lockHeight}

src/lib/error.ts

@@ -7,105 +7,21 @@ export interface GraphError {
 }
 
 /** RawError is an error that can be converted to a string by ErrorMessage */
-export type RawError = ErrorMessage | Error | string | GraphError[];
+export type RawError = Error | string | GraphError[];
 
-/**
- * Type guard to check if an error is a RawError
- * @param error The error to check
- * @returns true if the error is a RawError, false otherwise
- */
-export const isRawError = (error: unknown): error is RawError => {
-	return (
-		error instanceof ErrorMessage ||
-		error instanceof Error ||
-		typeof error === 'string' ||
-		(Array.isArray(error) &&
-			error.every(
-				(e) => typeof e.message === 'string' && (e.path === undefined || Array.isArray(e.path))
-			))
-	);
-};
-
-/**
- * Converts any error (including GraphQL errors, standard Errors, strings, and
- * ErrorMessages) into a consistent string format for display.
- * @param error The error to convert to a string.
- * @returns A string representation of the error, suitable for display to users.
- */
-export const catchErrorString = (error: unknown): string => {
-	if (error instanceof ErrorMessage) {
-		return error.toString();
-	} else if (isRawError(error)) {
-		return new ErrorMessage(error).toString();
-	} else {
-		return String(error);
-	}
-};
-
-/**
- * Checks a typical response from a GraphQL server for error and missing data,
- * throwing an appropriate ErrorMessage if an error is found or if no data is
- * returned.
- * @param resourceName A human-readable name for the resource being fetched,
- * used in error messages.
- * @param response The response from the GraphQL server, which may contain an
- * 'errors' array and a 'data' field.
- * @throws An ErrorMessage if the response contains errors or if the data field
- * is missing (undefined or null).
- */
-export const checkGraphResponse = (
-	resourceName: string,
-	response: { errors?: GraphError[] | null; data?: unknown }
-): void => {
-	if (response.errors && response.errors.length > 0) {
-		throw new ErrorMessage(`Error fetching ${resourceName}`, response.errors);
-	}
-	if (!response.data) {
-		throw new ErrorMessage(`No data returned for ${resourceName}`);
-	}
-};
-
-/**
- * A class that represents an error message, which can be constructed from various types of raw errors
- * and provides methods to convert those errors into a consistent format (lines of text) for display.
- * It also supports wrapping existing error messages with additional context.
- */
 export class ErrorMessage {
 	private _lines: string[] = [];
 
 	/**
-	 * Always creates a new ErrorMessage instance, even if there are no errors.
+	 * Converts a RawError to an array of lines and stores it for later access,
-	 * @param errors The raw errors to convert and store, or null/undefined for no error.
+	 * or initializes without any errors if the input is null or undefined.
-	 * @throws If any of the raw errors are of an unsupported type.
+	 * @param raw The raw error to convert and store, or null/undefined for no error.
+	 * @throws If the raw error is of an unsupported type.
 	 */
-	constructor(...errors: (unknown | null | undefined)[]) {
+	constructor(raw: RawError | null | undefined) {
-		if (errors.length === 0) return;
+		if (raw) {
-		this._lines = errors.flatMap((e) => ErrorMessage.rawErrorToLines(e));
+			this._lines = ErrorMessage.rawErrorToLines(raw);
 		}
-
-	/**
-	 * Creates a new ErrorMessage only if the provided errors are not null or
-	 * undefined. If no errors are provided, returns null.
-	 */
-	static from(...errors: (unknown | null | undefined)[]): ErrorMessage | null {
-		if (errors.length === 0) return null;
-		return new ErrorMessage(...errors);
-	}
-
-	/**
-	 * Wraps this ErrorMessage inside another error, nesting the original error.
-	 * @param errors The raw errors to wrap around this error, or null/undefined for no additional error.
-	 * @returns A new ErrorMessage instance that includes the original error and any new errors.
-	 */
-	wrap(...errors: (unknown | null | undefined)[]): ErrorMessage {
-		if (errors.length === 0) return this;
-		const newLines = errors.flatMap((e) => ErrorMessage.rawErrorToLines(e));
-		return new ErrorMessage(...newLines, ...this._lines);
-	}
-
-	/** returns true if there are any error lines */
-	hasError(): boolean {
-		return this._lines.length > 0;
 	}
 
 	/** returns the stored lines */
@@ -121,14 +37,28 @@ export class ErrorMessage {
 		return this._lines.join('<br />');
 	}
 
+	/** returns true if there are any error lines */
+	hasError(): boolean {
+		return this._lines.length > 0;
+	}
+
+	/** adds a new line to the error message */
+	addLine(line: string): void {
+		this._lines.push(line);
+	}
+
+	/** optionally returns a new ErrorMessage only if the RawError is not empty */
+	static from(raw: RawError | null | undefined): ErrorMessage | null {
+		if (!raw) return null;
+		return new ErrorMessage(raw);
+	}
+
 	/** converts a RawError to an array of lines */
-	static rawErrorToLines(raw: unknown | null | undefined): string[] {
+	static rawErrorToLines(raw: RawError | null | undefined): string[] {
-		if (!raw) return [];
+		if (!raw) return ['No error'];
 
 		let errorLines: string[];
-		if (raw instanceof ErrorMessage) {
+		if (typeof raw === 'string') {
-			errorLines = raw.lines;
-		} else if (typeof raw === 'string') {
 			errorLines = [raw];
 		} else if (raw instanceof Error) {
 			errorLines = [raw.message];

src/lib/floating.svelte.ts

@@ -4,7 +4,7 @@
  * for more details, examples, and original source.
  */
 
-import { computePosition, autoUpdate, flip, offset, type Placement, size } from '@floating-ui/dom';
+import { computePosition, autoUpdate, flip, offset, type Placement } from '@floating-ui/dom';
 import { createAttachmentKey } from 'svelte/attachments';
 
 /**
@@ -17,13 +17,6 @@ export interface PopoverOptions {
 	placement?: Placement;
 	/** Offset distance between the reference and floating elements (default: 8) */
 	offset?: number;
-	/**
-	 * Constraints the width and height of the popover to prevent it from
-	 * overflowing the viewport. If true, the popover will adjust its max-width
-	 * and max-height to fit. Scrolling is the responsibility of the parent
-	 * element. Default is true.
-	 */
-	constrainSize?: boolean;
 	/** Callback when the popover is opened or closed */
 	ontoggle?: (open: boolean) => void;
 }
@@ -36,12 +29,10 @@ export class Popover {
 	private options: PopoverOptions = {
 		interaction: 'click',
 		placement: 'bottom-start',
-		offset: 8,
+		offset: 8
-		constrainSize: true
 	};
 	private referenceElement: HTMLElement | undefined = $state();
 	private floatingElement: HTMLElement | undefined = $state();
-	private positionElement: HTMLElement | undefined = $state();
 	private open = $state(false);
 
 	/**
@@ -96,23 +87,6 @@ export class Popover {
 		return attrs;
 	}
 
-	/**
-	 * Optionally sets the positioning element for the popover, which is used
-	 * for calculating the position of the floating element. If not set, the
-	 * reference element is used by default.
-	 * @returns An object containing an attachment key for the positioning element.
-	 */
-	positionReference() {
-		return {
-			[createAttachmentKey()]: (node: HTMLElement) => {
-				this.positionElement = node;
-				return () => {
-					this.positionElement = undefined;
-				};
-			}
-		};
-	}
-
 	/** Returns whether the popover is open */
 	isOpen() {
 		return this.open;
@@ -148,38 +122,6 @@ export class Popover {
 		};
 	}
 
-	/**
-	 * Callback function that closes the popover when the Escape key is pressed.
-	 * Can be applied to the window, typically via <svelte:window onkeydown={popover.handleEscape} />,
-	 * or to any other element that will receive keyboard events while the popover is open.
-	 * @param event - The keyboard event to handle.
-	 */
-	handleEscape(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			this.setOpen(false);
-		}
-	}
-
-	/**
-	 * Callback function that closes the popover when a click occurs outside of the
-	 * reference and floating elements. Should be applied to the window, typically
-	 * via <svelte:window onclick={popover.handleClickOutside} />.
-	 * @param event - The click event to handle.
-	 */
-	handleClickOutside(event: MouseEvent) {
-		if (!this.isOpen() || !this.referenceElement || !this.floatingElement) {
-			return;
-		}
-
-		if (
-			event.target instanceof Node &&
-			!this.referenceElement.contains(event.target) &&
-			!this.floatingElement.contains(event.target)
-		) {
-			this.setOpen(false);
-		}
-	}
-
 	/**
 	 * Updates the position of the floating element based on the reference element using
 	 * the computePosition function from floating-ui. It applies the calculated
@@ -189,24 +131,9 @@ export class Popover {
 		if (!this.referenceElement || !this.floatingElement) {
 			return;
 		}
-		const reference = this.positionElement || this.referenceElement;
+		const position = await computePosition(this.referenceElement, this.floatingElement, {
-		const position = await computePosition(reference, this.floatingElement, {
 			placement: this.options.placement,
-			middleware: [
+			middleware: [flip(), offset(this.options.offset)]
-				flip(),
-				offset(this.options.offset),
-				size({
-					apply: ({ availableWidth, availableHeight, elements }) => {
-						if (this.options.constrainSize) {
-							elements.floating.style.maxWidth = `${availableWidth}px`;
-							elements.floating.style.maxHeight = `${availableHeight}px`;
-						} else {
-							elements.floating.style.maxWidth = '';
-							elements.floating.style.maxHeight = '';
-						}
-					}
-				})
-			]
 		});
 		const { x, y } = position;
 		Object.assign(this.floatingElement.style, {

src/lib/index.ts

@@ -10,7 +10,6 @@ export {
 	default as Dialog,
 	type DialogAPI,
 	type DialogControls,
-	type DialogState,
 	dialogCancelButton,
 	dialogCloseButton,
 	dialogOkButton
@@ -31,7 +30,6 @@ export { default as Label } from './Label.svelte';
 export { default as Link, rewriteHref } from './Link.svelte';
 export { default as PhoneInput } from './PhoneInput.svelte';
 export { default as PinInput } from './PinInput.svelte';
-export { type Preventable, checkPreventer, type Reversible, checkReversible } from './prevent';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as ScrollBox } from './ScrollBox.svelte';
 export { default as Spinner } from './Spinner.svelte';
@@ -68,14 +66,7 @@ export {
 	ToolbarGroup,
 	Toolbar
 } from './Toolbar';
-export {
+export { type GraphError, type RawError, ErrorMessage } from './error';
-	type GraphError,
-	type RawError,
-	isRawError,
-	catchErrorString,
-	checkGraphResponse,
-	ErrorMessage
-} from './error';
 export {
 	NavigationItem,
 	NavigationManager,

src/lib/prevent.ts

@@ -1,63 +0,0 @@
-/**
- * A type for a function that can be prevented from executing its default behavior.
- * See checkPreventer for easy usage of this type.
- */
-export type Preventable<T> = (ev: T & { prevent: () => void }) => Promise<void> | void;
-
-/**
- * Calls the provided function with a preventer object, and if the preventer is not
- * prevented, calls the callback function.
- * @param fn The function to call with the preventer.
- * @param ev The event object to pass to the function.
- * @param cb The callback function to call if the preventer is not prevented.
- * @returns A promise that resolves to true if the action was not prevented, or false if it was prevented.
- */
-export const checkPreventer = async <T>(
-	fn: Preventable<T>,
-	ev: T,
-	cb?: () => void
-): Promise<boolean> => {
-	let prevented = false;
-	const preventer = {
-		prevent: () => {
-			prevented = true;
-		}
-	};
-	await fn({ ...ev, ...preventer });
-	if (!prevented && cb) {
-		cb();
-	}
-	return !prevented;
-};
-
-/**
- * A type for a function that can be reversed after executing its behavior.
- * See checkReversible for easy usage of this type.
- */
-export type Reversible<T> = (ev: T & { reverse: () => void }) => Promise<void> | void;
-
-/**
- * Calls the provided function with a reverser object, and if the reverser is
- * reversed, calls the callback function.
- * @param fn The function to call with the reverser.
- * @param ev The event object to pass to the function.
- * @param cb The callback function to call if the reverser is reversed.
- * @returns A promise that resolves to true if the action was not reversed, or false if it was reversed.
- */
-export const checkReversible = async <T>(
-	fn: Reversible<T>,
-	ev: T,
-	cb?: () => void
-): Promise<boolean> => {
-	let reversed = false;
-	const reverser = {
-		reverse: () => {
-			reversed = true;
-		}
-	};
-	await fn({ ...ev, ...reverser });
-	if (reversed && cb) {
-		cb();
-	}
-	return !reversed;
-};