svelte-multiselect 8.6.0 → 8.6.2

package/dist/CmdPalette.svelte

@@ -10,8 +10,8 @@ export let style = ``; // for dialog
 // for span in option slot, has no effect when passing slot="option"
 export let span_style = ``;
 export let open = false;
-export let dialog;
-export let input;
+export let dialog = null;
+export let input = null;
 export let placeholder = `Filter actions...`;
 async function toggle(event) {
     if (event.key === trigger && event.metaKey && !open) {

package/dist/CmdPalette.svelte.d.ts

@@ -11,8 +11,8 @@ declare const __propDef: {
         style?: string | undefined;
         span_style?: string | undefined;
         open?: boolean | undefined;
-        dialog: HTMLDialogElement;
-        input: HTMLInputElement;
+        dialog?: HTMLDialogElement | null | undefined;
+        input?: HTMLInputElement | null | undefined;
         placeholder?: string | undefined;
     };
     events: {

package/dist/MultiSelect.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher, tick } from 'svelte';
 import { flip } from 'svelte/animate';
-import { CircleSpinner, Wiggle } from '.';
+import CircleSpinner from './CircleSpinner.svelte';
+import Wiggle from './Wiggle.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
 export let activeIndex = null;
 export let activeOption = null;
@@ -63,7 +64,7 @@ export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
 export let value = null;
 // get the label key from an option object or the option itself if it's a string or number
-const get_label = (op) => {
+export const get_label = (op) => {
     if (op instanceof Object) {
         if (op.label === undefined) {
             console.error(`MultiSelect option ${JSON.stringify(op)} is an object but has no label key`);
@@ -100,13 +101,18 @@ if (parseLabelsAsHtml && allowUserOptions) {
     console.warn(`Don't combine parseLabelsAsHtml and allowUserOptions. It's susceptible to XSS attacks!`);
 }
 if (sortSelected && selectedOptionsDraggable) {
-    console.warn(`MultiSelect's sortSelected and selectedOptionsDraggable should not be combined as any user re-orderings of selected options will be undone by sortSelected on component re-renders.`);
+    console.warn(`MultiSelect's sortSelected and selectedOptionsDraggable should not be combined as any ` +
+        `user re-orderings of selected options will be undone by sortSelected on component re-renders.`);
+}
+if (allowUserOptions && !createOptionMsg && createOptionMsg !== null) {
+    console.error(`MultiSelect has allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
+        `This prevents the "Add option" <span> from showing up, resulting in a confusing user experience.`);
 }
 const dispatch = createEventDispatcher();
-let add_option_msg_is_active = false; // controls active state of <li>{createOptionMsg}</li>
+let option_msg_is_active = false; // controls active state of <li>{createOptionMsg}</li>
 let window_width;
 // options matching the current search text
-$: matchingOptions = options.filter((op) => filterFunc(op, searchText) && !selected.map(get_label).includes(get_label(op)) // remove already selected options from dropdown list
+$: matchingOptions = options.filter((op) => filterFunc(op, searchText) && !selected.includes(op) // remove already selected options from dropdown list
 );
 // raise if matchingOptions[activeIndex] does not yield a value
 if (activeIndex !== null && !matchingOptions[activeIndex]) {
@@ -115,17 +121,17 @@ if (activeIndex !== null && !matchingOptions[activeIndex]) {
 // update activeOption when activeIndex changes
 $: activeOption = matchingOptions[activeIndex ?? -1] ?? null;
 // add an option to selected list
-function add(label, event) {
+function add(option, event) {
     if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
         wiggle = true;
-    if (!isNaN(Number(label)) && typeof selected.map(get_label)[0] === `number`)
-        label = Number(label); // convert to number if possible
-    const is_duplicate = selected.some((option) => duplicateFunc(option, label));
+    if (!isNaN(Number(option)) && typeof selected.map(get_label)[0] === `number`) {
+        option = Number(option); // convert to number if possible
+    }
+    const is_duplicate = selected.some((op) => duplicateFunc(op, option));
     if ((maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
         (duplicates || !is_duplicate)) {
-        // first check if we find option in the options list
-        let option = options.find((op) => get_label(op) === label);
-        if (!option && // this has the side-effect of not allowing to user to add the same
+        if (!options.includes(option) && // 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) &&
             searchText.length > 0) {
@@ -149,13 +155,10 @@ function add(label, event) {
             if (allowUserOptions === `append`)
                 options = [...options, option];
         }
-        if (option === undefined) {
-            throw `Run time error, option with label ${label} not found in options list`;
-        }
         if (resetFilterOnAdd)
             searchText = ``; // reset search string on selection
         if ([``, undefined, null].includes(option)) {
-            console.error(`MultiSelect: encountered missing option with label ${label} (or option is poorly labeled)`);
+            console.error(`MultiSelect: encountered falsy option ${option}`);
             return;
         }
         if (maxSelect === 1) {
@@ -188,20 +191,22 @@ function add(label, event) {
     }
 }
 // remove an option from selected list
-function remove(label) {
+function remove(to_remove) {
     if (selected.length === 0)
         return;
-    let option = selected.find((op) => get_label(op) === label);
+    const idx = selected.findIndex((op) => JSON.stringify(op) === JSON.stringify(to_remove));
+    let [option] = selected.splice(idx, 1); // remove option from selected list
     if (option === undefined && allowUserOptions) {
         // if option with label could not be found but allowUserOptions is truthy,
         // assume it was created by user and create corresponding option object
         // on the fly for use as event payload
-        option = (typeof options[0] == `object` ? { label } : label);
+        const other_ops_type = typeof options[0];
+        option = (other_ops_type ? { label: to_remove } : to_remove);
     }
     if (option === undefined) {
-        return console.error(`Multiselect can't remove selected option ${label}, not found in selected list`);
+        return console.error(`Multiselect can't remove selected option ${JSON.stringify(to_remove)}, not found in selected list`);
     }
-    selected = selected.filter((op) => get_label(op) !== label); // remove option from selected list
+    selected = [...selected]; // trigger Svelte rerender
     invalid = false; // reset error status whenever items are removed
     form_input?.setCustomValidity(``);
     dispatch(`remove`, { option });
@@ -234,8 +239,7 @@ async function handle_keydown(event) {
     else if (event.key === `Enter`) {
         event.preventDefault(); // prevent enter key from triggering form submission
         if (activeOption) {
-            const label = get_label(activeOption);
-            selected.map(get_label).includes(label) ? remove(label) : add(label, event);
+            selected.includes(activeOption) ? remove(activeOption) : add(activeOption, event);
             searchText = ``;
         }
         else if (allowUserOptions && searchText.length > 0) {
@@ -257,7 +261,7 @@ async function handle_keydown(event) {
         else if (allowUserOptions && !matchingOptions.length && searchText.length > 0) {
             // if allowUserOptions is truthy and user entered text but no options match, we make
             // <li>{addUserMsg}</li> active on keydown (or toggle it if already active)
-            add_option_msg_is_active = !add_option_msg_is_active;
+            option_msg_is_active = !option_msg_is_active;
             return;
         }
         else if (activeIndex === null) {
@@ -282,7 +286,7 @@ async function handle_keydown(event) {
     }
     // on backspace key: remove last selected option
     else if (event.key === `Backspace` && selected.length > 0 && !searchText) {
-        remove(selected.map(get_label).at(-1));
+        remove(selected.at(-1));
     }
     // make first matching option active on any keypress (if none of the above special cases match)
     else if (matchingOptions.length > 0) {
@@ -344,7 +348,14 @@ function highlight_matching_options(event) {
     const query = event?.target?.value.trim().toLowerCase();
     if (!query)
         return;
-    const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT);
+    const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT, {
+        acceptNode: (node) => {
+            // don't highlight text in the "no matching options" message
+            if (node?.textContent === noMatchingOptionsMsg)
+                return NodeFilter.FILTER_REJECT;
+            return NodeFilter.FILTER_ACCEPT;
+        },
+    });
     const text_nodes = [];
     let current_node = tree_walker.nextNode();
     while (current_node) {
@@ -353,10 +364,10 @@ function highlight_matching_options(event) {
     }
     // iterate over all text nodes and find matches
     const ranges = text_nodes.map((el) => {
-        const text = el.textContent.toLowerCase();
+        const text = el.textContent?.toLowerCase();
         const indices = [];
         let start_pos = 0;
-        while (start_pos < text.length) {
+        while (text && start_pos < text.length) {
             const index = text.indexOf(query, start_pos);
             if (index === -1)
                 break;
@@ -373,7 +384,7 @@ function highlight_matching_options(event) {
     });
     // create Highlight object from ranges and add to registry
     // eslint-disable-next-line no-undef
-    CSS.highlights.set(`search-results`, new Highlight(...ranges.flat()));
+    CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat()));
 }
 </script>
 
@@ -398,7 +409,7 @@ function highlight_matching_options(event) {
   <input
     {name}
     required={Boolean(required)}
-    value={selected.length >= required ? JSON.stringify(selected) : null}
+    value={selected.length >= Number(required) ? JSON.stringify(selected) : null}
     tabindex="-1"
     aria-hidden="true"
     aria-label="ignore this, used only to prevent form submission if select is required but empty"
@@ -407,9 +418,9 @@ function highlight_matching_options(event) {
     on:invalid={() => {
       invalid = true
       let msg
-      if (maxSelect && maxSelect > 1 && required > 1) {
+      if (maxSelect && maxSelect > 1 && Number(required) > 1) {
         msg = `Please select between ${required} and ${maxSelect} options`
-      } else if (required > 1) {
+      } else if (Number(required) > 1) {
         msg = `Please select at least ${required} options`
       } else {
         msg = `Please select an option`
@@ -421,7 +432,7 @@ function highlight_matching_options(event) {
     <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt; cursor: pointer;" />
   </slot>
   <ul class="selected {ulSelectedClass}" aria-label="selected options">
-    {#each selected as option, idx (get_label(option))}
+    {#each selected as option, idx (option)}
       <li
         class={liSelectedClass}
         animate:flip={{ duration: 100 }}
@@ -441,8 +452,8 @@ function highlight_matching_options(event) {
         </slot>
         {#if !disabled && (minSelect === null || selected.length > minSelect)}
           <button
-            on:mouseup|stopPropagation={() => remove(get_label(option))}
-            on:keydown={if_enter_or_space(() => remove(get_label(option)))}
+            on:mouseup|stopPropagation={() => remove(option)}
+            on:keydown={if_enter_or_space(() => remove(option))}
             type="button"
             title="{removeBtnTitle} {get_label(option)}"
             class="remove"
@@ -533,7 +544,7 @@ function highlight_matching_options(event) {
         <li
           on:mousedown|stopPropagation
           on:mouseup|stopPropagation={(event) => {
-            if (!disabled) add(label, event)
+            if (!disabled) add(option, event)
           }}
           title={disabled
             ? disabledTitle
@@ -560,24 +571,30 @@ function highlight_matching_options(event) {
           </slot>
         </li>
       {:else}
-        {#if allowUserOptions && searchText}
+        {@const search_is_duplicate = selected.some((option) =>
+          duplicateFunc(option, searchText)
+        )}
+        {@const msg =
+          !duplicates && search_is_duplicate ? duplicateOptionMsg : createOptionMsg}
+        {#if allowUserOptions && searchText && msg}
           <li
             on:mousedown|stopPropagation
             on:mouseup|stopPropagation={(event) => add(searchText, event)}
             title={createOptionMsg}
-            class:active={add_option_msg_is_active}
-            on:mouseover={() => (add_option_msg_is_active = true)}
-            on:focus={() => (add_option_msg_is_active = true)}
-            on:mouseout={() => (add_option_msg_is_active = false)}
-            on:blur={() => (add_option_msg_is_active = false)}
+            class:active={option_msg_is_active}
+            on:mouseover={() => (option_msg_is_active = true)}
+            on:focus={() => (option_msg_is_active = true)}
+            on:mouseout={() => (option_msg_is_active = false)}
+            on:blur={() => (option_msg_is_active = false)}
+            class="user-msg"
           >
-            {!duplicates && selected.some((option) => duplicateFunc(option, searchText))
-              ? duplicateOptionMsg
-              : createOptionMsg}
+            {msg}
           </li>
-        {:else}
-          <span>{noMatchingOptionsMsg}</span>
+        {:else if noMatchingOptionsMsg}
+          <!-- use span to not have cursor: pointer -->
+          <span class="user-msg">{noMatchingOptionsMsg}</span>
         {/if}
+        <!-- Show nothing if all messages are empty -->
       {/each}
     </ul>
   {/if}
@@ -721,8 +738,9 @@ function highlight_matching_options(event) {
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
   }
-  /* for noOptionsMsg */
-  :where(div.multiselect > ul.options span) {
+  :where(div.multiselect > ul.options .user-msg) {
+    /* block needed so vertical padding applies to span */
+    display: block;
     padding: 3pt 2ex;
   }
   :where(div.multiselect > ul.options > li.selected) {
@@ -741,10 +759,7 @@ function highlight_matching_options(event) {
   :where(span.max-select-msg) {
     padding: 0 3pt;
   }
-  ::highlight(search-results) {
-    color: var(--sms-highlight-color, orange);
-    background: var(--sms-highlight-bg);
-    text-decoration: var(--sms-highlight-text-decoration);
-    text-decoration-color: var(--sms-highlight-text-decoration-color);
+  ::highlight(sms-search-matches) {
+    color: mediumaquamarine;
   }
 </style>

package/dist/MultiSelect.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MultiSelectEvents, Option as GenericOption } from './';
-declare class __sveltets_Render<Option extends GenericOption> {
+import type { MultiSelectEvents, Option as T } from './types';
+declare class __sveltets_Render<Option extends T> {
     props(): {
         activeIndex?: number | null | undefined;
         activeOption?: Option | null | undefined;
-        createOptionMsg?: string | undefined;
+        createOptionMsg?: string | null | undefined;
         allowUserOptions?: boolean | "append" | undefined;
         allowEmpty?: boolean | undefined;
         autocomplete?: string | undefined;
@@ -13,7 +13,7 @@ declare class __sveltets_Render<Option extends GenericOption> {
         defaultDisabledTitle?: string | undefined;
         disabled?: boolean | undefined;
         disabledInputTitle?: string | undefined;
-        duplicateFunc?: ((op1: GenericOption, op2: GenericOption) => boolean) | undefined;
+        duplicateFunc?: ((op1: T, op2: T) => boolean) | undefined;
         duplicateOptionMsg?: string | undefined;
         duplicates?: boolean | undefined;
         filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
@@ -54,6 +54,7 @@ declare class __sveltets_Render<Option extends GenericOption> {
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
         value?: Option | Option[] | null | undefined;
+        get_label?: ((op: T) => string | number) | undefined;
     };
     events(): MultiSelectEvents;
     slots(): {
@@ -73,9 +74,10 @@ declare class __sveltets_Render<Option extends GenericOption> {
         };
     };
 }
-export type MultiSelectProps<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['props']>;
-export type MultiSelectEvents<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['events']>;
-export type MultiSelectSlots<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['slots']>;
-export default class MultiSelect<Option extends GenericOption> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
+export type MultiSelectProps<Option extends T> = ReturnType<__sveltets_Render<Option>['props']>;
+export type MultiSelectEvents<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
+export type MultiSelectSlots<Option extends T> = ReturnType<__sveltets_Render<Option>['slots']>;
+export default class MultiSelect<Option extends T> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
+    get get_label(): (op: T) => string | number;
 }
 export {};

package/dist/index.d.ts

@@ -1,56 +1,6 @@
 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
-export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as MultiSelect, default } from './MultiSelect.svelte';
 export { default as Wiggle } from './Wiggle.svelte';
-export type Option = string | number | ObjectOption;
-export type ObjectOption = {
-    label: string | number;
-    value?: unknown;
-    title?: string;
-    disabled?: boolean;
-    preselected?: boolean;
-    disabledTitle?: string;
-    selectedTitle?: string;
-    [key: string]: unknown;
-};
-export type DispatchEvents<T = Option> = {
-    add: {
-        option: T;
-    };
-    create: {
-        option: T;
-    };
-    remove: {
-        option: T;
-    };
-    removeAll: {
-        options: T[];
-    };
-    change: {
-        option?: T;
-        options?: T[];
-        type: 'add' | 'remove' | 'removeAll';
-    };
-    open: {
-        event: Event;
-    };
-    close: {
-        event: Event;
-    };
-};
-export type MultiSelectEvents = {
-    [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
-} & {
-    blur: FocusEvent;
-    click: MouseEvent;
-    focus: FocusEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-    touchcancel: TouchEvent;
-    touchend: TouchEvent;
-    touchmove: TouchEvent;
-    touchstart: TouchEvent;
-};
+export * from './types';
 export declare function scroll_into_view_if_needed_polyfill(centerIfNeeded?: boolean): IntersectionObserver;

package/dist/index.js

@@ -1,26 +1,27 @@
 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
-export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as MultiSelect, default } from './MultiSelect.svelte';
 export { default as Wiggle } from './Wiggle.svelte';
-// Firefox lacks support for scrollIntoViewIfNeeded, see
-// https://github.com/janosh/svelte-multiselect/issues/87
-// this polyfill was copied from
+export * from './types';
+// Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
+// See https://github.com/janosh/svelte-multiselect/issues/87
+// Polyfill copied from
 // https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
 // exported for testing
 export function scroll_into_view_if_needed_polyfill(centerIfNeeded = true) {
-    const el = this;
+    const elem = this;
     const observer = new IntersectionObserver(function ([entry]) {
         const ratio = entry.intersectionRatio;
         if (ratio < 1) {
             const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
-            el.scrollIntoView({
+            elem.scrollIntoView({
                 block: place,
                 inline: place,
             });
         }
         this.disconnect();
     });
-    observer.observe(this);
+    observer.observe(elem);
     return observer; // return for testing
 }
 if (typeof Element !== `undefined` &&

package/dist/types.d.ts

@@ -0,0 +1,51 @@
+export type Option = string | number | ObjectOption;
+export type ObjectOption = {
+    label: string | number;
+    value?: unknown;
+    title?: string;
+    disabled?: boolean;
+    preselected?: boolean;
+    disabledTitle?: string;
+    selectedTitle?: string;
+    [key: string]: unknown;
+};
+export type DispatchEvents<T = Option> = {
+    add: {
+        option: T;
+    };
+    create: {
+        option: T;
+    };
+    remove: {
+        option: T;
+    };
+    removeAll: {
+        options: T[];
+    };
+    change: {
+        option?: T;
+        options?: T[];
+        type: 'add' | 'remove' | 'removeAll';
+    };
+    open: {
+        event: Event;
+    };
+    close: {
+        event: Event;
+    };
+};
+export type MultiSelectEvents = {
+    [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
+} & {
+    blur: FocusEvent;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    touchcancel: TouchEvent;
+    touchend: TouchEvent;
+    touchmove: TouchEvent;
+    touchstart: TouchEvent;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.6.0",
+  "version": "8.6.2",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -23,37 +23,37 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^3.57.0"
+    "svelte": "^3.59.1"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.0",
-    "@playwright/test": "^1.31.2",
-    "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.12.0",
+    "@iconify/svelte": "^3.1.3",
+    "@playwright/test": "^1.33.0",
+    "@sveltejs/adapter-static": "^2.0.2",
+    "@sveltejs/kit": "^1.16.3",
     "@sveltejs/package": "2.0.2",
-    "@sveltejs/vite-plugin-svelte": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.55.0",
-    "@typescript-eslint/parser": "^5.55.0",
-    "@vitest/coverage-c8": "^0.29.3",
-    "eslint": "^8.36.0",
+    "@sveltejs/vite-plugin-svelte": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "@vitest/coverage-c8": "^0.31.0",
+    "eslint": "^8.40.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
-    "highlight.js": "^11.7.0",
-    "jsdom": "^21.1.1",
+    "highlight.js": "^11.8.0",
+    "jsdom": "^22.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.4",
-    "prettier-plugin-svelte": "^2.9.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.1.4",
+    "svelte-check": "^3.3.2",
     "svelte-preprocess": "^5.0.3",
-    "svelte-toc": "^0.5.4",
-    "svelte-zoo": "^0.4.3",
-    "svelte2tsx": "^0.6.10",
-    "typescript": "5.0.2",
-    "vite": "^4.2.0",
-    "vitest": "^0.29.3"
+    "svelte-toc": "^0.5.5",
+    "svelte-zoo": "^0.4.5",
+    "svelte2tsx": "^0.6.14",
+    "typescript": "5.0.4",
+    "vite": "^4.3.6",
+    "vitest": "^0.31.0"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -51,7 +51,7 @@
 
 ```sh
 npm install --dev svelte-multiselect
-pnpm add --dev svelte-multiselect
+pnpm add -D svelte-multiselect
 yarn add --dev svelte-multiselect
 ```
 
@@ -90,10 +90,10 @@ Full list of props/bindable variables for this component. The `Option` type you
    Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys.
 
 1. ```ts
-   createOptionMsg: string = `Create this option...`
+   createOptionMsg: string | null = `Create this option...`
    ```
 
-   Message shown to users after entering text when no options match their query and `allowUserOptions` is truthy.
+   The message shown to users when `allowUserOptions` is truthy and they entered text that doesn't match any existing options to suggest creating a new option from the entered text. Emits `console.error` if `allowUserOptions` is `true` or `'append'` and `createOptionMsg=''` to since users might be unaware they can create new option. The error can be silenced by setting `createOptionMsg=null` indicating developer intent is to e.g. use MultiSelect as a tagging component where a user message might be unwanted.
 
 1. ```ts
    allowEmpty: boolean = false
@@ -146,7 +146,7 @@ Full list of props/bindable variables for this component. The `Option` type you
 
 <!-- prettier-ignore -->
 1. ```ts
-   duplicateFunc: (op1: GenericOption, op2: GenericOption) => boolean = (op1, op2) =>
+   duplicateFunc: (op1: T, op2: T) => boolean = (op1, op2) =>
     `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
    ```
 
@@ -189,7 +189,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    highlightMatches: boolean = true
    ```
 
-   Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(search-results)` below for available CSS variables.
+   Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(sms-search-matches)` below for available CSS variables.
 
 1. ```ts
    id: string | null = null
@@ -526,7 +526,7 @@ Minimal example that changes the background color of the options dropdown:
 - `div.multiselect.open`
   - `z-index: var(--sms-open-z-index, 4)`: Increase this if needed to ensure the dropdown list is displayed atop all other page elements.
 - `div.multiselect:focus-within`
-  - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` if not set which defaults to `cornflowerblue`.
+  - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` which in turn defaults to `cornflowerblue`.
 - `div.multiselect.disabled`
   - `background: var(--sms-disabled-bg, lightgray)`: Background when in disabled state.
 - `div.multiselect input::placeholder`
@@ -559,11 +559,15 @@ Minimal example that changes the background color of the options dropdown:
 - `div.multiselect > ul.options > li.disabled`
   - `background: var(--sms-li-disabled-bg, #f5f5f6)`: Background of disabled options in the dropdown list.
   - `color: var(--sms-li-disabled-text, #b8b8b8)`: Text color of disabled option in the dropdown list.
-- `::highlight(search-results)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`
-  - `color: var(--sms-highlight-color, orange)`
-  - `background: var(--sms-highlight-bg)`
-  - `text-decoration: var(--sms-highlight-text-decoration)`
-  - `text-decoration-color: var(--sms-highlight-text-decoration-color)`
+- `::highlight(sms-search-matches)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`. These styles [cannot be set via CSS variables](https://stackoverflow.com/a/56799215). Instead, use a new rule set. For example:
+
+  ```css
+  ::highlight(sms-search-matches) {
+    color: orange;
+    background: rgba(0, 0, 0, 0.15);
+    text-decoration: underline;
+  }
+  ```
 
 ### With CSS frameworks