svelte-multiselect 11.5.2 → 11.6.1

package/dist/MultiSelect.svelte

@@ -5,17 +5,17 @@ import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { highlight_matches } from './attachments';
 import CircleSpinner from './CircleSpinner.svelte';
 import Icon from './Icon.svelte';
-import { fuzzy_match, get_label, get_style, has_group, is_object } from './utils';
+import * as utils 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) => {
+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) => utils.get_option_key(opt), filterFunc = (opt, searchText) => {
     if (!searchText)
         return true;
-    const label = `${get_label(opt)}`;
+    const label = `${utils.get_label(opt)}`;
     return fuzzy
-        ? fuzzy_match(searchText, label)
+        ? utils.fuzzy_match(searchText, label)
         : label.toLowerCase().includes(searchText.toLowerCase());
 }, fuzzy = true, closeDropdownOnSelect = false, 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 = $bindable(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(``), value = $bindable(null), selected = $bindable(value !== null && value !== undefined
-    ? (Array.isArray(value) ? value : [value])
+    ? Array.isArray(value) ? value : [value]
     : (options
         ?.filter((opt) => typeof opt === `object` && opt !== null && opt?.preselected)
         .slice(0, maxSelect ?? undefined) ?? [])), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = 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, onselectAll, onreorder, portal: portal_params = {}, 
@@ -28,22 +28,22 @@ selectedFlipParams = { duration: 100 },
 // Option grouping feature
 collapsibleGroups = false, collapsedGroups = $bindable(new Set()), groupSelectAll = false, ungroupedPosition = `first`, groupSortOrder = `none`, searchExpandsCollapsedGroups = false, searchMatchesGroups = false, keyboardExpandsCollapsedGroups = false, stickyGroupHeaders = false, liGroupHeaderClass = ``, liGroupHeaderStyle = null, groupHeader, ongroupToggle, oncollapseAll, onexpandAll, onsearch, onmaxreached, onduplicate, onactivate, collapseAllGroups = $bindable(), expandAllGroups = $bindable(), 
 // Keyboard shortcuts for common actions
-shortcuts = {}, ...rest } = $props();
+shortcuts = {}, 
+// Selection history for undo/redo (enabled by default, set to false or 0 to disable)
+history = true, undo = $bindable(), redo = $bindable(), canUndo = $bindable(false), canRedo = $bindable(false), onundo, onredo, ...rest } = $props();
 // Generate unique IDs for ARIA associations (combobox pattern)
 // Uses provided id prop or generates a random one using crypto API
-const internal_id = $derived(id ?? `sms-${crypto.randomUUID().slice(0, 8)}`);
+const internal_id = $derived(id ?? `sms-${utils.get_uuid().slice(0, 8)}`);
 const listbox_id = $derived(`${internal_id}-listbox`);
 // Parse shortcut string into modifier+key parts
 function parse_shortcut(shortcut) {
     const parts = shortcut.toLowerCase().split(`+`).map((part) => part.trim());
     const key = parts.pop() ?? ``;
-    return {
-        key,
-        ctrl: parts.includes(`ctrl`),
-        shift: parts.includes(`shift`),
-        alt: parts.includes(`alt`),
-        meta: parts.includes(`meta`) || parts.includes(`cmd`),
-    };
+    const ctrl = parts.includes(`ctrl`);
+    const shift = parts.includes(`shift`);
+    const alt = parts.includes(`alt`);
+    const meta = parts.includes(`meta`) || parts.includes(`cmd`);
+    return { key, ctrl, shift, alt, meta };
 }
 function matches_shortcut(event, shortcut) {
     if (!shortcut)
@@ -57,19 +57,22 @@ function matches_shortcut(event, shortcut) {
     const shift_matches = event.shiftKey === parsed.shift;
     const alt_matches = event.altKey === parsed.alt;
     const meta_matches = event.metaKey === parsed.meta;
-    return (key_matches && ctrl_matches && shift_matches && alt_matches && meta_matches);
+    return key_matches && ctrl_matches && shift_matches && alt_matches && meta_matches;
 }
+// Platform detection for keyboard shortcuts (Mac uses Cmd, others use Ctrl)
+const is_mac = typeof navigator !== `undefined` &&
+    /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+const mod_key = is_mac ? `meta` : `ctrl`;
 // Default shortcuts
 const default_shortcuts = {
-    select_all: `ctrl+a`,
-    clear_all: `ctrl+shift+a`,
+    select_all: `${mod_key}+a`,
+    clear_all: `${mod_key}+shift+a`,
     open: null,
     close: null,
+    undo: `${mod_key}+z`,
+    redo: `${mod_key}+shift+z`,
 };
-const effective_shortcuts = $derived({
-    ...default_shortcuts,
-    ...shortcuts,
-});
+const effective_shortcuts = $derived({ ...default_shortcuts, ...shortcuts });
 // Extract loadOptions config into single derived object (supports both simple function and config object)
 const load_options_config = $derived.by(() => {
     if (!loadOptions)
@@ -94,8 +97,8 @@ function values_equal(val1, val2) {
     if (empty1 && empty2)
         return true;
     if (Array.isArray(val1) && Array.isArray(val2)) {
-        return val1.length === val2.length &&
-            val1.every((item, idx) => item === val2[idx]);
+        return (val1.length === val2.length &&
+            val1.every((item, idx) => item === val2[idx]));
     }
     return false;
 }
@@ -104,15 +107,17 @@ function values_equal(val1, val2) {
 // infinite loops with reactive wrappers that clone arrays. See issue #309.
 $effect.pre(() => {
     const new_value = maxSelect === 1 ? (selected[0] ?? null) : selected;
-    if (!values_equal(untrack(() => value), new_value))
+    if (!values_equal(untrack(() => value), new_value)) {
         value = new_value;
+    }
 });
 $effect.pre(() => {
     const new_selected = maxSelect === 1
         ? (value ? [value] : [])
         : (Array.isArray(value) ? value : []);
-    if (!values_equal(untrack(() => selected), new_selected))
+    if (!values_equal(untrack(() => selected), new_selected)) {
         selected = new_selected;
+    }
 });
 let wiggle = $state(false); // controls wiggle animation when user tries to exceed maxSelect
 let ignore_hover = $state(false); // ignore mouseover during keyboard navigation to prevent scroll-triggered hover
@@ -125,6 +130,83 @@ $effect(() => {
         return () => clearTimeout(timer);
     }
 });
+// History tracking for undo/redo
+const max_history = $derived(history === true
+    ? 50
+    : typeof history === `number` && Number.isFinite(history)
+        ? Math.max(0, Math.floor(history))
+        : 0);
+let history_stack = $state([]);
+let history_index = $state(-1); // -1 = no history yet
+let prev_selected = null; // null = uninitialized, sync on first run
+// Track changes to selected via $effect (catches internal + external changes)
+$effect(() => {
+    // Disabled when max_history is 0 (handles false, 0, negative, non-finite inputs)
+    const history_disabled = !(max_history > 0);
+    if (history_disabled) {
+        // Clear history when disabled so re-enabling starts fresh
+        history_stack = [];
+        history_index = -1;
+        // Don't read `selected` here to avoid creating unnecessary reactive dependency
+        prev_selected = null;
+        return;
+    }
+    // Initialize prev_selected on first run to avoid phantom undo from [] → initial selection
+    if (prev_selected === null) {
+        prev_selected = [...selected];
+        return;
+    }
+    // Check if actually changed (avoid duplicates from reactive updates)
+    if (values_equal(selected, prev_selected))
+        return;
+    // On first change, push initial state first
+    if (history_stack.length === 0) {
+        history_stack = [[...prev_selected]];
+        history_index = 0;
+    }
+    // Truncate any redo states
+    if (history_index < history_stack.length - 1) {
+        history_stack = history_stack.slice(0, history_index + 1);
+    }
+    // Push new state
+    history_stack = [...history_stack, [...selected]];
+    history_index = history_stack.length - 1;
+    // Trim to max size (remove oldest)
+    if (history_stack.length > max_history) {
+        const excess = history_stack.length - max_history;
+        history_stack = history_stack.slice(excess);
+        history_index = Math.max(0, history_index - excess);
+    }
+    prev_selected = [...selected];
+});
+// Derived canUndo/canRedo (update bindable props reactively)
+$effect(() => {
+    canUndo = max_history > 0 && !disabled && history_index > 0;
+    canRedo = max_history > 0 && !disabled && history_index < history_stack.length - 1;
+});
+// Undo: restore previous state
+undo = () => {
+    if (max_history <= 0 || disabled || history_index <= 0)
+        return false;
+    const previous = [...selected];
+    history_index--;
+    selected = [...history_stack[history_index]];
+    prev_selected = [...selected]; // sync tracker to prevent $effect re-recording
+    onundo?.({ previous, current: selected });
+    return true;
+};
+// Redo: restore next state
+redo = () => {
+    if (max_history <= 0 || disabled || history_index >= history_stack.length - 1) {
+        return false;
+    }
+    const previous = [...selected];
+    history_index++;
+    selected = [...history_stack[history_index]];
+    prev_selected = [...selected]; // sync tracker to prevent $effect re-recording
+    onredo?.({ previous, current: selected });
+    return true;
+};
 // Debounced onsearch event - fires 150ms after search text stops changing
 let search_debounce_timer = null;
 let search_initialized = false;
@@ -158,13 +240,22 @@ let debounce_timer = null;
 let effective_options = $derived(loadOptions ? loaded_options : (options ?? []));
 // Cache selected keys and labels to avoid repeated .map() calls
 let selected_keys = $derived(selected.map(key));
-let selected_labels = $derived(selected.map(get_label));
+let selected_labels = $derived(selected.map(utils.get_label));
 // Sets for O(1) lookups (used in template, has_user_msg, group_header_state, batch operations)
 let selected_keys_set = $derived(new Set(selected_keys));
-let selected_labels_set = $derived(new Set(selected_labels));
+// String-normalized for consistent comparison (numeric labels like 123 match "123")
+let selected_labels_set = $derived(new Set(selected_labels.map((lbl) => `${lbl}`)));
+// Lowercase labels set for case-insensitive duplicate detection
+let selected_labels_lower_set = $derived(duplicates === `case-insensitive`
+    ? new Set(selected_labels.map((lbl) => `${lbl}`.toLowerCase()))
+    : null);
+// Helper to check if a label is already selected (respects case-insensitive mode)
+const is_label_selected = (label) => selected_labels_lower_set
+    ? selected_labels_lower_set.has(label.toLowerCase())
+    : selected_labels_set.has(label);
 // Memoized Set of disabled option keys for O(1) lookups in large option sets
 let disabled_option_keys = $derived(new Set(effective_options
-    .filter((opt) => is_object(opt) && opt.disabled)
+    .filter((opt) => utils.is_object(opt) && opt.disabled)
     .map(key)));
 // Check if an option is disabled (uses memoized Set for O(1) lookup)
 const is_disabled = (opt) => disabled_option_keys.has(key(opt));
@@ -175,7 +266,7 @@ let grouped_options = $derived.by(() => {
     const groups_map = new SvelteMap();
     const ungrouped = [];
     for (const opt of matchingOptions) {
-        if (has_group(opt)) {
+        if (utils.has_group(opt)) {
             const existing = groups_map.get(opt.group);
             if (existing)
                 existing.push(opt);
@@ -203,7 +294,11 @@ let grouped_options = $derived.by(() => {
     }
     if (ungrouped.length === 0)
         return grouped;
-    const ungrouped_entry = { group: null, options: ungrouped, collapsed: false };
+    const ungrouped_entry = {
+        group: null,
+        options: ungrouped,
+        collapsed: false,
+    };
     return ungroupedPosition === `first`
         ? [ungrouped_entry, ...grouped]
         : [...grouped, ungrouped_entry];
@@ -272,8 +367,9 @@ function expand_groups(groups_to_expand) {
     if (groups_to_expand.length === 0)
         return;
     update_collapsed_groups(`delete`, groups_to_expand);
-    for (const group of groups_to_expand)
+    for (const group of groups_to_expand) {
         ongroupToggle?.({ group, collapsed: false });
+    }
 }
 // Get names of collapsed groups that have matching options
 const get_collapsed_with_matches = () => grouped_options.flatMap(({ group, collapsed, options: opts }) => group && collapsed && opts.length > 0 ? [group] : []);
@@ -284,12 +380,12 @@ $effect(() => {
     }
 });
 // Normalize placeholder prop (supports string or { text, persistent } object)
-const placeholder_text = $derived(typeof placeholder === `string` ? placeholder : placeholder?.text ?? null);
+const placeholder_text = $derived(typeof placeholder === `string` ? placeholder : (placeholder?.text ?? null));
 const placeholder_persistent = $derived(typeof placeholder === `object` && placeholder?.persistent === true);
 // Helper to sort selected options (used by add() and select_all())
 function sort_selected(items) {
     if (sortSelected === true) {
-        return items.toSorted((op1, op2) => `${get_label(op1)}`.localeCompare(`${get_label(op2)}`));
+        return items.toSorted((op1, op2) => `${utils.get_label(op1)}`.localeCompare(`${utils.get_label(op2)}`));
     }
     else if (typeof sortSelected === `function`) {
         return items.toSorted(sortSelected);
@@ -340,9 +436,9 @@ let window_width = $state(0);
 const matches_search = (opt, search) => {
     if (filterFunc(opt, search))
         return true;
-    if (searchMatchesGroups && search && has_group(opt)) {
+    if (searchMatchesGroups && search && utils.has_group(opt)) {
         return fuzzy
-            ? fuzzy_match(search, opt.group)
+            ? utils.fuzzy_match(search, opt.group)
             : opt.group.toLowerCase().includes(search.toLowerCase());
     }
     return false;
@@ -391,21 +487,30 @@ function add(option_to_add, event) {
     event.stopPropagation();
     if (maxSelect !== null && selected.length >= maxSelect)
         wiggle = true;
-    if (!isNaN(Number(option_to_add)) && typeof selected_labels[0] === `number`) {
+    if (!isNaN(Number(option_to_add)) &&
+        typeof selected_labels[0] === `number`) {
         option_to_add = Number(option_to_add); // convert to number if possible
     }
-    const is_duplicate = selected_keys_set.has(key(option_to_add));
+    // Check for duplicates by key, plus label check for user-created options
+    // For duplicates=false (default), label check only applies to user-typed text
+    // For duplicates='case-insensitive', label check applies to all options
+    // Use key comparison instead of reference equality (more robust with Svelte proxies)
+    const option_key = key(option_to_add);
+    const is_from_options = effective_options.some((opt) => key(opt) === option_key);
+    const check_label = duplicates === `case-insensitive` || !is_from_options;
+    const is_duplicate = selected_keys_set.has(key(option_to_add)) ||
+        (check_label && is_label_selected(`${utils.get_label(option_to_add)}`));
     const max_reached = maxSelect !== null && maxSelect !== 1 &&
         selected.length >= maxSelect;
     // Fire events for blocked add attempts
     if (max_reached) {
         onmaxreached?.({ selected, maxSelect, attemptedOption: option_to_add });
     }
-    if (is_duplicate && !duplicates)
+    if (is_duplicate && duplicates !== true)
         onduplicate?.({ option: option_to_add });
     if ((maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
-        (duplicates || !is_duplicate)) {
-        if (!effective_options.includes(option_to_add) && // first check if we find option in the options list
+        (duplicates === true || !is_duplicate)) {
+        if (!is_from_options && // first check if we find option in the options list
             // this has the side-effect of not allowing to user to add the same
             // custom option twice in append mode
             [true, `append`].includes(allowUserOptions) &&
@@ -451,7 +556,7 @@ function add(option_to_add, event) {
         }
         clear_validity();
         handle_dropdown_after_select(event);
-        last_action = { type: `add`, label: `${get_label(option_to_add)}` };
+        last_action = { type: `add`, label: `${utils.get_label(option_to_add)}` };
         onadd?.({ option: option_to_add });
         onchange?.({ option: option_to_add, type: `add` });
     }
@@ -476,7 +581,7 @@ function remove(option_to_drop, event) {
     }
     selected = selected.filter((_, remove_idx) => remove_idx !== idx);
     clear_validity();
-    last_action = { type: `remove`, label: `${get_label(option_removed)}` };
+    last_action = { type: `remove`, label: `${utils.get_label(option_removed)}` };
     onremove?.({ option: option_removed });
     onchange?.({ option: option_removed, type: `remove` });
 }
@@ -506,7 +611,8 @@ function handle_dropdown_after_select(event) {
     const reached_max = selected.length >= (maxSelect ?? Infinity);
     const should_close = closeDropdownOnSelect === true ||
         closeDropdownOnSelect === `retain-focus` ||
-        (closeDropdownOnSelect === `if-mobile` && window_width &&
+        (closeDropdownOnSelect === `if-mobile` &&
+            window_width &&
             window_width < breakpoint);
     if (reached_max || should_close) {
         close_dropdown(event, closeDropdownOnSelect === `retain-focus`);
@@ -515,19 +621,24 @@ function handle_dropdown_after_select(event) {
         input?.focus();
 }
 // Check if a user message (create option, duplicate warning, no match) is visible
-const has_user_msg = $derived(searchText.length > 0 && Boolean((allowUserOptions && createOptionMsg) ||
-    (!duplicates && selected_labels_set.has(searchText)) ||
-    (navigable_options.length === 0 && noMatchingOptionsMsg)));
+const has_user_msg = $derived(searchText.length > 0 &&
+    Boolean((allowUserOptions && createOptionMsg) ||
+        (duplicates !== true && is_label_selected(searchText)) ||
+        (navigable_options.length === 0 && noMatchingOptionsMsg)));
 // Handle arrow key navigation through options (uses navigable_options to skip collapsed groups)
 async function handle_arrow_navigation(direction) {
     ignore_hover = true;
     // Auto-expand collapsed groups when keyboard navigating
-    if (keyboardExpandsCollapsedGroups && collapsibleGroups && collapsedGroups.size > 0) {
+    if (keyboardExpandsCollapsedGroups &&
+        collapsibleGroups &&
+        collapsedGroups.size > 0) {
         expand_groups(get_collapsed_with_matches());
         await tick();
     }
     // toggle user message when no options match but user can create
-    if (allowUserOptions && !navigable_options.length && searchText.length > 0) {
+    if (allowUserOptions &&
+        !navigable_options.length &&
+        searchText.length > 0) {
         option_msg_is_active = !option_msg_is_active;
         return;
     }
@@ -550,10 +661,12 @@ async function handle_arrow_navigation(direction) {
     option_msg_is_active = has_user_msg && activeIndex === navigable_options.length;
     activeOption = option_msg_is_active
         ? null
-        : navigable_options[activeIndex] ?? null;
+        : (navigable_options[activeIndex] ?? null);
     if (autoScroll) {
         await tick();
-        document.querySelector(`ul.options > li.active`)?.scrollIntoViewIfNeeded?.();
+        document
+            .querySelector(`ul.options > li.active`)
+            ?.scrollIntoViewIfNeeded?.();
     }
     // Fire onactivate for keyboard navigation only (not mouse hover)
     onactivate?.({ option: activeOption, index: activeIndex });
@@ -587,6 +700,16 @@ async function handle_keydown(event) {
                 searchText = ``;
             },
         },
+        {
+            key: `undo`,
+            condition: () => !!canUndo,
+            action: () => undo?.(),
+        },
+        {
+            key: `redo`,
+            condition: () => !!canRedo,
+            action: () => redo?.(),
+        },
     ];
     for (const { key, condition, action } of shortcut_actions) {
         if (matches_shortcut(event, effective_shortcuts[key]) && condition()) {
@@ -659,7 +782,10 @@ function remove_all(event) {
     // Only fire events if something was actually removed
     if (removed_options.length > 0) {
         searchText = ``; // always clear on remove all (resetFilterOnAdd only applies to add operations)
-        last_action = { type: `removeAll`, label: `${removed_options.length} options` };
+        last_action = {
+            type: `removeAll`,
+            label: `${removed_options.length} options`,
+        };
         onremoveAll?.({ options: removed_options });
         onchange?.({ options: selected, type: `removeAll` });
     }
@@ -718,7 +844,7 @@ function toggle_group_selection(group_opts, group_collapsed, all_selected, event
     }
 }
 // O(1) lookup using pre-computed Set instead of O(n) array.includes()
-const is_selected = (label) => selected_labels_set.has(label);
+const is_selected = (label) => selected_labels_set.has(`${label}`);
 const if_enter_or_space = (handler) => (event) => {
     if (event.key === `Enter` || event.code === `Space`) {
         event.preventDefault();
@@ -742,8 +868,9 @@ function on_click_outside(event) {
     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))
+    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);
 }
@@ -855,8 +982,9 @@ function portal(node, params) {
                 target_node = params.target_node;
                 render_in_place = typeof window === `undefined` ||
                     !document.body.contains(node);
-                if (open && !render_in_place && target_node)
+                if (open && !render_in_place && target_node) {
                     tick().then(update_position);
+                }
                 else if (!open || !target_node)
                     node.hidden = true;
             },
@@ -871,7 +999,8 @@ function portal(node, params) {
 }
 // Dynamic options loading - captures search at call time to avoid race conditions
 async function load_dynamic_options(reset) {
-    if (!load_options_config || load_options_loading ||
+    if (!load_options_config ||
+        load_options_loading ||
         (!reset && !load_options_has_more)) {
         return;
     }
@@ -932,11 +1061,13 @@ $effect(() => {
     };
 });
 function handle_options_scroll(event) {
-    if (!load_options_config || load_options_loading || !load_options_has_more)
+    if (!load_options_config || load_options_loading || !load_options_has_more) {
         return;
+    }
     const { scrollTop, scrollHeight, clientHeight } = event.target;
-    if (scrollHeight - scrollTop - clientHeight <= 100)
+    if (scrollHeight - scrollTop - clientHeight <= 100) {
         load_dynamic_options(false);
+    }
 }
 </script>
 
@@ -1000,11 +1131,9 @@ function handle_options_scroll(event) {
     style={ulSelectedStyle}
   >
     {#each selected as option, idx (duplicates ? `${key(option)}-${idx}` : key(option))}
-      {@const selectedOptionStyle =
-        [get_style(option, `selected`), liSelectedStyle].filter(Boolean).join(
-          ` `,
-        ) ||
-        null}
+      {@const selectedOptionStyle = [utils.get_style(option, `selected`), liSelectedStyle]
+        .filter(Boolean)
+        .join(` `) || null}
       <li
         class={liSelectedClass}
         role="option"
@@ -1022,26 +1151,20 @@ function handle_options_scroll(event) {
         onmouseup={(event) => event.stopPropagation()}
       >
         {#if selectedItem}
-          {@render selectedItem({
-          option,
-          idx,
-        })}
+          {@render selectedItem({ option, idx })}
         {:else if children}
-          {@render children({
-          option,
-          idx,
-        })}
+          {@render children({ option, idx })}
         {:else if parseLabelsAsHtml}
-          {@html get_label(option)}
+          {@html utils.get_label(option)}
         {:else}
-          {get_label(option)}
+          {utils.get_label(option)}
         {/if}
         {#if !disabled && can_remove}
           <button
             onclick={(event) => remove(option, event)}
             onkeydown={if_enter_or_space((event) => remove(option, event))}
             type="button"
-            title="{removeBtnTitle} {get_label(option)}"
+            title="{removeBtnTitle} {utils.get_label(option)}"
             class="remove"
           >
             {#if removeIcon}
@@ -1188,8 +1311,9 @@ function handle_options_scroll(event) {
         (group_name ?? `ungrouped-${group_idx}`)
       }
         {#if group_name !== null}
-          {@const { all_selected, selected_count } = group_header_state.get(group_name) ??
-        { all_selected: false, selected_count: 0 }}
+          {@const { all_selected, selected_count } = group_header_state.get(
+        group_name,
+      ) ?? { all_selected: false, selected_count: 0 }}
           {@const handle_toggle = () =>
         collapsibleGroups && toggle_group_collapsed(group_name)}
           {@const handle_group_select = (event: Event) =>
@@ -1253,14 +1377,12 @@ function handle_options_scroll(event) {
         title = null,
         selectedTitle = null,
         disabledTitle = defaultDisabledTitle,
-      } = is_object(option_item) ? option_item : { label: option_item }}
+      } = utils.is_object(option_item) ? option_item : { label: option_item }}
             {@const active = activeIndex === flat_idx && flat_idx >= 0}
             {@const selected = is_selected(label)}
-            {@const optionStyle =
-        [get_style(option_item, `option`), liOptionStyle].filter(Boolean).join(
-          ` `,
-        ) ||
-        null}
+            {@const optionStyle = [utils.get_style(option_item, `option`), liOptionStyle]
+        .filter(Boolean)
+        .join(` `) || null}
             {#if is_option_visible(flat_idx)}
               <li
                 id="{internal_id}-opt-{flat_idx}"
@@ -1290,24 +1412,18 @@ function handle_options_scroll(event) {
                     type="checkbox"
                     class="option-checkbox"
                     checked={selected}
-                    aria-label="Toggle {get_label(option_item)}"
+                    aria-label="Toggle {utils.get_label(option_item)}"
                     tabindex="-1"
                   />
                 {/if}
                 {#if option}
-                  {@render option({
-          option: option_item,
-          idx: flat_idx,
-        })}
+                  {@render option({ option: option_item, idx: flat_idx })}
                 {:else if children}
-                  {@render children({
-          option: option_item,
-          idx: flat_idx,
-        })}
+                  {@render children({ option: option_item, idx: flat_idx })}
                 {:else if parseLabelsAsHtml}
-                  {@html get_label(option_item)}
+                  {@html utils.get_label(option_item)}
                 {:else}
-                  {get_label(option_item)}
+                  {utils.get_label(option_item)}
                 {/if}
               </li>
             {/if}
@@ -1315,8 +1431,7 @@ function handle_options_scroll(event) {
         {/if}
       {/each}
       {#if searchText}
-        {@const text_input_is_duplicate = selected_labels.includes(searchText)}
-        {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
+        {@const is_dupe = duplicates !== true && is_label_selected(searchText) && `dupe`}
         {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
         {@const no_match =
         Boolean(navigable_options?.length === 0 && noMatchingOptionsMsg) &&
@@ -1366,7 +1481,11 @@ function handle_options_scroll(event) {
         {/if}
       {/if}
       {#if loadOptions && load_options_loading}
-        <li class="loading-more" role="status" aria-label="Loading more options">
+        <li
+          class="loading-more"
+          role="status"
+          aria-label="Loading more options"
+        >
           <CircleSpinner />
         </li>
       {/if}
@@ -1427,7 +1546,10 @@ function handle_options_scroll(event) {
     z-index: var(--sms-open-z-index, 4);
   }
   :where(div.multiselect:focus-within) {
-    border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
+    border: var(
+      --sms-focus-border,
+      1pt solid var(--sms-active-color, cornflowerblue)
+    );
   }
   :where(div.multiselect.disabled) {
     background: var(--sms-disabled-bg, light-dark(lightgray, #444));
@@ -1462,7 +1584,10 @@ function handle_options_scroll(event) {
   :where(div.multiselect > ul.selected > li.active) {
     background: var(
       --sms-li-active-bg,
-      var(--sms-active-color, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)))
+      var(
+        --sms-active-color,
+        light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15))
+      )
     );
   }
   :is(div.multiselect button) {
@@ -1539,10 +1664,8 @@ function handle_options_scroll(event) {
     width: 100%;
     /* Default z-index if not portaled/overridden by portal */
     z-index: var(--sms-options-z-index, 3);
-
     overflow: auto;
-    transition: all
-      0.2s; /* Consider if this transition is desirable with portal positioning */
+    transition: all 0.2s; /* is this transition is desirable with portal positioning? */
     box-sizing: border-box;
     background: var(--sms-options-bg, light-dark(#fafafa, #1a1a1a));
     max-height: var(--sms-options-max-height, 50vh);
@@ -1587,7 +1710,10 @@ function handle_options_scroll(event) {
   :where(ul.options > li.active) {
     background: var(
       --sms-li-active-bg,
-      var(--sms-active-color, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)))
+      var(
+        --sms-active-color,
+        light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15))
+      )
     );
   }
   :where(ul.options > li.disabled) {
@@ -1641,7 +1767,10 @@ function handle_options_scroll(event) {
   }
   :where(ul.options > li.group-header:not(:first-child)) {
     margin-top: var(--sms-group-header-margin-top, 4pt);
-    border-top: var(--sms-group-header-border-top, 1px solid light-dark(#eee, #333));
+    border-top: var(
+      --sms-group-header-border-top,
+      1px solid light-dark(#eee, #333)
+    );
   }
   :where(ul.options > li.group-header.collapsible) {
     cursor: pointer;