feat(modal): accept an optional overlayZIndex prop for nested-modal stacking

The shared Modal component's overlay defaults to z-index 3000. When
one Modal is opened from inside another whose overlay has bumped its
z-index — a pattern used by some consumers to ensure their modal
stays above its parent — opening a default-z-index Modal from inside
that one renders the nested Modal *behind* the parent overlay. The
screen darkens (both overlays compound) but the new Modal's content
is invisible and uninteractive.

Add an optional `overlayZIndex: Number` prop that, when supplied, is
applied as an inline style on the overlay div. The default is left
undefined so the global `.modal-overlay { z-index: 3000 }` rule still
wins for every existing caller — strictly additive, no behaviour
change for anyone who doesn't opt in.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: 2 people

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+- **`Modal` accepts an optional `overlayZIndex` prop:** The shared `Modal` component's overlay defaults to `z-index: 3000`. When one Modal is opened from inside another whose overlay has bumped its z-index (a pattern used by some consumers to ensure the inner modal sits above its parent), opening a default-z-index Modal from inside it renders the new modal *behind* the parent overlay — the screen darkens (both overlays compound) but the new modal's content is invisible/uninteractive. The new `overlayZIndex` prop lets a nested-modal caller pass a value higher than the parent's overlay so the nested Modal stacks on top. The prop is omitted by default; behaviour for every existing caller is unchanged.
+
 ## [0.2.71] - 2026-04-17
 
 ### Added

fe/src/components/feedback/Modal.vue

@@ -17,7 +17,12 @@
 -->
 <template>
   <teleport to="body">
-    <div v-if="visible" class="modal-overlay" @click.self="onClose">
+    <div
+      v-if="visible"
+      class="modal-overlay"
+      :style="overlayStyle"
+      @click.self="onClose"
+    >
       <div
         ref="contentRef"
         class="modal-content"
@@ -70,6 +75,12 @@ const props = defineProps({
   title: { type: String, default: '' },
   showClose: { type: Boolean, default: true },
   size: { type: String as () => 'sm' | 'md' | 'lg', default: 'md' },
+  // Optional inline-style override for the overlay's z-index. Useful when this
+  // Modal is opened from inside another modal whose overlay has bumped its
+  // z-index above the global default of 3000; pass a value higher than the
+  // parent's overlay so the nested Modal stacks on top instead of rendering
+  // behind a darker (compounded) parent overlay. Omit to keep the default.
+  overlayZIndex: { type: Number, default: undefined },
 })
 const emit = defineEmits(['close'])
 
@@ -81,6 +92,10 @@ const sizeClass = computed(() => {
   return props.size === 'sm' ? 'modal-sm' : props.size === 'lg' ? 'modal-lg' : 'modal-md'
 })
 
+const overlayStyle = computed(() =>
+  props.overlayZIndex != null ? { zIndex: props.overlayZIndex } : undefined,
+)
+
 const contentRef = ref<HTMLElement | null>(null)
 const ariaLabelledBy = ref<string | undefined>(undefined)
 let modalObserver: MutationObserver | null = null