fix zindex

ts_web/elements/dees-modal.ts

@@ -1,6 +1,6 @@
 import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
-import { zIndexLayers } from './00zindex.js';
+import { zIndexLayers, zIndexRegistry } from './00zindex.js';
 
 import { demoFunc } from './dees-modal.demo.js';
 import {
@@ -62,6 +62,11 @@ export class DeesModal extends DeesElement {
     });
     body.append(modal.windowLayer);
     body.append(modal);
+    
+    // Get z-index for modal (should be above window layer)
+    modal.modalZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(modal, modal.modalZIndex);
+    
     return modal;
   }
 
@@ -95,6 +100,9 @@ export class DeesModal extends DeesElement {
 
   @property({ attribute: false })
   public onHelp: () => void | Promise<void>;
+  
+  @state()
+  private modalZIndex: number = 1000;
 
   constructor() {
     super();
@@ -118,7 +126,6 @@ export class DeesModal extends DeesElement {
         box-sizing: border-box;
         align-items: center;
         justify-content: center;
-        z-index: ${zIndexLayers.overlay.modal};
       }
       .modal {
         will-change: transform;
@@ -291,7 +298,7 @@ export class DeesModal extends DeesElement {
         ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''}
         ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
       </style>
-      <div class="modalContainer" @click=${this.handleOutsideClick}>
+      <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
         <div class="modal ${widthClass}">
           <div class="heading">
             <div class="heading-text">${this.heading}</div>
@@ -349,6 +356,9 @@ export class DeesModal extends DeesElement {
     await domtools.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
   }
 
   private async handleHelp() {