svelte-multiselect 8.0.4 → 8.2.0

package/CircleSpinner.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CircleSpinnerProps = typeof __propDef.props;
-export declare type CircleSpinnerEvents = typeof __propDef.events;
-export declare type CircleSpinnerSlots = typeof __propDef.slots;
+export type CircleSpinnerProps = typeof __propDef.props;
+export type CircleSpinnerEvents = typeof __propDef.events;
+export type CircleSpinnerSlots = typeof __propDef.slots;
 export default class CircleSpinner extends SvelteComponentTyped<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
 }
 export {};

package/MultiSelect.svelte

@@ -1,4 +1,5 @@
 <script>import { createEventDispatcher, tick } from 'svelte';
+import { flip } from 'svelte/animate';
 import CircleSpinner from './CircleSpinner.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
 import Wiggle from './Wiggle.svelte';
@@ -22,6 +23,7 @@ export let filterFunc = (op, searchText) => {
     return `${get_label(op)}`.toLowerCase().includes(searchText.toLowerCase());
 };
 export let focusInputOnSelect = `desktop`;
+export let form_input = null;
 export let id = null;
 export let input = null;
 export let inputClass = ``;
@@ -32,8 +34,9 @@ export let liOptionClass = ``;
 export let liSelectedClass = ``;
 export let loading = false;
 export let matchingOptions = [];
-export let maxSelect = null; // null means any number of options are selectable
+export let maxSelect = null; // null means there is no upper limit for selected.length
 export let maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``);
+export let maxSelectMsgClass = ``;
 export let name = null;
 export let noMatchingOptionsMsg = `No matching options`;
 export let open = false;
@@ -45,12 +48,14 @@ 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((op) => op?.preselected)
     .slice(0, maxSelect ?? undefined) ?? [];
+export let selectedOptionsDraggable = true;
 export let sortSelected = false;
 export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
@@ -76,10 +81,13 @@ 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}`);
+    console.error(`MultiSelect's maxSelect must be null or positive integer, got ${maxSelect}`);
 }
 if (!Array.isArray(selected)) {
-    console.error(`internal variable selected prop should always be an array, got ${selected}`);
+    console.error(`MultiSelect's selected prop should always be an array, got ${selected}`);
+}
+if (maxSelect && typeof required === `number` && required > maxSelect) {
+    console.error(`MultiSelect maxSelect=${maxSelect} < required=${required}, makes it impossible for users to submit a valid form`);
 }
 const dispatch = createEventDispatcher();
 let add_option_msg_is_active = false; // controls active state of <li>{addOptionMsg}</li>
@@ -161,6 +169,7 @@ function add(label, event) {
         dispatch(`add`, { option });
         dispatch(`change`, { option, type: `add` });
         invalid = false; // reset error status whenever new items are selected
+        form_input?.setCustomValidity(``);
     }
 }
 // remove an option from selected list
@@ -180,6 +189,7 @@ function remove(label) {
     dispatch(`remove`, { option });
     dispatch(`change`, { option, type: `remove` });
     invalid = false; // reset error status whenever items are removed
+    form_input?.setCustomValidity(``);
 }
 function open_dropdown(event) {
     if (disabled)
@@ -276,6 +286,33 @@ function on_click_outside(event) {
         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}`);
+};
 </script>
 
 <svelte:window
@@ -296,22 +333,45 @@ function on_click_outside(event) {
   on:mouseup|stopPropagation={open_dropdown}
   title={disabled ? disabledInputTitle : null}
   aria-disabled={disabled ? `true` : null}
+  data-id={id}
 >
   <!-- bind:value={selected} prevents form submission if required prop is true and no options are selected -->
   <input
-    {required}
     {name}
-    value={selected.length > 0 ? JSON.stringify(selected) : null}
+    required={Boolean(required)}
+    value={selected.length >= 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"
-    on:invalid={() => (invalid = true)}
+    bind:this={form_input}
+    on:invalid={() => {
+      invalid = true
+      let msg
+      if (maxSelect && maxSelect > 1 && required > 1) {
+        msg = `Please select between ${required} and ${maxSelect} options`
+      } else if (required > 1) {
+        msg = `Please select at least ${required} options`
+      } else {
+        msg = `Please select an option`
+      }
+      form_input?.setCustomValidity(msg)
+    }}
   />
   <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt;" />
   <ul class="selected {ulSelectedClass}">
-    {#each selected as option, idx}
-      <li class={liSelectedClass} aria-selected="true">
+    {#each selected as option, idx (get_label(option))}
+      <li
+        class={liSelectedClass}
+        aria-selected="true"
+        animate:flip={{ duration: 100 }}
+        draggable={selectedOptionsDraggable}
+        on:dragstart={dragstart(idx)}
+        on:drop|preventDefault={drop(idx)}
+        on:dragenter={() => (drag_idx = idx)}
+        class:active={drag_idx === idx}
+        ondragover="return false"
+      >
         <slot name="selected" {option} {idx}>
           {#if parseLabelsAsHtml}
             {@html get_label(option)}
@@ -319,7 +379,7 @@ function on_click_outside(event) {
             {get_label(option)}
           {/if}
         </slot>
-        {#if !disabled}
+        {#if !disabled && (minSelect === null || selected.length > minSelect)}
           <button
             on:mouseup|stopPropagation={() => remove(get_label(option))}
             on:keydown={if_enter_or_space(() => remove(get_label(option)))}
@@ -333,38 +393,37 @@ function on_click_outside(event) {
         {/if}
       </li>
     {/each}
-    <li style="display: contents;">
-      <input
-        class={inputClass}
-        bind:this={input}
-        {autocomplete}
-        bind:value={searchText}
-        on:mouseup|self|stopPropagation={open_dropdown}
-        on:keydown|stopPropagation={handle_keydown}
-        on:focus
-        on:focus={open_dropdown}
-        {id}
-        {disabled}
-        {inputmode}
-        {pattern}
-        placeholder={selected.length == 0 ? placeholder : null}
-        aria-invalid={invalid ? `true` : null}
-        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 -->
-    </li>
+    <input
+      class={inputClass}
+      bind:this={input}
+      {autocomplete}
+      bind:value={searchText}
+      on:mouseup|self|stopPropagation={open_dropdown}
+      on:keydown|stopPropagation={handle_keydown}
+      on:focus
+      on:focus={open_dropdown}
+      {id}
+      {disabled}
+      {inputmode}
+      {pattern}
+      placeholder={selected.length == 0 ? placeholder : null}
+      aria-invalid={invalid ? `true` : null}
+      on:blur
+      on:change
+      on:click
+      on:keydown
+      on:keyup
+      on:mousedown
+      on:mouseenter
+      on:mouseleave
+      on:touchcancel
+      on:touchend
+      on:touchmove
+      on:touchstart
+      style:min-width={open ? `3em` : `0`}
+    />
   </ul>
+  <!-- the above on:* lines forward potentially useful DOM events -->
   {#if loading}
     <slot name="spinner">
       <CircleSpinner />
@@ -377,7 +436,7 @@ function on_click_outside(event) {
   {:else if selected.length > 0}
     {#if maxSelect && (maxSelect > 1 || maxSelectMsg)}
       <Wiggle bind:wiggle angle={20}>
-        <span style="padding: 0 3pt;">
+        <span class="max-select-msg {maxSelectMsgClass}">
           {maxSelectMsg?.(selected.length, maxSelect)}
         </span>
       </Wiggle>
@@ -474,7 +533,7 @@ function on_click_outside(event) {
     border: var(--sms-border, 1pt solid lightgray);
     border-radius: var(--sms-border-radius, 3pt);
     background: var(--sms-bg);
-    width: var(--sms-width);
+    width: var(--sms-width, 100%);
     max-width: var(--sms-max-width);
     padding: var(--sms-padding, 0 3pt);
     color: var(--sms-text-color);
@@ -514,6 +573,12 @@ function on_click_outside(event) {
     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]) {
+    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;
@@ -538,19 +603,19 @@ function on_click_outside(event) {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  :where(div.multiselect > ul.selected > li > input) {
+  :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 */
+    width: 100%;
+    flex: 1;
   }
-  :where(div.multiselect > ul.selected > li > input::placeholder) {
+  :where(div.multiselect > ul.selected > input::placeholder) {
     padding-left: 5pt;
     color: var(--sms-placeholder-color);
     opacity: var(--sms-placeholder-opacity);
@@ -607,4 +672,8 @@ function on_click_outside(event) {
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);
   }
+
+  :where(span.max-select-msg) {
+    padding: 0 3pt;
+  }
 </style>

package/MultiSelect.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         duplicates?: boolean | undefined;
         filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
         focusInputOnSelect?: boolean | "desktop" | undefined;
+        form_input?: HTMLInputElement | null | undefined;
         id?: string | null | undefined;
         input?: HTMLInputElement | null | undefined;
         inputClass?: string | undefined;
@@ -29,6 +30,7 @@ declare const __propDef: {
         matchingOptions?: Option[] | undefined;
         maxSelect?: number | null | undefined;
         maxSelectMsg?: ((current: number, max: number) => string) | null | undefined;
+        maxSelectMsgClass?: string | undefined;
         name?: string | null | undefined;
         noMatchingOptionsMsg?: string | undefined;
         open?: boolean | undefined;
@@ -40,10 +42,12 @@ declare const __propDef: {
         placeholder?: string | null | undefined;
         removeAllTitle?: string | undefined;
         removeBtnTitle?: string | undefined;
-        required?: boolean | undefined;
+        minSelect?: number | null | undefined;
+        required?: number | boolean | undefined;
         resetFilterOnAdd?: boolean | undefined;
         searchText?: string | undefined;
         selected?: Option[] | undefined;
+        selectedOptionsDraggable?: boolean | undefined;
         sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
@@ -65,9 +69,9 @@ declare const __propDef: {
     getters: {};
     events: MultiSelectEvents;
 };
-export declare type MultiSelectProps = typeof __propDef.props;
-export declare type MultiSelectEvents = typeof __propDef.events;
-export declare type MultiSelectSlots = typeof __propDef.slots;
+export type MultiSelectProps = typeof __propDef.props;
+export type MultiSelectEvents = typeof __propDef.events;
+export type MultiSelectSlots = typeof __propDef.slots;
 export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
 }
 export {};

package/Wiggle.svelte.d.ts

@@ -17,9 +17,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type WiggleProps = typeof __propDef.props;
-export declare type WiggleEvents = typeof __propDef.events;
-export declare type WiggleSlots = typeof __propDef.slots;
+export type WiggleProps = typeof __propDef.props;
+export type WiggleEvents = typeof __propDef.events;
+export type WiggleSlots = typeof __propDef.slots;
 export default class Wiggle extends SvelteComponentTyped<WiggleProps, WiggleEvents, WiggleSlots> {
 }
 export {};

package/changelog.md

@@ -0,0 +1,470 @@
+### Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+#### [v8.2.0](https://github.com/janosh/svelte-multiselect/compare/v8.1.0...v8.2.0)
+
+- Draggable selected options [`#178`](https://github.com/janosh/svelte-multiselect/pull/178)
+- Fix page navigation in GH pages, broken because served from non-apex domain [`#172`](https://github.com/janosh/svelte-multiselect/pull/172)
+- Publish docs to GitHub pages [`#170`](https://github.com/janosh/svelte-multiselect/pull/170)
+- Contributing docs plus issue and PR templates with StackBlitz repro starter [`#169`](https://github.com/janosh/svelte-multiselect/pull/169)
+- add missing about field to bug-report issue template (closes #171) [`#171`](https://github.com/janosh/svelte-multiselect/issues/171)
+- add changelog.md [`236d238`](https://github.com/janosh/svelte-multiselect/commit/236d238c5fa1ce5f07cf08c09861da4d8446acb2)
+- fix prop form_input: set default value null to make it optional [`b150fe0`](https://github.com/janosh/svelte-multiselect/commit/b150fe0032ebde82a319b23bd5e6b573e0c31721)
+- set aliveStatusCodes: [200, 429] in .github/workflows/link-check-config.json [`b34c7bf`](https://github.com/janosh/svelte-multiselect/commit/b34c7bf99d4afa96dcd3c9c322ab4e94b1ef3a39)
+- add changelog script to `package.json` [`c943617`](https://github.com/janosh/svelte-multiselect/commit/c9436171033e06e8098f4443ed40d48ddee35167)
+
+<!-- auto-changelog-above -->
+
+#### [v8.1.0](https://github.com/janosh/svelte-multiselect/compare/v8.0.4...v8.1.0)
+
+> 18 November 2022
+
+- Add minSelect prop [`#166`](https://github.com/janosh/svelte-multiselect/pull/166)
+- Add `pnpm test` to readme [`#168`](https://github.com/janosh/svelte-multiselect/pull/168)
+- Add class for maxSelectMsg [`#167`](https://github.com/janosh/svelte-multiselect/pull/167)
+- Allow `required=1 | 2 | ...` to set minimum number of selected options for form submission [`#161`](https://github.com/janosh/svelte-multiselect/pull/161)
+- Add minSelect prop (#166) [`#163`](https://github.com/janosh/svelte-multiselect/issues/163) [`#163`](https://github.com/janosh/svelte-multiselect/issues/163) [`#163`](https://github.com/janosh/svelte-multiselect/issues/163)
+- mv /max-select example to /min-max-select [`9838db8`](https://github.com/janosh/svelte-multiselect/commit/9838db87d044a0d3d261c82ac1d654b9e32310d1)
+
+#### [v8.0.4](https://github.com/janosh/svelte-multiselect/compare/v8.0.3...v8.0.4)
+
+> 15 November 2022
+
+- Form validation docs [`#159`](https://github.com/janosh/svelte-multiselect/pull/159)
+- Don't `console.error` about missing `options` if `disabled=true` [`#158`](https://github.com/janosh/svelte-multiselect/pull/158)
+
+#### [v8.0.3](https://github.com/janosh/svelte-multiselect/compare/v8.0.2...v8.0.3)
+
+> 15 November 2022
+
+- Test uncovered lines [`#157`](https://github.com/janosh/svelte-multiselect/pull/157)
+- Don't `console.error` about missing `options` if `loading=true` [`#156`](https://github.com/janosh/svelte-multiselect/pull/156)
+- Measure `vitest` coverage with `c8` [`#155`](https://github.com/janosh/svelte-multiselect/pull/155)
+- increase --sms-min-height 19-&gt;22pt [`5d0e081`](https://github.com/janosh/svelte-multiselect/commit/5d0e0815d0b488ae23b439a3f085dd083138c326)
+
+#### [v8.0.2](https://github.com/janosh/svelte-multiselect/compare/v8.0.1...v8.0.2)
+
+> 7 November 2022
+
+- Pass JSON.stringified selected options to form submission handlers [`#152`](https://github.com/janosh/svelte-multiselect/pull/152)
+- Link check CI and readme housekeeping [`#149`](https://github.com/janosh/svelte-multiselect/pull/149)
+- REPL links for landing page examples [`#148`](https://github.com/janosh/svelte-multiselect/pull/148)
+- Add Collapsible code blocks to usage examples [`#143`](https://github.com/janosh/svelte-multiselect/pull/143)
+- REPL links for landing page examples (#148) [`#144`](https://github.com/janosh/svelte-multiselect/issues/144) [`#145`](https://github.com/janosh/svelte-multiselect/issues/145) [`#146`](https://github.com/janosh/svelte-multiselect/issues/146) [`#147`](https://github.com/janosh/svelte-multiselect/issues/147)
+
+#### [v8.0.1](https://github.com/janosh/svelte-multiselect/compare/v8.0.0...v8.0.1)
+
+> 30 October 2022
+
+- Revert SCSS preprocessing [`#141`](https://github.com/janosh/svelte-multiselect/pull/141)
+- Add unit tests for 2-/1-way binding of `activeIndex` and `activeOption` [`#139`](https://github.com/janosh/svelte-multiselect/pull/139)
+
+### [v8.0.0](https://github.com/janosh/svelte-multiselect/compare/v7.1.0...v8.0.0)
+
+> 22 October 2022
+
+- Add new prop `value` [`#138`](https://github.com/janosh/svelte-multiselect/pull/138)
+- New prop resetFilterOnAdd [`#137`](https://github.com/janosh/svelte-multiselect/pull/137)
+- `yarn` to `pnpm` [`#134`](https://github.com/janosh/svelte-multiselect/pull/134)
+- Rename prop `noOptionsMsg`-&gt;`noMatchingOptionsMsg` [`#133`](https://github.com/janosh/svelte-multiselect/pull/133)
+- remove props selectedLabels and selectedValues [`ef6598e`](https://github.com/janosh/svelte-multiselect/commit/ef6598e8b0dc1f2f8cb687074463cb73b2f9ebff)
+
+#### [v7.1.0](https://github.com/janosh/svelte-multiselect/compare/v7.0.2...v7.1.0)
+
+> 13 October 2022
+
+- Allow preventing duplicate options when allowUserOptions is thruthy [`#132`](https://github.com/janosh/svelte-multiselect/pull/132)
+
+#### [v7.0.2](https://github.com/janosh/svelte-multiselect/compare/v7.0.1...v7.0.2)
+
+> 8 October 2022
+
+- Fix TypeError: Cannot read properties of null (reading 'get_label') - take 2 [`#131`](https://github.com/janosh/svelte-multiselect/pull/131)
+- Fix selecting options with falsy labels (like 0) [`#130`](https://github.com/janosh/svelte-multiselect/pull/130)
+
+#### [v7.0.1](https://github.com/janosh/svelte-multiselect/compare/v7.0.0...v7.0.1)
+
+> 6 October 2022
+
+- Fix single select with arrow and enter keys [`#128`](https://github.com/janosh/svelte-multiselect/pull/128)
+- Add SCSS preprocessing [`#126`](https://github.com/janosh/svelte-multiselect/pull/126)
+- [pre-commit.ci] pre-commit autoupdate [`#124`](https://github.com/janosh/svelte-multiselect/pull/124)
+- more unit tests [`1adbc99`](https://github.com/janosh/svelte-multiselect/commit/1adbc994b746b39c4ad081dc2573bf37f27c96c0)
+- test required but empty MultiSelect fails form validity check (i.e. causes unsubmittable form) and filled one passes it [`fd8b377`](https://github.com/janosh/svelte-multiselect/commit/fd8b37782cd508aacfc8125c6647cefe56144b80)
+
+### [v7.0.0](https://github.com/janosh/svelte-multiselect/compare/v6.1.0...v7.0.0)
+
+> 3 October 2022
+
+- Make selected a single value (not a length-1 array) if maxSelect=1 [`#123`](https://github.com/janosh/svelte-multiselect/pull/123)
+- Fix TypeError: Cannot read properties of null (reading 'get_label') at MultiSelect.svelte:75 [`#122`](https://github.com/janosh/svelte-multiselect/pull/122)
+- add stopPropagation to keydown handler (closes #114) [`#114`](https://github.com/janosh/svelte-multiselect/issues/114)
+
+#### [v6.1.0](https://github.com/janosh/svelte-multiselect/compare/v6.0.3...v6.1.0)
+
+> 30 September 2022
+
+- Forward input DOM events [`#120`](https://github.com/janosh/svelte-multiselect/pull/120)
+- Props to manipulating inputmode and pattern attributes [`#116`](https://github.com/janosh/svelte-multiselect/pull/116)
+- docs: remove `userInputAs` prop reference [`#115`](https://github.com/janosh/svelte-multiselect/pull/115)
+- Fix top option not selectable with enter key [`#113`](https://github.com/janosh/svelte-multiselect/pull/113)
+
+#### [v6.0.3](https://github.com/janosh/svelte-multiselect/compare/v6.0.2...v6.0.3)
+
+> 20 September 2022
+
+- Fix using arrow keys to control active option in dropdown list [`#111`](https://github.com/janosh/svelte-multiselect/pull/111)
+- eslintrc set @typescript-eslint/no-inferrable-types: off [`c688773`](https://github.com/janosh/svelte-multiselect/commit/c6887737871709cdadc2ef0835795d6c1696e34c)
+
+#### [v6.0.2](https://github.com/janosh/svelte-multiselect/compare/v6.0.1...v6.0.2)
+
+> 17 September 2022
+
+- Test readme docs on CSS variables [`#109`](https://github.com/janosh/svelte-multiselect/pull/109)
+- Fix selected array not being initialized to options with preselected=true [`#108`](https://github.com/janosh/svelte-multiselect/pull/108)
+
+#### [v6.0.1](https://github.com/janosh/svelte-multiselect/compare/v6.0.0...v6.0.1)
+
+> 13 September 2022
+
+- Better props docs and test [`#105`](https://github.com/janosh/svelte-multiselect/pull/105)
+- fix breaking change sveltekit:prefetch renamed to data-sveltekit-prefetch [`65ddbb9`](https://github.com/janosh/svelte-multiselect/commit/65ddbb93c720e3d92d7bc3fec232f58e87c0ea6d)
+- fix .svx demo routes [`fde53f1`](https://github.com/janosh/svelte-multiselect/commit/fde53f1225fda928412303256d48b77d122d19f1)
+- revert from adapter-netlify to adapter-static [`224144d`](https://github.com/janosh/svelte-multiselect/commit/224144dce012d1eef515abafa542c6a6b7e063e8)
+
+### [v6.0.0](https://github.com/janosh/svelte-multiselect/compare/v5.0.6...v6.0.0)
+
+> 3 September 2022
+
+- Better on mobile and better about which option is active [`#103`](https://github.com/janosh/svelte-multiselect/pull/103)
+- SvelteKit routes auto migration [`#101`](https://github.com/janosh/svelte-multiselect/pull/101)
+
+#### [v5.0.6](https://github.com/janosh/svelte-multiselect/compare/v5.0.5...v5.0.6)
+
+> 2 August 2022
+
+- Fix 'Cannot find module `scroll-into-view-if-needed`' [`#99`](https://github.com/janosh/svelte-multiselect/pull/99)
+
+#### [v5.0.5](https://github.com/janosh/svelte-multiselect/compare/v5.0.4...v5.0.5)
+
+> 2 August 2022
+
+- Add `scroll-into-view-if-needed` ponyfill [`#97`](https://github.com/janosh/svelte-multiselect/pull/97)
+
+#### [v5.0.4](https://github.com/janosh/svelte-multiselect/compare/v5.0.3...v5.0.4)
+
+> 17 July 2022
+
+- Convert E2E tests from`vitest` to `@playwright/test` [`#95`](https://github.com/janosh/svelte-multiselect/pull/95)
+- Allow empty Multiselect [`#94`](https://github.com/janosh/svelte-multiselect/pull/94)
+- Add new slot `'remove-icon'` [`#93`](https://github.com/janosh/svelte-multiselect/pull/93)
+- [pre-commit.ci] pre-commit autoupdate [`#92`](https://github.com/janosh/svelte-multiselect/pull/92)
+
+#### [v5.0.3](https://github.com/janosh/svelte-multiselect/compare/v5.0.2...v5.0.3)
+
+> 1 July 2022
+
+- Reset `activeOption` to `null` if not in `matchingOptions` [`#90`](https://github.com/janosh/svelte-multiselect/pull/90)
+
+#### [v5.0.2](https://github.com/janosh/svelte-multiselect/compare/v5.0.1...v5.0.2)
+
+> 27 June 2022
+
+- Replace `li.scrollIntoViewIfNeeded()` with `li.scrollIntoView()` [`#88`](https://github.com/janosh/svelte-multiselect/pull/88)
+- Add new prop `parseLabelsAsHtml` [`#84`](https://github.com/janosh/svelte-multiselect/pull/84)
+- try fix flaky test 'multiselect &gt; can select and remove many options' [`2b0c453`](https://github.com/janosh/svelte-multiselect/commit/2b0c453c794c0b3b82e81c5b994c10bc305a98d6)
+- bump netlify node to v18, update readme + deps [`586c724`](https://github.com/janosh/svelte-multiselect/commit/586c724d471aece2b5a3726bb5eb145e36073fe3)
+- remove plausible.js analytics [`cd4c9f6`](https://github.com/janosh/svelte-multiselect/commit/cd4c9f6e18e13959dfb4fcebe9acba7a875b83a2)
+
+#### [v5.0.1](https://github.com/janosh/svelte-multiselect/compare/v5.0.0...v5.0.1)
+
+> 23 April 2022
+
+- Strongly typed custom events [`#79`](https://github.com/janosh/svelte-multiselect/pull/79)
+
+### [v5.0.0](https://github.com/janosh/svelte-multiselect/compare/v4.0.6...v5.0.0)
+
+> 21 April 2022
+
+- v5 release [`#76`](https://github.com/janosh/svelte-multiselect/pull/76)
+- Work with string options as is, don't convert to objects internally [`#75`](https://github.com/janosh/svelte-multiselect/pull/75)
+- v5 release (#76) [`#57`](https://github.com/janosh/svelte-multiselect/issues/57)
+
+#### [v4.0.6](https://github.com/janosh/svelte-multiselect/compare/v4.0.5...v4.0.6)
+
+> 7 April 2022
+
+- Fix backspace deleting multiple selected options if identical labels [`#72`](https://github.com/janosh/svelte-multiselect/pull/72)
+- Several fixes for `allowUserOptions` [`#69`](https://github.com/janosh/svelte-multiselect/pull/69)
+- [pre-commit.ci] pre-commit autoupdate [`#70`](https://github.com/janosh/svelte-multiselect/pull/70)
+
+#### [v4.0.5](https://github.com/janosh/svelte-multiselect/compare/v4.0.4...v4.0.5)
+
+> 2 April 2022
+
+- Fix MultiSelect `localStorage` binding [`#66`](https://github.com/janosh/svelte-multiselect/pull/66)
+
+#### [v4.0.4](https://github.com/janosh/svelte-multiselect/compare/v4.0.3...v4.0.4)
+
+> 30 March 2022
+
+- Move examples to new `src/routes/demos` dir [`#63`](https://github.com/janosh/svelte-multiselect/pull/63)
+- make ToC position fixed (closes #64) [`#64`](https://github.com/janosh/svelte-multiselect/issues/64)
+- check for undefined (not falsy) value in rawOp processing (fixes #65) [`#65`](https://github.com/janosh/svelte-multiselect/issues/65)
+- LanguageSlot change SVG icons src repo to vscode-icons for more coverage [`92390e9`](https://github.com/janosh/svelte-multiselect/commit/92390e937a063b2b0c88e0ac6f9a9d8f3cb1eadd)
+- more preselected slots in Examples.svelte [`cd0a01a`](https://github.com/janosh/svelte-multiselect/commit/cd0a01a7a6b319299642b3c24c5caea8dc9dc24d)
+
+#### [v4.0.3](https://github.com/janosh/svelte-multiselect/compare/v4.0.2...v4.0.3)
+
+> 23 March 2022
+
+- Add `aria-label` to hidden `.form-control` input [`#62`](https://github.com/janosh/svelte-multiselect/pull/62)
+- Add `aria-label` to hidden `.form-control` input (#62) [`#58`](https://github.com/janosh/svelte-multiselect/issues/58) [`#35`](https://github.com/janosh/svelte-multiselect/issues/35)
+- fix dropdown closing when clicking between list items (closes #61) [`#61`](https://github.com/janosh/svelte-multiselect/issues/61)
+- svelte.config.js add kit.prerender.default: true, mv src/{global,app}.d.ts [`4a84913`](https://github.com/janosh/svelte-multiselect/commit/4a8491380e08bad137ca7bdda9ee4ddd38abe3d6)
+
+#### [v4.0.2](https://github.com/janosh/svelte-multiselect/compare/v4.0.1...v4.0.2)
+
+> 13 March 2022
+
+- Improve a11y [`#60`](https://github.com/janosh/svelte-multiselect/pull/60)
+- Convert tests to Playwright [`#59`](https://github.com/janosh/svelte-multiselect/pull/59)
+- Convert tests to Playwright (#59) [`#58`](https://github.com/janosh/svelte-multiselect/issues/58)
+- add and document prop invalid (closes #47) [`#47`](https://github.com/janosh/svelte-multiselect/issues/47)
+- set width (not height) on svg icons and as px (not em) so they don't shrink with fluid typography on mobile screens [`ba77f93`](https://github.com/janosh/svelte-multiselect/commit/ba77f93b23b375bb650411b580406f1f7d55f365)
+
+#### [v4.0.1](https://github.com/janosh/svelte-multiselect/compare/v4.0.0...v4.0.1)
+
+> 5 March 2022
+
+- Rename readonly to disabled [`#55`](https://github.com/janosh/svelte-multiselect/pull/55)
+- CSS and UX tweaks [`#52`](https://github.com/janosh/svelte-multiselect/pull/52)
+- Readme document test runner config to avoid transpiling errors in downstream testing [`#54`](https://github.com/janosh/svelte-multiselect/pull/54)
+- More tests [`#51`](https://github.com/janosh/svelte-multiselect/pull/51)
+- Add `vitest` [`#50`](https://github.com/janosh/svelte-multiselect/pull/50)
+- Rename readonly to disabled (#55) [`#45`](https://github.com/janosh/svelte-multiselect/issues/45)
+- close options dropdown list on input blur (fixes #53) [`#53`](https://github.com/janosh/svelte-multiselect/issues/53)
+- CSS and UX tweaks (#52) [`#44`](https://github.com/janosh/svelte-multiselect/issues/44) [`#44`](https://github.com/janosh/svelte-multiselect/issues/44) [`#44`](https://github.com/janosh/svelte-multiselect/issues/44)
+- Readme document test runner config to avoid transpiling errors in downstream testing (#54) [`#48`](https://github.com/janosh/svelte-multiselect/issues/48)
+
+### [v4.0.0](https://github.com/janosh/svelte-multiselect/compare/v3.3.0...v4.0.0)
+
+> 21 February 2022
+
+- Implement `allowUserOptions`, `autoScroll` and `loading` (closes #39) [`#41`](https://github.com/janosh/svelte-multiselect/pull/41)
+- define DispatchEvents type used to annotate createEventDispatcher() [`#32`](https://github.com/janosh/svelte-multiselect/pull/32)
+- add prop required to prevent form submission if no options selected (closes #42) [`#42`](https://github.com/janosh/svelte-multiselect/issues/42)
+- Implement `allowUserOptions`, `autoScroll` and `loading` (closes #39) (#41) [`#39`](https://github.com/janosh/svelte-multiselect/issues/39) [`#39`](https://github.com/janosh/svelte-multiselect/issues/39)
+
+#### [v3.3.0](https://github.com/janosh/svelte-multiselect/compare/v3.2.3...v3.3.0)
+
+> 20 February 2022
+
+- by default, only show maxSelectMsg if maxSelect != null and &gt; 1 (closes #37) [`#37`](https://github.com/janosh/svelte-multiselect/issues/37)
+- add CSS var --sms-options-shadow defaults to subtle black shadow around dropdown list (0 0 14pt -8pt black) (closes #36) [`#36`](https://github.com/janosh/svelte-multiselect/issues/36)
+- add prop liActiveOptionClass = '' (closes #35) [`#35`](https://github.com/janosh/svelte-multiselect/issues/35)
+- turn searchText = and showOptions = false into bindable props (closes #33) [`#33`](https://github.com/janosh/svelte-multiselect/issues/33)
+- document missing noOptionsMsg prop (closes #34) [`#34`](https://github.com/janosh/svelte-multiselect/issues/34)
+- ensure custom class names (outerDivClass, ulOptionsClass) come last (closes #38) [`#38`](https://github.com/janosh/svelte-multiselect/issues/38)
+- fix ToC scroll to heading (closes #31) [`#31`](https://github.com/janosh/svelte-multiselect/issues/31)
+- only show remove all btn when maxSelect !== 1 (for #37) [`64cfd8a`](https://github.com/janosh/svelte-multiselect/commit/64cfd8a1108e19aae12e65c3ad17177f09a066d8)
+
+#### [v3.2.3](https://github.com/janosh/svelte-multiselect/compare/v3.2.2...v3.2.3)
+
+> 19 February 2022
+
+- Fixes for focus on click and wiggle on hitting maxSelect [`#30`](https://github.com/janosh/svelte-multiselect/pull/30)
+
+#### [v3.2.2](https://github.com/janosh/svelte-multiselect/compare/v3.2.1...v3.2.2)
+
+> 16 February 2022
+
+- Expose filter method [`#29`](https://github.com/janosh/svelte-multiselect/pull/29)
+- readme improve docs on css variables and granular control through :global() selectors (closes #27) [`#27`](https://github.com/janosh/svelte-multiselect/issues/27)
+
+#### [v3.2.1](https://github.com/janosh/svelte-multiselect/compare/v3.2.0...v3.2.1)
+
+> 7 February 2022
+
+- mv input outside ul.selected for better HTML semantics (closes #26) [`#26`](https://github.com/janosh/svelte-multiselect/issues/26)
+
+#### [v3.2.0](https://github.com/janosh/svelte-multiselect/compare/v3.1.1...v3.2.0)
+
+> 3 February 2022
+
+- apply id prop to &lt;input&gt; instead of outer div (closes #25) [`#25`](https://github.com/janosh/svelte-multiselect/issues/25)
+- add eslint commit hook + update deps [`6ad44b8`](https://github.com/janosh/svelte-multiselect/commit/6ad44b85057aef71eae19293de80f9d42f91f87b)
+- v.3.2.0 [`71ff2d1`](https://github.com/janosh/svelte-multiselect/commit/71ff2d192caccacbe41f83949c14d7d4ca87d590)
+- add readme badge to document minimum svelte version (for #24) [`7d9fe5a`](https://github.com/janosh/svelte-multiselect/commit/7d9fe5a977b56dab95069b64321f0718e0d61f08)
+
+#### [v3.1.1](https://github.com/janosh/svelte-multiselect/compare/v3.1.0...v3.1.1)
+
+> 25 January 2022
+
+- wiggle the maxSelect msg on hitting selection limit (closes #19) [`#19`](https://github.com/janosh/svelte-multiselect/issues/19)
+- readme better docs for CSS variables, rename slots {options,selected}Renderer -&gt; render{options,selected} [`c8ab724`](https://github.com/janosh/svelte-multiselect/commit/c8ab7241506cfe6b5930d098150a251e85c52afd)
+
+#### [v3.1.0](https://github.com/janosh/svelte-multiselect/compare/v3.0.1...v3.1.0)
+
+> 22 January 2022
+
+- add selectedRenderer + optionRenderer named slots (closes #21) [`#21`](https://github.com/janosh/svelte-multiselect/issues/21)
+- docs site use unmodified readme with slot to insert examples, yarn add svelte-github-corner [`1072691`](https://github.com/janosh/svelte-multiselect/commit/10726916ea2a72560cd8ee6f2806526bf932e771)
+- readme add note on type exports for TS users, add error page that redirects to index [`dde76c8`](https://github.com/janosh/svelte-multiselect/commit/dde76c8b92408b7fddca0b555a63c2b1bfd0dbe8)
+
+#### [v3.0.1](https://github.com/janosh/svelte-multiselect/compare/v3.0.0...v3.0.1)
+
+> 7 January 2022
+
+- favorite web framework show Confetti.svelte on:add Svelte [`8d109ee`](https://github.com/janosh/svelte-multiselect/commit/8d109ee5c7755e447fcb72419f3b7ecc19cac0b2)
+- bump svelte@3.45.0 to silence warning: MultiSelect has unused export property 'defaultDisabledTitle' (sveltejs/svelte#6964) [`f80a7a6`](https://github.com/janosh/svelte-multiselect/commit/f80a7a622310005407585298f2611597c0941990)
+- update readme + svelte-toc@0.2.0 [`40013ba`](https://github.com/janosh/svelte-multiselect/commit/40013badd61dd0fcade7ab295dabd26693e3cc51)
+- [pre-commit.ci] pre-commit autoupdate [`0d05864`](https://github.com/janosh/svelte-multiselect/commit/0d05864d19987460dd30d667eb22deb91a520668)
+- iOS Safari prevent zoom into page on focus MultiSelect input [`44f17be`](https://github.com/janosh/svelte-multiselect/commit/44f17be53378e38f4a8748b815737d25cdebc85f)
+
+### [v3.0.0](https://github.com/janosh/svelte-multiselect/compare/v2.0.0...v3.0.0)
+
+> 29 December 2021
+
+- ensure active option is scrolled into view if needed (closes #15), breaking change: renames tokens to options [`#15`](https://github.com/janosh/svelte-multiselect/issues/15)
+
+### [v2.0.0](https://github.com/janosh/svelte-multiselect/compare/v1.2.2...v2.0.0)
+
+> 24 December 2021
+
+- Convert options from simple strings to objects [`#16`](https://github.com/janosh/svelte-multiselect/pull/16)
+- Add local to transition:fly [`#14`](https://github.com/janosh/svelte-multiselect/pull/14)
+- add onClickOutside action, used to replace input.on:blur() for hiding options (closes #18) [`#18`](https://github.com/janosh/svelte-multiselect/issues/18)
+- update deps [`fb90f93`](https://github.com/janosh/svelte-multiselect/commit/fb90f936fa0d49f81e6c9c60986dd04749ea6a67)
+- more keyboard friendliness by showing remove button focus and triggering on space bar or enter key [`b87d22b`](https://github.com/janosh/svelte-multiselect/commit/b87d22bc5706acd18e1e79c40b3845f2ee3615b2)
+- add plausible [`0557c0f`](https://github.com/janosh/svelte-multiselect/commit/0557c0f2bbef80820540302af29c79b7ac89023b)
+
+#### [v1.2.2](https://github.com/janosh/svelte-multiselect/compare/v1.2.1...v1.2.2)
+
+> 27 October 2021
+
+- set &lt;input&gt; width back to 1pt as it's only needed to tab into, focus and blur &lt;MultiSelect&gt; (closes #12) [`#12`](https://github.com/janosh/svelte-multiselect/issues/12)
+- update readme [`45c7993`](https://github.com/janosh/svelte-multiselect/commit/45c7993398c986499d4c0729177620cbec719cb7)
+
+#### [v1.2.1](https://github.com/janosh/svelte-multiselect/compare/v1.2.0...v1.2.1)
+
+> 21 October 2021
+
+- make internal CSS easily overridable (sveltejs/svelte#6859) [`d15a445`](https://github.com/janosh/svelte-multiselect/commit/d15a44504707c178c67e22318b2cc6095b1b192f)
+
+#### [v1.2.0](https://github.com/janosh/svelte-multiselect/compare/v1.1.13...v1.2.0)
+
+> 12 October 2021
+
+- add src/lib/index.ts for package path export '.' (closes #11) [`#11`](https://github.com/janosh/svelte-multiselect/issues/11)
+
+#### [v1.1.13](https://github.com/janosh/svelte-multiselect/compare/v1.1.12...v1.1.13)
+
+> 12 October 2021
+
+- add src/lib/index.ts for package path export '.' (closes #11) [`#11`](https://github.com/janosh/svelte-multiselect/issues/11)
+
+#### [v1.1.12](https://github.com/janosh/svelte-multiselect/compare/v1.1.11...v1.1.12)
+
+> 11 October 2021
+
+- Add new prop disabledOptions [`#9`](https://github.com/janosh/svelte-multiselect/pull/9)
+- add pre-commit hooks [`dfb6399`](https://github.com/janosh/svelte-multiselect/commit/dfb6399a77b705f8e5979eb887d345a5f52ff929)
+- [pre-commit.ci] pre-commit autoupdate [`b69425d`](https://github.com/janosh/svelte-multiselect/commit/b69425d18473122f1af889d2f48c60d02e43b99f)
+
+#### [v1.1.11](https://github.com/janosh/svelte-multiselect/compare/v1.1.10...v1.1.11)
+
+> 3 September 2021
+
+- fix removeAll button not dispatching remove and change events (closes #7) [`#7`](https://github.com/janosh/svelte-multiselect/issues/7)
+- remove @tsconfig/svelte, update deps [`9b2c231`](https://github.com/janosh/svelte-multiselect/commit/9b2c23181f4a96bd9d002f535dd669153e772b72)
+- add type=(add|remove) detail to 'change' event dispatch [`8290458`](https://github.com/janosh/svelte-multiselect/commit/8290458b898292a28d65710d6941f193fb9964aa)
+
+#### [v1.1.10](https://github.com/janosh/svelte-multiselect/compare/v1.1.9...v1.1.10)
+
+> 12 August 2021
+
+- add `on:change` event and document events in readme (closes #5) [`#5`](https://github.com/janosh/svelte-multiselect/issues/5)
+
+#### [v1.1.9](https://github.com/janosh/svelte-multiselect/compare/v1.1.8...v1.1.9)
+
+> 12 July 2021
+
+- convert to typescript [`bd391c5`](https://github.com/janosh/svelte-multiselect/commit/bd391c5aba615ab41e2f561f81e057928a7064a8)
+- update to @sveltejs/kit@1.0.0-next.124+ to use svelte field in `package.json` [`2367e38`](https://github.com/janosh/svelte-multiselect/commit/2367e38d699e503e6dc98808904278f96eb54ee7)
+
+#### [v1.1.8](https://github.com/janosh/svelte-multiselect/compare/v1.1.7...v1.1.8)
+
+> 7 July 2021
+
+- turn hard-coded remove button titles into props [`c35162b`](https://github.com/janosh/svelte-multiselect/commit/c35162b0d0c1ed183bc23dbf15b0ff46638cbb3b)
+- guard against selected being nullish, keep ul.options in the DOM even if showoptions is false to allow selecting in dev tools for styling [`b9bd576`](https://github.com/janosh/svelte-multiselect/commit/b9bd576f6f76ec86ebeff1d899d8947bef64f66f)
+
+#### [v1.1.7](https://github.com/janosh/svelte-multiselect/compare/v1.1.6...v1.1.7)
+
+> 5 July 2021
+
+- add css classes as props for use with tailwind (closes #3) [`#3`](https://github.com/janosh/svelte-multiselect/issues/3)
+
+#### [v1.1.6](https://github.com/janosh/svelte-multiselect/compare/v1.1.5...v1.1.6)
+
+> 23 June 2021
+
+- fix: don't remove tags if search string is non-empty, open options on clicking selected tags (#2) [`5ffed50`](https://github.com/janosh/svelte-multiselect/commit/5ffed50617f47dba6ffbafd6ce266fa6e064c7de)
+- update svelte-toc to fix deploy [`d5279dd`](https://github.com/janosh/svelte-multiselect/commit/d5279dd11279509493030aeb26295873929b2253)
+
+#### [v1.1.5](https://github.com/janosh/svelte-multiselect/compare/v1.1.4...v1.1.5)
+
+> 22 June 2021
+
+- convert to `svelte-kit package` [`9db3cfb`](https://github.com/janosh/svelte-multiselect/commit/9db3cfb5b6e2db844961be5bc59fc12e5d5b6b76)
+
+#### [v1.1.4](https://github.com/janosh/svelte-multiselect/compare/v1.1.3...v1.1.4)
+
+> 21 June 2021
+
+- fix setting initial value for selected, fix setting class `'selected'` in single mode [`16d11de`](https://github.com/janosh/svelte-multiselect/commit/16d11de77567f9d30e37e815dfcb9a7d580d6500)
+
+#### [v1.1.3](https://github.com/janosh/svelte-multiselect/compare/v1.1.2...v1.1.3)
+
+> 20 June 2021
+
+- replace prop single with maxSelect to specify any number of selectable options, add class single to div.multiselect if maxSelect===1 (#2) [`36e916f`](https://github.com/janosh/svelte-multiselect/commit/36e916f4a42d395c394ddff47364a17fd22a7ec1)
+- add linked headings [`2eedf9a`](https://github.com/janosh/svelte-multiselect/commit/2eedf9aa24512ff96f8ccff564d3a1fa7615388a)
+
+#### [v1.1.2](https://github.com/janosh/svelte-multiselect/compare/v1.1.1...v1.1.2)
+
+> 28 May 2021
+
+- add css var props [`f591814`](https://github.com/janosh/svelte-multiselect/commit/f5918141805cfc6acda28c836a57c3df81fa758f)
+
+#### [v1.1.1](https://github.com/janosh/svelte-multiselect/compare/v1.1.0...v1.1.1)
+
+> 25 May 2021
+
+- add GitHubCorner.svelte for link to repo [`e80a402`](https://github.com/janosh/svelte-multiselect/commit/e80a402556783108bc5dc626f9816b647e2c937f)
+- remove selected tokens with backspace [`c5d7495`](https://github.com/janosh/svelte-multiselect/commit/c5d7495a43b945dd56ad06fbe639de0db542d5f4)
+- add readme badges [`992eaa4`](https://github.com/janosh/svelte-multiselect/commit/992eaa43ec19841b3035a5dcf9996eaf58316fa8)
+- demo site fix stripping start of readme for docs [`107273d`](https://github.com/janosh/svelte-multiselect/commit/107273de356f176cb0fc94f28ae4f2e773b62d42)
+- add `svelte-toc` table of contents to demo site [`36aa1c5`](https://github.com/janosh/svelte-multiselect/commit/36aa1c523c5bc3acb14e9613b61c04ffd54c6100)
+
+#### [v1.1.0](https://github.com/janosh/svelte-multiselect/compare/v1.0.1...v1.1.0)
+
+> 9 May 2021
+
+- import readme on demo site (more DRY) [`c0e4924`](https://github.com/janosh/svelte-multiselect/commit/c0e49246e76a81600bb35931fd7d30f6f6aeb550)
+- remove unused `example.svx` [`2138caa`](https://github.com/janosh/svelte-multiselect/commit/2138caa171f20a2f80c2e75d0dffd066caf17a83)
+- rename package dir, improve readme [`0150378`](https://github.com/janosh/svelte-multiselect/commit/015037848f666a76b24b93603764084b41611740)
+
+#### [v1.0.1](https://github.com/janosh/svelte-multiselect/compare/v1.0.0...v1.0.1)
+
+> 8 May 2021
+
+- remove hidden input for storing currently selected options as JSON [`802a219`](https://github.com/janosh/svelte-multiselect/commit/802a2195a28986c219298d7d9e7ca47f2aaf7db6)
+
+#### v1.0.0
+
+> 7 May 2021
+
+- initial commit [`14dd38a`](https://github.com/janosh/svelte-multiselect/commit/14dd38adb06a8899e39efabdb114faab943cedf0)

package/index.d.ts

@@ -1,6 +1,6 @@
 export { default } from './MultiSelect.svelte';
-export declare type Option = string | number | ObjectOption;
-export declare type ObjectOption = {
+export type Option = string | number | ObjectOption;
+export type ObjectOption = {
     label: string | number;
     value?: unknown;
     title?: string;
@@ -10,7 +10,7 @@ export declare type ObjectOption = {
     selectedTitle?: string;
     [key: string]: unknown;
 };
-export declare type DispatchEvents = {
+export type DispatchEvents = {
     add: {
         option: Option;
     };
@@ -32,7 +32,7 @@ export declare type DispatchEvents = {
         event: Event;
     };
 };
-export declare type MultiSelectEvents = {
+export type MultiSelectEvents = {
     [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
 } & {
     blur: FocusEvent;

package/package.json

@@ -2,32 +2,33 @@
   "name": "svelte-multiselect",
   "description": "Svelte multi-select component",
   "author": "Janosh Riebesell <janosh.riebesell@gmail.com>",
-  "homepage": "https://svelte-multiselect.netlify.app",
+  "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.0.4",
+  "version": "8.2.0",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
     "@iconify/svelte": "^3.0.0",
-    "@playwright/test": "^1.27.1",
+    "@playwright/test": "^1.28.0",
     "@sveltejs/adapter-static": "1.0.0-next.48",
-    "@sveltejs/kit": "1.0.0-next.544",
-    "@sveltejs/package": "1.0.0-next.5",
-    "@sveltejs/vite-plugin-svelte": "^1.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "@vitest/coverage-c8": "^0.25.1",
-    "eslint": "^8.27.0",
+    "@sveltejs/kit": "1.0.0-next.553",
+    "@sveltejs/package": "1.0.0-next.6",
+    "@sveltejs/vite-plugin-svelte": "^1.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "@vitest/coverage-c8": "^0.25.2",
+    "eslint": "^8.28.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.1.0",
     "highlight.js": "^11.6.0",
     "jsdom": "^20.0.2",
     "mdsvex": "^0.10.6",
+    "mdsvexamples": "^0.3.2",
     "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
     "svelte": "^3.53.1",
@@ -37,9 +38,9 @@
     "svelte-toc": "^0.4.1",
     "svelte2tsx": "^0.5.20",
     "tslib": "^2.4.1",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.3",
-    "vitest": "^0.25.1"
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4",
+    "vitest": "^0.25.2"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -6,7 +6,7 @@
 <h4 align="center">
 
 [![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/a45b62c3-ea45-4cfd-9912-77ec4fc8d7e8/deploy-status)](https://app.netlify.com/sites/svelte-multiselect/deploys)
+[![Docs](https://github.com/janosh/svelte-multiselect/actions/workflows/docs.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/docs.yml)
 [![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect)
 [![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/dev/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
 [![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
@@ -16,7 +16,7 @@
 
 <p align="center"><strong>
   Keyboard-friendly, accessible and highly customizable multi-select component.
-  <a class="hide-in-docs" href="https://svelte-multiselect.netlify.app">View the docs</a>
+  <a class="hide-in-docs" href="https://janosh.github.io/svelte-multiselect">View the docs</a>
 </strong></p>
 
 <slot name="examples" />
@@ -52,7 +52,7 @@ yarn add -D svelte-multiselect
 
 ## Usage
 
-```svelte
+```html
 <script>
   import MultiSelect from 'svelte-multiselect'
 
@@ -61,7 +61,7 @@ yarn add -D svelte-multiselect
   let selected = []
 </script>
 
-Favorite Frontend Frameworks?
+Favorite Frontend tools?
 
 <code>selected = {JSON.stringify(selected)}</code>
 
@@ -168,6 +168,12 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    One of `true`, `false` or `'desktop'`. Whether to set the cursor back to the input element after selecting an element. 'desktop' means only do so if current window width is larger than the current value of `breakpoint` prop (default 800).
 
+1. ```ts
+   form_input: HTMLInputElement | null = null
+   ```
+
+   Handle to the `<input>` DOM node that's responsible for form validity checks and passing selected options to form submission handlers. Only available after component mounts (`null` before then).
+
 1. ```ts
    id: string | null = null
    ```
@@ -190,7 +196,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    invalid: boolean = 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.
+   If `required = true, 1, 2, ...` and user tries to submit form but `selected = []` is empty/`selected.length < required`, `invalid` is automatically set to `true` and CSS class `invalid` applied to the top-level `div.multiselect`. `invalid` class is removed as soon as any change to `selected` is registered. `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.
 
 1. ```ts
    loading: boolean = false
@@ -223,11 +229,21 @@ Full list of props/bindable variables for this component. The `Option` type you
    maxSelectMsg = (current: number, max: number) => `${current}/${max}`
    ```
 
+   Use CSS selector `span.max-select-msg` (or prop `maxSelectMsgClass` if you're using a CSS framework like Tailwind) to customize appearance of the message container.
+
+1. ```ts
+   minSelect: number | null = null
+   ```
+
+   Conditionally render the `x` button which removes a selected option depending on the number of selected options. Meaning all remove buttons disappear if `selected.length <= minSelect`. E.g. if 2 options are selected and `minSelect={3}`, users will not be able to remove any selections until they selected more than 3 options.
+
+   Note: Prop `required={3}` should be used instead if you only care about the component state at form submission time. `minSelect={3}` should be used if you want to place constraints on component state at all times.
+
 1. ```ts
    name: string | null = null
    ```
 
-   Applied to the `<input>` element. Sets the key of this field in a submitted form data object. See [form example](https://svelte-multiselect.netlify.app/form).
+   Applied to the `<input>` element. Sets the key of this field in a submitted form data object. See [form example](https://janosh.github.io/svelte-multiselect/form).
 
 1. ```ts
    noMatchingOptionsMsg: string = `No matching options`
@@ -284,10 +300,10 @@ Full list of props/bindable variables for this component. The `Option` type you
    Title text to display when user hovers over button to remove selected option (which defaults to a cross icon).
 
 1. ```ts
-   required: boolean = false
+   required: boolean | number = false
    ```
 
-   Whether forms can be submitted without selecting any options. Aborts submission, is scrolled into view and shows help "Please fill out" message when true and user tries to submit with no options selected.
+   If `required = true, 1, 2, ...` forms can't be submitted without selecting given number of options. `true` means 1. `false` means even empty MultiSelect will pass form validity check. If user tries to submit a form containing MultiSelect with less than the required number of options, submission is aborted, MultiSelect scrolls into view and shows message "Please select at least `required` options".
 
 1. ```ts
    resetFilterOnAdd: boolean = true
@@ -310,11 +326,17 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    Array of currently selected options. Supports 2-way binding `bind:selected={[1, 2, 3]}` to control component state externally. Can be passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction.
 
+1. ```ts
+   selectedOptionsDraggable: boolean = true
+   ```
+
+   Whether selected options are draggable so users can change their order.
+
 1. ```ts
    sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
    ```
 
-   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.
+   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://janosh.github.io/svelte-multiselect/sort-selected) example.
 
 1. ```ts
    value: Option | Option[] | null = null
@@ -334,7 +356,7 @@ Full list of props/bindable variables for this component. The `Option` type you
 
 Example:
 
-```svelte
+```html
 <MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]}>
   <span let:idx let:option slot="option">
     {idx + 1}
@@ -395,7 +417,7 @@ Example:
 
 For example, here's how you might annoy your users with an alert every time one or more options are added or removed:
 
-```svelte
+```html
 <MultiSelect
   on:change={(e) => {
     if (e.detail.type === 'add') alert(`You added ${e.detail.option}`)
@@ -409,7 +431,7 @@ For example, here's how you might annoy your users with an alert every time one
 
 The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutorial/component-events). This component also forwards many DOM events from the `<input>` node: `blur`, `change`, `click`, `keydown`, `keyup`, `mousedown`, `mouseenter`, `mouseleave`, `touchcancel`, `touchend`, `touchmove`, `touchstart`. Registering listeners for these events works the same:
 
-```svelte
+```html
 <MultiSelect
   options={[1, 2, 3]}
   on:keyup={(event) => console.log('key', event.target.value)}
@@ -420,7 +442,7 @@ The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutor
 
 TypeScript users can import the types used for internal type safety:
 
-```svelte
+```html
 <script lang="ts">
   import MultiSelect from 'svelte-multiselect'
   import type { Option, ObjectOption } from 'svelte-multiselect'
@@ -438,7 +460,7 @@ TypeScript users can import the types used for internal type safety:
 
 There are 3 ways to style this component. To understand which options do what, it helps to keep in mind this simplified DOM structure of the component:
 
-```svelte
+```html
 <div class="multiselect">
   <ul class="selected">
     <li>Selected 1</li>
@@ -493,14 +515,14 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-li-selected-bg)`: Background of selected list items in options pane.
   - `color: var(--sms-li-selected-color)`: Text color of selected list items in options pane.
 - `div.multiselect > ul.options > li.active`
-  - `background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)))`: Background of active dropdown item. Items become active either by mouseover or by navigating to them with arrow keys.
+  - `background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)))`: Background of active options. Options in the dropdown list become active either by mouseover or by navigating to them with arrow keys. Selected options become active when `selectedOptionsDraggable=true` and an option is being dragged to a new position. Note the active option in that case is not the dragged option but the option under it whose place it will take on drag end.
 - `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.
 
 For example, to change the background color of the options dropdown:
 
-```svelte
+```html
 <MultiSelect --sms-options-bg="white" />
 ```
 
@@ -514,16 +536,18 @@ The second method allows you to pass in custom classes to the important DOM elem
 - `ulOptionsClass`: available options listed in the dropdown when component is in `open` state
 - `liOptionClass`: list items selectable from dropdown list
 - `liActiveOptionClass`: the currently active dropdown list item (i.e. hovered or navigated to with arrow keys)
+- `maxSelectMsgClass`: small span towards the right end of the input field displaying to the user how many of the allowed number of options they've already selected
 
 This simplified version of the DOM structure of the component shows where these classes are inserted:
 
-```svelte
+```html
 <div class="multiselect {outerDivClass}">
   <input class={inputClass} />
   <ul class="selected {ulSelectedClass}">
     <li class={liSelectedClass}>Selected 1</li>
     <li class={liSelectedClass}>Selected 2</li>
   </ul>
+  <span class="maxSelectMsgClass">2/5 selected</span>
   <ul class="options {ulOptionsClass}">
     <li class={liOptionClass}>Option 1</li>
     <li class="{liOptionClass} {liActiveOptionClass}">
@@ -583,13 +607,6 @@ Odd as it may seem, you get the most fine-grained control over the styling of ev
 }
 ```
 
-## Want to contribute?
-
-To submit a PR, clone the repo, install dependencies and start the dev server to try out your changes.
+## Want to contribute to this project?
 
-```sh
-git clone https://github.com/janosh/svelte-multiselect
-cd svelte-multiselect
-pnpm install
-pnpm dev
-```
+[Here are some steps](https://github.com/janosh/svelte-multiselect/blob/main/contributing.md) to get you started!