svelte-multiselect 11.5.1 → 11.5.2

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './attachments';
+export * from './heading-anchors';
 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,4 +1,5 @@
 export * from './attachments';
+export * from './heading-anchors';
 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

@@ -62,6 +62,22 @@ export interface MultiSelectEvents<T extends Option = Option> {
     onexpandAll?: (data: {
         groups: string[];
     }) => unknown;
+    onsearch?: (data: {
+        searchText: string;
+        matchingCount: number;
+    }) => unknown;
+    onmaxreached?: (data: {
+        selected: T[];
+        maxSelect: number;
+        attemptedOption: T;
+    }) => unknown;
+    onduplicate?: (data: {
+        option: T;
+    }) => unknown;
+    onactivate?: (data: {
+        option: T | null;
+        index: number | null;
+    }) => unknown;
 }
 export interface LoadOptionsParams {
     search: string;
@@ -213,4 +229,18 @@ export interface KeyboardShortcuts {
     open?: string | null;
     close?: string | null;
 }
+export interface NavRouteObject {
+    href: string;
+    label?: string;
+    children?: string[];
+    disabled?: boolean | string;
+    separator?: boolean;
+    align?: `left` | `right`;
+    external?: boolean;
+    tooltip?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+}
+export type NavRoute = string | [string, string] | [string, string[]] | NavRouteObject;
 export {};

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.5.1",
+  "version": "11.5.2",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
@@ -14,7 +14,7 @@
     "test": "vitest --run && playwright test",
     "check": "svelte-check",
     "package": "svelte-package",
-    "prepublishOnly": "svelte-package && test -d dist"
+    "prepublishOnly": "svelte-package"
   },
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -23,30 +23,27 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.57.0",
-    "@stylistic/eslint-plugin": "^5.6.1",
+    "@stylistic/eslint-plugin": "^5.7.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/kit": "^2.50.0",
     "@sveltejs/package": "2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^25.0.3",
-    "@vitest/coverage-v8": "^4.0.16",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^25.0.9",
+    "@vitest/coverage-v8": "^4.0.17",
     "eslint": "^9.39.2",
-    "eslint-plugin-svelte": "^3.13.1",
-    "happy-dom": "^20.0.11",
-    "hastscript": "^9.0.1",
+    "eslint-plugin-svelte": "^3.14.0",
+    "happy-dom": "^20.3.1",
     "mdsvex": "^0.12.6",
-    "mdsvexamples": "^0.5.0",
-    "rehype-autolink-headings": "^7.1.0",
-    "rehype-slug": "^6.0.0",
-    "svelte": "^5.46.1",
+    "mdsvexamples": "^0.5.1",
+    "svelte": "^5.46.4",
     "svelte-check": "^4.3.5",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
     "svelte2tsx": "^0.7.46",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.51.0",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16"
+    "typescript-eslint": "^8.53.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17"
   },
   "keywords": [
     "svelte",
@@ -72,6 +69,10 @@
     "./attachments": {
       "types": "./dist/attachments.d.ts",
       "default": "./dist/attachments.js"
+    },
+    "./heading-anchors": {
+      "types": "./dist/heading-anchors.d.ts",
+      "default": "./dist/heading-anchors.js"
     }
   },
   "types": "./dist/index.d.ts",

package/readme.md

@@ -802,6 +802,30 @@ Example using several snippets:
 
    Triggers when the dropdown list of options disappears. `event` is the DOM's `FocusEvent`, `KeyboardEvent` or `ClickEvent` that triggered the close.
 
+1. ```ts
+   onsearch={({ searchText, matchingCount }) => console.log(searchText, matchingCount)}
+   ```
+
+   Triggers (debounced, 150ms) when the search text changes. Useful for analytics or loading remote options. `searchText` is the current input value, `matchingCount` is the number of options that match.
+
+1. ```ts
+   onmaxreached={({ selected, maxSelect, attemptedOption }) => console.log(attemptedOption)}
+   ```
+
+   Triggers when a user tries to select more options than `maxSelect` allows. Useful for showing feedback. Does not fire for `maxSelect=1` (which uses replace behavior).
+
+1. ```ts
+   onduplicate={({ option }) => console.log(`Duplicate:`, option)}
+   ```
+
+   Triggers when a user tries to add an already-selected option (when `duplicates=false`). Useful for showing feedback to the user.
+
+1. ```ts
+   onactivate={({ option, index }) => console.log(`Active:`, option, index)}
+   ```
+
+   Triggers during keyboard navigation (ArrowUp/ArrowDown) through options. `option` is the newly active option, `index` is its position. Does not fire on mouse hover.
+
 For example, here's how you might annoy your users with an alert every time one or more options are added or removed:
 
 ```svelte
@@ -987,7 +1011,7 @@ This simplified version of the DOM structure of the component shows where these
 
 ### With global CSS
 
-Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#--styling).
+Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#styling).
 
 ```css
 :global(div.multiselect) {