svelte-multiselect 11.3.0 → 11.4.0

package/dist/MultiSelect.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MultiSelectProps } from './types';
 declare function $$render<Option extends import('./types').Option>(): {
     props: MultiSelectProps<Option>;
     exports: {};
-    bindings: "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
+    bindings: "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "maxSelect" | "options" | "outerDiv" | "searchText";
     slots: {};
     events: {};
 };
@@ -10,7 +10,7 @@ declare class __sveltets_Render<Option extends import('./types').Option> {
     props(): ReturnType<typeof $$render<Option>>['props'];
     events(): ReturnType<typeof $$render<Option>>['events'];
     slots(): ReturnType<typeof $$render<Option>>['slots'];
-    bindings(): "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
+    bindings(): "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "maxSelect" | "options" | "outerDiv" | "searchText";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/Nav.svelte

@@ -1,8 +1,8 @@
 <script
   lang="ts"
-  generics="Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]"
->import { Icon } from './';
-import { click_outside } from './';
+  generics="Route extends string | [string, string] | [string, string[]]"
+>import { click_outside } from './attachments';
+import Icon from './Icon.svelte';
 let { routes = [], children, link, menu_props, link_props, page, labels, ...rest } = $props();
 let is_open = $state(false);
 let hovered_dropdown = $state(null);
@@ -27,11 +27,9 @@ function toggle_dropdown(href, focus_first = false) {
     // Focus management for keyboard users
     if (is_opening && focus_first) {
         setTimeout(() => {
-            const dropdown = document.querySelector(`.dropdown-wrapper[data-href="${href}"]`);
-            const first_link = dropdown?.querySelector(`.dropdown a`);
-            if (first_link instanceof HTMLElement) {
-                first_link.focus();
-            }
+            const dropdown = document.querySelector(`.dropdown[data-href="${href}"]`);
+            const first_link = dropdown?.querySelector(`[role="menuitem"]`);
+            first_link?.focus();
         }, 0);
     }
 }
@@ -52,11 +50,9 @@ function handle_dropdown_keydown(event, href, sub_routes) {
         const direction = key === `ArrowDown` ? 1 : -1;
         const new_index = Math.max(0, Math.min(sub_routes.length - 1, focused_item_index + direction));
         focused_item_index = new_index;
-        const dropdown = document.querySelector(`.dropdown-wrapper[data-href="${href}"]`);
-        const links = dropdown?.querySelectorAll(`.dropdown a`);
-        if (links?.[new_index] instanceof HTMLElement) {
-            links[new_index].focus();
-        }
+        const dropdown = document.querySelector(`.dropdown[data-href="${href}"]`);
+        const links = dropdown?.querySelectorAll(`[role="menuitem"]`);
+        links?.[new_index]?.focus();
     }
     // Open dropdown with ArrowDown when closed
     if (hovered_dropdown !== href && key === `ArrowDown`) {
@@ -70,8 +66,8 @@ function handle_dropdown_item_keydown(event, href) {
         close_menus();
         // Return focus to dropdown toggle button
         document
-            .querySelector(`.dropdown-wrapper[data-href="${href}"]`)
-            ?.querySelector(`.dropdown-toggle`)
+            .querySelector(`.dropdown[data-href="${href}"]`)
+            ?.querySelector(`[data-dropdown-toggle]`)
             ?.focus();
     }
 }
@@ -110,18 +106,18 @@ function parse_route(route) {
 <nav
   {...rest}
   {@attach click_outside({ callback: close_menus })}
-  class="bleed-1400 {rest.class ?? ``}"
 >
   <button
-    class="burger-button"
+    class="burger"
+    type="button"
     onclick={() => is_open = !is_open}
     aria-label="Toggle navigation menu"
     aria-expanded={is_open}
     aria-controls={panel_id}
   >
-    <span class="burger-line"></span>
-    <span class="burger-line"></span>
-    <span class="burger-line"></span>
+    <span aria-hidden="true"></span>
+    <span aria-hidden="true"></span>
+    <span aria-hidden="true"></span>
   </button>
 
   <div
@@ -143,7 +139,7 @@ function parse_route(route) {
         {@const parent_page_exists = sub_routes.includes(href)}
         {@const filtered_sub_routes = sub_routes.filter((route) => route !== href)}
         <div
-          class="dropdown-wrapper"
+          class="dropdown"
           class:active={child_is_active}
           data-href={href}
           role="group"
@@ -158,20 +154,18 @@ function parse_route(route) {
             }
           }}
         >
-          <div class="dropdown-trigger-wrapper">
-            <svelte:element
-              this={parent_page_exists ? `a` : `span`}
-              href={parent_page_exists ? href : undefined}
-              class="dropdown-trigger"
-              aria-current={is_current(href)}
-              onclick={close_menus}
-              role={parent_page_exists ? undefined : `button`}
-              style={parent.style}
-            >
-              {@html parent.label}
-            </svelte:element>
+          <div>
+            {#if parent_page_exists}
+              {@const { label, style } = parent}
+              <a {href} aria-current={is_current(href)} onclick={close_menus} {style}>
+                {@html label}
+              </a>
+            {:else}
+              <span style={parent.style}>{@html parent.label}</span>
+            {/if}
             <button
-              class="dropdown-toggle"
+              type="button"
+              data-dropdown-toggle
               aria-label="Toggle {parent.label} submenu"
               aria-expanded={hovered_dropdown === href}
               aria-haspopup="true"
@@ -185,7 +179,6 @@ function parse_route(route) {
             </button>
           </div>
           <div
-            class="dropdown"
             class:visible={hovered_dropdown === href}
             role="menu"
             tabindex="-1"
@@ -258,6 +251,7 @@ function parse_route(route) {
     display: flex;
     gap: 1em;
     place-content: center;
+    place-items: center;
     flex-wrap: wrap;
     padding: 0.5em;
   }
@@ -277,13 +271,14 @@ function parse_route(route) {
   }
 
   /* Dropdown styles */
-  .dropdown-wrapper {
+  .dropdown {
     position: relative;
   }
-  .dropdown-wrapper.active .dropdown-trigger {
+  .dropdown.active > div:first-child a,
+  .dropdown.active > div:first-child span {
     color: var(--nav-link-active-color);
   }
-  .dropdown-wrapper::after {
+  .dropdown::after {
     content: '';
     position: absolute;
     top: 100%;
@@ -291,27 +286,28 @@ function parse_route(route) {
     right: 0;
     height: var(--nav-dropdown-margin, 3pt);
   }
-  .dropdown-trigger-wrapper {
+  .dropdown > div:first-child {
     display: flex;
     align-items: center;
     gap: 0;
     border-radius: var(--nav-border-radius);
     transition: background-color 0.2s;
   }
-  .dropdown-trigger-wrapper:hover {
+  .dropdown > div:first-child:hover {
     background-color: var(--nav-link-bg-hover);
   }
-  .dropdown-trigger {
+  .dropdown > div:first-child > a,
+  .dropdown > div:first-child > span {
     line-height: 1.3;
     padding: 1pt 5pt;
     text-decoration: none;
     color: inherit;
     border-radius: var(--nav-border-radius) 0 0 var(--nav-border-radius);
   }
-  .dropdown-trigger[aria-current='page'] {
+  .dropdown > div:first-child > a[aria-current='page'] {
     color: var(--nav-link-active-color);
   }
-  .dropdown-toggle {
+  .dropdown > div:first-child > button {
     padding: 1pt 3pt;
     border: none;
     background: transparent;
@@ -322,7 +318,7 @@ function parse_route(route) {
     justify-content: center;
     border-radius: 0 var(--nav-border-radius) var(--nav-border-radius) 0;
   }
-  .dropdown {
+  .dropdown > div:last-child {
     position: absolute;
     top: 100%;
     left: 0;
@@ -338,10 +334,10 @@ function parse_route(route) {
     gap: var(--nav-dropdown-gap, 5pt);
     z-index: var(--nav-dropdown-z-index, 100);
   }
-  .dropdown.visible {
+  .dropdown > div:last-child.visible {
     display: flex;
   }
-  .dropdown a {
+  .dropdown > div:last-child a {
     padding: var(--nav-dropdown-link-padding, 1pt 4pt);
     border-radius: var(--nav-border-radius);
     text-decoration: none;
@@ -349,14 +345,14 @@ function parse_route(route) {
     white-space: nowrap;
     transition: background-color 0.2s;
   }
-  .dropdown a:hover {
+  .dropdown > div:last-child a:hover {
     background-color: var(--nav-link-bg-hover);
   }
-  .dropdown a[aria-current='page'] {
+  .dropdown > div:last-child a[aria-current='page'] {
     color: var(--nav-link-active-color);
   }
   /* Mobile burger button */
-  .burger-button {
+  .burger {
     display: none;
     position: fixed;
     top: 1rem;
@@ -369,25 +365,25 @@ function parse_route(route) {
     padding: 0;
     z-index: var(--nav-toggle-btn-z-index, 10);
   }
-  .burger-line {
+  .burger span {
     height: 0.18rem;
     background-color: var(--text-color);
     border-radius: 8px;
     transition: all 0.2s linear;
     transform-origin: 1px;
   }
-  .burger-button[aria-expanded='true'] .burger-line:first-child {
+  .burger[aria-expanded='true'] span:first-child {
     transform: rotate(45deg);
   }
-  .burger-button[aria-expanded='true'] .burger-line:nth-child(2) {
+  .burger[aria-expanded='true'] span:nth-child(2) {
     opacity: 0;
   }
-  .burger-button[aria-expanded='true'] .burger-line:nth-child(3) {
+  .burger[aria-expanded='true'] span:nth-child(3) {
     transform: rotate(-45deg);
   }
   /* Mobile styles */
   @media (max-width: 767px) {
-    .burger-button {
+    .burger {
       display: flex;
     }
     .menu {
@@ -413,29 +409,30 @@ function parse_route(route) {
       visibility: visible;
     }
     .menu > a,
-    .dropdown-wrapper {
+    .dropdown {
       padding: 2pt 8pt;
     }
 
     /* Mobile dropdown styles - show as expandable section */
-    .dropdown-wrapper {
+    .dropdown {
       flex-direction: column;
       align-items: stretch;
     }
-    .dropdown-trigger-wrapper {
+    .dropdown > div:first-child {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
-    .dropdown-trigger {
+    .dropdown > div:first-child > a,
+    .dropdown > div:first-child > span {
       flex: 1;
       border-radius: var(--nav-border-radius);
     }
-    .dropdown-toggle {
+    .dropdown > div:first-child > button {
       padding: 4pt 8pt;
       border-radius: var(--nav-border-radius);
     }
-    .dropdown {
+    .dropdown > div:last-child {
       position: static;
       border: none;
       box-shadow: none;

package/dist/Nav.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Page } from '@sveltejs/kit';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-declare function $$render<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(): {
+declare function $$render<Route extends string | [string, string] | [string, string[]]>(): {
     props: {
         routes: Route[];
         children?: Snippet<[{
@@ -23,7 +23,7 @@ declare function $$render<Route extends string | [string, string] | [string, str
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]> {
+declare class __sveltets_Render<Route extends string | [string, string] | [string, string[]]> {
     props(): ReturnType<typeof $$render<Route>>['props'];
     events(): ReturnType<typeof $$render<Route>>['events'];
     slots(): ReturnType<typeof $$render<Route>>['slots'];
@@ -31,12 +31,12 @@ declare class __sveltets_Render<Route extends string | [string, string] | [strin
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Route>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Route>['props']>, ReturnType<__sveltets_Render<Route>['events']>, ReturnType<__sveltets_Render<Route>['slots']>> & {
+    new <Route extends string | [string, string] | [string, string[]]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Route>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Route>['props']>, ReturnType<__sveltets_Render<Route>['events']>, ReturnType<__sveltets_Render<Route>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Route>['bindings']>;
     } & ReturnType<__sveltets_Render<Route>['exports']>;
-    <Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]>(internal: unknown, props: ReturnType<__sveltets_Render<Route>['props']> & {}): ReturnType<__sveltets_Render<Route>['exports']>;
+    <Route extends string | [string, string] | [string, string[]]>(internal: unknown, props: ReturnType<__sveltets_Render<Route>['props']> & {}): ReturnType<__sveltets_Render<Route>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Nav: $$IsomorphicComponent;
-type Nav<Route extends string | [string, string] | [string, string[]] = string | [string, string] | [string, string[]]> = InstanceType<typeof Nav<Route>>;
+type Nav<Route extends string | [string, string] | [string, string[]]> = InstanceType<typeof Nav<Route>>;
 export default Nav;

package/dist/attachments.d.ts

@@ -11,20 +11,21 @@ declare global {
 }
 export interface DraggableOptions {
     handle_selector?: string;
+    disabled?: boolean;
     on_drag_start?: (event: MouseEvent) => void;
     on_drag?: (event: MouseEvent) => void;
     on_drag_end?: (event: MouseEvent) => void;
 }
 export declare const draggable: (options?: DraggableOptions) => Attachment;
 export declare function get_html_sort_value(element: HTMLElement): string;
-export declare const sortable: ({ header_selector, asc_class, desc_class, sorted_style, }?: {
-    header_selector?: string | undefined;
-    asc_class?: string | undefined;
-    desc_class?: string | undefined;
-    sorted_style?: {
-        backgroundColor: string;
-    } | undefined;
-}) => (node: HTMLElement) => () => void;
+export interface SortableOptions {
+    header_selector?: string;
+    asc_class?: string;
+    desc_class?: string;
+    sorted_style?: Partial<CSSStyleDeclaration>;
+    disabled?: boolean;
+}
+export declare const sortable: (options?: SortableOptions) => (node: HTMLElement) => (() => void) | undefined;
 export type HighlightOptions = {
     query?: string;
     disabled?: boolean;
@@ -33,6 +34,13 @@ export type HighlightOptions = {
     css_class?: string;
 };
 export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => boolean) | undefined;
+/**
+ * Options for the tooltip attachment.
+ *
+ * @security Tooltip content is rendered as HTML. If you allow user-provided content
+ * to be set via `title`, `aria-label`, or `data-title` attributes, you MUST sanitize
+ * it first to prevent XSS attacks. This attachment does not perform any sanitization.
+ */
 export interface TooltipOptions {
     content?: string;
     placement?: `top` | `bottom` | `left` | `right`;
@@ -46,4 +54,4 @@ export type ClickOutsideConfig<T extends HTMLElement> = {
     exclude?: string[];
     callback?: (node: T, config: ClickOutsideConfig<T>) => void;
 };
-export declare const click_outside: <T extends HTMLElement>(config?: ClickOutsideConfig<T>) => (node: T) => () => void;
+export declare const click_outside: <T extends HTMLElement>(config?: ClickOutsideConfig<T>) => (node: T) => (() => void) | undefined;

package/dist/attachments.js

@@ -3,6 +3,8 @@ import {} from 'svelte/attachments';
 // @param options - Configuration options for dragging behavior
 // @returns Attachment function that sets up dragging on an element
 export const draggable = (options = {}) => (element) => {
+    if (options.disabled)
+        return;
     const node = element;
     // Use simple variables for maximum performance
     let dragging = false;
@@ -92,23 +94,33 @@ export function get_html_sort_value(element) {
     }
     return element.textContent ?? ``;
 }
-export const sortable = ({ header_selector = `thead th`, asc_class = `table-sort-asc`, desc_class = `table-sort-desc`, sorted_style = { backgroundColor: `rgba(255, 255, 255, 0.1)` }, } = {}) => (node) => {
-    // this action can be applied to bob-standard HTML tables to make them sortable by
+export const sortable = (options = {}) => (node) => {
+    const { header_selector = `thead th`, asc_class = `table-sort-asc`, desc_class = `table-sort-desc`, sorted_style = { backgroundColor: `rgba(255, 255, 255, 0.1)` }, disabled = false, } = options;
+    if (disabled)
+        return;
+    // This action can be applied to standard HTML tables to make them sortable by
     // clicking on column headers (and clicking again to toggle sorting direction)
     const headers = Array.from(node.querySelectorAll(header_selector));
     let sort_col_idx;
     let sort_dir = 1; // 1 = asc, -1 = desc
-    // Store event listeners for cleanup
-    const event_listeners = [];
+    // Store original state for cleanup
+    const header_state = [];
     for (const [idx, header] of headers.entries()) {
+        const original_text = header.textContent ?? ``;
+        const original_style = header.getAttribute(`style`) ?? ``;
         header.style.cursor = `pointer`; // add cursor pointer to headers
-        const init_styles = header.getAttribute(`style`) ?? ``;
         const click_handler = () => {
-            // reset all headers to initial state
-            for (const header of headers) {
-                header.textContent = header.textContent?.replace(/ ↑| ↓/, ``) ?? ``;
-                header.classList.remove(asc_class, desc_class);
-                header.setAttribute(`style`, init_styles);
+            // reset all headers to unsorted state
+            for (const { header: hdr, original_text, original_style } of header_state) {
+                hdr.textContent = original_text;
+                hdr.classList.remove(asc_class, desc_class);
+                if (original_style) {
+                    hdr.setAttribute(`style`, original_style);
+                }
+                else {
+                    hdr.removeAttribute(`style`);
+                }
+                hdr.style.cursor = `pointer`;
             }
             if (idx === sort_col_idx) {
                 sort_dir *= -1; // reverse sort direction
@@ -147,13 +159,20 @@ export const sortable = ({ header_selector = `thead th`, asc_class = `table-sort
                 table_body.appendChild(row);
         };
         header.addEventListener(`click`, click_handler);
-        event_listeners.push({ header, handler: click_handler });
+        header_state.push({ header, handler: click_handler, original_text, original_style });
     }
-    // Return cleanup function
+    // Return cleanup function that fully restores original state
     return () => {
-        for (const { header, handler } of event_listeners) {
+        for (const { header, handler, original_text, original_style } of header_state) {
             header.removeEventListener(`click`, handler);
-            header.style.cursor = ``; // Reset cursor
+            header.textContent = original_text;
+            header.classList.remove(asc_class, desc_class);
+            if (original_style) {
+                header.setAttribute(`style`, original_style);
+            }
+            else {
+                header.removeAttribute(`style`);
+            }
         }
     };
 };
@@ -255,7 +274,8 @@ export const tooltip = (options = {}) => (node) => {
     function setup_tooltip(element) {
         if (!element || safe_options.disabled)
             return;
-        const content = safe_options.content || element.title ||
+        // Use let so content can be updated reactively
+        let content = safe_options.content || element.title ||
             element.getAttribute(`aria-label`) || element.getAttribute(`data-title`);
         if (!content)
             return;
@@ -265,6 +285,36 @@ export const tooltip = (options = {}) => (node) => {
             element.setAttribute(`data-original-title`, element.title);
             element.removeAttribute(`title`);
         }
+        // Reactively update content when tooltip attributes change
+        const tooltip_attrs = [`title`, `aria-label`, `data-title`];
+        const observer = new MutationObserver((mutations) => {
+            if (safe_options.content)
+                return; // custom content takes precedence
+            for (const { type, attributeName } of mutations) {
+                if (type !== `attributes` || !attributeName)
+                    continue;
+                const new_content = element.getAttribute(attributeName);
+                // null = attribute removed (by us), skip entirely
+                if (new_content === null)
+                    continue;
+                // Always remove title to prevent browser's native tooltip (even if empty)
+                // Disconnect observer temporarily to avoid re-entrancy from our own removal
+                if (attributeName === `title`) {
+                    observer.disconnect();
+                    element.removeAttribute(`title`);
+                    observer.observe(element, { attributes: true, attributeFilter: tooltip_attrs });
+                }
+                // Only update content if non-empty
+                if (!new_content)
+                    continue;
+                content = new_content;
+                // Only update tooltip if this element owns it
+                if (current_tooltip?._owner === element) {
+                    current_tooltip.innerHTML = content.replace(/\r/g, `<br/>`);
+                }
+            }
+        });
+        observer.observe(element, { attributes: true, attributeFilter: tooltip_attrs });
         function show_tooltip() {
             clear_tooltip();
             show_timeout = setTimeout(() => {
@@ -277,7 +327,7 @@ export const tooltip = (options = {}) => (node) => {
           position: absolute; z-index: 9999; opacity: 0;
           background: var(--tooltip-bg, #333); color: var(--text-color, white); border: var(--tooltip-border, none);
           padding: var(--tooltip-padding, 6px 10px); border-radius: var(--tooltip-radius, 6px); font-size: var(--tooltip-font-size, 13px); line-height: 1.4;
-          max-width: var(--tooltip-max-width, 280px); word-wrap: break-word; pointer-events: none;
+          max-width: var(--tooltip-max-width, 280px); word-wrap: break-word; text-wrap: balance; pointer-events: none;
           filter: var(--tooltip-shadow, drop-shadow(0 2px 8px rgba(0,0,0,0.25))); transition: opacity 0.15s ease-out;
         `;
                 // Apply custom styles if provided (these will override base styles due to CSS specificity)
@@ -422,7 +472,7 @@ export const tooltip = (options = {}) => (node) => {
                 tooltip.style.top = `${top + globalThis.scrollY}px`;
                 const custom_opacity = trigger_styles.getPropertyValue(`--tooltip-opacity`).trim();
                 tooltip.style.opacity = custom_opacity || `1`;
-                current_tooltip = tooltip;
+                current_tooltip = Object.assign(tooltip, { _owner: element });
             }, safe_options.delay || 100);
         }
         function hide_tooltip() {
@@ -435,14 +485,22 @@ export const tooltip = (options = {}) => (node) => {
                 }
             }
         }
+        function handle_scroll(event) {
+            // Hide if document or any ancestor scrolls (would move element). Skip internal element scrolls.
+            const target = event.target;
+            if (target instanceof Node && target !== element && target.contains(element)) {
+                hide_tooltip();
+            }
+        }
         const events = [`mouseenter`, `mouseleave`, `focus`, `blur`];
         const handlers = [show_tooltip, hide_tooltip, show_tooltip, hide_tooltip];
         events.forEach((event, idx) => element.addEventListener(event, handlers[idx]));
-        // Hide tooltip when user scrolls
-        globalThis.addEventListener(`scroll`, hide_tooltip, true);
+        // Hide tooltip when user scrolls the page (not element-level scrolls like input fields)
+        globalThis.addEventListener(`scroll`, handle_scroll, true);
         return () => {
+            observer.disconnect();
             events.forEach((event, idx) => element.removeEventListener(event, handlers[idx]));
-            globalThis.removeEventListener(`scroll`, hide_tooltip, true);
+            globalThis.removeEventListener(`scroll`, handle_scroll, true);
             const original_title = element.getAttribute(`data-original-title`);
             if (original_title) {
                 element.setAttribute(`title`, original_title);
@@ -468,9 +526,9 @@ export const tooltip = (options = {}) => (node) => {
 };
 export const click_outside = (config = {}) => (node) => {
     const { callback, enabled = true, exclude = [] } = config;
+    if (!enabled)
+        return; // Early return avoids registering unused listener
     function handle_click(event) {
-        if (!enabled)
-            return;
         const target = event.target;
         const path = event.composedPath();
         // Check if click target is the node or inside it

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { FlipParams } from 'svelte/animate';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Option = string | number | ObjectOption;
@@ -16,6 +17,10 @@ export type ObjectOption = {
     style?: OptionStyle;
     [key: string]: unknown;
 };
+export type PlaceholderConfig = {
+    text: string;
+    persistent?: boolean;
+};
 export interface MultiSelectEvents<T extends Option = Option> {
     onadd?: (data: {
         option: T;
@@ -29,10 +34,13 @@ export interface MultiSelectEvents<T extends Option = Option> {
     onremoveAll?: (data: {
         options: T[];
     }) => unknown;
+    onselectAll?: (data: {
+        options: T[];
+    }) => unknown;
     onchange?: (data: {
         option?: T;
         options?: T[];
-        type: `add` | `remove` | `removeAll`;
+        type: `add` | `remove` | `removeAll` | `selectAll`;
     }) => unknown;
     onopen?: (data: {
         event: Event;
@@ -41,6 +49,23 @@ export interface MultiSelectEvents<T extends Option = Option> {
         event: Event;
     }) => unknown;
 }
+export interface LoadOptionsParams {
+    search: string;
+    offset: number;
+    limit: number;
+}
+export interface LoadOptionsResult<T extends Option = Option> {
+    options: T[];
+    hasMore: boolean;
+}
+export type LoadOptionsFn<T extends Option = Option> = (params: LoadOptionsParams) => Promise<LoadOptionsResult<T>>;
+export interface LoadOptionsConfig<T extends Option = Option> {
+    fetch: LoadOptionsFn<T>;
+    debounceMs?: number;
+    batchSize?: number;
+    onOpen?: boolean;
+}
+export type LoadOptions<T extends Option = Option> = LoadOptionsFn<T> | LoadOptionsConfig<T>;
 type AfterInputProps = Pick<MultiSelectProps, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
 type UserMsgProps = {
     searchText: string;
@@ -73,7 +98,7 @@ export interface PortalParams {
     target_node?: HTMLElement | null;
     active?: boolean;
 }
-export interface MultiSelectProps<T extends Option = Option> extends MultiSelectEvents<T>, MultiSelectSnippets<T>, Omit<HTMLAttributes<HTMLDivElement>, `children` | `onchange` | `onclose`> {
+export interface MultiSelectProps<T extends Option = Option> extends MultiSelectEvents<T>, MultiSelectSnippets<T>, Omit<HTMLAttributes<HTMLDivElement>, `children` | `onchange` | `onclose` | `placeholder`> {
     activeIndex?: number | null;
     activeOption?: T | null;
     createOptionMsg?: string | null;
@@ -116,12 +141,12 @@ export interface MultiSelectProps<T extends Option = Option> extends MultiSelect
     name?: string | null;
     noMatchingOptionsMsg?: string;
     open?: boolean;
-    options: T[];
+    options?: T[];
     outerDiv?: HTMLDivElement | null;
     outerDivClass?: string;
     parseLabelsAsHtml?: boolean;
     pattern?: string | null;
-    placeholder?: string | null;
+    placeholder?: string | PlaceholderConfig | null;
     removeAllTitle?: string;
     removeBtnTitle?: string;
     minSelect?: number | null;
@@ -138,5 +163,9 @@ export interface MultiSelectProps<T extends Option = Option> extends MultiSelect
     ulOptionsStyle?: string | null;
     value?: T | T[] | null;
     portal?: PortalParams;
+    selectAllOption?: boolean | string;
+    liSelectAllClass?: string;
+    loadOptions?: LoadOptions<T>;
+    selectedFlipParams?: FlipParams;
 }
 export {};

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import type { Option } from './types';
+export declare const is_object: (val: unknown) => val is Record<string, unknown>;
 export declare const get_label: (opt: Option) => string | number;
 export declare function get_style(option: Option, key?: `selected` | `option` | null | undefined): string;
 export declare function fuzzy_match(search_text: string, target_text: string): boolean;