@warkypublic/svelix 0.1.11 → 0.1.12

package/dist/components/BetterMenu/MenuRenderer.svelte

@@ -3,6 +3,7 @@
 	import type { BetterMenuInstanceItem, BetterMenuStoreState } from './types';
 	import type { BetterMenuStore } from './store';
 	import BetterMenuAsyncButton from './BetterMenuAsyncButton.svelte';
+	import { registerOverlay } from '../OverlayStack';
 	import Portal from '../Portal/Portal.svelte';
 
 	interface Props {
@@ -11,14 +12,39 @@
 	const { disablePortal = false }: Props = $props();
 
 	const store = getContext<BetterMenuStore>('betterMenuStore');
-	let state = $state<BetterMenuStoreState>({ menus: [], providerID: '' });
+	let menuState = $state<BetterMenuStoreState>({ menus: [], providerID: '' });
+	const hasVisibleMenus = $derived(menuState.menus.some((menu) => menu.visible));
+	let backdropZ = $state(1090);
+	let menuZ = $state(1100);
+	let submenuZ = $state(1110);
 
 	$effect(() => {
 		return store.subscribe((s) => {
-			state = s;
+			menuState = s;
 		});
 	});
 
+	$effect(() => {
+		if (!hasVisibleMenus) {
+			return;
+		}
+
+		const overlay = registerOverlay({
+			kind: 'menu',
+			mount: disablePortal ? 'inline' : 'portal',
+		});
+		backdropZ = overlay.layer.backdrop;
+		menuZ = overlay.layer.content;
+		submenuZ = overlay.layer.floating;
+
+		return () => {
+			overlay.unregister();
+			backdropZ = 1090;
+			menuZ = 1100;
+			submenuZ = 1110;
+		};
+	});
+
 	function hideMenu(id: string) {
 		store.setInstanceState(id, 'visible', false);
 	}
@@ -38,7 +64,8 @@
 				<span class="text-xs">▶</span>
 			</button>
 			<div
-				class="absolute left-full top-0 hidden group-hover:block card bg-surface-100-900 shadow-xl min-w-48 py-1 z-50"
+				class="absolute left-full top-0 hidden group-hover:block card bg-surface-100-900 shadow-xl min-w-48 py-1"
+				style:z-index={submenuZ}
 			>
 				{#each item.items as subItem, i (`sub_${i}`)}
 					{@render menuItem(subItem, onClose)}
@@ -53,18 +80,19 @@
 {/snippet}
 
 <Portal disabled={disablePortal}>
-	{#each state.menus as menu, menuIndex (menu.id)}
+	{#each menuState.menus as menu, menuIndex (menu.id)}
 		{#if menu.visible}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div class="fixed inset-0 z-40" onclick={() => hideMenu(menu.id)}></div>
+			<div class="fixed inset-0" onclick={() => hideMenu(menu.id)} style:z-index={backdropZ}></div>
 
 			<div
-				class="fixed z-50 card bg-surface-100-900 shadow-xl min-w-48 py-1"
-				id={`bmm_portal_${state.providerID}_${menuIndex}`}
+				class="fixed card bg-surface-100-900 shadow-xl min-w-48 py-1"
+				id={`bmm_portal_${menuState.providerID}_${menuIndex}`}
 				style:left="{menu.x}px"
 				style:top="{menu.y}px"
-				style:width={state.width ? `${state.width}px` : undefined}
+				style:width={menuState.width ? `${menuState.width}px` : undefined}
+				style:z-index={menuZ}
 			>
 				{#each menu.items ?? [] as item, itemIndex (`${menu.id}_item_${item.id ?? itemIndex}`)}
 					{@render menuItem(item, () => hideMenu(menu.id))}

package/dist/components/Boxer/Boxer.svelte

@@ -5,6 +5,10 @@
     createVirtualizer,
     type SvelteVirtualizer,
   } from "@tanstack/svelte-virtual";
+  import {
+    registerOverlay,
+  } from "../OverlayStack";
+  import Portal from "../Portal/Portal.svelte";
   import type { BoxerItem, BoxerProps } from "./types";
   import { createBoxerStore } from "./store";
   import BoxerTarget from "./BoxerTarget.svelte";
@@ -14,6 +18,7 @@
     clearable = true,
     data = [],
     dataSource: dataSourceProp = undefined,
+    disablePortal = false,
     disabled,
     error,
     label,
@@ -78,6 +83,13 @@
   // Virtualizer
   let parentEl = $state<HTMLDivElement | undefined>(undefined);
   let targetRef = $state<{ focus: () => void } | undefined>(undefined);
+  let anchorEl = $state<HTMLDivElement | undefined>(undefined);
+  let dropdownEl = $state<HTMLDivElement | undefined>(undefined);
+  let popupTop = $state(0);
+  let popupLeft = $state(0);
+  let popupWidth = $state(0);
+  let backdropZ = $state(1090);
+  let dropdownZ = $state(1100);
   // Plain variable — NOT $state to avoid deep proxy on the complex virtualizer object.
   let rawVirtualizer: SvelteVirtualizer<
     HTMLDivElement,
@@ -306,6 +318,22 @@
     }
   }
 
+  function updatePopoverPosition() {
+    if (!anchorEl) return;
+    const rect = anchorEl.getBoundingClientRect();
+    const viewportWidth = typeof window === "undefined" ? rect.width : window.innerWidth;
+    const horizontalPadding = 8;
+    const nextWidth = Math.max(220, rect.width);
+    const maxLeft = viewportWidth - nextWidth - horizontalPadding;
+
+    popupTop = rect.bottom + 4;
+    popupWidth = nextWidth;
+    popupLeft = Math.min(
+      Math.max(rect.left, horizontalPadding),
+      Math.max(horizontalPadding, maxLeft),
+    );
+  }
+
   // Public API via bind:this
   export function clear() {
     onClear();
@@ -326,14 +354,59 @@
     value = val;
     onChange?.(val);
   }
+
+  $effect(() => {
+    if (!$store.opened || disablePortal || disabled) {
+      return;
+    }
+
+    updatePopoverPosition();
+
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const onWindowChange = () => {
+      updatePopoverPosition();
+    };
+
+    window.addEventListener("resize", onWindowChange);
+    window.addEventListener("scroll", onWindowChange, true);
+
+    return () => {
+      window.removeEventListener("resize", onWindowChange);
+      window.removeEventListener("scroll", onWindowChange, true);
+    };
+  });
+
+  $effect(() => {
+    if (!$store.opened || disabled) {
+      return;
+    }
+
+    const overlay = registerOverlay({
+      kind: "popover",
+      mount: disablePortal ? "inline" : "portal",
+    });
+    backdropZ = overlay.layer.backdrop;
+    dropdownZ = overlay.layer.content;
+
+    return () => {
+      overlay.unregister();
+      backdropZ = 1090;
+      dropdownZ = 1100;
+    };
+  });
 </script>
 
 <div
   class="relative w-full"
+  bind:this={anchorEl}
   onfocusout={(e) => {
     const currentTarget = e.currentTarget as HTMLElement;
     const relatedTarget = e.relatedTarget as Node | null;
-    if (!currentTarget.contains(relatedTarget)) {
+    const insideDropdown = !!(relatedTarget && dropdownEl?.contains(relatedTarget));
+    if (!currentTarget.contains(relatedTarget) && !insideDropdown) {
       if (!value && !multiSelect) {
         store.setSearch("");
         store.setInput("");
@@ -362,71 +435,81 @@
     }}
   />
 
-  {#if $store.opened}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="fixed inset-0 z-30"
-      onclick={() => store.setOpened(false)}
-    ></div>
-
-    <div
-      class="absolute left-0 right-0 top-full mt-1 z-40 card bg-surface-50-950 shadow-lg border border-surface-300-700 overflow-hidden"
-      role="listbox"
-      aria-label={label ?? "Options"}
-    >
-      {#if $store.boxerData.length > 0}
-        <div
-          bind:this={parentEl}
-          class="overflow-auto"
-          style:max-height="{mah}px"
-          onscroll={(e) =>
-            store.fetchMoreOnBottomReached(e.currentTarget as HTMLDivElement)}
-        >
-          <div style:height="{totalSize}px" style:position="relative">
-            <div
-              style:left="0"
-              style:position="absolute"
-              style:top="0"
-              style:transform="translateY({virtualItems[0]?.start ?? 0}px)"
-              style:width="100%"
-            >
-              {#each virtualItems as vRow (vRow.key)}
-                {@const item = $store.boxerData[vRow.index]}
-                {@const isSelected = multiSelect
-                  ? Array.isArray(value) && value.includes(item?.value)
-                  : value === item?.value}
-                <div
-                  class="px-3 py-2 cursor-pointer text-sm hover:bg-surface-100 dark:hover:bg-surface-700 flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500"
-                  class:bg-primary-100={isSelected}
-                  class:dark:bg-primary-900={isSelected}
-                  data-index={vRow.index}
-                  role="option"
-                  aria-selected={isSelected}
-                  tabindex="-1"
-                  onclick={() => onOptionSubmit(vRow.index)}
-                  onkeydown={(e) => onDropdownItemKeydown(e, vRow.index)}
-                >
-                  {#if multiSelect}
-                    <input
-                      checked={isSelected}
-                      class="checkbox"
-                      readonly
-                      tabindex={-1}
-                      type="checkbox"
-                    />
-                  {/if}
-                  <span>{item?.label}</span>
-                </div>
-              {/each}
+  <Portal disabled={disablePortal}>
+    {#if $store.opened}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="fixed inset-0"
+        onclick={() => store.setOpened(false)}
+        style:z-index={backdropZ}
+      ></div>
+
+      <div
+        bind:this={dropdownEl}
+        class={`${disablePortal
+          ? "absolute left-0 right-0 top-full mt-1"
+          : "fixed"} card bg-surface-50-950 shadow-lg border border-surface-300-700 overflow-hidden`}
+        role="listbox"
+        aria-label={label ?? "Options"}
+        style:z-index={dropdownZ}
+        style:top={!disablePortal ? `${popupTop}px` : undefined}
+        style:left={!disablePortal ? `${popupLeft}px` : undefined}
+        style:width={!disablePortal ? `${popupWidth}px` : undefined}
+      >
+        {#if $store.boxerData.length > 0}
+          <div
+            bind:this={parentEl}
+            class="overflow-auto"
+            style:max-height="{mah}px"
+            onscroll={(e) =>
+              store.fetchMoreOnBottomReached(e.currentTarget as HTMLDivElement)}
+          >
+            <div style:height="{totalSize}px" style:position="relative">
+              <div
+                style:left="0"
+                style:position="absolute"
+                style:top="0"
+                style:transform="translateY({virtualItems[0]?.start ?? 0}px)"
+                style:width="100%"
+              >
+                {#each virtualItems as vRow (vRow.key)}
+                  {@const item = $store.boxerData[vRow.index]}
+                  {@const isSelected = multiSelect
+                    ? Array.isArray(value) && value.includes(item?.value)
+                    : value === item?.value}
+                  <div
+                    class="px-3 py-2 cursor-pointer text-sm hover:bg-surface-100 dark:hover:bg-surface-700 flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500"
+                    class:bg-primary-100={isSelected}
+                    class:dark:bg-primary-900={isSelected}
+                    data-index={vRow.index}
+                    role="option"
+                    aria-selected={isSelected}
+                    tabindex="-1"
+                    onclick={() => onOptionSubmit(vRow.index)}
+                    onkeydown={(e) => onDropdownItemKeydown(e, vRow.index)}
+                  >
+                    {#if multiSelect}
+                      <input
+                        checked={isSelected}
+                        class="checkbox"
+                        readonly
+                        tabindex={-1}
+                        type="checkbox"
+                      />
+                    {/if}
+                    <span>{item?.label}</span>
+                  </div>
+                {/each}
+              </div>
             </div>
           </div>
-        </div>
-      {:else}
-        <div class="px-3 py-2 text-sm text-surface-500">Nothing found</div>
-      {/if}
-    </div>
-  {/if}
+        {:else}
+          <div class="px-3 py-2 text-sm text-surface-500">Nothing found</div>
+        {/if}
+      </div>
+    {/if}
+  </Portal>
 
   {#if rightSection}
     <div class="absolute right-8 top-1/2 -translate-y-1/2">

package/dist/components/Boxer/BoxerTarget.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import Portal from "../Portal/Portal.svelte";
 
   interface Props {
     clearable?: boolean;

package/dist/components/Boxer/types.d.ts

@@ -45,6 +45,7 @@ export interface BoxerProps {
     clearable?: boolean;
     data?: Array<BoxerItem>;
     dataSource?: BoxerDataSource;
+    disablePortal?: boolean;
     disabled?: boolean;
     error?: string;
     id?: string;

package/dist/components/Former/FormerDrawer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	/* eslint-disable @typescript-eslint/no-explicit-any */
 	import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';
+	import { registerOverlay } from '../OverlayStack';
 	import Former from './Former.svelte';
 	import type { FormerProps, FormRequestType } from './types';
 
@@ -56,6 +57,25 @@
 		'transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100';
 	const animContent =
 		'transition transition-discrete opacity-0 translate-x-full starting:data-[state=open]:opacity-0 starting:data-[state=open]:translate-x-full data-[state=open]:opacity-100 data-[state=open]:translate-x-0';
+
+	let backdropZ = $state(1000);
+	let contentZ = $state(1010);
+
+	$effect(() => {
+		if (!opened) {
+			return;
+		}
+
+		const overlay = registerOverlay({ kind: 'drawer', mount: 'portal' });
+		backdropZ = overlay.layer.backdrop;
+		contentZ = overlay.layer.content;
+
+		return () => {
+			overlay.unregister();
+			backdropZ = 1000;
+			contentZ = 1010;
+		};
+	});
 </script>
 
 <Dialog
@@ -69,8 +89,11 @@
 	modal
 >
 	<Portal>
-		<Dialog.Backdrop class="fixed inset-0 z-[1000] bg-black/50 backdrop-blur-sm {animBackdrop}" />
-		<Dialog.Positioner class="fixed inset-0 z-[1010] flex justify-end">
+		<Dialog.Backdrop
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm {animBackdrop}"
+			style={`z-index:${backdropZ};`}
+		/>
+		<Dialog.Positioner class="fixed inset-0 flex justify-end" style={`z-index:${contentZ};`}>
 			<Dialog.Content
 				class="card bg-surface-100-900 shadow-2xl h-full flex flex-col overflow-hidden rounded-none rounded-l-container-token {animContent}"
 				style="width: {width}"

package/dist/components/Former/FormerDrawerPreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
+	 
 	import FormerDrawer from './FormerDrawer.svelte';
 	import type { FormRequestType } from './types';
 	import TextInputCtrl from '../FormerControllers/TextInputCtrl.svelte';

package/dist/components/Former/FormerModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	/* eslint-disable @typescript-eslint/no-explicit-any */
 	import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';
+	import { registerOverlay } from '../OverlayStack';
 	import Former from './Former.svelte';
 	import type { FormerProps, FormRequestType } from './types';
 
@@ -50,6 +51,25 @@
 		'transition transition-discrete opacity-0 starting:data-[state=open]:opacity-0 data-[state=open]:opacity-100';
 	const animContent =
 		'transition transition-discrete opacity-0 scale-95 starting:data-[state=open]:opacity-0 starting:data-[state=open]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100';
+
+	let backdropZ = $state(1000);
+	let contentZ = $state(1010);
+
+	$effect(() => {
+		if (!opened) {
+			return;
+		}
+
+		const overlay = registerOverlay({ kind: 'dialog', mount: 'portal' });
+		backdropZ = overlay.layer.backdrop;
+		contentZ = overlay.layer.content;
+
+		return () => {
+			overlay.unregister();
+			backdropZ = 1000;
+			contentZ = 1010;
+		};
+	});
 </script>
 
 <Dialog
@@ -63,8 +83,11 @@
 	modal
 >
 	<Portal>
-		<Dialog.Backdrop class="fixed inset-0 z-[1000] bg-black/50 backdrop-blur-sm {animBackdrop}" />
-		<Dialog.Positioner class="fixed inset-0 z-[1010] flex items-center justify-center p-4">
+		<Dialog.Backdrop
+			class="fixed inset-0 bg-black/50 backdrop-blur-sm {animBackdrop}"
+			style={`z-index:${backdropZ};`}
+		/>
+		<Dialog.Positioner class="fixed inset-0 flex items-center justify-center p-4" style={`z-index:${contentZ};`}>
 			<Dialog.Content
 				class="card bg-surface-100-900 shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden {animContent}"
 			>

package/dist/components/Former/FormerModalPreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
+	 
 	import FormerModal from './FormerModal.svelte';
 	import type { FormRequestType } from './types';
 	import TextInputCtrl from '../FormerControllers/TextInputCtrl.svelte';

package/dist/components/FormerControllers/DateTimeCtrl/DateTimeCtrl.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import Portal from '../../Portal/Portal.svelte';
+  import { registerOverlay } from '../../OverlayStack';
   import type { CtrlBaseProps } from '../types';
   import DateTimeCtrlPickerPanel from './DateTimeCtrlPickerPanel.svelte';
   import {
@@ -140,6 +141,7 @@
   let popupTop = $state(0);
   let popupLeft = $state(0);
   let popupWidth = $state(0);
+  let pickerZIndex = $state(1100);
 
   const calendarMonthLabel = $derived(getYearMonthLabel(calendarYear, calendarMonth));
   const calendarCells = $derived(getCalendarCells(calendarYear, calendarMonth));
@@ -424,6 +426,23 @@
       window.removeEventListener('scroll', onWindowChange, true);
     };
   });
+
+  $effect(() => {
+    if (!withPicker || !pickerOpen || disabled) {
+      return;
+    }
+
+    const overlay = registerOverlay({
+      kind: 'popover',
+      mount: disablePortal ? 'inline' : 'portal',
+    });
+    pickerZIndex = overlay.layer.content;
+
+    return () => {
+      overlay.unregister();
+      pickerZIndex = 1100;
+    };
+  });
 </script>
 
 <div class="flex flex-col gap-1" title={tooltip}>
@@ -535,12 +554,13 @@
     {#if withPicker && pickerOpen && !disabled && disablePortal}
       <div
         id={pickerDialogId}
-        class={`absolute z-20 mt-2 w-full min-w-[17.5rem] max-w-[35rem] rounded border border-surface-300-700 bg-surface-50-950 p-3 shadow-xl ${panelClass}`.trim()}
+        class={`absolute mt-2 w-full min-w-[17.5rem] max-w-[35rem] rounded border border-surface-300-700 bg-surface-50-950 p-3 shadow-xl ${panelClass}`.trim()}
         role="dialog"
         aria-modal="false"
         aria-label={dialogAriaLabel}
         tabindex="-1"
         onkeydown={handlePickerKeydown}
+        style:z-index={pickerZIndex}
       >
         <DateTimeCtrlPickerPanel
           {showDatePicker}
@@ -579,12 +599,13 @@
       {#if withPicker && pickerOpen && !disabled && !disablePortal}
         <div
           id={pickerDialogId}
-          class={`fixed z-50 max-h-[min(80vh,38rem)] overflow-auto rounded border border-surface-300-700 bg-surface-50-950 p-3 shadow-xl ${panelClass}`.trim()}
+          class={`fixed max-h-[min(80vh,38rem)] overflow-auto rounded border border-surface-300-700 bg-surface-50-950 p-3 shadow-xl ${panelClass}`.trim()}
           role="dialog"
           aria-modal="false"
           aria-label={dialogAriaLabel}
           tabindex="-1"
           onkeydown={handlePickerKeydown}
+          style:z-index={pickerZIndex}
           style:top={`${popupTop}px`}
           style:left={`${popupLeft}px`}
           style:width={`${popupWidth}px`}

package/dist/components/OverlayStack/index.d.ts

@@ -0,0 +1 @@
+export * from './overlayStack';

package/dist/components/OverlayStack/index.js

@@ -0,0 +1 @@
+export * from './overlayStack';

package/dist/components/OverlayStack/overlayStack.d.ts

@@ -0,0 +1,29 @@
+export type OverlayKind = 'dialog' | 'drawer' | 'popover' | 'menu' | 'contextmenu';
+export type OverlayMount = 'portal' | 'inline';
+export interface OverlayEntry {
+    id: string;
+    kind: OverlayKind;
+    mount: OverlayMount;
+    openedAt: number;
+}
+export interface OverlayStackSnapshot {
+    entries: OverlayEntry[];
+}
+export interface OverlayLayer {
+    backdrop: number;
+    content: number;
+    floating: number;
+    top: number;
+}
+export declare const overlayStack: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<OverlayStackSnapshot>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+};
+export declare function registerOverlay(params: {
+    kind: OverlayKind;
+    mount?: OverlayMount;
+}): {
+    id: string;
+    layer: OverlayLayer;
+    unregister: () => void;
+};
+export declare function resolveOverlayLayer(state: OverlayStackSnapshot, id: string): OverlayLayer;

package/dist/components/OverlayStack/overlayStack.js

@@ -0,0 +1,49 @@
+import { writable } from 'svelte/store';
+const BASE_Z_INDEX = 1000;
+const OVERLAY_STRIDE = 20;
+const overlayStackInternal = writable({ entries: [] });
+let openedAtCounter = 0;
+let overlayIdCounter = 0;
+export const overlayStack = {
+    subscribe: overlayStackInternal.subscribe,
+};
+function resolveOverlayLayerFromOrder(order) {
+    const base = BASE_Z_INDEX + order * OVERLAY_STRIDE;
+    return {
+        backdrop: base,
+        content: base + 10,
+        floating: base + 12,
+        top: base + 14,
+    };
+}
+export function registerOverlay(params) {
+    const id = `overlay_${++overlayIdCounter}`;
+    const openedAt = ++openedAtCounter;
+    const entry = {
+        id,
+        kind: params.kind,
+        mount: params.mount ?? 'portal',
+        openedAt,
+    };
+    overlayStackInternal.update((state) => ({
+        ...state,
+        entries: [...state.entries, entry],
+    }));
+    return {
+        id,
+        layer: resolveOverlayLayerFromOrder(openedAt),
+        unregister: () => {
+            overlayStackInternal.update((state) => ({
+                ...state,
+                entries: state.entries.filter((item) => item.id !== id),
+            }));
+        },
+    };
+}
+export function resolveOverlayLayer(state, id) {
+    const entry = state.entries.find((item) => item.id === id);
+    if (!entry) {
+        return resolveOverlayLayerFromOrder(state.entries.length + 1);
+    }
+    return resolveOverlayLayerFromOrder(entry.openedAt);
+}

package/dist/components/VTree/VTreeContextMenu.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Portal from '../Portal/Portal.svelte';
+  import { registerOverlay } from '../OverlayStack';
   import type { VTreeContextMenuItem, VTreeRecord } from './types.js';
 
   export interface Props<T extends VTreeRecord = VTreeRecord> {
@@ -10,31 +12,53 @@
   }
 
   const { open, x, y, items, onselectitem }: Props = $props();
+
+  let backdropZ = $state(1090);
+  let menuZ = $state(1100);
+
+  $effect(() => {
+    if (!open) {
+      return;
+    }
+
+    const overlay = registerOverlay({ kind: 'contextmenu', mount: 'portal' });
+    backdropZ = overlay.layer.backdrop;
+    menuZ = overlay.layer.content;
+
+    return () => {
+      overlay.unregister();
+      backdropZ = 1090;
+      menuZ = 1100;
+    };
+  });
 </script>
 
-{#if open}
-  <button
-    class="fixed inset-0 z-50"
-    type="button"
-    aria-label="Close context menu"
-    onclick={() => onselectitem?.({ id: '__close__', label: '' })}
-  ></button>
-  <div
-    class="fixed z-[60] min-w-44 overflow-hidden rounded border border-surface-300-700 bg-surface-100-900 shadow-xl"
-    style={`left:${x}px; top:${y}px;`}
-    role="menu"
-    aria-label="Row context menu"
-  >
-    {#each items as item (item.id)}
-      <button
-        class="block w-full px-3 py-2 text-left text-sm hover:bg-surface-200-800 disabled:cursor-not-allowed disabled:opacity-50"
-        disabled={item.disabled}
-        type="button"
-        role="menuitem"
-        onclick={() => onselectitem?.(item)}
-      >
-        {item.label}
-      </button>
-    {/each}
-  </div>
-{/if}
+<Portal>
+  {#if open}
+    <button
+      class="fixed inset-0"
+      type="button"
+      aria-label="Close context menu"
+      onclick={() => onselectitem?.({ id: '__close__', label: '' })}
+      style:z-index={backdropZ}
+    ></button>
+    <div
+      class="fixed min-w-44 overflow-hidden rounded border border-surface-300-700 bg-surface-100-900 shadow-xl"
+      style={`left:${x}px; top:${y}px; z-index:${menuZ};`}
+      role="menu"
+      aria-label="Row context menu"
+    >
+      {#each items as item (item.id)}
+        <button
+          class="block w-full px-3 py-2 text-left text-sm hover:bg-surface-200-800 disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={item.disabled}
+          type="button"
+          role="menuitem"
+          onclick={() => onselectitem?.(item)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</Portal>

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from "./Former/index";
 export * from "./Boxer/index";
 export * from "./Gridler/index";
 export * from "./Portal/index";
+export * from "./OverlayStack/index";
 export * from "./Svark/index";
 export * from "./GlobalStateStore/index";
 export * from "./Screenshot/index";

package/dist/components/index.js

@@ -6,6 +6,7 @@ export * from "./Former/index";
 export * from "./Boxer/index";
 export * from "./Gridler/index";
 export * from "./Portal/index";
+export * from "./OverlayStack/index";
 export * from "./Svark/index";
 export * from "./GlobalStateStore/index";
 export * from "./Screenshot/index";

package/dist/css/svelix_orange.css

@@ -27,24 +27,24 @@
 	--anchor-text-decoration-active: none;
 	--anchor-text-decoration-focus: none;
 	--spacing: 0.22rem;
-	--radius-base: 0.125rem;
-	--radius-container: 0.125rem;
+	--radius-base: 0.375rem;
+	--radius-container: 0.75rem;
 	--default-border-width: 2px;
-	--default-divide-width: 1px;
-	--default-ring-width: 2px;
+	--default-divide-width: 2px;
+	--default-ring-width: 1px;
 	--body-background-color: var(--color-surface-50);
 	--body-background-color-dark: var(--color-surface-950);
 	--color-primary-50: oklch(91.66% 0.04 257.51deg);
-	--color-primary-100: oklch(84.1% 0.08 254.61deg);
-	--color-primary-200: oklch(76.5% 0.11 254.28deg);
-	--color-primary-300: oklch(69.52% 0.15 254.36deg);
-	--color-primary-400: oklch(62.85% 0.19 255.71deg);
-	--color-primary-500: oklch(57.32% 0.21 258.29deg);
-	--color-primary-600: oklch(51.62% 0.19 258.15deg);
-	--color-primary-700: oklch(46.06% 0.17 257.78deg);
-	--color-primary-800: oklch(40.05% 0.14 257.62deg);
-	--color-primary-900: oklch(34.15% 0.11 257.14deg);
-	--color-primary-950: oklch(27.73% 0.08 257.49deg);
+	--color-primary-100: oklch(84.19% 0.07 255.4deg);
+	--color-primary-200: oklch(76.89% 0.11 254.81deg);
+	--color-primary-300: oklch(69.67% 0.15 255.38deg);
+	--color-primary-400: oklch(63.17% 0.18 256.17deg);
+	--color-primary-500: oklch(57.44% 0.21 258.27deg);
+	--color-primary-600: oklch(51.82% 0.19 258.2deg);
+	--color-primary-700: oklch(45.98% 0.16 258deg);
+	--color-primary-800: oklch(40.28% 0.14 257.7deg);
+	--color-primary-900: oklch(34.07% 0.11 257.5deg);
+	--color-primary-950: oklch(27.72% 0.08 257.98deg);
 	--color-primary-contrast-dark: var(--color-primary-900);
 	--color-primary-contrast-light: var(--color-primary-50);
 	--color-primary-contrast-50: var(--color-primary-contrast-dark);
@@ -58,24 +58,24 @@
 	--color-primary-contrast-800: var(--color-primary-contrast-light);
 	--color-primary-contrast-900: var(--color-primary-contrast-light);
 	--color-primary-contrast-950: var(--color-primary-contrast-light);
-	--color-secondary-50: oklch(86.66% 0.05 300.15deg);
-	--color-secondary-100: oklch(78.51% 0.09 303.57deg);
-	--color-secondary-200: oklch(70.44% 0.13 304.44deg);
-	--color-secondary-300: oklch(62.83% 0.17 303.81deg);
-	--color-secondary-400: oklch(55.48% 0.2 302.75deg);
-	--color-secondary-500: oklch(49.07% 0.23 300.46deg);
-	--color-secondary-600: oklch(45.39% 0.21 299.6deg);
-	--color-secondary-700: oklch(41.75% 0.19 298.26deg);
-	--color-secondary-800: oklch(37.84% 0.17 296.27deg);
-	--color-secondary-900: oklch(34.08% 0.15 293.97deg);
-	--color-secondary-950: oklch(30.18% 0.13 291.16deg);
+	--color-secondary-50: oklch(86.62% 0.05 300.58deg);
+	--color-secondary-100: oklch(79.55% 0.05 350.56deg);
+	--color-secondary-200: oklch(72.85% 0.07 25.52deg);
+	--color-secondary-300: oklch(66.69% 0.11 39.77deg);
+	--color-secondary-400: oklch(61.19% 0.15 43.62deg);
+	--color-secondary-500: oklch(56.57% 0.17 40.75deg);
+	--color-secondary-600: oklch(50.53% 0.15 38.69deg);
+	--color-secondary-700: oklch(44.68% 0.12 29.27deg);
+	--color-secondary-800: oklch(38.89% 0.1 3.71deg);
+	--color-secondary-900: oklch(33.93% 0.1 324.36deg);
+	--color-secondary-950: oklch(30.27% 0.13 290.83deg);
 	--color-secondary-contrast-dark: var(--color-secondary-950);
 	--color-secondary-contrast-light: var(--color-secondary-50);
 	--color-secondary-contrast-50: var(--color-secondary-contrast-dark);
 	--color-secondary-contrast-100: var(--color-secondary-contrast-dark);
 	--color-secondary-contrast-200: var(--color-secondary-contrast-dark);
 	--color-secondary-contrast-300: var(--color-secondary-contrast-dark);
-	--color-secondary-contrast-400: var(--color-secondary-contrast-light);
+	--color-secondary-contrast-400: var(--color-secondary-contrast-dark);
 	--color-secondary-contrast-500: var(--color-secondary-contrast-light);
 	--color-secondary-contrast-600: var(--color-secondary-contrast-light);
 	--color-secondary-contrast-700: var(--color-secondary-contrast-light);
@@ -85,38 +85,38 @@
 	--color-tertiary-50: oklch(90.73% 0.08 328.92deg);
 	--color-tertiary-100: oklch(82.91% 0.13 339.68deg);
 	--color-tertiary-200: oklch(76% 0.18 345.55deg);
-	--color-tertiary-300: oklch(70.27% 0.23 350.68deg);
-	--color-tertiary-400: oklch(66.48% 0.25 355.85deg);
-	--color-tertiary-500: oklch(64.54% 0.26 2.48deg);
-	--color-tertiary-600: oklch(59.37% 0.24 1.7deg);
-	--color-tertiary-700: oklch(53.9% 0.22 0.5deg);
-	--color-tertiary-800: oklch(48.45% 0.2 359.66deg);
-	--color-tertiary-900: oklch(42.69% 0.17 357.71deg);
-	--color-tertiary-950: oklch(36.93% 0.15 355.34deg);
+	--color-tertiary-300: oklch(70.37% 0.22 350.76deg);
+	--color-tertiary-400: oklch(66.52% 0.25 355.9deg);
+	--color-tertiary-500: oklch(64.55% 0.26 2.5deg);
+	--color-tertiary-600: oklch(59.39% 0.24 1.72deg);
+	--color-tertiary-700: oklch(53.93% 0.22 0.54deg);
+	--color-tertiary-800: oklch(48.51% 0.2 359.74deg);
+	--color-tertiary-900: oklch(42.76% 0.17 357.83deg);
+	--color-tertiary-950: oklch(37.03% 0.15 355.51deg);
 	--color-tertiary-contrast-dark: var(--color-tertiary-950);
 	--color-tertiary-contrast-light: var(--color-tertiary-50);
 	--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);
 	--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);
 	--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);
-	--color-tertiary-contrast-300: var(--color-tertiary-contrast-light);
-	--color-tertiary-contrast-400: var(--color-tertiary-contrast-light);
-	--color-tertiary-contrast-500: var(--color-tertiary-contrast-light);
+	--color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);
+	--color-tertiary-contrast-400: var(--color-tertiary-contrast-dark);
+	--color-tertiary-contrast-500: var(--color-tertiary-contrast-dark);
 	--color-tertiary-contrast-600: var(--color-tertiary-contrast-light);
 	--color-tertiary-contrast-700: var(--color-tertiary-contrast-light);
 	--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
 	--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
 	--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
-	--color-success-50: oklch(94.05% 0.09 178.66deg);
-	--color-success-100: oklch(91.62% 0.1 178.6deg);
-	--color-success-200: oklch(89.44% 0.11 177.16deg);
-	--color-success-300: oklch(87.13% 0.12 176.9deg);
-	--color-success-400: oklch(85.09% 0.13 175.45deg);
-	--color-success-500: oklch(82.91% 0.13 174.95deg);
-	--color-success-600: oklch(72.85% 0.12 175.7deg);
-	--color-success-700: oklch(62.4% 0.1 175.99deg);
-	--color-success-800: oklch(51.26% 0.08 178.28deg);
-	--color-success-900: oklch(39.72% 0.06 179.74deg);
-	--color-success-950: oklch(27.27% 0.04 185.29deg);
+	--color-success-50: oklch(93.9% 0.09 179.09deg);
+	--color-success-100: oklch(91.57% 0.1 178.72deg);
+	--color-success-200: oklch(89.21% 0.11 177.71deg);
+	--color-success-300: oklch(87.2% 0.12 176.72deg);
+	--color-success-400: oklch(84.95% 0.12 175.68deg);
+	--color-success-500: oklch(82.81% 0.13 175.08deg);
+	--color-success-600: oklch(72.74% 0.11 175.88deg);
+	--color-success-700: oklch(62.29% 0.1 176.23deg);
+	--color-success-800: oklch(51.16% 0.08 178.61deg);
+	--color-success-900: oklch(39.61% 0.06 180.35deg);
+	--color-success-950: oklch(27.17% 0.04 186.97deg);
 	--color-success-contrast-dark: var(--color-success-950);
 	--color-success-contrast-light: var(--color-success-50);
 	--color-success-contrast-50: var(--color-success-contrast-dark);
@@ -125,22 +125,22 @@
 	--color-success-contrast-300: var(--color-success-contrast-dark);
 	--color-success-contrast-400: var(--color-success-contrast-dark);
 	--color-success-contrast-500: var(--color-success-contrast-dark);
-	--color-success-contrast-600: var(--color-success-contrast-light);
-	--color-success-contrast-700: var(--color-success-contrast-light);
+	--color-success-contrast-600: var(--color-success-contrast-dark);
+	--color-success-contrast-700: var(--color-success-contrast-dark);
 	--color-success-contrast-800: var(--color-success-contrast-light);
 	--color-success-contrast-900: var(--color-success-contrast-light);
 	--color-success-contrast-950: var(--color-success-contrast-light);
-	--color-warning-50: oklch(95.67% 0.05 84.56deg);
-	--color-warning-100: oklch(92.83% 0.06 82.16deg);
-	--color-warning-200: oklch(90.12% 0.08 80.33deg);
-	--color-warning-300: oklch(87.59% 0.1 80.01deg);
-	--color-warning-400: oklch(85.03% 0.12 78.35deg);
-	--color-warning-500: oklch(82.46% 0.14 76.71deg);
-	--color-warning-600: oklch(76.34% 0.13 72.25deg);
-	--color-warning-700: oklch(70.34% 0.13 68.09deg);
+	--color-warning-50: oklch(95.58% 0.05 86.88deg);
+	--color-warning-100: oklch(92.81% 0.07 83.57deg);
+	--color-warning-200: oklch(90.05% 0.09 81.8deg);
+	--color-warning-300: oklch(87.42% 0.11 80.05deg);
+	--color-warning-400: oklch(84.79% 0.12 78.56deg);
+	--color-warning-500: oklch(82.33% 0.14 76.57deg);
+	--color-warning-600: oklch(76.31% 0.14 72.87deg);
+	--color-warning-700: oklch(70.33% 0.13 68.3deg);
 	--color-warning-800: oklch(63.99% 0.13 63.18deg);
-	--color-warning-900: oklch(57.91% 0.13 57.97deg);
-	--color-warning-950: oklch(51.69% 0.13 51.44deg);
+	--color-warning-900: oklch(57.92% 0.13 57.63deg);
+	--color-warning-950: oklch(51.71% 0.13 51.88deg);
 	--color-warning-contrast-dark: var(--color-warning-950);
 	--color-warning-contrast-light: var(--color-warning-50);
 	--color-warning-contrast-50: var(--color-warning-contrast-dark);
@@ -149,22 +149,22 @@
 	--color-warning-contrast-300: var(--color-warning-contrast-dark);
 	--color-warning-contrast-400: var(--color-warning-contrast-dark);
 	--color-warning-contrast-500: var(--color-warning-contrast-dark);
-	--color-warning-contrast-600: var(--color-warning-contrast-light);
+	--color-warning-contrast-600: var(--color-warning-contrast-dark);
 	--color-warning-contrast-700: var(--color-warning-contrast-light);
 	--color-warning-contrast-800: var(--color-warning-contrast-light);
 	--color-warning-contrast-900: var(--color-warning-contrast-light);
 	--color-warning-contrast-950: var(--color-warning-contrast-light);
 	--color-error-50: oklch(89.99% 0.04 14.04deg);
-	--color-error-100: oklch(85.74% 0.07 43.8deg);
-	--color-error-200: oklch(81.53% 0.11 52.73deg);
-	--color-error-300: oklch(77.99% 0.14 55.49deg);
-	--color-error-400: oklch(74.61% 0.17 54.32deg);
-	--color-error-500: oklch(72.01% 0.19 49.76deg);
-	--color-error-600: oklch(69% 0.19 47.98deg);
-	--color-error-700: oklch(65.83% 0.18 46.33deg);
-	--color-error-800: oklch(62.8% 0.18 44.45deg);
-	--color-error-900: oklch(59.61% 0.18 42.69deg);
-	--color-error-950: oklch(56.57% 0.17 40.75deg);
+	--color-error-100: oklch(85.76% 0.07 42.85deg);
+	--color-error-200: oklch(81.56% 0.11 51.68deg);
+	--color-error-300: oklch(78.03% 0.14 54.55deg);
+	--color-error-400: oklch(74.63% 0.17 53.69deg);
+	--color-error-500: oklch(72.02% 0.19 49.51deg);
+	--color-error-600: oklch(68.87% 0.19 47.84deg);
+	--color-error-700: oklch(65.84% 0.18 46.46deg);
+	--color-error-800: oklch(62.8% 0.18 44.35deg);
+	--color-error-900: oklch(59.74% 0.17 42.77deg);
+	--color-error-950: oklch(56.52% 0.17 40.7deg);
 	--color-error-contrast-dark: var(--color-error-950);
 	--color-error-contrast-light: var(--color-error-50);
 	--color-error-contrast-50: var(--color-error-contrast-dark);
@@ -195,7 +195,7 @@
 	--color-surface-contrast-100: var(--color-surface-contrast-dark);
 	--color-surface-contrast-200: var(--color-surface-contrast-dark);
 	--color-surface-contrast-300: var(--color-surface-contrast-dark);
-	--color-surface-contrast-400: var(--color-surface-contrast-light);
+	--color-surface-contrast-400: var(--color-surface-contrast-dark);
 	--color-surface-contrast-500: var(--color-surface-contrast-light);
 	--color-surface-contrast-600: var(--color-surface-contrast-light);
 	--color-surface-contrast-700: var(--color-surface-contrast-light);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Svelte 5 component library with Skeleton UI and Tailwind CSS",
   "license": "Apache-2.0",
   "exports": {