add <slot name="after-input">

package.json

@@ -23,17 +23,17 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^4.0.0-next.1"
+    "svelte": "^4.0.0"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.1.4",
     "@playwright/test": "^1.35.1",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.20.4",
-    "@sveltejs/package": "2.0.2",
-    "@sveltejs/vite-plugin-svelte": "2.4.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@sveltejs/kit": "^1.20.5",
+    "@sveltejs/package": "2.1.0",
+    "@sveltejs/vite-plugin-svelte": "2.4.2",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
     "@vitest/coverage-v8": "^0.32.2",
     "eslint": "^8.43.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -46,11 +46,11 @@
     "prettier-plugin-svelte": "^2.10.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.3",
+    "svelte-check": "^3.4.4",
     "svelte-preprocess": "^5.0.4",
     "svelte-toc": "^0.5.5",
-    "svelte-zoo": "^0.4.7",
-    "svelte2tsx": "^0.6.15",
+    "svelte-zoo": "^0.4.8",
+    "svelte2tsx": "^0.6.16",
     "typescript": "5.1.3",
     "vite": "^4.3.9",
     "vitest": "^0.32.2"

readme.md

@@ -8,7 +8,7 @@
 [![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml)
 [![GitHub Pages](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.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/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
+[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md)
 [![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
 [![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-multiselect)
 
@@ -394,8 +394,9 @@ Full list of props/bindable variables for this component. The `Option` type you
    - `textInputIsDuplicate: boolean`: Whether user has typed text that matches an already existing option.
    - `searchText: string`: The text user typed into search input.
    - `msg: string`: `duplicateOptionMsg` if user input is a duplicate else `createOptionMsg`.
+1. `slot='after-input'`: ForPlaced after the search input. For arbitrary content like icons or temporary messages. Receives props `selected`, `disabled`, `invalid`, `id`, `placeholder`, `open`, `required`.
 
-Example:
+Example using several slots:
 
 ```svelte
 <MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]} let:idx let:option>

src/lib/MultiSelect.svelte

@@ -567,6 +567,16 @@
       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">