svelte-multiselect 8.6.1 → 9.0.0

package/dist/CmdPalette.svelte

@@ -2,26 +2,26 @@
 // https://github.com/sveltejs/eslint-plugin-svelte3/issues/201
 import { tick } from 'svelte';
 import { fade } from 'svelte/transition';
-import Select from '.';
+import Select from './MultiSelect.svelte';
 export let actions;
-export let trigger = `k`;
+export let triggers = [`k`];
+export let close_keys = [`Escape`];
 export let fade_duration = 200; // in ms
 export let style = ``; // for dialog
-// for span in option slot, has no effect when passing slot="option"
+// for span in option slot, has no effect when passing a slot
 export let span_style = ``;
 export let open = false;
 export let dialog = null;
 export let input = null;
 export let placeholder = `Filter actions...`;
 async function toggle(event) {
-    if (event.key === trigger && event.metaKey && !open) {
+    if (triggers.includes(event.key) && event.metaKey && !open) {
         // open on cmd+trigger
         open = true;
         await tick(); // wait for dialog to open and input to be mounted
         input?.focus();
     }
-    else if (event.key === `Escape` && open) {
-        // close on escape
+    else if (close_keys.includes(event.key) && open) {
         open = false;
     }
 }
@@ -39,22 +39,18 @@ function run_and_close(event) {
 <svelte:window on:keydown={toggle} on:click={close_if_outside} />
 
 {#if open}
-  <dialog
-    class:open
-    bind:this={dialog}
-    transition:fade={{ duration: fade_duration }}
-    {style}
-  >
+  <dialog open bind:this={dialog} transition:fade={{ duration: fade_duration }} {style}>
     <Select
       options={actions}
       bind:input
       {placeholder}
       on:add={run_and_close}
       on:keydown={toggle}
-      {...$$props}
+      {...$$restProps}
+      let:option
     >
       <!-- wait for https://github.com/sveltejs/svelte/pull/8304 -->
-      <slot slot="option" name="option" let:option>
+      <slot>
         <span style={span_style}>{option.label}</span>
       </slot>
     </Select>

package/dist/CmdPalette.svelte.d.ts

@@ -6,7 +6,8 @@ declare const __propDef: {
             label: string;
             action: () => void;
         }[];
-        trigger?: string | undefined;
+        triggers?: string[] | undefined;
+        close_keys?: string[] | undefined;
         fade_duration?: number | undefined;
         style?: string | undefined;
         span_style?: string | undefined;
@@ -19,9 +20,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        option: {
-            slot: string;
-        };
+        default: {};
     };
 };
 export type CmdPaletteProps = typeof __propDef.props;

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`);
@@ -103,8 +104,8 @@ 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.`);
 }
-if (allowUserOptions && !createOptionMsg) {
-    console.error(`MultiSelect's allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
+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();
@@ -190,20 +191,22 @@ function add(option, 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 });
@@ -336,6 +339,7 @@ const dragstart = (idx) => (event) => {
     event.dataTransfer.setData(`text/plain`, `${idx}`);
 };
 let ul_options;
+// highlight text matching user-entered search text in available options
 function highlight_matching_options(event) {
     if (!highlightMatches || typeof CSS == `undefined` || !CSS.highlights)
         return; // don't try if CSS highlight API not supported
@@ -401,6 +405,8 @@ function highlight_matching_options(event) {
   on:mouseup|stopPropagation={open_dropdown}
   title={disabled ? disabledInputTitle : null}
   data-id={id}
+  role="searchbox"
+  tabindex="-1"
 >
   <!-- bind:value={selected} prevents form submission if required prop is true and no options are selected -->
   <input
@@ -432,6 +438,8 @@ function highlight_matching_options(event) {
     {#each selected as option, idx (option)}
       <li
         class={liSelectedClass}
+        role="option"
+        aria-selected="true"
         animate:flip={{ duration: 100 }}
         draggable={selectedOptionsDraggable && !disabled && selected.length > 1}
         on:dragstart={dragstart(idx)}
@@ -442,10 +450,13 @@ function highlight_matching_options(event) {
       >
         <!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
         <slot name="selected" {option} {idx}>
-          {#if parseLabelsAsHtml}
-            {@html get_label(option)}
-          {:else}
-            {get_label(option)}{/if}
+          <slot {option} {idx}>
+            {#if parseLabelsAsHtml}
+              {@html get_label(option)}
+            {:else}
+              {get_label(option)}
+            {/if}
+          </slot>
         </slot>
         {#if !disabled && (minSelect === null || selected.length > minSelect)}
           <button
@@ -528,7 +539,15 @@ function highlight_matching_options(event) {
 
   <!-- only render options dropdown if options or searchText is not empty needed to avoid briefly flashing empty dropdown -->
   {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}
-    <ul class:hidden={!open} class="options {ulOptionsClass}" bind:this={ul_options}>
+    <ul
+      class:hidden={!open}
+      class="options {ulOptionsClass}"
+      role="listbox"
+      aria-multiselectable={maxSelect === null || maxSelect > 1}
+      aria-expanded={open}
+      aria-disabled={disabled ? `true` : null}
+      bind:this={ul_options}
+    >
       {#each matchingOptions as option, idx}
         {@const {
           label,
@@ -558,13 +577,17 @@ function highlight_matching_options(event) {
           }}
           on:mouseout={() => (activeIndex = null)}
           on:blur={() => (activeIndex = null)}
+          role="option"
+          aria-selected="false"
         >
           <slot name="option" {option} {idx}>
-            {#if parseLabelsAsHtml}
-              {@html get_label(option)}
-            {:else}
-              {get_label(option)}
-            {/if}
+            <slot {option} {idx}>
+              {#if parseLabelsAsHtml}
+                {@html get_label(option)}
+              {:else}
+                {get_label(option)}
+              {/if}
+            </slot>
           </slot>
         </li>
       {:else}
@@ -583,6 +606,8 @@ function highlight_matching_options(event) {
             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"
           >
             {msg}

package/dist/MultiSelect.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Option as GenericOption, MultiSelectEvents } 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(): {
@@ -64,6 +65,10 @@ declare class __sveltets_Render<Option extends GenericOption> {
             option: Option;
             idx: any;
         };
+        default: {
+            option: Option;
+            idx: any;
+        };
         'remove-icon': {};
         spinner: {};
         'disabled-icon': {};
@@ -73,9 +78,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

@@ -2,55 +2,5 @@ export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.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

@@ -2,6 +2,7 @@ export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
 export { default as MultiSelect, default } from './MultiSelect.svelte';
 export { default as Wiggle } from './Wiggle.svelte';
+export * from './types';
 // Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
 // See https://github.com/janosh/svelte-multiselect/issues/87
 // Polyfill copied from

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.1",
+  "version": "9.0.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -19,41 +19,41 @@
     "test": "vitest --run --coverage tests/unit/*.ts && playwright test tests/*.test.ts",
     "test:unit": "vitest tests/unit/*.ts",
     "test:e2e": "playwright test tests/*.test.ts",
-    "changelog": "npx auto-changelog --package --output changelog.md --unreleased-only --hide-credit --commit-limit false",
+    "changelog": "npx auto-changelog --package --output changelog.md --hide-empty-releases --hide-credit --commit-limit false",
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^3.58.0"
+    "svelte": "^4.0.0-next.0"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.1.3",
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.34.3",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.15.9",
+    "@sveltejs/kit": "^1.19.0",
     "@sveltejs/package": "2.0.2",
-    "@sveltejs/vite-plugin-svelte": "^2.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "@vitest/coverage-c8": "^0.30.1",
-    "eslint": "^8.39.0",
+    "@sveltejs/vite-plugin-svelte": "1.0.0-next.29",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "@vitest/coverage-c8": "^0.31.1",
+    "eslint": "^8.41.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
     "highlight.js": "^11.8.0",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.2.0",
+    "svelte-check": "^3.4.2",
     "svelte-preprocess": "^5.0.3",
     "svelte-toc": "^0.5.5",
-    "svelte-zoo": "^0.4.5",
-    "svelte2tsx": "^0.6.11",
+    "svelte-zoo": "^0.4.6",
+    "svelte2tsx": "^0.6.15",
     "typescript": "5.0.4",
-    "vite": "^4.3.3",
-    "vitest": "^0.30.1"
+    "vite": "^4.3.9",
+    "vitest": "^0.31.1"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -36,22 +36,34 @@
 
 ## 🧪   Coverage
 
-| Statements                                                                                 | Branches                                                                             | Lines                                                                            |
-| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
-| ![Statements](https://img.shields.io/badge/statements-92.95%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-92.95%25-brightgreen.svg?style=flat) |
+| Statements                                                                                 | Branches                                                                       | Lines                                                                            |
+| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+| ![Statements](https://img.shields.io/badge/statements-97.94%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-79.39%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-97.94%25-brightgreen.svg?style=flat) |
 
 ## 📜   Breaking changes
 
-- **8.0.0** 
+- **8.0.0** (2022-10-22) 
   - Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)` if your options were objects with `label` and `value` keys. If they were simple strings/numbers, there was no point in using `selected{Labels,Values}` anyway. [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
   - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
-- **v8.3.0**  `addOptionMsg` was renamed to `createOptionMsg` (no major since version since it's rarely used) [sha](https://github.com/janosh/svelte-multiselect/commits).
+- **v8.3.0** (2023-01-25)  `addOptionMsg` was renamed to `createOptionMsg` (no major since version since it's rarely used) [sha](https://github.com/janosh/svelte-multiselect/commits).
+- **v9.0.0** (2023-06-01)  Svelte bumped from v3 to v4. Also, not breaking but noteworthy: MultiSelect received a default slot that functions as both `"option"` and `"selected"`. If you previously had two identical slots for `"option"` and `"selected"`, you can now remove the `name` from one of them and drop the other:
+
+  ```diff
+  <MultiSelect
+    {options}
+  + let:option
+  >
+  - <SlotComponent let:option {option} slot="selected" />
+  - <SlotComponent let:option {option} slot="option" />
+  + <SlotComponent {option} />
+  </MultiSelect>
+  ```
 
 ## 🔨 &thinsp; Installation
 
 ```sh
 npm install --dev svelte-multiselect
-pnpm add --dev svelte-multiselect
+pnpm add -D svelte-multiselect
 yarn add --dev svelte-multiselect
 ```
 
@@ -90,10 +102,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 +158,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 +201,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(sms-search-matches)` 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](https://caniuse.com/mdn-api_css_highlights) (70% as of May 2023) 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
@@ -375,14 +387,9 @@ Full list of props/bindable variables for this component. The `Option` type you
 Example:
 
 ```svelte
-<MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]}>
-  <span let:idx let:option slot="option">
-    {idx + 1}
-    {option.label}
-    <span style:background={option.label} style=" width: 1em; height: 1em;" />
-  </span>
-
-  <span let:idx let:option slot="selected">
+<MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]} let:idx let:option>
+   <!-- default slot overrides rendering of both dropdown-listed and selected options -->
+  <span>
     {idx + 1}
     {option.label}
     <span style:background={option.label} style=" width: 1em; height: 1em;" />