@liwe3/webcomponents-svelte 1.0.1 → 1.0.14

package/dist/AITextEditor.svelte

@@ -1,151 +1,212 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-
-	interface Props {
-		value?: string;
-		apiKey?: string;
-		suggestionDelay?: number;
-		systemPrompt?: string;
-		apiEndpoint?: string;
-		modelName?: string;
-		placeholder?: string;
-
-		onbeforesuggestion?: (data: any) => boolean;
-		onchange?: (value: string) => void;
-	}
-
-	let {
-		value = $bindable(''),
-		apiKey = '',
-		suggestionDelay = 3000,
-		systemPrompt = $bindable(
-			"You are a helpful writing assistant. Continue the user's text naturally and coherently. Provide 1-3 sentences that would logically follow their writing. Keep the same tone and style. Do not repeat what they've already written."
-		),
-		apiEndpoint = 'https://api.openai.com/v1/chat/completions',
-		modelName = 'gpt-3.5-turbo',
-		placeholder = 'Start writing your markdown text here...',
-
-		onbeforesuggestion,
-		onchange
-	} = $props();
-
-	let elementRef: HTMLElement;
-	let webComponent: any;
-
-	/**
-	 * Updates the web component property and syncs with Svelte state
-	 */
-	const updateWebComponentProperty = (
-		propertyName: string,
-		newValue: any,
-		setterMethod?: string
-	) => {
-		if (!webComponent) return;
-
-		const method =
-			setterMethod || `set${propertyName.charAt(0).toUpperCase() + propertyName.slice(1)}`;
-		if (typeof webComponent[method] === 'function') {
-			webComponent[method](newValue);
-		} else if (propertyName in webComponent) {
-			webComponent[propertyName] = newValue;
-		}
-	};
-
-	/**
-	 * Syncs all props with the web component
-	 */
-	const syncAllProps = () => {
-		if (!webComponent) return;
-
-		updateWebComponentProperty('apiKey', apiKey);
-		updateWebComponentProperty('suggestionDelay', suggestionDelay);
-		updateWebComponentProperty('systemPrompt', systemPrompt);
-		updateWebComponentProperty('apiEndpoint', apiEndpoint);
-		updateWebComponentProperty('modelName', modelName);
-
-		// Set initial text value
-		if (value && webComponent.getText() !== value) {
-			webComponent.setText(value);
-		}
-
-		// Set placeholder
-		const textarea = webComponent.shadowRoot?.getElementById('editor');
-		if (textarea && placeholder) {
-			textarea.placeholder = placeholder;
-		}
-	};
-
-	$effect(() => {
-		if (webComponent && webComponent.getText() !== value) {
-			webComponent.setText(value);
-		}
-	});
-
-	$effect(() => {
-		if (webComponent) {
-			const textarea = webComponent.shadowRoot?.getElementById('editor');
-			if (textarea && placeholder) {
-				textarea.placeholder = placeholder;
-			}
-		}
-	});
-
-	onMount(async () => {
-		// Dynamically import the web component
-		await import('@liwe3/webcomponents/ai-text-editor');
-
-		// Get reference to the web component
-		webComponent = elementRef;
-
-		// Sync all initial props
-		syncAllProps();
-
-		// Listen for changes from the web component
-		const handleChange = (event: CustomEvent) => {
-			const newValue = event.detail.value;
-			if (newValue !== value) {
-				value = newValue;
-				onchange?.(newValue);
-			}
-		};
-
-		// Forward beforeSuggestion event and allow parent to cancel
-		const handleBeforeSuggestion = (event: CustomEvent) => {
-			const cancel = onbeforesuggestion ? onbeforesuggestion(event.detail) : false;
-
-			// propagate cancellation back to the underlying web component
-			if (cancel) event.preventDefault();
-		};
-
-		webComponent.addEventListener('change', handleChange);
-		webComponent.addEventListener('beforeSuggestion', handleBeforeSuggestion as EventListener);
-
-		// Cleanup
-		return () => {
-			webComponent?.removeEventListener('change', handleChange);
-			webComponent?.removeEventListener(
-				'beforeSuggestion',
-				handleBeforeSuggestion as EventListener
-			);
-		};
-	});
-
-	// Public methods to expose web component functionality
-	export const setText = (text: string) => {
-		value = text;
-		webComponent?.setText(text);
-	};
-
-	// Expose setContext to parent components
-	export const setContext = (context: string) => {
-		webComponent?.setContext(context);
-	};
-
-	// Expose setSystemPrompt to allow changing the system prompt dynamically
-	export const setSystemPrompt = (prompt: string) => {
-		systemPrompt = prompt;
-		webComponent?.setSystemPrompt?.(prompt);
-	};
+  import { onMount } from "svelte";
+
+  interface Props {
+    value?: string;
+    apiKey?: string;
+    suggestionDelay?: number;
+    systemPrompt?: string;
+    apiEndpoint?: string;
+    modelName?: string;
+    placeholder?: string;
+
+    onbeforesuggestion?: (data: any) => boolean;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(""),
+    apiKey = "",
+    suggestionDelay = 3000,
+    systemPrompt = $bindable(
+      "You are a helpful writing assistant. Continue the user's text naturally and coherently. Provide 1-3 sentences that would logically follow their writing. Keep the same tone and style. Do not repeat what they've already written."
+    ),
+    apiEndpoint = "https://api.openai.com/v1/chat/completions",
+    modelName = "gpt-3.5-turbo",
+    placeholder = "Start writing your markdown text here...",
+
+    onbeforesuggestion,
+    onchange,
+  }: Props = $props();
+
+  let elementRef: HTMLElement;
+  let webComponent: any;
+
+  /**
+   * Updates the web component property and syncs with Svelte state
+   */
+  const updateWebComponentProperty = (
+    propertyName: string,
+    newValue: any,
+    setterMethod?: string
+  ) => {
+    if (!webComponent) return;
+
+    const method =
+      setterMethod ||
+      `set${propertyName.charAt(0).toUpperCase() + propertyName.slice(1)}`;
+    if (typeof webComponent[method] === "function") {
+      webComponent[method](newValue);
+    } else if (propertyName in webComponent) {
+      webComponent[propertyName] = newValue;
+    }
+  };
+
+  /**
+   * Syncs all props with the web component
+   */
+  const syncAllProps = () => {
+    if (!webComponent) return;
+
+    updateWebComponentProperty("apiKey", apiKey);
+    updateWebComponentProperty("suggestionDelay", suggestionDelay);
+    updateWebComponentProperty("systemPrompt", systemPrompt);
+    updateWebComponentProperty("apiEndpoint", apiEndpoint);
+    updateWebComponentProperty("modelName", modelName);
+
+    // Set initial text value
+    if (value && webComponent.getText() !== value) {
+      webComponent.setText(value);
+    }
+
+    // Set placeholder
+    const textarea = webComponent.shadowRoot?.getElementById("editor");
+    if (textarea && placeholder) {
+      textarea.placeholder = placeholder;
+    }
+  };
+
+  $effect(() => {
+    if (webComponent && webComponent.getText() !== value) {
+      webComponent.setText(value);
+    }
+  });
+
+  $effect(() => {
+    if (webComponent) {
+      const textarea = webComponent.shadowRoot?.getElementById("editor");
+      if (textarea && placeholder) {
+        textarea.placeholder = placeholder;
+      }
+    }
+  });
+
+  onMount(async (): Promise<any> => {
+    // Dynamically import the web component
+    await import("@liwe3/webcomponents/ai-text-editor");
+
+    // Get reference to the web component
+    webComponent = elementRef;
+
+    // Sync all initial props
+    syncAllProps();
+
+    // Listen for changes from the web component
+    const handleChange = (event: CustomEvent) => {
+      const newValue = event.detail.value;
+      if (newValue !== value) {
+        value = newValue;
+        onchange?.(newValue);
+      }
+    };
+
+    // Forward beforeSuggestion event and allow parent to cancel
+    const handleBeforeSuggestion = (event: CustomEvent) => {
+      const cancel = onbeforesuggestion
+        ? onbeforesuggestion(event.detail)
+        : false;
+
+      // propagate cancellation back to the underlying web component
+      if (cancel) event.preventDefault();
+    };
+
+    webComponent.addEventListener("change", handleChange);
+    webComponent.addEventListener(
+      "beforeSuggestion",
+      handleBeforeSuggestion as EventListener
+    );
+
+    // Cleanup
+    return () => {
+      webComponent?.removeEventListener("change", handleChange);
+      webComponent?.removeEventListener(
+        "beforeSuggestion",
+        handleBeforeSuggestion as EventListener
+      );
+    };
+  });
+
+  // Public methods to expose web component functionality
+  export const setText = (text: string) => {
+    value = text;
+    webComponent?.setText(text);
+  };
+
+  // Expose getText to parent components
+  export const getText = (): string => {
+    return webComponent?.getText() || "";
+  };
+
+  // Expose setContext to parent components
+  export const setContext = (context: string) => {
+    webComponent?.setContext(context);
+  };
+
+  // Expose getContext to parent components
+  export const getContext = (): string => {
+    return webComponent?.getContext() || "";
+  };
+
+  // Expose setSystemPrompt to allow changing the system prompt dynamically
+  export const setSystemPrompt = (prompt: string) => {
+    systemPrompt = prompt;
+    webComponent?.setSystemPrompt?.(prompt);
+  };
+
+  // Expose getSystemPrompt to parent components
+  export const getSystemPrompt = (): string => {
+    return webComponent?.getSystemPrompt() || systemPrompt;
+  };
+
+  // Expose setApiKey to parent components
+  export const setApiKey = (key: string) => {
+    webComponent?.setApiKey(key);
+  };
+
+  // Expose getApiKey to parent components
+  export const getApiKey = (): string => {
+    return webComponent?.getApiKey() || "";
+  };
+
+  // Expose setSuggestionDelay to parent components
+  export const setSuggestionDelay = (seconds: number) => {
+    webComponent?.setSuggestionDelay(seconds);
+  };
+
+  // Expose getSuggestionDelay to parent components
+  export const getSuggestionDelay = (): number => {
+    return webComponent?.getSuggestionDelay() || suggestionDelay;
+  };
+
+  // Expose setApiEndpoint to parent components
+  export const setApiEndpoint = (endpoint: string) => {
+    webComponent?.setApiEndpoint(endpoint);
+  };
+
+  // Expose getApiEndpoint to parent components
+  export const getApiEndpoint = (): string => {
+    return webComponent?.getApiEndpoint() || apiEndpoint;
+  };
+
+  // Expose setModelName to parent components
+  export const setModelName = (model: string) => {
+    webComponent?.setModelName(model);
+  };
+
+  // Expose getModelName to parent components
+  export const getModelName = (): string => {
+    return webComponent?.getModelName() || modelName;
+  };
 </script>
 
 <liwe3-ai-text-editor bind:this={elementRef}></liwe3-ai-text-editor>

package/dist/AITextEditor.svelte.d.ts

@@ -1,4 +1,4 @@
-declare const AITextEditor: import("svelte").Component<{
+interface Props {
     value?: string;
     apiKey?: string;
     suggestionDelay?: number;
@@ -6,12 +6,24 @@ declare const AITextEditor: import("svelte").Component<{
     apiEndpoint?: string;
     modelName?: string;
     placeholder?: string;
-    onbeforesuggestion: any;
-    onchange: any;
-}, {
+    onbeforesuggestion?: (data: any) => boolean;
+    onchange?: (value: string) => void;
+}
+declare const AITextEditor: import("svelte").Component<Props, {
     setText: (text: string) => void;
+    getText: () => string;
     setContext: (context: string) => void;
+    getContext: () => string;
     setSystemPrompt: (prompt: string) => void;
+    getSystemPrompt: () => string;
+    setApiKey: (key: string) => void;
+    getApiKey: () => string;
+    setSuggestionDelay: (seconds: number) => void;
+    getSuggestionDelay: () => number;
+    setApiEndpoint: (endpoint: string) => void;
+    getApiEndpoint: () => string;
+    setModelName: (model: string) => void;
+    getModelName: () => string;
 }, "value" | "systemPrompt">;
 type AITextEditor = ReturnType<typeof AITextEditor>;
 export default AITextEditor;

package/dist/AITextEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AITextEditor.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AITextEditor.svelte.ts"],"names":[],"mappings":"AA+JA,QAAA,MAAM,YAAY;YA5IqC,MAAM;aAAW,MAAM;sBAAoB,MAAM;mBAAiB,MAAM;kBAAgB,MAAM;gBAAc,MAAM;kBAAgB,MAAM;wBAAsB,GAAG;cAAY,GAAG;;oBAuH9M,MAAM;0BAMA,MAAM;8BAKF,MAAM;4BAUiB,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AITextEditor.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AITextEditor.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA4MH,QAAA,MAAM,YAAY;oBA5EQ,MAAM;mBAMT,MAAM;0BAKG,MAAM;sBAKZ,MAAM;8BAKI,MAAM;2BAMX,MAAM;qBAKV,MAAM;qBAKR,MAAM;kCAKS,MAAM;8BAKZ,MAAM;+BAKH,MAAM;0BAKb,MAAM;0BAKJ,MAAM;wBAKV,MAAM;4BASwB,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/DateSelector.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { DateRange } from "@liwe3/webcomponents";
+
+  interface Props {
+    rangeMode?: boolean;
+    selectedDate?: string | null;
+    selectedRange?: DateRange;
+    ondateselected?: (date: string) => void;
+    onrangeselected?: (range: DateRange) => void;
+  }
+
+  let {
+    rangeMode = false,
+    selectedDate = $bindable(null),
+    selectedRange = $bindable({ start: null, end: null }),
+    ondateselected,
+    onrangeselected,
+    ...restProps
+  }: Props = $props();
+
+  let dateSelectorElement: HTMLElement;
+
+  /**
+   * Updates the web component's attributes based on props
+   */
+  const updateAttributes = () => {
+    if (!dateSelectorElement) return;
+
+    // Set boolean attributes
+    if (rangeMode) {
+      dateSelectorElement.setAttribute("range-mode", "");
+    } else {
+      dateSelectorElement.removeAttribute("range-mode");
+    }
+
+    // Set selected date in single mode
+    if (!rangeMode && selectedDate) {
+      (dateSelectorElement as any).setDate(selectedDate);
+    }
+
+    // Set selected range in range mode
+    if (rangeMode && selectedRange && selectedRange.start && selectedRange.end) {
+      (dateSelectorElement as any).setRange(selectedRange.start, selectedRange.end);
+    }
+  };
+
+  /**
+   * Binds event listeners to the web component
+   */
+  const bindEvents = () => {
+    if (!dateSelectorElement) return;
+
+    dateSelectorElement.addEventListener("dateSelected", (event) => {
+      const customEvent = event as CustomEvent;
+      selectedDate = customEvent.detail.date;
+      ondateselected?.(customEvent.detail.date);
+    });
+
+    dateSelectorElement.addEventListener("rangeSelected", (event) => {
+      const customEvent = event as CustomEvent;
+      selectedRange = {
+        start: customEvent.detail.start,
+        end: customEvent.detail.end
+      };
+      onrangeselected?.(selectedRange);
+    });
+  };
+
+  onMount(async () => {
+    // Dynamically import the web component
+    await import("@liwe3/webcomponents/date-selector");
+
+    updateAttributes();
+    bindEvents();
+  });
+
+  /**
+   * Expose methods to parent component
+   */
+  export const setDate = (dateStr: string) => {
+    (dateSelectorElement as any)?.setDate(dateStr);
+  };
+
+  export const setRange = (startDate: string, endDate: string) => {
+    (dateSelectorElement as any)?.setRange(startDate, endDate);
+  };
+
+  export const getSelectedDate = () => {
+    return (dateSelectorElement as any)?.getSelectedDate() || null;
+  };
+
+  export const getSelectedRange = () => {
+    return (dateSelectorElement as any)?.getSelectedRange() || { start: null, end: null };
+  };
+
+  export const clear = () => {
+    (dateSelectorElement as any)?.clear();
+  };
+</script>
+
+<!-- svelte-ignore a11y_unknown_aria_attribute -->
+<liwe3-date-selector bind:this={dateSelectorElement} {...restProps}></liwe3-date-selector>

package/dist/DateSelector.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { DateRange } from "@liwe3/webcomponents";
+interface Props {
+    rangeMode?: boolean;
+    selectedDate?: string | null;
+    selectedRange?: DateRange;
+    ondateselected?: (date: string) => void;
+    onrangeselected?: (range: DateRange) => void;
+}
+declare const DateSelector: import("svelte").Component<Props, {
+    /**
+       * Expose methods to parent component
+       */ setDate: (dateStr: string) => void;
+    setRange: (startDate: string, endDate: string) => void;
+    getSelectedDate: () => any;
+    getSelectedRange: () => any;
+    clear: () => void;
+}, "selectedDate" | "selectedRange">;
+type DateSelector = ReturnType<typeof DateSelector>;
+export default DateSelector;
+//# sourceMappingURL=DateSelector.svelte.d.ts.map

package/dist/DateSelector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateSelector.svelte.d.ts","sourceRoot":"","sources":["../src/lib/DateSelector.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGpD,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC9C;AAuGH,QAAA,MAAM,YAAY;IAHlB;;SAEK,oBA5BwB,MAAM;0BAIH,MAAM,WAAW,MAAM;;;;oCAyBG,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/PopoverMenu.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { PopoverMenuConfig } from "@liwe3/webcomponents";
+
+  interface Props {
+    items?: PopoverMenuConfig[];
+  }
+
+  let {
+    items = [],
+    ...restProps
+  }: Props = $props();
+
+  let popoverMenuElement: HTMLElement;
+  let isReady = $state(false);
+
+  /**
+   * Updates the web component's items based on props
+   */
+  const updateItems = () => {
+    if (!popoverMenuElement || !isReady) return;
+
+    // Check if setItems method exists
+    if (typeof (popoverMenuElement as any).setItems === 'function') {
+      (popoverMenuElement as any).setItems(items);
+    }
+  };
+
+  onMount(async () => {
+    // Dynamically import the web component
+    await import("@liwe3/webcomponents/popover-menu");
+
+    // Wait for the custom element to be defined
+    await customElements.whenDefined('liwe3-popover-menu');
+
+    // Mark as ready
+    isReady = true;
+
+    // Initial update
+    updateItems();
+  });
+
+  /**
+   * Expose methods to parent component
+   */
+  export const setItems = (newItems: PopoverMenuConfig[]) => {
+    if (typeof (popoverMenuElement as any)?.setItems === 'function') {
+      (popoverMenuElement as any).setItems(newItems);
+    }
+  };
+
+  export const getItems = (): PopoverMenuConfig[] => {
+    if (typeof (popoverMenuElement as any)?.getItems === 'function') {
+      return (popoverMenuElement as any).getItems();
+    }
+    return [];
+  };
+
+  export const addMenuItem = (item: PopoverMenuConfig, index: number | null = null) => {
+    if (typeof (popoverMenuElement as any)?.addMenuItem === 'function') {
+      (popoverMenuElement as any).addMenuItem(item, index);
+    }
+  };
+
+  export const removeMenuItem = (index: number) => {
+    if (typeof (popoverMenuElement as any)?.removeMenuItem === 'function') {
+      (popoverMenuElement as any).removeMenuItem(index);
+    }
+  };
+
+  export const updateMenuItem = (index: number, item: PopoverMenuConfig) => {
+    if (typeof (popoverMenuElement as any)?.updateMenuItem === 'function') {
+      (popoverMenuElement as any).updateMenuItem(index, item);
+    }
+  };
+
+  // Reactively update items when props change (only after component is ready)
+  $effect(() => {
+    if (isReady) {
+      updateItems();
+    }
+  });
+</script>
+
+<!-- svelte-ignore a11y_unknown_aria_attribute -->
+<liwe3-popover-menu bind:this={popoverMenuElement} {...restProps}></liwe3-popover-menu>

package/dist/PopoverMenu.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { PopoverMenuConfig } from "@liwe3/webcomponents";
+interface Props {
+    items?: PopoverMenuConfig[];
+}
+declare const PopoverMenu: import("svelte").Component<Props, {
+    /**
+       * Expose methods to parent component
+       */ setItems: (newItems: PopoverMenuConfig[]) => void;
+    getItems: () => PopoverMenuConfig[];
+    addMenuItem: (item: PopoverMenuConfig, index?: number | null) => void;
+    removeMenuItem: (index: number) => void;
+    updateMenuItem: (index: number, item: PopoverMenuConfig) => void;
+}, "">;
+type PopoverMenu = ReturnType<typeof PopoverMenu>;
+export default PopoverMenu;
+//# sourceMappingURL=PopoverMenu.svelte.d.ts.map

package/dist/PopoverMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverMenu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PopoverMenu.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG5D,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AA0FH,QAAA,MAAM,WAAW;IAHjB;;SAEK,sBA9C0B,iBAAiB,EAAE;oBAM1B,iBAAiB,EAAE;wBAOb,iBAAiB,UAAS,MAAM,GAAG,IAAI;4BAMnC,MAAM;4BAMN,MAAM,QAAQ,iBAAiB;MAsBR,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/SmartSelect.svelte

@@ -1,147 +1,144 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import type { SelectOption } from '@liwe3/webcomponents';
-
-	interface Props {
-		multiple?: boolean;
-		searchable?: boolean;
-		placeholder?: string;
-		disabled?: boolean;
-		value?: string | string[];
-		options?: SelectOption[];
-		onchange?: (value: string | string[] | undefined) => void;
-		onopen?: (event: CustomEvent) => void;
-		onclose?: (event: CustomEvent) => void;
-		onsearch?: (event: CustomEvent) => void;
-	}
-
-	let {
-		multiple = false,
-		searchable = false,
-		placeholder = 'Select an option',
-		disabled = false,
-		value = $bindable(),
-		options = [],
-		onchange,
-		onopen,
-		onclose,
-		onsearch,
-		...restProps
-	}: Props = $props();
-
-	let smartSelectElement: HTMLElement;
-
-	/**
-	 * Updates the web component's attributes based on props
-	 */
-	const updateAttributes = () => {
-		if (!smartSelectElement) return;
-
-		// Set boolean attributes
-		if (multiple) {
-			smartSelectElement.setAttribute('multiple', '');
-		} else {
-			smartSelectElement.removeAttribute('multiple');
-		}
-
-		if (searchable) {
-			smartSelectElement.setAttribute('searchable', '');
-		} else {
-			smartSelectElement.removeAttribute('searchable');
-		}
-
-		if (disabled) {
-			smartSelectElement.setAttribute('disabled', '');
-		} else {
-			smartSelectElement.removeAttribute('disabled');
-		}
-
-		// Set string attributes
-		smartSelectElement.setAttribute('placeholder', placeholder);
-
-		// Set options as JSON string
-		if (options.length > 0) {
-			smartSelectElement.setAttribute('options', JSON.stringify(options));
-		}
-
-		// Set value
-		if (value !== undefined && value !== null) {
-			if (Array.isArray(value)) {
-				(smartSelectElement as any).value = value;
-			} else {
-				(smartSelectElement as any).value = value;
-			}
-		}
-	};
-
-	/**
-	 * Binds event listeners to the web component
-	 */
-	const bindEvents = () => {
-		if (!smartSelectElement) return;
-
-		smartSelectElement.addEventListener('change', (event) => {
-			const customEvent = event as CustomEvent;
-			value = customEvent.detail.value;
-			onchange?.(value);
-		});
-
-		smartSelectElement.addEventListener('open', (event) => {
-			onopen?.(event as CustomEvent);
-		});
-
-		smartSelectElement.addEventListener('close', (event) => {
-			onclose?.(event as CustomEvent);
-		});
-
-		smartSelectElement.addEventListener('search', (event) => {
-			onsearch?.(event as CustomEvent);
-		});
-	};
-
-	onMount(async () => {
-		// Dynamically import the web component
-		await import('@liwe3/webcomponents/smart-select');
-
-		updateAttributes();
-		bindEvents();
-
-		// Watch for prop changes and update attributes
-		$effect(() => {
-			updateAttributes();
-		});
-	});
-
-	/**
-	 * Expose methods to parent component
-	 */
-	export const open = () => {
-		(smartSelectElement as any)?.open();
-	};
-
-	export const close = () => {
-		(smartSelectElement as any)?.close();
-	};
-
-	export const toggle = () => {
-		(smartSelectElement as any)?.toggle();
-	};
-
-	export const selectOption = (optionValue: string) => {
-		(smartSelectElement as any)?.selectOption(optionValue);
-	};
-
-	export const deselectOption = (optionValue: string) => {
-		(smartSelectElement as any)?.deselectOption(optionValue);
-	};
-
-	export const getSelectedOptions = () => {
-		return (smartSelectElement as any)?.getSelectedOptions() || [];
-	};
-
-	export const setOptions = (newOptions: SelectOption[]) => {
-		(smartSelectElement as any)?.setOptions(newOptions);
-	};
+  import { onMount } from "svelte";
+  import type { SelectOption } from "@liwe3/webcomponents";
+
+  interface Props {
+    multiple?: boolean;
+    searchable?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string | string[];
+    options?: SelectOption[];
+    onchange?: (value: string | string[] | undefined) => void;
+    onsearch?: (value: string) => void;
+    onopen?: (event: CustomEvent) => void;
+    onclose?: (event: CustomEvent) => void;
+  }
+
+  let {
+    multiple = false,
+    searchable = false,
+    placeholder = "Select an option",
+    disabled = false,
+    value = $bindable(),
+    options = [],
+    onchange,
+    onopen,
+    onclose,
+    onsearch,
+    ...restProps
+  }: Props = $props();
+
+  let smartSelectElement: HTMLElement;
+
+  /**
+   * Updates the web component's attributes based on props
+   */
+  const updateAttributes = () => {
+    if (!smartSelectElement) return;
+
+    // Set boolean attributes
+    if (multiple) {
+      smartSelectElement.setAttribute("multiple", "");
+    } else {
+      smartSelectElement.removeAttribute("multiple");
+    }
+
+    if (searchable) {
+      smartSelectElement.setAttribute("searchable", "");
+    } else {
+      smartSelectElement.removeAttribute("searchable");
+    }
+
+    if (disabled) {
+      smartSelectElement.setAttribute("disabled", "");
+    } else {
+      smartSelectElement.removeAttribute("disabled");
+    }
+
+    // Set string attributes
+    smartSelectElement.setAttribute("placeholder", placeholder);
+
+    // Set options as JSON string
+    if (options.length > 0) {
+      smartSelectElement.setAttribute("options", JSON.stringify(options));
+    }
+
+    // Set value
+    if (value !== undefined && value !== null) {
+      if (Array.isArray(value)) {
+        (smartSelectElement as any).value = value;
+      } else {
+        (smartSelectElement as any).value = value;
+      }
+    }
+  };
+
+  /**
+   * Binds event listeners to the web component
+   */
+  const bindEvents = () => {
+    if (!smartSelectElement) return;
+
+    smartSelectElement.addEventListener("change", (event) => {
+      const customEvent = event as CustomEvent;
+      value = customEvent.detail.value;
+      onchange?.(value);
+    });
+
+    smartSelectElement.addEventListener("open", (event) => {
+      onopen?.(event as CustomEvent);
+    });
+
+    smartSelectElement.addEventListener("close", (event) => {
+      onclose?.(event as CustomEvent);
+    });
+
+    smartSelectElement.addEventListener("search", (event) => {
+      const customEvent = event as CustomEvent;
+      const value = customEvent.detail.query;
+      onsearch?.(value);
+    });
+  };
+
+  onMount(async () => {
+    // Dynamically import the web component
+    await import("@liwe3/webcomponents/smart-select");
+
+    updateAttributes();
+    bindEvents();
+  });
+
+  /**
+   * Expose methods to parent component
+   */
+  export const open = () => {
+    (smartSelectElement as any)?.open();
+  };
+
+  export const close = () => {
+    (smartSelectElement as any)?.close();
+  };
+
+  export const toggle = () => {
+    (smartSelectElement as any)?.toggle();
+  };
+
+  export const selectOption = (optionValue: string) => {
+    (smartSelectElement as any)?.selectOption(optionValue);
+  };
+
+  export const deselectOption = (optionValue: string) => {
+    (smartSelectElement as any)?.deselectOption(optionValue);
+  };
+
+  export const getSelectedOptions = () => {
+    return (smartSelectElement as any)?.getSelectedOptions() || [];
+  };
+
+  export const setOptions = (newOptions: SelectOption[]) => {
+    (smartSelectElement as any)?.setOptions(newOptions);
+  };
 </script>
 
 <!-- svelte-ignore a11y_unknown_aria_attribute -->

package/dist/SmartSelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SelectOption } from '@liwe3/webcomponents';
+import type { SelectOption } from "@liwe3/webcomponents";
 interface Props {
     multiple?: boolean;
     searchable?: boolean;
@@ -7,14 +7,14 @@ interface Props {
     value?: string | string[];
     options?: SelectOption[];
     onchange?: (value: string | string[] | undefined) => void;
+    onsearch?: (value: string) => void;
     onopen?: (event: CustomEvent) => void;
     onclose?: (event: CustomEvent) => void;
-    onsearch?: (event: CustomEvent) => void;
 }
 declare const SmartSelect: import("svelte").Component<Props, {
     /**
-         * Expose methods to parent component
-         */ open: () => void;
+       * Expose methods to parent component
+       */ open: () => void;
     close: () => void;
     toggle: () => void;
     selectOption: (optionValue: string) => void;

package/dist/SmartSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SmartSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGxD,UAAU,KAAK;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AA+IF,QAAA,MAAM,WAAW;IAHjB;;WAEI;;;gCAxBiC,MAAM;kCAIJ,MAAM;;6BAQX,YAAY,EAAE;WAaS,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SmartSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SmartSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGvD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AA4IH,QAAA,MAAM,WAAW;IAHjB;;SAEK;;;gCAxBiC,MAAM;kCAIJ,MAAM;;6BAQX,YAAY,EAAE;WAaQ,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Toasts.svelte

@@ -0,0 +1,64 @@
+<script module lang="ts">
+	import type { ToastConfig, ToastElement } from '@liwe3/webcomponents';
+
+	/**
+	 * Shows a toast notification with the given configuration.
+	 *
+	 * IMPORTANT: Make sure to add the <Toasts /> component to your layout first!
+	 * The <Toasts /> component initializes the toast web component system.
+	 *
+	 * @param config - The toast configuration
+	 * @returns The toast element instance (or undefined if called during SSR)
+	 *
+	 * @example
+	 * ```typescript
+	 * // In your +layout.svelte
+	 * import { Toasts } from '@liwe3/webcomponents-svelte';
+	 * <Toasts />
+	 *
+	 * // In any component
+	 * import { toastAdd } from '@liwe3/webcomponents-svelte';
+	 *
+	 * toastAdd({
+	 *   title: 'Success!',
+	 *   text: 'Your changes have been saved.',
+	 *   type: 'success',
+	 *   duration: 5000
+	 * });
+	 * ```
+	 */
+	export const toastAdd = (config: ToastConfig): ToastElement | undefined => {
+		// Only run on client side
+		if (typeof window === 'undefined') {
+			return undefined;
+		}
+
+		// Get the toastAdd function from window (set by the web component)
+		// The <Toasts /> component should have already loaded the web component
+		const globalToastAdd = (window as any).__liwe3_toastAdd;
+
+		if (!globalToastAdd) {
+			console.error(
+				'toastAdd: Toast web component not initialized. Did you forget to add <Toasts /> to your layout?'
+			);
+			return undefined;
+		}
+
+		return globalToastAdd(config);
+	};
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		// Only run on the client side (onMount only runs in browser)
+		// Import and initialize the Toast web component
+		const { toastAdd: coreToastAdd } = await import('@liwe3/webcomponents/toast');
+
+		// Expose toastAdd on window so the wrapper can access it
+		(window as any).__liwe3_toastAdd = coreToastAdd;
+	});
+</script>
+
+<!-- This component doesn't render anything, it just loads the web component -->

package/dist/Toasts.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { ToastConfig, ToastElement } from '@liwe3/webcomponents';
+/**
+ * Shows a toast notification with the given configuration.
+ *
+ * IMPORTANT: Make sure to add the <Toasts /> component to your layout first!
+ * The <Toasts /> component initializes the toast web component system.
+ *
+ * @param config - The toast configuration
+ * @returns The toast element instance (or undefined if called during SSR)
+ *
+ * @example
+ * ```typescript
+ * // In your +layout.svelte
+ * import { Toasts } from '@liwe3/webcomponents-svelte';
+ * <Toasts />
+ *
+ * // In any component
+ * import { toastAdd } from '@liwe3/webcomponents-svelte';
+ *
+ * toastAdd({
+ *   title: 'Success!',
+ *   text: 'Your changes have been saved.',
+ *   type: 'success',
+ *   duration: 5000
+ * });
+ * ```
+ */
+export declare const toastAdd: (config: ToastConfig) => ToastElement | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toasts: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toasts = InstanceType<typeof Toasts>;
+export default Toasts;
+//# sourceMappingURL=Toasts.svelte.d.ts.map

package/dist/Toasts.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toasts.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Toasts.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,WAAW,KAAG,YAAY,GAAG,SAkB7D,CAAC;AAwBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,MAAM;;kBAA+E,CAAC;AAC1E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/index.d.ts

@@ -2,7 +2,10 @@
  * @liwe3/webcomponents-svelte
  * Svelte 5 wrappers for @liwe3/webcomponents
  */
-export type { SelectOption, AITextEditorConfig } from '@liwe3/webcomponents';
+export type { SelectOption, AITextEditorConfig, ToastType, ToastButton, ToastConfig, ToastElement, PopoverMenuItem, PopoverMenuConfig, DateRange } from '@liwe3/webcomponents';
 export { default as SmartSelect } from './SmartSelect.svelte';
 export { default as AITextEditor } from './AITextEditor.svelte';
+export { default as PopoverMenu } from './PopoverMenu.svelte';
+export { default as DateSelector } from './DateSelector.svelte';
+export { default as Toasts, toastAdd } from './Toasts.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG/K,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -5,3 +5,7 @@
 // Export Svelte components
 export { default as SmartSelect } from './SmartSelect.svelte';
 export { default as AITextEditor } from './AITextEditor.svelte';
+export { default as PopoverMenu } from './PopoverMenu.svelte';
+export { default as DateSelector } from './DateSelector.svelte';
+// Export Toasts component and toastAdd function
+export { default as Toasts, toastAdd } from './Toasts.svelte';

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@liwe3/webcomponents-svelte",
-  "version": "1.0.1",
+  "version": "1.0.14",
   "description": "Svelte 5 wrappers for @liwe3/webcomponents",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {