svelte-multiselect 11.2.4 → 11.4.0

package/dist/Wiggle.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface Props {
+type $$ComponentProps = {
     wiggle?: boolean;
     angle?: number;
     scale?: number;
@@ -9,7 +9,7 @@ interface Props {
     stiffness?: number;
     damping?: number;
     children?: Snippet;
-}
-declare const Wiggle: import("svelte").Component<Props, {}, "wiggle">;
+};
+declare const Wiggle: import("svelte").Component<$$ComponentProps, {}, "wiggle">;
 type Wiggle = ReturnType<typeof Wiggle>;
 export default Wiggle;

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/index.d.ts

@@ -7,6 +7,7 @@ export { default as FileDetails } from './FileDetails.svelte';
 export { default as GitHubCorner } from './GitHubCorner.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as Nav } from './Nav.svelte';
 export { default as PrevNext } from './PrevNext.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';

package/dist/index.js

@@ -7,6 +7,7 @@ export { default as FileDetails } from './FileDetails.svelte';
 export { default as GitHubCorner } from './GitHubCorner.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as Nav } from './Nav.svelte';
 export { default as PrevNext } from './PrevNext.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';

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;

package/dist/utils.js

@@ -1,10 +1,12 @@
+// Type guard for checking if a value is a non-null object
+export const is_object = (val) => typeof val === `object` && val !== null;
 // Get the label key from an option object or the option itself
 // if it's a string or number
 export const get_label = (opt) => {
-    if (opt instanceof Object) {
+    if (is_object(opt)) {
         if (opt.label === undefined) {
             const opt_str = JSON.stringify(opt);
-            console.error(`MultiSelect option ${opt_str} is an object but has no label key`);
+            console.error(`MultiSelect: option is an object but has no label key`, opt_str);
         }
         return opt.label;
     }
@@ -27,7 +29,7 @@ export function get_style(option, key = null) {
             if (key && key in option.style)
                 return option.style[key] ?? ``;
             else {
-                console.error(`Invalid style object for option=${JSON.stringify(option)}`);
+                console.error(`MultiSelect: invalid style object for option`, option);
             }
         }
     }

package/package.json

@@ -5,39 +5,46 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.2.4",
+  "version": "11.4.0",
   "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest --run && playwright test",
+    "check": "svelte-check"
+  },
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "peerDependencies": {
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.55.1",
-    "@stylistic/eslint-plugin": "^5.4.0",
+    "@playwright/test": "^1.57.0",
+    "@stylistic/eslint-plugin": "^5.6.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.43.8",
-    "@sveltejs/package": "2.5.4",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^24.6.2",
-    "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.37.0",
-    "eslint-plugin-svelte": "^3.12.4",
-    "happy-dom": "^19.0.2",
+    "@types/node": "^24.10.1",
+    "@vitest/coverage-v8": "^4.0.15",
+    "eslint": "^9.39.1",
+    "eslint-plugin-svelte": "^3.13.1",
+    "happy-dom": "^20.0.11",
     "hastscript": "^9.0.1",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.39.8",
-    "svelte-check": "^4.3.2",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
-    "svelte2tsx": "^0.7.44",
+    "svelte2tsx": "^0.7.45",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.9",
-    "vitest": "^3.2.4"
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.7",
+    "vitest": "^4.0.15"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -9,7 +9,7 @@
 [![GitHub Pages](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml)
 [![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect)
 [![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/peer/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md)
-[![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
+[![Playground](https://img.shields.io/badge/Svelte-Playground-blue?label=Try%20it!)](https://svelte.dev/playground/a5a14b8f15d64cb083b567292480db05)
 [![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-multiselect)
 
 </h4>
@@ -32,8 +32,6 @@
 - **Single / multiple select:** pass `maxSelect={1, 2, 3, ...}` prop to restrict the number of selectable options
 - **Configurable:** see props
 
-<slot name="nav" />
-
 ## 🧪 &thinsp; Coverage
 
 | Statements                                                                                 | Branches                                                                          | Lines                                                                            |
@@ -174,10 +172,18 @@ These are the core props you'll use in most cases:
    ```
 
 1. ```ts
-   placeholder: string | null = null
+   placeholder: string | { text: string; persistent?: boolean } | null = null
    ```
 
-   Text shown when no options are selected.
+   Text shown when no options are selected. Can be a simple string or an object with extended options:
+
+   ```svelte
+   <!-- Simple string -->
+   <MultiSelect placeholder="Choose..." />
+
+   <!-- Object with persistent option (stays visible even when options selected) -->
+   <MultiSelect placeholder={{ text: 'Add items...', persistent: true }} />
+   ```
 
 1. ```ts
    disabled: boolean = false
@@ -231,6 +237,41 @@ These are the core props you'll use in most cases:
 
 ### Advanced Props
 
+1. ```ts
+   loadOptions: LoadOptionsFn | LoadOptionsConfig = undefined
+   ```
+
+   **Dynamic loading for large datasets.** Enables lazy loading / infinite scroll instead of passing static `options`. Pass either a function or an object with config:
+
+   ```svelte
+   <!-- Simple: just a function -->
+   <MultiSelect loadOptions={myFetchFn} />
+
+   <!-- With config -->
+   <MultiSelect loadOptions={{ fetch: myFetchFn, debounceMs: 500, batchSize: 20 }} />
+   ```
+
+   The function receives `{ search, offset, limit }` and must return `{ options, hasMore }`:
+
+   ```ts
+   async function load_options({ search, offset, limit }) {
+     const response = await fetch(`/api/items?q=${search}&skip=${offset}&take=${limit}`)
+     const { items, total } = await response.json()
+     return { options: items, hasMore: offset + limit < total }
+   }
+   ```
+
+   Config options (when passing an object):
+
+   | Key          | Type      | Default | Description                                 |
+   | ------------ | --------- | ------- | ------------------------------------------- |
+   | `fetch`      | `fn`      | —       | Async function to load options (required)   |
+   | `debounceMs` | `number`  | `300`   | Debounce delay for search queries           |
+   | `batchSize`  | `number`  | `50`    | Number of options to load per batch         |
+   | `onOpen`     | `boolean` | `true`  | Whether to load options when dropdown opens |
+
+   Features automatic state management, debounced search, infinite scroll pagination, and loading indicators. See the [infinite-scroll demo](https://janosh.github.io/svelte-multiselect/infinite-scroll) for live examples.
+
 1. ```ts
    activeIndex: number | null = null  // bindable
    ```
@@ -270,10 +311,10 @@ These are the core props you'll use in most cases:
    Function to determine option equality. Default compares by lowercased label.
 
 1. ```ts
-   closeDropdownOnSelect: boolean | 'if-mobile' | 'retain-focus' = 'if-mobile'
+   closeDropdownOnSelect: boolean | 'if-mobile' | 'retain-focus' = false
    ```
 
-   Whether to close dropdown after selection. `'if-mobile'` closes dropdown on mobile devices only (responsive). `'retain-focus'` closes dropdown but keeps input focused for rapid typing to create custom options from text input (see `allowUserOptions`).
+   Whether to close dropdown after selection. `false` (default) keeps dropdown open for rapid multi-selection. `true` closes after each selection. `'if-mobile'` closes on mobile devices only (screen width below `breakpoint`). `'retain-focus'` closes dropdown but keeps input focused for rapid typing to create custom options from text input (see `allowUserOptions`).
 
 1. ```ts
    resetFilterOnAdd: boolean = true
@@ -351,12 +392,36 @@ These are the core props you'll use in most cases:
 
    Screen width (px) that separates 'mobile' from 'desktop' behavior.
 
+1. ```ts
+   fuzzy: boolean = true
+   ```
+
+   Whether to use fuzzy matching for filtering options. When `true` (default), matches non-consecutive characters (e.g., "ga" matches "Grapes" and "Green Apple"). When `false`, uses substring matching only.
+
 1. ```ts
    highlightMatches: boolean = true
    ```
 
    Whether to highlight matching text in dropdown options.
 
+1. ```ts
+   keepSelectedInDropdown: false | 'plain' | 'checkboxes' = false
+   ```
+
+   Controls whether selected options remain visible in dropdown. `false` (default) hides selected options. `'plain'` shows them with visual distinction. `'checkboxes'` prefixes each option with a checkbox.
+
+1. ```ts
+   selectAllOption: boolean | string = false
+   ```
+
+   Adds a "Select All" option at the top of the dropdown. `true` shows default label, or pass a custom string label.
+
+1. ```ts
+   liSelectAllClass: string = ''
+   ```
+
+   CSS class applied to the "Select All" `<li>` element.
+
 1. ```ts
    parseLabelsAsHtml: boolean = false
    ```
@@ -369,6 +434,12 @@ These are the core props you'll use in most cases:
 
    Whether selected options can be reordered by dragging.
 
+1. ```ts
+   selectedFlipParams: FlipParams = { duration: 100 }
+   ```
+
+   Animation parameters for the [Svelte flip animation](https://svelte.dev/docs/svelte/svelte-animate) when reordering selected options via drag-and-drop. Set `{ duration: 0 }` to disable animation. Accepts `duration`, `delay`, and `easing` properties.
+
 ### Message Props
 
 1. ```ts
@@ -684,7 +755,12 @@ You can also import [the types this component uses](https://github.com/janosh/sv
 
 ```ts
 import {
-  DispatchEvents,
+  LoadOptions, // Dynamic option loading callback
+  LoadOptionsConfig,
+  LoadOptionsFn,
+  LoadOptionsParams,
+  LoadOptionsResult,
+  MultiSelectEvents,
   MultiSelectEvents,
   ObjectOption,
   Option,