svelte-multiselect 5.0.2 → 5.0.5

package/MultiSelect.svelte

@@ -1,4 +1,5 @@
-<script>import { createEventDispatcher } from 'svelte';
+<script>import scrollIntoView from 'scroll-into-view-if-needed';
+import { createEventDispatcher } from 'svelte';
 import { get_label, get_value } from './';
 import CircleSpinner from './CircleSpinner.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
@@ -10,6 +11,7 @@ export let maxSelectMsg = null;
 export let disabled = false;
 export let disabledTitle = `This field is disabled`;
 export let options;
+export let matchingOptions = [];
 export let selected = [];
 export let selectedLabels = [];
 export let selectedValues = [];
@@ -44,15 +46,24 @@ export let required = false;
 export let autocomplete = `off`;
 export let invalid = false;
 export let sortSelected = false;
-if (!(options?.length > 0))
-    console.error(`MultiSelect received no options`);
-if (parseLabelsAsHtml && allowUserOptions)
-    console.warn(`You shouldn't combine parseLabelsAsHtml and allowUserOptions. It's susceptible to XSS attacks!`);
+if (!(options?.length > 0)) {
+    if (allowUserOptions) {
+        options = []; // initializing as array avoids errors when component mounts
+    }
+    else {
+        // only error for empty options if user is not allowed to create custom options
+        console.error(`MultiSelect received no options`);
+    }
+}
+if (parseLabelsAsHtml && allowUserOptions) {
+    console.warn(`Don't combine parseLabelsAsHtml and allowUserOptions. It's susceptible to XSS attacks!`);
+}
 if (maxSelect !== null && maxSelect < 1) {
     console.error(`maxSelect must be null or positive integer, got ${maxSelect}`);
 }
-if (!Array.isArray(selected))
-    console.error(`selected prop must be an array`);
+if (!Array.isArray(selected)) {
+    console.error(`selected prop must be an array, got ${selected}`);
+}
 const dispatch = createEventDispatcher();
 let activeMsg = false; // controls active state of <li>{addOptionMsg}</li>
 let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
@@ -68,6 +79,9 @@ $: matchingOptions = options.filter((op) => filterFunc(op, searchText) &&
     !(op instanceof Object && op.disabled) &&
     !selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
 );
+// reset activeOption if it's no longer in the matchingOptions list
+$: if (activeOption && !matchingOptions.includes(activeOption))
+    activeOption = null;
 // add an option to selected list
 function add(label) {
     if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
@@ -82,10 +96,19 @@ function add(label) {
             searchText.length > 0) {
             // user entered text but no options match, so if allowUserOptions=true | 'append', we create
             // a new option from the user-entered text
-            if (typeof options[0] === `string`)
-                option = searchText;
-            else
+            if (typeof options[0] === `object`) {
+                // if 1st option is an object, we create new option as object to keep type homogeneity
                 option = { label: searchText, value: searchText };
+            }
+            else {
+                if ([`number`, `undefined`].includes(typeof options[0]) &&
+                    !isNaN(Number(searchText))) {
+                    // create new option as number if it parses to a number and 1st option is also number or missing
+                    option = Number(searchText);
+                }
+                else
+                    option = searchText; // else create custom option as string
+            }
             if (allowUserOptions === `append`)
                 options = [...options, option];
         }
@@ -210,7 +233,8 @@ async function handleKeydown(event) {
             // around start/end of option list. Find a better solution than waiting 10 ms to.
             setTimeout(() => {
                 const li = document.querySelector(`ul.options > li.active`);
-                li?.scrollIntoView();
+                if (li)
+                    scrollIntoView(li, { scrollMode: `if-needed` });
             }, 10);
         }
     }
@@ -225,7 +249,7 @@ function remove_all() {
     selected = [];
     searchText = ``;
 }
-$: isSelected = (label) => selectedLabels.includes(label);
+$: is_selected = (label) => selectedLabels.includes(label);
 const if_enter_or_space = (handler) => (event) => {
     if ([`Enter`, `Space`].includes(event.code)) {
         event.preventDefault();
@@ -282,7 +306,7 @@ const if_enter_or_space = (handler) => (event) => {
             type="button"
             title="{removeBtnTitle} {get_label(option)}"
           >
-            <CrossIcon width="15px" />
+            <slot name="remove-icon"><CrossIcon width="15px" /></slot>
           </button>
         {/if}
       </li>
@@ -330,69 +354,74 @@ const if_enter_or_space = (handler) => (event) => {
         on:mouseup|stopPropagation={remove_all}
         on:keydown={if_enter_or_space(remove_all)}
       >
-        <CrossIcon width="15px" />
+        <slot name="remove-icon"><CrossIcon width="15px" /></slot>
       </button>
     {/if}
   {/if}
 
-  <ul class:hidden={!showOptions} class="options {ulOptionsClass}">
-    {#each matchingOptions as option, idx}
-      {@const {
-        label,
-        disabled = null,
-        title = null,
-        selectedTitle = null,
-        disabledTitle = defaultDisabledTitle,
-      } = option instanceof Object ? option : { label: option }}
-      {@const active = activeOption && get_label(activeOption) === label}
-      <li
-        on:mousedown|stopPropagation
-        on:mouseup|stopPropagation={() => {
-          if (!disabled) isSelected(label) ? remove(label) : add(label)
-        }}
-        title={disabled ? disabledTitle : (isSelected(label) && selectedTitle) || title}
-        class:selected={isSelected(label)}
-        class:active
-        class:disabled
-        class="{liOptionClass} {active ? liActiveOptionClass : ``}"
-        on:mouseover={() => {
-          if (!disabled) activeOption = option
-        }}
-        on:focus={() => {
-          if (!disabled) activeOption = option
-        }}
-        on:mouseout={() => (activeOption = null)}
-        on:blur={() => (activeOption = null)}
-        aria-selected="false"
-      >
-        <slot name="option" {option} {idx}>
-          {#if parseLabelsAsHtml}
-            {@html get_label(option)}
-          {:else}
-            {get_label(option)}
-          {/if}
-        </slot>
-      </li>
-    {:else}
-      {#if allowUserOptions && searchText}
+  <!-- only render options dropdown if options or searchText is not empty needed to avoid briefly flashing empty dropdown -->
+  {#if searchText || options?.length > 0}
+    <ul class:hidden={!showOptions} class="options {ulOptionsClass}">
+      {#each matchingOptions as option, idx}
+        {@const {
+          label,
+          disabled = null,
+          title = null,
+          selectedTitle = null,
+          disabledTitle = defaultDisabledTitle,
+        } = option instanceof Object ? option : { label: option }}
+        {@const active = activeOption && get_label(activeOption) === label}
         <li
           on:mousedown|stopPropagation
-          on:mouseup|stopPropagation={() => add(searchText)}
-          title={addOptionMsg}
-          class:active={activeMsg}
-          on:mouseover={() => (activeMsg = true)}
-          on:focus={() => (activeMsg = true)}
-          on:mouseout={() => (activeMsg = false)}
-          on:blur={() => (activeMsg = false)}
+          on:mouseup|stopPropagation={() => {
+            if (!disabled) is_selected(label) ? remove(label) : add(label)
+          }}
+          title={disabled
+            ? disabledTitle
+            : (is_selected(label) && selectedTitle) || title}
+          class:selected={is_selected(label)}
+          class:active
+          class:disabled
+          class="{liOptionClass} {active ? liActiveOptionClass : ``}"
+          on:mouseover={() => {
+            if (!disabled) activeOption = option
+          }}
+          on:focus={() => {
+            if (!disabled) activeOption = option
+          }}
+          on:mouseout={() => (activeOption = null)}
+          on:blur={() => (activeOption = null)}
           aria-selected="false"
         >
-          {addOptionMsg}
+          <slot name="option" {option} {idx}>
+            {#if parseLabelsAsHtml}
+              {@html get_label(option)}
+            {:else}
+              {get_label(option)}
+            {/if}
+          </slot>
         </li>
       {:else}
-        <span>{noOptionsMsg}</span>
-      {/if}
-    {/each}
-  </ul>
+        {#if allowUserOptions && searchText}
+          <li
+            on:mousedown|stopPropagation
+            on:mouseup|stopPropagation={() => add(searchText)}
+            title={addOptionMsg}
+            class:active={activeMsg}
+            on:mouseover={() => (activeMsg = true)}
+            on:focus={() => (activeMsg = true)}
+            on:mouseout={() => (activeMsg = false)}
+            on:blur={() => (activeMsg = false)}
+            aria-selected="false"
+          >
+            {addOptionMsg}
+          </li>
+        {:else}
+          <span>{noOptionsMsg}</span>
+        {/if}
+      {/each}
+    </ul>
+  {/if}
 </div>
 
 <style>
@@ -472,9 +501,11 @@ const if_enter_or_space = (handler) => (event) => {
     background: none;
     flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
     min-width: 2em;
-    color: inherit;
+    /* ensure input uses text color and not --sms-selected-text-color */
+    color: var(--sms-text-color);
     font-size: inherit;
     cursor: inherit; /* needed for disabled state */
+    border-radius: 0; /* reset ul.selected > li */
   }
   :where(div.multiselect > ul.selected > li > input)::placeholder {
     padding-left: 5pt;

package/MultiSelect.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { CustomEvents, Option } from './';
+import type { MultiSelectEvents, Option } from './';
 declare const __propDef: {
     props: {
         searchText?: string | undefined;
@@ -9,6 +9,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         disabledTitle?: string | undefined;
         options: Option[];
+        matchingOptions?: Option[] | undefined;
         selected?: Option[] | undefined;
         selectedLabels?: (string | number)[] | undefined;
         selectedValues?: unknown[] | undefined;
@@ -45,6 +46,7 @@ declare const __propDef: {
             option: Option;
             idx: any;
         };
+        'remove-icon': {};
         spinner: {};
         'disabled-icon': {};
         option: {
@@ -53,7 +55,7 @@ declare const __propDef: {
         };
     };
     getters: {};
-    events: CustomEvents;
+    events: MultiSelectEvents;
 };
 export declare type MultiSelectProps = typeof __propDef.props;
 export declare type MultiSelectEvents = typeof __propDef.events;

package/icons/Octocat.svelte

@@ -0,0 +1,5 @@
+<svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
+  <path
+    d="M8.422 20.081c0 .896.01 1.753.016 2.285a.617.617 0 0 0 .422.58c2.078.686 4.317.718 6.414.091l.292-.087a.67.67 0 0 0 .478-.638c.005-.733.017-2.017.017-3.53c0-1.372-.477-2.25-1.031-2.707c3.399-.366 6.97-1.61 6.97-7.227c0-1.61-.592-2.91-1.566-3.934c.153-.366.688-1.866-.153-3.878c0 0-1.28-.403-4.201 1.5a14.76 14.76 0 0 0-3.82-.494c-1.298 0-2.597.165-3.819.494C5.52.65 4.24 1.036 4.24 1.036c-.84 2.012-.306 3.512-.153 3.878a5.565 5.565 0 0 0-1.566 3.934c0 5.598 3.552 6.86 6.951 7.227c-.439.366-.84 1.006-.973 1.957c-.879.384-3.075 1.006-4.45-1.207c-.286-.44-1.146-1.519-2.349-1.5c-1.28.018-.516.695.02.97c.648.347 1.393 1.646 1.565 2.067c.306.823 1.299 2.396 5.137 1.72Z"
+  />
+</svg>

package/icons/Octocat.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  OctocatProps */
+/** @typedef {typeof __propDef.events}  OctocatEvents */
+/** @typedef {typeof __propDef.slots}  OctocatSlots */
+export default class Octocat extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type OctocatProps = typeof __propDef.props;
+export type OctocatEvents = typeof __propDef.events;
+export type OctocatSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/icons/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ExpandIcon } from './ChevronExpand.svelte';
 export { default as CrossIcon } from './Cross.svelte';
 export { default as DisabledIcon } from './Disabled.svelte';
+export { default as Octocat } from './Octocat.svelte';

package/icons/index.js

@@ -1,3 +1,4 @@
 export { default as ExpandIcon } from './ChevronExpand.svelte';
 export { default as CrossIcon } from './Cross.svelte';
 export { default as DisabledIcon } from './Disabled.svelte';
+export { default as Octocat } from './Octocat.svelte';

package/index.d.ts

@@ -28,7 +28,7 @@ export declare type DispatchEvents = {
     focus: undefined;
     blur: undefined;
 };
-export declare type CustomEvents = {
+export declare type MultiSelectEvents = {
     [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
 };
 export declare const get_label: (op: Option) => string | number;

package/package.json

@@ -5,37 +5,38 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.34",
-    "@sveltejs/kit": "1.0.0-next.345",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "eslint": "^8.18.0",
+    "@playwright/test": "^1.24.1",
+    "@sveltejs/adapter-static": "^1.0.0-next.38",
+    "@sveltejs/kit": "^1.0.0-next.396",
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "eslint": "^8.20.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.0.2",
     "jsdom": "^20.0.0",
     "mdsvex": "^0.10.6",
-    "playwright": "^1.22.2",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.48.0",
+    "scroll-into-view-if-needed": "^2.2.29",
+    "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-github-corner": "^0.1.0",
     "svelte-preprocess": "^4.10.6",
-    "svelte-toc": "^0.2.9",
-    "svelte2tsx": "^0.5.11",
+    "svelte-toc": "^0.2.10",
+    "svelte2tsx": "^0.5.13",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "vite": "^2.9.12",
-    "vitest": "^0.16.0"
+    "vite": "^3.0.4",
+    "vitest": "^0.19.1"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -13,7 +13,7 @@
 
 </h4>
 
-**Keyboard-friendly, accessible multi-select Svelte component.**
+**Keyboard-friendly, accessible and highly customizable multi-select component.**
 <strong class="hide-in-docs">
 <a href="https://svelte-multiselect.netlify.app">Docs</a>
 </strong>
@@ -24,7 +24,7 @@
 
 - **Bindable:** `bind:selected` gives you an array of the currently selected options. Thanks to Svelte's 2-way binding, it can also control the component state externally through assignment `selected = ['foo', 42]`.
 - **Keyboard friendly** for mouse-less form completion
-- **No 3rd-party dependencies:** needs only Svelte as dev dependency
+- **No run-time deps:** needs only Svelte as dev dependency
 - **Dropdowns:** scrollable lists for large numbers of options
 - **Searchable:** start typing to filter options
 - **Tagging:** selected options are listed as tags within the input
@@ -35,20 +35,17 @@
 
 ## Recent breaking changes
 
-- v4.0.0 renamed the slots for customizing how selected options and dropdown list items are rendered:
-
-  - old: `<slot name="renderOptions" />`, new: `<slot name="option" />`
-  - old: `<slot name="renderSelected" />`, new: `<slot name="selected" />`
-
-- v4.0.1 renamed the `readonly` prop to `disabled` which now prevents all form or user interaction with this component including opening the dropdown list which was still possible before. See [#45](https://github.com/janosh/svelte-multiselect/issues/45) for details. The associated CSS class applied to the outer `div` was likewise renamed to `div.multiselect.{readonly=>disabled}`.
+- v4.0.1 renamed the `readonly` prop to `disabled` which now prevents all form of user interaction with this component including opening the dropdown list which was still possible before. See [#45](https://github.com/janosh/svelte-multiselect/issues/45) for details. The associated CSS class applied to the outer `div` was likewise renamed `div.multiselect.{readonly=>disabled}`.
 
 - v4.0.3 CSS variables starting with `--sms-input-<attr>` were renamed to just `--sms-<attr>`. E.g. `--sms-input-min-height` is now `--sms-min-height`.
 
-- v5.0.0 Support both simple and object options. Previously string or number options were converted to objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's what you'll get from `bind:selected`.
+- v5.0.0 Support both simple and object options. Previously strings and numbers were converted to `{ value, label }` objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's exactly what you'll get from `bind:selected`.
 
 ## Installation
 
 ```sh
+npm install -D svelte-multiselect
+pnpm install -D svelte-multiselect
 yarn add -D svelte-multiselect
 ```
 
@@ -87,6 +84,7 @@ Full list of props/bindable variables for this component:
 | `selected`             | `[]`                                | Array of currently selected options. Can be bound to `bind:selected={[1, 2, 3]}` to control component state externally or passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction.                                                                                                                                                                            |
 | `selectedLabels`       | `[]`                                | Labels of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.label)` when options are objects. If options are simple strings, `selected === selectedLabels`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing      `bind:selectedLabels`.                                                                |
 | `selectedValues`       | `[]`                                | Values of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.value)` when options are objects. If options are simple strings, `selected === selectedValues`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing      `bind:selectedValues`.                                                                |
+| `matchingOptions`      | `Option[]`                          | List of options currently displayed to the user. Same as `options` unless the user entered `searchText` in which case this array contains only those options for which `filterFunc = (op: Option, searchText: string) => boolean` returned `true` (see [exposed methods](#exposed-methods) below for details on `filterFunc`).                                                                                                    |
 | `sortSelected`         | `boolean \| ((op1, op2) => number)` | Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://svelte-multiselect.netlify.app/sort-selected) example.                                                                                                                                  |
 | `noOptionsMsg`         | `'No matching options'`             | What message to show if no options match the user-entered search string.                                                                                                                                                                                                                                                                                                                                                          |
 | `disabled`             | `false`                             | Disable the component. It will still be rendered but users won't be able to interact with it.                                                                                                                                                                                                                                                                                                                                     |
@@ -102,19 +100,21 @@ Full list of props/bindable variables for this component:
 | `parseLabelsAsHtml`    | `false`                             | Whether option labels should be passed to [Svelte's `@html` directive](https://svelte.dev/tutorial/html-tags) or inserted into the DOM as plain text. `true` will raise an error if `allowUserOptions` is also truthy as it makes your site susceptible to [cross-site scripting (XSS) attacks](https://wikipedia.org/wiki/Cross-site_scripting).                                                                                 |
 | `addOptionMsg`         | `'Create this option...'`           | Message shown to users after entering text when no options match their query and `allowUserOptions` is truthy.                                                                                                                                                                                                                                                                                                                    |
 | `loading`              | `false`                             | Whether the component should display a spinner to indicate it's in loading state. Use `<slot name='spinner'>` to specify a custom spinner.                                                                                                                                                                                                                                                                                        |
-| `removeBtnTitle`       | `'Remove'`                          | Title text to display when user hovers over button (cross icon) to remove selected option.                                                                                                                                                                                                                                                                                                                                        |
+| `removeBtnTitle`       | `'Remove'`                          | Title text to display when user hovers over button to remove selected option (which defaults to a cross icon).                                                                                                                                                                                                                                                                                                                    |
 | `removeAllTitle`       | `'Remove all'`                      | Title text to display when user hovers over remove-all button.                                                                                                                                                                                                                                                                                                                                                                    |
 | `defaultDisabledTitle` | `'This option is disabled'`         | Title text to display when user hovers over a disabled option. Each option can override this through its `disabledTitle` attribute.                                                                                                                                                                                                                                                                                               |
-| `autocomplete`         | `'off'`                             | Applied to the `<input>`. Specifies if browser is permitted to auto-fill this form field. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for other admissible values.                                                                                                                                                                                                                  |
+| `autocomplete`         | `'off'`                             | Applied to the `<input>`. Specifies if browser is permitted to auto-fill this form field. See [MDN docs](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) for other admissible values.                                                                                                                                                                                                                        |
 | `invalid`              | `false`                             | If `required=true` and user tries to submit but `selected = []` is empty, `invalid` is automatically set to `true` and CSS class `invalid` applied to the top-level `div.multiselect`. `invalid` class is removed again as soon as the user selects an option. `invalid` can also be controlled externally by binding to it `<MultiSelect bind:invalid />` and setting it to `true` based on outside events or custom validation. |
 
 </div>
 
 ## Exposed methods
 
-1. `filterFunc = (op: Option, searchText: string) => boolean`: Determine what options are shown when user enters search string to filter dropdown list. Defaults to:
+1. `filterFunc = (op: Option, searchText: string) => boolean`: Customize how dropdown options are filtered when user enters search string into `<MultiSelect />`. Defaults to:
 
    ```ts
+   import type { Option } from 'svelte-multiselect'
+
    filterFunc = (op: Option, searchText: string) => {
      if (!searchText) return true
      return `${op.label}`.toLowerCase().includes(searchText.toLowerCase())
@@ -135,6 +135,7 @@ Full list of props/bindable variables for this component:
 - `slot="selected"`: Customize rendering of selected items. Receives as props an `option` and the zero-indexed position (`idx`) it has in the list of selected items.
 - `slot="spinner"`: Custom spinner component to display when in `loading` state. Receives no props.
 - `slot="disabled-icon"`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `<span slot="disabled-icon" />` or `div` to remove the default disabled icon.
+- `slot="remove-icon"`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props.
 
 Example:
 
@@ -153,6 +154,7 @@ Example:
   </span>
 
   <CustomSpinner slot="spinner">
+  <strong slot="remove-icon">X</strong>
 </MultiSelect>
 ```
 
@@ -246,11 +248,11 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `padding: var(--sms-selected-li-padding, 5pt 1pt)`: Height of selected options.
   - `color: var(--sms-selected-text-color, var(--sms-text-color))`: Text color for selected options.
 - `ul.selected > li button:hover, button.remove-all:hover, button:focus`
-  - `color: var(--sms-button-hover-color, lightskyblue)`: Color of the cross-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
+  - `color: var(--sms-button-hover-color, lightskyblue)`: Color of the remove-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
 - `div.multiselect > ul.options`
   - `background: var(--sms-options-bg, white)`: Background of dropdown list.
   - `max-height: var(--sms-options-max-height, 50vh)`: Maximum height of options dropdown.
-  - `overscroll-behavior: var(--sms-options-overscroll, none)`: Whether scroll events bubble to parent elements when reaching the top/bottom of the options dropdown. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).
+  - `overscroll-behavior: var(--sms-options-overscroll, none)`: Whether scroll events bubble to parent elements when reaching the top/bottom of the options dropdown. See [MDN](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior).
   - `box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);`: Box shadow of dropdown list.
 - `div.multiselect > ul.options > li`
   - `scroll-margin: var(--sms-options-scroll-margin, 100px)`: Top/bottom margin to keep between dropdown list items and top/bottom screen edge when auto-scrolling list to keep items in view.