1.0.2

asterisk now shown by default if field is required.

package.json

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

pnpm-lock.yaml

@@ -4,9 +4,6 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-overrides:
-  '@svelte-toolkit/validate': link:../validate
-
 importers:
 
   .:
@@ -18,8 +15,8 @@ importers:
         specifier: ^0.2.1
         version: 0.2.1(svelte@5.38.1)
       '@svelte-toolkit/validate':
-        specifier: link:../validate
+        specifier: ^1.0.1
-        version: link:../validate
+        version: 1.0.1(svelte@5.38.1)
       '@sveltejs/kit':
         specifier: ^2.20.2
         version: 2.28.0(@sveltejs/vite-plugin-svelte@5.1.1(svelte@5.38.1)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)))(svelte@5.38.1)(vite@6.3.5(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1))
@@ -517,6 +514,11 @@ packages:
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
+  '@svelte-toolkit/validate@1.0.1':
+    resolution: {integrity: sha512-KqyWc9m0nQwG7gay+hbHqwBFcUsb8q5+v7/wEwul7YedSEOwofK3XTLm5m9TSMm3djfhNSBJ+XER8E9YE8TDXA==, tarball: https://gitea.auvem.com/api/packages/svelte-toolkit/npm/%40svelte-toolkit%2Fvalidate/-/1.0.1/validate-1.0.1.tgz}
+    peerDependencies:
+      svelte: ^5.0.0
+
   '@sveltejs/acorn-typescript@1.0.5':
     resolution: {integrity: sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==}
     peerDependencies:
@@ -667,6 +669,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/google.maps@3.58.1':
+    resolution: {integrity: sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1937,6 +1942,11 @@ snapshots:
 
   '@standard-schema/spec@1.0.0': {}
 
+  '@svelte-toolkit/validate@1.0.1(svelte@5.38.1)':
+    dependencies:
+      '@types/google.maps': 3.58.1
+      svelte: 5.38.1
+
   '@sveltejs/acorn-typescript@1.0.5(acorn@8.15.0)':
     dependencies:
       acorn: 8.15.0
@@ -2086,6 +2096,8 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/google.maps@3.58.1': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/node@24.2.1':

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
-overrides:
+onlyBuiltDependencies:
-  '@svelte-toolkit/validate': link:../validate
+  - '@tailwindcss/oxide'
+  - esbuild

src/lib/Banner.svelte

@@ -38,6 +38,8 @@
 			  })
 			| null;
 		dismiss?: Omit<BannerControlButton, 'framed'> | null;
+		/** if true, accept and decline buttons are swapped with more info */
+		swap?: boolean | null;
 	};
 
 	const defaultBannerControls: BannerControls = {
@@ -53,21 +55,8 @@
 		},
 		dismiss: {
 			action: (banner) => banner.close()
-		}
+		},
-	};
+		swap: false
-
-	const mergeBannerControls = (
-		defaults: BannerControls,
-		overrides: BannerControls | null | undefined
-	): BannerControls => {
-		if (!overrides) return defaults;
-
-		return {
-			accept: overrides.accept ?? defaults.accept,
-			decline: overrides.decline ?? defaults.decline,
-			moreInfo: overrides.moreInfo ?? defaults.moreInfo,
-			dismiss: overrides.dismiss ?? defaults.dismiss
-		};
 	};
 </script>
 
@@ -78,6 +67,7 @@
 	import Button from './Button.svelte';
 	import FramelessButton from './FramelessButton.svelte';
 	import { X } from 'phosphor-svelte';
+	import { mergeOverrideObject } from './util';
 
 	/**
 	 * Banner provides a simple component to display a banner message with
@@ -114,7 +104,7 @@
 		children
 	}: Props = $props();
 
-	const controls = $derived(mergeBannerControls(defaultBannerControls, rawControls));
+	const controls = $derived(mergeOverrideObject(defaultBannerControls, rawControls));
 
 	const api: BannerAPI = {
 		open: () => (open = true),
@@ -157,6 +147,7 @@
 					<FramelessButton
 						inverted={invertFrameless}
 						onclick={() => controls.dismiss?.action?.(api)}
+						class="ml-auto"
 					>
 						{#if controls.dismiss?.label}
 							{controls.dismiss.label}
@@ -170,7 +161,9 @@
 		{@render children?.()}
 
 		{#if controls !== null}
-			<div class="mt-4 flex flex-wrap justify-between gap-4">
+			<div
+				class={['mt-4 flex flex-wrap justify-between gap-4', controls.swap && 'flex-row-reverse']}
+			>
 				<!-- More info button/link -->
 				{#if controls.moreInfo}
 					{#if controls.moreInfo.type === 'link' && controls.moreInfo.href}
@@ -199,7 +192,9 @@
 					{/if}
 				{/if}
 
-				<div class="flex justify-end gap-4">
+				<div
+					class={['flex justify-end gap-4', controls.swap ? 'mr-auto flex-row-reverse' : 'ml-auto']}
+				>
 					<!-- Decline button -->
 					{@render buttonControl(controls.decline, handleDecline, false)}
 					<!-- Accept button -->

src/lib/Dialog.svelte

@@ -41,24 +41,29 @@
 		title: (title: string) => void;
 	}
 
+	type DialogControlButton = {
+		label?: string;
+		class?: ClassValue;
+		action?: (dialog: DialogAPI) => void;
+	};
+
 	/**
 	 * Configures the default dialog controls.
 	 */
-	export type DialogControlOpts = {
+	export type DialogControls = {
-		cancel?: {
+		cancel?: DialogControlButton | null;
-			label?: string;
+		ok?: DialogControlButton | null;
-			class?: ClassValue;
+		close?: Omit<DialogControlButton, 'label'> | null;
-			action?: (dialog: DialogAPI) => void;
+	};
-		};
+
-		ok?: {
+	const defaultDialogControls: DialogControls = {
-			label?: string;
+		cancel: {
-			class?: ClassValue;
+			label: 'Cancel'
-			action?: (dialog: DialogAPI) => void;
+		},
-		};
+		ok: {
-		close?: {
+			label: 'OK'
-			class?: ClassValue;
+		},
-			action?: (dialog: DialogAPI) => void;
+		close: {}
-		};
 	};
 </script>
 
@@ -72,6 +77,7 @@
 	import { X } from 'phosphor-svelte';
 	import { ErrorMessage, type RawError } from './error';
 	import ErrorBox from './ErrorBox.svelte';
+	import { mergeOverrideObject } from './util';
 
 	interface Props {
 		open?: boolean;
@@ -80,7 +86,7 @@
 		size?: 'sm' | 'md' | 'lg' | 'max';
 		class?: ClassValue;
 		children?: Snippet;
-		controls?: Snippet | DialogControlOpts;
+		controls?: Snippet | DialogControls;
 		onopen?: (dialog: DialogAPI) => void;
 		onclose?: (dialog: DialogAPI) => void;
 		loading?: boolean;
@@ -95,7 +101,7 @@
 		size = 'sm',
 		class: classValue,
 		children,
-		controls,
+		controls: rawControls = defaultDialogControls,
 		onopen,
 		onclose,
 		loading = $bindable(false),
@@ -103,6 +109,12 @@
 		disabled = $bindable(false)
 	}: Props = $props();
 
+	let controls = $derived(
+		typeof rawControls === 'function'
+			? rawControls
+			: mergeOverrideObject(defaultDialogControls, rawControls)
+	);
+
 	let dialogContainer = $state<HTMLDivElement | null>(null);
 	let error = $state<ErrorMessage | null>(null);
 
@@ -192,49 +204,62 @@
 
 			{#if children}{@render children()}{:else}Dialog is empty{/if}
 
+			<!-- Dialog Controls -->
 			<div class="mt-6 flex justify-end gap-4">
 				{#if controls && typeof controls === 'function'}{@render controls()}{:else}
-					<Button
+					{#if controls.cancel !== null}
-						class={controls?.cancel?.class}
+						<Button
-						onclick={() => {
+							class={controls?.cancel?.class}
-							if (controls?.cancel?.action) {
+							onclick={() => {
-								controls.cancel.action(dialogAPI);
+								if (controls?.cancel?.action) {
-							} else if (!frozen) {
+									controls.cancel.action(dialogAPI);
-								open = false;
+								} else if (!frozen) {
-							}
+									open = false;
-						}}
+								}
-						disabled={frozen}
+							}}
-					>
+							disabled={frozen}
-						{controls?.cancel?.label || 'Cancel'}
+						>
-					</Button>
+							{controls?.cancel?.label || 'Cancel'}
-					<Button
+						</Button>
-						class={controls?.ok?.class}
+					{/if}
-						onclick={() => {
+					{#if controls.ok !== null}
-							if (controls?.ok?.action) {
+						<Button
-								controls.ok.action(dialogAPI);
+							class={controls?.ok?.class}
-							} else if (!frozen && !loading && !disabled) {
+							onclick={() => {
-								open = false;
+								if (controls?.ok?.action) {
-							}
+									controls.ok.action(dialogAPI);
-						}}
+								} else if (!frozen && !loading && !disabled) {
-						disabled={frozen || loading || disabled}
+									open = false;
-						{loading}
+								}
-					>
+							}}
-						{controls?.ok?.label || 'OK'}
+							disabled={frozen || loading || disabled}
-					</Button>
+							{loading}
+						>
+							{controls?.ok?.label || 'OK'}
+						</Button>
+					{/if}
 				{/if}
 			</div>
-			<button
+
-				type="button"
+			<!-- Close Button -->
-				aria-label="close"
+			{#if typeof controls === 'function' || controls?.close !== null}
-				class="absolute top-4 right-4 inline-flex cursor-pointer items-center
+				<button
+					type="button"
+					aria-label="close"
+					class="absolute top-4 right-4 inline-flex cursor-pointer items-center
 				justify-center disabled:cursor-not-allowed disabled:opacity-50"
-				onclick={() => {
+					onclick={() => {
-					if (!frozen) open = false;
+						if (typeof controls !== 'function' && controls?.close?.action) {
-				}}
+							controls?.close?.action?.(dialogAPI);
-				disabled={frozen}
+						} else if (!frozen) {
-			>
+							open = false;
-				<X size="1.5em" weight="bold" />
+						}
-			</button>
+					}}
+					disabled={frozen}
+				>
+					<X size="1.5em" weight="bold" />
+				</button>
+			{/if}
 		</div>
 	</div>
 {/snippet}

src/lib/ErrorBox.svelte

@@ -1,18 +1,28 @@
 <script lang="ts">
 	import type { ClassValue } from 'svelte/elements';
-	import type { ErrorMessage } from './error';
+	import { ErrorMessage, type RawError } from './error';
 
 	interface Props {
-		error: ErrorMessage | null;
+		/** Error in the form of an ErrorMessage */
+		error?: ErrorMessage | null;
+		/** Raw error that can be converted to an ErrorMessage */
+		rawError?: RawError | null;
+		/** Additional CSS classes for the error box */
 		class?: ClassValue | null;
 	}
 
-	let { error, class: classValue }: Props = $props();
+	let { error, rawError, class: classValue }: Props = $props();
+
+	let errorMessage = $derived.by(() => {
+		if (error) return error;
+		if (rawError) return new ErrorMessage(rawError);
+	});
 </script>
 
-{#if error}
+{#if errorMessage && errorMessage.hasError()}
-	<!-- eslint-disable svelte/no-at-html-tags -->
 	<div class={['bg-sui-accent text-sui-background my-4 rounded-xs px-6 py-4', classValue]}>
-		{@html error.message}
+		{#each errorMessage.lines as line}
+			<p>{line}</p>
+		{/each}
 	</div>
 {/if}

src/lib/ScrollBox.svelte

@@ -0,0 +1,28 @@
+<!-- @component
+ScrollBox provides a small convenience wrapper for creating a scrollable container.
+This component expects to be used as a direct child of a flex container that typically
+has a constrained height. It applies the necessary CSS styles to ensure that its content
+can scroll properly and that the container expands to the maximum available space within
+the parent flexbox. Typically, a parent might have these Tailwind classes applied:
+`flex h-full`
+
+More complex layouts that should not expand to fill all available space should use
+a custom container with `overflow-auto` and an intentionally constrained height.
+-->
+
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		/** Applies ui-layout-px padding to the scrollable content area (default: false) */
+		padded?: boolean;
+		class?: ClassValue;
+		children?: import('svelte').Snippet;
+	}
+
+	let { padded = false, class: classValue, children }: Props = $props();
+</script>
+
+<div class={['min-h-0 min-w-0 flex-1 overflow-auto', padded && 'p-layout', classValue]}>
+	{@render children?.()}
+</div>

src/lib/StateMachine.svelte

@@ -40,7 +40,7 @@
 	import { tweened } from 'svelte/motion';
 	import { fade, fly } from 'svelte/transition';
 	import { validateForm } from '@svelte-toolkit/validate';
-	import { ArrowLeft, Check, CheckFat } from 'phosphor-svelte';
+	import { ArrowLeft, CheckFat } from 'phosphor-svelte';
 	import type { IconDef } from './util';
 
 	interface Props {
@@ -49,6 +49,13 @@
 		failure: StateMachinePage;
 		index?: number;
 		action?: string;
+		/**
+		 * Called when the form is submitted at the end of the state machine.
+		 * Receives the collated form data as a key-value object.
+		 * If you wish to prevent the submission, return false.
+		 * If you wish to indicate a failure, you can also throw an error.
+		 */
+		onsubmit?: (data: Record<string, string>) => Promise<boolean> | boolean;
 	}
 
 	let {
@@ -57,7 +64,8 @@
 		success,
 		failure,
 		index = $bindable(0),
-		action
+		action,
+		onsubmit
 	}: Props = $props();
 
 	// add success and failure pages to the end of the pages array
@@ -250,6 +258,22 @@
 		// update button state
 		buttonLoading = true;
 
+		if (onsubmit) {
+			try {
+				const res = await onsubmit(collatedFormData);
+				if (res === false) {
+					buttonLoading = false;
+					index = pages.length - 2;
+					return;
+				}
+			} catch (e) {
+				console.log('onsubmit handler failed, submission prevented', e);
+				buttonLoading = false;
+				index = pages.length - 1;
+				return;
+			}
+		}
+
 		const form_data = new FormData();
 		for (const [key, value] of Object.entries(collatedFormData)) {
 			form_data.append(key, value);

src/lib/Tabs.svelte

@@ -1,3 +1,8 @@
+<!--
+	Documents the purpose, API, and usage details of the selected component.
+	Include key props, expected behavior, and any important notes for consumers.
+-->
+
 <script lang="ts" module>
 	export type TabPage = {
 		title: string;
@@ -14,12 +19,16 @@
 
 	interface Props {
 		pages: TabPage[];
+		/** Currently active tab index (default: 0) */
 		activeIndex?: number;
+		/** Callback fired when the active tab changes */
 		onchange?: (event: { index: number; tab: TabPage }) => void;
+		/** Applies layout padding to the tab header & content areas (default: false) */
+		padded?: boolean;
 		class?: ClassValue | null;
 	}
 
-	let { pages, activeIndex = 0, onchange, class: classValue }: Props = $props();
+	let { pages, activeIndex = 0, onchange, padded = false, class: classValue }: Props = $props();
 
 	let primaryContainerEl: HTMLDivElement;
 	let tabContainerEl: HTMLDivElement;
@@ -88,7 +97,10 @@
 <div bind:this={primaryContainerEl} class={[classValue]}>
 	<div
 		bind:this={tabContainerEl}
-		class={['border-sui-text/15 relative mb-4 flex items-center gap-5 border-b-2']}
+		class={[
+			'border-sui-text/15 relative mb-4 flex items-center gap-5 border-b-2',
+			padded && 'px-layout'
+		]}
 	>
 		{#each pages as page, i (page.title)}
 			{@const active = activeIndex === i}
@@ -122,7 +134,7 @@
 
 	{#key activeIndex}
 		<div
-			class={[]}
+			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/TextInput.svelte

@@ -11,7 +11,7 @@
 		value?: string;
 		invalidMessage?: string | null;
 		ref?: HTMLInputElement | null;
-		asterisk?: boolean;
+		asterisk?: boolean | null;
 		class?: ClassValue | null | undefined;
 	}
 
@@ -21,12 +21,16 @@
 		value = $bindable(''),
 		invalidMessage = 'Field is required',
 		ref = $bindable<HTMLInputElement | null>(null),
-		asterisk = false,
+		asterisk = null,
 		class: classValue,
+		forceInvalid = false,
 		...others
 	}: Props = $props();
 
 	let valid: boolean = $state(true);
+	let displayAsterisk = $derived(
+		asterisk === true || (asterisk !== false && others.validate && others.validate.required)
+	);
 
 	export const focus = () => {
 		if (ref) ref.focus();
@@ -37,7 +41,7 @@
 	{#if label}
 		<Label for={id}>
 			{label}
-			{#if asterisk}
+			{#if displayAsterisk}
 				<span class="text-red-500">*</span>
 			{/if}
 		</Label>
@@ -50,11 +54,12 @@
 		onvalidate={(e) => {
 			valid = e.detail.valid;
 		}}
+		{forceInvalid}
 		{...others}
 	/>
 
 	{#if others.validate && invalidMessage !== null}
-		<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
+		<div class={['opacity-0 transition-opacity', (!valid || forceInvalid) && 'opacity-100']}>
 			<Label for={id} error>
 				{invalidMessage}
 			</Label>

src/lib/error.ts

@@ -10,20 +10,41 @@ export interface GraphError {
 export type RawError = Error | string | GraphError[];
 
 export class ErrorMessage {
-	private _message: string;
+	private _lines: string[] = [];
 
-	/** converts a RawError to a string and stores it for later access */
+	/**
-	constructor(raw: RawError) {
+	 * Converts a RawError to an array of lines and stores it for later access,
-		this._message = ErrorMessage.rawErrorToString(raw);
+	 * or initializes without any errors if the input is null or undefined.
+	 * @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(raw: RawError | null | undefined) {
+		if (raw) {
+			this._lines = ErrorMessage.rawErrorToLines(raw);
+		}
 	}
 
-	/** returns the stored message */
+	/** returns the stored lines */
-	get message(): string {
+	get lines(): string[] {
-		return this._message;
+		return this._lines;
 	}
-	/** returns the error as a string */
+	/** returns the error lines as a string, separated by newlines */
 	toString(): string {
-		return this._message;
+		return this._lines.join('\n');
+	}
+	/** returns the error lines as an HTML string, separated by <br /> */
+	toHTML(): string {
+		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 */
@@ -32,28 +53,27 @@ export class ErrorMessage {
 		return new ErrorMessage(raw);
 	}
 
-	/** converts a RawError to a string */
+	/** converts a RawError to an array of lines */
-	static rawErrorToString(raw: RawError | null | undefined): string {
+	static rawErrorToLines(raw: RawError | null | undefined): string[] {
-		if (!raw) return 'No error';
+		if (!raw) return ['No error'];
 
-		let errorString: string;
+		let errorLines: string[];
 		if (typeof raw === 'string') {
-			errorString = raw;
+			errorLines = [raw];
 		} else if (raw instanceof Error) {
-			errorString = raw.message;
+			errorLines = [raw.message];
 		} else if (Array.isArray(raw)) {
-			errorString = raw
+			errorLines = raw.map((e) => {
-				.flatMap((e) => {
+				const messageString = e.message || 'Unknown error';
-					const messageString = e.message || 'Unknown error';
+				if (e.path && e.path.length > 0) {
-					if (e.path && e.path.length > 0) {
+					return `"${messageString}" at ${e.path.join('.')}`;
-						return `"${messageString}" at ${e.path.join('.')}`;
+				}
-					}
+				return messageString;
-				})
+			});
-				.join('<br />');
 		} else {
 			throw `Bad error value ${raw}`;
 		}
 
-		return errorString;
+		return errorLines;
 	}
 }

src/lib/index.ts

@@ -6,7 +6,7 @@ export { default as CenterBox } from './CenterBox.svelte';
 export { default as Checkbox, type CheckboxState } from './Checkbox.svelte';
 export { default as Combobox, type ComboboxOption } from './Combobox.svelte';
 export { default as DateInput } from './DateInput.svelte';
-export { default as Dialog, type DialogAPI, type DialogControlOpts } from './Dialog.svelte';
+export { default as Dialog, type DialogAPI, type DialogControls } from './Dialog.svelte';
 export {
 	default as DurationInput,
 	formatDuration,
@@ -23,6 +23,7 @@ export { default as Link, rewriteHref } from './Link.svelte';
 export { default as PhoneInput } from './PhoneInput.svelte';
 export { default as PinInput } from './PinInput.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as ScrollBox } from './ScrollBox.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export { default as StateMachine, type StateMachinePage } from './StateMachine.svelte';
 export { default as StyledRawInput } from './StyledRawInput.svelte';

src/lib/styles/base.css

@@ -17,6 +17,15 @@
 		monospace
 	);
 
+	/* Layout Controls */
+	--spacing-layout: calc(var(--spacing) * var(--ui-layout-gap, 4));
+	--spacing-layout-2x: calc(var(--spacing-layout) * 2);
+
+	/** TODO: Refine colors so we can pick more intent-based colors, perhaps on a per-component level???
+		Perhaps it's best to just wrap those individual components and apply classes there instead of
+		bloating the base styles with too many color variables?
+	*/
+
 	/* Primary Colors */
 	--color-sui-primary-50: var(--ui-primary-50, #f0f8fe);
 	--color-sui-primary-100: var(--ui-primary-100, #ddeefc);

src/lib/util.ts

@@ -143,3 +143,55 @@ export const trimEdges = (str: string, char: string, trimStart?: boolean, trimEn
 
 	return str.substring(start, end);
 };
+
+// helper: only treat plain objects as mergeable
+const isPlainObject = (v: unknown): v is Record<string, unknown> =>
+	typeof v === 'object' &&
+	v !== null &&
+	!Array.isArray(v) &&
+	Object.getPrototypeOf(v) === Object.prototype;
+
+/** Merge two plain object maps. No `any` used. */
+function mergePlainObjects(
+	baseObj: Record<string, unknown>,
+	overrideObj: Record<string, unknown>
+): Record<string, unknown> {
+	const res: Record<string, unknown> = { ...baseObj };
+
+	for (const k of Object.keys(overrideObj)) {
+		const v = overrideObj[k];
+		if (v === undefined) continue; // undefined preserves base
+		const b = res[k];
+
+		if (isPlainObject(v) && isPlainObject(b)) {
+			res[k] = mergePlainObjects(b as Record<string, unknown>, v as Record<string, unknown>);
+		} else {
+			// primitives, null, arrays, non-plain objects replace base
+			res[k] = v;
+		}
+	}
+
+	return res;
+}
+
+/**
+ * Merge `base` with `override`.
+ * - `null` in `override` replaces (kept as valid override)
+ * - `undefined` in `override` is ignored (keeps base)
+ * - Only plain objects are deep-merged
+ * - If `override` is null/undefined we return a shallow copy of `base`
+ */
+export const mergeOverrideObject = <T extends Record<string, unknown>>(
+	base: T,
+	override?: Partial<T> | null
+): T => {
+	if (override == null) return { ...base } as T;
+
+	// Use plain maps internally to avoid explicit any
+	const baseMap = { ...base } as Record<string, unknown>;
+	const overrideMap = override as Record<string, unknown>;
+
+	const merged = mergePlainObjects(baseMap, overrideMap);
+
+	return merged as T;
+};

src/routes/+page.svelte

@@ -83,7 +83,9 @@
 <Banner
 	title="Manage Cookies"
 	controls={{
-		moreInfo: { label: 'More Info', type: 'link', href: '#!' }
+		moreInfo: { label: 'More Info', type: 'link', href: '#!' },
+		dismiss: null,
+		swap: true
 	}}
 	onaccept={() => console.log('Cookies accepted!')}
 	ondecline={() => console.log('Cookies declined!')}
@@ -427,6 +429,7 @@
 	<p class="title">Tabs</p>
 
 	<Tabs
+		padded={true}
 		pages={[
 			{
 				title: 'Dashboard',
@@ -521,7 +524,8 @@
 				dialog.close();
 				alert('Dialog submitted!');
 			}
-		}
+		},
+		cancel: null
 	}}
 	onopen={(dialog) => {
 		dialog.error('Example error message!');