v11.0.0

Author: janosh

.github/workflows/link-check.yml

@@ -16,6 +16,6 @@ jobs:
       - name: Discover broken links
         uses: lycheeverse/lychee-action@v2
         with:
-          args: --exclude '%7B' --accept 100..=103,200..=299,403,429 -- ./**/*.{md,svelte,ts}
+          args: --exclude '%7B' --exclude '/' --accept 100..=103,200..=299,403,429 -- ./**/*.{md,svelte,ts}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

changelog.md

@@ -2,8 +2,18 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+### [v11.0.0](https://github.com/janosh/svelte-multiselect/compare/v11.0.0-rc.1...v11.0.0)
+
+> 15 May 2025
+
+- Prevent empty style attributes on `ul.selected > li` and `ul.options > li` [`#304`](https://github.com/janosh/svelte-multiselect/pull/304)
+- Breaking: Svelte 5 [`#295`](https://github.com/janosh/svelte-multiselect/pull/295)
+- update and fix linting, fix 2 dead readme links [`91f22d0`](https://github.com/janosh/svelte-multiselect/commit/91f22d0cafdf931607288d18c5268badd358d83b)
+
 #### [v11.0.0-rc.1](https://github.com/janosh/svelte-multiselect/compare/v10.3.0...v11.0.0-rc.1)
 
+> 24 October 2024
+
 - update `MultiSelect.svelte` for Svelte5 compatibility [`#293`](https://github.com/janosh/svelte-multiselect/pull/293)
 
 #### [v10.3.0](https://github.com/janosh/svelte-multiselect/compare/v10.2.0...v10.3.0)

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.0.0-rc.1",
+  "version": "11.0.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -44,16 +44,16 @@
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-svelte": "^3.4.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.28.6",
-    "svelte-check": "^4.1.7",
+    "svelte": "^5.30.1",
+    "svelte-check": "^4.2.1",
     "svelte-multiselect": "11.0.0-rc.1",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.0",
     "svelte-zoo": "^0.4.18",
-    "svelte2tsx": "^0.7.37",
+    "svelte2tsx": "^0.7.39",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",

src/lib/MultiSelect.svelte

@@ -683,7 +683,7 @@
       bind:this={ul_options}
       style={ulOptionsStyle}
     >
-      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as optionItem, idx (key(optionItem))}
+      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as optionItem, idx (duplicates ? [key(optionItem), idx] : key(optionItem))}
         {@const {
           label,
           disabled = null,

src/routes/(demos)/allow-user-options/+page.svx renamed to src/routes/(demos)/allow-user-options/+page.md

@@ -1,6 +1,6 @@
 ## How to acquire form data in submission handler
 
-This example shows the JavaScript way of handling MultiSelect fields in form submission events. If you're using SvelteKit, you may want check out [this example](kit-form-actions) on to use [form actions](https://kit.svelte.dev/docs/form-actions) instead (which works even in browsers with JS disabled).
+This example shows the JavaScript way of handling MultiSelect fields in form submission events. If you're using SvelteKit, you may want check out [this example](/kit-form-actions) on to use [form actions](https://kit.svelte.dev/docs/form-actions) instead (which works even in browsers with JS disabled).
 
 > Hint: Use<code>JSON.parse()</code> to convert the string value passed to form submit handler back to array.
 

src/routes/(demos)/cmd-palette/+page.svx renamed to src/routes/(demos)/cmd-palette/+page.md

@@ -9,8 +9,8 @@
 This example shows the SvelteKit form action way of handling MultiSelect fields in form submission events. If you're not interested in [progressively enhanced forms](https://kit.svelte.dev/docs/form-actions#progressive-enhancement) (i.e. supporting no-JS browsers) take a look at the [JS form example](form) instead.
 
 > Note that this example will only work when running the dev server locally since it needs
-a server to respond to the form's POST request and this documentation site is only static
-HTML.
+> a server to respond to the form's POST request and this documentation site is only static
+> HTML.
 
 ```svelte example stackblitz
 <script lang="ts">

src/routes/(demos)/css-classes/+page.svx renamed to src/routes/(demos)/css-classes/+page.md

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { FileDetails } from 'svelte-zoo'
-  import language_slot_src from '$site/LanguageSnippet.svelte?raw'
+  import language_snippet_src from '$site/LanguageSnippet.svelte?raw'
   import options_src from '$site/options.ts?raw'
 </script>
 
@@ -27,8 +27,8 @@
 ```
 
 <FileDetails files={[
-  { title: `LanguageSnippet.svelte`, content: language_slot_src },
-  { title: `options.ts`, content: options_src },
+{ title: `LanguageSnippet.svelte`, content: language_snippet_src },
+{ title: `options.ts`, content: options_src },
 ]} />
 
 When setting an integer value for `maxSelect` Multiselect will

src/routes/(demos)/disabled/+page.svx renamed to src/routes/(demos)/disabled/+page.md

@@ -6,7 +6,7 @@
 
 ## Page-Reload Persistent MultiSelect
 
-`language_store` is a Svelte [`writable`](https://svelte.dev/tutorial/writable-stores) that's bound to the browser's `sessionStorage`. This example shows how MultiSelect retains its `selected` state on page reload.
+`language_store` is a Svelte [`writable`](https://svelte.dev/docs/svelte/svelte-store#writable) that's bound to the browser's `sessionStorage`. This example shows how MultiSelect retains its `selected` state on page reload.
 
 <br />
 

src/routes/(demos)/form/+page.svx renamed to src/routes/(demos)/form/+page.md

@@ -2,7 +2,7 @@
 
 <label for="fav-languages">Favorite programming languages? <span>multi select</span></label>
 
-```svelte example collapsible repl="https://svelte.dev/repl/e3b88f59f62b498d943ecf7756ab75d7" stackblitz="src/site/Examples.svx"
+```svelte example collapsible repl="https://svelte.dev/repl/e3b88f59f62b498d943ecf7756ab75d7" stackblitz="src/site/Examples.md"
 <script lang="ts">
   import MultiSelect from '$lib'
   import { languages } from '$site/options'
@@ -27,7 +27,7 @@ selected = {JSON.stringify(selected) || `[]`}
 
 <label for="fav-ml-tool">Favorite machine learning tool? <span>single select with loading indicator on text input</span></label>
 
-```svelte example collapsible repl="https://svelte.dev/repl/79e22e1905c94456aa21564b4d5f8759" stackblitz="src/site/Examples.svx"
+```svelte example collapsible repl="https://svelte.dev/repl/79e22e1905c94456aa21564b4d5f8759" stackblitz="src/site/Examples.md"
 <script lang="ts">
   import MultiSelect from '$lib'
   import { ml_libs } from '$site/options'
@@ -59,7 +59,7 @@ value = {JSON.stringify(value) || `null`}
 
 <label for="confetti-select">Chance of Confetti <span>max select with custom filter function and callback on item selection</span></label>
 
-```svelte example collapsible repl="https://svelte.dev/repl/516279bd62ec424986115263c2cdc169" stackblitz="src/site/Examples.svx"
+```svelte example collapsible repl="https://svelte.dev/repl/516279bd62ec424986115263c2cdc169" stackblitz="src/site/Examples.md"
 <script lang="ts">
   import MultiSelect from '$lib'
   import { frontend_libs } from '$site/options'
@@ -102,7 +102,7 @@ value = {JSON.stringify(value) || `null`}
 
 <label for="color-select">Color select <span>with form submission</span></label>
 
-```svelte example collapsible repl="https://svelte.dev/repl/3a217c39932047a09f61d6425b04a7c3" stackblitz="src/site/Examples.svx"
+```svelte example collapsible repl="https://svelte.dev/repl/3a217c39932047a09f61d6425b04a7c3" stackblitz="src/site/Examples.md"
 <script lang="ts">
   import MultiSelect from '$lib'
   import { colors } from '$site/options'
@@ -141,7 +141,7 @@ value = {JSON.stringify(value) || `null`}
 
 <label for="countries">What country are you from? <span><code>minSelect=1</code> means no <code>x</code> button to remove the selected option</span></label>
 
-```svelte example collapsible repl="https://svelte.dev/repl/4ff40862436e4bfbb2bd55d234352bb1" stackblitz="src/site/Examples.svx"
+```svelte example collapsible repl="https://svelte.dev/repl/4ff40862436e4bfbb2bd55d234352bb1" stackblitz="src/site/Examples.md"
 <script lang="ts">
   import MultiSelect from '$lib'
   import { countries } from '$site/options'

src/routes/(demos)/kit-form-actions/+page.svx renamed to src/routes/(demos)/kit-form-actions/+page.md

@@ -1,6 +1,6 @@
 export { default as ColorSnippet } from './ColorSnippet.svelte'
 export { default as DemoNav } from './DemoNav.svelte'
-export { default as Examples } from './Examples.svx'
+export { default as Examples } from './Examples.md'
 export { default as Footer } from './Footer.svelte'
 export { default as LanguageSnippet } from './LanguageSnippet.svelte'
 export { default as MinusIcon } from './MinusIcon.svelte'

src/routes/(demos)/min-max-select/+page.svx renamed to src/routes/(demos)/min-max-select/+page.md

@@ -188,7 +188,7 @@ test.describe(`disabled multiselect`, () => {
     ).toHaveLength(0)
   })
 
-  test(`renders disabled slot`, async ({ page }) => {
+  test(`renders disabled snippet`, async ({ page }) => {
     const span = await page.locator(
       `span:has-text('This component is disabled. It won't even open.')`,
     )
@@ -293,6 +293,8 @@ test.describe(`multiselect`, () => {
     page,
   }) => {
     await page.goto(`/ui`, { waitUntil: `networkidle` })
+    // reload page
+    await page.reload()
 
     await page.click(`#foods input[autocomplete]`)
 
@@ -567,8 +569,7 @@ test.describe(`snippets`, () => {
       `custom expand icon snippet is not rendered`,
     ).toHaveCount(1)
 
-    // make sure, rendering different expand-icon slot depending on open=true/false works
-    // for that, first get d attribute of path inside svg
+    // make sure, rendering different expandIcon snippet depending on open=true/false works
     const expand_icon_path = await expand_icon_locator
       .locator(`path`)
       .first()