From 63768e8e1f9e6e0e961639b8d9eae27dfcb1962d Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 17 Feb 2024 12:44:44 +0100
Subject: [PATCH 1/5] remove --force from npm install in CI

---
 .github/workflows/gh-pages.yml | 2 --
 .pre-commit-config.yaml        | 4 ++--
 tests/MultiSelect.test.ts      | 7 +++----
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index 5ede3b9..0cfba03 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -10,5 +10,3 @@ on:
 jobs:
   build:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
-    with:
-      install-cmd: npm install -f
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index a55a09a..7149c2e 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -19,7 +19,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.1.0
+    rev: v4.0.0-alpha.8
     hooks:
       - id: prettier
         args: [--write] # edit files in-place
@@ -37,7 +37,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.53.0
+    rev: v9.0.0-beta.0
     hooks:
       - id: eslint
         types: [file]
diff --git a/tests/MultiSelect.test.ts b/tests/MultiSelect.test.ts
index d8f220b..097e3e5 100644
--- a/tests/MultiSelect.test.ts
+++ b/tests/MultiSelect.test.ts
@@ -46,10 +46,9 @@ test.describe(`input`, async () => {
 
     await page.fill(`#foods input[autocomplete]`, `Pineapple`)
 
-    expect(
-      await page.$$(`div.multiselect.open > ul.options > li`),
-    ).toHaveLength(1)
-    const text = await page.textContent(`div.multiselect.open > ul.options`)
+    const ul_selector = `div.multiselect.open > ul.options`
+    expect(await page.$$(`${ul_selector} > li`)).toHaveLength(1)
+    const text = await page.textContent(ul_selector)
     expect(text?.trim()).toBe(`🍍 Pineapple`)
   })
 })

From 7239d602b2368a6f575c80b90b57637ed085e0ab Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 17 Feb 2024 12:46:17 +0100
Subject: [PATCH 2/5] use from 'svelte-multiselect' imports in examples

instead of flashing onMount $lib -> svelte-multiselect replace
---
 package.json                                      |  1 +
 src/routes/(demos)/allow-user-options/+page.svx   |  8 ++++----
 src/routes/(demos)/css-classes/+page.svx          |  2 +-
 src/routes/(demos)/disabled/+page.svx             |  2 +-
 src/routes/(demos)/duplicates/+page.md            |  2 +-
 src/routes/(demos)/form/+page.svx                 |  2 +-
 src/routes/(demos)/kit-form-actions/+page.svx     |  2 +-
 src/routes/(demos)/min-max-select/+page.svx       |  8 ++++----
 src/routes/(demos)/parse-labels-as-html/+page.svx |  2 +-
 src/routes/(demos)/persistent/+page.svx           |  2 +-
 src/routes/(demos)/slots/+page.svx                |  6 +++---
 src/routes/(demos)/sort-selected/+page.svx        |  2 +-
 src/routes/(demos)/ui/+page.svx                   |  2 +-
 src/site/Examples.svx                             | 10 +++++-----
 svelte.config.js                                  |  2 +-
 15 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 5752c7a..c496b36 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "svelte-check": "^3.6.3",
+    "svelte-multiselect": "^10.2.0",
     "svelte-preprocess": "^5.1.3",
     "svelte-toc": "^0.5.6",
     "svelte-zoo": "^0.4.9",
diff --git a/src/routes/(demos)/allow-user-options/+page.svx b/src/routes/(demos)/allow-user-options/+page.svx
index 6e9e181..bdf7561 100644
--- a/src/routes/(demos)/allow-user-options/+page.svx
+++ b/src/routes/(demos)/allow-user-options/+page.svx
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods, languages } from '$site/options'
   import { LanguageSlot } from '$site'
 
@@ -12,7 +12,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods } from '$site/options'
   import { Toggle } from 'svelte-zoo'
 
@@ -41,7 +41,7 @@
 
 ```svelte example stackblitz id="languages"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
 
@@ -67,7 +67,7 @@ You can start with no options and let users populate MultiSelect from scratch. I
 
 ```svelte example stackblitz id="no-default-options"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   let selected = []
 </script>
diff --git a/src/routes/(demos)/css-classes/+page.svx b/src/routes/(demos)/css-classes/+page.svx
index 91c76b4..b5930d7 100644
--- a/src/routes/(demos)/css-classes/+page.svx
+++ b/src/routes/(demos)/css-classes/+page.svx
@@ -2,7 +2,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   const options = [...Array(7).keys()].map((idx) => `Option ${idx + 1}`)
 </script>
diff --git a/src/routes/(demos)/disabled/+page.svx b/src/routes/(demos)/disabled/+page.svx
index fd62376..9cc93eb 100644
--- a/src/routes/(demos)/disabled/+page.svx
+++ b/src/routes/(demos)/disabled/+page.svx
@@ -5,7 +5,7 @@
 
 ```svelte example stackblitz id="disabled-input-title"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 </script>
 
 <MultiSelect
diff --git a/src/routes/(demos)/duplicates/+page.md b/src/routes/(demos)/duplicates/+page.md
index 242af2a..6ca0a06 100644
--- a/src/routes/(demos)/duplicates/+page.md
+++ b/src/routes/(demos)/duplicates/+page.md
@@ -4,7 +4,7 @@
 
 ```svelte example stackblitz id="disabled-input-title"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { Toggle } from 'svelte-zoo'
 
   let duplicates = true
diff --git a/src/routes/(demos)/form/+page.svx b/src/routes/(demos)/form/+page.svx
index fcea675..c65a1d2 100644
--- a/src/routes/(demos)/form/+page.svx
+++ b/src/routes/(demos)/form/+page.svx
@@ -6,7 +6,7 @@ This example shows the JavaScript way of handling MultiSelect fields in form sub
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ColorSlot } from '$site'
   import { colors } from '$site/options'
 
diff --git a/src/routes/(demos)/kit-form-actions/+page.svx b/src/routes/(demos)/kit-form-actions/+page.svx
index ec4c3ea..3707f87 100644
--- a/src/routes/(demos)/kit-form-actions/+page.svx
+++ b/src/routes/(demos)/kit-form-actions/+page.svx
@@ -14,7 +14,7 @@ HTML.
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ColorSlot } from '$site'
   import { colors } from '$site/options'
   import { repository } from '$root/package.json'
diff --git a/src/routes/(demos)/min-max-select/+page.svx b/src/routes/(demos)/min-max-select/+page.svx
index 9c6ace5..4ce68e1 100644
--- a/src/routes/(demos)/min-max-select/+page.svx
+++ b/src/routes/(demos)/min-max-select/+page.svx
@@ -10,7 +10,7 @@
 
 ```svelte example stackblitz id="languages"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
 </script>
@@ -41,7 +41,7 @@ When setting an integer value for `maxSelect` Multiselect will
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   function handle_submit(event: SubmitEvent) {
     const form_data = new FormData(event.target)
@@ -61,7 +61,7 @@ Of course, you can combine `maxSelect={n}` and `required={m}` where `n>=m`.
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   function handle_submit(event: SubmitEvent) {
     const form_data = new FormData(event.target)
@@ -84,7 +84,7 @@ Of course, you can combine `maxSelect={n}` and `required={m}` where `n>=m`.
 ```svelte example stackblitz
 <script>
   // for https://github.com/janosh/svelte-multiselect/issues/249
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { onMount } from 'svelte'
 
   const red_pill = `🔴  &ensp; Red Pill (<a href="https://wikipedia.org/wiki/Red_pill_and_blue_pill">what?</a>)`
diff --git a/src/routes/(demos)/parse-labels-as-html/+page.svx b/src/routes/(demos)/parse-labels-as-html/+page.svx
index 799ebd1..81c84e8 100644
--- a/src/routes/(demos)/parse-labels-as-html/+page.svx
+++ b/src/routes/(demos)/parse-labels-as-html/+page.svx
@@ -4,7 +4,7 @@ When `parseLabelsAsHtml={true}`, MultiSelect renders HTML in option labels.
 
 ```svelte example stackblitz
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   const red_pill = `🔴  &ensp; Red Pill (<a href="https://wikipedia.org/wiki/Red_pill_and_blue_pill">what?</a>)`
   const blue_pill = `🔵  &ensp; Blue Pill &nbsp; <img height="35px" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/a/ab/Morpheus.jpg" />`
diff --git a/src/routes/(demos)/persistent/+page.svx b/src/routes/(demos)/persistent/+page.svx
index b673a6a..4bcbbc6 100644
--- a/src/routes/(demos)/persistent/+page.svx
+++ b/src/routes/(demos)/persistent/+page.svx
@@ -12,7 +12,7 @@
 
 ```svelte example stackblitz id="languages"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { language_store } from '$site/stores'
diff --git a/src/routes/(demos)/slots/+page.svx b/src/routes/(demos)/slots/+page.svx
index 0789320..da08200 100644
--- a/src/routes/(demos)/slots/+page.svx
+++ b/src/routes/(demos)/slots/+page.svx
@@ -8,7 +8,7 @@
 
 ```svelte example stackblitz id="languages-1"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot, MinusIcon } from '$site'
   import { Icon } from 'svelte-zoo'
@@ -33,7 +33,7 @@
 
 ```svelte example stackblitz id="languages-2"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { Icon } from 'svelte-zoo'
@@ -69,7 +69,7 @@
 
 ```svelte example stackblitz id="languages-2"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { Icon } from 'svelte-zoo'
diff --git a/src/routes/(demos)/sort-selected/+page.svx b/src/routes/(demos)/sort-selected/+page.svx
index 34fb263..a95d91a 100644
--- a/src/routes/(demos)/sort-selected/+page.svx
+++ b/src/routes/(demos)/sort-selected/+page.svx
@@ -8,7 +8,7 @@
 
 ```svelte example stackblitz id="default-sort"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { frontend_libs } from '$site/options'
 </script>
 
diff --git a/src/routes/(demos)/ui/+page.svx b/src/routes/(demos)/ui/+page.svx
index 540dcfd..10e7bec 100644
--- a/src/routes/(demos)/ui/+page.svx
+++ b/src/routes/(demos)/ui/+page.svx
@@ -5,7 +5,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods } from '$site/options'
 
   function random_color() {
diff --git a/src/site/Examples.svx b/src/site/Examples.svx
index 257bee4..6213c73 100644
--- a/src/site/Examples.svx
+++ b/src/site/Examples.svx
@@ -4,7 +4,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/e3b88f59f62b498d943ecf7756ab75d7" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import LanguageSlot from './LanguageSlot.svelte'
 
@@ -29,7 +29,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/79e22e1905c94456aa21564b4d5f8759" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ml_libs } from '$site/options'
 
   let value: { label: string, disabled: boolean, preselected: boolean }
@@ -64,7 +64,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/516279bd62ec424986115263c2cdc169" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { frontend_libs } from '$site/options'
   import RepoSlot from './RepoSlot.svelte'
   import { Confetti } from 'svelte-zoo'
@@ -105,7 +105,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/3a217c39932047a09f61d6425b04a7c3" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { colors } from '$site/options'
   import ColorSlot from './ColorSlot.svelte'
 
@@ -143,7 +143,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/4ff40862436e4bfbb2bd55d234352bb1" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { countries } from '$site/options'
 
   let selected: string[]
diff --git a/svelte.config.js b/svelte.config.js
index f9bc758..3cc02bd 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -27,7 +27,6 @@ const { default: pkg } = await import(`./package.json`, {
 })
 const defaults = {
   Wrapper: `svelte-zoo/CodeExample.svelte`,
-  pkg: pkg.name,
   repo: pkg.repository,
   hideStyle: true,
 }
@@ -48,6 +47,7 @@ export default {
     alias: {
       $root: `.`,
       $site: `./src/site`,
+      $lib: `svelte-multiselect`,
     },
 
     prerender: {

From e8c382d9410fe87dce40a69c93f23b45542b46b0 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 17 Feb 2024 12:46:34 +0100
Subject: [PATCH 3/5] enable svelte inspector

---
 src/lib/MultiSelect.svelte | 2 +-
 svelte.config.js           | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
index 424484b..ed26806 100644
--- a/src/lib/MultiSelect.svelte
+++ b/src/lib/MultiSelect.svelte
@@ -412,7 +412,7 @@
   let ul_options: HTMLUListElement
   // highlight text matching user-entered search text in available options
   function highlight_matching_options(event: InputEvent) {
-    if (!highlightMatches || typeof CSS == `undefined` || !CSS.highlights) return // don't try if CSS highlight API not supported
+    if (!highlightMatches || typeof CSS == `undefined` || !CSS.highlights) return // abort if CSS highlight API not supported
 
     // clear previous ranges from HighlightRegistry
     CSS.highlights.clear()
diff --git a/svelte.config.js b/svelte.config.js
index 3cc02bd..625d2f6 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -65,4 +65,10 @@ export default {
     // enable direct prop access for vitest unit tests
     accessors: process.env.TEST,
   },
+
+  vitePlugin: {
+    experimental: {
+      inspector: true,
+    },
+  },
 }

From b09fddbaf6231dace88792f11caeb9e4db4a7ff3 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 17 Feb 2024 12:48:23 +0100
Subject: [PATCH 4/5] invert Rust logo colors

was black and hard to see on dark site
---
 src/site/LanguageSlot.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/site/LanguageSlot.svelte b/src/site/LanguageSlot.svelte
index c018e99..0df27d0 100644
--- a/src/site/LanguageSlot.svelte
+++ b/src/site/LanguageSlot.svelte
@@ -25,4 +25,7 @@
   span {
     display: flex;
   }
+  img[alt='Rust'] {
+    filter: invert(1);
+  }
 </style>

From ad82b2d7a0eb9e664f86e26ba5077b78ae3b0fb3 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Sat, 17 Feb 2024 11:49:08 +0000
Subject: [PATCH 5/5] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 tsconfig.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 6b5192c..c10cdc9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,6 @@
     "sourceMap": true,
 
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true
-  }
+    "resolveJsonModule": true,
+  },
 }