feat: add zindex prop

README.md

@@ -18,6 +18,8 @@ Popover options:
 - `showContent` show the content slot, default is `false`
 - `calcX` optional - provide your own logic to calculate the X translation
 - `calcY` optional - provide your own logic to calculate the Y translation
+- `zIndex` optional - z-index for the content element, default is empty
+
 
 ## Examples
 
@@ -57,21 +59,14 @@ Popover options:
 Once you've created a project and installed dependencies with `yarn`, start a development server:
 
 ```bash
-npm run dev
+pnpm run dev
 
 # or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
+pnpm run dev -- --open
 ```
 
-```
-
-````
-
 ## Building
 
 ```bash
-npm run package
+pnpm run package
 ```
-````

src/lib/Popdown.svelte

@@ -3,14 +3,15 @@
   import { portal } from 'svelte-portal';
   import { type Writable, writable } from 'svelte/store';
 
-  const isBrowser = 'document' in global && 'querySelector' in document;
+  const isBrowser = 'document' in globalThis && 'querySelector' in document;
 
   export let contentClass = '';
   export let position = 'outer-bottom inner-left';
   export let target: string | HTMLElement = isBrowser ? (document.scrollingElement as HTMLElement) : 'body';
   export let showContent = false;
   export let calcLeft: null | CalcPosition = null;
   export let calcTop: null | CalcPosition = null;
+  export let zIndex = null;
 
   let trigger: Writable<HTMLElement> = writable();
   let windowSize: Writable<number[]> = writable();
@@ -53,7 +54,13 @@
 </div>
 
 {#if target && showContent}
-  <div class="content {contentClass}" bind:this={$content} style:transform={$contentTransformStyle} use:portal={target}>
+  <div
+    class="content {contentClass}"
+    bind:this={$content}
+    style:transform={$contentTransformStyle}
+    style:zIndex
+    use:portal={target}
+  >
     <slot name="content" />
   </div>
 {/if}