@websline/system-components 1.5.0 → 1.5.1

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

@@ -4,6 +4,7 @@
 
 	/**
 	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @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
@@ -18,6 +19,7 @@
 
 	/** @type {Props} */
 	let {
+		children,
 		class: className = "",
 		durationInSeconds = 6,
 		message = "",
@@ -48,4 +50,5 @@
 		{/if}
 	</div>
 	<p class={styles.message()}>{message}</p>
+	{@render children?.()}
 </div>

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

@@ -4,6 +4,10 @@ type Toast = {
     $set?(props: Partial<Props>): void;
 };
 declare const Toast: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
@@ -26,6 +30,10 @@ declare const Toast: import("svelte").Component<{
     variant?: "error" | "loading" | "info" | undefined;
 }, {}, "">;
 type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */

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

@@ -2,7 +2,7 @@ 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",
+		base: "dark 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",
 	},

package/dist/components/organisms/dialog/DialogAction.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { Dialog } from "bits-ui";
 	import { Button } from "../../../index.js";
 
 	/**
@@ -58,15 +57,12 @@
 	);
 </script>
 
-<Dialog.Close
+<Button
 	class={className}
 	color="secondary"
 	data-role={role}
 	size="large"
-	{...rest}>
-	{#snippet child({ props })}
-		<Button {...props} onkeydown={null} {...buttonProps}>
-			{@render children?.()}
-		</Button>
-	{/snippet}
-</Dialog.Close>
+	{...rest}
+	{...buttonProps}>
+	{@render children?.()}
+</Button>

package/dist/components/organisms/dialog/DialogActions.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { FormActions } from "../../../index.js";
+	import { Dialog } from "bits-ui";
 	import { dialogVariants } from "./dialog.variants.js";
 
 	/**
@@ -14,6 +15,20 @@
 	let styles = $derived(dialogVariants());
 </script>
 
-<FormActions class={styles.formActions({ class: className })} customLayout {...rest}>
-	{@render children?.()}
-</FormActions>
+<Dialog.Close>
+	{#snippet child({ props: { onclick } })}
+		<FormActions
+			class={styles.formActions({ class: className })}
+			customLayout
+			onclick={(e) => {
+				if (e.button === 0 && e.target.role && e.target.tagName === "BUTTON") {
+					// Auto-close on main device-button click on UI-button with role.
+					// Use e.stopPropagation() on action click handler to prevent this.
+					onclick(e);
+				}
+			}}
+			{...rest}>
+			{@render children?.()}
+		</FormActions>
+	{/snippet}
+</Dialog.Close>

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

@@ -56,7 +56,9 @@
 	};
 </script>
 
-<svelte:body onnotification:show={handleShow} />
+<svelte:body
+	onnotification:close={({ detail: id }) => handleClose(id)}
+	onnotification:show={handleShow} />
 
 {#snippet column(position, x = 0, y = 0)}
 	{@const items = [...data.values()].filter((item) => item.position === position)}
@@ -66,7 +68,12 @@
 			position,
 			zOrder: zOrder.findIndex((key) => key === position),
 		})}>
-		{#each items as { id, el, props }, i (id)}
+		{#each items as { id, el: Comp, props }, i (id)}
+			{@const finalProps = {
+				...props,
+				class: styles.item({ class: props.class }),
+				onClose: () => handleClose(id),
+			}}
 			<div
 				in:fly={{
 					x,
@@ -83,11 +90,11 @@
 					easing: cubicOut,
 				}}
 				onoutroend={data.size === 0 ? handleLastClose : null}>
-				{@render el?.({
-					...props,
-					class: styles.item({ class: props.class }),
-					onClose: () => handleClose(id),
-				})}
+				{#if Comp.name === "snippet"}
+					{@render Comp?.(finalProps)}
+				{:else}
+					<Comp {...finalProps} />
+				{/if}
 			</div>
 		{/each}
 	</div>

package/dist/utils/notification.d.ts

@@ -3,4 +3,4 @@ export namespace NOTIFICATION_POSITIONS {
     let BOTTOM_LEFT: string;
     let BOTTOM_RIGHT: string;
 }
-export function showNotification(el: any, position?: string, props?: {}): string;
+export function showNotification(el: any, position?: string, props?: {}): () => void;

package/dist/utils/notification.js

@@ -19,7 +19,13 @@ const showNotification = (
 		}),
 	);
 
-	return id;
+	return () => {
+		document.body.dispatchEvent(
+			new CustomEvent("notification:close", {
+				detail: id,
+			}),
+		);
+	};
 };
 
 export { NOTIFICATION_POSITIONS, showNotification };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "publishConfig": {
     "access": "public"
   },