banner: add control swap

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;
 	};
 
 	const defaultBannerControls: BannerControls = {
@@ -53,7 +55,8 @@
 		},
 		dismiss: {
 			action: (banner) => banner.close()
-		}
+		},
+		swap: false
 	};
 
 	const mergeBannerControls = (
@@ -66,7 +69,8 @@
 			accept: overrides.accept ?? defaults.accept,
 			decline: overrides.decline ?? defaults.decline,
 			moreInfo: overrides.moreInfo ?? defaults.moreInfo,
-			dismiss: overrides.dismiss ?? defaults.dismiss
+			dismiss: overrides.dismiss ?? defaults.dismiss,
+			swap: overrides.swap ?? defaults.swap
 		};
 	};
 </script>
@@ -171,7 +175,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}
@@ -200,7 +206,9 @@
 					{/if}
 				{/if}
 
-				<div class="ml-auto 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,8 @@
 <Banner
 	title="Manage Cookies"
 	controls={{
-		moreInfo: { label: 'More Info', type: 'link', href: '#!' }
+		moreInfo: { label: 'More Info', type: 'link', href: '#!' },
+		swap: true
 	}}
 	onaccept={() => console.log('Cookies accepted!')}
 	ondecline={() => console.log('Cookies declined!')}