svelte-multiselect 3.2.0 → 3.3.0

package/MultiSelect.svelte

@@ -6,8 +6,10 @@ import Wiggle from './Wiggle.svelte';
 export let selected = [];
 export let selectedLabels = [];
 export let selectedValues = [];
+export let searchText = ``;
+export let showOptions = false;
 export let maxSelect = null; // null means any number of options are selectable
-export let maxSelectMsg = (current, max) => `${current}/${max}`;
+export let maxSelectMsg = null;
 export let readonly = false;
 export let options;
 export let input = null;
@@ -16,11 +18,17 @@ export let id = undefined;
 export let name = id;
 export let noOptionsMsg = `No matching options`;
 export let activeOption = null;
+export let filterFunc = (op, searchText) => {
+    if (!searchText)
+        return true;
+    return `${op.label}`.toLowerCase().includes(searchText.toLowerCase());
+};
 export let outerDivClass = ``;
 export let ulSelectedClass = ``;
 export let liSelectedClass = ``;
 export let ulOptionsClass = ``;
 export let liOptionClass = ``;
+export let liActiveOptionClass = ``;
 export let removeBtnTitle = `Remove`;
 export let removeAllTitle = `Remove all`;
 // https://github.com/sveltejs/svelte/issues/6964
@@ -36,6 +44,7 @@ onMount(() => {
     selected = _options.filter((op) => op?.preselected);
 });
 let wiggle = false;
+const dispatch = createEventDispatcher();
 function isObject(item) {
     return typeof item === `object` && !Array.isArray(item) && item !== null;
 }
@@ -62,15 +71,8 @@ $: if (new Set(labels).size !== options.length) {
 }
 $: selectedLabels = selected.map((op) => op.label);
 $: selectedValues = selected.map((op) => op.value);
-const dispatch = createEventDispatcher();
-let searchText = ``;
-let showOptions = false;
 // options matching the current search text
-$: matchingOptions = _options.filter((op) => {
-    if (!searchText)
-        return true;
-    return `${op.label}`.toLowerCase().includes(searchText.toLowerCase());
-});
+$: matchingOptions = _options.filter((op) => filterFunc(op, searchText));
 $: matchingEnabledOptions = matchingOptions.filter((op) => !op.disabled);
 $: if (
 // if there was an active option but it's not in the filtered list of options
@@ -81,12 +83,12 @@ $: if (
     // make the first filtered option active
     activeOption = matchingEnabledOptions[0];
 function add(label) {
-    if (selected.length - (maxSelect ?? 0) < 1)
+    if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
         wiggle = true;
     if (!readonly &&
         !selectedLabels.includes(label) &&
         // for maxselect = 1 we always replace current option with new selection
-        (maxSelect == null || maxSelect == 1 || selected.length < maxSelect)) {
+        (maxSelect === null || maxSelect === 1 || selected.length < maxSelect)) {
         searchText = ``; // reset search string on selection
         const option = _options.find((op) => op.label === label);
         if (!option) {
@@ -114,9 +116,6 @@ function remove(label) {
     dispatch(`change`, { option, type: `remove` });
 }
 function setOptionsVisible(show) {
-    // nothing to do if visibility is already as intended
-    if (readonly || show === showOptions)
-        return;
     showOptions = show;
     if (show)
         input?.focus();
@@ -200,15 +199,15 @@ const handleEnterAndSpaceKeys = (handler) => (event) => {
 <!-- z-index: 2 when showOptions is true ensures the ul.selected of one <MultiSelect />
 display above those of another following shortly after it -->
 <div
-  class="multiselect {outerDivClass}"
   class:readonly
-  class:single={maxSelect == 1}
+  class:single={maxSelect === 1}
   class:open={showOptions}
+  class="multiselect {outerDivClass}"
   on:mouseup|stopPropagation={() => setOptionsVisible(true)}
   use:onClickOutside={() => setOptionsVisible(false)}
   use:onClickOutside={() => dispatch(`blur`)}
 >
-  <ExpandIcon height="14pt" style="padding: 0 3pt 0 1pt;" />
+  <ExpandIcon style="min-width: 1em; padding: 0 1pt;" />
   <ul class="selected {ulSelectedClass}">
     {#each selected as option, idx}
       <li class={liSelectedClass}>
@@ -227,57 +226,65 @@ display above those of another following shortly after it -->
         {/if}
       </li>
     {/each}
-    <input
-      bind:this={input}
-      autocomplete="off"
-      bind:value={searchText}
-      on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
-      on:keydown={handleKeydown}
-      on:focus={() => setOptionsVisible(true)}
-      {id}
-      {name}
-      placeholder={selectedLabels.length ? `` : placeholder}
-    />
+    <li style="display: contents;">
+      <input
+        bind:this={input}
+        autocomplete="off"
+        bind:value={searchText}
+        on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
+        on:keydown={handleKeydown}
+        on:focus={() => setOptionsVisible(true)}
+        {id}
+        {name}
+        placeholder={selectedLabels.length ? `` : placeholder}
+      />
+    </li>
   </ul>
   {#if readonly}
     <ReadOnlyIcon height="14pt" />
   {:else if selected.length > 0}
-    {#if maxSelect !== null && maxSelect > 1}
+    {#if maxSelect && (maxSelect > 1 || maxSelectMsg)}
       <Wiggle bind:wiggle angle={20}>
-        <span style="padding: 0 3pt;">{maxSelectMsg(selected.length, maxSelect)}</span>
+        <span style="padding: 0 3pt;">
+          {maxSelectMsg?.(selected.length, maxSelect) ??
+            (maxSelect > 1 ? `${selected.length}/${maxSelect}` : ``)}
+        </span>
       </Wiggle>
     {/if}
-    <button
-      type="button"
-      class="remove-all"
-      title={removeAllTitle}
-      on:mouseup|stopPropagation={removeAll}
-      on:keydown={handleEnterAndSpaceKeys(removeAll)}
-    >
-      <CrossIcon height="14pt" />
-    </button>
+    {#if maxSelect !== 1}
+      <button
+        type="button"
+        class="remove-all"
+        title={removeAllTitle}
+        on:mouseup|stopPropagation={removeAll}
+        on:keydown={handleEnterAndSpaceKeys(removeAll)}
+      >
+        <CrossIcon height="14pt" />
+      </button>
+    {/if}
   {/if}
 
   {#key showOptions}
     <ul
-      class="options {ulOptionsClass}"
       class:hidden={!showOptions}
+      class="options {ulOptionsClass}"
       transition:fly|local={{ duration: 300, y: 40 }}
     >
       {#each matchingOptions as option, idx}
         {@const { label, disabled, title = null, selectedTitle } = option}
         {@const { disabledTitle = defaultDisabledTitle } = option}
+        {@const active = activeOption?.label === label}
         <li
           on:mouseup|preventDefault|stopPropagation
           on:mousedown|preventDefault|stopPropagation={() => {
             if (disabled) return
             isSelected(label) ? remove(label) : add(label)
           }}
+          title={disabled ? disabledTitle : (isSelected(label) && selectedTitle) || title}
           class:selected={isSelected(label)}
-          class:active={activeOption?.label === label}
+          class:active
           class:disabled
-          title={disabled ? disabledTitle : (isSelected(label) && selectedTitle) || title}
-          class={liOptionClass}
+          class="{liOptionClass} {active ? liActiveOptionClass : ``}"
         >
           <slot name="renderOptions" {option} {idx}>
             {option.label}
@@ -294,15 +301,14 @@ display above those of another following shortly after it -->
   :where(div.multiselect) {
     position: relative;
     margin: 1em 0;
-    border: var(--sms-border, 1pt solid lightgray);
-    border-radius: var(--sms-border-radius, 5pt);
-    background: var(--sms-input-bg);
-    height: var(--sms-input-height, 2em);
     align-items: center;
-    min-height: 18pt;
     display: flex;
     cursor: text;
     padding: 0 3pt;
+    border: var(--sms-border, 1pt solid lightgray);
+    border-radius: var(--sms-border-radius, 5pt);
+    background: var(--sms-input-bg);
+    min-height: var(--sms-input-min-height, 22pt);
   }
   :where(div.multiselect.open) {
     z-index: var(--sms-open-z-index, 4);
@@ -314,25 +320,33 @@ display above those of another following shortly after it -->
     background: var(--sms-readonly-bg, lightgray);
   }
 
-  :where(ul.selected > li) {
-    background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue));
+  :where(div.multiselect > ul.selected) {
+    display: flex;
+    flex: 1;
+    padding: 0;
+    margin: 0;
+    flex-wrap: wrap;
+  }
+  :where(div.multiselect > ul.selected > li) {
     align-items: center;
     border-radius: 4pt;
     display: flex;
     margin: 2pt;
-    padding: 0 0 0 1ex;
+    line-height: normal;
+    padding: 1pt 2pt 1pt 5pt;
     transition: 0.3s;
     white-space: nowrap;
-    height: 16pt;
+    background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue));
+    height: var(--sms-selected-li-height);
   }
-  :where(ul.selected > li button, button.remove-all) {
+  :where(div.multiselect > ul.selected > li button, button.remove-all) {
     align-items: center;
     border-radius: 50%;
     display: flex;
     cursor: pointer;
     transition: 0.2s;
   }
-  :where(button) {
+  :where(div.multiselect button) {
     color: inherit;
     background: transparent;
     border: none;
@@ -343,54 +357,48 @@ display above those of another following shortly after it -->
   :where(ul.selected > li button:hover, button.remove-all:hover, button:focus) {
     color: var(--sms-remove-x-hover-focus-color, lightskyblue);
   }
-  :where(button:focus) {
+  :where(div.multiselect > button:focus) {
     transform: scale(1.04);
   }
 
-  :where(div.multiselect input) {
+  :where(div.multiselect > ul.selected > li > input) {
     border: none;
     outline: none;
     background: none;
-    color: var(--sms-text-color, inherit);
     flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
     min-width: 2em;
     /* minimum font-size > 16px ensures iOS doesn't zoom in when focusing input */
     /* https://stackoverflow.com/a/6394497 */
     font-size: calc(16px + 0.1vw);
+    color: var(--sms-text-color, inherit);
   }
 
-  :where(ul.selected) {
-    display: flex;
-    padding: 0;
-    margin: 0;
-    flex-wrap: wrap;
-    flex: 1;
-    overscroll-behavior: none;
-  }
-
-  :where(ul.options) {
+  :where(div.multiselect > ul.options) {
     list-style: none;
     max-height: 50vh;
     padding: 0;
     top: 100%;
+    left: 0;
     width: 100%;
     position: absolute;
     border-radius: 1ex;
     overflow: auto;
     background: var(--sms-options-bg, white);
+    overscroll-behavior: var(--sms-options-overscroll, none);
+    box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
   }
-  :where(ul.options.hidden) {
+  :where(div.multiselect > ul.options.hidden) {
     visibility: hidden;
   }
-  :where(ul.options li) {
+  :where(div.multiselect > ul.options > li) {
     padding: 3pt 2ex;
     cursor: pointer;
   }
   /* for noOptionsMsg */
-  :where(ul.options span) {
+  :where(div.multiselect > ul.options span) {
     padding: 3pt 2ex;
   }
-  :where(ul.options li.selected) {
+  :where(div.multiselect > ul.options > li.selected) {
     border-left: var(
       --sms-li-selected-border-left,
       3pt solid var(--sms-selected-color, green)
@@ -398,22 +406,21 @@ display above those of another following shortly after it -->
     background: var(--sms-li-selected-bg, inherit);
     color: var(--sms-li-selected-color, inherit);
   }
-  :where(ul.options li:not(.selected):hover) {
+  :where(div.multiselect > ul.options > li:not(.selected):hover) {
     border-left: var(
       --sms-li-not-selected-hover-border-left,
       3pt solid var(--sms-active-color, cornflowerblue)
     );
-    border-left: 3pt solid var(--blue);
   }
-  :where(ul.options li.active) {
+  :where(div.multiselect > ul.options > li.active) {
     background: var(--sms-li-active-bg, var(--sms-active-color, cornflowerblue));
   }
-  :where(ul.options li.disabled) {
+  :where(div.multiselect > ul.options > li.disabled) {
+    cursor: not-allowed;
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);
-    cursor: not-allowed;
   }
-  :where(ul.options li.disabled:hover) {
+  :where(div.multiselect > ul.options > li.disabled:hover) {
     border-left: unset;
   }
 </style>

package/MultiSelect.svelte.d.ts

@@ -5,8 +5,10 @@ declare const __propDef: {
         selected?: Option[] | undefined;
         selectedLabels?: Primitive[] | undefined;
         selectedValues?: Primitive[] | undefined;
+        searchText?: string | undefined;
+        showOptions?: boolean | undefined;
         maxSelect?: number | null | undefined;
-        maxSelectMsg?: ((current: number, max: number) => string) | undefined;
+        maxSelectMsg?: ((current: number, max: number) => string) | null | undefined;
         readonly?: boolean | undefined;
         options: ProtoOption[];
         input?: HTMLInputElement | null | undefined;
@@ -15,11 +17,13 @@ declare const __propDef: {
         name?: string | undefined;
         noOptionsMsg?: string | undefined;
         activeOption?: Option | null | undefined;
+        filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
         outerDivClass?: string | undefined;
         ulSelectedClass?: string | undefined;
         liSelectedClass?: string | undefined;
         ulOptionsClass?: string | undefined;
         liOptionClass?: string | undefined;
+        liActiveOptionClass?: string | undefined;
         removeBtnTitle?: string | undefined;
         removeAllTitle?: string | undefined;
         defaultDisabledTitle?: string | undefined;

package/package.json

@@ -5,16 +5,16 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "type": "module",
   "svelte": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.26",
-    "@sveltejs/kit": "^1.0.0-next.259",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
-    "eslint": "^8.8.0",
+    "@sveltejs/adapter-static": "^1.0.0-next.28",
+    "@sveltejs/kit": "^1.0.0-next.278",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "eslint": "^8.9.0",
     "eslint-plugin-svelte3": "^3.4.0",
     "hastscript": "^7.0.2",
     "mdsvex": "^0.10.5",
@@ -22,15 +22,15 @@
     "prettier-plugin-svelte": "^2.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.46.3",
-    "svelte-check": "^2.4.2",
+    "svelte": "^3.46.4",
+    "svelte-check": "^2.4.5",
     "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.2",
-    "svelte-toc": "^0.2.3",
-    "svelte2tsx": "^0.5.2",
+    "svelte-preprocess": "^4.10.3",
+    "svelte-toc": "^0.2.6",
+    "svelte2tsx": "^0.5.5",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5",
-    "vite": "^2.7.13"
+    "vite": "^2.8.4"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -22,7 +22,7 @@
 
 <slot />
 
-## Key Features
+## Key features
 
 - **Single / multiple select:** pass `maxSelect={1}` prop to only allow one selection
 - **Dropdowns:** scrollable lists for large numbers of options
@@ -88,23 +88,42 @@ Full list of props/bindable variables for this component:
 <div class="table">
 
 <!-- prettier-ignore -->
-| name             | default                                                    | description                                                                                                                                                                                                                                |
-| :--------------- | :--------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options`        | required prop                                              | Array of strings/numbers or `Option` objects that will be listed in the dropdown. See `src/lib/index.ts` for admissible fields. The `label` is the only mandatory one. It must also be unique.                                             |
-| `activeOption`   | `null`                                                     | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys.                                                                                                                                           |
-| `maxSelect`      | `null`                                                     | Positive integer to limit the number of options users can pick. `null` means no limit.                                                                                                                                                     |
-| `maxSelectMsg`   | ``(current: number, max: number) => `${current}/${max}` `` | Function that returns a string informing the user how many of the maximum allowed options they have currently selected. Return empty string to disable, i.e. `() => ''`.                                                                   |
-| `selected`       | `[]`                                                       | Array of currently/pre-selected options when binding/passing as props respectively.                                                                                                                                                        |
-| `selectedLabels` | `[]`                                                       | Labels of currently selected options.                                                                                                                                                                                                      |
-| `selectedValues` | `[]`                                                       | Values of currently selected options.                                                                                                                                                                                                      |
-| `readonly`       | `false`                                                    | Disable the component. It will still be rendered but users won't be able to interact with it.                                                                                                                                              |
-| `placeholder`    | `undefined`                                                | String shown in the text input when no option is selected.                                                                                                                                                                                 |
-| `input`          | `undefined`                                                | Handle to the `<input>` DOM node.                                                                                                                                                                                                          |
-| `id`             | `undefined`                                                | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component.                                       |
-| `name`           | `id`                                                       | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. |
+| name             | default                 | description                                                                                                                                                                                                                                |
+| :--------------- | :---------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options`        | required prop           | Array of strings/numbers or `Option` objects that will be listed in the dropdown. See `src/lib/index.ts` for admissible fields. The `label` is the only mandatory one. It must also be unique.                                             |
+| `showOptions`    | `false`                 | Bindable boolean that controls whether the options dropdown is visible.                                                                                                                                                                    |
+| `searchText`     | ``                      | Text the user-entered to filter down on the list of options. Binds both ways, i.e. can also be used to set the input text.                                                                                                                 |
+| `activeOption`   | `null`                  | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys.                                                                                                                                           |
+| `maxSelect`      | `null`                  | Positive integer to limit the number of options users can pick. `null` means no limit.                                                                                                                                                     |
+| `selected`       | `[]`                    | Array of currently/pre-selected options when binding/passing as props respectively.                                                                                                                                                        |
+| `selectedLabels` | `[]`                    | Labels of currently selected options.                                                                                                                                                                                                      |
+| `selectedValues` | `[]`                    | Values of currently selected options.                                                                                                                                                                                                      |
+| `noOptionsMsg`   | `'No matching options'` | What message to show if no options match the user-entered search string.                                                                                                                                                                   |
+| `readonly`       | `false`                 | Disable the component. It will still be rendered but users won't be able to interact with it.                                                                                                                                              |
+| `placeholder`    | `undefined`             | String shown in the text input when no option is selected.                                                                                                                                                                                 |
+| `input`          | `undefined`             | Handle to the `<input>` DOM node.                                                                                                                                                                                                          |
+| `id`             | `undefined`             | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component.                                       |
+| `name`           | `id`                    | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. |
 
 </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:
+
+   ```ts
+   filterFunc = (op: Option, searchText: string) => {
+     if (!searchText) return true
+     return `${op.label}`.toLowerCase().includes(searchText.toLowerCase())
+   }
+   ```
+
+2. `maxSelectMsg = (current: number, max: number) => string`: Inform users how many of the maximum allowed options they have already selected. Set `maxSelectMsg={null}` to not show a message. Defaults to `null` when `maxSelect={1}` or `maxSelect={null}`. Else if `maxSelect > 1`, defaults to:
+
+   ```ts
+   maxSelectMsg = (current: number, max: number) => `${current}/${max}`
+   ```
+
 ## Slots
 
 `MultiSelect.svelte` accepts two named slots
@@ -194,29 +213,37 @@ There are 3 ways to style this component. To understand which options do what, i
 
 If you only want to make small adjustments, you can pass the following CSS variables directly to the component as props or define them in a `:global()` CSS context.
 
-- `div.multiselect`:
+- `div.multiselect`
   - `border: var(--sms-border, 1pt solid lightgray)`: Change this to e.g. to `1px solid red` to indicate this form field is in an invalid state.
-  - `border-radius: var(--sms-border-radius, 5pt)`: Input border radius.
-  - `background: var(--sms-input-bg)`: Input background.
-  - `height: var(--sms-input-height, 2em)`: Input height.
-  - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when focused. Falls back to `--sms-active-color` if not set which in turn falls back on `cornflowerblue`.
+  - `border-radius: var(--sms-border-radius, 5pt)`
+  - `background: var(--sms-input-bg)`
+  - `height: var(--sms-input-height, 2em)`
+- `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`.
+- `div.multiselect.readonly`
   - `background: var(--sms-readonly-bg, lightgray)`: Background when in readonly state.
-- `div.multiselect.open`:
-  - `z-index: var(--sms-open-z-index, 4)`: Useful to ensure the dropdown list of options is displayed on top of other page elements of increased `z-index`.
-- `div.multiselect input`
+- `div.multiselect > ul.selected > li > input`
   - `color: var(--sms-text-color, inherit)`: Input text color.
-- `ul.selected > li`:
+- `div.multiselect > ul.selected > li`
   - `background: var(--sms-selected-bg, var(--sms-active-color, cornflowerblue))`: Background of selected options.
-- `ul.selected > li button:hover, button.remove-all:hover`
+  - `height: var(--sms-selected-li-height)`: Height of selected options.
+- `ul.selected > li button:hover, button.remove-all:hover, button:focus`
   - `color: var(--sms-remove-x-hover-focus-color, lightskyblue)`: Color of the cross-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
-- `ul.options`
-  - `background: var(--sms-options-bg, white)`: Background of options list.
-- `ul.options > li.selected`
+- `div.multiselect > ul.options`
+  - `background: var(--sms-options-bg, white)`: Background of dropdown list.
+  - `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).
+  - `box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);`: Box shadow of dropdown list.
+- `div.multiselect > ul.options > li.selected`
+  - `border-left: var(--sms-li-selected-border-left, 3pt solid var(--sms-selected-color, green))`
   - `background: var(--sms-li-selected-bg, inherit)`: Background of selected list items in options pane.
   - `color: var(--sms-li-selected-color, inherit)`: Text color of selected list items in options pane.
-- `ul.options > li.active`
+- `div.multiselect > ul.options > li:not(.selected):hover`
+  - `border-left: var(--sms-li-not-selected-hover-border-left, 3pt solid var(--sms-active-color, cornflowerblue))`
+- `div.multiselect > ul.options > li.active`
   - `background: var(--sms-li-active-bg, var(--sms-active-color, cornflowerblue))`: Background of active (currently with arrow keys highlighted) list item.
-- `ul.options > li.disabled`
+- `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.
 
@@ -235,6 +262,7 @@ The second method allows you to pass in custom classes to the important DOM elem
 - `liSelectedClass`
 - `ulOptionsClass`
 - `liOptionClass`
+- `liActiveOptionClass`
 
 This simplified version of the DOM structure of this component shows where these classes are inserted:
 
@@ -246,7 +274,9 @@ This simplified version of the DOM structure of this component shows where these
   </ul>
   <ul class="options {ulOptionsClass}">
     <li class={liOptionClass}>Option 1</li>
-    <li class={liOptionClass}>Option 2</li>
+    <li class="{liOptionClass} {liActiveOptionClass}">
+      Option 2 (currently active)
+    </li>
   </ul>
 </div>
 ```
@@ -256,40 +286,47 @@ This simplified version of the DOM structure of this component shows where these
 You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component has focus.
 
 ```css
-:global(.multiselect) {
+:global(div.multiselect) {
   /* top-level wrapper div */
 }
-:global(.multiselect ul.selected > li) {
-  /* selected options */
+:global(div.multiselect.open) {
+  /* top-level wrapper div when dropdown open */
+}
+:global(div.multiselect.readonly) {
+  /* top-level wrapper div when in readonly state */
 }
-:global(.multiselect ul.selected > li button),
-:global(.multiselect button.remove-all) {
+:global(div.multiselect > ul.selected) {
+  /* selected list */
+}
+:global(div.multiselect > ul.selected > li) {
+  /* selected list items */
+}
+:global(div.multiselect button) {
+  /* target all buttons in this component */
+}
+:global(div.multiselect > ul.selected > li button, button.remove-all) {
   /* buttons to remove a single or all selected options at once */
 }
-:global(.multiselect ul.options) {
+:global(div.multiselect > ul.selected > li > input) {
+  /* input inside the top-level wrapper div */
+}
+:global(div.multiselect > ul.options) {
   /* dropdown options */
 }
-:global(.multiselect ul.options li) {
-  /* dropdown list of available options */
+:global(div.multiselect > ul.options > li) {
+  /* dropdown list items */
 }
-:global(.multiselect ul.options li.selected) {
+:global(div.multiselect > ul.options > li.selected) {
   /* selected options in the dropdown list */
 }
-:global(.multiselect ul.options li:not(.selected):hover) {
+:global(div.multiselect > ul.options > li:not(.selected):hover) {
   /* unselected but hovered options in the dropdown list */
 }
-:global(.multiselect ul.options li.selected:hover) {
-  /* selected and hovered options in the dropdown list */
-  /* probably not necessary to style this state in most cases */
-}
-:global(.multiselect ul.options li.active) {
+:global(div.multiselect > ul.options > li.active) {
   /* active means item was navigated to with up/down arrow keys */
   /* ready to be selected by pressing enter */
 }
-:global(.multiselect ul.options li.selected.active) {
-  /* both active and already selected, pressing enter now will deselect the item */
-}
-:global(.multiselect ul.options li.disabled) {
+:global(div.multiselect > ul.options > li.disabled) {
   /* options with disabled key set to true (see props above) */
 }
 ```