windmill-components 1.493.10 → 1.501.5

package/package/components/multiselect/MultiSelect.svelte

@@ -1,780 +0,0 @@
-<script lang="ts">import { createEventDispatcher, tick } from 'svelte';
-import { flip } from 'svelte/animate';
-import VirtualList from 'svelte-tiny-virtual-list';
-import { twMerge } from 'tailwind-merge';
-import { get_label, get_style, scroll_into_view_if_needed_polyfill } from './utils';
-import { ChevronsUpDown, X } from 'lucide-svelte';
-export let activeIndex = null;
-export let activeOption = null;
-export let createOptionMsg = `Create this option...`;
-export let allowUserOptions = false;
-export let autocomplete = `off`;
-export let autoScroll = true;
-export let breakpoint = 800; // any screen with more horizontal pixels is considered desktop, below is mobile
-export let defaultDisabledTitle = `This option is disabled`;
-export let disabled = false;
-export let disabledInputTitle = `This input is disabled`;
-// prettier-ignore
-export let duplicateOptionMsg = `This option is already selected`;
-export let duplicates = false; // whether to allow duplicate options
-// takes two options and returns true if they are equal
-// case-insensitive equality comparison after string coercion and looks only at the `label` key of object options by default
-export let key = (opt) => `${get_label(opt)}`.toLowerCase();
-export let filterFunc = (opt, searchText) => {
-    if (!searchText)
-        return true;
-    return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
-};
-export let closeDropdownOnSelect = `desktop`;
-export let form_input = null;
-export let highlightMatches = true;
-export let id = null;
-export let input = null;
-export let inputClass = ``;
-export let inputStyle = null;
-export let inputmode = null;
-export let invalid = false;
-export let liSelectedClass = ``;
-export let liSelectedStyle = null;
-export let loading = false;
-export let matchingOptions = [];
-export let maxSelect = null; // null means there is no upper limit for selected.length
-export let name = null;
-export let noMatchingOptionsMsg = `No matching options`;
-export let open = false;
-export let options;
-export let outerDiv = null;
-export let outerDivClass = ``;
-export let parseLabelsAsHtml = false; // should not be combined with allowUserOptions!
-export let pattern = null;
-export let placeholder = null;
-export let removeAllTitle = `Remove all`;
-export let removeBtnTitle = `Remove`;
-export let minSelect = null; // null means there is no lower limit for selected.length
-export let required = false;
-export let resetFilterOnAdd = true;
-export let searchText = ``;
-export let selected = options
-    ?.filter((opt) => opt instanceof Object && opt?.preselected)
-    .slice(0, maxSelect ?? undefined) ?? []; // don't allow more than maxSelect preselected options
-export let sortSelected = false;
-export let selectedOptionsDraggable = !sortSelected;
-export let style = null;
-export let ulSelectedClass = ``;
-export let ulSelectedStyle = null;
-export let value = null;
-export let disableRemoveAll = false;
-const selected_to_value = (selected) => {
-    value = maxSelect === 1 ? (selected[0] ?? null) : selected;
-};
-const value_to_selected = (value) => {
-    if (maxSelect === 1)
-        selected = value ? [value] : [];
-    else
-        selected = value ?? [];
-};
-// if maxSelect=1, value is the single item in selected (or null if selected is empty)
-// this solves both https://github.com/janosh/svelte-multiselect/issues/86 and
-// https://github.com/janosh/svelte-multiselect/issues/136
-$: selected_to_value(selected);
-$: value_to_selected(value);
-const dispatch = createEventDispatcher();
-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((opt) => filterFunc(opt, searchText) &&
-    // remove already selected options from dropdown list unless duplicate selections are allowed
-    (!selected.map(key).includes(key(opt)) || duplicates));
-// raise if matchingOptions[activeIndex] does not yield a value
-if (activeIndex !== null && !matchingOptions[activeIndex]) {
-    throw `Run time error, activeIndex=${activeIndex} is out of bounds, matchingOptions.length=${matchingOptions.length}`;
-}
-// update activeOption when activeIndex changes
-$: activeOption = matchingOptions?.[activeIndex ?? -1] ?? null;
-// add an option to selected list
-function add(option, event) {
-    if (maxSelect && maxSelect > 1 && selected.length >= maxSelect) {
-        return;
-    }
-    if (!isNaN(Number(option)) && typeof selected.map(get_label)[0] === `number`) {
-        option = Number(option); // convert to number if possible
-    }
-    const is_duplicate = selected.map(key).includes(key(option));
-    if ((maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
-        (duplicates || !is_duplicate)) {
-        if (
-        // @ts-ignore
-        !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) {
-            // 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] === `object`) {
-                // if 1st option is an object, we create new option as object to keep type homogeneity
-                option = { label: 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
-                }
-                // @ts-ignore
-                dispatch(`create`, { option });
-            }
-            // @ts-ignore
-            if (allowUserOptions === `append`)
-                options = [...options, option];
-        }
-        if (resetFilterOnAdd)
-            searchText = ``; // reset search string on selection
-        if ([``, undefined, null].includes(option)) {
-            console.error(`MultiSelect: encountered falsy option ${option}`);
-            return;
-        }
-        if (maxSelect === 1) {
-            // for maxSelect = 1 we always replace current option with new one
-            // @ts-ignore
-            selected = [option];
-        }
-        else {
-            // @ts-ignore
-            selected = [...selected, option];
-            if (sortSelected === true) {
-                selected = selected.sort((op1, op2) => {
-                    const [label1, label2] = [get_label(op1), get_label(op2)];
-                    // coerce to string if labels are numbers
-                    return `${label1}`.localeCompare(`${label2}`);
-                });
-            }
-            else if (typeof sortSelected === `function`) {
-                selected = selected.sort(sortSelected);
-            }
-        }
-        const reached_max_select = selected.length === maxSelect;
-        const dropdown_should_close = closeDropdownOnSelect === true ||
-            (closeDropdownOnSelect === `desktop` && window_width < breakpoint);
-        if (reached_max_select || dropdown_should_close) {
-            close_dropdown(event);
-        }
-        else if (!dropdown_should_close) {
-            input?.focus();
-        }
-        // @ts-ignore
-        dispatch(`add`, { option });
-        // @ts-ignore
-        dispatch(`change`, { option, type: `add` });
-        invalid = false; // reset error status whenever new items are selected
-        form_input?.setCustomValidity(``);
-    }
-}
-// remove an option from selected list
-function remove(to_remove) {
-    if (selected.length === 0)
-        return;
-    const idx = selected.findIndex((opt) => key(opt) === key(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
-        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 ${JSON.stringify(to_remove)}, not found in selected list`);
-    }
-    selected = [...selected]; // trigger Svelte rerender
-    invalid = false; // reset error status whenever items are removed
-    form_input?.setCustomValidity(``);
-    dispatch(`remove`, { option });
-    dispatch(`change`, { option, type: `remove` });
-}
-function open_dropdown(event) {
-    if (disabled)
-        return;
-    open = true;
-    if (!(event instanceof FocusEvent)) {
-        // avoid double-focussing input when event that opened dropdown was already input FocusEvent
-        input?.focus();
-    }
-    dispatch(`open`, { event });
-}
-function close_dropdown(event) {
-    open = false;
-    input?.blur();
-    activeIndex = null;
-    dispatch(`close`, { event });
-}
-// handle all keyboard events this component receives
-async function handle_keydown(event) {
-    // on escape or tab out of input: close options dropdown and reset search text
-    if (event.key === `Escape` || event.key === `Tab`) {
-        close_dropdown(event);
-        searchText = ``;
-    }
-    // on enter key: toggle active option and reset search text
-    else if (event.key === `Enter`) {
-        event.preventDefault(); // prevent enter key from triggering form submission
-        if (activeOption) {
-            selected.includes(activeOption) ? remove(activeOption) : add(activeOption, event);
-            searchText = ``;
-        }
-        else if (allowUserOptions && searchText.length > 0) {
-            // user entered text but no options match, so if allowUserOptions is truthy, we create new option
-            add(searchText, event);
-        }
-        // no active option and no search text means the options dropdown is closed
-        // in which case enter means open it
-        else
-            open_dropdown(event);
-    }
-    // on up/down arrow keys: update active option
-    else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
-        // if no option is active yet, but there are matching options, make first one active
-        if (activeIndex === null && matchingOptions.length > 0) {
-            activeIndex = 0;
-            return;
-        }
-        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)
-            option_msg_is_active = !option_msg_is_active;
-            return;
-        }
-        else if (activeIndex === null) {
-            // if no option is active and no options are matching, do nothing
-            return;
-        }
-        event.preventDefault();
-        // if none of the above special cases apply, we make next/prev option
-        // active with wrap around at both ends
-        const increment = event.key === `ArrowUp` ? -1 : 1;
-        activeIndex = (activeIndex + increment) % matchingOptions.length;
-        // in JS % behaves like remainder operator, not real modulo, so negative numbers stay negative
-        // need to do manual wrap around at 0
-        if (activeIndex < 0)
-            activeIndex = matchingOptions.length - 1;
-        if (autoScroll) {
-            await tick();
-            const li = document.querySelector(`ul.options > li.active`);
-            if (li)
-                scroll_into_view_if_needed_polyfill(li);
-        }
-    }
-    // on backspace key: remove last selected option
-    else if (event.key === `Backspace` && selected.length > 0 && !searchText) {
-        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) {
-        activeIndex = 0;
-    }
-}
-function remove_all() {
-    dispatch(`removeAll`, { options: selected });
-    dispatch(`change`, { options: selected, type: `removeAll` });
-    selected = [];
-    searchText = ``;
-}
-$: is_selected = (label) => selected.map(get_label).includes(label);
-const if_enter_or_space = (handler) => (event) => {
-    if ([`Enter`, `Space`].includes(event.code)) {
-        event.preventDefault();
-        handler();
-    }
-};
-function on_click_outside(event) {
-    if (outerDiv && !outerDiv.contains(event.target)) {
-        close_dropdown(event);
-    }
-}
-let drag_idx = null;
-// event handlers enable dragging to reorder selected options
-const drop = (target_idx) => (event) => {
-    if (!event.dataTransfer)
-        return;
-    event.dataTransfer.dropEffect = `move`;
-    const start_idx = parseInt(event.dataTransfer.getData(`text/plain`));
-    const new_selected = [...selected];
-    if (start_idx < target_idx) {
-        new_selected.splice(target_idx + 1, 0, new_selected[start_idx]);
-        new_selected.splice(start_idx, 1);
-    }
-    else {
-        new_selected.splice(target_idx, 0, new_selected[start_idx]);
-        new_selected.splice(start_idx + 1, 1);
-    }
-    selected = new_selected;
-    drag_idx = null;
-};
-const dragstart = (idx) => (event) => {
-    if (!event.dataTransfer)
-        return;
-    // only allow moving, not copying (also affects the cursor during drag)
-    event.dataTransfer.effectAllowed = `move`;
-    event.dataTransfer.dropEffect = `move`;
-    event.dataTransfer.setData(`text/plain`, `${idx}`);
-};
-let ul_options;
-// highlight text matching user-entered search text in available options
-function highlight_matching_options(event) {
-    // @ts-ignore
-    if (!highlightMatches || !ul_options || typeof CSS == `undefined` || !CSS.highlights)
-        return; // abort if CSS highlight API not supported
-    // clear previous ranges from HighlightRegistry
-    // @ts-ignore
-    CSS.highlights.clear();
-    // get input's search query
-    const query = event?.target?.value.trim().toLowerCase();
-    if (!query)
-        return;
-    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) {
-        text_nodes.push(current_node);
-        current_node = tree_walker.nextNode();
-    }
-    // iterate over all text nodes and find matches
-    const ranges = text_nodes.map((el) => {
-        const text = el.textContent?.toLowerCase();
-        const indices = [];
-        let start_pos = 0;
-        while (text && start_pos < text.length) {
-            const index = text.indexOf(query, start_pos);
-            if (index === -1)
-                break;
-            indices.push(index);
-            start_pos = index + query.length;
-        }
-        // create range object for each str found in the text node
-        return indices.map((index) => {
-            const range = new Range();
-            range.setStart(el, index);
-            range.setEnd(el, index + query.length);
-            return range;
-        });
-    });
-    // create Highlight object from ranges and add to registry
-    // @ts-ignore
-    CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat()));
-}
-// reset form validation when required prop changes
-// https://github.com/janosh/svelte-multiselect/issues/285
-$: required, form_input?.setCustomValidity(``);
-</script>
-
-<svelte:window
-	on:click={on_click_outside}
-	on:touchstart={on_click_outside}
-	bind:innerWidth={window_width}
-/>
-
-<div
-	bind:this={outerDiv}
-	class:disabled
-	class:single={maxSelect === 1}
-	class:open
-	class:invalid
-	class="multiselect {outerDivClass}"
-	on:mouseup|stopPropagation={open_dropdown}
-	title={disabled ? disabledInputTitle : null}
-	data-id={id}
-	role="searchbox"
-	tabindex="-1"
-	{style}
->
-	<!-- form control input invisible to the user, only purpose is to abort form submission if this component fails data validation -->
-	<!-- bind:value={selected} prevents form submission if required prop is true and no options are selected -->
-	<input
-		{name}
-		{required}
-		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"
-		class="form-control"
-		bind:this={form_input}
-		on:invalid={() => {
-			invalid = true
-			let msg
-			if (maxSelect && maxSelect > 1 && Number(required) > 1) {
-				msg = `Please select between ${required} and ${maxSelect} options`
-			} else if (Number(required) > 1) {
-				msg = `Please select at least ${required} options`
-			} else {
-				msg = `Please select an option`
-			}
-			form_input?.setCustomValidity(msg)
-		}}
-	/>
-	<slot name="expand-icon" {open}>
-		<ChevronsUpDown size={16} />
-	</slot>
-	<ul class="selected {ulSelectedClass}" aria-label="selected options" style={ulSelectedStyle}>
-		{#each selected as option, idx (duplicates ? [key(option), idx] : key(option))}
-			<li
-				class={liSelectedClass}
-				role="option"
-				aria-selected="true"
-				animate:flip={{ duration: 100 }}
-				draggable={selectedOptionsDraggable && !disabled && selected.length > 1}
-				on:dragstart={dragstart(idx)}
-				on:drop|preventDefault={drop(idx)}
-				on:dragenter={() => (drag_idx = idx)}
-				on:dragover|preventDefault
-				class:active={drag_idx === idx}
-				style="{get_style(option, `selected`)} {liSelectedStyle}"
-			>
-				<!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
-				<slot name="selected" {option} {idx}>
-					<slot {option} {idx}>
-						{#if parseLabelsAsHtml}
-							{@html get_label(option)}
-						{:else}
-							{get_label(option)}
-						{/if}
-					</slot>
-				</slot>
-				{#if !disabled && (minSelect === null || selected.length > minSelect)}
-					<button
-						on:mouseup|stopPropagation={() => remove(option)}
-						on:keydown={if_enter_or_space(() => remove(option))}
-						type="button"
-						title="{removeBtnTitle} {get_label(option)}"
-						class="remove"
-					>
-						<slot name="remove-icon">
-							<X size={20} class="text-primary dark:text-primary-inverse p-0.5" />
-						</slot>
-					</button>
-				{/if}
-			</li>
-		{/each}
-		<input
-			class={inputClass}
-			style={inputStyle}
-			bind:this={input}
-			bind:value={searchText}
-			on:mouseup|self|stopPropagation={(e) => open_dropdown(e)}
-			on:keydown|stopPropagation={(e) => handle_keydown(e)}
-			on:focus={(e) => open_dropdown(e)}
-			on:input={(e) => highlight_matching_options(e)}
-			{id}
-			{disabled}
-			{autocomplete}
-			{inputmode}
-			{pattern}
-			placeholder={selected.length === 0 ? placeholder : undefined}
-			aria-invalid={invalid ? 'true' : undefined}
-			on:blur
-			on:change
-			on:click
-			on:keydown
-			on:keyup
-			on:mousedown
-			on:mouseenter
-			on:mouseleave
-			on:touchcancel
-			on:touchend
-			on:touchmove
-			on:touchstart
-		/>
-
-		<!-- the above on:* lines forward potentially useful DOM events -->
-		<slot name="after-input" {selected} {disabled} {invalid} {id} {placeholder} {open} {required} />
-	</ul>
-	{#if loading}
-		<slot name="spinner">spinner</slot>
-	{/if}
-	{#if disabled}
-		<slot name="disabled-icon">disable</slot>
-	{:else if selected.length > 0}
-		{#if maxSelect !== 1 && selected.length > 1 && !disableRemoveAll}
-			<button
-				type="button"
-				class="remove remove-all"
-				title={removeAllTitle}
-				on:mouseup|stopPropagation={remove_all}
-				on:keydown={if_enter_or_space(remove_all)}
-			>
-				<slot name="remove-icon">
-					<X
-						size={24}
-						class="text-secondary p-1 rounded-full bg-surface hover:bg-surface-secondary"
-					/>
-				</slot>
-			</button>
-		{/if}
-	{/if}
-	<!-- only render options dropdown if options or searchText is not empty (needed to avoid briefly flashing empty dropdown) -->
-	{#if allowUserOptions || (searchText && noMatchingOptionsMsg) || options?.length > 0}
-		<div class="options bg-surface shadow-md rounded-component">
-			<VirtualList
-				width="100%"
-				height={Math.min(32 * matchingOptions.length, 320)}
-				itemCount={matchingOptions.length}
-				itemSize={32}
-			>
-				<div slot="item" let:index let:style {style}>
-					{@const option = matchingOptions[index]}
-					{@const {
-						label,
-						disabled = null,
-						title = null,
-						selectedTitle = null,
-						disabledTitle = defaultDisabledTitle
-					} = option instanceof Object ? option : { label: option }}
-
-					<!-- svelte-ignore a11y-interactive-supports-focus -->
-					<div
-						on:mousedown|stopPropagation
-						on:mouseup|stopPropagation={(event) => {
-							if (!disabled) add(option, event)
-						}}
-						title={disabled ? disabledTitle : (is_selected(label) && selectedTitle) || title}
-						class={twMerge('hover:bg-blue-100 hover:dark:bg-gray-900 cursor-pointer  !px-2 py-1')}
-						on:mouseover={() => {
-							if (!disabled) activeIndex = index
-						}}
-						on:focus={() => {
-							if (!disabled) activeIndex = index
-						}}
-						on:mouseout={() => (activeIndex = null)}
-						on:blur={() => (activeIndex = null)}
-						role="option"
-						aria-selected="false"
-						style={get_style(option, `option`)}
-					>
-						<slot name="option" {option} {index}>
-							<slot {option} {index}>
-								{#if parseLabelsAsHtml}
-									{@html get_label(option)}
-								{:else}
-									{get_label(option)}
-								{/if}
-							</slot>
-						</slot>
-					</div>
-				</div>
-				<div slot="footer" class="h-0"></div>
-			</VirtualList>
-			{#if searchText}
-				{@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
-				{@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
-				{@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
-				{@const no_match =
-					Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) && `no-match`}
-				{@const msgType = is_dupe || can_create || no_match}
-				{#if msgType}
-					{@const msg = {
-						dupe: duplicateOptionMsg,
-						create: createOptionMsg,
-						'no-match': noMatchingOptionsMsg
-					}[msgType]}
-					<!-- svelte-ignore a11y-interactive-supports-focus -->
-					<div
-						on:mousedown|stopPropagation
-						on:mouseup|stopPropagation={(event) => {
-							if (allowUserOptions) add(searchText, event)
-						}}
-						title={createOptionMsg}
-						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)}
-						role="option"
-						aria-selected="false"
-						class="user-msg p-1"
-						style:cursor={{
-							dupe: `not-allowed`,
-							create: `pointer`,
-							'no-match': `default`
-						}[msgType]}
-					>
-						<slot name="user-msg" {searchText} {msgType} {msg}>
-							{msg}
-						</slot>
-					</div>
-				{/if}
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	:where(div.multiselect) {
-		position: relative;
-		align-items: center;
-		display: flex;
-		cursor: text;
-		box-sizing: border-box;
-		border: var(--sms-border, 1pt solid lightgray);
-		border-radius: var(--sms-border-radius, 3pt);
-		background: var(--sms-bg);
-		width: var(--sms-width);
-		max-width: var(--sms-max-width);
-		padding: var(--sms-padding, 0 3pt);
-		color: var(--sms-text-color);
-		font-size: var(--sms-font-size, inherit);
-		min-height: var(--sms-min-height, 22pt);
-		margin: var(--sms-margin);
-	}
-	:where(div.multiselect.open) {
-		/* increase z-index when open to ensure the dropdown of one <MultiSelect />
-    displays above that of another slightly below it on the page */
-		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));
-	}
-	:where(div.multiselect.disabled) {
-		background: var(--sms-disabled-bg, lightgray);
-		cursor: not-allowed;
-	}
-
-	: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: 3pt;
-		display: flex;
-		margin: 2pt;
-		line-height: normal;
-		transition: 0.3s;
-		white-space: nowrap;
-		background: var(--sms-selected-bg, rgba(0, 0, 0, 0.15));
-		padding: var(--sms-selected-li-padding, 1pt 5pt);
-		color: var(--sms-selected-text-color, var(--sms-text-color));
-	}
-	:where(div.multiselect > ul.selected > li[draggable='true']) {
-		cursor: grab;
-	}
-	:where(div.multiselect > ul.selected > li.active) {
-		background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
-	}
-	:where(div.multiselect button) {
-		border-radius: 50%;
-		display: flex;
-		transition: 0.2s;
-		color: inherit;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		outline: none;
-		padding: 0;
-		margin: 0 0 0 3pt; /* CSS reset */
-	}
-	:where(div.multiselect button.remove-all) {
-		margin: 0 3pt;
-	}
-	:where(ul.selected > li button:hover, button.remove-all:hover, button:focus) {
-		color: var(--sms-remove-btn-hover-color, lightskyblue);
-		background: var(--sms-remove-btn-hover-bg, rgba(0, 0, 0, 0.2));
-	}
-
-	:where(div.multiselect input) {
-		margin: auto 0; /* CSS reset */
-		padding: 0; /* CSS reset */
-	}
-	:where(div.multiselect > ul.selected > input) {
-		border: none;
-		outline: none;
-		background: none;
-		flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
-		min-width: 2em;
-		/* 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 */
-	}
-	/* don't wrap ::placeholder rules in :where() as it seems to be overpowered by browser defaults i.t.o. specificity */
-	div.multiselect > ul.selected > input::-moz-placeholder {
-		padding-left: 5pt;
-		color: var(--sms-placeholder-color);
-		opacity: var(--sms-placeholder-opacity);
-	}
-	div.multiselect > ul.selected > input::placeholder {
-		padding-left: 5pt;
-		color: var(--sms-placeholder-color);
-		opacity: var(--sms-placeholder-opacity);
-	}
-	:where(div.multiselect > input.form-control) {
-		width: 2em;
-		position: absolute;
-		background: transparent;
-		border: none;
-		outline: none;
-		z-index: -1;
-		opacity: 0;
-		pointer-events: none;
-	}
-
-	:where(div.multiselect > ul.options) {
-		list-style: none;
-		top: 100%;
-		left: 0;
-		width: 100%;
-		position: absolute;
-		overflow: auto;
-		transition: all 0.2s;
-		box-sizing: border-box;
-		background: var(--sms-options-bg, white);
-		max-height: var(--sms-options-max-height, 50vh);
-		overscroll-behavior: var(--sms-options-overscroll, none);
-		border: var(--sms-options-border);
-		border-width: var(--sms-options-border-width);
-		border-radius: var(--sms-options-border-radius, 1ex);
-		padding: var(--sms-options-padding);
-		margin: var(--sms-options-margin, inherit);
-	}
-	:where(div.multiselect > ul.options.hidden) {
-		visibility: hidden;
-		opacity: 0;
-		transform: translateY(50px);
-	}
-	:where(div.multiselect > ul.options > li) {
-		padding: 3pt 2ex;
-		cursor: pointer;
-		scroll-margin: var(--sms-options-scroll-margin, 100px);
-	}
-	: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) {
-		background: var(--sms-li-selected-bg);
-		color: var(--sms-li-selected-color);
-	}
-	:where(div.multiselect > ul.options > li.active) {
-		background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
-	}
-	:where(div.multiselect > ul.options > li.disabled) {
-		cursor: not-allowed;
-		background: var(--sms-li-disabled-bg, #f5f5f6);
-		color: var(--sms-li-disabled-text, #b8b8b8);
-	}
-
-	::highlight(sms-search-matches) {
-		color: mediumaquamarine;
-	}</style>