diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 08e3c7b9..75d73e4a 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -38,7 +38,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.26.0
+    rev: v9.27.0
     hooks:
       - id: eslint
         types: [file]
diff --git a/package.json b/package.json
index efeaaa67..043f6d6b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "package": "svelte-package",
     "serve": "vite build && vite preview",
     "check": "svelte-check src",
-    "test": "vitest --run --coverage tests/unit/*.ts && npm run test:e2e",
+    "test": "vitest run && playwright test",
     "test:unit": "vitest tests/unit/*.ts",
     "test:e2e": "playwright test tests/*.test.ts",
     "changelog": "npx auto-changelog --package --output changelog.md --hide-empty-releases --hide-credit --commit-limit false",
diff --git a/readme.md b/readme.md
index b5952af8..936db142 100644
--- a/readme.md
+++ b/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/packages/svelte/CHANGELOG.md)
+[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/peer/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)
 
diff --git a/src/app.css b/src/app.css
index c7433651..5c8a2a39 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,6 +2,7 @@
   --night: #0b0b1b;
   --blue: cornflowerblue;
   --text-color: #ccc;
+  --main-max-width: 50em;
 
   --sms-active-color: rgba(255, 255, 255, 0.1);
   --sms-focus-border: 1pt solid cornflowerblue;
@@ -28,7 +29,7 @@ main {
   margin: auto;
   margin-bottom: 3em;
   width: 100%;
-  max-width: 50em;
+  max-width: var(--main-max-width);
 }
 button,
 a.btn {
@@ -139,7 +140,7 @@ div.multiselect.invalid {
 aside.toc.desktop {
   position: fixed;
   top: 3em;
-  left: calc(50vw + 50em / 2);
+  left: calc(50vw + var(--main-max-width) / 2);
   max-width: 16em;
 }
 
diff --git a/src/lib/CmdPalette.svelte b/src/lib/CmdPalette.svelte
index ba049cf6..e917c107 100644
--- a/src/lib/CmdPalette.svelte
+++ b/src/lib/CmdPalette.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { tick, type Snippet } from 'svelte'
   import { fade } from 'svelte/transition'
-
   import Select from './MultiSelect.svelte'
   import type { MultiSelectProps } from './props'
   import type { ObjectOption } from './types'
@@ -22,12 +20,10 @@
     fade_duration?: number // in ms
     style?: string // for dialog
     // for span in option snippet, has no effect when specifying a custom option snippet
-    span_style?: string
     open?: boolean
     dialog?: HTMLDialogElement | null
     input?: HTMLInputElement | null
     placeholder?: string
-    children?: Snippet
   }
   let {
     actions,
@@ -35,21 +31,20 @@
     close_keys = [`Escape`],
     fade_duration = 200,
     style = ``,
-    span_style = ``,
     open = $bindable(false),
     dialog = $bindable(null),
     input = $bindable(null),
     placeholder = `Filter actions...`,
-    children,
     ...rest
   }: Props = $props()
 
+  $effect(() => {
+    if (open && input) input?.focus() // focus input when palette is opened
+  })
+
   async function toggle(event: KeyboardEvent) {
     if (triggers.includes(event.key) && event.metaKey && !open) {
-      // open on cmd+trigger
       open = true
-      await tick() // wait for dialog to open and input to be mounted
-      input?.focus()
     } else if (close_keys.includes(event.key) && open) {
       open = false
     }
@@ -65,8 +60,6 @@
     option.action(option.label)
     open = false
   }
-
-  const children_render = $derived(children)
 </script>
 
 <svelte:window onkeydown={toggle} onclick={close_if_outside} />
@@ -80,22 +73,18 @@
       onadd={trigger_action_and_close}
       onkeydown={toggle}
       {...rest}
-    >
-      {#snippet children({ option })}
-        <!-- wait for https://github.com/sveltejs/svelte/pull/8304 -->
-        {#if children_render}
-          {@render children_render()}
-        {:else}
-          <span style={span_style}>{option.label}</span>
-        {/if}
-      {/snippet}
-    </Select>
+      --sms-bg="var(--sms-options-bg)"
+      --sms-width="min(20em, 90vw)"
+      --sms-max-width="none"
+      --sms-placeholder-color="lightgray"
+      --sms-options-margin="1px 0"
+      --sms-options-border-radius="0 0 1ex 1ex"
+    />
   </dialog>
 {/if}
 
 <style>
-  /* TODO maybe remove global */
-  :where(:global(dialog)) {
+  :where(dialog) {
     position: fixed;
     top: 30%;
     border: none;
@@ -106,12 +95,4 @@
     z-index: 10;
     font-size: 2.4ex;
   }
-  dialog :global(div.multiselect) {
-    --sms-bg: var(--sms-options-bg);
-    --sms-width: min(20em, 90vw);
-    --sms-max-width: none;
-    --sms-placeholder-color: lightgray;
-    --sms-options-margin: 1px 0;
-    --sms-options-border-radius: 0 0 1ex 1ex;
-  }
 </style>
diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
index 5a75274e..92708baf 100644
--- a/src/lib/MultiSelect.svelte
+++ b/src/lib/MultiSelect.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { browser } from '$app/environment'
   import { tick } from 'svelte'
   import { flip } from 'svelte/animate'
-
   import type { FocusEventHandler, KeyboardEventHandler } from 'svelte/elements'
   import CircleSpinner from './CircleSpinner.svelte'
   import Wiggle from './Wiggle.svelte'
@@ -109,6 +109,7 @@
     onchange,
     onopen,
     onclose,
+    portal: portal_params = {},
     ...rest
   }: MultiSelectProps = $props()
 
@@ -199,20 +200,20 @@
   })
 
   // add an option to selected list
-  function add(option: Option, event: Event) {
+  function add(option_to_add: T, event: Event) {
     event.stopPropagation()
-    if (maxSelect && maxSelect > 1 && selected.length >= maxSelect) wiggle = true
-    if (!isNaN(Number(option)) && typeof selected.map(get_label)[0] === `number`) {
-      option = Number(option) as Option // convert to number if possible
+    if (maxSelect !== null && selected.length >= maxSelect) wiggle = true
+    if (!isNaN(Number(option_to_add)) && typeof selected.map(get_label)[0] === `number`) {
+      option_to_add = Number(option_to_add) as Option // convert to number if possible
     }
 
-    const is_duplicate = selected.map(key).includes(key(option))
+    const is_duplicate = selected.map(key).includes(key(option_to_add))
     if (
       (maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
       (duplicates || !is_duplicate)
     ) {
       if (
-        !options.includes(option) && // first check if we find option in the options list
+        !options.includes(option_to_add) && // first check if we find option in the options list
         // this has the side-effect of not allowing to user to add the same
         // custom option twice in append mode
         [true, `append`].includes(allowUserOptions) &&
@@ -222,32 +223,32 @@
         // a new option from the user-entered text
         if (typeof options[0] === `object`) {
           // if 1st option is an object, we create new option as object to keep type homogeneity
-          option = { label: searchText } as Option
+          option_to_add = { label: searchText } as Option
         } else {
           if (
             [`number`, `undefined`].includes(typeof options[0]) &&
             !isNaN(Number(searchText))
           ) {
             // create new option as number if it parses to a number and 1st option is also number or missing
-            option = Number(searchText) as Option
+            option_to_add = Number(searchText) as Option
           } else {
-            option = searchText as Option // else create custom option as string
+            option_to_add = searchText as Option // else create custom option as string
           }
-          oncreate?.({ option })
+          oncreate?.({ option: option_to_add })
         }
-        if (allowUserOptions === `append`) options = [...options, option]
+        if (allowUserOptions === `append`) options = [...options, option_to_add]
       }
 
       if (resetFilterOnAdd) searchText = `` // reset search string on selection
-      if ([``, undefined, null].includes(option as string | null)) {
-        console.error(`MultiSelect: encountered falsy option ${option}`)
+      if ([``, undefined, null].includes(option_to_add as string | null)) {
+        console.error(`MultiSelect: encountered falsy option ${option_to_add}`)
         return
       }
       if (maxSelect === 1) {
         // for maxSelect = 1 we always replace current option with new one
-        selected = [option]
+        selected = [option_to_add]
       } else {
-        selected = [...selected, option]
+        selected = [...selected, option_to_add]
         if (sortSelected === true) {
           selected = selected.sort((op1, op2) => {
             const [label1, label2] = [get_label(op1), get_label(op2)]
@@ -270,8 +271,8 @@
       } else if (!dropdown_should_close) {
         input?.focus()
       }
-      onadd?.({ option })
-      onchange?.({ option, type: `add` })
+      onadd?.({ option: option_to_add })
+      onchange?.({ option: option_to_add, type: `add` })
 
       invalid = false // reset error status whenever new items are selected
       form_input?.setCustomValidity(``)
@@ -279,26 +280,26 @@
   }
 
   // remove an option from selected list
-  function remove(to_remove: Option, event: Event) {
+  function remove(option_to_drop: T, event: Event) {
     event.stopPropagation()
     if (selected.length === 0) return
 
-    const idx = selected.findIndex((opt) => key(opt) === key(to_remove))
+    const idx = selected.findIndex((opt) => key(opt) === key(option_to_drop))
 
-    let [option] = selected.splice(idx, 1) // remove option from selected list
+    let [option_removed] = selected.splice(idx, 1) // remove option from selected list
 
-    if (option === undefined && allowUserOptions) {
+    if (option_removed === undefined && allowUserOptions) {
       // if option with label could not be found but allowUserOptions is truthy,
       // assume it was created by user and create corresponding option object
       // on the fly for use as event payload
       const other_ops_type = typeof options[0]
-      option = (other_ops_type ? { label: to_remove } : to_remove) as Option
+      option_removed = (
+        other_ops_type ? { label: option_to_drop } : option_to_drop
+      ) as Option
     }
-    if (option === undefined) {
+    if (option_removed === undefined) {
       return console.error(
-        `Multiselect can't remove selected option ${JSON.stringify(
-          to_remove,
-        )}, not found in selected list`,
+        `Multiselect can't remove selected option ${JSON.stringify(option_to_drop)}, not found in selected list`,
       )
     }
 
@@ -306,8 +307,8 @@
 
     invalid = false // reset error status whenever items are removed
     form_input?.setCustomValidity(``)
-    onremove?.({ option })
-    onchange?.({ option, type: `remove` })
+    onremove?.({ option: option_removed })
+    onchange?.({ option: option_removed, type: `remove` })
   }
 
   function open_dropdown(event: Event) {
@@ -431,8 +432,6 @@
   let drag_idx: number | null = $state(null)
   // event handlers enable dragging to reorder selected options
   const drop = (target_idx: number) => (event: DragEvent) => {
-    event.preventDefault()
-
     if (!event.dataTransfer) return
     event.dataTransfer.dropEffect = `move`
     const start_idx = parseInt(event.dataTransfer.getData(`text/plain`))
@@ -489,6 +488,53 @@
     required = required // trigger effect when required changes
     form_input?.setCustomValidity(``)
   })
+
+  function portal(
+    node: HTMLElement,
+    params: { target_node: HTMLElement | null; active?: boolean },
+  ) {
+    let { target_node, active } = params
+    if (!active) return
+    let render_in_place = !browser || !document.body.contains(node)
+
+    if (!render_in_place) {
+      document.body.appendChild(node)
+      node.style.position = `fixed`
+
+      const update_position = () => {
+        if (!target_node || !open) return (node.hidden = true)
+        const rect = target_node.getBoundingClientRect()
+        node.style.left = `${rect.left}px`
+        node.style.top = `${rect.bottom}px`
+        node.style.width = `${rect.width}px`
+        node.hidden = false
+      }
+
+      if (open) tick().then(update_position)
+
+      window.addEventListener(`scroll`, update_position, true)
+      window.addEventListener(`resize`, update_position)
+
+      $effect.pre(() => {
+        if (open && target_node) update_position()
+        else node.hidden = true
+      })
+
+      return {
+        update(params: { target_node: HTMLElement | null }) {
+          target_node = params.target_node
+          render_in_place = !browser || !document.body.contains(node)
+          if (open && !render_in_place && target_node) tick().then(update_position)
+          else if (!open || !target_node) node.hidden = true
+        },
+        destroy() {
+          if (!render_in_place) node.remove()
+          window.removeEventListener(`scroll`, update_position, true)
+          window.removeEventListener(`resize`, update_position)
+        },
+      }
+    }
+  }
 </script>
 
 <svelte:window
@@ -503,7 +549,7 @@
   class:single={maxSelect === 1}
   class:open
   class:invalid
-  class="multiselect {outerDivClass}"
+  class="multiselect {outerDivClass} {rest.class ?? ``}"
   onmouseup={open_dropdown}
   title={disabled ? disabledInputTitle : null}
   data-id={id}
@@ -556,6 +602,9 @@
         animate:flip={{ duration: 100 }}
         draggable={selectedOptionsDraggable && !disabled && selected.length > 1}
         ondragstart={dragstart(idx)}
+        ondragover={(event) => {
+          event.preventDefault() // needed for ondrop to fire
+        }}
         ondrop={drop(idx)}
         ondragenter={() => (drag_idx = idx)}
         class:active={drag_idx === idx}
@@ -674,6 +723,7 @@
   <!-- only render options dropdown if options or searchText is not empty (needed to avoid briefly flashing empty dropdown) -->
   {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}
     <ul
+      use:portal={{ target_node: outerDiv, ...portal_params }}
       class:hidden={!open}
       class="options {ulOptionsClass}"
       role="listbox"
@@ -910,14 +960,19 @@
     pointer-events: none;
   }
 
-  :is(div.multiselect > ul.options) {
+  ul.options {
     list-style: none;
+    /* top, left, width, position are managed by portal when active */
+    /* but provide defaults for non-portaled or initial state */
+    position: absolute; /* Default, overridden by portal to fixed when open */
     top: 100%;
     left: 0;
     width: 100%;
-    position: absolute;
+    /* Default z-index if not portaled/overridden by portal */
+    z-index: var(--sms-options-z-index, 3);
+
     overflow: auto;
-    transition: all 0.2s;
+    transition: all 0.2s; /* Consider if this transition is desirable with portal positioning */
     box-sizing: border-box;
     background: var(--sms-options-bg, white);
     max-height: var(--sms-options-max-height, 50vh);
@@ -929,29 +984,35 @@
     padding: var(--sms-options-padding);
     margin: var(--sms-options-margin, inherit);
   }
-  :is(div.multiselect > ul.options.hidden) {
+  :is(div.multiselect.open) {
+    /* increase z-index when open to ensure the dropdown of one <MultiSelect />
+    displays above that of another slightly below it on the page */
+    /* This z-index is for the div.multiselect itself, portal has its own higher z-index */
+    z-index: var(--sms-open-z-index, 4);
+  }
+  ul.options.hidden {
     visibility: hidden;
     opacity: 0;
     transform: translateY(50px);
   }
-  :is(div.multiselect > ul.options > li) {
+  ul.options > li {
     padding: 3pt 2ex;
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
   }
-  :is(div.multiselect > ul.options .user-msg) {
+  ul.options .user-msg {
     /* block needed so vertical padding applies to span */
     display: block;
     padding: 3pt 2ex;
   }
-  :is(div.multiselect > ul.options > li.selected) {
+  ul.options > li.selected {
     background: var(--sms-li-selected-bg);
     color: var(--sms-li-selected-color);
   }
-  :is(div.multiselect > ul.options > li.active) {
+  ul.options > li.active {
     background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
   }
-  :is(div.multiselect > ul.options > li.disabled) {
+  ul.options > li.disabled {
     cursor: not-allowed;
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);
diff --git a/src/lib/Wiggle.svelte b/src/lib/Wiggle.svelte
index 70f7a13e..99bcfd17 100644
--- a/src/lib/Wiggle.svelte
+++ b/src/lib/Wiggle.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
-
   import { Spring } from 'svelte/motion'
 
   interface Props {
diff --git a/src/lib/props.ts b/src/lib/props.ts
index 9abfaf7a..cf9be437 100644
--- a/src/lib/props.ts
+++ b/src/lib/props.ts
@@ -71,6 +71,11 @@ export interface MultiSelectSnippets<T extends Option = Option> {
   >
 }
 
+export interface PortalParams {
+  target_node?: HTMLElement | null
+  active?: boolean
+}
+
 export interface MultiSelectParameters<T extends Option = Option> {
   activeIndex?: number | null
   activeOption?: T | null
@@ -135,6 +140,7 @@ export interface MultiSelectParameters<T extends Option = Option> {
   ulSelectedStyle?: string | null
   ulOptionsStyle?: string | null
   value?: T | T[] | null
+  portal?: PortalParams
   [key: string]: unknown
 }
 
diff --git a/src/routes/(demos)/+layout.svelte b/src/routes/(demos)/+layout.svelte
index b704d4f4..e084584f 100644
--- a/src/routes/(demos)/+layout.svelte
+++ b/src/routes/(demos)/+layout.svelte
@@ -3,10 +3,11 @@
   import { name } from '$root/package.json'
   import { DemoNav } from '$site'
   import { demos } from '$site/stores'
+  import type { Snippet } from 'svelte'
   import { PrevNext } from 'svelte-zoo'
 
   interface Props {
-    children?: import('svelte').Snippet
+    children?: Snippet
   }
   let { children }: Props = $props()
 </script>
@@ -20,10 +21,12 @@
 
   {@render children?.()}
 
+  <!-- TODO pass onkeyup=null in next version of svelte-zoo -->
   <PrevNext
     items={$demos}
     current={page.url.pathname}
-    style="max-width: 55em; margin: auto;"
+    style="max-width: var(--main-max-width); margin: auto;"
+    on_keyup={() => ({})}
   />
 </main>
 
diff --git a/src/routes/(demos)/modal/+page.svelte b/src/routes/(demos)/modal/+page.svelte
new file mode 100644
index 00000000..376fc847
--- /dev/null
+++ b/src/routes/(demos)/modal/+page.svelte
@@ -0,0 +1,185 @@
+<script lang="ts">
+  import MultiSelect from '$lib'
+  import { get_label } from '$lib/utils'
+  import { colors, foods, 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 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
+    }
+  }
+</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>
+
+{#if show_modal_1}
+  <div
+    class="modal-backdrop"
+    onclick={(event) => {
+      if (event.target === event.currentTarget) show_modal_1 = false
+    }}
+    onkeydown={(event) => {
+      if (event.key === `Enter` || event.key === ` `) show_modal_1 = false
+    }}
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="modal-content modal-1"
+      onkeydown={(event) => {
+        if (event.key !== `Escape`) event.stopPropagation()
+      }}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-1-title"
+      tabindex="-1"
+    >
+      <h2 id="modal-1-title">Modal 1: Favorite Foods & Colors</h2>
+      <MultiSelect
+        bind:selected={selected_foods}
+        options={foods_options}
+        portal={{ active: true }}
+        placeholder="Choose foods..."
+      />
+      <MultiSelect
+        bind:selected={selected_colors}
+        options={colors_options}
+        portal={{ active: true }}
+        placeholder="Choose colors..."
+      />
+      <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>
+    </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);
+    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;
+    border: none;
+    padding: 8px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    margin-top: 1em; /* Add some space above the close button */
+  }
+  .modal-content button:hover {
+    background-color: #666;
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f4996443..8187ee0b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-  import { mount, type Snippet } from 'svelte'
-  import { CopyButton, GitHubCorner } from 'svelte-zoo'
-
   import { afterNavigate, goto } from '$app/navigation'
   import { page } from '$app/state'
   import { CmdPalette } from '$lib'
   import { repository } from '$root/package.json'
   import { Footer } from '$site'
   import { demos } from '$site/stores'
+  import { mount, type Snippet } from 'svelte'
   import Toc from 'svelte-toc'
-
+  import { CopyButton, GitHubCorner } from 'svelte-zoo'
   import '../app.css'
 
   interface Props {
diff --git a/tests/MultiSelect.test.ts b/tests/MultiSelect.test.ts
index d0616616..8631cf4d 100644
--- a/tests/MultiSelect.test.ts
+++ b/tests/MultiSelect.test.ts
@@ -6,7 +6,7 @@ import { foods } from '../src/site/options'
 test.describe.configure({ mode: `parallel` })
 
 test.describe(`input`, () => {
-  test.skip(`opens dropdown on focus`, async ({ page }) => {
+  test(`opens dropdown on focus`, async ({ page }) => {
     await page.goto(`/ui`, { waitUntil: `networkidle` })
     expect(await page.$(`div.multiselect > ul.options.hidden`)).toBeTruthy()
     expect(await page.$(`div.multiselect.open`)).toBeNull()
@@ -74,9 +74,7 @@ test.describe(`remove all button`, () => {
     await page.goto(`/ui`, { waitUntil: `networkidle` })
 
     const input_locator = page.locator(`#foods input[autocomplete]`)
-    // Use a more general locator for options list that doesn't depend on .open class,
-    // and rely on waitFor to ensure it's visible after click.
-    const options_list_locator = page.locator(`#foods ul.options`)
+    const options_list_locator = page.locator(`ul.options[role="listbox"]`)
 
     // Select first option
     await input_locator.click() // Ensure dropdown is open
@@ -101,9 +99,6 @@ test.describe(`remove all button`, () => {
     )
     expect(selected_items).toHaveLength(2)
 
-    // await Promise.all([
-    //   await page.waitForEvent(`removeAll`),
-    // ])
     await page.click(`button.remove-all`)
     expect(await page.$(`button.remove-all`)).toBeNull() // remove-all button is hidden when nothing selected
 
@@ -208,9 +203,7 @@ test.describe(`accessibility`, () => {
     const invalid = await page.getAttribute(
       `#foods input[autocomplete]`,
       `aria-invalid`,
-      {
-        strict: true,
-      },
+      { strict: true },
     )
     expect(invalid).toBe(`true`)
   })
@@ -562,7 +555,6 @@ test.describe(`snippets`, () => {
   }) => {
     await page.goto(`/snippets`, { waitUntil: `networkidle` })
 
-    // Use a more general descendant selector for the SVG within the button
     const expand_icon_locator = page.locator(
       `#languages-1 .multiselect > input.form-control + svg`,
     )
@@ -609,7 +601,7 @@ test.describe(`snippets`, () => {
   })
 })
 
-test.skip(`dragging selected options across each other changes their order`, async ({
+test(`dragging selected options across each other changes their order`, async ({
   page,
 }) => {
   // https://github.com/janosh/svelte-multiselect/issues/176
@@ -624,3 +616,67 @@ test.skip(`dragging selected options across each other changes their order`, asy
   selected = await page.textContent(`ul.selected`)
   expect(selected?.trim()).toBe(`1  TypeScript 2  Python 3  C 4  Haskell`)
 })
+
+test.describe(`portal feature`, () => {
+  test(`dropdown renders in document.body when portal is active in modal`, async ({
+    page,
+  }) => {
+    await page.goto(`/modal`, { waitUntil: `networkidle` })
+
+    // Open the first modal
+    await page
+      .getByRole(`button`, { name: `Open Modal 1 (Vertical Selects)` })
+      .click()
+
+    // Locate the MultiSelect input for foods within the first modal
+    const foods_multiselect_input = page.locator(
+      `div.modal-content.modal-1 div.multiselect input[placeholder='Choose foods...']`,
+    )
+    // Wait for the modal to be fully visible and input to be available
+    await foods_multiselect_input.waitFor({ state: `visible` })
+
+    // Click the input to open the dropdown
+    await foods_multiselect_input.click()
+
+    // Identify the specific portalled options list for foods
+    // It should be in the body and contain the first food item
+    const foods_options_list_in_body = page.locator(
+      `body > ul.options:has(li:has-text("${foods[0]}"))`,
+    )
+    await foods_options_list_in_body.waitFor({ state: `visible` })
+    await expect(foods_options_list_in_body).toHaveAttribute(
+      `aria-expanded`,
+      `true`,
+    ) // Confirm it's open
+
+    // Assert that the options list is NOT a direct child of the multiselect wrapper within the modal
+    const multiselect_wrapper_in_modal = page.locator(
+      `div.modal-content.modal-1 div.multiselect:has(input[placeholder='Choose foods...'])`,
+    )
+    await expect(
+      multiselect_wrapper_in_modal.locator(`> ul.options`),
+    ).not.toBeAttached()
+
+    // Select an option from this specific portalled dropdown
+    await foods_options_list_in_body
+      .locator(`li:has-text("${foods[0]}")`)
+      .click()
+
+    // Assert this specific dropdown is now hidden
+    await expect(foods_options_list_in_body).toBeHidden({ timeout: 3000 })
+
+    // Explicitly wait for the selected item to appear before asserting visibility
+    await expect(
+      page.getByRole(`button`, {
+        name: `Remove 🍇 Grapes`,
+      }),
+    ).toBeVisible()
+
+    // click escape to close the dropdown
+    await page.keyboard.press(`Escape`)
+
+    // Close the modal
+    await page.getByRole(`button`, { name: `Close Modal 1` }).click()
+    await expect(page.locator(`div.modal-content.modal-1`)).toBeHidden()
+  })
+})
diff --git a/tests/unit/CmdPalette.svelte.test.ts b/tests/unit/CmdPalette.svelte.test.ts
index 06f7eb22..38926553 100644
--- a/tests/unit/CmdPalette.svelte.test.ts
+++ b/tests/unit/CmdPalette.svelte.test.ts
@@ -1,83 +1,247 @@
 import { CmdPalette } from '$lib'
-import { flushSync, mount } from 'svelte'
+import { mount, tick } from 'svelte'
 import { expect, test, vi } from 'vitest'
 import { doc_query } from '.'
 
 const actions = [{ label: `action 1`, action: vi.fn() }]
 
-test.each([[[`k`]], [[`o`]], [[`k`, `o`]]])(
-  `opens the dialog on cmd+ custom trigger keys`,
-  async (triggers) => {
-    mount(CmdPalette, { target: document.body, props: { triggers, actions } })
+test.each([
+  { triggers: [`k`], key_to_press: `k` },
+  { triggers: [`o`], key_to_press: `o` },
+  { triggers: [`k`, `o`], key_to_press: `k` },
+  { triggers: [`k`, `o`], key_to_press: `o` },
+])(
+  `opens the dialog on cmd + $key_to_press (triggers: $triggers)`,
+  async ({ triggers, key_to_press }) => {
+    const props = $state({ open: false, triggers, actions, fade_duration: 0 })
+    mount(CmdPalette, { target: document.body, props })
 
-    // dialog should initially be absent
     expect(document.querySelector(`dialog`)).toBe(null)
+    expect(props.open).toBe(false)
 
-    // press cmd + trigger to open the palette
+    // Press cmd + trigger to open the palette
     window.dispatchEvent(
-      new KeyboardEvent(`keydown`, { key: triggers[0], metaKey: true }),
+      new KeyboardEvent(`keydown`, { key: key_to_press, metaKey: true }),
     )
-    flushSync()
+    await tick()
 
     expect(doc_query(`dialog`)).toBeTruthy()
+    expect(props.open).toBe(true)
+
+    // Test that pressing trigger key without metaKey does not open if already open then closed
+    props.open = false
+    await tick()
+    expect(document.querySelector(`dialog`)).toBe(null)
+
+    window.dispatchEvent(
+      new KeyboardEvent(`keydown`, { key: key_to_press, metaKey: false }),
+    )
+    await tick()
+    expect(document.querySelector(`dialog`)).toBe(null)
+    expect(props.open).toBe(false)
   },
 )
 
-test(`calls the action when an option is selected`, async () => {
+test(`does not open dialog on trigger key press without metaKey`, async () => {
+  const props = $state({ open: false, triggers: [`k`], actions })
+  mount(CmdPalette, { target: document.body, props })
+
+  expect(document.querySelector(`dialog`)).toBe(null)
+  expect(props.open).toBe(false)
+
+  window.dispatchEvent(
+    new KeyboardEvent(`keydown`, { key: `k`, metaKey: false }),
+  )
+
+  expect(document.querySelector(`dialog`)).toBe(null)
+  expect(props.open).toBe(false)
+})
+
+test(`calls the action and closes dialog when an option is selected`, async () => {
   const spy = vi.fn()
-  const actions = [{ label: `action 1`, action: spy }]
+  const test_actions = [{ label: `action 1`, action: spy }]
+  const props = $state({ open: true, actions: test_actions, fade_duration: 0 })
 
-  mount(CmdPalette, { target: document.body, props: { open: true, actions } })
+  mount(CmdPalette, { target: document.body, props })
 
-  const input = doc_query(`dialog div.multiselect input[autocomplete]`)
-  // press down arrow, then enter to select the first action
-  input.dispatchEvent(
+  const input_el = doc_query(`dialog div.multiselect input[autocomplete]`)
+  // Press down arrow, then enter to select the first action
+  input_el.dispatchEvent(
     new KeyboardEvent(`keydown`, { key: `ArrowDown`, bubbles: true }),
   )
-  flushSync()
-  input.dispatchEvent(
+  await tick()
+  input_el.dispatchEvent(
     new KeyboardEvent(`keydown`, { key: `Enter`, bubbles: true }),
   )
-  flushSync()
+  await tick()
 
   expect(spy).toHaveBeenCalledOnce()
-  expect(spy).toHaveBeenCalledWith(actions[0].label)
+  expect(spy).toHaveBeenCalledWith(test_actions[0].label)
+  expect(props.open).toBe(false)
+  expect(document.querySelector(`dialog`)).toBe(null)
 })
 
-test.each([[[`Escape`]], [[`x`]], [[`Escape`, `x`]]])(
-  `closes the dialog on close keys`,
-  async (close_keys) => {
-    const props = $state({ open: true, close_keys, actions })
+test.each([
+  { close_keys: [`Escape`], key_to_press: `Escape` },
+  { close_keys: [`x`], key_to_press: `x` },
+  { close_keys: [`Escape`, `x`], key_to_press: `Escape` },
+  { close_keys: [`Escape`, `x`], key_to_press: `x` },
+])(
+  `closes the dialog on $key_to_press (close_keys: $close_keys)`,
+  async ({ close_keys, key_to_press }) => {
+    const props = $state({ open: true, close_keys, actions, fade_duration: 0 })
+    mount(CmdPalette, { target: document.body, props })
 
-    mount(CmdPalette, {
-      target: document.body,
-      props,
-    })
+    const init_dialog_el = doc_query(`dialog`)
+    expect(init_dialog_el).toBeTruthy()
+    expect(props.open).toBe(true)
 
-    const dialog = doc_query(`dialog`)
-    expect(dialog).toBeTruthy()
+    window.dispatchEvent(new KeyboardEvent(`keydown`, { key: key_to_press }))
+    await tick() // Wait for props.open to update and event to be handled
 
-    window.dispatchEvent(new KeyboardEvent(`keydown`, { key: close_keys[0] }))
     expect(props.open).toBe(false)
-    // TODO somehow dialog isn't removed from the DOM
-    // expect(document.querySelector(`dialog`)).toBe(null)
+
+    const final_dialog_el = document.querySelector(`dialog`)
+    expect(final_dialog_el).toBe(null)
   },
 )
 
-test(`closes the dialog on click outside`, async () => {
-  const props = $state({ open: true, actions })
+test(`closes the dialog on click outside and removes dialog from DOM`, async () => {
+  const props = $state({ open: true, actions, fade_duration: 0 })
+
+  mount(CmdPalette, { target: document.body, props })
+
+  const dialog = doc_query(`dialog`)
+  expect(dialog).toBeTruthy()
+  expect(props.open).toBe(true)
 
+  // Create a click event outside the dialog
+  const click = new MouseEvent(`click`, { bubbles: true })
+  document.body.dispatchEvent(click)
+  await tick() // Allow props.open to update
+
+  expect(props.open).toBe(false)
+  expect(document.querySelector(`dialog`)).toBe(null)
+})
+
+test(`displays the correct placeholder text in the input`, () => {
+  const placeholder_text = `Test placeholder`
   mount(CmdPalette, {
     target: document.body,
-    props,
+    props: {
+      open: true,
+      actions,
+      placeholder: placeholder_text,
+    },
+  })
+
+  const input = doc_query(`dialog input[autocomplete]`) as HTMLInputElement
+  expect(input.placeholder).toBe(placeholder_text)
+})
+
+test.each([
+  {
+    opens_how: `keypress`,
+    description: `focuses input when dialog opens via keypress`,
+  },
+  {
+    opens_how: `programmatic`,
+    description: `focuses input when dialog opens programmatically`,
+  },
+])(`$description`, async ({ opens_how }) => {
+  const props = $state({ actions, open: false, fade_duration: 0 })
+  mount(CmdPalette, { target: document.body, props })
+
+  if (opens_how === `keypress`) {
+    // Open the dialog by simulating the trigger key press
+    window.dispatchEvent(
+      new KeyboardEvent(`keydown`, { key: `k`, metaKey: true }),
+    )
+  } else props.open = true // Open programmatically
+
+  await tick()
+
+  const input = document.querySelector(
+    `dialog input[autocomplete]`,
+  ) as HTMLInputElement | null
+  expect(input).not.toBeNull()
+  expect(document.activeElement).toBe(input)
+})
+
+test(`handles empty actions array gracefully`, () => {
+  mount(CmdPalette, {
+    target: document.body,
+    props: { open: true, actions: [] },
   })
 
   const dialog = doc_query(`dialog`)
   expect(dialog).toBeTruthy()
+  const options_list = document.querySelector(`dialog ul.options`)
+  if (options_list) {
+    expect(options_list.children.length).toBe(0)
+  }
+})
 
-  // create a click event outside the dialog
-  const click = new MouseEvent(`click`, { bubbles: true })
-  document.body.dispatchEvent(click)
+test(`applies custom style to the dialog element`, () => {
+  const custom_style = `border: 2px solid red; padding: 20px;`
+  mount(CmdPalette, {
+    target: document.body,
+    props: { open: true, actions, style: custom_style },
+  })
+
+  const dialog = doc_query(`dialog`) as HTMLDialogElement
+  expect(dialog.style.border).toBe(`2px solid red`)
+  expect(dialog.style.padding).toBe(`20px`)
+})
 
+test(`applies custom span_style to default option rendering`, () => {
+  const custom_li_style = `color: blue; font-weight: bold;`
+  mount(CmdPalette, {
+    target: document.body,
+    props: { open: true, actions, liOptionStyle: custom_li_style },
+  })
+
+  const li_el = doc_query(`dialog ul.options li`)
+  expect(li_el).toBeTruthy()
+  // Note: direct style checking can be brittle if Svelte optimizes or changes how styles are applied.
+  // It's often better to check computed style, but for direct inline styles this can be okay.
+  expect(li_el.style.color).toBe(`blue`)
+  expect(li_el.style.fontWeight).toBe(`bold`)
+})
+
+test(`programmatic control via bind:open`, async () => {
+  const props = $state({ open: false, actions, fade_duration: 0 })
+  mount(CmdPalette, { target: document.body, props })
+
+  expect(document.querySelector(`dialog`)).toBe(null)
+
+  // Programmatically open
+  props.open = true
+  await tick()
+  expect(doc_query(`dialog`)).toBeTruthy()
+  expect(props.open).toBe(true)
+
+  const input_el = doc_query(
+    `dialog input[autocomplete]`,
+  ) as HTMLInputElement | null
+  expect(input_el).not.toBeNull()
+  expect(document.activeElement).toBe(input_el)
+
+  // Programmatically close
+  props.open = false
+  await tick()
+  expect(document.querySelector(`dialog`)).toBe(null)
   expect(props.open).toBe(false)
 })
+
+test(`passes through ...rest props like class to Select component`, () => {
+  const custom_class = `my-custom-palette-class`
+  mount(CmdPalette, {
+    target: document.body,
+    props: { open: true, actions, class: custom_class },
+  })
+
+  const select_wrapper = doc_query(`dialog div.multiselect`)
+  expect(select_wrapper).toBeTruthy()
+  expect(select_wrapper.classList.contains(custom_class)).toBe(true)
+})
diff --git a/vite.config.ts b/vite.config.ts
index 67123b9b..018121a6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,6 +7,7 @@ export default defineConfig({
   plugins: [sveltekit(), mdsvexamples],
 
   test: {
+    include: [`tests/unit/**/*.test.ts`],
     environment: `jsdom`,
     css: true,
     coverage: {
@@ -15,11 +16,9 @@ export default defineConfig({
     setupFiles: [resolve(__dirname, `tests/setup.ts`)],
   },
 
-  resolve: process.env.TEST
-    ? {
-        conditions: [`browser`],
-      }
-    : undefined,
+  resolve: {
+    conditions: process.env.TEST ? [`browser`] : undefined,
+  },
 
   server: {
     fs: { allow: [`..`] }, // needed to import from $root