svelte-multiselect 11.2.3 → 11.2.4

package/dist/CmdPalette.svelte

@@ -1,26 +1,30 @@
-<script lang="ts">import { MultiSelect } from './';
-import { fade } from 'svelte/transition';
+<script lang="ts">import { fade } from 'svelte/transition';
+import MultiSelect from './MultiSelect.svelte';
 let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, dialog_style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, ...rest } = $props();
 $effect(() => {
-    if (open && input && document.activeElement !== input) {
+    if (open && input && document.activeElement !== input)
         input.focus();
-    }
 });
 async function toggle(event) {
-    if (triggers.includes(event.key) && event.metaKey && !open) {
+    const is_trigger = triggers.includes(event.key) &&
+        (event.metaKey || event.ctrlKey);
+    if (is_trigger && !open)
         open = true;
-    }
-    else if (close_keys.includes(event.key) && open) {
+    else if (close_keys.includes(event.key) && open)
         open = false;
-    }
 }
 function close_if_outside(event) {
-    if (open && !dialog?.contains(event.target)) {
+    const target = event.target;
+    if (!target || !(target instanceof HTMLElement))
+        return;
+    if (open && !dialog?.contains(target) && !target.closest(`ul.options`)) {
         open = false;
     }
 }
-function trigger_action_and_close(data) {
-    const { action, label } = data.option;
+function trigger_action_and_close({ option }) {
+    const { action, label } = (option ?? {});
+    if (!action)
+        return;
     action(label);
     open = false;
 }

package/dist/CmdPalette.svelte.d.ts

@@ -1,9 +1,11 @@
-import type { MultiSelectProps, ObjectOption } from './types';
+import type { ComponentProps } from 'svelte';
+import MultiSelect from './MultiSelect.svelte';
+import type { ObjectOption } from './types';
 interface Action extends ObjectOption {
     label: string;
     action: (label: string) => void;
 }
-interface Props extends Omit<MultiSelectProps<Action>, `options`> {
+interface Props extends Omit<ComponentProps<typeof MultiSelect<Action>>, `options`> {
     actions: Action[];
     triggers?: string[];
     close_keys?: string[];
@@ -14,6 +16,6 @@ interface Props extends Omit<MultiSelectProps<Action>, `options`> {
     input?: HTMLInputElement | null;
     placeholder?: string;
 }
-declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "input" | "dialog">;
+declare const CmdPalette: import("svelte").Component<Props, {}, "dialog" | "input" | "open">;
 type CmdPalette = ReturnType<typeof CmdPalette>;
 export default CmdPalette;

package/dist/CopyButton.svelte

@@ -10,13 +10,22 @@ $effect(() => {
         return;
     const apply_copy_buttons = () => {
         const btn_style = `position: absolute; top: 9pt; right: 9pt; ${rest.style ?? ``}`;
+        const skip_sel = skip_selector ?? as;
         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))) {
+            if (pre && !pre.querySelector(`[data-sms-copy]`) &&
+                !(skip_sel && pre.querySelector(skip_sel))) {
                 mount(CopyButton, {
                     target: pre,
-                    props: { content, as, labels, ...rest, style: btn_style },
+                    props: {
+                        content,
+                        as,
+                        labels,
+                        ...rest,
+                        style: btn_style,
+                        'data-sms-copy': ``,
+                    },
                 });
             }
         }
@@ -41,7 +50,20 @@ async function copy() {
 
 {#if !(global || global_selector)}
   {@const { text, icon } = labels[state]}
-  <svelte:element this={as} onclick={copy} role="button" tabindex={0} {...rest}>
+  <svelte:element
+    this={as}
+    onclick={copy}
+    onkeydown={(event) => {
+      if (event.key === `Enter` || event.key === ` `) {
+        event.preventDefault()
+        copy()
+      }
+    }}
+    role="button"
+    tabindex={0}
+    data-sms-copy=""
+    {...rest}
+  >
     {#if children}
       {@render children({ state, icon, text })}
     {:else}

package/dist/CopyButton.svelte.d.ts

@@ -1,8 +1,9 @@
 import { CopyButton } from './';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { IconName } from './icons';
 type State = `ready` | `success` | `error`;
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLButtonElement>, `children`> {
     content?: string;
     state?: State;
     global_selector?: string | null;
@@ -18,7 +19,6 @@ interface Props {
         icon: IconName;
         text: string;
     }]>;
-    [key: string]: unknown;
 }
 declare const CopyButton: import("svelte").Component<Props, {}, "state">;
 type CopyButton = ReturnType<typeof CopyButton>;

package/dist/Icon.svelte.d.ts

@@ -1,7 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import { type IconName } from './icons';
-interface Props {
+interface Props extends HTMLAttributes<SVGSVGElement> {
     icon: IconName;
-    [key: string]: unknown;
 }
 declare const Icon: import("svelte").Component<Props, {}, "">;
 type Icon = ReturnType<typeof Icon>;

package/dist/MultiSelect.svelte

@@ -1,12 +1,18 @@
-<script lang="ts">import { CircleSpinner, Icon, Wiggle } from './';
-import { tick } from 'svelte';
+<script lang="ts">import { tick } from 'svelte';
 import { flip } from 'svelte/animate';
-import { get_label, get_style, highlight_matching_nodes } from './utils';
+import { highlight_matches } from './attachments';
+import CircleSpinner from './CircleSpinner.svelte';
+import Icon from './Icon.svelte';
+import { fuzzy_match, get_label, get_style } from './utils';
+import Wiggle from './Wiggle.svelte';
 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());
-}, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), selected = $bindable(options
+    const label = `${get_label(opt)}`;
+    return fuzzy
+        ? fuzzy_match(searchText, label)
+        : label.toLowerCase().includes(searchText.toLowerCase());
+}, fuzzy = true, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), selected = $bindable(options
     ?.filter((opt) => opt instanceof Object && opt?.preselected)
     .slice(0, maxSelect ?? undefined) ?? []), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, value = $bindable(null), expandIcon, selectedItem, children, removeIcon, afterInput, spinner, disabledIcon, option, userMsg, onblur, onclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseenter, onmouseleave, ontouchcancel, ontouchend, ontouchmove, ontouchstart, onadd, oncreate, onremove, onremoveAll, onchange, onopen, onclose, portal: portal_params = {}, ...rest } = $props();
 $effect.pre(() => {
@@ -257,11 +263,25 @@ async function handle_keydown(event) {
         // if none of the above special cases apply, we make next/prev option
         // active with wrap around at both ends
         const increment = event.key === `ArrowUp` ? -1 : 1;
-        activeIndex = (activeIndex + increment) % matchingOptions.length;
+        // Include user message in total count if it exists
+        const has_user_msg = searchText && ((allowUserOptions && createOptionMsg) ||
+            (!duplicates && selected.map(get_label).includes(searchText)) ||
+            (matchingOptions.length === 0 && noMatchingOptionsMsg));
+        const total_items = matchingOptions.length + (has_user_msg ? 1 : 0);
+        activeIndex = (activeIndex + increment) % total_items;
         // in JS % behaves like remainder operator, not real modulo, so negative numbers stay negative
         // need to do manual wrap around at 0
         if (activeIndex < 0)
-            activeIndex = matchingOptions.length - 1;
+            activeIndex = total_items - 1;
+        // Handle user message activation
+        if (has_user_msg && activeIndex === matchingOptions.length) {
+            option_msg_is_active = true;
+            activeOption = null;
+        }
+        else {
+            option_msg_is_active = false;
+            activeOption = matchingOptions[activeIndex] ?? null;
+        }
         if (autoScroll) {
             await tick();
             const li = document.querySelector(`ul.options > li.active`);
@@ -273,7 +293,9 @@ async function handle_keydown(event) {
         event.stopPropagation();
         // Only remove option if it wouldn't violate minSelect
         if (minSelect === null || selected.length > minSelect) {
-            remove(selected.at(-1), event);
+            const last_option = selected.at(-1);
+            if (last_option)
+                remove(last_option, event);
         }
         // Don't prevent default, allow normal backspace behavior if not removing
     } // make first matching option active on any keypress (if none of the above special cases match)
@@ -310,9 +332,17 @@ const if_enter_or_space = (handler) => (event) => {
     }
 };
 function on_click_outside(event) {
-    if (outerDiv && !outerDiv.contains(event.target)) {
-        close_dropdown(event);
-    }
+    if (!outerDiv)
+        return;
+    const target = event.target;
+    // Check if click is inside the main component
+    if (outerDiv.contains(target))
+        return;
+    // If portal is active, also check if click is inside the portalled options dropdown
+    if (portal_params?.active && ul_options && ul_options.contains(target))
+        return;
+    // Click is outside both the main component and any portalled dropdown
+    close_dropdown(event);
 }
 let drag_idx = $state(null);
 // event handlers enable dragging to reorder selected options
@@ -342,27 +372,6 @@ 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)
-        return;
-    // get input's search query
-    const query = event?.target?.value.trim().toLowerCase();
-    if (!query)
-        return;
-    highlight_matching_nodes(ul_options, query, noMatchingOptionsMsg);
-}
 const handle_input_keydown = (event) => {
     handle_keydown(event); // Restore internal logic
     // Call original forwarded handler
@@ -392,6 +401,7 @@ $effect(() => {
 const handle_input_blur = (event) => {
     // For portalled dropdowns, don't close on blur since clicks on portalled elements
     // will cause blur but we want to allow the click to register first
+    // (otherwise mobile touch event is unable to select options https://github.com/janosh/svelte-multiselect/issues/335)
     if (portal_params?.active) {
         onblur?.(event); // Let the click handler manage closing for portalled dropdowns
         return;
@@ -429,7 +439,7 @@ function portal(node, params) {
             tick().then(update_position);
         window.addEventListener(`scroll`, update_position, true);
         window.addEventListener(`resize`, update_position);
-        $effect.pre(() => {
+        $effect(() => {
             if (open && target_node)
                 update_position();
             else
@@ -505,8 +515,7 @@ function portal(node, params) {
   {:else}
     <Icon
       icon="ChevronExpand"
-      width="15px"
-      style="min-width: 1em; padding: 0 1pt; cursor: pointer"
+      style="width: 15px; min-width: 1em; padding: 0 1pt; cursor: pointer"
     />
   {/if}
   <ul
@@ -561,7 +570,7 @@ function portal(node, params) {
             {#if removeIcon}
               {@render removeIcon()}
             {:else}
-              <Icon icon="Cross" width="15px" />
+              <Icon icon="Cross" style="width: 15px" />
             {/if}
           </button>
         {/if}
@@ -577,13 +586,12 @@ function portal(node, params) {
       {autocomplete}
       {inputmode}
       {pattern}
-      placeholder={selected.length == 0 ? placeholder : null}
+      placeholder={selected.length === 0 ? placeholder : null}
       aria-invalid={invalid ? `true` : null}
       ondrop={() => false}
       onmouseup={open_dropdown}
       onkeydown={handle_input_keydown}
       onfocus={handle_input_focus}
-      oninput={highlight_matching_options}
       onblur={handle_input_blur}
       {onclick}
       {onkeyup}
@@ -619,8 +627,7 @@ function portal(node, params) {
     {:else}
       <Icon
         icon="Disabled"
-        width="14pt"
-        style="margin: 0 2pt"
+        style="width: 14pt; margin: 0 2pt"
         data-name="disabled-icon"
         aria-disabled="true"
       />
@@ -644,7 +651,7 @@ function portal(node, params) {
         {#if removeIcon}
           {@render removeIcon()}
         {:else}
-          <Icon icon="Cross" width="15px" />
+          <Icon icon="Cross" style="width: 15px" />
         {/if}
       </button>
     {/if}
@@ -654,6 +661,17 @@ function portal(node, params) {
   {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}
     <ul
       use:portal={{ target_node: outerDiv, ...portal_params }}
+      {@attach highlight_matches({
+        query: searchText,
+        disabled: !highlightMatches,
+        fuzzy,
+        css_class: `sms-search-matches`,
+        // don't highlight text in the "Create this option..." message
+        node_filter: (node) =>
+          node?.parentElement?.closest(`li.user-msg`)
+            ? NodeFilter.FILTER_REJECT
+            : NodeFilter.FILTER_ACCEPT,
+      })}
       class:hidden={!open}
       class="options {ulOptionsClass}"
       role="listbox"
@@ -663,10 +681,13 @@ function portal(node, params) {
       bind:this={ul_options}
       style={ulOptionsStyle}
     >
-      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as
-        optionItem,
+      {#each matchingOptions.slice(
+        0,
+        maxOptions == null ? Infinity : Math.max(0, maxOptions),
+      ) as
+        option_item,
         idx
-        (duplicates ? [key(optionItem), idx] : key(optionItem))
+        (duplicates ? [key(option_item), idx] : key(option_item))
       }
         {@const {
         label,
@@ -674,21 +695,22 @@ function portal(node, params) {
         title = null,
         selectedTitle = null,
         disabledTitle = defaultDisabledTitle,
-      } = optionItem instanceof Object ? optionItem : { label: optionItem }}
+      } = option_item instanceof Object ? option_item : { label: option_item }}
         {@const active = activeIndex === idx}
+        {@const selected = is_selected(label)}
         {@const optionStyle =
-        [get_style(optionItem, `option`), liOptionStyle].filter(Boolean).join(
+        [get_style(option_item, `option`), liOptionStyle].filter(Boolean).join(
           ` `,
         ) ||
         null}
         <li
           onclick={(event) => {
             if (disabled) return
-            if (keepSelectedInDropdown) toggle_option(optionItem, event)
-            else add(optionItem, event)
+            if (keepSelectedInDropdown) toggle_option(option_item, event)
+            else add(option_item, event)
           }}
-          title={disabled ? disabledTitle : (is_selected(label) && selectedTitle) || title}
-          class:selected={is_selected(label)}
+          title={disabled ? disabledTitle : (selected && selectedTitle) || title}
+          class:selected
           class:active
           class:disabled
           class="{liOptionClass} {active ? liActiveOptionClass : ``}"
@@ -699,13 +721,13 @@ function portal(node, params) {
             if (!disabled) activeIndex = idx
           }}
           role="option"
-          aria-selected="false"
+          aria-selected={selected ? `true` : `false`}
           style={optionStyle}
           onkeydown={(event) => {
             if (!disabled && (event.key === `Enter` || event.code === `Space`)) {
               event.preventDefault()
-              if (keepSelectedInDropdown) toggle_option(optionItem, event)
-              else add(optionItem, event)
+              if (keepSelectedInDropdown) toggle_option(option_item, event)
+              else add(option_item, event)
             }
           }}
         >
@@ -713,25 +735,25 @@ function portal(node, params) {
             <input
               type="checkbox"
               class="option-checkbox"
-              checked={is_selected(label)}
-              aria-label="Toggle {get_label(optionItem)}"
+              checked={selected}
+              aria-label="Toggle {get_label(option_item)}"
               tabindex="-1"
             />
           {/if}
           {#if option}
             {@render option({
-          option: optionItem,
+          option: option_item,
           idx,
         })}
           {:else if children}
             {@render children({
-          option: optionItem,
+          option: option_item,
           idx,
         })}
           {:else if parseLabelsAsHtml}
-            {@html get_label(optionItem)}
+            {@html get_label(option_item)}
           {:else}
-            {get_label(optionItem)}
+            {get_label(option_item)}
           {/if}
         </li>
       {/each}
@@ -739,7 +761,7 @@ function portal(node, params) {
         {@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
         {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
         {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
-        {@const no_match = Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) &&
+        {@const no_match = Boolean(matchingOptions?.length === 0 && noMatchingOptionsMsg) &&
         `no-match`}
         {@const msgType = is_dupe || can_create || no_match}
         {#if msgType}

package/dist/MultiSelect.svelte.d.ts

@@ -2,7 +2,7 @@ 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";
+    bindings: "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
     slots: {};
     events: {};
 };
@@ -10,7 +10,7 @@ declare class __sveltets_Render<Option extends T> {
     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";
+    bindings(): "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/PrevNext.svelte

@@ -1,7 +1,4 @@
-<script lang="ts">let { items = [], node = `nav`, current = ``, log = `errors`, nav_options = { replace_state: true, no_scroll: true }, titles = { prev: `&larr; Previous`, next: `Next &rarr;` }, onkeyup = ({ prev, next }) => ({
-    ArrowLeft: prev[0],
-    ArrowRight: next[0],
-}), prev_snippet, children, between, next_snippet, ...rest } = $props();
+<script lang="ts">let { items = [], node = `nav`, current = ``, log = `errors`, nav_options = { replace_state: true, no_scroll: true }, titles = { prev: `&larr; Previous`, next: `Next &rarr;` }, onkeyup = ({ prev, next }) => ({ ArrowLeft: prev[0], ArrowRight: next[0] }), prev_snippet, children, between, next_snippet, min_items = 3, ...rest } = $props();
 // Convert items to consistent [key, value] format
 let items_arr = $derived((items ?? []).map((itm) => (typeof itm === `string` ? [itm, itm] : itm)));
 // Calculate prev/next items with wraparound
@@ -11,8 +8,8 @@ let next = $derived(items_arr[idx + 1] ?? items_arr[0]);
 // Validation and logging
 $effect.pre(() => {
     if (log !== `silent`) {
-        if (items_arr.length < 2 && log === `verbose`) {
-            console.warn(`PrevNext received ${items_arr.length} items - minimum of 2 expected`);
+        if (items_arr.length < min_items && log === `verbose`) {
+            console.warn(`PrevNext received ${items_arr.length} items - minimum of ${min_items} expected`);
         }
         if (idx < 0 && log === `errors`) {
             const valid = items_arr.map(([key]) => key);
@@ -23,9 +20,13 @@ $effect.pre(() => {
 function handle_keyup(event) {
     if (!onkeyup)
         return;
+    if ((items_arr?.length ?? 0) < min_items)
+        return;
+    if (!prev || !next)
+        return;
     const key_map = onkeyup({ prev, next });
     const to = key_map[event.key];
-    if (to) {
+    if (to !== undefined) {
         const { replace_state, no_scroll } = nav_options;
         const [scroll_x, scroll_y] = no_scroll
             ? [window.scrollX, window.scrollY]
@@ -41,7 +42,7 @@ export {};
 
 <svelte:window onkeyup={handle_keyup} />
 
-{#if items_arr.length > 2}
+{#if items_arr.length >= min_items}
   <svelte:element this={node} class="prev-next" {...rest}>
     <!-- ensures `prev` is a defined [key, value] tuple.
       Due to prior normalization of the `items` prop, any defined `prev` item

package/dist/PrevNext.svelte.d.ts

@@ -1,55 +1,36 @@
 import type { Snippet } from 'svelte';
-export type Item = string | [string, unknown];
-declare function $$render<T extends Item>(): {
-    props: {
-        [key: string]: unknown;
-        items?: T[];
-        node?: string;
-        current?: string;
-        log?: `verbose` | `errors` | `silent`;
-        nav_options?: {
-            replace_state: boolean;
-            no_scroll: boolean;
-        };
-        titles?: {
-            prev: string;
-            next: string;
-        };
-        onkeyup?: ((obj: {
-            prev: Item;
-            next: Item;
-        }) => Record<string, string>) | null;
-        prev_snippet?: Snippet<[{
-            item: Item;
-        }]>;
-        children?: Snippet<[{
-            kind: `prev` | `next`;
-            item: Item;
-        }]>;
-        between?: Snippet<[]>;
-        next_snippet?: Snippet<[{
-            item: Item;
-        }]>;
+import type { HTMLAttributes } from 'svelte/elements';
+export type Item = [string, unknown];
+interface Props extends Omit<HTMLAttributes<HTMLElement>, `children` | `onkeyup`> {
+    items?: (string | Item)[];
+    node?: string;
+    current?: string;
+    log?: `verbose` | `errors` | `silent`;
+    nav_options?: {
+        replace_state: boolean;
+        no_scroll: boolean;
     };
-    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(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends Item>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    titles?: {
+        prev: string;
+        next: string;
+    };
+    onkeyup?: ((obj: {
+        prev: Item;
+        next: Item;
+    }) => Record<string, string | undefined>) | null;
+    prev_snippet?: Snippet<[{
+        item: Item;
+    }]>;
+    children?: Snippet<[{
+        kind: `prev` | `next`;
+        item: Item;
+    }]>;
+    between?: Snippet<[]>;
+    next_snippet?: Snippet<[{
+        item: Item;
+    }]>;
+    min_items?: number;
 }
-declare const PrevNext: $$IsomorphicComponent;
-type PrevNext<T extends Item> = InstanceType<typeof PrevNext<T>>;
+declare const PrevNext: import("svelte").Component<Props, {}, "">;
+type PrevNext = ReturnType<typeof PrevNext>;
 export default PrevNext;

package/dist/Toggle.svelte

@@ -4,7 +4,8 @@ function handle_keydown(event) {
     onkeydown?.(event);
     if (event.key === `Enter`) {
         event.preventDefault();
-        checked = !checked;
+        const target = event.target;
+        target.click(); // simulate real user toggle so 'change' is dispatched
     }
 }
 export {};

package/dist/Toggle.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLLabelElement> {
     checked?: boolean;
     required?: boolean;
     input_style?: string;
@@ -9,7 +10,6 @@ interface Props {
     onblur?: (event: FocusEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
     children?: Snippet<[]>;
-    [key: string]: unknown;
 }
 declare const Toggle: import("svelte").Component<Props, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;

package/dist/attachments.d.ts

@@ -25,22 +25,25 @@ export declare const sortable: ({ header_selector, asc_class, desc_class, sorted
         backgroundColor: string;
     } | undefined;
 }) => (node: HTMLElement) => () => void;
-type HighlightOptions = {
+export type HighlightOptions = {
     query?: string;
     disabled?: boolean;
+    fuzzy?: 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?: {
+export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => boolean) | undefined;
+export interface TooltipOptions {
     content?: string;
     placement?: `top` | `bottom` | `left` | `right`;
     delay?: number;
-}) => Attachment;
-type ClickOutsideConfig<T extends HTMLElement> = {
+    disabled?: boolean;
+    style?: string;
+}
+export declare const tooltip: (options?: TooltipOptions) => Attachment;
+export 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

@@ -158,11 +158,15 @@ export const sortable = ({ header_selector = `thead th`, asc_class = `table-sort
     };
 };
 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 { query = ``, disabled = false, fuzzy = false, node_filter = () => NodeFilter.FILTER_ACCEPT, css_class = `highlight-match`, } = ops;
+    // abort if CSS highlight API not supported
+    if (typeof CSS === `undefined` || !CSS.highlights)
+        return;
+    // always clear our own highlight first
+    CSS.highlights.delete(css_class);
+    // if disabled or empty query, stop after cleanup
+    if (!query || disabled)
+        return;
     const tree_walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
         acceptNode: node_filter,
     });
@@ -175,28 +179,57 @@ export const highlight_matches = (ops) => (node) => {
     // 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;
+        if (!text)
+            return [];
+        const search = query.toLowerCase();
+        if (fuzzy) {
+            // Fuzzy highlighting: highlight individual characters that match in order
+            const matching_indices = [];
+            let search_idx = 0;
+            let target_idx = 0;
+            // Find matching character indices
+            while (search_idx < search.length && target_idx < text.length) {
+                if (search[search_idx] === text[target_idx]) {
+                    matching_indices.push(target_idx);
+                    search_idx++;
+                }
+                target_idx++;
+            }
+            // Only create ranges if we found all characters in order
+            if (search_idx === search.length) {
+                return matching_indices.map((index) => {
+                    const range = new Range();
+                    range.setStart(el, index);
+                    range.setEnd(el, index + 1); // highlight single character
+                    return range;
+                });
+            }
+            return [];
+        }
+        else {
+            // Substring highlighting: highlight consecutive substrings
+            const indices = [];
+            let start_pos = 0;
+            while (start_pos < text.length) {
+                const index = text.indexOf(search, start_pos);
+                if (index === -1)
+                    break;
+                indices.push(index);
+                start_pos = index + search.length;
+            }
+            // create range object for each substring found in the text node
+            return indices.map((index) => {
+                const range = new Range();
+                range.setStart(el, index);
+                range.setEnd(el, index + search.length);
+                return range;
+            });
         }
-        // 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);
-    };
+    // Return cleanup function
+    return () => CSS.highlights.delete(css_class);
 };
 // Global tooltip state to ensure only one tooltip is shown at a time
 let current_tooltip = null;
@@ -220,7 +253,7 @@ export const tooltip = (options = {}) => (node) => {
     const safe_options = options || {};
     const cleanup_functions = [];
     function setup_tooltip(element) {
-        if (!element)
+        if (!element || safe_options.disabled)
             return;
         const content = safe_options.content || element.title ||
             element.getAttribute(`aria-label`) || element.getAttribute(`data-title`);
@@ -239,6 +272,7 @@ export const tooltip = (options = {}) => (node) => {
                 tooltip.className = `custom-tooltip`;
                 const placement = safe_options.placement || `bottom`;
                 tooltip.setAttribute(`data-placement`, placement);
+                // Apply base styles
                 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);
@@ -246,6 +280,16 @@ export const tooltip = (options = {}) => (node) => {
           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;
         `;
+                // Apply custom styles if provided (these will override base styles due to CSS specificity)
+                if (safe_options.style) {
+                    // Parse and apply custom styles as individual properties for better control
+                    const custom_styles = safe_options.style.split(`;`).filter((style) => style.trim());
+                    custom_styles.forEach((style) => {
+                        const [property, value] = style.split(`:`).map((s) => s.trim());
+                        if (property && value)
+                            tooltip.style.setProperty(property, value);
+                    });
+                }
                 tooltip.innerHTML = content?.replace(/\r/g, `<br/>`) ?? ``;
                 // Mirror CSS custom properties from the trigger node onto the tooltip element
                 const trigger_styles = getComputedStyle(element);
@@ -265,7 +309,10 @@ export const tooltip = (options = {}) => (node) => {
                     if (value)
                         tooltip.style.setProperty(name, value);
                 });
-                // Arrow element pointing to the trigger, oriented by placement
+                // Append early so we can read computed border styles for arrow border
+                document.body.appendChild(tooltip);
+                // Arrow elements: optional border triangle behind fill triangle
+                const tooltip_styles = getComputedStyle(tooltip);
                 const arrow = document.createElement(`div`);
                 arrow.className = `custom-tooltip-arrow`;
                 arrow.style.cssText =
@@ -274,6 +321,49 @@ export const tooltip = (options = {}) => (node) => {
                     .trim();
                 const arrow_size_num = Number.parseInt(arrow_size_raw || ``, 10);
                 const arrow_px = Number.isFinite(arrow_size_num) ? arrow_size_num : 6;
+                const border_color = tooltip_styles.borderTopColor;
+                const border_width_num = Number.parseFloat(tooltip_styles.borderTopWidth || `0`);
+                const has_border = !!border_color && border_color !== `rgba(0, 0, 0, 0)` &&
+                    border_width_num > 0;
+                const maybe_append_border_arrow = () => {
+                    if (!has_border)
+                        return;
+                    const border_arrow = document.createElement(`div`);
+                    border_arrow.className = `custom-tooltip-arrow-border`;
+                    border_arrow.style.cssText =
+                        `position: absolute; width: 0; height: 0; pointer-events: none;`;
+                    const border_size = arrow_px + (border_width_num * 1.4);
+                    if (placement === `top`) {
+                        border_arrow.style.left = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.bottom = `-${border_size}px`;
+                        border_arrow.style.borderLeft = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid transparent`;
+                        border_arrow.style.borderTop = `${border_size}px solid ${border_color}`;
+                    }
+                    else if (placement === `left`) {
+                        border_arrow.style.top = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.right = `-${border_size}px`;
+                        border_arrow.style.borderTop = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid transparent`;
+                        border_arrow.style.borderLeft = `${border_size}px solid ${border_color}`;
+                    }
+                    else if (placement === `right`) {
+                        border_arrow.style.top = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.left = `-${border_size}px`;
+                        border_arrow.style.borderTop = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid ${border_color}`;
+                    }
+                    else { // bottom
+                        border_arrow.style.left = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.top = `-${border_size}px`;
+                        border_arrow.style.borderLeft = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid ${border_color}`;
+                    }
+                    tooltip.appendChild(border_arrow);
+                };
+                // Create the fill arrow on top
                 if (placement === `top`) {
                     arrow.style.left = `calc(50% - ${arrow_px}px)`;
                     arrow.style.bottom = `-${arrow_px}px`;
@@ -302,8 +392,8 @@ export const tooltip = (options = {}) => (node) => {
                     arrow.style.borderRight = `${arrow_px}px solid transparent`;
                     arrow.style.borderBottom = `${arrow_px}px solid var(--tooltip-bg, #333)`;
                 }
+                maybe_append_border_arrow();
                 tooltip.appendChild(arrow);
-                document.body.appendChild(tooltip);
                 // Position tooltip
                 const rect = element.getBoundingClientRect();
                 const tooltip_rect = tooltip.getBoundingClientRect();
@@ -337,23 +427,22 @@ export const tooltip = (options = {}) => (node) => {
         }
         function hide_tooltip() {
             clear_tooltip();
-            hide_timeout = setTimeout(() => {
+            if (current_tooltip) {
+                current_tooltip.style.opacity = `0`;
                 if (current_tooltip) {
-                    current_tooltip.style.opacity = `0`;
-                    setTimeout(() => {
-                        if (current_tooltip) {
-                            current_tooltip.remove();
-                            current_tooltip = null;
-                        }
-                    }, 150);
+                    current_tooltip.remove();
+                    current_tooltip = null;
                 }
-            }, 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]));
+        // Hide tooltip when user scrolls
+        globalThis.addEventListener(`scroll`, hide_tooltip, true);
         return () => {
             events.forEach((event, idx) => element.removeEventListener(event, handlers[idx]));
+            globalThis.removeEventListener(`scroll`, hide_tooltip, true);
             const original_title = element.getAttribute(`data-original-title`);
             if (original_title) {
                 element.setAttribute(`title`, original_title);

package/dist/index.d.ts

@@ -8,8 +8,8 @@ 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 PrevNext } from './PrevNext.svelte';
-export { default as RadioButtons } from './RadioButtons.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';
+export * from './utils';
 export { default as Wiggle } from './Wiggle.svelte';
 export declare function scroll_into_view_if_needed_polyfill(element: Element, centerIfNeeded?: boolean): IntersectionObserver;

package/dist/index.js

@@ -8,9 +8,9 @@ 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 PrevNext } from './PrevNext.svelte';
-export { default as RadioButtons } from './RadioButtons.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';
+export * from './utils';
 export { default as Wiggle } from './Wiggle.svelte';
 // Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
 // See https://github.com/janosh/svelte-multiselect/issues/87

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { FocusEventHandler, HTMLInputAttributes, KeyboardEventHandler, MouseEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Option = string | number | ObjectOption;
 export type OptionStyle = string | {
     option: string;
@@ -16,20 +16,6 @@ export type ObjectOption = {
     style?: OptionStyle;
     [key: string]: unknown;
 };
-export interface MultiSelectNativeEvents {
-    onblur?: FocusEventHandler<HTMLInputElement>;
-    onclick?: MouseEventHandler<HTMLInputElement>;
-    onfocus?: FocusEventHandler<HTMLInputElement>;
-    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
-    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
-    onmousedown?: MouseEventHandler<HTMLInputElement>;
-    onmouseenter?: MouseEventHandler<HTMLInputElement>;
-    onmouseleave?: MouseEventHandler<HTMLInputElement>;
-    ontouchcancel?: TouchEventHandler<HTMLInputElement>;
-    ontouchend?: TouchEventHandler<HTMLInputElement>;
-    ontouchmove?: TouchEventHandler<HTMLInputElement>;
-    ontouchstart?: TouchEventHandler<HTMLInputElement>;
-}
 export interface MultiSelectEvents<T extends Option = Option> {
     onadd?: (data: {
         option: T;
@@ -55,7 +41,7 @@ export interface MultiSelectEvents<T extends Option = Option> {
         event: Event;
     }) => unknown;
 }
-type AfterInputProps = Pick<MultiSelectParameters, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
+type AfterInputProps = Pick<MultiSelectProps, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
 type UserMsgProps = {
     searchText: string;
     msgType: false | `dupe` | `create` | `no-match`;
@@ -87,7 +73,7 @@ export interface PortalParams {
     target_node?: HTMLElement | null;
     active?: boolean;
 }
-export interface MultiSelectParameters<T extends Option = Option> {
+export interface MultiSelectProps<T extends Option = Option> extends MultiSelectEvents<T>, MultiSelectSnippets<T>, Omit<HTMLAttributes<HTMLDivElement>, `children` | `onchange` | `onclose`> {
     activeIndex?: number | null;
     activeOption?: T | null;
     createOptionMsg?: string | null;
@@ -104,6 +90,7 @@ export interface MultiSelectParameters<T extends Option = Option> {
     keepSelectedInDropdown?: false | `plain` | `checkboxes`;
     key?: (opt: T) => unknown;
     filterFunc?: (opt: T, searchText: string) => boolean;
+    fuzzy?: boolean;
     closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`;
     form_input?: HTMLInputElement | null;
     highlightMatches?: boolean;
@@ -151,8 +138,5 @@ export interface MultiSelectParameters<T extends Option = Option> {
     ulOptionsStyle?: string | null;
     value?: T | T[] | null;
     portal?: PortalParams;
-    [key: string]: unknown;
-}
-export interface MultiSelectProps<T extends Option = Option> extends MultiSelectNativeEvents, MultiSelectEvents<T>, MultiSelectSnippets<T>, MultiSelectParameters<T> {
 }
 export {};

package/dist/utils.d.ts

@@ -1,9 +1,4 @@
-import type { Option, OptionStyle } from './types';
+import type { Option } from './types';
 export declare const get_label: (opt: Option) => string | number;
-export declare function get_style(option: {
-    style?: OptionStyle;
-    [key: string]: unknown;
-} | string | number, key?: `selected` | `option` | null): string;
-export declare function highlight_matching_nodes(element: HTMLElement, // parent element
-query?: string, // search query
-noMatchingOptionsMsg?: string): void;
+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

@@ -14,14 +14,15 @@ export const get_label = (opt) => {
 // object to be used in the style attribute of the option.
 // If the style is a string, it will be returned as is
 export function get_style(option, key = null) {
+    if (key === undefined)
+        key = null;
     let css_str = ``;
-    if (![`selected`, `option`, null].includes(key)) {
+    const valid_key = key === null || key === `selected` || key === `option`;
+    if (!valid_key)
         console.error(`MultiSelect: Invalid key=${key} for get_style`);
-    }
     if (typeof option === `object` && option.style) {
-        if (typeof option.style === `string`) {
+        if (typeof option.style === `string`)
             css_str = option.style;
-        }
         if (typeof option.style === `object`) {
             if (key && key in option.style)
                 return option.style[key] ?? ``;
@@ -35,49 +36,24 @@ export function get_style(option, key = null) {
         css_str += `;`;
     return css_str;
 }
-// Highlights text nodes that matching the string query
-export function highlight_matching_nodes(element, // parent element
-query, // search query
-noMatchingOptionsMsg) {
-    if (typeof CSS === `undefined` || !CSS.highlights || !query)
-        return; // abort if CSS highlight API not supported
-    // clear previous ranges from HighlightRegistry
-    CSS.highlights.clear();
-    const tree_walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
-        acceptNode: (node) => {
-            // don't highlight text in the "no matching options" message
-            if (node?.textContent === noMatchingOptionsMsg) {
-                return NodeFilter.FILTER_REJECT;
-            }
-            return NodeFilter.FILTER_ACCEPT;
-        },
-    });
-    const text_nodes = [];
-    let current_node = tree_walker.nextNode();
-    while (current_node) {
-        text_nodes.push(current_node);
-        current_node = tree_walker.nextNode();
+// Fuzzy string matching function
+// Returns true if the search string can be found as a subsequence in the target string
+// e.g., "tageoo" matches "tasks/geo-opt" because t-a-g-e-o-o appears in order
+export function fuzzy_match(search_text, target_text) {
+    // Handle null/undefined inputs first
+    if (search_text === null || search_text === undefined || target_text === null ||
+        target_text === undefined)
+        return false;
+    if (!search_text)
+        return true;
+    if (!target_text)
+        return false;
+    const [search, target] = [search_text.toLowerCase(), target_text.toLowerCase()];
+    let [search_idx, target_idx] = [0, 0];
+    while (search_idx < search.length && target_idx < target.length) {
+        if (search[search_idx] === target[target_idx])
+            search_idx++;
+        target_idx++;
     }
-    // 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(`sms-search-matches`, new Highlight(...ranges.flat()));
+    return search_idx === search.length;
 }

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.3",
+  "version": "11.2.4",
   "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.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",
+    "@playwright/test": "^1.55.1",
+    "@stylistic/eslint-plugin": "^5.4.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.43.8",
+    "@sveltejs/package": "2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@types/node": "^24.6.2",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.33.0",
-    "eslint-plugin-svelte": "^3.11.0",
-    "happy-dom": "^18.0.1",
+    "eslint": "^9.37.0",
+    "eslint-plugin-svelte": "^3.12.4",
+    "happy-dom": "^19.0.2",
     "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.38.1",
-    "svelte-check": "^4.3.1",
+    "svelte": "^5.39.8",
+    "svelte-check": "^4.3.2",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
-    "svelte2tsx": "^0.7.42",
-    "typescript": "5.9.2",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
+    "svelte2tsx": "^0.7.44",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4"
   },
   "keywords": [

package/readme.md

@@ -643,10 +643,10 @@ For example, here's how you might annoy your users with an alert every time one
 
 ```svelte
 <MultiSelect
-  onchange={(e) => {
-    if (e.detail.type === 'add') alert(`You added ${e.detail.option}`)
-    if (e.detail.type === 'remove') alert(`You removed ${e.detail.option}`)
-    if (e.detail.type === 'removeAll') alert(`You removed ${e.detail.options}`)
+  onchange={(event) => {
+    if (event.detail.type === 'add') alert(`You added ${event.detail.option}`)
+    if (event.detail.type === 'remove') alert(`You removed ${event.detail.option}`)
+    if (event.detail.type === 'removeAll') alert(`You removed ${event.detail.options}`)
   }}
 />
 ```

package/dist/RadioButtons.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">// get the label key from an option object or the option itself if it's a string or number
-const get_label = (op) => {
-    if (op instanceof Object) {
-        if (op.label === undefined) {
-            console.error(`RadioButton option ${JSON.stringify(op)} is an object but has no label key`);
-        }
-        return op.label;
-    }
-    return op;
-};
-let { options, selected = $bindable(), id = null, name = null, disabled = false, required = false, aria_label = null, onclick, onchange, oninput, option_snippet, children, ...rest } = $props();
-export {};
-</script>
-
-<div {id} {...rest}>
-  {#each options as option (JSON.stringify(option))}
-    {@const label = get_label(option)}
-    {@const active = selected && get_label(option) === get_label(selected)}
-    <label class:active aria-label={aria_label}>
-      <input
-        type="radio"
-        value={option}
-        {name}
-        {disabled}
-        {required}
-        bind:group={selected}
-        {onchange}
-        {oninput}
-        {onclick}
-      />
-      {#if option_snippet}
-        {@render option_snippet({ option, selected, active })}
-      {:else if children}
-        {@render children({ option, selected, active })}
-      {:else}<span>{label}</span>{/if}
-    </label>
-  {/each}
-</div>
-
-<style>
-  div {
-    max-width: max-content;
-    overflow: hidden;
-    height: fit-content;
-    display: var(--radio-btn-display, inline-flex);
-    border-radius: var(--radio-btn-border-radius, 0.5em);
-  }
-  input {
-    display: none;
-  }
-  span {
-    cursor: pointer;
-    display: inline-block;
-    color: var(--radio-btn-color, white);
-    padding: var(--radio-btn-padding, 2pt 5pt);
-    background: var(--radio-btn-bg, black);
-    transition: var(--radio-btn-transition, background 0.3s, transform 0.3s);
-  }
-  label:not(.active) span:hover {
-    background: var(--radio-btn-hover-bg, cornflowerblue);
-    color: var(--radio-btn-hover-color, white);
-  }
-  label.active span {
-    box-shadow: var(--radio-btn-checked-shadow, inset 0 0 1em -3pt black);
-    background: var(--radio-btn-checked-bg, darkcyan);
-  }
-</style>

package/dist/RadioButtons.svelte.d.ts

@@ -1,51 +0,0 @@
-import type { Snippet } from 'svelte';
-type GenericOption = string | number | {
-    value: unknown;
-    label: string | number;
-};
-declare function $$render<Option extends GenericOption>(): {
-    props: {
-        [key: string]: unknown;
-        options: Option[];
-        selected?: string | number | null;
-        id?: string | null;
-        name?: string | null;
-        disabled?: boolean;
-        required?: boolean;
-        aria_label?: string | null;
-        onclick?: (event: MouseEvent) => void;
-        onchange?: (event: Event) => void;
-        oninput?: (event: Event) => void;
-        option_snippet?: Snippet<[{
-            option: Option;
-            selected: boolean;
-            active: boolean;
-        }]>;
-        children?: Snippet<[{
-            option: Option;
-            selected: boolean;
-            active: boolean;
-        }]>;
-    };
-    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(): {};
-}
-interface $$IsomorphicComponent {
-    new <Option extends GenericOption>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Option>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Option>['props']>, ReturnType<__sveltets_Render<Option>['events']>, ReturnType<__sveltets_Render<Option>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<Option>['bindings']>;
-    } & ReturnType<__sveltets_Render<Option>['exports']>;
-    <Option extends GenericOption>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const RadioButtons: $$IsomorphicComponent;
-type RadioButtons<Option extends GenericOption> = InstanceType<typeof RadioButtons<Option>>;
-export default RadioButtons;