svelte-multiselect 11.2.2 → 11.2.4

package/dist/CmdPalette.svelte

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

package/dist/CmdPalette.svelte.d.ts

@@ -1,9 +1,11 @@
-import type { MultiSelectProps, ObjectOption } from './types';
+import type { ComponentProps } from 'svelte';
+import MultiSelect from './MultiSelect.svelte';
+import type { ObjectOption } from './types';
 interface Action extends ObjectOption {
     label: string;
     action: (label: string) => void;
 }
-interface Props extends Omit<MultiSelectProps<Action>, `options`> {
+interface Props extends Omit<ComponentProps<typeof MultiSelect<Action>>, `options`> {
     actions: Action[];
     triggers?: string[];
     close_keys?: string[];

package/dist/CopyButton.svelte

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

package/dist/CopyButton.svelte.d.ts

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

package/dist/Icon.svelte.d.ts

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

package/dist/MultiSelect.svelte

@@ -1,12 +1,18 @@
-<script lang="ts">import { CircleSpinner, Icon, Wiggle } from './';
-import { tick } from 'svelte';
+<script lang="ts">import { tick } from 'svelte';
 import { flip } from 'svelte/animate';
-import { get_label, get_style, highlight_matching_nodes } from './utils';
-let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptionMsg = `Create this option...`, allowUserOptions = false, allowEmpty = false, autocomplete = `off`, autoScroll = true, breakpoint = 800, defaultDisabledTitle = `This option is disabled`, disabled = false, disabledInputTitle = `This input is disabled`, duplicateOptionMsg = `This option is already selected`, duplicates = false, key = (opt) => `${get_label(opt)}`.toLowerCase(), filterFunc = (opt, searchText) => {
+import { highlight_matches } from './attachments';
+import CircleSpinner from './CircleSpinner.svelte';
+import Icon from './Icon.svelte';
+import { fuzzy_match, get_label, get_style } from './utils';
+import Wiggle from './Wiggle.svelte';
+let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptionMsg = `Create this option...`, allowUserOptions = false, allowEmpty = false, autocomplete = `off`, autoScroll = true, breakpoint = 800, defaultDisabledTitle = `This option is disabled`, disabled = false, disabledInputTitle = `This input is disabled`, duplicateOptionMsg = `This option is already selected`, duplicates = false, keepSelectedInDropdown = false, key = (opt) => `${get_label(opt)}`.toLowerCase(), filterFunc = (opt, searchText) => {
     if (!searchText)
         return true;
-    return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
-}, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), selected = $bindable(options
+    const label = `${get_label(opt)}`;
+    return fuzzy
+        ? fuzzy_match(searchText, label)
+        : label.toLowerCase().includes(searchText.toLowerCase());
+}, fuzzy = true, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), selected = $bindable(options
     ?.filter((opt) => opt instanceof Object && opt?.preselected)
     .slice(0, maxSelect ?? undefined) ?? []), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, value = $bindable(null), expandIcon, selectedItem, children, removeIcon, afterInput, spinner, disabledIcon, option, userMsg, onblur, onclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseenter, onmouseleave, ontouchcancel, ontouchend, ontouchmove, ontouchstart, onadd, oncreate, onremove, onremoveAll, onchange, onopen, onclose, portal: portal_params = {}, ...rest } = $props();
 $effect.pre(() => {
@@ -62,7 +68,9 @@ let window_width = $state(0);
 $effect.pre(() => {
     matchingOptions = options.filter((opt) => filterFunc(opt, searchText) &&
         // remove already selected options from dropdown list unless duplicate selections are allowed
-        (!selected.map(key).includes(key(opt)) || duplicates));
+        // or keepSelectedInDropdown is enabled
+        (!selected.map(key).includes(key(opt)) || duplicates ||
+            keepSelectedInDropdown));
 });
 // raise if matchingOptions[activeIndex] does not yield a value
 if (activeIndex !== null && !matchingOptions[activeIndex]) {
@@ -72,6 +80,17 @@ if (activeIndex !== null && !matchingOptions[activeIndex]) {
 $effect(() => {
     activeOption = matchingOptions[activeIndex ?? -1] ?? null;
 });
+// toggle an option between selected and unselected states (for keepSelectedInDropdown mode)
+function toggle_option(option_to_toggle, event) {
+    const is_currently_selected = selected.map(key).includes(key(option_to_toggle));
+    if (is_currently_selected) {
+        if (minSelect === null || selected.length > minSelect) { // Only remove if it wouldn't violate minSelect
+            remove(option_to_toggle, event);
+        }
+    }
+    else
+        add(option_to_toggle, event);
+}
 // add an option to selected list
 function add(option_to_add, event) {
     event.stopPropagation();
@@ -115,10 +134,9 @@ function add(option_to_add, event) {
             console.error(`MultiSelect: encountered falsy option ${option_to_add}`);
             return;
         }
-        if (maxSelect === 1) {
-            // for maxSelect = 1 we always replace current option with new one
+        // for maxSelect = 1 we always replace current option with new one
+        if (maxSelect === 1)
             selected = [option_to_add];
-        }
         else {
             selected = [...selected, option_to_add];
             if (sortSelected === true) {
@@ -132,7 +150,7 @@ function add(option_to_add, event) {
                 selected = selected.sort(sortSelected);
             }
         }
-        const reached_max_select = selected.length === maxSelect;
+        const reached_max_select = selected.length >= (maxSelect ?? Infinity);
         const dropdown_should_close = closeDropdownOnSelect === true ||
             closeDropdownOnSelect === `retain-focus` ||
             (closeDropdownOnSelect === `if-mobile` && window_width &&
@@ -141,9 +159,8 @@ function add(option_to_add, event) {
         if (reached_max_select || dropdown_should_close) {
             close_dropdown(event, should_retain_focus);
         }
-        else if (!dropdown_should_close) {
+        else if (!dropdown_should_close)
             input?.focus();
-        }
         onadd?.({ option: option_to_add });
         onchange?.({ option: option_to_add, type: `add` });
         invalid = false; // reset error status whenever new items are selected
@@ -203,8 +220,12 @@ async function handle_keydown(event) {
         event.stopPropagation();
         event.preventDefault(); // prevent enter key from triggering form submission
         if (activeOption) {
-            if (selected.includes(activeOption))
-                remove(activeOption, event);
+            if (selected.includes(activeOption)) {
+                // Only remove if it wouldn't violate minSelect
+                if (minSelect === null || selected.length > minSelect) {
+                    remove(activeOption, event);
+                }
+            }
             else
                 add(activeOption, event);
             searchText = ``;
@@ -242,11 +263,25 @@ async function handle_keydown(event) {
         // if none of the above special cases apply, we make next/prev option
         // active with wrap around at both ends
         const increment = event.key === `ArrowUp` ? -1 : 1;
-        activeIndex = (activeIndex + increment) % matchingOptions.length;
+        // Include user message in total count if it exists
+        const has_user_msg = searchText && ((allowUserOptions && createOptionMsg) ||
+            (!duplicates && selected.map(get_label).includes(searchText)) ||
+            (matchingOptions.length === 0 && noMatchingOptionsMsg));
+        const total_items = matchingOptions.length + (has_user_msg ? 1 : 0);
+        activeIndex = (activeIndex + increment) % total_items;
         // in JS % behaves like remainder operator, not real modulo, so negative numbers stay negative
         // need to do manual wrap around at 0
         if (activeIndex < 0)
-            activeIndex = matchingOptions.length - 1;
+            activeIndex = total_items - 1;
+        // Handle user message activation
+        if (has_user_msg && activeIndex === matchingOptions.length) {
+            option_msg_is_active = true;
+            activeOption = null;
+        }
+        else {
+            option_msg_is_active = false;
+            activeOption = matchingOptions[activeIndex] ?? null;
+        }
         if (autoScroll) {
             await tick();
             const li = document.querySelector(`ul.options > li.active`);
@@ -256,8 +291,13 @@ async function handle_keydown(event) {
     } // on backspace key: remove last selected option
     else if (event.key === `Backspace` && selected.length > 0 && !searchText) {
         event.stopPropagation();
+        // Only remove option if it wouldn't violate minSelect
+        if (minSelect === null || selected.length > minSelect) {
+            const last_option = selected.at(-1);
+            if (last_option)
+                remove(last_option, event);
+        }
         // Don't prevent default, allow normal backspace behavior if not removing
-        remove(selected.at(-1), event);
     } // make first matching option active on any keypress (if none of the above special cases match)
     else if (matchingOptions.length > 0 && activeIndex === null) {
         // Don't stop propagation or prevent default here, allow normal character input
@@ -266,11 +306,23 @@ async function handle_keydown(event) {
 }
 function remove_all(event) {
     event.stopPropagation();
-    selected = []; // Set selected first
-    searchText = ``;
-    // Now trigger change events
-    onremoveAll?.({ options: selected });
+    // Keep the first minSelect items, remove the rest
+    let removed_options = [];
+    if (minSelect === null) {
+        // If no minSelect constraint, remove all
+        removed_options = selected;
+        selected = [];
+        searchText = ``;
+    }
+    else if (selected.length > minSelect) {
+        // Keep the first minSelect items
+        removed_options = selected.slice(minSelect);
+        selected = selected.slice(0, minSelect);
+        searchText = ``;
+    }
+    onremoveAll?.({ options: removed_options });
     onchange?.({ options: selected, type: `removeAll` });
+    // If selected.length <= minSelect, do nothing (can't remove any more)
 }
 let is_selected = $derived((label) => selected.map(get_label).includes(label));
 const if_enter_or_space = (handler) => (event) => {
@@ -280,9 +332,17 @@ const if_enter_or_space = (handler) => (event) => {
     }
 };
 function on_click_outside(event) {
-    if (outerDiv && !outerDiv.contains(event.target)) {
-        close_dropdown(event);
-    }
+    if (!outerDiv)
+        return;
+    const target = event.target;
+    // Check if click is inside the main component
+    if (outerDiv.contains(target))
+        return;
+    // If portal is active, also check if click is inside the portalled options dropdown
+    if (portal_params?.active && ul_options && ul_options.contains(target))
+        return;
+    // Click is outside both the main component and any portalled dropdown
+    close_dropdown(event);
 }
 let drag_idx = $state(null);
 // event handlers enable dragging to reorder selected options
@@ -312,16 +372,6 @@ const dragstart = (idx) => (event) => {
     event.dataTransfer.setData(`text/plain`, `${idx}`);
 };
 let ul_options = $state();
-// highlight text matching user-entered search text in available options
-function highlight_matching_options(event) {
-    if (!highlightMatches || !ul_options)
-        return;
-    // get input's search query
-    const query = event?.target?.value.trim().toLowerCase();
-    if (!query)
-        return;
-    highlight_matching_nodes(ul_options, query, noMatchingOptionsMsg);
-}
 const handle_input_keydown = (event) => {
     handle_keydown(event); // Restore internal logic
     // Call original forwarded handler
@@ -351,6 +401,7 @@ $effect(() => {
 const handle_input_blur = (event) => {
     // For portalled dropdowns, don't close on blur since clicks on portalled elements
     // will cause blur but we want to allow the click to register first
+    // (otherwise mobile touch event is unable to select options https://github.com/janosh/svelte-multiselect/issues/335)
     if (portal_params?.active) {
         onblur?.(event); // Let the click handler manage closing for portalled dropdowns
         return;
@@ -388,7 +439,7 @@ function portal(node, params) {
             tick().then(update_position);
         window.addEventListener(`scroll`, update_position, true);
         window.addEventListener(`resize`, update_position);
-        $effect.pre(() => {
+        $effect(() => {
             if (open && target_node)
                 update_position();
             else
@@ -464,8 +515,7 @@ function portal(node, params) {
   {:else}
     <Icon
       icon="ChevronExpand"
-      width="15px"
-      style="min-width: 1em; padding: 0 1pt; cursor: pointer"
+      style="width: 15px; min-width: 1em; padding: 0 1pt; cursor: pointer"
     />
   {/if}
   <ul
@@ -520,7 +570,7 @@ function portal(node, params) {
             {#if removeIcon}
               {@render removeIcon()}
             {:else}
-              <Icon icon="Cross" width="15px" />
+              <Icon icon="Cross" style="width: 15px" />
             {/if}
           </button>
         {/if}
@@ -536,13 +586,12 @@ function portal(node, params) {
       {autocomplete}
       {inputmode}
       {pattern}
-      placeholder={selected.length == 0 ? placeholder : null}
+      placeholder={selected.length === 0 ? placeholder : null}
       aria-invalid={invalid ? `true` : null}
       ondrop={() => false}
       onmouseup={open_dropdown}
       onkeydown={handle_input_keydown}
       onfocus={handle_input_focus}
-      oninput={highlight_matching_options}
       onblur={handle_input_blur}
       {onclick}
       {onkeyup}
@@ -578,9 +627,9 @@ function portal(node, params) {
     {:else}
       <Icon
         icon="Disabled"
-        width="14pt"
-        style="margin: 0 2pt"
+        style="width: 14pt; margin: 0 2pt"
         data-name="disabled-icon"
+        aria-disabled="true"
       />
     {/if}
   {:else if selected.length > 0}
@@ -602,7 +651,7 @@ function portal(node, params) {
         {#if removeIcon}
           {@render removeIcon()}
         {:else}
-          <Icon icon="Cross" width="15px" />
+          <Icon icon="Cross" style="width: 15px" />
         {/if}
       </button>
     {/if}
@@ -612,6 +661,17 @@ function portal(node, params) {
   {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}
     <ul
       use:portal={{ target_node: outerDiv, ...portal_params }}
+      {@attach highlight_matches({
+        query: searchText,
+        disabled: !highlightMatches,
+        fuzzy,
+        css_class: `sms-search-matches`,
+        // don't highlight text in the "Create this option..." message
+        node_filter: (node) =>
+          node?.parentElement?.closest(`li.user-msg`)
+            ? NodeFilter.FILTER_REJECT
+            : NodeFilter.FILTER_ACCEPT,
+      })}
       class:hidden={!open}
       class="options {ulOptionsClass}"
       role="listbox"
@@ -621,10 +681,13 @@ function portal(node, params) {
       bind:this={ul_options}
       style={ulOptionsStyle}
     >
-      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as
-        optionItem,
+      {#each matchingOptions.slice(
+        0,
+        maxOptions == null ? Infinity : Math.max(0, maxOptions),
+      ) as
+        option_item,
         idx
-        (duplicates ? [key(optionItem), idx] : key(optionItem))
+        (duplicates ? [key(option_item), idx] : key(option_item))
       }
         {@const {
         label,
@@ -632,19 +695,22 @@ function portal(node, params) {
         title = null,
         selectedTitle = null,
         disabledTitle = defaultDisabledTitle,
-      } = optionItem instanceof Object ? optionItem : { label: optionItem }}
+      } = option_item instanceof Object ? option_item : { label: option_item }}
         {@const active = activeIndex === idx}
+        {@const selected = is_selected(label)}
         {@const optionStyle =
-        [get_style(optionItem, `option`), liOptionStyle].filter(Boolean).join(
+        [get_style(option_item, `option`), liOptionStyle].filter(Boolean).join(
           ` `,
         ) ||
         null}
         <li
           onclick={(event) => {
-            if (!disabled) add(optionItem, event)
+            if (disabled) return
+            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 : ``}"
@@ -655,29 +721,39 @@ function portal(node, params) {
             if (!disabled) activeIndex = idx
           }}
           role="option"
-          aria-selected="false"
+          aria-selected={selected ? `true` : `false`}
           style={optionStyle}
           onkeydown={(event) => {
             if (!disabled && (event.key === `Enter` || event.code === `Space`)) {
               event.preventDefault()
-              add(optionItem, event)
+              if (keepSelectedInDropdown) toggle_option(option_item, event)
+              else add(option_item, event)
             }
           }}
         >
+          {#if keepSelectedInDropdown === `checkboxes`}
+            <input
+              type="checkbox"
+              class="option-checkbox"
+              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}
@@ -685,7 +761,7 @@ function portal(node, params) {
         {@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
         {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
         {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
-        {@const no_match = Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) &&
+        {@const no_match = Boolean(matchingOptions?.length === 0 && noMatchingOptionsMsg) &&
         `no-match`}
         {@const msgType = is_dupe || can_create || no_match}
         {#if msgType}
@@ -895,11 +971,13 @@ function portal(node, params) {
     visibility: hidden;
     opacity: 0;
     transform: translateY(50px);
+    pointer-events: none;
   }
   ul.options > li {
-    padding: 3pt 2ex;
+    padding: 3pt 1ex;
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
+    border-left: 3px solid transparent;
   }
   ul.options .user-msg {
     /* block needed so vertical padding applies to span */
@@ -907,8 +985,11 @@ function portal(node, params) {
     padding: 3pt 2ex;
   }
   ul.options > li.selected {
-    background: var(--sms-li-selected-bg);
-    color: var(--sms-li-selected-color);
+    background: var(--sms-li-selected-plain-bg, rgba(0, 123, 255, 0.1));
+    border-left: var(
+      --sms-li-selected-plain-border,
+      3px solid var(--sms-active-color, cornflowerblue)
+    );
   }
   ul.options > li.active {
     background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
@@ -918,7 +999,13 @@ function portal(node, params) {
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);
   }
-
+  /* Checkbox styling for keepSelectedInDropdown='checkboxes' mode */
+  ul.options > li > input.option-checkbox {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+    accent-color: var(--sms-active-color, cornflowerblue);
+  }
   :is(span.max-select-msg) {
     padding: 0 3pt;
   }

package/dist/MultiSelect.svelte.d.ts

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

package/dist/PrevNext.svelte

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