@websline/system-components 1.3.25 → 1.3.26

package/dist/components/atoms/actions/closeButton/closeButton.variants.js

@@ -3,8 +3,8 @@ import { tv } from "../../../../utils/tailwind.js";
 const closeButtonVariants = tv({
 	slots: {
 		button:
-			"relative cursor-pointer overflow-hidden bg-white p-1 transition duration-200 select-none dark:bg-neutral-800 dark:text-white",
-		bar: "absolute inset-[0px] z-0 bg-gray-300 dark:bg-neutral-700",
+			"relative cursor-pointer overflow-hidden bg-neutral-100 p-1 text-neutral-700 transition duration-200 select-none dark:bg-neutral-900 dark:text-neutral-300",
+		bar: "absolute inset-0 z-0 bg-neutral-300 dark:bg-neutral-700",
 	},
 	variants: {
 		shape: {
@@ -12,7 +12,7 @@ const closeButtonVariants = tv({
 				button: "rounded-full",
 			},
 			square: {
-				button: "rounded-md",
+				button: "rounded-sm",
 			},
 		},
 	},

package/dist/components/atoms/actions/iconButton/IconButton.svelte

@@ -6,7 +6,7 @@
 	 * @typedef {Object} Props
 	 * @property {string} [as="button"] The HTML element to use for the button
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {"default" | "primary" | "secondary" | "success" | "danger" | "transparent"} [color="default"] Button color
+	 * @property {"default" | "primary" | "secondary" | "success" | "error" | "transparent"} [color="default"] Button color
 	 * @property {boolean} [disabled=false] Whether the button is disabled
 	 * @property {boolean} [loading=false] Whether the button is in a loading state, for example after a form submission
 	 * @property {string} [icon=""] Icon name

package/dist/components/atoms/actions/iconButton/IconButton.svelte.d.ts

@@ -15,7 +15,7 @@ declare const IconButton: import("svelte").Component<{
     /**
      * Button color
      */
-    color?: "default" | "primary" | "secondary" | "success" | "danger" | "transparent";
+    color?: "default" | "primary" | "secondary" | "success" | "error" | "transparent";
     /**
      * Whether the button is disabled
      */
@@ -61,7 +61,7 @@ type Props = {
     /**
      * Button color
      */
-    color?: "default" | "primary" | "secondary" | "success" | "danger" | "transparent";
+    color?: "default" | "primary" | "secondary" | "success" | "error" | "transparent";
     /**
      * Whether the button is disabled
      */

package/dist/components/atoms/actions/iconButton/iconButton.variants.js

@@ -73,13 +73,13 @@ const iconButtonVariants = tv({
 				"border-green-500 text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:border-green-500 dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
 		},
 		{
-			color: "danger",
+			color: "error",
 			variant: "filled",
 			class:
 				"bg-red-500 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-700",
 		},
 		{
-			color: "danger",
+			color: "error",
 			variant: "outlined",
 			class:
 				"border-red-500 text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:border-red-500 dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",

package/dist/components/atoms/input/input.variants.js

@@ -4,10 +4,10 @@ const inputVariants = tv({
 	extend: inputBaseVariant,
 	slots: {
 		adornmentStart:
-			"pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
+			"pointer-events-none shrink-0 body-small text-neutral-900 dark:text-neutral-200",
 		adornmentEnd:
-			"pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
-		base: "relative h-10",
+			"pointer-events-none shrink-0 body-small text-neutral-900 dark:text-neutral-200",
+		base: "flex h-10 items-center gap-2",
 		input:
 			"h-full w-full border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
 	},

package/dist/components/atoms/select/Select.svelte

@@ -4,6 +4,7 @@
 
 	/**
 	 * @typedef {Object} Props
+	 * @property {string|import("svelte").SvelteComponent|Function} [adornmentStart=""] Content to display at the start of the field (e.g., icon or text)
 	 * @property {"default" | "raised"} [buttonAppearance="default"] Appearance of the button variant
 	 * @property {"small" | "medium" | "large"} [buttonSize="medium"] Size of the button variant
 	 * @property {string} [class=""] Additional CSS classes for the select
@@ -19,6 +20,7 @@
 
 	/** @type {Props} */
 	let {
+		adornmentStart = "",
 		buttonAppearance = "default",
 		buttonSize = "medium",
 		class: className = "",
@@ -43,6 +45,7 @@
 			error: error ?? storeValues.error ?? false,
 			id: id ?? storeValues.id ?? "",
 			required: required ?? storeValues.required ?? false,
+			value: value ?? "",
 		};
 	});
 
@@ -50,32 +53,48 @@
 		selectVariants({
 			buttonAppearance,
 			buttonSize,
-			defaultValue: variant === "default" && (value === "" || value == null),
+			defaultValue: variant === "default" && localValues.value === "",
 			error: localValues.error,
 			variant,
 		}),
 	);
+
+	const setValue = (v) => (value = v);
 </script>
 
-<select
-	class={styles.base({ class: className, disabled: localValues.disabled })}
-	disabled={localValues.disabled}
-	id={localValues.id}
-	required={localValues.required}
-	bind:value
-	{...rest}>
-	{#if placeholder}
-		<option class={styles.option({ disabled: true })} hidden readonly value=""
-			>{placeholder}</option>
+<div class={styles.base({ class: className, disabled: localValues.disabled })}>
+	{#if adornmentStart}
+		<div class={styles.adornmentStart()}>
+			{#if typeof adornmentStart === "function"}
+				{@render adornmentStart()}
+			{:else}
+				{adornmentStart}
+			{/if}
+		</div>
 	{/if}
-	{#each options as { disabled, label, value: optValue } (optValue)}
-		<option
-			class={styles.option({ disabled })}
-			{disabled}
-			selected={value === optValue}
-			value={optValue}>{label}</option>
-	{/each}
-</select>
+	<select
+		class={styles.select()}
+		disabled={localValues.disabled}
+		id={localValues.id}
+		required={localValues.required}
+		bind:value={() => localValues.value, setValue}
+		{...rest}>
+		{#if placeholder}
+			<option
+				class={styles.option({ disabled: localValues.required })}
+				hidden={localValues.required}
+				readonly
+				value="">{placeholder}</option>
+		{/if}
+		{#each options as { disabled, label, value: optValue } (optValue)}
+			<option
+				class={styles.option({ disabled })}
+				{disabled}
+				selected={value === optValue}
+				value={optValue}>{label}</option>
+		{/each}
+	</select>
+</div>
 
 <style>
 	select {

package/dist/components/atoms/select/Select.svelte.d.ts

@@ -4,6 +4,10 @@ type Select = {
     $set?(props: Partial<Props>): void;
 };
 declare const Select: import("svelte").Component<{
+    /**
+     * Content to display at the start of the field (e.g., icon or text)
+     */
+    adornmentStart?: string | import("svelte").SvelteComponent | Function;
     /**
      * Appearance of the button variant
      */
@@ -54,6 +58,10 @@ declare const Select: import("svelte").Component<{
     variant?: "default" | "button";
 }, {}, "value">;
 type Props = {
+    /**
+     * Content to display at the start of the field (e.g., icon or text)
+     */
+    adornmentStart?: string | import("svelte").SvelteComponent | Function;
     /**
      * Appearance of the button variant
      */

package/dist/components/atoms/select/select.variants.d.ts

@@ -2,6 +2,7 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
     disabled: {
         false: {
             option: string;
+            select: string;
         };
         true: {
             option: string;
@@ -9,15 +10,19 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
     };
     variant: {
         default: {
+            adornmentStart: string;
             base: string;
         };
         button: {
+            adornmentStart: string;
             base: string;
         };
     };
 }, {
-    base: string[];
+    adornmentStart: string;
+    base: string;
     option: string[];
+    select: string[];
 }, undefined, {
     disabled: {
         true: {

package/dist/components/atoms/select/select.variants.js

@@ -3,29 +3,32 @@ import { inputBaseVariant, tv } from "../../../utils/tailwind.js";
 const selectVariants = tv({
 	extend: inputBaseVariant,
 	slots: {
-		base: [
-			"flex items-center",
-			"[&::picker(select)]:my-1 [&::picker(select)]:rounded-sm [&::picker(select)]:border-0 [&::picker(select)]:p-1",
-			"[&::picker-icon]:hidden",
-			"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
-			"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
-			"after:ml-auto after:size-5 after:shrink-0",
-			"[&:open]:after:rotate-180",
-		],
+		adornmentStart: "pointer-events-none shrink-0 body-small leading-[inherit]",
+		base: "flex items-center ui-select-label",
 		option: [
-			"flex rounded-sm p-2 ui-select-label",
+			"flex rounded-sm p-2",
 			"bg-white dark:bg-neutral-800",
 			"bg-linear-to-r to-transparent",
 			"[&::checkmark]:order-1 [&::checkmark]:ml-auto [&::checkmark]:shrink-0",
 			"[&::checkmark]:bg-current [&::checkmark]:bg-size-[100%] [&::checkmark]:bg-center [&::checkmark]:bg-no-repeat",
 			"[&::checkmark]:size-4 [&::checkmark]:content-['']",
 		],
+		select: [
+			"flex size-full items-center border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
+			"[&::picker(select)]:my-1 [&::picker(select)]:rounded-sm [&::picker(select)]:border-0 [&::picker(select)]:p-1",
+			"[&::picker-icon]:hidden",
+			"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
+			"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
+			"after:ml-auto after:size-5 after:shrink-0",
+			"[&:open]:after:rotate-180",
+		],
 	},
 	variants: {
 		disabled: {
 			false: {
 				option:
 					"cursor-pointer text-neutral-900 hover:from-black/15 dark:text-neutral-200 dark:hover:from-white/15",
+				select: "cursor-pointer",
 			},
 			true: {
 				option: "text-neutral-500 dark:text-neutral-500 [&::checkmark]:hidden",
@@ -33,9 +36,11 @@ const selectVariants = tv({
 		},
 		variant: {
 			default: {
-				base: "min-h-10 border border-neutral-300 pr-2 pl-4",
+				adornmentStart: "text-neutral-900 dark:text-neutral-200",
+				base: "min-h-10 gap-2 border border-neutral-300 pr-2 pl-4",
 			},
 			button: {
+				adornmentStart: "text-neutral-500",
 				base: "gap-0.5 border-none bg-white pr-1 pl-2 leading-5 ring-transparent! dark:bg-neutral-800",
 			},
 		},
@@ -65,7 +70,7 @@ const selectVariants = tv({
 			variant: "button",
 			disabled: false,
 			class: {
-				base: "cursor-pointer focus-within:bg-neutral-300 hover:bg-neutral-300 focus:ring-2 focus:ring-blue-500 dark:focus-within:bg-neutral-600 dark:hover:bg-neutral-600",
+				base: "focus-within:bg-neutral-300 hover:bg-neutral-300 focus:ring-2 focus:ring-blue-500 dark:focus-within:bg-neutral-600 dark:hover:bg-neutral-600",
 			},
 		},
 		{

package/dist/components/molecules/{notification/Notification.svelte → notifications/systemAlert/SystemAlert.svelte}

@@ -1,15 +1,15 @@
 <script>
-	import { CloseButton, Icon } from "../../../index.js";
-	import { notificationVariants } from "./notification.variants.js";
+	import { CloseButton, Icon } from "../../../../index.js";
+	import { systemAlertVariants } from "./systemAlert.variants.js";
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {boolean} [autoClose=true] Whether to automatically close the notification after a duration
+	 * @property {boolean} [autoClose=true] Whether to automatically close the system alert after a duration
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {string} [icon=""] Icon to display in the notification
-	 * @property {string} [message=""] Message to display in the notification
-	 * @property {string} [title=""] Title to display in the notification
-	 * @property {"info" | "success" | "warning" | "danger"} [variant="info"] Notification variant
+	 * @property {string} [icon=""] Icon to display in the system alert
+	 * @property {string} [message=""] Message to display in the system alert
+	 * @property {string} [title=""] Title to display in the system alert
+	 * @property {"info" | "success" | "warning" | "error"} [variant="info"] System alert variant
 	 */
 
 	/** @type {Props} */
@@ -24,7 +24,7 @@
 		...rest
 	} = $props();
 
-	let styles = $derived(notificationVariants({ variant }));
+	let styles = $derived(systemAlertVariants({ variant }));
 </script>
 
 <div class={styles.base({ class: className })} {...rest}>

package/dist/components/molecules/notifications/systemAlert/SystemAlert.svelte.d.ts

@@ -0,0 +1,57 @@
+export default SystemAlert;
+type SystemAlert = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const SystemAlert: import("svelte").Component<{
+    /**
+     * Whether to automatically close the system alert after a duration
+     */
+    autoClose?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Icon to display in the system alert
+     */
+    icon?: string;
+    /**
+     * Message to display in the system alert
+     */
+    message?: string;
+    /**
+     * Title to display in the system alert
+     */
+    title?: string;
+    /**
+     * System alert variant
+     */
+    variant?: "info" | "success" | "warning" | "error";
+}, {}, "">;
+type Props = {
+    /**
+     * Whether to automatically close the system alert after a duration
+     */
+    autoClose?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Icon to display in the system alert
+     */
+    icon?: string;
+    /**
+     * Message to display in the system alert
+     */
+    message?: string;
+    /**
+     * Title to display in the system alert
+     */
+    title?: string;
+    /**
+     * System alert variant
+     */
+    variant?: "info" | "success" | "warning" | "error";
+};

package/dist/components/molecules/{notification/notification.variants.d.ts → notifications/systemAlert/systemAlert.variants.d.ts}

@@ -1,4 +1,4 @@
-export const notificationVariants: import("tailwind-variants").TVReturnType<{
+export const systemAlertVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         info: {
             icon: string;
@@ -9,7 +9,7 @@ export const notificationVariants: import("tailwind-variants").TVReturnType<{
         warning: {
             icon: string;
         };
-        danger: {
+        error: {
             icon: string;
         };
     };
@@ -31,7 +31,7 @@ export const notificationVariants: import("tailwind-variants").TVReturnType<{
         warning: {
             icon: string;
         };
-        danger: {
+        error: {
             icon: string;
         };
     };
@@ -53,7 +53,7 @@ export const notificationVariants: import("tailwind-variants").TVReturnType<{
         warning: {
             icon: string;
         };
-        danger: {
+        error: {
             icon: string;
         };
     };

package/dist/components/molecules/{notification/notification.variants.js → notifications/systemAlert/systemAlert.variants.js}

@@ -1,13 +1,13 @@
-import { tv } from "../../../utils/tailwind.js";
+import { tv } from "../../../../utils/tailwind.js";
 
-const notificationVariants = tv({
+const systemAlertVariants = tv({
 	slots: {
-		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
+		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border border-neutral-200 bg-white/90 p-2 backdrop-blur-sm dark:border-neutral-700 dark:bg-neutral-800/90",
 		close: "col-3 self-start",
 		icon: "flex h-10 w-10 items-center justify-center rounded-sm text-white",
 		content: "flex flex-col justify-center",
 		message: "ui-caption-helper text-neutral-500",
-		title: "body-small dark:text-white",
+		title: "body-small dark:text-neutral-200",
 	},
 	variants: {
 		variant: {
@@ -20,11 +20,11 @@ const notificationVariants = tv({
 			warning: {
 				icon: "bg-yellow-500",
 			},
-			danger: {
+			error: {
 				icon: "bg-red-500",
 			},
 		},
 	},
 });
 
-export { notificationVariants };
+export { systemAlertVariants };

package/dist/components/molecules/notifications/toast/Toast.svelte

@@ -0,0 +1,51 @@
+<script>
+	import { Icon, Spinner } from "../../../../index.js";
+	import { toastVariants } from "./toast.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {number} [durationInSeconds=6] Duration in seconds before auto-close triggers
+	 * @property {string} [message=""] Message to display in the toast
+	 * @property {(event) => void} [onClose] Function to call when the toast is auto-closed
+	 * @property {"info" | "loading" | "error"} [variant="info"] Toast variant
+	 */
+
+	const ICONS_BY_VARIANT = {
+		error: "closeSmall",
+		info: "check",
+	};
+
+	/** @type {Props} */
+	let {
+		class: className = "",
+		durationInSeconds = 6,
+		message = "",
+		onClose,
+		variant = "info",
+		...rest
+	} = $props();
+
+	let to;
+	let styles = $derived(toastVariants({ variant }));
+
+	$effect(() => {
+		clearTimeout(to);
+		if (variant !== "loading" && durationInSeconds > 0) {
+			to = setTimeout(() => {
+				onClose?.();
+			}, durationInSeconds * 1e3);
+		}
+	});
+</script>
+
+<div class={styles.base({ class: className })} {...rest}>
+	<div class={styles.icon()}>
+		{#if variant === "loading"}
+			<Spinner size="small" />
+		{:else}
+			<Icon name={ICONS_BY_VARIANT[variant]} size={24} />
+		{/if}
+	</div>
+	<p class={styles.message()}>{message}</p>
+</div>

package/dist/components/molecules/notifications/toast/Toast.svelte.d.ts

@@ -0,0 +1,49 @@
+export default Toast;
+type Toast = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Toast: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Duration in seconds before auto-close triggers
+     */
+    durationInSeconds?: number;
+    /**
+     * Message to display in the toast
+     */
+    message?: string;
+    /**
+     * Function to call when the toast is auto-closed
+     */
+    onClose?: (event: any) => void;
+    /**
+     * Toast variant
+     */
+    variant?: "info" | "loading" | "error";
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Duration in seconds before auto-close triggers
+     */
+    durationInSeconds?: number;
+    /**
+     * Message to display in the toast
+     */
+    message?: string;
+    /**
+     * Function to call when the toast is auto-closed
+     */
+    onClose?: (event: any) => void;
+    /**
+     * Toast variant
+     */
+    variant?: "info" | "loading" | "error";
+};

package/dist/components/molecules/notifications/toast/toast.variants.d.ts

@@ -0,0 +1,31 @@
+export const toastVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        error: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    message: string;
+}, undefined, {
+    variant: {
+        error: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    message: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        error: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    message: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/notifications/toast/toast.variants.js

@@ -0,0 +1,18 @@
+import { tv } from "../../../../utils/tailwind.js";
+
+const toastVariants = tv({
+	slots: {
+		base: "flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-neutral-200",
+		icon: "grid size-6 place-items-center",
+		message: "ui-select-label font-medium",
+	},
+	variants: {
+		variant: {
+			error: {
+				base: "bg-red-500",
+			},
+		},
+	},
+});
+
+export { toastVariants };

package/dist/components/organisms/notificationGroup/NotificationGroup.svelte

@@ -1,68 +1,100 @@
 <script>
-	import { onMount } from "svelte";
-	import { fly } from "svelte/transition";
+	import { settled } from "svelte";
 	import { cubicOut } from "svelte/easing";
-	import { Notification } from "../../../index.js";
+	import { fly } from "svelte/transition";
+	import { SvelteMap } from "svelte/reactivity";
+	import { NOTIFICATION_POSITIONS } from "../../../utils/notification.js";
 	import { notificationGroupVariants } from "./notificationGroup.variants.js";
 
-	onMount(() => {
-		document.body.addEventListener("notification:show", addNotification);
+	const MOVE_MS = 400;
+	const IN_MS = 220;
+	const STAGGER = MOVE_MS - 200;
 
-		return () => {
-			document.body.removeEventListener("notification:show", addNotification);
-		};
-	});
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to each notification column
+	 */
 
-	const addNotification = (e) => {
-		const { detail } = e;
+	/** @type {Props} */
+	let { class: className = "" } = $props();
 
-		if (detail.position === "bottom-left") {
-			dataBottomLeft.push(detail);
-		} else if (detail.position === "bottom-right") {
-			dataBottomRight.push(detail);
+	let data = new SvelteMap();
+	let showColumns = $state(false);
+
+	const zPoints = {};
+	let zOrder = $state([]);
+
+	let styles = $derived(notificationGroupVariants());
+
+	const handleShow = async (e) => {
+		if (!showColumns) {
+			showColumns = true;
+			await settled();
 		}
+
+		const { detail } = e;
+		data.set(detail.id, detail);
+
+		updateZOrder(detail.position);
 	};
 
-	let dataBottomLeft = $state([]);
-	let dataBottomRight = $state([]);
+	const handleClose = (id) => {
+		data.delete(id);
+	};
 
-	let { bottomLeft, bottomRight } = $derived(notificationGroupVariants());
+	const handleLastClose = () => {
+		showColumns = false;
+	};
 
-	const MOVE_MS = 400;
-	const IN_MS = 220;
-	const STAGGER = MOVE_MS - 200;
+	// ensure the column with the latest update is on top
+	const updateZOrder = (topPosition) => {
+		zPoints[topPosition] = Date.now();
 
-	const handleClose = (id, position) => {
-		if (position === "bottom-left") {
-			const index = dataBottomLeft.findIndex((n) => n.id === id);
-			if (index !== -1) dataBottomLeft.splice(index, 1);
-		} else if (position === "bottom-right") {
-			const index = dataBottomRight.findIndex((n) => n.id === id);
-			if (index !== -1) dataBottomRight.splice(index, 1);
-		}
+		zOrder = Object.entries(zPoints)
+			.sort(([, aTs], [, bTs]) => aTs - bTs)
+			.map(([key]) => key);
 	};
 </script>
 
-{#each [{ data: dataBottomLeft, class: bottomLeft(), x: -32, position: "bottom-left" }, { data: dataBottomRight, class: bottomRight(), x: 32, position: "bottom-right" }] as { data, class: cls, x, position }, idx (idx)}
-	<div class={cls}>
-		{#each data as item, i (item.id)}
+<svelte:body onnotification:show={handleShow} />
+
+{#snippet column(position, x = 0, y = 0)}
+	{@const items = [...data.values()].filter((item) => item.position === position)}
+	<div
+		class={styles.base({
+			class: className,
+			position,
+			zOrder: zOrder.findIndex((key) => key === position),
+		})}>
+		{#each items as { id, el, props }, i (id)}
 			<div
 				in:fly={{
 					x,
-					y: 0,
+					y,
 					duration: IN_MS,
-					delay: i === data.length - 1 ? STAGGER : 0,
+					delay: i === items.length - 1 ? STAGGER : 0,
 					easing: cubicOut,
 				}}
 				out:fly={{
 					x,
-					y: 0,
+					y,
 					duration: IN_MS,
-					delay: i === data.length - 1 ? STAGGER : 0,
+					delay: i === items.length - 1 ? STAGGER : 0,
 					easing: cubicOut,
-				}}>
-				<Notification {...item} onClose={() => handleClose(item.id, position)} />
+				}}
+				onoutroend={data.size === 0 ? handleLastClose : null}>
+				{@render el?.({
+					...props,
+					class: styles.item({ class: props.class }),
+					onClose: () => handleClose(id),
+				})}
 			</div>
 		{/each}
 	</div>
-{/each}
+{/snippet}
+
+{#if showColumns}
+	{@render column(NOTIFICATION_POSITIONS.BOTTOM_LEFT, -32)}
+	{@render column(NOTIFICATION_POSITIONS.BOTTOM_CENTER, 0, 32)}
+	{@render column(NOTIFICATION_POSITIONS.BOTTOM_RIGHT, 32)}
+{/if}

package/dist/components/organisms/notificationGroup/NotificationGroup.svelte.d.ts

@@ -1,6 +1,17 @@
 export default NotificationGroup;
 type NotificationGroup = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
+    $set?(props: Partial<Props>): void;
+};
+declare const NotificationGroup: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to each notification column
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to each notification column
+     */
+    class?: string;
 };
-declare const NotificationGroup: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/organisms/notificationGroup/notificationGroup.variants.d.ts

@@ -1,24 +1,79 @@
 export const notificationGroupVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            bottomLeft?: import("tailwind-variants").ClassValue;
-            bottomRight?: import("tailwind-variants").ClassValue;
+    position: {
+        bc: {
+            base: string;
+        };
+        bl: {
+            base: string;
+        };
+        br: {
+            base: string;
+        };
+    };
+    zOrder: {
+        0: {
+            base: string;
+        };
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+}, undefined, {
+    position: {
+        bc: {
+            base: string;
+        };
+        bl: {
+            base: string;
+        };
+        br: {
+            base: string;
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            bottomLeft?: import("tailwind-variants").ClassValue;
-            bottomRight?: import("tailwind-variants").ClassValue;
+    zOrder: {
+        0: {
+            base: string;
+        };
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        bc: {
+            base: string;
+        };
+        bl: {
+            base: string;
+        };
+        br: {
+            base: string;
+        };
+    };
+    zOrder: {
+        0: {
+            base: string;
+        };
+        1: {
+            base: string;
+        };
+        2: {
+            base: string;
         };
     };
 }, {
-    bottomLeft: string;
-    bottomRight: string;
-}, undefined, any, {
-    bottomLeft: string;
-    bottomRight: string;
-}, import("tailwind-variants").TVReturnType<any, {
-    bottomLeft: string;
-    bottomRight: string;
+    base: string;
+    item: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/organisms/notificationGroup/notificationGroup.variants.js

@@ -2,10 +2,20 @@ import { tv } from "../../../utils/tailwind.js";
 
 const notificationGroupVariants = tv({
 	slots: {
-		bottomLeft:
-			"absolute bottom-4 left-4 z-snackbar flex flex-col gap-2 overflow-hidden",
-		bottomRight:
-			"absolute right-4 bottom-4 z-snackbar flex flex-col gap-2 overflow-hidden",
+		base: "pointer-events-none fixed inset-x-0 bottom-0 flex flex-col gap-2 overflow-hidden p-4",
+		item: "pointer-events-auto max-w-xs shadow-sm",
+	},
+	variants: {
+		position: {
+			bc: { base: "items-center" },
+			bl: { base: "items-start" },
+			br: { base: "items-end" },
+		},
+		zOrder: {
+			0: { base: "z-10000" },
+			1: { base: "z-10001" },
+			2: { base: "z-10002" },
+		},
 	},
 });
 

package/dist/index.css

@@ -136,7 +136,7 @@
 	--font-body: "Borna", "sans-serif";
 	--font-sans: "Borna", sans-serif;
 
-	/* Box Shadows */
+	/* Box Shadows - NOTE: dark mode values defined bellow theme */
 
 	--shadow-sm: 0 2px 16px 0 rgba(0, 0, 0, 0.08);
 	--shadow-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
@@ -220,3 +220,11 @@
 	--color-green-800: #2f461a;
 	--color-green-900: #18230d;
 }
+
+@layer utilities {
+	&:where(.dark, .dark *) {
+		.shadow-sm {
+			--tw-shadow: 0 2px 16px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.24));
+		}
+	}
+}

package/dist/index.d.ts

@@ -26,10 +26,11 @@ export { default as ComboBox } from "./components/molecules/comboBox/ComboBox.sv
 export { default as FormActions } from "./components/molecules/formActions/FormActions.svelte";
 export { default as FormField } from "./components/molecules/formField/FormField.svelte";
 export { default as FormLayout } from "./components/molecules/formLayout/FormLayout.svelte";
-export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
 export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
+export { default as SystemAlert } from "./components/molecules/notifications/systemAlert/SystemAlert.svelte";
 export { default as TagSelector } from "./components/molecules/tagSelector/TagSelector.svelte";
+export { default as Toast } from "./components/molecules/notifications/toast/Toast.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
 export * as Dialog from "./components/organisms/dialog/index.js";

package/dist/index.js

@@ -36,10 +36,11 @@ export { default as ComboBox } from "./components/molecules/comboBox/ComboBox.sv
 export { default as FormActions } from "./components/molecules/formActions/FormActions.svelte";
 export { default as FormField } from "./components/molecules/formField/FormField.svelte";
 export { default as FormLayout } from "./components/molecules/formLayout/FormLayout.svelte";
-export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
 export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
+export { default as SystemAlert } from "./components/molecules/notifications/systemAlert/SystemAlert.svelte";
 export { default as TagSelector } from "./components/molecules/tagSelector/TagSelector.svelte";
+export { default as Toast } from "./components/molecules/notifications/toast/Toast.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
 

package/dist/utils/notification.d.ts

@@ -1 +1,6 @@
-export function showNotification(props: any): void;
+export namespace NOTIFICATION_POSITIONS {
+    let BOTTOM_CENTER: string;
+    let BOTTOM_LEFT: string;
+    let BOTTOM_RIGHT: string;
+}
+export function showNotification(el: any, position?: string, props?: {}): string;

package/dist/utils/notification.js

@@ -1,11 +1,25 @@
-import { v4 as uuidv4 } from "uuid";
+import { generateId } from "./a11y.js";
+
+const NOTIFICATION_POSITIONS = {
+	BOTTOM_CENTER: "bc",
+	BOTTOM_LEFT: "bl",
+	BOTTOM_RIGHT: "br",
+};
+
+const showNotification = (
+	el,
+	position = NOTIFICATION_POSITIONS.BOTTOM_LEFT,
+	props = {},
+) => {
+	const id = generateId();
 
-const showNotification = (props) => {
 	document.body.dispatchEvent(
 		new CustomEvent("notification:show", {
-			detail: { id: uuidv4(), ...props },
+			detail: { el, id, position, props },
 		}),
 	);
+
+	return id;
 };
 
-export { showNotification };
+export { NOTIFICATION_POSITIONS, showNotification };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.3.25",
+  "version": "1.3.26",
   "publishConfig": {
     "access": "public"
   },
@@ -33,18 +33,17 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.20.4",
-    "@tiptap/extension-color": "^3.20.4",
-    "@tiptap/extension-highlight": "^3.20.4",
-    "@tiptap/extension-placeholder": "^3.20.4",
-    "@tiptap/extension-text-align": "^3.20.4",
-    "@tiptap/extension-text-style": "^3.20.4",
-    "@tiptap/pm": "^3.20.4",
-    "@tiptap/starter-kit": "^3.20.4",
+    "@tiptap/core": "^3.20.5",
+    "@tiptap/extension-color": "^3.20.5",
+    "@tiptap/extension-highlight": "^3.20.5",
+    "@tiptap/extension-placeholder": "^3.20.5",
+    "@tiptap/extension-text-align": "^3.20.5",
+    "@tiptap/extension-text-style": "^3.20.5",
+    "@tiptap/pm": "^3.20.5",
+    "@tiptap/starter-kit": "^3.20.5",
     "bits-ui": "^2.16.3",
     "dompurify": "^3.3.3",
-    "tailwind-variants": "^3.2.2",
-    "uuid": "^13.0.0"
+    "tailwind-variants": "^3.2.2"
   },
   "peerDependencies": {
     "svelte": "^5.38.7"
@@ -52,10 +51,10 @@
   "devDependencies": {
     "@eslint/compat": "^2.0.3",
     "@eslint/js": "^10.0.1",
-    "@storybook/addon-a11y": "^10.3.0",
-    "@storybook/addon-docs": "^10.3.0",
-    "@storybook/addon-svelte-csf": "^5.0.12",
-    "@storybook/sveltekit": "^10.3.0",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-svelte-csf": "^5.1.0",
+    "@storybook/sveltekit": "^10.3.3",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
@@ -64,11 +63,11 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^25.5.0",
-    "@vitest/browser": "^4.1.0",
-    "eslint": "^10.0.3",
+    "@vitest/browser": "^4.1.1",
+    "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.3.0",
-    "eslint-plugin-svelte": "^3.15.2",
+    "eslint-plugin-storybook": "^10.3.3",
+    "eslint-plugin-svelte": "^3.16.0",
     "globals": "^17.4.0",
     "playwright": "^1.58.2",
     "postcss-url": "^10.1.3",
@@ -76,12 +75,12 @@
     "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.18",
-    "storybook": "^10.3.0",
-    "svelte": "^5.54.0",
+    "storybook": "^10.3.3",
+    "svelte": "^5.55.0",
     "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
-    "vite": "^8.0.1",
-    "vitest": "^4.1.0",
+    "vite": "^8.0.2",
+    "vitest": "^4.1.1",
     "vitest-browser-svelte": "^2.1.0"
   },
   "keywords": [

package/dist/components/molecules/notification/Notification.svelte.d.ts

@@ -1,57 +0,0 @@
-export default Notification;
-type Notification = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const Notification: import("svelte").Component<{
-    /**
-     * Whether to automatically close the notification after a duration
-     */
-    autoClose?: boolean;
-    /**
-     * Additional CSS classes to apply to the component
-     */
-    class?: string;
-    /**
-     * Icon to display in the notification
-     */
-    icon?: string;
-    /**
-     * Message to display in the notification
-     */
-    message?: string;
-    /**
-     * Title to display in the notification
-     */
-    title?: string;
-    /**
-     * Notification variant
-     */
-    variant?: "info" | "success" | "warning" | "danger";
-}, {}, "">;
-type Props = {
-    /**
-     * Whether to automatically close the notification after a duration
-     */
-    autoClose?: boolean;
-    /**
-     * Additional CSS classes to apply to the component
-     */
-    class?: string;
-    /**
-     * Icon to display in the notification
-     */
-    icon?: string;
-    /**
-     * Message to display in the notification
-     */
-    message?: string;
-    /**
-     * Title to display in the notification
-     */
-    title?: string;
-    /**
-     * Notification variant
-     */
-    variant?: "info" | "success" | "warning" | "danger";
-};