@placeholderco/placeholder-ui 3.0.1 → 3.0.3

package/dist/form/Autocomplete.svelte

@@ -242,6 +242,7 @@
 
 	function onFilterChange(filterValue: string) {
 		if (filterValue.length === 0) {
+			core.cancelSearch();
 			core.filterLocal('');
 			open = true;
 			return;
@@ -250,6 +251,7 @@
 		if (searchFunction && filterValue) {
 			core.search(filterValue, () => (open = true));
 		} else {
+			core.cancelSearch();
 			core.filterLocal(filterValue);
 			open = true;
 		}

package/dist/form/AutocompleteMulti.svelte

@@ -299,6 +299,7 @@
 		if (searchFunction && text) {
 			core.search(text, () => (open = true));
 		} else {
+			core.cancelSearch();
 			core.filterLocal(text);
 			open = true;
 		}

package/dist/form/Select.svelte

@@ -212,6 +212,7 @@
 		if (searchFunction && filterValue) {
 			core.search(filterValue, () => (open = true));
 		} else {
+			core.cancelSearch();
 			core.filterLocal(filterValue);
 		}
 	}

package/dist/form/SelectMulti.svelte

@@ -247,6 +247,7 @@
 				hideCombobox = false;
 			});
 		} else {
+			core.cancelSearch();
 			core.filterLocal(value);
 			hideCombobox = false;
 		}

package/dist/form/comboBoxCore.svelte.d.ts

@@ -82,8 +82,14 @@ export declare abstract class ComboBoxDataCore<TConfig extends ComboBoxDataConfi
     abstract preloadValues(): boolean;
     convertOptions(options: ComboBoxItem[]): void;
     convertGroupOptions(groups: ComboBoxGroup[]): void;
-    /** Debounced remote search via searchFunction. */
+    /**
+     * Debounced remote search via searchFunction. Each call supersedes the previous one:
+     * a pending debounce is dropped and an in-flight request is aborted, so only the
+     * latest query's results are ever applied.
+     */
     search(filterValue: string, onComplete?: () => void): void;
+    /** Drop any pending or in-flight remote search, e.g. when the input switches to local filtering. */
+    cancelSearch(): void;
     /** Case-insensitive local filter over already-loaded options. */
     filterLocal(filterValue: string): void;
 }

package/dist/form/comboBoxCore.svelte.js

@@ -21,6 +21,7 @@ export class ComboBoxDataCore {
     searching = $state(false);
     config;
     #timeout;
+    #searchController;
     #fetchInitialized = false;
     #lastOptionsRef;
     #lastGroupedRef;
@@ -62,7 +63,7 @@ export class ComboBoxDataCore {
             this.preloadValues();
             cfg.onOptionsChanged?.();
         });
-        $effect(() => () => clearTimeout(this.#timeout));
+        $effect(() => () => this.#abortPendingSearch());
     }
     convertOptions(options) {
         const items = options.map((option) => ({ ...option, selected: this.isSelected(option) }));
@@ -80,18 +81,44 @@ export class ComboBoxDataCore {
         }));
         this.filteredGroups = [...this.allGroups];
     }
-    /** Debounced remote search via searchFunction. */
+    /**
+     * Debounced remote search via searchFunction. Each call supersedes the previous one:
+     * a pending debounce is dropped and an in-flight request is aborted, so only the
+     * latest query's results are ever applied.
+     */
     search(filterValue, onComplete) {
-        clearTimeout(this.#timeout);
+        this.#abortPendingSearch();
         this.searching = true;
         this.#timeout = setTimeout(() => {
-            this.config.getSearchFunction()(filterValue).then((response) => {
+            const controller = new AbortController();
+            this.#searchController = controller;
+            this.config.getSearchFunction()(filterValue, controller.signal).then((response) => {
+                if (controller.signal.aborted)
+                    return;
+                this.#searchController = undefined;
                 this.convertOptions(response.object ?? []);
                 this.searching = false;
                 onComplete?.();
+            }, (error) => {
+                // Aborted requests reject by design (e.g. fetch's AbortError) — swallow those.
+                if (controller.signal.aborted)
+                    return;
+                this.#searchController = undefined;
+                this.searching = false;
+                throw error;
             });
         }, 300);
     }
+    /** Drop any pending or in-flight remote search, e.g. when the input switches to local filtering. */
+    cancelSearch() {
+        this.#abortPendingSearch();
+        this.searching = false;
+    }
+    #abortPendingSearch() {
+        clearTimeout(this.#timeout);
+        this.#searchController?.abort();
+        this.#searchController = undefined;
+    }
     /** Case-insensitive local filter over already-loaded options. */
     filterLocal(filterValue) {
         if (filterValue.length === 0) {

package/dist/models/ComboBoxItem.d.ts

@@ -23,5 +23,10 @@ export interface ComboBoxItem {
     isAddNew?: boolean;
 }
 export type FetchFunctionType = () => Promise<NotifyModel<ComboBoxItem[]>>;
-export type SearchFunctionType = (query: string) => Promise<NotifyModel<ComboBoxItem[]>>;
+/**
+ * Remote search. `signal` is aborted when a newer search supersedes this one (the user
+ * kept typing, cleared the input, or the component unmounted) — pass it to `fetch` to
+ * cancel the request. Results from superseded searches are discarded either way.
+ */
+export type SearchFunctionType = (query: string, signal?: AbortSignal) => Promise<NotifyModel<ComboBoxItem[]>>;
 export type RetrieveLabelFunctionType = (value: any) => Promise<NotifyModel<string | undefined>>;

package/dist/ui/Button.svelte

@@ -28,6 +28,10 @@
 		iconSize?: string;
 		/** Link target attribute (when href is provided) */
 		target?: undefined | '_self' | '_blank';
+		/** Relationship attribute (when href is provided). `rel="external"` skips client-side navigation */
+		rel?: string;
+		/** Download the linked URL instead of navigating (when href is provided). `true` keeps the server's filename */
+		download?: boolean | string;
 		/** Button type attribute (when rendered as a button, not a link) */
 		type?: 'button' | 'submit' | 'reset';
 		/** Additional CSS classes */
@@ -51,6 +55,8 @@
 		rightSvg = undefined,
 		iconSize = '18px',
 		target = undefined,
+		rel = undefined,
+		download = undefined,
 		type = 'button',
 		class: buttonClass = '',
 		children,
@@ -89,6 +95,8 @@
 {#if isLink && href && !disabled}
 	<a
 		{target}
+		{rel}
+		download={download === true ? '' : download || undefined}
 		class={elClass}
 		aria-label={ariaLabel}
 		href={href?.startsWith('/') ? resolve(href as any) : href}

package/dist/ui/Button.svelte.d.ts

@@ -22,6 +22,10 @@ export interface ButtonProps {
     iconSize?: string;
     /** Link target attribute (when href is provided) */
     target?: undefined | '_self' | '_blank';
+    /** Relationship attribute (when href is provided). `rel="external"` skips client-side navigation */
+    rel?: string;
+    /** Download the linked URL instead of navigating (when href is provided). `true` keeps the server's filename */
+    download?: boolean | string;
     /** Button type attribute (when rendered as a button, not a link) */
     type?: 'button' | 'submit' | 'reset';
     /** Additional CSS classes */

package/dist/ui/Link.svelte

@@ -10,6 +10,8 @@
 		rel?: string;
 		/** Link target attribute */
 		target?: '_self' | '_blank' | undefined;
+		/** Download the linked URL instead of navigating. `true` keeps the server's filename */
+		download?: boolean | string;
 		/** Additional CSS classes */
 		class?: string;
 		/** Link content */
@@ -24,6 +26,7 @@
 		href,
 		rel = '',
 		target = undefined,
+		download = undefined,
 		class: classes = '',
 		children,
 		onclick,
@@ -36,6 +39,7 @@
 	class={classes}
 	href={href?.startsWith('/') ? resolve(href as any) : href}
 	{rel}
+	download={download === true ? '' : download || undefined}
 	aria-current={ariaCurrent}
 	onclick={(e) => interceptLinkClick(e, { href, target, onclick })}
 	data-sveltekit-preload-data="hover"

package/dist/ui/Link.svelte.d.ts

@@ -6,6 +6,8 @@ export interface LinkProps {
     rel?: string;
     /** Link target attribute */
     target?: '_self' | '_blank' | undefined;
+    /** Download the linked URL instead of navigating. `true` keeps the server's filename */
+    download?: boolean | string;
     /** Additional CSS classes */
     class?: string;
     /** Link content */

package/dist/ui/Table.svelte

@@ -242,7 +242,7 @@
 		if (href) {
 			event.preventDefault();
 			if (newTabIntent) window.open(href, '_blank', 'noopener');
-			else navigateTo(href);
+			else navigateTo(href).catch(console.error);
 		}
 	}
 

package/dist/util/NavigateTo.d.ts

@@ -1 +1,6 @@
-export declare function navigateTo(url: string): void;
+/**
+ * Navigates client-side when the URL is a page route in the app. URLs the client router can't
+ * reach (`+server.ts` endpoints, static files, external URLs) fall back to a full browser
+ * navigation. Cancelled navigations resolve quietly; any other failure rejects.
+ */
+export declare function navigateTo(url: string): Promise<void>;

package/dist/util/NavigateTo.js

@@ -1,5 +1,27 @@
 import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
-export function navigateTo(url) {
-    goto(resolve(url));
+// SvelteKit puts the error code in the message in both dev and prod builds
+const FALLBACK_ERRORS = ['/e/kit/navigation_route_missing', '/e/kit/navigation_external_url'];
+// Rejections for navigations superseded by another one, or cancelled via beforeNavigate
+const CANCELLED_ERRORS = ['navigation cancelled', 'navigation aborted'];
+/**
+ * Navigates client-side when the URL is a page route in the app. URLs the client router can't
+ * reach (`+server.ts` endpoints, static files, external URLs) fall back to a full browser
+ * navigation. Cancelled navigations resolve quietly; any other failure rejects.
+ */
+export async function navigateTo(url) {
+    const resolved = resolve(url);
+    try {
+        await goto(resolved);
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        if (FALLBACK_ERRORS.some((code) => message.includes(code))) {
+            window.location.assign(resolved);
+            return;
+        }
+        if (CANCELLED_ERRORS.includes(message))
+            return;
+        throw error;
+    }
 }

package/dist/util/interceptLinkClick.js

@@ -26,8 +26,25 @@ export function interceptLinkClick(event, options) {
     if (event.button !== 0) {
         return;
     }
+    // Honour SvelteKit's standard opt-outs from client-side navigation
+    const anchor = event.currentTarget instanceof HTMLAnchorElement ? event.currentTarget : null;
+    if (anchor && isClientNavOptOut(anchor)) {
+        return;
+    }
     // Prevent default navigation and use SvelteKit's client-side navigation
     event.preventDefault();
-    if (href)
-        navigateTo(href);
+    navigateTo(href).catch((error) => {
+        console.error(error);
+        // The click must still go somewhere, as a plain anchor would
+        window.location.assign(anchor?.href ?? href);
+    });
+}
+/** `download`, `rel="external"` and `data-sveltekit-reload` (on the link or an ancestor) */
+function isClientNavOptOut(anchor) {
+    if (anchor.hasAttribute('download'))
+        return true;
+    if (anchor.relList.contains('external'))
+        return true;
+    const reload = anchor.closest('[data-sveltekit-reload]')?.getAttribute('data-sveltekit-reload');
+    return reload != null && reload !== 'off';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",
@@ -53,7 +53,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^4.0.0",
-    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/kit": "^3.0.1",
     "@sveltejs/package": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/node": "^26.6.4",
@@ -62,10 +62,10 @@
     "prettier-plugin-svelte": "^4.1.1",
     "publint": "^0.3.25",
     "rimraf": "^6.1.3",
-    "svelte": "^5.57.1",
+    "svelte": "^5.57.2",
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
-    "vite": "^8.3.2"
+    "vite": "^8.3.3"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
@@ -76,13 +76,13 @@
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.2",
     "@codemirror/lang-sql": "^6.10.0",
-    "@codemirror/language": "^6.12.4",
-    "@codemirror/legacy-modes": "^6.5.4",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/legacy-modes": "^6.5.5",
     "@codemirror/lint": "^6.9.7",
     "@codemirror/search": "^6.7.2",
     "@codemirror/state": "^6.7.6",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.13",
+    "@codemirror/view": "^6.43.14",
     "@lezer/highlight": "^1.2.5",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-bubble-menu": "^3.31.4",