From e7f2d119d450b6ddfee67d497b099544f65df043 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Wed, 10 Sep 2025 05:27:37 -0400
Subject: [PATCH 1/4] Add prop `fuzzy: boolean = true` to `MultiSelect` and
 `CmdPalette` for fuzzy option filtering (#334)

* improve type safety by extending HTMLAttributes<HTMLElement> in components where appropriate

replaces untyped [key: string]: unknown ...rest props

- update package.json deps
- turn off 'svelte/no-navigation-without-resolve' rule in eslint.config.js

* enhance tooltip attachment: add style and disabled args

- Add support for custom styles and handling of disabled state.
- new unit tests for tooltip

* add prop fuzzy: boolean = true to MultiSelect and CmdPalette to enable fuzzy option filtering

- Added fuzzy matching option to highlight_matches to highlight text the same as its filtered
- Updated HighlightOptions type to include fuzzy property.
- Refactored highlight_matches logic to handle both fuzzy and substring matching.
- Improved unit tests for highlight_matches to cover various matching scenarios.
- Updated MultiSelect and CmdPalette components to utilize fuzzy matching.

* address coderabbit comments

* tweaks

* fix MultiSelect arrow key navigation wrap-around logic to include user message

- Updated arrow key navigation to include user message when applicable
- Adjusted active index calculation to account for user message presence
- Improved unit tests for MultiSelect to verify navigation behavior with user messages

* - fix the logic for slicing matching options to maxOptions

slice(0, Math.max(0, maxOptions ?? 0) || Infinity) treats 0 as falsy and shows all options. Honor 0 explicitly

-      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as
+      {#each matchingOptions.slice(0, maxOptions == null ? Infinity : Math.max(0, maxOptions)) as
         option_item,
         idx
         (duplicates ? [key(option_item), idx] : key(option_item))
       }

- introduce a new `selected` constant to streamline the selection state handling
- adjust aria-selected attribute to reflect the selected state accurately
- enhance unit tests to ensure correct behavior with various maxOptions values

* make min_items = 3 prop of PrevNext
---
 .pre-commit-config.yaml                 |   2 +-
 eslint.config.js                        |   1 +
 package.json                            |  22 +-
 readme.md                               |   8 +-
 src/lib/CmdPalette.svelte               |  23 +-
 src/lib/CopyButton.svelte               |  34 +-
 src/lib/Icon.svelte                     |   4 +-
 src/lib/MultiSelect.svelte              | 110 +++---
 src/lib/PrevNext.svelte                 |  13 +-
 src/lib/RadioButtons.svelte             |  19 +-
 src/lib/Toggle.svelte                   |   7 +-
 src/lib/attachments.ts                  | 175 +++++++--
 src/lib/index.ts                        |   1 +
 src/lib/types.ts                        |  42 +-
 src/lib/utils.ts                        |  79 ++--
 src/routes/(demos)/attachments/+page.md |  33 +-
 tests/playwright/MultiSelect.test.ts    |  94 +++++
 tests/vitest/CmdPalette.svelte.test.ts  | 353 ++++++++++++++++-
 tests/vitest/CodeExample.test.ts        |  25 ++
 tests/vitest/CopyButton.test.ts         | 120 ++++++
 tests/vitest/MultiSelect.svelte.test.ts |  45 ++-
 tests/vitest/PrevNext.test.ts           |   4 +-
 tests/vitest/Toggle.test.ts             |  14 +
 tests/vitest/attachments.test.ts        | 489 +++++++++++-------------
 tests/vitest/utils.test.ts              | 170 ++------
 tsconfig.json                           |   6 +-
 26 files changed, 1253 insertions(+), 640 deletions(-)
 create mode 100644 tests/vitest/CopyButton.test.ts

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 5d1a4b8d..11b0b615 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -43,7 +43,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.33.0
+    rev: v9.35.0
     hooks:
       - id: eslint
         types: [file]
diff --git a/eslint.config.js b/eslint.config.js
index a85e97b2..918db0b2 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -15,6 +15,7 @@ export default [
       ],
       '@stylistic/quotes': [`error`, `backtick`, { avoidEscape: true }],
       'svelte/no-at-html-tags': `off`,
+      'svelte/no-navigation-without-resolve': `off`,
     },
   },
   {
diff --git a/package.json b/package.json
index 60da9da2..0e435ad3 100644
--- a/package.json
+++ b/package.json
@@ -13,30 +13,30 @@
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.2",
-    "@stylistic/eslint-plugin": "^5.2.3",
+    "@playwright/test": "^1.55.0",
+    "@stylistic/eslint-plugin": "^5.3.1",
     "@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",
+    "@sveltejs/kit": "^2.37.0",
+    "@sveltejs/package": "2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.4",
+    "@types/node": "^24.3.1",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.33.0",
-    "eslint-plugin-svelte": "^3.11.0",
+    "eslint": "^9.35.0",
+    "eslint-plugin-svelte": "^3.12.1",
     "happy-dom": "^18.0.1",
     "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": "^5.38.7",
     "svelte-check": "^4.3.1",
     "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",
+    "typescript-eslint": "^8.42.0",
+    "vite": "^7.1.4",
     "vitest": "^3.2.4"
   },
   "keywords": [
diff --git a/readme.md b/readme.md
index 344a58e1..a35f7619 100644
--- a/readme.md
+++ b/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}`)
   }}
 />
 ```
diff --git a/src/lib/CmdPalette.svelte b/src/lib/CmdPalette.svelte
index 03f05bdb..eed5d674 100644
--- a/src/lib/CmdPalette.svelte
+++ b/src/lib/CmdPalette.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { MultiSelect } from '$lib'
+  import type { ComponentProps } from 'svelte'
   import { fade } from 'svelte/transition'
-  import type { MultiSelectProps, ObjectOption, Option } from './types'
+  import MultiSelect from './MultiSelect.svelte'
+  import type { ObjectOption, Option } 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>, `options`> {
     actions: Action[]
     triggers?: string[]
     close_keys?: string[]
@@ -34,21 +35,19 @@
   }: Props = $props()
 
   $effect(() => {
-    if (open && input && document.activeElement !== input) {
-      input.focus()
-    }
+    if (open && input && document.activeElement !== input) input.focus()
   })
 
   async function toggle(event: KeyboardEvent) {
-    if (triggers.includes(event.key) && event.metaKey && !open) {
-      open = true
-    } else if (close_keys.includes(event.key) && open) {
-      open = false
-    }
+    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) open = false
   }
 
   function close_if_outside(event: MouseEvent) {
-    if (open && !dialog?.contains(event.target as Node)) {
+    const target = event.target as HTMLElement
+    if (open && !dialog?.contains(target) && !target.closest(`ul.options`)) {
       open = false
     }
   }
diff --git a/src/lib/CopyButton.svelte b/src/lib/CopyButton.svelte
index f1ef52bd..54e51892 100644
--- a/src/lib/CopyButton.svelte
+++ b/src/lib/CopyButton.svelte
@@ -2,11 +2,12 @@
   import { CopyButton, Icon } from '$lib'
   import type { Snippet } from 'svelte'
   import { mount } 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
@@ -15,7 +16,6 @@
     as?: string
     labels?: Record<State, { icon: IconName; text: string }>
     children?: Snippet<[{ state: State; icon: IconName; text: string }]>
-    [key: string]: unknown
   }
   let {
     content = ``,
@@ -40,13 +40,24 @@
       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': ``,
+            },
           })
         }
       }
@@ -72,7 +83,20 @@
 
 {#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}
diff --git a/src/lib/Icon.svelte b/src/lib/Icon.svelte
index 8b56f9ea..7c2d66c8 100644
--- a/src/lib/Icon.svelte
+++ b/src/lib/Icon.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
   import { icon_data, type IconName } from './icons'
 
-  interface Props {
+  interface Props extends HTMLAttributes<SVGSVGElement> {
     icon: IconName
-    [key: string]: unknown
   }
   let { icon, ...rest }: Props = $props()
 
diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
index 30deda5a..03c55f8c 100644
--- a/src/lib/MultiSelect.svelte
+++ b/src/lib/MultiSelect.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
-  import { CircleSpinner, Icon, Wiggle } from '$lib'
   import { tick } from 'svelte'
   import { flip } from 'svelte/animate'
   import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements'
+  import { highlight_matches } from './attachments'
+  import CircleSpinner from './CircleSpinner.svelte'
+  import Icon from './Icon.svelte'
   import type { MultiSelectProps, Option as T } from './types'
-  import { get_label, get_style, highlight_matching_nodes } from './utils'
+  import { fuzzy_match, get_label, get_style } from './utils'
+  import Wiggle from './Wiggle.svelte'
 
   type Option = $$Generic<T>
 
@@ -26,8 +29,12 @@
     key = (opt) => `${get_label(opt)}`.toLowerCase(),
     filterFunc = (opt, searchText) => {
       if (!searchText) return true
-      return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase())
+      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,
@@ -398,10 +405,27 @@
       // 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
+      if (activeIndex < 0) 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()
@@ -491,30 +515,6 @@
 
   let ul_options = $state<HTMLUListElement>()
 
-  // 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: Event & { currentTarget?: HTMLInputElement },
-  ) {
-    if (!highlightMatches || !ul_options) return
-
-    // get input's search query
-    const query = (event?.target as HTMLInputElement)?.value.trim().toLowerCase()
-    if (!query) return
-
-    highlight_matching_nodes(ul_options, query, noMatchingOptionsMsg)
-  }
-
   const handle_input_keydown: KeyboardEventHandler<HTMLInputElement> = (event) => {
     handle_keydown(event) // Restore internal logic
     // Call original forwarded handler
@@ -741,7 +741,6 @@
       onmouseup={open_dropdown}
       onkeydown={handle_input_keydown}
       onfocus={handle_input_focus}
-      oninput={highlight_matching_options}
       onblur={handle_input_blur}
       {onclick}
       {onkeyup}
@@ -812,6 +811,17 @@
   {#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"
@@ -821,10 +831,13 @@
       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,
@@ -832,21 +845,22 @@
         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 : ``}"
@@ -857,13 +871,13 @@
             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)
             }
           }}
         >
@@ -871,25 +885,25 @@
             <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}
diff --git a/src/lib/PrevNext.svelte b/src/lib/PrevNext.svelte
index 3e618f89..f9d3cc89 100644
--- a/src/lib/PrevNext.svelte
+++ b/src/lib/PrevNext.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
 
   export type Item = string | [string, unknown]
   type T = $$Generic<Item>
 
-  interface Props {
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, `children` | `onkeyup`> {
     items?: T[]
     node?: string
     current?: string
@@ -16,7 +17,7 @@
     children?: Snippet<[{ kind: `prev` | `next`; item: Item }]>
     between?: Snippet<[]>
     next_snippet?: Snippet<[{ item: Item }]>
-    [key: string]: unknown
+    min_items?: number
   }
   let {
     items = [],
@@ -33,6 +34,7 @@
     children,
     between,
     next_snippet,
+    min_items = 3,
     ...rest
   }: Props = $props()
 
@@ -51,9 +53,9 @@
   // Validation and logging
   $effect.pre(() => {
     if (log !== `silent`) {
-      if (items_arr.length < 2 && log === `verbose`) {
+      if (items_arr.length < min_items && log === `verbose`) {
         console.warn(
-          `PrevNext received ${items_arr.length} items - minimum of 2 expected`,
+          `PrevNext received ${items_arr.length} items - minimum of ${min_items} expected`,
         )
       }
 
@@ -68,6 +70,7 @@
 
   function handle_keyup(event: KeyboardEvent) {
     if (!onkeyup) return
+    if ((items_arr?.length ?? 0) < min_items) return
     const key_map = onkeyup({ prev, next })
     const to = key_map[event.key]
     if (to) {
@@ -85,7 +88,7 @@
 
 <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
diff --git a/src/lib/RadioButtons.svelte b/src/lib/RadioButtons.svelte
index 3adc3fa3..2f19ab45 100644
--- a/src/lib/RadioButtons.svelte
+++ b/src/lib/RadioButtons.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
 
   type GenericOption = string | number | { value: unknown; label: string | number }
   type Option = $$Generic<GenericOption>
@@ -18,9 +19,9 @@
     }
     return op
   }
-  interface Props {
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, `children`> {
     options: Option[]
-    selected?: string | number | null
+    selected?: string | number | Option | null
     id?: string | null
     name?: string | null
     disabled?: boolean
@@ -29,9 +30,10 @@
     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 }]>
-    [key: string]: unknown
+    option_snippet?: Snippet<
+      [{ option: Option; active: boolean }]
+    >
+    children?: Snippet<[{ option: Option; active: boolean }]>
   }
   let {
     options,
@@ -53,7 +55,8 @@
 <div {id} {...rest}>
   {#each options as option (JSON.stringify(option))}
     {@const label = get_label(option)}
-    {@const active = selected && get_label(option) === get_label(selected)}
+    {@const active = selected != null &&
+      label === get_label(selected as unknown as GenericOption)}
     <label class:active aria-label={aria_label}>
       <input
         type="radio"
@@ -67,9 +70,9 @@
         {onclick}
       />
       {#if option_snippet}
-        {@render option_snippet({ option, selected, active })}
+        {@render option_snippet({ option, active })}
       {:else if children}
-        {@render children({ option, selected, active })}
+        {@render children({ option, active })}
       {:else}<span>{label}</span>{/if}
     </label>
   {/each}
diff --git a/src/lib/Toggle.svelte b/src/lib/Toggle.svelte
index 188050bf..2ce48dcb 100644
--- a/src/lib/Toggle.svelte
+++ b/src/lib/Toggle.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
 
-  interface Props {
+  interface Props extends HTMLAttributes<HTMLLabelElement> {
     checked?: boolean // whether the toggle is on or off
     required?: boolean
     input_style?: string
@@ -11,7 +12,6 @@
     onblur?: (event: FocusEvent) => void
     onkeydown?: (event: KeyboardEvent) => void
     children?: Snippet<[]>
-    [key: string]: unknown
   }
   let {
     checked = $bindable(false),
@@ -31,7 +31,8 @@
     onkeydown?.(event)
     if (event.key === `Enter`) {
       event.preventDefault()
-      checked = !checked
+      const target = event.target as HTMLInputElement
+      target.click() // simulate real user toggle so 'change' is dispatched
     }
   }
 </script>
diff --git a/src/lib/attachments.ts b/src/lib/attachments.ts
index 7c5744db..9c420882 100644
--- a/src/lib/attachments.ts
+++ b/src/lib/attachments.ts
@@ -143,7 +143,7 @@ export const sortable = (
   let sort_dir = 1 // 1 = asc, -1 = desc
 
   // Store event listeners for cleanup
-  const event_listeners: Array<{ header: HTMLTableCellElement; handler: () => void }> = []
+  const event_listeners: { header: HTMLTableCellElement; handler: () => void }[] = []
 
   for (const [idx, header] of headers.entries()) {
     header.style.cursor = `pointer` // add cursor pointer to headers
@@ -208,9 +208,10 @@ export const sortable = (
   }
 }
 
-type HighlightOptions = {
+export type HighlightOptions = {
   query?: string
   disabled?: boolean
+  fuzzy?: boolean
   node_filter?: (node: Node) => number
   css_class?: string
 }
@@ -219,14 +220,17 @@ export const highlight_matches = (ops: HighlightOptions) => (node: HTMLElement)
   const {
     query = ``,
     disabled = false,
+    fuzzy = 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
+  // 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,
@@ -242,30 +246,63 @@ export const highlight_matches = (ops: HighlightOptions) => (node: HTMLElement)
   // 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: number[] = []
+
+      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++
+      }
 
-    // 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
-    })
+      // 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 Highlight object from ranges and add to registry
   CSS.highlights.set(css_class, new Highlight(...ranges.flat()))
 
-  return () => { // Return cleanup function
-    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
@@ -282,12 +319,15 @@ function clear_tooltip() {
   }
 }
 
-export const tooltip = (options: {
+export interface TooltipOptions {
   content?: string
   placement?: `top` | `bottom` | `left` | `right`
   delay?: number
-} = {}): Attachment =>
-(node: Element) => {
+  disabled?: boolean
+  style?: string
+}
+
+export const tooltip = (options: TooltipOptions = {}): Attachment => (node: Element) => {
   // Handle null/undefined elements
   if (!node || !(node instanceof HTMLElement)) return
 
@@ -296,7 +336,7 @@ export const tooltip = (options: {
   const cleanup_functions: (() => void)[] = []
 
   function setup_tooltip(element: HTMLElement) {
-    if (!element) return
+    if (!element || safe_options.disabled) return
 
     const content = safe_options.content || element.title ||
       element.getAttribute(`aria-label`) || element.getAttribute(`data-title`)
@@ -317,6 +357,7 @@ export const tooltip = (options: {
         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);
@@ -325,6 +366,18 @@ export const tooltip = (options: {
           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
@@ -345,7 +398,11 @@ export const tooltip = (options: {
           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 =
@@ -354,6 +411,48 @@ export const tooltip = (options: {
           .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`
@@ -379,8 +478,8 @@ export const tooltip = (options: {
           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()
@@ -418,17 +517,13 @@ export const tooltip = (options: {
     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`]
@@ -464,7 +559,7 @@ export const tooltip = (options: {
   }
 }
 
-type ClickOutsideConfig<T extends HTMLElement> = {
+export type ClickOutsideConfig<T extends HTMLElement> = {
   enabled?: boolean
   exclude?: string[]
   callback?: (node: T, config: ClickOutsideConfig<T>) => void
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5fc94f9c..21e9f8ef 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -11,6 +11,7 @@ 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).
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6a5ef836..8fdf2f74 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,11 +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
 
@@ -25,23 +19,6 @@ export type ObjectOption = {
   [key: string]: unknown // allow any other keys users might want
 }
 
-// browser events re-emitted by MultiSelect
-export interface MultiSelectNativeEvents {
-  onblur?: FocusEventHandler<HTMLInputElement>
-  onclick?: MouseEventHandler<HTMLInputElement>
-  // onchange?: ChangeEventHandler<HTMLInputElement> TBD
-  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>
-}
-
 // custom events created by MultiSelect
 export interface MultiSelectEvents<T extends Option = Option> {
   onadd?: (data: { option: T }) => unknown
@@ -58,7 +35,7 @@ export interface MultiSelectEvents<T extends Option = Option> {
 }
 
 type AfterInputProps = Pick<
-  MultiSelectParameters,
+  MultiSelectProps,
   `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`
 >
 type UserMsgProps = {
@@ -84,7 +61,11 @@ export interface PortalParams {
   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
@@ -105,6 +86,7 @@ export interface MultiSelectParameters<T extends Option = Option> {
   // case-insensitive equality comparison after string coercion and looks only at the `label` key of object options by default
   key?: (opt: T) => unknown
   filterFunc?: (opt: T, searchText: string) => boolean
+  fuzzy?: boolean // whether to use fuzzy matching (default: true) or substring matching (false)
   closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`
   form_input?: HTMLInputElement | null
   highlightMatches?: boolean
@@ -152,12 +134,4 @@ 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> {}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 3f3d12c6..54d97b30 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,4 @@
-import type { Option, OptionStyle } from './types'
+import type { Option } from './types'
 
 // Get the label key from an option object or the option itself
 // if it's a string or number
@@ -17,17 +17,15 @@ export const get_label = (opt: Option) => {
 // 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: { style?: OptionStyle; [key: string]: unknown } | string | number,
-  key: `selected` | `option` | null = null,
+  option: Option,
+  key: `selected` | `option` | null | undefined = null,
 ) {
+  if (key === undefined) key = null
   let css_str = ``
-  if (![`selected`, `option`, null].includes(key)) {
-    console.error(`MultiSelect: Invalid key=${key} for get_style`)
-  }
+  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`) {
-      css_str = option.style
-    }
+    if (typeof option.style === `string`) css_str = option.style
     if (typeof option.style === `object`) {
       if (key && key in option.style) return option.style[key] ?? ``
       else {
@@ -42,54 +40,27 @@ export function get_style(
   return css_str
 }
 
-// Highlights text nodes that matching the string query
-export function highlight_matching_nodes(
-  element: HTMLElement, // parent element
-  query?: string, // search query
-  noMatchingOptionsMsg?: string, // text for empty node
-) {
-  if (typeof CSS === `undefined` || !CSS.highlights || !query) return // abort if CSS highlight API not supported
+// 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: string, target_text: string): boolean {
+  // Handle null/undefined inputs first
+  if (
+    search_text === null || search_text === undefined || target_text === null ||
+    target_text === undefined
+  ) return false
 
-  // clear previous ranges from HighlightRegistry
-  CSS.highlights.clear()
+  if (!search_text) return true
+  if (!target_text) return false
 
-  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: Node[] = []
-  let current_node = tree_walker.nextNode()
-  while (current_node) {
-    text_nodes.push(current_node)
-    current_node = tree_walker.nextNode()
-  }
+  const [search, target] = [search_text.toLowerCase(), target_text.toLowerCase()]
 
-  // 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
-    }
+  let [search_idx, target_idx] = [0, 0]
 
-    // 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
-    })
-  })
+  while (search_idx < search.length && target_idx < target.length) {
+    if (search[search_idx] === target[target_idx]) search_idx++
+    target_idx++
+  }
 
-  // create Highlight object from ranges and add to registry
-  CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat()))
+  return search_idx === search.length
 }
diff --git a/src/routes/(demos)/attachments/+page.md b/src/routes/(demos)/attachments/+page.md
index d519bf32..a86d3326 100644
--- a/src/routes/(demos)/attachments/+page.md
+++ b/src/routes/(demos)/attachments/+page.md
@@ -72,7 +72,7 @@ Exported from `svelte-multiselect/attachments`:
     style="--tooltip-bg: rgba(255, 50, 50, 0.9); --text-color: white; --tooltip-border: 1px solid rgba(255, 50, 50, 0.9); --tooltip-radius: 3px; --tooltip-font-size: 12px; --tooltip-arrow-size: 10; --tooltip-opacity: 0.9"
     {@attach tooltip({ content: `Warning tooltip`, placement: `bottom` })}
   >
-    Warning style
+    Warning tooltip
   </button>
   <button
     style="--tooltip-bg: white; --text-color: #111; --tooltip-border: 1px solid rgba(255, 255, 255, 0.15); --tooltip-font-size: 16px; --tooltip-arrow-size: 12; --tooltip-padding: 10px 12px"
@@ -81,6 +81,37 @@ Exported from `svelte-multiselect/attachments`:
     Large text
   </button>
 </div>
+
+<!-- Note: Do not pass untrusted HTML/strings to `content` or `style`. Sanitize or use plain text. -->
+<div style="display: flex; gap: 1em; margin: 2em 0">
+  <button
+    style="--tooltip-bg: #2d3748; --text-color: #e2e8f0; --tooltip-border: 2px solid #4299e1; --tooltip-arrow-size: 8"
+    {@attach tooltip({
+      content: `Custom style + border arrow`,
+      placement: `top`,
+      style:
+        `box-shadow: 0 10px 25px rgba(66, 153, 225, 0.3); transform: scale(1.05);`,
+    })}
+  >
+    Custom style
+  </button>
+  <button
+    style="--tooltip-bg: #f56565; --text-color: white; --tooltip-border: 1px solid #c53030"
+    {@attach tooltip({ content: `Disabled tooltip`, disabled: true })}
+  >
+    Disabled (no tooltip)
+  </button>
+  <button
+    style="--tooltip-bg: #48bb78; --text-color: white; --tooltip-border: 3px solid #38a169; --tooltip-arrow-size: 12"
+    {@attach tooltip({
+      content: `Thick border with matching arrow`,
+      placement: `bottom`,
+      style: `font-weight: bold; letter-spacing: 0.5px;`,
+    })}
+  >
+    Thick border
+  </button>
+</div>
 <!-- Attach once to a container: children with title/aria-label/data-title get their own tooltip -->
 <div style="display: flex; gap: 1em; margin: 2em 0" {@attach tooltip()}>
   <button title="Added via title attribute">Title-based</button>
diff --git a/tests/playwright/MultiSelect.test.ts b/tests/playwright/MultiSelect.test.ts
index 4d6b09a6..54226341 100644
--- a/tests/playwright/MultiSelect.test.ts
+++ b/tests/playwright/MultiSelect.test.ts
@@ -5,6 +5,100 @@ import process from 'node:process'
 
 test.describe.configure({ mode: `parallel` })
 
+test.describe(`fuzzy matching`, () => {
+  test(`fuzzy=true matches partial characters`, async ({ page }) => {
+    await page.goto(`/ui`, { waitUntil: `networkidle` })
+    await page.click(`#foods input[autocomplete]`)
+    await page.fill(`#foods input[autocomplete]`, `ga`)
+
+    await expect(page.locator(`#foods ul.options li:has-text("Garlic")`)).toBeVisible()
+    await expect(page.locator(`#foods ul.options li:has-text("Green Apple")`))
+      .toBeVisible()
+    await expect(page.locator(`#foods ul.options li:has-text("Banana")`)).toBeHidden()
+  })
+
+  test(`fuzzy=true matches non-consecutive characters`, async ({ page }) => {
+    await page.goto(`/ui`, { waitUntil: `networkidle` })
+    await page.click(`#foods input[autocomplete]`)
+    await page.fill(`#foods input[autocomplete]`, `ga`)
+
+    await expect(page.locator(`#foods ul.options li:has-text("Garlic")`)).toBeVisible()
+    await expect(page.locator(`#foods ul.options li:has-text("Green Apple")`))
+      .toBeVisible()
+  })
+
+  test(`fuzzy=false only matches substrings`, async ({ page }) => {
+    await page.goto(`/ui`, { waitUntil: `networkidle` })
+
+    await page.evaluate(() => {
+      const container = document.createElement(`div`)
+      container.id = `substring-test`
+      container.innerHTML =
+        `<div class="multiselect"><ul class="selected"><input autocomplete="off" /></ul></div>`
+      document.body.appendChild(container)
+
+      const input = container.querySelector(`input`)
+      if (!input) throw new Error(`Input not found`)
+      const options = [`garlic`, `green apple`, `grape`, `banana`]
+
+      input.addEventListener(`input`, (evt) => {
+        const search_text = (evt.target as HTMLInputElement).value.toLowerCase()
+        const filtered_options = options.filter((opt) =>
+          opt.toLowerCase().includes(search_text)
+        )
+
+        const options_list = document.createElement(`ul`)
+        options_list.className = `options`
+        filtered_options.forEach((opt) => {
+          const li = document.createElement(`li`)
+          li.textContent = opt
+          options_list.appendChild(li)
+        })
+
+        const existing_options = container.querySelector(`.options`)
+        if (existing_options) existing_options.remove()
+        container.appendChild(options_list)
+      })
+    })
+
+    await page.click(`#substring-test input[autocomplete]`)
+    await page.fill(`#substring-test input[autocomplete]`, `ga`)
+
+    await expect(page.locator(`#substring-test ul.options li:has-text("garlic")`))
+      .toBeVisible()
+    await expect(page.locator(`#substring-test ul.options li:has-text("green apple")`))
+      .toBeHidden()
+  })
+
+  test(`fuzzy highlighting works correctly`, async ({ page }) => {
+    await page.goto(`/ui`, { waitUntil: `networkidle` })
+    await page.click(`#foods input[autocomplete]`)
+    await page.fill(`#foods input[autocomplete]`, `ga`)
+
+    const highlighted_elements = await page.evaluate(() => {
+      try {
+        const highlights = globalThis.CSS?.highlights?.get?.(`sms-search-matches`)
+        // @ts-expect-error - Highlight.ranges will exist in browser
+        return highlights ? highlights.ranges.length : 0
+      } catch {
+        return 0
+      }
+    })
+
+    expect(highlighted_elements).toBeGreaterThanOrEqual(0)
+  })
+
+  test(`fuzzy prop defaults to true`, async ({ page }) => {
+    await page.goto(`/ui`, { waitUntil: `networkidle` })
+    await page.click(`#foods input[autocomplete]`)
+    await page.fill(`#foods input[autocomplete]`, `ga`)
+
+    await expect(page.locator(`#foods ul.options li:has-text("Garlic")`)).toBeVisible()
+    await expect(page.locator(`#foods ul.options li:has-text("Green Apple")`))
+      .toBeVisible()
+  })
+})
+
 test.describe(`input`, () => {
   test(`opens dropdown on focus`, async ({ page }) => {
     await page.goto(`/ui`, { waitUntil: `networkidle` })
diff --git a/tests/vitest/CmdPalette.svelte.test.ts b/tests/vitest/CmdPalette.svelte.test.ts
index 48568979..a4fc41b2 100644
--- a/tests/vitest/CmdPalette.svelte.test.ts
+++ b/tests/vitest/CmdPalette.svelte.test.ts
@@ -10,15 +10,95 @@ const mock_actions = [
 ]
 
 test.each([
-  { triggers: [`k`], key_to_press: `k`, with_meta: true, should_open: true },
-  { triggers: [`o`], key_to_press: `o`, with_meta: true, should_open: true },
-  { triggers: [`k`, `o`], key_to_press: `k`, with_meta: true, should_open: true },
-  { triggers: [`k`, `o`], key_to_press: `o`, with_meta: true, should_open: true },
-  { triggers: [`k`], key_to_press: `k`, with_meta: false, should_open: false },
-  { triggers: [`j`, `l`], key_to_press: `k`, with_meta: true, should_open: false },
+  {
+    triggers: [`k`],
+    key_to_press: `k`,
+    with_meta: true,
+    with_ctrl: false,
+    should_open: true,
+  },
+  {
+    triggers: [`o`],
+    key_to_press: `o`,
+    with_meta: true,
+    with_ctrl: false,
+    should_open: true,
+  },
+  {
+    triggers: [`k`, `o`],
+    key_to_press: `k`,
+    with_meta: true,
+    with_ctrl: false,
+    should_open: true,
+  },
+  {
+    triggers: [`k`, `o`],
+    key_to_press: `o`,
+    with_meta: true,
+    with_ctrl: false,
+    should_open: true,
+  },
+  {
+    triggers: [`k`],
+    key_to_press: `k`,
+    with_meta: false,
+    with_ctrl: false,
+    should_open: false,
+  },
+  {
+    triggers: [`j`, `l`],
+    key_to_press: `k`,
+    with_meta: true,
+    with_ctrl: false,
+    should_open: false,
+  },
+  // Test Ctrl key support
+  {
+    triggers: [`k`],
+    key_to_press: `k`,
+    with_meta: false,
+    with_ctrl: true,
+    should_open: true,
+  },
+  {
+    triggers: [`o`],
+    key_to_press: `o`,
+    with_meta: false,
+    with_ctrl: true,
+    should_open: true,
+  },
+  {
+    triggers: [`k`, `o`],
+    key_to_press: `k`,
+    with_meta: false,
+    with_ctrl: true,
+    should_open: true,
+  },
+  {
+    triggers: [`k`, `o`],
+    key_to_press: `o`,
+    with_meta: false,
+    with_ctrl: true,
+    should_open: true,
+  },
+  {
+    triggers: [`j`, `l`],
+    key_to_press: `k`,
+    with_meta: false,
+    with_ctrl: true,
+    should_open: false,
+  },
+  // Test that both Meta and Ctrl work together
+  {
+    triggers: [`k`],
+    key_to_press: `k`,
+    with_meta: true,
+    with_ctrl: true,
+    should_open: true,
+  },
 ])(
-  `handles trigger keys: $triggers with key $key_to_press (meta: $with_meta) -> $should_open`,
-  async ({ triggers, key_to_press, with_meta, should_open }) => {
+  `handles trigger keys: $triggers with key $key_to_press (meta: $with_meta, ctrl: $with_ctrl) -> $should_open`,
+  async ({ triggers, key_to_press, with_meta, with_ctrl, should_open }) => {
     const props = $state({
       open: false,
       triggers,
@@ -28,7 +108,11 @@ test.each([
     mount(CmdPalette, { target: document.body, props })
 
     globalThis.dispatchEvent(
-      new KeyboardEvent(`keydown`, { key: key_to_press, metaKey: with_meta }),
+      new KeyboardEvent(`keydown`, {
+        key: key_to_press,
+        metaKey: with_meta,
+        ctrlKey: with_ctrl,
+      }),
     )
     await tick()
 
@@ -129,6 +213,53 @@ test(`handles click outside to close dialog`, async () => {
   expect(document.querySelector(`dialog`)).toBe(null)
 })
 
+test(`does not close dialog when clicking on portalled options`, async () => {
+  const props = $state({ open: true, actions: mock_actions, fade_duration: 0 })
+  mount(CmdPalette, { target: document.body, props })
+  await tick()
+
+  // Create a mock portalled options element
+  const portalled_options = document.createElement(`ul`)
+  portalled_options.className = `options`
+  portalled_options.innerHTML = `<li>Option 1</li><li>Option 2</li>`
+  document.body.appendChild(portalled_options)
+
+  // Click on the portalled options
+  const option_li = portalled_options.querySelector(`li`)
+  option_li?.dispatchEvent(new MouseEvent(`click`, { bubbles: true }))
+  await tick()
+
+  // Dialog should still be open
+  expect(props.open).toBe(true)
+  expect(document.querySelector(`dialog`)).not.toBe(null)
+
+  // Clean up
+  document.body.removeChild(portalled_options)
+})
+
+test(`!target.closest('ul.options') prevents premature closure`, async () => {
+  const props = $state({ open: true, actions: mock_actions, fade_duration: 0 })
+  mount(CmdPalette, { target: document.body, props })
+  await tick()
+
+  // Create nested ul.options structure to test closest() logic
+  const container = document.createElement(`div`)
+  container.innerHTML = `
+    <ul class="options">
+      <li><span>Nested option</span></li>
+    </ul>
+  `
+  document.body.appendChild(container)
+
+  // Click on nested span inside ul.options
+  const span = container.querySelector(`span`)
+  span?.dispatchEvent(new MouseEvent(`click`, { bubbles: true }))
+  await tick()
+
+  // Dialog should remain open due to !target.closest('ul.options') check
+  expect(props.open).toBe(true)
+})
+
 test(`applies custom styles and props correctly`, async () => {
   const custom_class = `my-custom-class`
   const custom_placeholder = `Custom placeholder`
@@ -260,3 +391,207 @@ test(`dialog remains functional when open`, () => {
   const multiselect = doc_query(`dialog div.multiselect`)
   expect(multiselect).toBeTruthy()
 })
+
+test.each([
+  {
+    fuzzy: true,
+    search: `cu`,
+    expected: [`create user`],
+    description: `fuzzy match 'cu' -> 'create user'`,
+  },
+  {
+    fuzzy: true,
+    search: `del`,
+    expected: [`delete file`],
+    description: `fuzzy match 'del' -> 'delete file'`,
+  },
+  {
+    fuzzy: true,
+    search: `up`,
+    expected: [`update config`],
+    description: `fuzzy match 'up' -> 'update config'`,
+  },
+  {
+    fuzzy: true,
+    search: `user`,
+    expected: [`create user`],
+    description: `fuzzy match 'user' -> 'create user'`,
+  },
+  {
+    fuzzy: true,
+    search: `qwerty`,
+    expected: [`No matching options`],
+    description: `fuzzy match 'qwerty' -> no matches message`,
+  },
+  {
+    fuzzy: false,
+    search: `cr`,
+    expected: [`create user`],
+    description: `exact match 'cr' -> 'create user'`,
+  },
+  {
+    fuzzy: false,
+    search: `delete`,
+    expected: [`delete file`],
+    description: `exact match 'delete' -> 'delete file'`,
+  },
+  {
+    fuzzy: false,
+    search: `config`,
+    expected: [`update config`],
+    description: `exact match 'config' -> 'update config'`,
+  },
+  {
+    fuzzy: false,
+    search: `cu`,
+    expected: [`No matching options`],
+    description: `exact match 'cu' -> no matches (not a substring)`,
+  },
+  {
+    fuzzy: false,
+    search: `xyz`,
+    expected: [`No matching options`],
+    description: `exact match 'xyz' -> no matches message`,
+  },
+])(
+  `filtering with fuzzy=$fuzzy: $description`,
+  async ({ fuzzy, search, expected }) => {
+    const actions = [
+      { label: `create user`, action: vi.fn() },
+      { label: `delete file`, action: vi.fn() },
+      { label: `update config`, action: vi.fn() },
+    ]
+    mount(CmdPalette, {
+      target: document.body,
+      props: { open: true, actions, fuzzy, fade_duration: 0 },
+    })
+
+    const input = doc_query(`dialog input[autocomplete]`) as HTMLInputElement
+    input.value = search
+    input.dispatchEvent(new Event(`input`, { bubbles: true }))
+    await tick()
+
+    const visible_options = document.querySelectorAll(`dialog ul.options li:not(.hidden)`)
+    expect(visible_options).toHaveLength(expected.length)
+
+    expected.forEach((expected_label, idx) => {
+      expect(visible_options[idx].textContent).toContain(expected_label)
+    })
+  },
+)
+
+test(`handles multiple trigger keys simultaneously`, async () => {
+  const props = $state({
+    open: false,
+    triggers: [`k`, `j`, `l`],
+    actions: mock_actions,
+    fade_duration: 0,
+  })
+  mount(CmdPalette, { target: document.body, props })
+
+  // Test each trigger key
+  props.open = false
+  globalThis.dispatchEvent(new KeyboardEvent(`keydown`, { key: `k`, metaKey: true }))
+  await tick()
+  expect(props.open).toBe(true)
+
+  props.open = false
+  globalThis.dispatchEvent(new KeyboardEvent(`keydown`, { key: `j`, metaKey: true }))
+  await tick()
+  expect(props.open).toBe(true)
+
+  props.open = false
+  globalThis.dispatchEvent(new KeyboardEvent(`keydown`, { key: `l`, metaKey: true }))
+  await tick()
+  expect(props.open).toBe(true)
+})
+
+test(`handles custom fade duration`, () => {
+  const props = $state({ open: true, actions: mock_actions, fade_duration: 500 })
+  mount(CmdPalette, { target: document.body, props })
+  expect(doc_query(`dialog`)).toBeTruthy()
+  expect(props.fade_duration).toBe(500)
+})
+
+test(`handles empty search text`, async () => {
+  mount(CmdPalette, {
+    target: document.body,
+    props: { open: true, actions: mock_actions, fade_duration: 0 },
+  })
+
+  const input = doc_query(`dialog input[autocomplete]`) as HTMLInputElement
+  input.value = ``
+  input.dispatchEvent(new Event(`input`, { bubbles: true }))
+  await tick()
+
+  const visible_options = document.querySelectorAll(`dialog ul.options li:not(.hidden)`)
+  expect(visible_options).toHaveLength(mock_actions.length)
+})
+
+test(`handles bindable props correctly`, async () => {
+  const props = $state({
+    open: false,
+    actions: mock_actions,
+    dialog: null,
+    input: null,
+    fade_duration: 0,
+  })
+  mount(CmdPalette, { target: document.body, props })
+
+  expect(props.dialog).toBe(null)
+  expect(props.input).toBe(null)
+
+  props.open = true
+  await tick()
+
+  expect(props.dialog).toBeInstanceOf(HTMLDialogElement)
+  expect(props.input).toBeInstanceOf(HTMLInputElement)
+})
+
+test(`handles action execution with different label types`, () => {
+  const actions = [
+    { label: `simple action`, action: vi.fn() },
+    { label: `action with spaces`, action: vi.fn() },
+    { label: `action-with-dashes`, action: vi.fn() },
+  ]
+  mount(CmdPalette, {
+    target: document.body,
+    props: { open: true, actions, fade_duration: 0 },
+  })
+
+  expect(doc_query(`dialog div.multiselect`)).toBeTruthy()
+  expect(doc_query(`dialog ul.options li`)?.textContent).toContain(`simple action`)
+})
+
+test(`handles custom dialog styles`, () => {
+  const custom_style = `border: 2px solid red; padding: 10px;`
+  mount(CmdPalette, {
+    target: document.body,
+    props: {
+      open: true,
+      actions: mock_actions,
+      dialog_style: custom_style,
+      fade_duration: 0,
+    },
+  })
+
+  const dialog = doc_query(`dialog`) as HTMLDialogElement
+  expect(dialog.style.border).toBe(`2px solid red`)
+  expect(dialog.style.padding).toBe(`10px`)
+})
+
+test(`handles custom placeholder text`, () => {
+  const custom_placeholder = `Search for actions...`
+  mount(CmdPalette, {
+    target: document.body,
+    props: {
+      open: true,
+      actions: mock_actions,
+      placeholder: custom_placeholder,
+      fade_duration: 0,
+    },
+  })
+
+  const input = doc_query(`dialog input[autocomplete]`) as HTMLInputElement
+  expect(input.placeholder).toBe(custom_placeholder)
+})
diff --git a/tests/vitest/CodeExample.test.ts b/tests/vitest/CodeExample.test.ts
index 3615bb1a..dd3564c8 100644
--- a/tests/vitest/CodeExample.test.ts
+++ b/tests/vitest/CodeExample.test.ts
@@ -79,3 +79,28 @@ test(`dynamically added pre > code elements get copy buttons applied`, async ()
   expect(copy_button).toBeInstanceOf(HTMLButtonElement)
   expect(copy_button?.style.position).toBe(`absolute`)
 })
+
+test(`prevents duplicate copy buttons when as !== button`, async () => {
+  // Mount a CopyButton with global enabled and as='a' to test duplicate prevention
+  mount(CopyButton, { target: document.body, props: { global: true, as: `a` } })
+
+  // Create a pre > code element
+  const pre = document.createElement(`pre`)
+  const code = document.createElement(`code`)
+  code.textContent = `test code`
+  pre.appendChild(code)
+  document.body.appendChild(pre)
+  await tick()
+
+  // Verify only one copy button (anchor) was created
+  const copy_buttons = pre.querySelectorAll(`a[data-sms-copy]`)
+  expect(copy_buttons).toHaveLength(1)
+
+  // Trigger MutationObserver again by modifying the pre element
+  pre.setAttribute(`data-test`, `modified`)
+  await tick()
+
+  // Verify no duplicate was created
+  const copy_buttons_after = pre.querySelectorAll(`a[data-sms-copy]`)
+  expect(copy_buttons_after).toHaveLength(1)
+})
diff --git a/tests/vitest/CopyButton.test.ts b/tests/vitest/CopyButton.test.ts
new file mode 100644
index 00000000..4ed8b9b6
--- /dev/null
+++ b/tests/vitest/CopyButton.test.ts
@@ -0,0 +1,120 @@
+import { CopyButton } from '$lib'
+import { mount } from 'svelte'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+
+// Mock clipboard API
+const mock_write_text = vi.fn()
+vi.stubGlobal(`navigator`, {
+  clipboard: {
+    writeText: mock_write_text,
+  },
+})
+
+describe(`CopyButton`, () => {
+  let target: HTMLElement
+
+  beforeEach(() => {
+    target = document.body
+    target.innerHTML = ``
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    target.innerHTML = ``
+    vi.clearAllMocks()
+    vi.unstubAllGlobals()
+  })
+
+  describe(`Keyboard Accessibility`, () => {
+    test(`responds to Enter and Space keys on non-button elements`, async () => {
+      mock_write_text.mockResolvedValue(undefined)
+
+      mount(CopyButton, {
+        target,
+        props: {
+          content: `test content`,
+          as: `div`,
+        },
+      })
+
+      const element = target.querySelector(`[data-sms-copy]`) as HTMLElement
+      expect(element).toBeTruthy()
+      expect(element.tagName).toBe(`DIV`)
+
+      // Test Enter key
+      const enter_event = new KeyboardEvent(`keydown`, { key: `Enter`, bubbles: true })
+      element.dispatchEvent(enter_event)
+
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      expect(mock_write_text).toHaveBeenCalledWith(`test content`)
+
+      // Reset mock and test Space key
+      mock_write_text.mockClear()
+      const space_event = new KeyboardEvent(`keydown`, { key: ` `, bubbles: true })
+      element.dispatchEvent(space_event)
+
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      expect(mock_write_text).toHaveBeenCalledWith(`test content`)
+    })
+
+    test(`prevents default behavior for Enter and Space keys`, () => {
+      mount(CopyButton, {
+        target,
+        props: {
+          content: `test`,
+          as: `div`,
+        },
+      })
+
+      const element = target.querySelector(`[data-sms-copy]`) as HTMLElement
+
+      // Test Enter key
+      const enter_event = new KeyboardEvent(`keydown`, { key: `Enter`, bubbles: true })
+      const prevent_default_spy = vi.spyOn(enter_event, `preventDefault`)
+      element.dispatchEvent(enter_event)
+      expect(prevent_default_spy).toHaveBeenCalled()
+
+      // Test Space key
+      const space_event = new KeyboardEvent(`keydown`, { key: ` `, bubbles: true })
+      const prevent_default_spy_space = vi.spyOn(space_event, `preventDefault`)
+      element.dispatchEvent(space_event)
+      expect(prevent_default_spy_space).toHaveBeenCalled()
+    })
+
+    test(`ignores other keys`, () => {
+      mount(CopyButton, {
+        target,
+        props: {
+          content: `test`,
+          as: `div`,
+        },
+      })
+
+      const element = target.querySelector(`[data-sms-copy]`) as HTMLElement
+
+      // Test various other keys
+      const other_keys = [`Escape`, `Tab`, `ArrowUp`, `a`, `1`]
+      other_keys.forEach((key) => {
+        const event = new KeyboardEvent(`keydown`, { key })
+        const prevent_default_spy = vi.spyOn(event, `preventDefault`)
+        element.dispatchEvent(event)
+        expect(prevent_default_spy).not.toHaveBeenCalled()
+      })
+    })
+
+    test(`has proper accessibility attributes`, () => {
+      mount(CopyButton, {
+        target,
+        props: {
+          content: `accessibility test`,
+          as: `div`,
+        },
+      })
+
+      const element = target.querySelector(`[data-sms-copy]`) as HTMLElement
+      expect(element.getAttribute(`role`)).toBe(`button`)
+      expect(element.getAttribute(`tabindex`)).toBe(`0`)
+      expect(element.getAttribute(`data-sms-copy`)).toBe(``)
+    })
+  })
+})
diff --git a/tests/vitest/MultiSelect.svelte.test.ts b/tests/vitest/MultiSelect.svelte.test.ts
index 2a3bae45..e3f4cfa6 100644
--- a/tests/vitest/MultiSelect.svelte.test.ts
+++ b/tests/vitest/MultiSelect.svelte.test.ts
@@ -1790,7 +1790,9 @@ test.each([[0], [1], [2], [5], [undefined]])(
     input.dispatchEvent(input_event)
 
     expect(document.querySelectorAll(`ul.options li`)).toHaveLength(
-      Math.min(options.length, maxOptions || options.length),
+      maxOptions === null || maxOptions === undefined
+        ? options.length
+        : Math.min(options.length, maxOptions),
     )
   },
 )
@@ -1802,7 +1804,6 @@ test.each([[true], [-1], [3.5], [`foo`], [{}]])(
 
     mount(MultiSelect, {
       target: document.body,
-      // @ts-expect-error test invalid maxOptions
       props: { options: [1, 2, 3], maxOptions },
     })
 
@@ -2081,3 +2082,43 @@ test(`Escape and Tab still blur input even with closeDropdownOnSelect='retain-fo
 
   expect(document.activeElement).not.toBe(input_el)
 })
+
+test(`arrow keys can navigate to create option message when there are matching options`, async () => {
+  const options = [`apple`, `banana`, `cherry`]
+  mount(MultiSelect, {
+    target: document.body,
+    props: {
+      options,
+      allowUserOptions: true,
+      createOptionMsg: `Create "app" option`,
+      searchText: `app`, // This will match "apple" but also allow creating "app"
+    },
+  })
+
+  const input = doc_query<HTMLInputElement>(`input[autocomplete]`)
+  input.focus()
+
+  // Navigate through all options using arrow down
+  // First option should be active (apple matches "app")
+  input.dispatchEvent(new KeyboardEvent(`keydown`, { key: `ArrowDown`, bubbles: true }))
+  await tick()
+  expect(doc_query(`ul.options > li.active`).textContent?.trim()).toBe(`apple`)
+
+  // Second navigation should reach the create option message
+  input.dispatchEvent(new KeyboardEvent(`keydown`, { key: `ArrowDown`, bubbles: true }))
+  await tick()
+
+  const user_msg_li = doc_query(`ul.options li.user-msg`)
+  expect(user_msg_li.classList.contains(`active`)).toBe(true)
+  expect(user_msg_li.textContent?.trim()).toBe(`Create "app" option`)
+
+  // Navigate back up should go to apple
+  input.dispatchEvent(new KeyboardEvent(`keydown`, { key: `ArrowUp`, bubbles: true }))
+  await tick()
+  expect(doc_query(`ul.options > li.active`).textContent?.trim()).toBe(`apple`)
+
+  // Test wrap-around: from first option, go up should reach create message
+  input.dispatchEvent(new KeyboardEvent(`keydown`, { key: `ArrowUp`, bubbles: true }))
+  await tick()
+  expect(doc_query(`ul.options li.user-msg`).classList.contains(`active`)).toBe(true)
+})
diff --git a/tests/vitest/PrevNext.test.ts b/tests/vitest/PrevNext.test.ts
index 5d6e192a..17b16859 100644
--- a/tests/vitest/PrevNext.test.ts
+++ b/tests/vitest/PrevNext.test.ts
@@ -90,7 +90,7 @@ describe(`PrevNext`, () => {
 
     globalThis.dispatchEvent(new KeyboardEvent(`keyup`, { key: `ArrowRight` }))
     expect(replaceStateSpy).toHaveBeenCalledWith({}, ``, `page3`)
-    expect(scrollToSpy).toHaveBeenCalledTimes(10)
+    expect(scrollToSpy).toHaveBeenCalledTimes(8)
   })
 
   test(`handles custom node element`, () => {
@@ -124,7 +124,7 @@ describe(`PrevNext`, () => {
 
     if (level === `warn`) {
       expect(warn).toHaveBeenCalledWith(
-        `PrevNext received 1 items - minimum of 2 expected`,
+        `PrevNext received 1 items - minimum of 3 expected`,
       )
     } else if (level === `error`) {
       expect(error).toHaveBeenCalledWith(
diff --git a/tests/vitest/Toggle.test.ts b/tests/vitest/Toggle.test.ts
index af5fe92c..ce6ec6c3 100644
--- a/tests/vitest/Toggle.test.ts
+++ b/tests/vitest/Toggle.test.ts
@@ -49,6 +49,20 @@ describe(`Toggle`, () => {
     expect(input.checked).toBe(false)
   })
 
+  test(`fires change event when toggling on Enter key`, async () => {
+    const onchange = vi.fn()
+    mount(Toggle, { target, props: { onchange } })
+    const input = getInput()
+
+    input.dispatchEvent(
+      new KeyboardEvent(`keydown`, { key: `Enter`, bubbles: true }),
+    )
+    await tick()
+
+    expect(input.checked).toBe(true)
+    expect(onchange).toHaveBeenCalledWith(expect.any(Event))
+  })
+
   test(`doesn't toggle on other keys`, () => {
     mount(Toggle, { target })
     const input = getInput()
diff --git a/tests/vitest/attachments.test.ts b/tests/vitest/attachments.test.ts
index 064e1d3f..b4f9aef9 100644
--- a/tests/vitest/attachments.test.ts
+++ b/tests/vitest/attachments.test.ts
@@ -82,31 +82,6 @@ describe(`get_html_sort_value`, () => {
 })
 
 describe(`tooltip`, () => {
-  let cleanup_functions: (() => void)[]
-
-  const setup_env = () => {
-    cleanup_functions = []
-    document.body.innerHTML = ``
-    document.documentElement.style.setProperty(`--tooltip-bg`, `#333`)
-    document.documentElement.style.setProperty(`--text-color`, `#fff`)
-    document.documentElement.style.setProperty(`--tooltip-border`, `1px solid #555`)
-    Object.assign(globalThis, {
-      innerWidth: 1024,
-      innerHeight: 768,
-      scrollX: 0,
-      scrollY: 0,
-    })
-  }
-
-  const cleanup_env = () => {
-    cleanup_functions.forEach((cleanup) => {
-      cleanup()
-    })
-    cleanup_functions = []
-    document.querySelectorAll(`.custom-tooltip`).forEach((tooltip) => tooltip.remove())
-    vi.clearAllTimers()
-  }
-
   const create_element = (tag = `div`) => {
     const element = document.createElement(tag)
     document.body.appendChild(element)
@@ -115,7 +90,6 @@ describe(`tooltip`, () => {
 
   const setup_tooltip = (element: HTMLElement, options = {}) => {
     const cleanup = tooltip(options)(element)
-    if (cleanup) cleanup_functions.push(cleanup)
     return cleanup
   }
 
@@ -133,9 +107,6 @@ describe(`tooltip`, () => {
     }))
   }
 
-  beforeEach(setup_env)
-  afterEach(cleanup_env)
-
   describe(`Content Sources`, () => {
     it.each([
       [`title`, `title`, `Title tooltip`, true],
@@ -227,6 +198,48 @@ describe(`tooltip`, () => {
       })
     })
 
+    it(`should handle disabled option`, () => {
+      const element = create_element()
+      element.title = `Disabled tooltip`
+      const cleanup = setup_tooltip(element, { disabled: true })
+      expect(cleanup).toBeUndefined()
+      expect(element.hasAttribute(`data-original-title`)).toBe(false)
+      expect(element.getAttribute(`title`)).toBe(`Disabled tooltip`)
+    })
+
+    it(`should apply custom style to tooltip`, () => {
+      const element = create_element()
+      element.title = `Styled tooltip`
+      const custom_style = `background: red; color: white; border: 2px solid blue;`
+      setup_tooltip(element, { style: custom_style })
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
+    })
+
+    it(`should combine custom style with CSS variables`, () => {
+      const element = create_element()
+      element.title = `Combined style tooltip`
+      element.style.setProperty(`--tooltip-bg`, `#123456`)
+      const custom_style = `font-weight: bold; text-transform: uppercase;`
+      setup_tooltip(element, { style: custom_style })
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
+    })
+
+    it(`should handle empty style string`, () => {
+      const element = create_element()
+      element.title = `Empty style tooltip`
+      setup_tooltip(element, { style: `` })
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
+    })
+
+    it(`should handle malformed and whitespace styles`, () => {
+      const element = create_element()
+      element.title = `Style parsing tooltip`
+      const malformed_style =
+        ` background: red ; invalid-style; color: blue ; font-size: 14px ; `
+      setup_tooltip(element, { style: malformed_style })
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
+    })
+
     it.each([
       [`invalid placement`, { placement: `invalid` }, `Invalid placement tooltip`],
       [`null options`, null, `Null options tooltip`],
@@ -238,8 +251,7 @@ describe(`tooltip`, () => {
         delay?: number
       } | null
       const factory = normalized === null ? tooltip(undefined) : tooltip(normalized)
-      const cleanup = factory(element)
-      if (cleanup) cleanup_functions.push(cleanup)
+      const _cleanup = factory(element)
       expect(element.getAttribute(`data-original-title`)).toBe(expected)
     })
   })
@@ -350,142 +362,56 @@ describe(`tooltip`, () => {
   })
 
   describe(`DOM Manipulation and Positioning`, () => {
-    it.each([
-      [`correct CSS classes`, { left: 100, top: 100, width: 50, height: 50 }],
-      [`correct base styles`, { left: 100, top: 100, width: 50, height: 50 }],
-      [`viewport edge constraints`, { left: 1020, top: 5, width: 4, height: 20 }],
-      [`different placements`, { left: 400, top: 300, width: 50, height: 50 }],
-      [`very small elements`, { left: 500, top: 300, width: 1, height: 1 }],
-      [`elements with transforms`, { left: 200, top: 150, width: 50, height: 50 }],
-    ])(`should handle %s`, (test_desc, bounds) => {
+    it(`should handle different element sizes and positions`, () => {
       const element = create_element()
       element.title = `Test tooltip`
-      if (test_desc.includes(`transforms`)) {
-        element.style.transform = `rotate(45deg) scale(0.5)`
-      }
-      mock_bounds(element, bounds)
+      mock_bounds(element, { left: 100, top: 100, width: 50, height: 50 })
 
       setup_tooltip(element)
-
-      const event = new Event(`mouseenter`)
-      expect(() => element.dispatchEvent(event)).not.toThrow()
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
     })
 
-    it(`should handle scroll offset correctly`, () => {
-      Object.assign(globalThis, { scrollX: 100, scrollY: 50 })
+    it(`should handle elements with transforms`, () => {
       const element = create_element()
-      element.title = `Scrolled tooltip`
+      element.title = `Transform tooltip`
+      element.style.transform = `rotate(45deg) scale(0.5)`
       mock_bounds(element, { left: 200, top: 150, width: 50, height: 50 })
 
       setup_tooltip(element)
-
-      const event = new Event(`mouseenter`)
-      expect(() => element.dispatchEvent(event)).not.toThrow()
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
     })
   })
 
   describe(`Event Handling`, () => {
-    it.each([
-      [`mouseenter`, `div`],
-      [`mouseleave`, `div`],
-      [`focus`, `button`],
-      [`blur`, `button`],
-    ])(`should handle %s event`, (event_type, tag) => {
-      const element = create_element(tag)
-      element.title = `${event_type} tooltip`
-      setup_tooltip(element)
-
-      const event = new Event(event_type)
-      expect(() => element.dispatchEvent(event)).not.toThrow()
-    })
-
-    it(`should handle rapid event sequences`, () => {
+    it(`should handle mouse events`, () => {
       const element = create_element()
-      element.title = `Rapid events tooltip`
+      element.title = `Mouse tooltip`
       setup_tooltip(element)
 
-      for (let idx = 0; idx < 10; idx++) {
-        ;[new Event(`mouseenter`), new Event(`mouseleave`)].forEach((event) => {
-          element.dispatchEvent(event)
-        })
-      }
-      expect(() => element.dispatchEvent(new Event(`mouseenter`))).not.toThrow()
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
     })
 
-    it.each([
-      [`disabled elements`, true, `button`],
-      [`detached elements`, false, `div`],
-      [`synthetic events`, false, `div`],
-      [`events with custom properties`, false, `div`],
-    ])(`should handle %s`, (description, is_disabled, tag) => {
-      const element = document.createElement(tag)
-      if (!description.includes(`detached`)) document.body.appendChild(element)
-      element.title = `${description} tooltip`
-      if (is_disabled && `disabled` in element) element.disabled = true
-
+    it(`should handle focus events on button elements`, () => {
+      const element = create_element(`button`)
+      element.title = `Focus tooltip`
       setup_tooltip(element)
 
-      const event = description.includes(`synthetic`)
-        ? new CustomEvent(`mouseenter`, { bubbles: true, cancelable: true })
-        : new Event(`mouseenter`)
-      if (description.includes(`custom`)) {
-        ;(event as unknown as { customProp?: string }).customProp = `custom value`
-      }
-
-      expect(() => element.dispatchEvent(event)).not.toThrow()
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
     })
   })
 
   describe(`Global State Management`, () => {
-    it(`should clear previous tooltips when showing new ones`, () => {
-      const [element1, element2] = [create_element(), create_element()]
-      element1.title = `First tooltip`
-      element2.title = `Second tooltip`
-
-      setup_tooltip(element1)
-      setup_tooltip(element2)
-
-      element1.dispatchEvent(new Event(`mouseenter`))
-      element2.dispatchEvent(new Event(`mouseenter`))
-
-      setTimeout(() => {
-        expect(document.querySelectorAll(`.custom-tooltip`).length).toBeLessThanOrEqual(1)
-      }, 150)
-    })
-
     it(`should handle multiple tooltip instances`, () => {
-      const elements = Array.from({ length: 5 }, (_, idx) => {
+      const elements = Array.from({ length: 3 }, (_, idx) => {
         const element = create_element()
         element.title = `Tooltip ${idx}`
         setup_tooltip(element)
         return element
       })
 
-      elements.forEach((element) => element.dispatchEvent(new Event(`mouseenter`)))
-      expect(elements.length).toBe(5)
-    })
-
-    it.each([
-      [`tooltip cleanup on element removal`, true],
-      [`concurrent tooltip operations`, false],
-    ])(`should handle %s`, (description, should_remove) => {
-      const element = create_element()
-      element.title = `${description} tooltip`
-      setup_tooltip(element)
-
-      const event = new Event(`mouseenter`)
-      element.dispatchEvent(event)
-
-      if (should_remove) {
-        element.remove()
-        expect(() => element.dispatchEvent(new Event(`mouseleave`))).not.toThrow()
-      } else {
-        ;[new Event(`mouseenter`), new Event(`mouseleave`)].forEach((e) => {
-          element.dispatchEvent(e)
-          element.dispatchEvent(e)
-        })
-        expect(() => element.dispatchEvent(new Event(`mouseenter`))).not.toThrow()
-      }
+      elements.forEach((element) => {
+        expect(element.hasAttribute(`data-original-title`)).toBe(true)
+      })
     })
   })
 
@@ -495,7 +421,7 @@ describe(`tooltip`, () => {
       element.title = `Cleanup test tooltip`
       const cleanup = setup_tooltip(element)
       expect(cleanup).toBeDefined()
-      expect(() => cleanup?.()).not.toThrow()
+      expect(typeof cleanup).toBe(`function`)
     })
 
     it(`should restore original title on cleanup`, () => {
@@ -510,103 +436,27 @@ describe(`tooltip`, () => {
       expect(element.getAttribute(`title`)).toBe(`Original title`)
       expect(element.hasAttribute(`data-original-title`)).toBe(false)
     })
-
-    it.each([
-      [`multiple cleanup calls`, 3],
-      [`child element listeners`, 1],
-      [`global tooltips on cleanup`, 1],
-      [`cleanup with active timers`, 1],
-      [`cleanup of detached elements`, 1],
-    ])(`should handle %s`, (test_name, call_count) => {
-      const element = create_element()
-      element.title = `${test_name} tooltip`
-
-      if (test_name.includes(`child`)) {
-        const child = document.createElement(`div`)
-        child.title = `Child cleanup tooltip`
-        element.appendChild(child)
-      }
-
-      const cleanup = setup_tooltip(
-        element,
-        test_name.includes(`timer`) ? { delay: 1000 } : {},
-      )
-
-      if (test_name.includes(`global`) || test_name.includes(`timer`)) {
-        element.dispatchEvent(new Event(`mouseenter`))
-      }
-
-      if (test_name.includes(`detached`)) element.remove()
-
-      expect(() => {
-        for (let i = 0; i < call_count; i++) cleanup?.()
-      }).not.toThrow()
-    })
   })
 
   describe(`Error Handling and Edge Cases`, () => {
-    it.each([
-      [`null elements`, null],
-      [`undefined elements`, undefined],
-    ])(`should handle %s gracefully`, (_desc, element) => {
+    it(`should handle null and undefined elements gracefully`, () => {
       const attach = tooltip()
-      expect(() => attach(element as unknown as Element)).not.toThrow()
+      expect(attach(null as unknown as Element)).toBeUndefined()
+      expect(attach(undefined as unknown as Element)).toBeUndefined()
     })
 
     it(`should handle elements without getBoundingClientRect`, () => {
       const element = create_element()
       element.title = `No getBoundingClientRect tooltip`
-
       setup_tooltip(element)
-      expect(() => element.dispatchEvent(new Event(`mouseenter`))).not.toThrow()
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
     })
 
-    it.each([
-      [
-        `DOM mutations during tooltip display`,
-        () => document.body.appendChild(document.createElement(`div`)),
-      ],
-      [
-        `window resize during tooltip display`,
-        () => Object.assign(globalThis, { innerWidth: 800, innerHeight: 600 }),
-      ],
-      [
-        `CSS variable absence`,
-        () =>
-          [`--tooltip-bg`, `--text-color`, `--tooltip-border`].forEach((prop) =>
-            document.documentElement.style.removeProperty(prop)
-          ),
-      ],
-    ])(`should handle %s gracefully`, (description, mutation_fn) => {
+    it(`should handle extremely long content`, () => {
       const element = create_element()
-      element.title = `${description} tooltip`
+      element.title = `A`.repeat(10000)
       setup_tooltip(element)
-
-      element.dispatchEvent(new Event(`mouseenter`))
-      mutation_fn()
-
-      expect(() => element.dispatchEvent(new Event(`mouseleave`))).not.toThrow()
-    })
-
-    it.each([
-      [`extremely long content`, `A`.repeat(10000)],
-      [`malformed HTML in content`, `<div><span>Unclosed tags<div><span>`],
-    ])(`should handle %s gracefully`, (_desc, content) => {
-      const element = create_element()
-      element.title = content
-      setup_tooltip(element)
-      expect(() => element.dispatchEvent(new Event(`mouseenter`))).not.toThrow()
-    })
-
-    it(`should handle high-frequency events`, () => {
-      const element = create_element()
-      element.title = `High frequency tooltip`
-      setup_tooltip(element, { delay: 10 })
-
-      for (let idx = 0; idx < 100; idx++) {
-        element.dispatchEvent(new Event(idx % 2 === 0 ? `mouseenter` : `mouseleave`))
-      }
-      expect(() => element.dispatchEvent(new Event(`mouseenter`))).not.toThrow()
+      expect(element.hasAttribute(`data-original-title`)).toBe(true)
     })
   })
 })
@@ -832,60 +682,169 @@ describe(`draggable`, () => {
 })
 
 describe(`highlight_matches`, () => {
-  const create_element = () => {
-    const element = document.createElement(`div`)
-    element.innerHTML = `Hello <span>world</span>`
-    document.body.appendChild(element)
-    return element
-  }
+  let mock_element: HTMLElement
+  let mock_css_highlights: Map<string, string>
 
   beforeEach(() => {
-    // Minimal mock for CSS.highlights and Highlight class
-    type HighlightRegistryMock = Map<string, unknown> & {
-      clear: () => void
-      delete: (key: string) => boolean
-      set: (key: string, value: unknown) => HighlightRegistryMock
+    mock_element = document.createElement(`div`)
+    mock_css_highlights = new Map()
+
+    const css_mock = {
+      highlights: {
+        clear: vi.fn(() => mock_css_highlights.clear()),
+        set: vi.fn((key: string, value: string) => mock_css_highlights.set(key, value)),
+        delete: vi.fn((key: string) => mock_css_highlights.delete(key)),
+      },
     }
-    const registry = new Map<string, unknown>() as HighlightRegistryMock
-    registry.clear = Map.prototype.clear
-    registry.delete = Map.prototype.delete
-    registry.set = Map.prototype.set as unknown as (
-      key: string,
-      value: unknown,
-    ) => HighlightRegistryMock
-    ;(globalThis as unknown as { CSS: { highlights: HighlightRegistryMock } }).CSS = {
-      highlights: registry,
-    }
-    ;(globalThis as unknown as { Highlight: new (...args: unknown[]) => unknown })
-      .Highlight = function () {
-        return {}
-      } as unknown as new (...args: unknown[]) => unknown
+
+    vi.stubGlobal(`CSS`, css_mock)
+    vi.stubGlobal(
+      `Highlight`,
+      class MockHighlight {
+        ranges: Range[]
+        constructor(...ranges: Range[]) {
+          this.ranges = ranges
+        }
+      },
+    )
   })
 
-  it(`should set a highlight when query is non-empty and not disabled`, () => {
-    const element = create_element()
-    const cleanup = highlight_matches({ query: `world` })(element)
-    expect(typeof cleanup).toBe(`function`)
-    const css: { highlights: Map<string, unknown> } =
-      (globalThis as unknown as { CSS: { highlights: Map<string, unknown> } }).CSS
-    expect(css.highlights.size).toBe(1)
-    cleanup?.()
-    expect(css.highlights.size).toBe(0)
+  afterEach(() => {
+    vi.unstubAllGlobals()
   })
 
   it.each([
-    [`empty query`, ``],
-    [`disabled`, `__disabled__`],
-  ])(`should bail out gracefully for %s`, (desc, query) => {
-    const element = create_element()
-    const disabled = desc === `disabled`
-    const cleanup = highlight_matches({
-      query: disabled ? `x` : (query as string),
-      disabled,
-    })(
-      element,
-    )
-    expect(cleanup).toBeUndefined()
+    // Early returns
+    [`CSS not supported`, undefined, `test`, `test`, false, 0, 0],
+    [`no query`, true, ``, `test`, false, 0, 0],
+    [`CSS not supported (fuzzy)`, undefined, `auo`, `auo`, true, 0, 0],
+    [`no query (fuzzy)`, true, ``, `auo`, true, 0, 0],
+
+    // Substring highlighting (fuzzy=false)
+    [
+      `substring match`,
+      true,
+      `<p>This is a test paragraph</p>`,
+      `test`,
+      false,
+      1,
+    ],
+    [
+      `multiple matches`,
+      true,
+      `<div><span>first test</span><span>second test</span></div>`,
+      `test`,
+      false,
+      1,
+    ],
+    [
+      `case insensitive`,
+      true,
+      `<p>Test with TEST and TeSt</p>`,
+      `test`,
+      false,
+      1,
+    ],
+    [
+      `no matches`,
+      true,
+      `<p>Content without search term</p>`,
+      `xyz`,
+      false,
+      1,
+    ],
+
+    // Fuzzy highlighting (fuzzy=true)
+    [`fuzzy match`, true, `<p>allow-user-options</p>`, `auo`, true, 1],
+    [
+      `fuzzy case insensitive`,
+      true,
+      `<p>ALLOW-USER-OPTIONS</p>`,
+      `auo`,
+      true,
+      1,
+    ],
+    [
+      `fuzzy no matches`,
+      true,
+      `<p>Content without search term</p>`,
+      `xyz`,
+      true,
+      1,
+    ],
+    [
+      `skip with node_filter`,
+      true,
+      `<div>Test content</div><li class="user-msg">Create this option...</li>`,
+      `test`,
+      false,
+      1,
+      (node: Node) =>
+        node?.parentElement?.closest(`li.user-msg`)
+          ? NodeFilter.FILTER_REJECT
+          : NodeFilter.FILTER_ACCEPT,
+    ],
+    [
+      `fuzzy skip with node_filter`,
+      true,
+      `<div>Test content</div><li class="user-msg">Create this option...</li>`,
+      `test`,
+      true,
+      1,
+      (node: Node) =>
+        node?.parentElement?.closest(`li.user-msg`)
+          ? NodeFilter.FILTER_REJECT
+          : NodeFilter.FILTER_ACCEPT,
+    ],
+  ])(
+    `%s`,
+    (
+      _desc,
+      css_supported,
+      query,
+      html_content,
+      fuzzy,
+      expected_set_calls,
+      node_filter = undefined,
+    ) => {
+      if (css_supported === undefined) {
+        vi.stubGlobal(`CSS`, undefined)
+      }
+
+      mock_element.innerHTML = html_content
+      const attachment = highlight_matches({ query, fuzzy, node_filter })
+      attachment(mock_element)
+
+      expect(mock_css_highlights.size).toBe(
+        css_supported === undefined ? 0 : expected_set_calls,
+      )
+
+      if (css_supported) {
+        expect(globalThis.CSS.highlights.clear).toHaveBeenCalledTimes(
+          0,
+        )
+        if (expected_set_calls > 0) {
+          expect(globalThis.CSS.highlights.set).toHaveBeenCalledWith(
+            `highlight-match`,
+            expect.any(Object),
+          )
+        }
+      }
+    },
+  )
+
+  it(`should not clear other highlights when highlighting`, () => {
+    // Setup existing highlights from other components
+    mock_css_highlights.set(`other-highlight`, `existing highlight`)
+
+    // Create our highlight
+    mock_element.innerHTML = `<p>test content</p>`
+    highlight_matches({ query: `test` })(mock_element)
+
+    // Verify our highlight was added and others preserved
+    expect(mock_css_highlights.has(`highlight-match`)).toBe(true)
+    expect(mock_css_highlights.has(`other-highlight`)).toBe(true)
+    expect(globalThis.CSS.highlights.clear).not.toHaveBeenCalled()
   })
 })
 
diff --git a/tests/vitest/utils.test.ts b/tests/vitest/utils.test.ts
index daa7926c..8b87ae93 100644
--- a/tests/vitest/utils.test.ts
+++ b/tests/vitest/utils.test.ts
@@ -1,6 +1,6 @@
 import type { Option, OptionStyle } from '$lib'
-import { get_label, get_style, highlight_matching_nodes } from '$lib/utils'
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { fuzzy_match, get_label, get_style } from '$lib/utils'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 describe(`get_label`, () => {
   beforeEach(() => {
@@ -43,6 +43,7 @@ describe(`get_style`, () => {
     [{ style: `   ` }, undefined, `   `], // whitespace is preserved, not trimmed
     [{ label: `Test`, value: 42 }, undefined, ``],
   ])(`returns correct style for %j with key %s`, (option, key, expected) => {
+    // @ts-expect-error testing with mixed types for get_style
     expect(get_style(option, key)).toBe(expected)
   })
 
@@ -85,134 +86,45 @@ describe(`get_style`, () => {
   })
 })
 
-describe(`highlight_matching_nodes`, () => {
-  let mock_element: HTMLElement
-  let mock_css_highlights: Map<string, string>
-
-  beforeEach(() => {
-    mock_element = document.createElement(`div`)
-    mock_css_highlights = new Map()
-
-    const css_mock = {
-      highlights: {
-        clear: vi.fn(() => mock_css_highlights.clear()),
-        set: vi.fn((key: string, value: string) => mock_css_highlights.set(key, value)),
-      },
-    }
-
-    vi.stubGlobal(`CSS`, css_mock)
-    vi.stubGlobal(
-      `Highlight`,
-      class MockHighlight {
-        ranges: Range[]
-        constructor(...ranges: Range[]) {
-          this.ranges = ranges
-        }
-      },
-    )
+describe(`fuzzy_match`, () => {
+  test.each([
+    // Basic cases
+    [``, ``, true],
+    [``, `anything`, true],
+    [`test`, ``, false],
+    [`test`, `test`, true],
+    [`test`, `testing`, true],
+    [`test`, `best`, false],
+    // Case insensitive
+    [`TEST`, `test`, true],
+    [`Test`, `tEsT`, true],
+    // Fuzzy matching (non-consecutive)
+    [`tageoo`, `tasks/geo-opt`, true],
+    [`abc`, `a-b-c`, true],
+    [`abc`, `a-b-d`, false],
+    [`abc`, `a-b-c-d`, true],
+    [`hello`, `h-e-l-l-o`, true],
+    [`hello`, `h-e-l-o`, false],
+    // Repeated characters
+    [`aa`, `banana`, true],
+    [`aaa`, `banana`, true],
+    [`aaaa`, `banana`, false],
+    // Special characters
+    [`@`, `@user`, true],
+    [`#`, `#hashtag`, true],
+    [`/`, `path/to/file`, true],
+    // Numbers and unicode
+    [`123`, `abc123def`, true],
+    [`ñ`, `niño`, true],
+    [`中文`, `中文测试`, true],
+  ])(`fuzzy_match("%s", "%s") should return %s`, (search, target, expected) => {
+    expect(fuzzy_match(search, target)).toBe(expected)
   })
 
-  afterEach(() => {
-    vi.unstubAllGlobals()
+  test(`handles null/undefined inputs`, () => {
+    // @ts-expect-error testing runtime behavior
+    expect(fuzzy_match(null, `test`)).toBe(false)
+    // @ts-expect-error testing runtime behavior
+    expect(fuzzy_match(undefined, `test`)).toBe(false)
   })
-
-  test.each([
-    [
-      `returns early if CSS.highlights not supported`,
-      undefined,
-      `Test content`,
-      `test`,
-      undefined,
-      0,
-      0,
-    ],
-    [
-      `returns early if no query provided`,
-      true,
-      `Test content`,
-      ``,
-      undefined,
-      0,
-      0,
-    ],
-    [
-      `highlights matching text`,
-      true,
-      `<p>This is a test paragraph with test words</p>`,
-      `test`,
-      undefined,
-      1,
-      1,
-    ],
-    [
-      `skips nodes matching noMatchingOptionsMsg`,
-      true,
-      `<p>No matching options found</p><p>test content</p>`,
-      `test`,
-      `No matching options found`,
-      1,
-      1,
-    ],
-    [
-      `handles multiple text nodes with matches`,
-      true,
-      `<div><span>first test</span><span>second test</span></div>`,
-      `test`,
-      undefined,
-      1,
-      1,
-    ],
-    [
-      `handles case-insensitive matching`,
-      true,
-      `<p>Test with TEST and TeSt</p>`,
-      `test`,
-      undefined,
-      1,
-      1,
-    ],
-    [
-      `handles no matches gracefully`,
-      true,
-      `<p>Content without the search term</p>`,
-      `xyz`,
-      undefined,
-      1,
-      1,
-    ],
-  ])(
-    `%s`,
-    (
-      _description,
-      css_supported,
-      html_content,
-      query,
-      no_matching_msg,
-      expected_clear_calls,
-      expected_set_calls,
-    ) => {
-      if (css_supported === undefined) {
-        vi.stubGlobal(`CSS`, undefined)
-      }
-
-      mock_element.innerHTML = html_content
-      highlight_matching_nodes(mock_element, query, no_matching_msg)
-
-      expect(mock_css_highlights.size).toBe(
-        css_supported === undefined ? 0 : expected_set_calls,
-      )
-
-      if (css_supported) {
-        expect(globalThis.CSS.highlights.clear).toHaveBeenCalledTimes(
-          expected_clear_calls,
-        )
-        if (expected_set_calls > 0) {
-          expect(globalThis.CSS.highlights.set).toHaveBeenCalledWith(
-            `sms-search-matches`,
-            expect.any(Object),
-          )
-        }
-      }
-    },
-  )
 })
diff --git a/tsconfig.json b/tsconfig.json
index 704c8375..43447105 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,10 +9,6 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "moduleResolution": "bundler",
-    "baseUrl": ".",
-    "paths": {
-      "$site/*": ["src/site/*"]
-    }
+    "moduleResolution": "bundler"
   }
 }

From a278b5cfc41b3435351adabb4dcbae138c8cf743 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 20 Sep 2025 08:51:03 -0700
Subject: [PATCH 2/4] fix broken mobile touch selection with portal enabled
 (#336)

- fix MultiSelect component's click handling to improve interaction with portalled dropdowns
- bump eslint and related dependencies in package.json to latest versions.
- reduce too large font size for pre > code
- rename demo page /modal -> /portal
---
 .pre-commit-config.yaml                       |  2 +-
 package.json                                  | 22 ++++-----
 src/app.css                                   |  9 ++--
 src/lib/MultiSelect.svelte                    | 12 +++--
 .../(demos)/{modal => portal}/+page.svelte    | 16 +++----
 tests/playwright/MultiSelect.test.ts          | 48 ++++++++++++++++++-
 6 files changed, 79 insertions(+), 30 deletions(-)
 rename src/routes/(demos)/{modal => portal}/+page.svelte (84%)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 11b0b615..51e16ca4 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -43,7 +43,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.35.0
+    rev: v9.36.0
     hooks:
       - id: eslint
         types: [file]
diff --git a/package.json b/package.json
index 0e435ad3..93376664 100644
--- a/package.json
+++ b/package.json
@@ -14,29 +14,29 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.55.0",
-    "@stylistic/eslint-plugin": "^5.3.1",
+    "@stylistic/eslint-plugin": "^5.4.0",
     "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.37.0",
-    "@sveltejs/package": "2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.4",
-    "@types/node": "^24.3.1",
+    "@sveltejs/kit": "^2.42.2",
+    "@sveltejs/package": "2.5.3",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@types/node": "^24.5.2",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.35.0",
-    "eslint-plugin-svelte": "^3.12.1",
+    "eslint": "^9.36.0",
+    "eslint-plugin-svelte": "^3.12.3",
     "happy-dom": "^18.0.1",
     "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.7",
+    "svelte": "^5.39.3",
     "svelte-check": "^4.3.1",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
-    "svelte2tsx": "^0.7.42",
+    "svelte2tsx": "^0.7.43",
     "typescript": "5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "vite": "^7.1.4",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^7.1.6",
     "vitest": "^3.2.4"
   },
   "keywords": [
diff --git a/src/app.css b/src/app.css
index 9f279c3a..06c490ea 100644
--- a/src/app.css
+++ b/src/app.css
@@ -33,14 +33,12 @@ main {
   width: 100%;
   max-width: var(--main-max-width);
 }
-button,
-a.btn {
+button, a.btn {
   color: white;
   cursor: pointer;
   border: none;
   border-radius: 3pt;
   padding: 2pt 4pt;
-  font-size: 12pt;
   line-height: initial;
   transition: background-color 0.2s;
   background-color: var(--btn-bg);
@@ -60,19 +58,18 @@ code {
   overflow-wrap: break-word;
   padding: 0 2pt;
   border-radius: 2pt;
-  font-size: 12pt;
   background-color: rgba(255, 255, 255, 0.15);
 }
 pre code {
   background-color: transparent;
   display: inline-block;
-  font-size: 10pt;
+  font-size: clamp(6pt, 6pt + 0.5vw, 10pt);
 }
 pre {
   position: relative;
   border-radius: 4pt;
   background-color: var(--pre-bg);
-  padding: 1em;
+  padding: 4pt;
   overflow-x: auto;
 }
 ul {
diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
index 03c55f8c..aa28a738 100644
--- a/src/lib/MultiSelect.svelte
+++ b/src/lib/MultiSelect.svelte
@@ -481,9 +481,14 @@
     }
 
   function on_click_outside(event: MouseEvent | TouchEvent) {
-    if (outerDiv && !outerDiv.contains(event.target as Node)) {
-      close_dropdown(event)
-    }
+    if (!outerDiv) return
+    const target = event.target as Node
+    // 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: number | null = $state(null)
@@ -548,6 +553,7 @@
   const handle_input_blur: FocusEventHandler<HTMLInputElement> = (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
diff --git a/src/routes/(demos)/modal/+page.svelte b/src/routes/(demos)/portal/+page.svelte
similarity index 84%
rename from src/routes/(demos)/modal/+page.svelte
rename to src/routes/(demos)/portal/+page.svelte
index 3c9d8ee5..5db04ff9 100644
--- a/src/routes/(demos)/modal/+page.svelte
+++ b/src/routes/(demos)/portal/+page.svelte
@@ -3,31 +3,31 @@
   import { get_label } from '$lib/utils'
   import { languages, octicons } from '$site/options'
 
-  let show_modal = $state(false)
+  let open_modal = $state(false)
   let selected_languages = $state<string[]>([])
   let selected_octicons = $state<string[]>([])
 
   function handle_escape(event: KeyboardEvent): void {
-    if (event.key === `Escape`) show_modal = false
+    if (event.key === `Escape`) open_modal = false
   }
 </script>
 
 <svelte:window onkeydown={handle_escape} />
 
-<h2>MultiSelect in Modal Demo</h2>
+<h2>Portalled MultiSelect in Modal Demo</h2>
 
-<button onclick={() => (show_modal = true)} style="padding: 3pt 6pt; margin: 1em auto">
+<button onclick={() => (open_modal = true)} style="padding: 3pt 6pt; margin: 1em auto">
   Open Modal
 </button>
 
-{#if show_modal}
+{#if open_modal}
   <div
     class="modal-backdrop"
     onclick={(event) => {
-      if (event.target === event.currentTarget) show_modal = false
+      if (event.target === event.currentTarget) open_modal = false
     }}
     onkeydown={(event) => {
-      if (event.key === `Enter` || event.key === ` `) show_modal = false
+      if (event.key === `Enter` || event.key === ` `) open_modal = false
     }}
     role="button"
     tabindex="0"
@@ -58,7 +58,7 @@
       />
       <p>Selected Languages: {selected_languages.map(get_label).join(`, `) || `None`}</p>
       <p>Selected Octicons: {selected_octicons.map(get_label).join(`, `) || `None`}</p>
-      <button onclick={() => (show_modal = false)}>Close Modal 2</button>
+      <button onclick={() => (open_modal = false)}>Close Modal 2</button>
     </div>
   </div>
 {/if}
diff --git a/tests/playwright/MultiSelect.test.ts b/tests/playwright/MultiSelect.test.ts
index 54226341..c60bf267 100644
--- a/tests/playwright/MultiSelect.test.ts
+++ b/tests/playwright/MultiSelect.test.ts
@@ -747,8 +747,54 @@ test.describe(`portal feature`, () => {
     await expect(portalled_foods_options).not.toBeAttached()
   })
 
+  test(`mobile touch selection works with portal enabled`, async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 812 })
+    await page.goto(`/portal`, { waitUntil: `networkidle` })
+    await page.getByRole(`button`, { name: `Open Modal` }).click()
+
+    const modal_content = page.locator(`div.modal-content.modal`)
+    const languages_input = modal_content.locator(
+      `div.multiselect input[placeholder='Choose languages...']`,
+    )
+
+    await languages_input.click()
+
+    const portalled_languages_options = page.locator(
+      `body > ul.options[aria-expanded="true"]:has(li:has-text("${languages[0]}"))`,
+    )
+    await expect(portalled_languages_options).toBeVisible()
+
+    // Simulate the race condition that causes the bug
+    const dropdown_stays_open = await page.evaluate(() => {
+      const outerDiv = document.querySelector(`div.multiselect`)
+      const portalled_option = document.querySelector(
+        `body > ul.options li[role="option"]`,
+      )
+      const dropdown = document.querySelector(`body > ul.options`)
+
+      if (!outerDiv || !portalled_option || !dropdown) return false
+
+      // Simulate click outside event on portalled element
+      const click_event = new MouseEvent(`click`, { bubbles: true })
+      Object.defineProperty(click_event, `target`, { value: portalled_option })
+      globalThis.dispatchEvent(click_event)
+
+      return dropdown.getAttribute(`aria-expanded`) === `true`
+    })
+
+    // Without fix: dropdown closes, test times out. With fix: dropdown stays open, test passes.
+    expect(dropdown_stays_open).toBe(true)
+
+    await portalled_languages_options.getByRole(`option`, {
+      name: languages[0],
+      exact: true,
+    }).click()
+    await expect(modal_content.getByRole(`button`, { name: `Remove ${languages[0]}` }))
+      .toBeVisible()
+  })
+
   test(`dropdowns in modal render in body when portal is active`, async ({ page }) => {
-    await page.goto(`/modal`, { waitUntil: `networkidle` })
+    await page.goto(`/portal`, { waitUntil: `networkidle` })
 
     await page.getByRole(`button`, { name: `Open Modal` }).click()
 

From ad02b140032f405c1ef66aaacf1912d296239518 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 4 Oct 2025 16:03:03 -0700
Subject: [PATCH 3/4] immediately hide tooltip on scroll + icon fixes in
 MultiSelect + type fixes in CmdPalette and PrevNext

- unit tests for tooltip to verify new scroll behavior
- remove RadioButtons component and related tests
---
 .pre-commit-config.yaml           |   2 +-
 package.json                      |  30 ++++-----
 src/lib/CmdPalette.svelte         |  11 +--
 src/lib/MultiSelect.svelte        |  19 +++---
 src/lib/PrevNext.svelte           |  23 +++----
 src/lib/RadioButtons.svelte       | 108 ------------------------------
 src/lib/attachments.ts            |   4 ++
 src/lib/index.ts                  |   1 -
 tests/vitest/RadioButtons.test.ts |  45 -------------
 tests/vitest/attachments.test.ts  |  44 ++++++++++--
 10 files changed, 86 insertions(+), 201 deletions(-)
 delete mode 100644 src/lib/RadioButtons.svelte
 delete mode 100644 tests/vitest/RadioButtons.test.ts

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 51e16ca4..ef1813ae 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -43,7 +43,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.36.0
+    rev: v9.37.0
     hooks:
       - id: eslint
         types: [file]
diff --git a/package.json b/package.json
index 93376664..abfc2f2b 100644
--- a/package.json
+++ b/package.json
@@ -13,30 +13,30 @@
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.55.0",
+    "@playwright/test": "^1.55.1",
     "@stylistic/eslint-plugin": "^5.4.0",
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.42.2",
-    "@sveltejs/package": "2.5.3",
-    "@sveltejs/vite-plugin-svelte": "^6.2.0",
-    "@types/node": "^24.5.2",
+    "@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.36.0",
-    "eslint-plugin-svelte": "^3.12.3",
-    "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.39.3",
-    "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.43",
-    "typescript": "5.9.2",
-    "typescript-eslint": "^8.44.0",
-    "vite": "^7.1.6",
+    "svelte2tsx": "^0.7.44",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4"
   },
   "keywords": [
diff --git a/src/lib/CmdPalette.svelte b/src/lib/CmdPalette.svelte
index eed5d674..f287b7c1 100644
--- a/src/lib/CmdPalette.svelte
+++ b/src/lib/CmdPalette.svelte
@@ -9,7 +9,8 @@
     action: (label: string) => void
   }
 
-  interface Props extends Omit<ComponentProps<typeof MultiSelect>, `options`> {
+  interface Props
+    extends Omit<ComponentProps<typeof MultiSelect<Action>>, `options`> {
     actions: Action[]
     triggers?: string[]
     close_keys?: string[]
@@ -46,14 +47,16 @@
   }
 
   function close_if_outside(event: MouseEvent) {
-    const target = event.target as HTMLElement
+    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: { option: Option }) {
-    const { action, label } = data.option as Action
+  function trigger_action_and_close({ option }: { option: Option }) {
+    const { action, label } = (option ?? {}) as Action
+    if (!action) return
     action(label)
     open = false
   }
diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
index aa28a738..7e2a192d 100644
--- a/src/lib/MultiSelect.svelte
+++ b/src/lib/MultiSelect.svelte
@@ -437,7 +437,8 @@
       event.stopPropagation()
       // Only remove option if it wouldn't violate minSelect
       if (minSelect === null || selected.length > minSelect) {
-        remove(selected.at(-1) as Option, 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)
@@ -597,7 +598,7 @@
       window.addEventListener(`scroll`, update_position, true)
       window.addEventListener(`resize`, update_position)
 
-      $effect.pre(() => {
+      $effect(() => {
         if (open && target_node) update_position()
         else node.hidden = true
       })
@@ -669,8 +670,7 @@
   {: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
@@ -725,7 +725,7 @@
             {#if removeIcon}
               {@render removeIcon()}
             {:else}
-              <Icon icon="Cross" width="15px" />
+              <Icon icon="Cross" style="width: 15px" />
             {/if}
           </button>
         {/if}
@@ -741,7 +741,7 @@
       {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}
@@ -782,8 +782,7 @@
     {:else}
       <Icon
         icon="Disabled"
-        width="14pt"
-        style="margin: 0 2pt"
+        style="width: 14pt; margin: 0 2pt"
         data-name="disabled-icon"
         aria-disabled="true"
       />
@@ -807,7 +806,7 @@
         {#if removeIcon}
           {@render removeIcon()}
         {:else}
-          <Icon icon="Cross" width="15px" />
+          <Icon icon="Cross" style="width: 15px" />
         {/if}
       </button>
     {/if}
@@ -917,7 +916,7 @@
         {@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}
diff --git a/src/lib/PrevNext.svelte b/src/lib/PrevNext.svelte
index f9d3cc89..60a19a5c 100644
--- a/src/lib/PrevNext.svelte
+++ b/src/lib/PrevNext.svelte
@@ -2,17 +2,18 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  export type Item = string | [string, unknown]
-  type T = $$Generic<Item>
+  export type Item = [string, unknown]
 
   interface Props extends Omit<HTMLAttributes<HTMLElement>, `children` | `onkeyup`> {
-    items?: T[]
+    items?: (string | Item)[]
     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
+    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<[]>
@@ -26,10 +27,7 @@
     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],
-    }),
+    onkeyup = ({ prev, next }) => ({ ArrowLeft: prev[0], ArrowRight: next[0] }),
     prev_snippet,
     children,
     between,
@@ -40,9 +38,9 @@
 
   // Convert items to consistent [key, value] format
   let items_arr = $derived(
-    (items ?? []).map((
-      itm,
-    ) => (typeof itm === `string` ? [itm, itm] : itm)) as Item[],
+    (items ?? []).map(
+      (itm) => (typeof itm === `string` ? [itm, itm] : itm),
+    ) as Item[],
   )
 
   // Calculate prev/next items with wraparound
@@ -71,9 +69,10 @@
   function handle_keyup(event: KeyboardEvent) {
     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]
diff --git a/src/lib/RadioButtons.svelte b/src/lib/RadioButtons.svelte
deleted file mode 100644
index 2f19ab45..00000000
--- a/src/lib/RadioButtons.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte'
-  import type { HTMLAttributes } from 'svelte/elements'
-
-  type GenericOption = string | number | { value: unknown; label: string | number }
-  type Option = $$Generic<GenericOption>
-
-  // get the label key from an option object or the option itself if it's a string or number
-  const get_label = (op: GenericOption) => {
-    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
-  }
-  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, `children`> {
-    options: Option[]
-    selected?: string | number | Option | 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; active: boolean }]
-    >
-    children?: Snippet<[{ option: Option; active: boolean }]>
-  }
-  let {
-    options,
-    selected = $bindable(),
-    id = null,
-    name = null,
-    disabled = false,
-    required = false,
-    aria_label = null,
-    onclick,
-    onchange,
-    oninput,
-    option_snippet,
-    children,
-    ...rest
-  }: Props = $props()
-</script>
-
-<div {id} {...rest}>
-  {#each options as option (JSON.stringify(option))}
-    {@const label = get_label(option)}
-    {@const active = selected != null &&
-      label === get_label(selected as unknown as GenericOption)}
-    <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, active })}
-      {:else if children}
-        {@render children({ option, 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>
diff --git a/src/lib/attachments.ts b/src/lib/attachments.ts
index 9c420882..a1d2c169 100644
--- a/src/lib/attachments.ts
+++ b/src/lib/attachments.ts
@@ -531,8 +531,12 @@ export const tooltip = (options: TooltipOptions = {}): Attachment => (node: Elem
 
     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) {
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 21e9f8ef..76b1dc13 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -8,7 +8,6 @@ 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'
diff --git a/tests/vitest/RadioButtons.test.ts b/tests/vitest/RadioButtons.test.ts
deleted file mode 100644
index 18b5bb06..00000000
--- a/tests/vitest/RadioButtons.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { RadioButtons } from '$lib'
-import { mount } from 'svelte'
-import { afterEach, beforeEach, describe, expect, test } from 'vitest'
-
-describe(`RadioButtons`, () => {
-  let target: HTMLElement
-
-  beforeEach(() => (target = document.body))
-  afterEach(() => (target.innerHTML = ``))
-
-  const options = [`Option 1`, `Option 2`, `Option 3`]
-
-  test(`renders radio buttons for each option`, () => {
-    mount(RadioButtons, { target, props: { options } })
-    const inputs = target.querySelectorAll(`input[type='radio']`)
-    expect(inputs).toHaveLength(3)
-  })
-
-  test(`selects correct option when value is set`, () => {
-    mount(RadioButtons, { target, props: { options, value: `Option 2` } })
-    const inputs = target.querySelectorAll(
-      `input[type='radio']`,
-    ) as NodeListOf<HTMLInputElement>
-
-    // Check that the correct input has the value attribute matching the selected value
-    expect(inputs[1].value).toBe(`Option 2`)
-    // The component may not automatically set checked state, so just verify the value is correct
-    expect(Array.from(inputs).some((input) => input.value === `Option 2`)).toBe(
-      true,
-    )
-  })
-
-  test(`has consistent name attribute`, () => {
-    mount(RadioButtons, { target, props: { options } })
-    const inputs = target.querySelectorAll(`input[type='radio']`)
-    const names = Array.from(inputs).map((input) => input.getAttribute(`name`))
-    expect(new Set(names).size).toBe(1)
-  })
-
-  test(`renders with custom name`, () => {
-    mount(RadioButtons, { target, props: { options, name: `custom-name` } })
-    const inputs = target.querySelectorAll(`input[type='radio']`)
-    expect(inputs[0].getAttribute(`name`)).toBe(`custom-name`)
-  })
-})
diff --git a/tests/vitest/attachments.test.ts b/tests/vitest/attachments.test.ts
index b4f9aef9..59a09238 100644
--- a/tests/vitest/attachments.test.ts
+++ b/tests/vitest/attachments.test.ts
@@ -398,6 +398,34 @@ describe(`tooltip`, () => {
 
       expect(element.hasAttribute(`data-original-title`)).toBe(true)
     })
+
+    it(`should hide tooltip on scroll`, () => {
+      vi.useFakeTimers()
+      const element = create_element()
+      element.title = `test`
+      mock_bounds(element)
+      setup_tooltip(element, { delay: 0 })
+
+      element.dispatchEvent(new MouseEvent(`mouseenter`, { bubbles: true }))
+      vi.runAllTimers()
+      expect(document.querySelector(`.custom-tooltip`)).toBeTruthy()
+
+      globalThis.dispatchEvent(new Event(`scroll`, { bubbles: true }))
+      expect(document.querySelector(`.custom-tooltip`)).toBeFalsy()
+
+      vi.useRealTimers()
+    })
+
+    it(`should remove scroll listener on cleanup`, () => {
+      const element = create_element()
+      element.title = `test`
+      const spy = vi.spyOn(globalThis, `removeEventListener`)
+
+      setup_tooltip(element)?.()
+
+      expect(spy).toHaveBeenCalledWith(`scroll`, expect.any(Function), true)
+      spy.mockRestore()
+    })
   })
 
   describe(`Global State Management`, () => {
@@ -715,10 +743,10 @@ describe(`highlight_matches`, () => {
 
   it.each([
     // Early returns
-    [`CSS not supported`, undefined, `test`, `test`, false, 0, 0],
-    [`no query`, true, ``, `test`, false, 0, 0],
-    [`CSS not supported (fuzzy)`, undefined, `auo`, `auo`, true, 0, 0],
-    [`no query (fuzzy)`, true, ``, `auo`, true, 0, 0],
+    [`CSS not supported`, undefined, `test`, `test`, false, 0, undefined],
+    [`no query`, true, ``, `test`, false, 0, undefined],
+    [`CSS not supported (fuzzy)`, undefined, `auo`, `auo`, true, 0, undefined],
+    [`no query (fuzzy)`, true, ``, `auo`, true, 0, undefined],
 
     // Substring highlighting (fuzzy=false)
     [
@@ -728,6 +756,7 @@ describe(`highlight_matches`, () => {
       `test`,
       false,
       1,
+      undefined,
     ],
     [
       `multiple matches`,
@@ -736,6 +765,7 @@ describe(`highlight_matches`, () => {
       `test`,
       false,
       1,
+      undefined,
     ],
     [
       `case insensitive`,
@@ -744,6 +774,7 @@ describe(`highlight_matches`, () => {
       `test`,
       false,
       1,
+      undefined,
     ],
     [
       `no matches`,
@@ -752,10 +783,11 @@ describe(`highlight_matches`, () => {
       `xyz`,
       false,
       1,
+      undefined,
     ],
 
     // Fuzzy highlighting (fuzzy=true)
-    [`fuzzy match`, true, `<p>allow-user-options</p>`, `auo`, true, 1],
+    [`fuzzy match`, true, `<p>allow-user-options</p>`, `auo`, true, 1, undefined],
     [
       `fuzzy case insensitive`,
       true,
@@ -763,6 +795,7 @@ describe(`highlight_matches`, () => {
       `auo`,
       true,
       1,
+      undefined,
     ],
     [
       `fuzzy no matches`,
@@ -771,6 +804,7 @@ describe(`highlight_matches`, () => {
       `xyz`,
       true,
       1,
+      undefined,
     ],
     [
       `skip with node_filter`,

From 9c0427bc389ad38706c50f3efca2999a2e94b111 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 4 Oct 2025 16:16:29 -0700
Subject: [PATCH 4/4] v11.2.4

---
 changelog.md | 8 ++++++++
 package.json | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/changelog.md b/changelog.md
index 9878ee6c..a95a2784 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [v11.2.4](https://github.com/janosh/svelte-multiselect/compare/v11.2.3...v11.2.4)
+
+> 4 October 2025
+
+- Add prop `fuzzy: boolean = true` to `MultiSelect` and `CmdPalette` for fuzzy option filtering (#334) by @janosh
+- fix broken mobile touch selection with portal enabled (#336) by @janosh
+- immediately hide tooltip on scroll + icon fixes in MultiSelect + type fixes in CmdPalette and PrevNext by @janosh
+
 ## [v11.2.3](https://github.com/janosh/svelte-multiselect/compare/v11.2.2...v11.2.3)
 
 > 13 August 2025
diff --git a/package.json b/package.json
index abfc2f2b..3e624c5a 100644
--- a/package.json
+++ b/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",