0.3.4

package.json

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

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,40 @@
 		},
 		dismiss: {
 			action: (banner) => banner.close()
-		}
+		},
+		swap: false
 	};
 
 	const mergeBannerControls = (
 		defaults: BannerControls,
-		overrides: BannerControls | null | undefined
+		overrides?: BannerControls | null
 	): BannerControls => {
-		if (!overrides) return defaults;
+		if (overrides == null) return { ...defaults };
 
-		return {
-			accept: overrides.accept ?? defaults.accept,
-			decline: overrides.decline ?? defaults.decline,
-			moreInfo: overrides.moreInfo ?? defaults.moreInfo,
-			dismiss: overrides.dismiss ?? defaults.dismiss
-		};
+		const result: BannerControls = { ...defaults };
+
+		const keys: (keyof BannerControls)[] = ['accept', 'decline', 'moreInfo', 'dismiss', 'swap'];
+
+		for (const key of keys) {
+			const ov = overrides[key];
+			if (ov === null) {
+				// explicit disable
+				result[key] = null;
+				continue;
+			}
+			if (ov === undefined) continue; // keep default
+			if (key === 'swap') {
+				result.swap = ov as boolean;
+				continue;
+			}
+			// shallow merge individual control fields
+			result[key] = {
+				...(defaults[key] ?? {}),
+				...(ov as any)
+			} as any;
+		}
+
+		return result;
 	};
 </script>
 
@@ -157,6 +178,7 @@
 					<FramelessButton
 						inverted={invertFrameless}
 						onclick={() => controls.dismiss?.action?.(api)}
+						class="ml-auto"
 					>
 						{#if controls.dismiss?.label}
 							{controls.dismiss.label}
@@ -170,7 +192,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 +223,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/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!')}