v11.1.1

Author: janosh

changelog.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v11.1.1](https://github.com/janosh/svelte-multiselect/compare/v11.1.0...v11.1.1)
+
+> 20 May 2025
+
+- more playwright tests for active+inactive portal [`66ebd8d`](https://github.com/janosh/svelte-multiselect/commit/66ebd8dedc799180daba0af734f9cbebd1b7c723)
+- pnpm remove svelte-multiselect [`bc6ee6c`](https://github.com/janosh/svelte-multiselect/commit/bc6ee6c5a75d0c7c223159ee72da568e5eb6befd)
+- replace `browser` from @app/env import with `typeof window` check in portal() action to support non-sveltekit apps [`2a8f116`](https://github.com/janosh/svelte-multiselect/commit/2a8f116b89b9f42e075f57dc7ecb2b63a4065723)
+- remove unused link-check-config.json [`c4f26ef`](https://github.com/janosh/svelte-multiselect/commit/c4f26efda66e3a153cf2a5ec0fcd2de29d19f4bc)
+
 #### [v11.1.0](https://github.com/janosh/svelte-multiselect/compare/v11.0.0...v11.1.0)
 
 > 17 May 2025

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.1.0",
+  "version": "11.1.1",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",

src/routes/(demos)/modal/+page.svelte

@@ -1,174 +1,88 @@
 <script lang="ts">
   import MultiSelect from '$lib'
   import { get_label } from '$lib/utils'
-  import { colors, foods, languages, octicons } from '$site/options'
+  import { languages, octicons } from '$site/options'
 
-  let show_modal_1 = $state(false)
-  let show_modal_2 = $state(false)
-
-  const foods_options = foods
-  const colors_options = colors
-
-  let selected_foods = $state<string[]>([])
-  let selected_colors = $state<string[]>([])
+  let show_modal = $state(false)
   let selected_languages = $state<string[]>([])
   let selected_octicons = $state<string[]>([])
 
   function handle_escape(event: KeyboardEvent): void {
-    if (event.key === `Escape`) {
-      show_modal_1 = false
-      show_modal_2 = false
-    }
+    if (event.key === `Escape`) show_modal = false
   }
 </script>
 
 <svelte:window onkeydown={handle_escape} />
 
 <h2>MultiSelect in Modal Demo</h2>
 
-<div class="button-bar">
-  <button onclick={() => (show_modal_1 = true)}>Open Modal 1 (Vertical Selects)</button>
-  <button onclick={() => (show_modal_2 = true)}>Open Modal 2 (Horizontal Selects)</button>
-</div>
+<button onclick={() => (show_modal = true)} style="padding: 3pt 6pt; margin: 1em auto;">
+  Open Modal
+</button>
 
-{#if show_modal_1}
+{#if show_modal}
   <div
     class="modal-backdrop"
     onclick={(event) => {
-      if (event.target === event.currentTarget) show_modal_1 = false
+      if (event.target === event.currentTarget) show_modal = false
     }}
     onkeydown={(event) => {
-      if (event.key === `Enter` || event.key === ` `) show_modal_1 = false
+      if (event.key === `Enter` || event.key === ` `) show_modal = false
     }}
     role="button"
     tabindex="0"
   >
     <div
-      class="modal-content modal-1"
+      class="modal-content modal"
       onkeydown={(event) => {
         if (event.key !== `Escape`) event.stopPropagation()
       }}
       role="dialog"
       aria-modal="true"
-      aria-labelledby="modal-1-title"
+      aria-labelledby="modal-title"
       tabindex="-1"
     >
-      <h2 id="modal-1-title">Modal 1: Favorite Foods & Colors</h2>
+      <h2 id="modal-title">Modal: Languages & Octicons</h2>
       <MultiSelect
-        bind:selected={selected_foods}
-        options={foods_options}
+        bind:selected={selected_languages}
+        options={languages}
         portal={{ active: true }}
-        placeholder="Choose foods..."
+        placeholder="Choose languages..."
+        style="margin-bottom: 1em;"
       />
       <MultiSelect
-        bind:selected={selected_colors}
-        options={colors_options}
+        bind:selected={selected_octicons}
+        options={octicons}
         portal={{ active: true }}
-        placeholder="Choose colors..."
+        placeholder="Choose octicons..."
       />
-      <p>Selected Foods: {selected_foods.map(get_label).join(`, `) || `None`}</p>
-      <p>Selected Colors: {selected_colors.map(get_label).join(`, `) || `None`}</p>
-      <button onclick={() => (show_modal_1 = false)}>Close Modal 1</button>
-    </div>
-  </div>
-{/if}
-
-{#if show_modal_2}
-  <div
-    class="modal-backdrop"
-    onclick={(event) => {
-      if (event.target === event.currentTarget) show_modal_2 = false
-    }}
-    onkeydown={(event) => {
-      if (event.key === `Enter` || event.key === ` `) show_modal_2 = false
-    }}
-    role="button"
-    tabindex="0"
-  >
-    <div
-      class="modal-content modal-2"
-      onkeydown={(event) => {
-        if (event.key !== `Escape`) event.stopPropagation()
-      }}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="modal-2-title"
-      tabindex="-1"
-    >
-      <h2 id="modal-2-title">Modal 2: Languages & Octicons (Horizontal)</h2>
-      <div class="horizontal-selects">
-        <MultiSelect
-          bind:selected={selected_languages}
-          options={languages}
-          portal={{ active: true }}
-          placeholder="Choose languages..."
-        />
-        <MultiSelect
-          bind:selected={selected_octicons}
-          options={octicons}
-          portal={{ active: true }}
-          placeholder="Choose octicons..."
-        />
-      </div>
       <p>Selected Languages: {selected_languages.map(get_label).join(`, `) || `None`}</p>
       <p>Selected Octicons: {selected_octicons.map(get_label).join(`, `) || `None`}</p>
-      <button onclick={() => (show_modal_2 = false)}>Close Modal 2</button>
+      <button onclick={() => (show_modal = false)}>Close Modal 2</button>
     </div>
   </div>
 {/if}
 
 <style>
-  .button-bar {
-    margin-bottom: 1.5em;
-    display: flex;
-    gap: 1em;
-  }
   .modal-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
   }
-
   .modal-content {
     background-color: var(--modal-bg, #2d2d2d);
-    color: var(--modal-text-color, #f0f0f0);
     padding: 10px 20px 20px;
     border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-    max-width: 600px;
-    max-height: 80vh;
-
-    --sms-bg: #3a3a3a;
-    --sms-text-color: #e0e0e0;
-    --sms-border: 1pt solid #555;
-    --sms-focus-border: 1pt solid #7799ff;
-    --sms-placeholder-color: #aaa;
-    --sms-selected-bg: #4a4a5a;
-    --sms-selected-text-color: #f0f0f0;
-    --sms-options-bg: #333;
-    --sms-li-active-bg: #505060;
-    --sms-li-selected-bg: #404050;
-    --sms-li-selected-color: #e0e0e0;
-    --sms-remove-btn-hover-color: #ff8f8f;
-    --sms-disabled-bg: #4f4f4f;
-    --sms-li-disabled-bg: #454545;
-    --sms-li-disabled-text: #888;
   }
   .modal-content h2 {
     margin-top: 0;
   }
-
-  .horizontal-selects {
-    display: flex;
-    gap: 1em;
-  }
-
   .modal-content button {
     background-color: #555;
     color: white;