svelte-multiselect 11.2.1 → 11.2.3

package/dist/CmdPalette.svelte.d.ts

@@ -14,6 +14,6 @@ interface Props extends Omit<MultiSelectProps<Action>, `options`> {
     input?: HTMLInputElement | null;
     placeholder?: string;
 }
-declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "dialog" | "input">;
+declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "input" | "dialog">;
 type CmdPalette = ReturnType<typeof CmdPalette>;
 export default CmdPalette;

package/dist/CopyButton.svelte

@@ -6,21 +6,25 @@ let { content = ``, state = $bindable(`ready`), global_selector = null, global =
     error: { icon: `Alert`, text: `` },
 }, children, ...rest } = $props();
 $effect(() => {
-    if (global || global_selector) {
-        for (const node of document.querySelectorAll(global_selector ?? `pre > code`)) {
-            // skip if <pre> already contains a button (presumably for copy)
-            const pre = node.parentElement;
-            if (!pre || (skip_selector && pre.querySelector(skip_selector)))
-                continue;
-            mount(CopyButton, {
-                target: pre,
-                props: {
-                    content: node.textContent ?? ``,
-                    style: `position: absolute; top: 9pt; right: 9pt;`,
-                },
-            });
+    if (!global && !global_selector)
+        return;
+    const apply_copy_buttons = () => {
+        const btn_style = `position: absolute; top: 9pt; right: 9pt; ${rest.style ?? ``}`;
+        for (const code of document.querySelectorAll(global_selector ?? `pre > code`)) {
+            const pre = code.parentElement;
+            const content = code.textContent ?? ``;
+            if (pre && !(skip_selector && pre.querySelector(skip_selector))) {
+                mount(CopyButton, {
+                    target: pre,
+                    props: { content, as, labels, ...rest, style: btn_style },
+                });
+            }
         }
-    }
+    };
+    apply_copy_buttons();
+    const observer = new MutationObserver(apply_copy_buttons);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
 });
 async function copy() {
     try {

package/dist/FileDetails.svelte

@@ -18,7 +18,7 @@ export {};
 
 <svelte:element this={as} {style}>
   {#each files as file, idx (file.title)}
-    {@const { title, content, _language = default_lang } = file ?? {}}
+    {@const { title, content, language = default_lang } = file ?? {}}
     <li>
       <!-- https://github.com/sveltejs/svelte/issues/12721#issuecomment-2269544690 -->
       <details bind:this={file.node}>
@@ -27,12 +27,12 @@ export {};
             {#if title_snippet}
               {@render title_snippet({ idx, ...file })}
             {:else}
-              <code>{title.split(`/`).at(-1)}</code>
+              {@html title}
             {/if}
           </summary>
         {/if}
 
-        <pre><code>{@html content}</code></pre>
+        <pre class="language-{language}"><code>{content}</code></pre>
         <!-- <pre><code>{@html hljs.highlight(content, { language }).value}</code></pre> -->
       </details>
     </li>

package/dist/MultiSelect.svelte

@@ -2,7 +2,7 @@
 import { tick } from 'svelte';
 import { flip } from 'svelte/animate';
 import { get_label, get_style, highlight_matching_nodes } from './utils';
-let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptionMsg = `Create this option...`, allowUserOptions = false, allowEmpty = false, autocomplete = `off`, autoScroll = true, breakpoint = 800, defaultDisabledTitle = `This option is disabled`, disabled = false, disabledInputTitle = `This input is disabled`, duplicateOptionMsg = `This option is already selected`, duplicates = false, key = (opt) => `${get_label(opt)}`.toLowerCase(), filterFunc = (opt, searchText) => {
+let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptionMsg = `Create this option...`, allowUserOptions = false, allowEmpty = false, autocomplete = `off`, autoScroll = true, breakpoint = 800, defaultDisabledTitle = `This option is disabled`, disabled = false, disabledInputTitle = `This input is disabled`, duplicateOptionMsg = `This option is already selected`, duplicates = false, keepSelectedInDropdown = false, key = (opt) => `${get_label(opt)}`.toLowerCase(), filterFunc = (opt, searchText) => {
     if (!searchText)
         return true;
     return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
@@ -62,7 +62,9 @@ let window_width = $state(0);
 $effect.pre(() => {
     matchingOptions = options.filter((opt) => filterFunc(opt, searchText) &&
         // remove already selected options from dropdown list unless duplicate selections are allowed
-        (!selected.map(key).includes(key(opt)) || duplicates));
+        // or keepSelectedInDropdown is enabled
+        (!selected.map(key).includes(key(opt)) || duplicates ||
+            keepSelectedInDropdown));
 });
 // raise if matchingOptions[activeIndex] does not yield a value
 if (activeIndex !== null && !matchingOptions[activeIndex]) {
@@ -72,6 +74,17 @@ if (activeIndex !== null && !matchingOptions[activeIndex]) {
 $effect(() => {
     activeOption = matchingOptions[activeIndex ?? -1] ?? null;
 });
+// toggle an option between selected and unselected states (for keepSelectedInDropdown mode)
+function toggle_option(option_to_toggle, event) {
+    const is_currently_selected = selected.map(key).includes(key(option_to_toggle));
+    if (is_currently_selected) {
+        if (minSelect === null || selected.length > minSelect) { // Only remove if it wouldn't violate minSelect
+            remove(option_to_toggle, event);
+        }
+    }
+    else
+        add(option_to_toggle, event);
+}
 // add an option to selected list
 function add(option_to_add, event) {
     event.stopPropagation();
@@ -115,10 +128,9 @@ function add(option_to_add, event) {
             console.error(`MultiSelect: encountered falsy option ${option_to_add}`);
             return;
         }
-        if (maxSelect === 1) {
-            // for maxSelect = 1 we always replace current option with new one
+        // for maxSelect = 1 we always replace current option with new one
+        if (maxSelect === 1)
             selected = [option_to_add];
-        }
         else {
             selected = [...selected, option_to_add];
             if (sortSelected === true) {
@@ -132,7 +144,7 @@ function add(option_to_add, event) {
                 selected = selected.sort(sortSelected);
             }
         }
-        const reached_max_select = selected.length === maxSelect;
+        const reached_max_select = selected.length >= (maxSelect ?? Infinity);
         const dropdown_should_close = closeDropdownOnSelect === true ||
             closeDropdownOnSelect === `retain-focus` ||
             (closeDropdownOnSelect === `if-mobile` && window_width &&
@@ -141,9 +153,8 @@ function add(option_to_add, event) {
         if (reached_max_select || dropdown_should_close) {
             close_dropdown(event, should_retain_focus);
         }
-        else if (!dropdown_should_close) {
+        else if (!dropdown_should_close)
             input?.focus();
-        }
         onadd?.({ option: option_to_add });
         onchange?.({ option: option_to_add, type: `add` });
         invalid = false; // reset error status whenever new items are selected
@@ -203,8 +214,12 @@ async function handle_keydown(event) {
         event.stopPropagation();
         event.preventDefault(); // prevent enter key from triggering form submission
         if (activeOption) {
-            if (selected.includes(activeOption))
-                remove(activeOption, event);
+            if (selected.includes(activeOption)) {
+                // Only remove if it wouldn't violate minSelect
+                if (minSelect === null || selected.length > minSelect) {
+                    remove(activeOption, event);
+                }
+            }
             else
                 add(activeOption, event);
             searchText = ``;
@@ -256,8 +271,11 @@ async function handle_keydown(event) {
     } // on backspace key: remove last selected option
     else if (event.key === `Backspace` && selected.length > 0 && !searchText) {
         event.stopPropagation();
+        // Only remove option if it wouldn't violate minSelect
+        if (minSelect === null || selected.length > minSelect) {
+            remove(selected.at(-1), event);
+        }
         // Don't prevent default, allow normal backspace behavior if not removing
-        remove(selected.at(-1), event);
     } // make first matching option active on any keypress (if none of the above special cases match)
     else if (matchingOptions.length > 0 && activeIndex === null) {
         // Don't stop propagation or prevent default here, allow normal character input
@@ -266,11 +284,23 @@ async function handle_keydown(event) {
 }
 function remove_all(event) {
     event.stopPropagation();
-    selected = []; // Set selected first
-    searchText = ``;
-    // Now trigger change events
-    onremoveAll?.({ options: selected });
+    // Keep the first minSelect items, remove the rest
+    let removed_options = [];
+    if (minSelect === null) {
+        // If no minSelect constraint, remove all
+        removed_options = selected;
+        selected = [];
+        searchText = ``;
+    }
+    else if (selected.length > minSelect) {
+        // Keep the first minSelect items
+        removed_options = selected.slice(minSelect);
+        selected = selected.slice(0, minSelect);
+        searchText = ``;
+    }
+    onremoveAll?.({ options: removed_options });
     onchange?.({ options: selected, type: `removeAll` });
+    // If selected.length <= minSelect, do nothing (can't remove any more)
 }
 let is_selected = $derived((label) => selected.map(get_label).includes(label));
 const if_enter_or_space = (handler) => (event) => {
@@ -312,6 +342,17 @@ const dragstart = (idx) => (event) => {
     event.dataTransfer.setData(`text/plain`, `${idx}`);
 };
 let ul_options = $state();
+// Update highlights whenever search text changes (after ul_options is available)
+$effect(() => {
+    if (ul_options && highlightMatches) {
+        if (searchText) {
+            highlight_matching_nodes(ul_options, searchText, noMatchingOptionsMsg);
+        }
+        else if (typeof CSS !== `undefined` && CSS.highlights) {
+            CSS.highlights.delete?.(`sms-search-matches`); // Clear highlights when search text is empty
+        }
+    }
+});
 // highlight text matching user-entered search text in available options
 function highlight_matching_options(event) {
     if (!highlightMatches || !ul_options)
@@ -581,6 +622,7 @@ function portal(node, params) {
         width="14pt"
         style="margin: 0 2pt"
         data-name="disabled-icon"
+        aria-disabled="true"
       />
     {/if}
   {:else if selected.length > 0}
@@ -641,7 +683,9 @@ function portal(node, params) {
         null}
         <li
           onclick={(event) => {
-            if (!disabled) add(optionItem, event)
+            if (disabled) return
+            if (keepSelectedInDropdown) toggle_option(optionItem, event)
+            else add(optionItem, event)
           }}
           title={disabled ? disabledTitle : (is_selected(label) && selectedTitle) || title}
           class:selected={is_selected(label)}
@@ -660,10 +704,20 @@ function portal(node, params) {
           onkeydown={(event) => {
             if (!disabled && (event.key === `Enter` || event.code === `Space`)) {
               event.preventDefault()
-              add(optionItem, event)
+              if (keepSelectedInDropdown) toggle_option(optionItem, event)
+              else add(optionItem, event)
             }
           }}
         >
+          {#if keepSelectedInDropdown === `checkboxes`}
+            <input
+              type="checkbox"
+              class="option-checkbox"
+              checked={is_selected(label)}
+              aria-label="Toggle {get_label(optionItem)}"
+              tabindex="-1"
+            />
+          {/if}
           {#if option}
             {@render option({
           option: optionItem,
@@ -895,11 +949,13 @@ function portal(node, params) {
     visibility: hidden;
     opacity: 0;
     transform: translateY(50px);
+    pointer-events: none;
   }
   ul.options > li {
-    padding: 3pt 2ex;
+    padding: 3pt 1ex;
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
+    border-left: 3px solid transparent;
   }
   ul.options .user-msg {
     /* block needed so vertical padding applies to span */
@@ -907,8 +963,11 @@ function portal(node, params) {
     padding: 3pt 2ex;
   }
   ul.options > li.selected {
-    background: var(--sms-li-selected-bg);
-    color: var(--sms-li-selected-color);
+    background: var(--sms-li-selected-plain-bg, rgba(0, 123, 255, 0.1));
+    border-left: var(
+      --sms-li-selected-plain-border,
+      3px solid var(--sms-active-color, cornflowerblue)
+    );
   }
   ul.options > li.active {
     background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
@@ -918,7 +977,13 @@ function portal(node, params) {
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);
   }
-
+  /* Checkbox styling for keepSelectedInDropdown='checkboxes' mode */
+  ul.options > li > input.option-checkbox {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    accent-color: var(--sms-active-color, cornflowerblue);
+  }
   :is(span.max-select-msg) {
     padding: 0 3pt;
   }

package/dist/MultiSelect.svelte.d.ts

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

package/dist/PrevNext.svelte.d.ts

@@ -1,38 +1,45 @@
 import type { Snippet } from 'svelte';
 export type Item = string | [string, unknown];
-declare class __sveltets_Render<T extends Item> {
-    props(): {
+declare function $$render<T extends Item>(): {
+    props: {
         [key: string]: unknown;
-        items?: T[] | undefined;
+        items?: T[];
         node?: string;
         current?: string;
         log?: `verbose` | `errors` | `silent`;
         nav_options?: {
             replace_state: boolean;
             no_scroll: boolean;
-        } | undefined;
+        };
         titles?: {
             prev: string;
             next: string;
-        } | undefined;
+        };
         onkeyup?: ((obj: {
             prev: Item;
             next: Item;
-        }) => Record<string, string>) | null | undefined;
+        }) => Record<string, string>) | null;
         prev_snippet?: Snippet<[{
             item: Item;
-        }]> | undefined;
+        }]>;
         children?: Snippet<[{
             kind: `prev` | `next`;
             item: Item;
-        }]> | undefined;
+        }]>;
         between?: Snippet<[]>;
         next_snippet?: Snippet<[{
             item: Item;
-        }]> | undefined;
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Item> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/RadioButtons.svelte.d.ts

@@ -3,8 +3,8 @@ type GenericOption = string | number | {
     value: unknown;
     label: string | number;
 };
-declare class __sveltets_Render<Option extends GenericOption> {
-    props(): {
+declare function $$render<Option extends GenericOption>(): {
+    props: {
         [key: string]: unknown;
         options: Option[];
         selected?: string | number | null;
@@ -13,22 +13,29 @@ declare class __sveltets_Render<Option extends GenericOption> {
         disabled?: boolean;
         required?: boolean;
         aria_label?: string | null;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        onchange?: ((event: Event) => void) | undefined;
-        oninput?: ((event: Event) => void) | undefined;
+        onclick?: (event: MouseEvent) => void;
+        onchange?: (event: Event) => void;
+        oninput?: (event: Event) => void;
         option_snippet?: Snippet<[{
             option: Option;
             selected: boolean;
             active: boolean;
-        }]> | undefined;
+        }]>;
         children?: Snippet<[{
             option: Option;
             selected: boolean;
             active: boolean;
-        }]> | undefined;
+        }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Option extends GenericOption> {
+    props(): ReturnType<typeof $$render<Option>>['props'];
+    events(): ReturnType<typeof $$render<Option>>['events'];
+    slots(): ReturnType<typeof $$render<Option>>['slots'];
     bindings(): "selected";
     exports(): {};
 }

package/dist/attachments.d.ts

@@ -0,0 +1,46 @@
+import { type Attachment } from 'svelte/attachments';
+declare global {
+    interface CSS {
+        highlights: HighlightRegistry;
+    }
+    interface HighlightRegistry extends Map<string, Highlight> {
+        clear(): void;
+        delete(key: string): boolean;
+        set(key: string, value: Highlight): this;
+    }
+}
+export interface DraggableOptions {
+    handle_selector?: string;
+    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;
+type HighlightOptions = {
+    query?: string;
+    disabled?: boolean;
+    node_filter?: (node: Node) => number;
+    css_class?: string;
+};
+export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => void) | undefined;
+export declare const tooltip: (options?: {
+    content?: string;
+    placement?: `top` | `bottom` | `left` | `right`;
+    delay?: number;
+}) => Attachment;
+type ClickOutsideConfig<T extends HTMLElement> = {
+    enabled?: boolean;
+    exclude?: string[];
+    callback?: (node: T, config: ClickOutsideConfig<T>) => void;
+};
+export declare const click_outside: <T extends HTMLElement>(config?: ClickOutsideConfig<T>) => (node: T) => () => void;
+export {};

package/dist/attachments.js

@@ -0,0 +1,400 @@
+import {} from 'svelte/attachments';
+// Svelte 5 attachment factory to make an element draggable
+// @param options - Configuration options for dragging behavior
+// @returns Attachment function that sets up dragging on an element
+export const draggable = (options = {}) => (element) => {
+    const node = element;
+    // Use simple variables for maximum performance
+    let dragging = false;
+    let start = { x: 0, y: 0 };
+    const initial = { left: 0, top: 0 };
+    const handle = options.handle_selector
+        ? node.querySelector(options.handle_selector)
+        : node;
+    if (!handle) {
+        console.warn(`Draggable: handle not found with selector "${options.handle_selector}"`);
+        return;
+    }
+    function handle_mousedown(event) {
+        // Only drag if mousedown is on the handle or its children
+        if (!handle?.contains?.(event.target))
+            return;
+        dragging = true;
+        // For position: fixed elements, use getBoundingClientRect for viewport-relative position
+        const computed_style = getComputedStyle(node);
+        if (computed_style.position === `fixed`) {
+            const rect = node.getBoundingClientRect();
+            initial.left = rect.left;
+            initial.top = rect.top;
+        }
+        else {
+            // For other positioning, use offset values
+            initial.left = node.offsetLeft;
+            initial.top = node.offsetTop;
+        }
+        node.style.left = `${initial.left}px`;
+        node.style.top = `${initial.top}px`;
+        node.style.right = `auto`; // Prevent conflict with left
+        start = { x: event.clientX, y: event.clientY };
+        document.body.style.userSelect = `none`; // Prevent text selection during drag
+        if (handle)
+            handle.style.cursor = `grabbing`;
+        globalThis.addEventListener(`mousemove`, handle_mousemove);
+        globalThis.addEventListener(`mouseup`, handle_mouseup);
+        options.on_drag_start?.(event); // Call optional callback
+    }
+    function handle_mousemove(event) {
+        if (!dragging)
+            return;
+        // Use the exact same calculation as the fast old implementation
+        const dx = event.clientX - start.x;
+        const dy = event.clientY - start.y;
+        node.style.left = `${initial.left + dx}px`;
+        node.style.top = `${initial.top + dy}px`;
+        // Only call callback if it exists (minimize overhead)
+        if (options.on_drag)
+            options.on_drag(event);
+    }
+    function handle_mouseup(event) {
+        if (!dragging)
+            return;
+        dragging = false;
+        event.stopPropagation();
+        document.body.style.userSelect = ``;
+        if (handle)
+            handle.style.cursor = `grab`;
+        globalThis.removeEventListener(`mousemove`, handle_mousemove);
+        globalThis.removeEventListener(`mouseup`, handle_mouseup);
+        options.on_drag_end?.(event); // Call optional callback
+    }
+    if (handle) {
+        handle.addEventListener(`mousedown`, handle_mousedown);
+        handle.style.cursor = `grab`;
+    }
+    // Return cleanup function (this is the attachment pattern)
+    return () => {
+        globalThis.removeEventListener(`mousemove`, handle_mousemove);
+        globalThis.removeEventListener(`mouseup`, handle_mouseup);
+        if (handle) {
+            handle.removeEventListener(`mousedown`, handle_mousedown);
+            handle.style.cursor = ``; // Reset cursor
+        }
+    };
+};
+export function get_html_sort_value(element) {
+    if (element.dataset.sortValue !== undefined) {
+        return element.dataset.sortValue;
+    }
+    for (const child of Array.from(element.children)) {
+        const child_val = get_html_sort_value(child);
+        if (child_val !== ``)
+            return child_val;
+    }
+    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
+    // 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 = [];
+    for (const [idx, header] of headers.entries()) {
+        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);
+            }
+            if (idx === sort_col_idx) {
+                sort_dir *= -1; // reverse sort direction
+            }
+            else {
+                sort_col_idx = idx; // set new sort column index
+                sort_dir = 1; // reset sort direction
+            }
+            header.classList.add(sort_dir > 0 ? asc_class : desc_class);
+            Object.assign(header.style, sorted_style);
+            header.textContent = `${header.textContent?.replace(/ ↑| ↓/, ``)} ${sort_dir > 0 ? `↑` : `↓`}`;
+            const table_body = node.querySelector(`tbody`);
+            if (!table_body)
+                return;
+            // re-sort table
+            const rows = Array.from(table_body.querySelectorAll(`tr`));
+            rows.sort((row_1, row_2) => {
+                const cell_1 = row_1.cells[sort_col_idx];
+                const cell_2 = row_2.cells[sort_col_idx];
+                const val_1 = get_html_sort_value(cell_1);
+                const val_2 = get_html_sort_value(cell_2);
+                if (val_1 === val_2)
+                    return 0;
+                if (val_1 === ``)
+                    return 1; // treat empty string as lower than any value
+                if (val_2 === ``)
+                    return -1; // any value is considered higher than empty string
+                const num_1 = Number(val_1);
+                const num_2 = Number(val_2);
+                if (isNaN(num_1) && isNaN(num_2)) {
+                    return sort_dir * val_1.localeCompare(val_2, undefined, { numeric: true });
+                }
+                return sort_dir * (num_1 - num_2);
+            });
+            for (const row of rows)
+                table_body.appendChild(row);
+        };
+        header.addEventListener(`click`, click_handler);
+        event_listeners.push({ header, handler: click_handler });
+    }
+    // Return cleanup function
+    return () => {
+        for (const { header, handler } of event_listeners) {
+            header.removeEventListener(`click`, handler);
+            header.style.cursor = ``; // Reset cursor
+        }
+    };
+};
+export const highlight_matches = (ops) => (node) => {
+    const { query = ``, disabled = false, node_filter = () => NodeFilter.FILTER_ACCEPT, css_class = `highlight-match`, } = ops;
+    // clear previous ranges from HighlightRegistry
+    CSS.highlights.clear();
+    if (!query || disabled || typeof CSS === `undefined` || !CSS.highlights)
+        return; // abort if CSS highlight API not supported
+    const tree_walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
+        acceptNode: node_filter,
+    });
+    const text_nodes = [];
+    let current_node = tree_walker.nextNode();
+    while (current_node) {
+        text_nodes.push(current_node);
+        current_node = tree_walker.nextNode();
+    }
+    // iterate over all text nodes and find matches
+    const ranges = text_nodes.map((el) => {
+        const text = el.textContent?.toLowerCase();
+        const indices = [];
+        let start_pos = 0;
+        while (text && start_pos < text.length) {
+            const index = text.indexOf(query, start_pos);
+            if (index === -1)
+                break;
+            indices.push(index);
+            start_pos = index + query.length;
+        }
+        // create range object for each str found in the text node
+        return indices.map((index) => {
+            const range = new Range();
+            range.setStart(el, index);
+            range.setEnd(el, index + query?.length);
+            return range;
+        });
+    });
+    // create Highlight object from ranges and add to registry
+    CSS.highlights.set(css_class, new Highlight(...ranges.flat()));
+    return () => {
+        CSS.highlights.delete(css_class);
+    };
+};
+// Global tooltip state to ensure only one tooltip is shown at a time
+let current_tooltip = null;
+let show_timeout;
+let hide_timeout;
+function clear_tooltip() {
+    if (show_timeout)
+        clearTimeout(show_timeout);
+    if (hide_timeout)
+        clearTimeout(hide_timeout);
+    if (current_tooltip) {
+        current_tooltip.remove();
+        current_tooltip = null;
+    }
+}
+export const tooltip = (options = {}) => (node) => {
+    // Handle null/undefined elements
+    if (!node || !(node instanceof HTMLElement))
+        return;
+    // Handle null/undefined options
+    const safe_options = options || {};
+    const cleanup_functions = [];
+    function setup_tooltip(element) {
+        if (!element)
+            return;
+        const content = safe_options.content || element.title ||
+            element.getAttribute(`aria-label`) || element.getAttribute(`data-title`);
+        if (!content)
+            return;
+        // Store original title and remove it to prevent default tooltip
+        // Only store title if we're not using custom content
+        if (element.title && !safe_options.content) {
+            element.setAttribute(`data-original-title`, element.title);
+            element.removeAttribute(`title`);
+        }
+        function show_tooltip() {
+            clear_tooltip();
+            show_timeout = setTimeout(() => {
+                const tooltip = document.createElement(`div`);
+                tooltip.className = `custom-tooltip`;
+                const placement = safe_options.placement || `bottom`;
+                tooltip.setAttribute(`data-placement`, placement);
+                tooltip.style.cssText = `
+          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;
+          filter: var(--tooltip-shadow, drop-shadow(0 2px 8px rgba(0,0,0,0.25))); transition: opacity 0.15s ease-out;
+        `;
+                tooltip.innerHTML = content?.replace(/\r/g, `<br/>`) ?? ``;
+                // Mirror CSS custom properties from the trigger node onto the tooltip element
+                const trigger_styles = getComputedStyle(element);
+                [
+                    `--tooltip-bg`,
+                    `--text-color`,
+                    `--tooltip-border`,
+                    `--tooltip-padding`,
+                    `--tooltip-radius`,
+                    `--tooltip-font-size`,
+                    `--tooltip-shadow`,
+                    `--tooltip-max-width`,
+                    `--tooltip-opacity`,
+                    `--tooltip-arrow-size`,
+                ].forEach((name) => {
+                    const value = trigger_styles.getPropertyValue(name).trim();
+                    if (value)
+                        tooltip.style.setProperty(name, value);
+                });
+                // Arrow element pointing to the trigger, oriented by placement
+                const arrow = document.createElement(`div`);
+                arrow.className = `custom-tooltip-arrow`;
+                arrow.style.cssText =
+                    `position: absolute; width: 0; height: 0; pointer-events: none;`;
+                const arrow_size_raw = trigger_styles.getPropertyValue(`--tooltip-arrow-size`)
+                    .trim();
+                const arrow_size_num = Number.parseInt(arrow_size_raw || ``, 10);
+                const arrow_px = Number.isFinite(arrow_size_num) ? arrow_size_num : 6;
+                if (placement === `top`) {
+                    arrow.style.left = `calc(50% - ${arrow_px}px)`;
+                    arrow.style.bottom = `-${arrow_px}px`;
+                    arrow.style.borderLeft = `${arrow_px}px solid transparent`;
+                    arrow.style.borderRight = `${arrow_px}px solid transparent`;
+                    arrow.style.borderTop = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                }
+                else if (placement === `left`) {
+                    arrow.style.top = `calc(50% - ${arrow_px}px)`;
+                    arrow.style.right = `-${arrow_px}px`;
+                    arrow.style.borderTop = `${arrow_px}px solid transparent`;
+                    arrow.style.borderBottom = `${arrow_px}px solid transparent`;
+                    arrow.style.borderLeft = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                }
+                else if (placement === `right`) {
+                    arrow.style.top = `calc(50% - ${arrow_px}px)`;
+                    arrow.style.left = `-${arrow_px}px`;
+                    arrow.style.borderTop = `${arrow_px}px solid transparent`;
+                    arrow.style.borderBottom = `${arrow_px}px solid transparent`;
+                    arrow.style.borderRight = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                }
+                else { // bottom
+                    arrow.style.left = `calc(50% - ${arrow_px}px)`;
+                    arrow.style.top = `-${arrow_px}px`;
+                    arrow.style.borderLeft = `${arrow_px}px solid transparent`;
+                    arrow.style.borderRight = `${arrow_px}px solid transparent`;
+                    arrow.style.borderBottom = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                }
+                tooltip.appendChild(arrow);
+                document.body.appendChild(tooltip);
+                // Position tooltip
+                const rect = element.getBoundingClientRect();
+                const tooltip_rect = tooltip.getBoundingClientRect();
+                const margin = 12;
+                let top = 0, left = 0;
+                if (placement === `top`) {
+                    top = rect.top - tooltip_rect.height - margin;
+                    left = rect.left + rect.width / 2 - tooltip_rect.width / 2;
+                }
+                else if (placement === `left`) {
+                    top = rect.top + rect.height / 2 - tooltip_rect.height / 2;
+                    left = rect.left - tooltip_rect.width - margin;
+                }
+                else if (placement === `right`) {
+                    top = rect.top + rect.height / 2 - tooltip_rect.height / 2;
+                    left = rect.right + margin;
+                }
+                else { // bottom
+                    top = rect.bottom + margin;
+                    left = rect.left + rect.width / 2 - tooltip_rect.width / 2;
+                }
+                // Keep in viewport
+                left = Math.max(8, Math.min(left, globalThis.innerWidth - tooltip_rect.width - 8));
+                top = Math.max(8, Math.min(top, globalThis.innerHeight - tooltip_rect.height - 8));
+                tooltip.style.left = `${left + globalThis.scrollX}px`;
+                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;
+            }, safe_options.delay || 100);
+        }
+        function hide_tooltip() {
+            clear_tooltip();
+            hide_timeout = setTimeout(() => {
+                if (current_tooltip) {
+                    current_tooltip.style.opacity = `0`;
+                    setTimeout(() => {
+                        if (current_tooltip) {
+                            current_tooltip.remove();
+                            current_tooltip = null;
+                        }
+                    }, 150);
+                }
+            }, 50);
+        }
+        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]));
+        return () => {
+            events.forEach((event, idx) => element.removeEventListener(event, handlers[idx]));
+            const original_title = element.getAttribute(`data-original-title`);
+            if (original_title) {
+                element.setAttribute(`title`, original_title);
+                element.removeAttribute(`data-original-title`);
+            }
+        };
+    }
+    // Setup tooltip for main node and children
+    const main_cleanup = setup_tooltip(node);
+    if (main_cleanup)
+        cleanup_functions.push(main_cleanup);
+    node.querySelectorAll(`[title], [aria-label], [data-title]`).forEach((element) => {
+        const child_cleanup = setup_tooltip(element);
+        if (child_cleanup)
+            cleanup_functions.push(child_cleanup);
+    });
+    if (cleanup_functions.length === 0)
+        return;
+    return () => {
+        cleanup_functions.forEach((cleanup) => cleanup());
+        clear_tooltip();
+    };
+};
+export const click_outside = (config = {}) => (node) => {
+    const { callback, enabled = true, exclude = [] } = config;
+    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
+        if (path.includes(node))
+            return;
+        // Check excluded selectors
+        if (exclude.some((selector) => target.closest(selector)))
+            return;
+        // Execute callback if provided, passing node and full config
+        callback?.(node, { callback, enabled, exclude });
+        // Dispatch custom event if click was outside
+        node.dispatchEvent(new CustomEvent(`outside-click`));
+    }
+    document.addEventListener(`click`, handle_click, true);
+    return () => document.removeEventListener(`click`, handle_click, true);
+};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './attachments';
 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
 export { default as CodeExample } from './CodeExample.svelte';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './attachments';
 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
 export { default as CodeExample } from './CodeExample.svelte';

package/dist/types.d.ts

@@ -101,6 +101,7 @@ export interface MultiSelectParameters<T extends Option = Option> {
     disabledInputTitle?: string;
     duplicateOptionMsg?: string;
     duplicates?: boolean;
+    keepSelectedInDropdown?: false | `plain` | `checkboxes`;
     key?: (opt: T) => unknown;
     filterFunc?: (opt: T, searchText: string) => boolean;
     closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`;

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.2.1",
+  "version": "11.2.3",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -13,30 +13,30 @@
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.0",
-    "@stylistic/eslint-plugin": "^5.1.0",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.22.5",
-    "@sveltejs/package": "2.3.12",
-    "@sveltejs/vite-plugin-svelte": "^6.0.0",
-    "@types/node": "^24.0.13",
+    "@playwright/test": "^1.54.2",
+    "@stylistic/eslint-plugin": "^5.2.3",
+    "@sveltejs/adapter-static": "^3.0.9",
+    "@sveltejs/kit": "^2.28.0",
+    "@sveltejs/package": "2.4.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.1",
+    "@types/node": "^24.2.1",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.30.1",
-    "eslint-plugin-svelte": "^3.10.1",
+    "eslint": "^9.33.0",
+    "eslint-plugin-svelte": "^3.11.0",
+    "happy-dom": "^18.0.1",
     "hastscript": "^9.0.1",
-    "jsdom": "^26.1.0",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.35.6",
-    "svelte-check": "^4.2.2",
+    "svelte": "^5.38.1",
+    "svelte-check": "^4.3.1",
     "svelte-preprocess": "^6.0.3",
-    "svelte-toc": "^0.6.1",
-    "svelte2tsx": "^0.7.40",
-    "typescript": "5.8.3",
-    "typescript-eslint": "^8.36.0",
-    "vite": "^7.0.4",
+    "svelte-toc": "^0.6.2",
+    "svelte2tsx": "^0.7.42",
+    "typescript": "5.9.2",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2",
     "vitest": "^3.2.4"
   },
   "keywords": [
@@ -59,6 +59,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./attachments": {
+      "types": "./dist/attachments.d.ts",
+      "default": "./dist/attachments.js"
     }
   },
   "types": "./dist/index.d.ts",

package/readme.md

@@ -619,7 +619,7 @@ Example using several snippets:
    onremoveAll={(event) => console.log(event.detail.options)}`
    ```
 
-   Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were previously selected.
+   Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were removed (might not be all if `minSelect` is set).
 
 1. ```ts
    onchange={(event) => console.log(`${event.detail.type}: '${event.detail.option}'`)}