@alliance-droid/status-feedback-system 1.3.4 → 1.3.5

package/dist/components/DevFeedback.svelte

@@ -69,6 +69,16 @@
 	let clickedElement = $state<HTMLElement | null>(null);
 
 	let formOpen = $state(false);
+	let formPopoverEl: HTMLDivElement | undefined = $state();
+
+	// Promote form modal to the browser's top layer when opened
+	$effect(() => {
+		if (formOpen && formPopoverEl && typeof formPopoverEl.showPopover === 'function') {
+			try { formPopoverEl.showPopover(); } catch { /* fallback to z-index */ }
+		} else if (!formOpen && formPopoverEl && typeof formPopoverEl.hidePopover === 'function') {
+			try { formPopoverEl.hidePopover(); } catch { /* already hidden */ }
+		}
+	});
 	let formType = $state<'bug' | 'feature'>('bug');
 	let formTitle = $state('');
 	let formMessage = $state('');
@@ -284,10 +294,12 @@
 	<!-- Form modal -->
 	{#if formOpen}
 		<div
-			class="sf-modal fixed w-full max-w-lg flex flex-col"
+			bind:this={formPopoverEl}
+			popover="manual"
+			class="sf-modal sf-feedback-popover w-full max-w-lg flex flex-col"
 			style={modalPositioned
-				? `left: ${modalX}px; top: ${modalY}px; z-index: 99998;`
-				: 'left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99998;'
+				? `left: ${modalX}px; top: ${modalY}px;`
+				: 'left: 50%; top: 50%; transform: translate(-50%, -50%);'
 			}
 		>
 			<Card variant="elevated" padding="none" class="flex flex-col max-h-[calc(100vh-2rem)] overflow-hidden">
@@ -451,6 +463,18 @@
 {/if}
 
 <style>
+	/* Override popover defaults — remove browser default styles */
+	.sf-feedback-popover {
+		position: fixed;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: transparent;
+		overflow: visible;
+		/* Fallback for browsers without popover support */
+		z-index: 99998;
+	}
+
 	/* Floating modal shadow — no backdrop so needs strong depth cue */
 	.sf-modal :global(.card) {
 		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);

package/dist/components/dev/DevContextMenu.svelte

@@ -8,11 +8,26 @@
 		onViewBoard?: () => void;
 	}
 
+	import { onMount } from 'svelte';
+
 	let { x, y, boardUrl, onReportBug, onRequestFeature, onViewBoard }: Props = $props();
 
+	let popoverEl: HTMLDivElement | undefined = $state();
+
 	let adjustedX = $derived(Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 800) - 200));
 	let adjustedY = $derived(Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 600) - 160));
 
+	// Show the popover on mount to promote it to the top layer
+	onMount(() => {
+		if (popoverEl && typeof popoverEl.showPopover === 'function') {
+			try {
+				popoverEl.showPopover();
+			} catch {
+				// Fallback: popover API not supported, z-index inline style still applies
+			}
+		}
+	});
+
 	function handleKeydown(e: KeyboardEvent) {
 		const menu = (e.currentTarget as HTMLElement);
 		const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
@@ -31,9 +46,12 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions — context menu positioned at cursor -->
+<!-- popover="manual" promotes to browser top layer (above <dialog> modals) -->
 <div
-	class="fixed"
-	style="left: {adjustedX}px; top: {adjustedY}px; z-index: 99999;"
+	bind:this={popoverEl}
+	popover="manual"
+	class="sf-ctx-popover"
+	style="left: {adjustedX}px; top: {adjustedY}px;"
 	onmousedown={(e) => e.stopPropagation()}
 >
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -59,6 +77,18 @@
 </div>
 
 <style>
+	/* Override popover defaults — remove browser default styles */
+	.sf-ctx-popover {
+		position: fixed;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: transparent;
+		overflow: visible;
+		/* Fallback for browsers without popover support */
+		z-index: 99999;
+	}
+
 	.sf-ctx-menu {
 		background: var(--sf-surface, var(--color-surface, #1e293b));
 		border: 1px solid var(--sf-border, var(--color-border, #334155));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",