@websline/system-components 1.4.8 → 1.5.1

package/dist/components/molecules/comboBox/ComboBox.svelte.d.ts

@@ -7,89 +7,89 @@ declare const ComboBox: import("svelte").Component<{
     /**
      * Whether the input should be autofocused on mount
      */
-    autofocus?: boolean;
+    autofocus?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the component is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the component has an error state
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The ID of the input element
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The name of the input, used for form submission
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The available tag options
      */
-    options?: Array<{
+    options?: {
         id: string | number;
         label: string;
-    }>;
+    }[] | undefined;
     /**
      * The placeholder text for the input
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
      * Whether the component is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The currently selected tags, bound to the component
      */
-    value?: Array<string | number>;
+    value?: (string | number)[] | undefined;
 }, {}, "value">;
 type Props = {
     /**
      * Whether the input should be autofocused on mount
      */
-    autofocus?: boolean;
+    autofocus?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the component is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the component has an error state
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The ID of the input element
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The name of the input, used for form submission
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The available tag options
      */
-    options?: Array<{
+    options?: {
         id: string | number;
         label: string;
-    }>;
+    }[] | undefined;
     /**
      * The placeholder text for the input
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
      * Whether the component is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The currently selected tags, bound to the component
      */
-    value?: Array<string | number>;
+    value?: (string | number)[] | undefined;
 };

package/dist/components/molecules/formActions/FormActions.svelte.d.ts

@@ -7,35 +7,35 @@ declare const FormActions: 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, the default layout is disabled
      */
-    customLayout?: boolean;
+    customLayout?: boolean | undefined;
     /**
      * If true, the form actions will take the full width of its container
      */
-    fullWidth?: boolean;
+    fullWidth?: 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, the default layout is disabled
      */
-    customLayout?: boolean;
+    customLayout?: boolean | undefined;
     /**
      * If true, the form actions will take the full width of its container
      */
-    fullWidth?: boolean;
+    fullWidth?: boolean | undefined;
 };

package/dist/components/molecules/formField/FormField.svelte.d.ts

@@ -7,83 +7,83 @@ declare const FormField: 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 form field is disabled (passed down to the input)
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the form field has an error (passed down to the input)
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The error text for the form field
      */
-    errorText?: string;
+    errorText?: string | undefined;
     /**
      * The helper text for the form field
      */
-    helperText?: string;
+    helperText?: string | undefined;
     /**
      * The id attribute for the form field (passed down to the input)
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The label text for the form field
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * The layout of the input and label
      */
-    layout?: "stacked" | "inline" | "checkable";
+    layout?: "inline" | "stacked" | "checkable" | undefined;
     /**
      * Whether the form field is required (passed down to the input)
      */
-    required?: boolean;
+    required?: 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 the form field is disabled (passed down to the input)
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the form field has an error (passed down to the input)
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The error text for the form field
      */
-    errorText?: string;
+    errorText?: string | undefined;
     /**
      * The helper text for the form field
      */
-    helperText?: string;
+    helperText?: string | undefined;
     /**
      * The id attribute for the form field (passed down to the input)
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The label text for the form field
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * The layout of the input and label
      */
-    layout?: "stacked" | "inline" | "checkable";
+    layout?: "inline" | "stacked" | "checkable" | undefined;
     /**
      * Whether the form field is required (passed down to the input)
      */
-    required?: boolean;
+    required?: boolean | undefined;
 };

package/dist/components/molecules/formLayout/FormLayout.svelte.d.ts

@@ -7,27 +7,27 @@ declare const FormLayout: 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;
     /**
      * Gap between form elements (in Tailwind spacing scale)
      */
-    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+    gap?: 0 | 3 | 1 | 2 | 8 | 4 | 6 | 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;
     /**
      * Gap between form elements (in Tailwind spacing scale)
      */
-    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+    gap?: 0 | 3 | 1 | 2 | 8 | 4 | 6 | undefined;
 };

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

@@ -7,51 +7,51 @@ declare const SystemAlert: import("svelte").Component<{
     /**
      * Whether to automatically close the system alert after a duration
      */
-    autoClose?: boolean;
+    autoClose?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Icon to display in the system alert
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Message to display in the system alert
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * Title to display in the system alert
      */
-    title?: string;
+    title?: string | undefined;
     /**
      * System alert variant
      */
-    variant?: "info" | "success" | "warning" | "error";
+    variant?: "error" | "success" | "warning" | "info" | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Whether to automatically close the system alert after a duration
      */
-    autoClose?: boolean;
+    autoClose?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Icon to display in the system alert
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Message to display in the system alert
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * Title to display in the system alert
      */
-    title?: string;
+    title?: string | undefined;
     /**
      * System alert variant
      */
-    variant?: "info" | "success" | "warning" | "error";
+    variant?: "error" | "success" | "warning" | "info" | undefined;
 };

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,46 +4,54 @@ 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
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Duration in seconds before auto-close triggers
      */
-    durationInSeconds?: number;
+    durationInSeconds?: number | undefined;
     /**
      * Message to display in the toast
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * Function to call when the toast is auto-closed
      */
-    onClose?: (event: any) => void;
+    onClose?: ((event: any) => void) | undefined;
     /**
      * Toast variant
      */
-    variant?: "info" | "loading" | "error";
+    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
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Duration in seconds before auto-close triggers
      */
-    durationInSeconds?: number;
+    durationInSeconds?: number | undefined;
     /**
      * Message to display in the toast
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * Function to call when the toast is auto-closed
      */
-    onClose?: (event: any) => void;
+    onClose?: ((event: any) => void) | undefined;
     /**
      * Toast variant
      */
-    variant?: "info" | "loading" | "error";
+    variant?: "error" | "loading" | "info" | undefined;
 };

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/molecules/pickers/colorSwatch/ColorSwatch.svelte.d.ts

@@ -7,51 +7,51 @@ declare const ColorSwatch: import("svelte").Component<{
     /**
      * The color items
      */
-    children?: string;
+    children?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Selected color value (hex, rgb, etc.)
      */
-    selectedColor?: string;
+    selectedColor?: string | undefined;
     /**
      * ColorSwatch size
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | undefined;
     /**
      * letter "A" for text -> "B" for background
      */
-    type?: "text" | "background";
+    type?: "text" | "background" | undefined;
     /**
      * ColorSwatch style
      */
-    variant?: "filled" | "transparent";
+    variant?: "filled" | "transparent" | undefined;
 }, {}, "isOpen">;
 type Props = {
     /**
      * The color items
      */
-    children?: string;
+    children?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Selected color value (hex, rgb, etc.)
      */
-    selectedColor?: string;
+    selectedColor?: string | undefined;
     /**
      * ColorSwatch size
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | undefined;
     /**
      * letter "A" for text -> "B" for background
      */
-    type?: "text" | "background";
+    type?: "text" | "background" | undefined;
     /**
      * ColorSwatch style
      */
-    variant?: "filled" | "transparent";
+    variant?: "filled" | "transparent" | undefined;
 };

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte

@@ -69,7 +69,7 @@
 			parseHTML() {
 				return [
 					{ tag: "a[data-anchor]" },
-					{ tag: "a[data-page-uuid]" },
+					{ tag: "a[data-entity-type][data-entity-id]" },
 					{ tag: "a[href]" },
 				];
 			},
@@ -80,12 +80,21 @@
 						parseHTML: (el) => el.getAttribute("href"),
 					},
 
-					pageUuid: {
+					entityType: {
 						default: null,
-						parseHTML: (el) => el.getAttribute("data-page-uuid"),
+						parseHTML: (el) => el.getAttribute("data-entity-type"),
 						renderHTML: (attrs) => {
-							if (!attrs.pageUuid) return {};
-							return { "data-page-uuid": attrs.pageUuid };
+							if (!attrs.entityType) return {};
+							return { "data-entity-type": attrs.entityType };
+						},
+					},
+
+					entityId: {
+						default: null,
+						parseHTML: (el) => el.getAttribute("data-entity-id"),
+						renderHTML: (attrs) => {
+							if (!attrs.entityId) return {};
+							return { "data-entity-id": attrs.entityId };
 						},
 					},
 

package/dist/components/molecules/richTextEditor/toolbar/ToolbarLink.svelte

@@ -24,9 +24,10 @@
 
 					const linkAttrs = {
 						anchor: attrs.anchor || null,
+						entityId: attrs.entityId || null,
+						entityType: attrs.entityType || null,
 						href: attrs.url || null,
 						openInNewWindow: !!attrs.openInNewWindow,
-						pageUuid: attrs.pageUuid || null,
 						title: attrs.title || null,
 					};