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;