@wishbone-media/spark 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/SparkOverlay.vue

@@ -57,6 +57,7 @@
 <script setup>
 import { computed, onUnmounted, ref } from 'vue'
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import { sparkModalService } from '@/composables/sparkModalService'
 
 const panelRef = ref(null)
 
@@ -95,6 +96,20 @@ const widthClass = computed(() => {
 })
 
 const handleClose = () => {
+  // A spark modal stacked above overlay content (e.g. a confirm dialog) is a
+  // sibling Headless UI Dialog: its clicks and Escape register here as
+  // outside interactions. Ignore closes while one is open — the modal
+  // dismisses first, the overlay only on the next interaction.
+  //
+  // Two Headless UI behaviors this guard depends on (re-verify on upgrade):
+  // 1. Outside-click dismissal is dispatched on document `click` in the
+  //    CAPTURE phase, so this runs before a modal button's bubble-phase
+  //    handler calls hide() — isVisible is still true for the dismissing
+  //    click itself.
+  // 2. Sibling Dialogs process document events in mount order; the overlay's
+  //    Dialog mounts before any modal spawned from its content, so on a
+  //    shared backdrop click this guard runs before the modal closes itself.
+  if (sparkModalService.state.isVisible) return
   props.overlayInstance.close()
   emit('close')
 }

package/src/composables/useSubNavigation.js

@@ -67,6 +67,10 @@ export function useSubNavigation(options = {}) {
   // Reactive items list
   const items = ref(initialItems.map(normalizeItem))
 
+  // Local selection for route-less items without query sync (e.g. tabs inside
+  // an overlay panel, where writing to the host route's query is undesirable)
+  const manualActiveId = ref(null)
+
   /**
    * Normalize item to ensure consistent structure
    */
@@ -124,7 +128,11 @@ export function useSubNavigation(options = {}) {
       return itemObj.id === fallbackId
     }
 
-    if (!itemObj.route) return false
+    // Local mode: route-less items without query sync track manual selection
+    if (!itemObj.route) {
+      const fallbackId = defaultId || visibleItems.value[0]?.id
+      return itemObj.id === (manualActiveId.value ?? fallbackId)
+    }
 
     // Handle route as string (route name) or object
     const itemRoute = typeof itemObj.route === 'string' ? { name: itemObj.route } : itemObj.route
@@ -226,7 +234,9 @@ export function useSubNavigation(options = {}) {
       return true
     }
 
-    return false
+    // Local mode: remember the selection without touching the route
+    manualActiveId.value = itemObj.id
+    return true
   }
 
   /**
@@ -235,6 +245,12 @@ export function useSubNavigation(options = {}) {
    */
   function setItems(newItems) {
     items.value = newItems.map(normalizeItem)
+    // Drop a local-mode selection whose id no longer exists — a later items
+    // update reintroducing the id would otherwise silently re-activate it.
+    // Selections whose id survives the replacement are kept.
+    if (manualActiveId.value && !items.value.some((item) => item.id === manualActiveId.value)) {
+      manualActiveId.value = null
+    }
   }
 
   /**