@websline/system-components 1.4.8 → 1.5.1

package/dist/components/organisms/modal/ModalBody.svelte.d.ts

@@ -7,27 +7,27 @@ declare const ModalBody: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * If true, removes the default padding from the modal body
      */
-    noPadding?: boolean;
+    noPadding?: boolean | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * If true, removes the default padding from the modal body
      */
-    noPadding?: boolean;
+    noPadding?: boolean | undefined;
 };

package/dist/components/organisms/modal/ModalContent.svelte.d.ts

@@ -7,51 +7,51 @@ declare const ModalContent: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the modal should close when the Escape key is pressed
      */
-    closeOnEscape?: boolean;
+    closeOnEscape?: boolean | undefined;
     /**
      * Whether the modal should close when clicking outside of it
      */
-    closeOnOutsideClick?: boolean;
+    closeOnOutsideClick?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the overlay
      */
-    overlayClass?: string;
+    overlayClass?: string | undefined;
     /**
      * The maximum size of the modal content.
      */
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    size?: "full" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the modal should close when the Escape key is pressed
      */
-    closeOnEscape?: boolean;
+    closeOnEscape?: boolean | undefined;
     /**
      * Whether the modal should close when clicking outside of it
      */
-    closeOnOutsideClick?: boolean;
+    closeOnOutsideClick?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the overlay
      */
-    overlayClass?: string;
+    overlayClass?: string | undefined;
     /**
      * The maximum size of the modal content.
      */
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    size?: "full" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
 };

package/dist/components/organisms/modal/ModalHeader.svelte.d.ts

@@ -7,27 +7,27 @@ declare const ModalHeader: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether to show a close icon in the header
      */
-    showClose?: boolean;
+    showClose?: boolean | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether to show a close icon in the header
      */
-    showClose?: boolean;
+    showClose?: boolean | undefined;
 };

package/dist/components/organisms/modal/ModalTrigger.svelte.d.ts

@@ -7,11 +7,11 @@ declare const ModalTrigger: import("svelte").Component<{
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
 };

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/components/organisms/notificationGroup/NotificationGroup.svelte.d.ts

@@ -7,11 +7,11 @@ declare const NotificationGroup: import("svelte").Component<{
     /**
      * Additional CSS classes to apply to each notification column
      */
-    class?: string;
+    class?: string | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Additional CSS classes to apply to each notification column
      */
-    class?: string;
+    class?: string | undefined;
 };

package/dist/components/organisms/popover/Popover.svelte.d.ts

@@ -7,12 +7,12 @@ declare const Popover: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
 }, {}, "">;
 import { Popover } from "bits-ui";
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
 };

package/dist/components/organisms/popover/PopoverContent.svelte.d.ts

@@ -7,91 +7,91 @@ declare const PopoverContent: import("svelte").Component<{
     /**
      * The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.
      */
-    align?: "start" | "center" | "end";
+    align?: "end" | "start" | "center" | undefined;
     /**
      * The distance in pixels from the anchor to the floating element.
      */
-    alignOffset?: number;
+    alignOffset?: number | undefined;
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes for the content
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.
      */
-    preventScroll?: boolean;
+    preventScroll?: boolean | undefined;
     /**
      * Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
      */
-    portalDisabled?: boolean;
+    portalDisabled?: boolean | undefined;
     /**
      * Where to render the content when it is open. Defaults to the body.
      */
-    portalTarget?: string;
+    portalTarget?: string | undefined;
     /**
      * Whether to show a close button in the popover header.
      */
-    showClose?: boolean;
+    showClose?: boolean | undefined;
     /**
      * The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
      */
-    side?: "top" | "right" | "bottom" | "left";
+    side?: "bottom" | "left" | "right" | "top" | undefined;
     /**
      * The distance in pixels from the anchor to the floating element.
      */
-    sideOffset?: number;
+    sideOffset?: number | undefined;
     /**
      * The title text to display in the popover header.
      */
-    title?: string;
+    title?: string | undefined;
 }, {}, "">;
 type Props = {
     /**
      * The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.
      */
-    align?: "start" | "center" | "end";
+    align?: "end" | "start" | "center" | undefined;
     /**
      * The distance in pixels from the anchor to the floating element.
      */
-    alignOffset?: number;
+    alignOffset?: number | undefined;
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes for the content
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.
      */
-    preventScroll?: boolean;
+    preventScroll?: boolean | undefined;
     /**
      * Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
      */
-    portalDisabled?: boolean;
+    portalDisabled?: boolean | undefined;
     /**
      * Where to render the content when it is open. Defaults to the body.
      */
-    portalTarget?: string;
+    portalTarget?: string | undefined;
     /**
      * Whether to show a close button in the popover header.
      */
-    showClose?: boolean;
+    showClose?: boolean | undefined;
     /**
      * The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
      */
-    side?: "top" | "right" | "bottom" | "left";
+    side?: "bottom" | "left" | "right" | "top" | undefined;
     /**
      * The distance in pixels from the anchor to the floating element.
      */
-    sideOffset?: number;
+    sideOffset?: number | undefined;
     /**
      * The title text to display in the popover header.
      */
-    title?: string;
+    title?: string | undefined;
 };

package/dist/components/organisms/popover/PopoverTrigger.svelte.d.ts

@@ -7,11 +7,11 @@ declare const PopoverTrigger: import("svelte").Component<{
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
 };

package/dist/components/organisms/tooltip/Content.svelte.d.ts

@@ -7,51 +7,51 @@ declare const Content: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes for the content
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
      */
-    portalDisabled?: boolean;
+    portalDisabled?: boolean | undefined;
     /**
      * Where to render the content when it is open. Defaults to the body.
      */
-    portalTarget?: string;
+    portalTarget?: string | undefined;
     /**
      * The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
      */
-    side?: "top" | "right" | "bottom" | "left";
+    side?: "bottom" | "left" | "right" | "top" | undefined;
     /**
      * The distance in pixels from the anchor to the floating element.
      */
-    sideOffset?: number;
+    sideOffset?: number | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes for the content
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
      */
-    portalDisabled?: boolean;
+    portalDisabled?: boolean | undefined;
     /**
      * Where to render the content when it is open. Defaults to the body.
      */
-    portalTarget?: string;
+    portalTarget?: string | undefined;
     /**
      * The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
      */
-    side?: "top" | "right" | "bottom" | "left";
+    side?: "bottom" | "left" | "right" | "top" | undefined;
     /**
      * The distance in pixels from the anchor to the floating element.
      */
-    sideOffset?: number;
+    sideOffset?: number | undefined;
 };

package/dist/components/organisms/tooltip/Tooltip.svelte.d.ts

@@ -7,11 +7,11 @@ declare const Tooltip: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
 };

package/dist/components/organisms/tooltip/Trigger.svelte.d.ts

@@ -7,11 +7,11 @@ declare const Trigger: import("svelte").Component<{
     /**
      * Whether the tooltip should open on hover
      */
-    openOnHover?: boolean;
+    openOnHover?: boolean | undefined;
 } & Omit<import("bits-ui").DatePickerTriggerPropsWithoutHTML, "openOnHover">, {}, "">;
 type Props = {
     /**
      * Whether the tooltip should open on hover
      */
-    openOnHover?: boolean;
+    openOnHover?: boolean | undefined;
 };

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/dist/utils/theme.svelte.d.ts

@@ -1,6 +1,6 @@
 export namespace theme {
-    export let mode: any;
-    export let background: any;
+    export let mode: undefined;
+    export let background: undefined;
     export { backgrounds };
 }
 declare namespace backgrounds {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.4.8",
+  "version": "1.5.1",
   "publishConfig": {
     "access": "public"
   },
@@ -33,56 +33,56 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.22.2",
-    "@tiptap/extension-color": "^3.22.2",
-    "@tiptap/extension-highlight": "^3.22.2",
-    "@tiptap/extension-link": "^3.22.2",
-    "@tiptap/extension-placeholder": "^3.22.2",
-    "@tiptap/extension-text-align": "^3.22.2",
-    "@tiptap/extension-text-style": "^3.22.2",
-    "@tiptap/pm": "^3.22.2",
-    "@tiptap/starter-kit": "^3.22.2",
-    "bits-ui": "^2.17.2",
-    "dompurify": "^3.3.3",
+    "@tiptap/core": "^3.22.5",
+    "@tiptap/extension-color": "^3.22.5",
+    "@tiptap/extension-highlight": "^3.22.5",
+    "@tiptap/extension-link": "^3.22.5",
+    "@tiptap/extension-placeholder": "^3.22.5",
+    "@tiptap/extension-text-align": "^3.22.5",
+    "@tiptap/extension-text-style": "^3.22.5",
+    "@tiptap/pm": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
+    "bits-ui": "^2.18.1",
+    "dompurify": "^3.4.2",
     "tailwind-variants": "^3.2.2"
   },
   "peerDependencies": {
     "svelte": "^5.38.7"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.4",
+    "@eslint/compat": "^2.0.5",
     "@eslint/js": "^10.0.1",
-    "@storybook/addon-a11y": "^10.3.4",
-    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
     "@storybook/addon-svelte-csf": "^5.1.2",
-    "@storybook/sveltekit": "^10.3.4",
+    "@storybook/sveltekit": "^10.3.6",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.56.1",
+    "@sveltejs/kit": "^2.59.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.2.2",
-    "@types/node": "^25.5.2",
-    "@vitest/browser": "^4.1.3",
-    "eslint": "^10.2.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "@vitest/browser": "^4.1.5",
+    "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.3.4",
-    "eslint-plugin-svelte": "^3.17.0",
-    "globals": "^17.4.0",
+    "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-svelte": "^3.17.1",
+    "globals": "^17.6.0",
     "playwright": "^1.59.1",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "prettier-plugin-svelte": "^3.5.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
+    "prettier-plugin-tailwindcss": "^0.8.0",
     "publint": "^0.3.18",
-    "storybook": "^10.3.4",
-    "svelte": "^5.55.1",
-    "tailwindcss": "^4.2.2",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.6",
-    "vitest": "^4.1.3",
-    "vitest-browser-svelte": "^2.1.0"
+    "storybook": "^10.3.6",
+    "svelte": "^5.55.5",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vitest": "^4.1.5",
+    "vitest-browser-svelte": "^2.1.1"
   },
   "keywords": [
     "svelte"