fix zindex

ts_web/elements/00zindex.ts

@@ -56,4 +56,106 @@ export const componentZIndex = {
   'dees-mobilenavigation': zIndexLayers.fixed.mobileNav,
   'dees-slash-menu': zIndexLayers.wysiwygMenus,
   'dees-formatting-menu': zIndexLayers.wysiwygMenus,
-} as const;
+} as const;
+
+/**
+ * Z-Index Registry for managing stacked elements
+ * Simple incremental z-index assignment based on creation order
+ */
+export class ZIndexRegistry {
+  private static instance: ZIndexRegistry;
+  private activeElements = new Set<HTMLElement>();
+  private elementZIndexMap = new WeakMap<HTMLElement, number>();
+  private currentZIndex = 1000; // Starting z-index
+  
+  private constructor() {}
+  
+  public static getInstance(): ZIndexRegistry {
+    if (!ZIndexRegistry.instance) {
+      ZIndexRegistry.instance = new ZIndexRegistry();
+    }
+    return ZIndexRegistry.instance;
+  }
+  
+  /**
+   * Get the next available z-index
+   * @returns The next available z-index
+   */
+  public getNextZIndex(): number {
+    this.currentZIndex += 10;
+    return this.currentZIndex;
+  }
+  
+  /**
+   * Register an element with the z-index registry
+   * @param element - The HTML element to register
+   * @param zIndex - The z-index assigned to this element
+   */
+  public register(element: HTMLElement, zIndex: number): void {
+    this.activeElements.add(element);
+    this.elementZIndexMap.set(element, zIndex);
+  }
+  
+  /**
+   * Unregister an element from the z-index registry
+   * @param element - The HTML element to unregister
+   */
+  public unregister(element: HTMLElement): void {
+    this.activeElements.delete(element);
+    this.elementZIndexMap.delete(element);
+    
+    // If no more active elements, reset counter to base
+    if (this.activeElements.size === 0) {
+      this.currentZIndex = 1000;
+    }
+  }
+  
+  /**
+   * Get the z-index for a specific element
+   * @param element - The HTML element
+   * @returns The z-index or undefined if not registered
+   */
+  public getElementZIndex(element: HTMLElement): number | undefined {
+    return this.elementZIndexMap.get(element);
+  }
+  
+  /**
+   * Get count of active elements
+   * @returns Number of active elements
+   */
+  public getActiveCount(): number {
+    return this.activeElements.size;
+  }
+  
+  /**
+   * Get the current highest z-index
+   * @returns The current z-index value
+   */
+  public getCurrentZIndex(): number {
+    return this.currentZIndex;
+  }
+  
+  /**
+   * Clear all registrations (useful for testing)
+   */
+  public clear(): void {
+    this.activeElements.clear();
+    this.elementZIndexMap = new WeakMap();
+    this.currentZIndex = 1000;
+  }
+  
+  /**
+   * Get all active elements in z-index order
+   * @returns Array of elements sorted by z-index
+   */
+  public getActiveElementsInOrder(): HTMLElement[] {
+    return Array.from(this.activeElements).sort((a, b) => {
+      const aZ = this.elementZIndexMap.get(a) || 0;
+      const bZ = this.elementZIndexMap.get(b) || 0;
+      return aZ - bZ;
+    });
+  }
+}
+
+// Export singleton instance for convenience
+export const zIndexRegistry = ZIndexRegistry.getInstance();

ts_web/elements/dees-input-dropdown.ts

@@ -280,6 +280,11 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       elevatedDropdown.style.top = this.getBoundingClientRect().top + 'px';
       elevatedDropdown.style.left = this.getBoundingClientRect().left + 'px';
       elevatedDropdown.style.width = this.clientWidth + 'px';
+      
+      // Get z-index from registry for the elevated dropdown
+      const dropdownZIndex = (await import('./00zindex.js')).zIndexRegistry.getNextZIndex();
+      elevatedDropdown.style.zIndex = dropdownZIndex.toString();
+      (await import('./00zindex.js')).zIndexRegistry.register(elevatedDropdown, dropdownZIndex);
       elevatedDropdown.options = this.options;
       elevatedDropdown.selectedOption = this.selectedOption;
       elevatedDropdown.highlightedIndex = elevatedDropdown.selectedOption ? elevatedDropdown.options.indexOf(
@@ -296,9 +301,13 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
           '0';
         elevatedDropdown.removeEventListener('selectedOption', handleSelection);
         this.windowOverlay.removeEventListener('clicked', destroyOverlay);
+        
+        // Unregister elevated dropdown from z-index registry
+        (await import('./00zindex.js')).zIndexRegistry.unregister(elevatedDropdown);
+        
         this.windowOverlay.destroy();
       };
-      const handleSelection = async (event) => {
+      const handleSelection = async () => {
         await this.updateSelection(elevatedDropdown.selectedOption);
         destroyOverlay();
       };
@@ -323,10 +332,20 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
         await domtoolsInstance.convenience.smartdelay.delayFor(0);
         const searchInput = selectionBox.querySelector('input');
         searchInput?.focus();
+        
+        // Get z-index from registry for the selection box
+        const selectionBoxZIndex = (await import('./00zindex.js')).zIndexRegistry.getNextZIndex();
+        selectionBox.style.zIndex = selectionBoxZIndex.toString();
+        (await import('./00zindex.js')).zIndexRegistry.register(selectionBox as HTMLElement, selectionBoxZIndex);
+        
         selectionBox.classList.add('show');
       } else {
         selectedBox.style.pointerEvents = 'none';
         selectionBox.classList.remove('show');
+        
+        // Unregister selection box from z-index registry
+        (await import('./00zindex.js')).zIndexRegistry.unregister(selectionBox as HTMLElement);
+        
         // selectedBox.style.opacity = '0';
       }
     }

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() {

ts_web/elements/dees-windowlayer.ts

@@ -1,5 +1,5 @@
 import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
-import { zIndexLayers } from './00zindex.js';
+import { zIndexLayers, zIndexRegistry } from './00zindex.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -33,6 +33,12 @@ export class DeesWindowLayer extends DeesElement {
   public options: IOptions_DeesWindowLayer = {
     blur: false
   };
+  
+  @state()
+  private backdropZIndex: number = 1000;
+  
+  @state()
+  private contentZIndex: number = 1001;
 
   // INSTANCE
   @property({
@@ -63,7 +69,7 @@ export class DeesWindowLayer extends DeesElement {
           background: rgba(0, 0, 0, 0.0);
           backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''};
           pointer-events: none;
-          z-index: ${zIndexLayers.backdrop.dropdown};
+          z-index: ${this.backdropZIndex};
         }
         .slotContent {
           position: fixed;
@@ -72,7 +78,7 @@ export class DeesWindowLayer extends DeesElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          z-index: ${zIndexLayers.overlay.dropdown};
+          z-index: ${this.contentZIndex};
         }
         
         .visible {
@@ -102,9 +108,21 @@ export class DeesWindowLayer extends DeesElement {
   public toggleVisibility () {
     this.visible = !this.visible;
   }
+  
+  public getContentZIndex(): number {
+    return this.contentZIndex;
+  }
 
   public async show() {
     const domtools = await this.domtoolsPromise;
+    
+    // Get z-indexes from registry
+    this.backdropZIndex = zIndexRegistry.getNextZIndex();
+    this.contentZIndex = zIndexRegistry.getNextZIndex();
+    
+    // Register this element
+    zIndexRegistry.register(this, this.backdropZIndex);
+    
     await domtools.convenience.smartdelay.delayFor(0);
     this.visible = true;
   }
@@ -119,6 +137,10 @@ export class DeesWindowLayer extends DeesElement {
     const domtools = await this.domtoolsPromise;
     await this.hide();
     await domtools.convenience.smartdelay.delayFor(300);
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
+    
     this.remove();
   }
 }

ts_web/pages/zindex-showcase.ts

@@ -23,25 +23,92 @@ export const showcasePage = () => html`
         overflow-y: auto;
       }
 
-      .showcase-content {
-        padding: 40px;
+      .showcase-container {
         max-width: 1200px;
         margin: 0 auto;
+        padding: 48px 24px;
       }
 
-      h1 {
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        margin-bottom: 16px;
-        font-size: 32px;
+      .showcase-header {
+        text-align: center;
+        margin-bottom: 48px;
       }
 
-      .intro {
+      .showcase-title {
+        font-size: 48px;
+        font-weight: 700;
+        margin: 0 0 16px 0;
+        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+      }
+
+      .showcase-subtitle {
+        font-size: 20px;
         color: ${cssManager.bdTheme('#666', '#999')};
-        font-size: 18px;
+        margin: 0 0 32px 0;
         line-height: 1.6;
+      }
+
+      .showcase-section {
+        margin-bottom: 48px;
+      }
+      
+      .showcase-section:last-child {
+        margin-bottom: 0;
+        padding-bottom: 48px;
+      }
+
+      /* Ensure all headings are theme-aware */
+      h1, h2, h3, h4, h5, h6 {
+        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+        margin: 0;
+      }
+
+      p {
+        color: ${cssManager.bdTheme('#666', '#999')};
+        line-height: 1.6;
+      }
+
+      strong {
+        color: ${cssManager.bdTheme('#333', '#e0e0e0')};
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
         margin-bottom: 32px;
       }
 
+      .section-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
+      }
+
+      .section-icon.layers { background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')}; }
+      .section-icon.registry { background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')}; }
+      .section-icon.demo { background: ${cssManager.bdTheme('#fff3e0', '#e65100')}; }
+      .section-icon.guidelines { background: ${cssManager.bdTheme('#e0f2f1', '#004d40')}; }
+
+      .section-title {
+        font-size: 32px;
+        font-weight: 600;
+        margin: 0;
+        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
+      }
+
+      .section-description {
+        color: ${cssManager.bdTheme('#666', '#999')};
+        font-size: 16px;
+        line-height: 1.6;
+        margin-bottom: 24px;
+      }
+
       .demo-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -49,17 +116,39 @@ export const showcasePage = () => html`
         margin-bottom: 40px;
       }
 
+      .demo-card {
+        background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        border-radius: 12px;
+        padding: 24px;
+        transition: all 0.2s ease;
+      }
+
+      .demo-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
+      }
+
+      .demo-card h4 {
+        margin-bottom: 16px;
+        font-size: 18px;
+        font-weight: 600;
+      }
+
       .hierarchy-visual {
         background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
-        border-radius: 8px;
-        padding: 24px;
+        border-radius: 12px;
+        padding: 32px;
         margin-bottom: 40px;
       }
 
       .hierarchy-visual h3 {
         margin-top: 0;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin-bottom: 24px;
+        font-size: 24px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#1a1a1a', '#fff')};
       }
 
       .layer-stack {
@@ -70,19 +159,20 @@ export const showcasePage = () => html`
       }
 
       .layer {
-        padding: 12px 16px;
-        border-radius: 6px;
+        padding: 16px 20px;
+        border-radius: 8px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-family: 'Geist Mono', monospace;
         font-size: 14px;
         transition: all 0.2s;
+        border: 1px solid transparent;
       }
 
       .layer:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        transform: translateX(4px);
+        border-color: ${cssManager.bdTheme('#e0e0e0', '#444')};
       }
 
       .layer.base {
@@ -124,16 +214,25 @@ export const showcasePage = () => html`
       }
 
       .warning-box {
-        background: ${cssManager.bdTheme('#fff3cd', '#332701')};
-        border: 1px solid ${cssManager.bdTheme('#ffeaa7', '#664400')};
-        border-radius: 6px;
-        padding: 16px;
-        margin-bottom: 24px;
-        color: ${cssManager.bdTheme('#856404', '#ffecb5')};
+        background: ${cssManager.bdTheme('#fff8e1', '#332701')};
+        border: 1px solid ${cssManager.bdTheme('#ffe082', '#664400')};
+        border-radius: 12px;
+        padding: 20px;
+        margin-bottom: 32px;
+        color: ${cssManager.bdTheme('#f57f17', '#ffecb5')};
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+      }
+
+      .warning-box::before {
+        content: '⚠️';
+        font-size: 20px;
+        flex-shrink: 0;
       }
 
       .warning-box strong {
-        color: ${cssManager.bdTheme('#856404', '#ffd93d')};
+        color: ${cssManager.bdTheme('#f57f17', '#ffd93d')};
       }
 
       code {
@@ -160,56 +259,186 @@ export const showcasePage = () => html`
         position: relative;
         display: inline-block;
       }
+      
+      .registry-status {
+        background: ${cssManager.bdTheme('#e8f5e9', '#1a2e1a')};
+        border: 1px solid ${cssManager.bdTheme('#4caf50', '#2e7d32')};
+        border-radius: 12px;
+        padding: 24px;
+        margin-bottom: 32px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .registry-status::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: ${cssManager.bdTheme('#4caf50', '#2e7d32')};
+      }
+      
+      .registry-status h4 {
+        margin-top: 0;
+        margin-bottom: 16px;
+        color: ${cssManager.bdTheme('#2e7d32', '#81c784')};
+        font-size: 18px;
+        font-weight: 600;
+      }
+      
+      .registry-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 8px 0;
+        color: ${cssManager.bdTheme('#558b2f', '#aed581')};
+        font-family: 'Geist Mono', monospace;
+        font-size: 14px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e0f2e1', '#1b5e20')};
+      }
+
+      .registry-item:last-child {
+        border-bottom: none;
+      }
+      
+      .registry-item.active {
+        color: ${cssManager.bdTheme('#2e7d32', '#4ade80')};
+        font-weight: 600;
+      }
+
+      .registry-item span:last-child {
+        font-weight: 600;
+      }
     `}
   </style>
 
   <div class="page-wrapper">
-    <div class="showcase-content">
-      <h1>Z-Index Hierarchy Showcase</h1>
-      <p class="intro">
-        This page demonstrates the z-index management system that ensures proper stacking order for all overlay components.
-        Test the different scenarios to see how overlays interact with each other.
-      </p>
-
-      <div class="warning-box">
-        <strong>⚠️ Important:</strong> The z-index values are managed centrally in <code>00zindex.ts</code>. 
-        Never use arbitrary z-index values in components - always import and use the predefined layers.
+    <div class="showcase-container">
+      <div class="showcase-header">
+        <h1 class="showcase-title">Z-Index Management</h1>
+        <p class="showcase-subtitle">
+          A comprehensive system for managing overlay stacking order across all components.
+          Test different scenarios to see how the dynamic z-index registry ensures proper layering.
+        </p>
       </div>
 
-      <div class="hierarchy-visual">
-        <h3>Z-Index Layer Stack (Top to Bottom)</h3>
-        <div class="layer-stack">
-          <div class="layer base">
-            <span class="layer-name">Base Content</span>
-            <span class="layer-value">z-index: auto</span>
+      <div class="warning-box">
+        <div>
+          <strong>Important:</strong> The z-index values are managed centrally in <code>00zindex.ts</code>. 
+          Never use arbitrary z-index values in components - always import and use the z-index registry.
+        </div>
+      </div>
+
+      <!-- Registry Status Section -->
+      <div class="showcase-section">
+        <div class="section-header">
+          <div class="section-icon registry">📊</div>
+          <div>
+            <h2 class="section-title">Live Registry Status</h2>
           </div>
-          <div class="layer fixed">
-            <span class="layer-name">Fixed Navigation</span>
-            <span class="layer-value">z-index: 10-250</span>
+        </div>
+        <div class="registry-status" id="registryStatus">
+          <h4>Z-Index Registry</h4>
+          <div class="registry-item">
+            <span>Active Elements:</span>
+            <span id="activeCount">0</span>
           </div>
-          <div class="layer dropdown">
-            <span class="layer-name">Dropdown Overlays</span>
-            <span class="layer-value">z-index: 1999-2000</span>
+          <div class="registry-item">
+            <span>Current Z-Index:</span>
+            <span id="currentZIndex">1000</span>
           </div>
-          <div class="layer modal">
-            <span class="layer-name">Modal Dialogs</span>
-            <span class="layer-value">z-index: 2999-3000</span>
+        </div>
+      </div>
+      
+      <script>
+        // Update registry status periodically
+        setInterval(() => {
+          const registryDiv = document.getElementById('registryStatus');
+          if (registryDiv && window.zIndexRegistry) {
+            const activeCount = document.getElementById('activeCount');
+            const currentZIndex = document.getElementById('currentZIndex');
+            
+            if (activeCount) activeCount.textContent = window.zIndexRegistry.getActiveCount();
+            if (currentZIndex) currentZIndex.textContent = window.zIndexRegistry.getCurrentZIndex();
+            
+            // Update active state
+            const items = registryDiv.querySelectorAll('.registry-item');
+            const count = window.zIndexRegistry.getActiveCount();
+            if (count > 0) {
+              items[0].classList.add('active');
+            } else {
+              items[0].classList.remove('active');
+            }
+          }
+        }, 500);
+        
+        // Make registry available globally for the demo
+        import('../elements/00zindex.js').then(module => {
+          window.zIndexRegistry = module.zIndexRegistry;
+        });
+      </script>
+
+      <!-- Layer Hierarchy Section -->
+      <div class="showcase-section">
+        <div class="section-header">
+          <div class="section-icon layers">📚</div>
+          <div>
+            <h2 class="section-title">Layer Hierarchy</h2>
           </div>
-          <div class="layer context">
-            <span class="layer-name">Context Menus & WYSIWYG</span>
-            <span class="layer-value">z-index: 4000-4500</span>
-          </div>
-          <div class="layer toast">
-            <span class="layer-name">Toast Notifications</span>
-            <span class="layer-value">z-index: 5000</span>
+        </div>
+        <p class="section-description">
+          The traditional z-index layers are still defined for reference, but the new registry system
+          dynamically assigns z-indexes based on creation order.
+        </p>
+        <div class="hierarchy-visual">
+          <h3>Legacy Z-Index Layers (Reference)</h3>
+          <div class="layer-stack">
+            <div class="layer base">
+              <span class="layer-name">Base Content</span>
+              <span class="layer-value">z-index: auto</span>
+            </div>
+            <div class="layer fixed">
+              <span class="layer-name">Fixed Navigation</span>
+              <span class="layer-value">z-index: 10-250</span>
+            </div>
+            <div class="layer dropdown">
+              <span class="layer-name">Dropdown Overlays</span>
+              <span class="layer-value">z-index: 1999-2000</span>
+            </div>
+            <div class="layer modal">
+              <span class="layer-name">Modal Dialogs</span>
+              <span class="layer-value">z-index: 2999-3000</span>
+            </div>
+            <div class="layer context">
+              <span class="layer-name">Context Menus & WYSIWYG</span>
+              <span class="layer-value">z-index: 4000-4500</span>
+            </div>
+            <div class="layer toast">
+              <span class="layer-name">Toast Notifications</span>
+              <span class="layer-value">z-index: 5000</span>
+            </div>
           </div>
         </div>
       </div>
 
-      <dees-panel .title=${'1. Basic Overlay Tests'} .subtitle=${'Test individual overlay components'}>
-        <div class="demo-grid">
+      <!-- Interactive Demos Section -->
+      <div class="showcase-section">
+        <div class="section-header">
+          <div class="section-icon demo">🎮</div>
           <div>
-            <h4>Dropdown Test</h4>
+            <h2 class="section-title">Interactive Demos</h2>
+          </div>
+        </div>
+        <p class="section-description">
+          Test the z-index registry in action with these interactive examples. Each element gets the next
+          available z-index when created, ensuring proper stacking order.
+        </p>
+        
+        <dees-panel .title=${'Basic Overlay Tests'} .subtitle=${'Test individual overlay components'}>
+          <div class="demo-grid">
+            <div class="demo-card">
+              <h4>Dropdown Test</h4>
             <dees-input-dropdown
               .label=${'Select Option'}
               .options=${[
@@ -224,10 +453,10 @@ export const showcasePage = () => html`
                 }
               }}
             ></dees-input-dropdown>
-          </div>
+            </div>
 
-          <div>
-            <h4>Context Menu Test</h4>
+            <div class="demo-card">
+              <h4>Context Menu Test</h4>
             <div class="test-area" @contextmenu=${(e: MouseEvent) => {
               DeesContextmenu.openContextMenuWithOptions(e, [
                 { name: 'Show Toast', iconName: 'bell', action: async () => {
@@ -240,18 +469,18 @@ export const showcasePage = () => html`
             }}>
               <span style="color: ${cssManager.bdTheme('#999', '#666')}">Right-click here for context menu</span>
             </div>
-          </div>
+            </div>
 
-          <div>
-            <h4>Toast Notification</h4>
-            <dees-button @click=${async () => {
-              DeesToast.createAndShow({ message: 'I appear on top of everything!', type: 'success' });
-            }}>Show Toast</dees-button>
+            <div class="demo-card">
+              <h4>Toast Notification</h4>
+              <dees-button @click=${async () => {
+                DeesToast.createAndShow({ message: 'I appear on top of everything!', type: 'success' });
+              }}>Show Toast</dees-button>
+            </div>
           </div>
-        </div>
-      </dees-panel>
+        </dees-panel>
 
-      <dees-panel .title=${'2. Modal with Dropdown'} .subtitle=${'Critical test: Dropdown inside modal should appear above modal'}>
+        <dees-panel .title=${'Modal with Dropdown'} .subtitle=${'Critical test: Dropdown inside modal should appear above modal'}>
         <p>This tests the most common z-index conflict scenario.</p>
         <dees-button @click=${async () => {
           const modal = await DeesModal.createAndShow({
@@ -310,11 +539,11 @@ export const showcasePage = () => html`
         }}>Open Modal with Dropdown</dees-button>
       </dees-panel>
 
-      <dees-panel .title=${'3. Complex Stacking Scenario'} .subtitle=${'Multiple overlays active simultaneously'}>
+        <dees-panel .title=${'Complex Stacking Scenario'} .subtitle=${'Multiple overlays active simultaneously'}>
         <p>This creates a complex scenario with multiple overlays to test the complete hierarchy.</p>
         <dees-button @click=${async () => {
           // Show base modal
-          const modal1 = await DeesModal.createAndShow({
+          await DeesModal.createAndShow({
             heading: 'Base Modal',
             width: 'large',
             content: html`
@@ -342,7 +571,7 @@ export const showcasePage = () => html`
               
               <div style="margin-top: 16px;">
                 <dees-button @click=${async () => {
-                  const modal2 = await DeesModal.createAndShow({
+                  await DeesModal.createAndShow({
                     heading: 'Second Modal',
                     width: 'small',
                     content: html`
@@ -376,7 +605,7 @@ export const showcasePage = () => html`
         }}>Start Complex Stack Test</dees-button>
       </dees-panel>
 
-      <dees-panel .title=${'4. Profile Dropdown'} .subtitle=${'Testing app UI dropdowns'}>
+        <dees-panel .title=${'Profile Dropdown'} .subtitle=${'Testing app UI dropdowns'}>
         <p>Profile dropdowns and similar UI elements use the dropdown z-index layer.</p>
         <div class="profile-demo">
           <dees-appui-profiledropdown
@@ -384,23 +613,23 @@ export const showcasePage = () => html`
               name: 'Test User',
               email: 'test@example.com',
               avatar: 'https://randomuser.me/api/portraits/lego/1.jpg',
-              status: 'online'
+              status: 'online' as const
             }}
             .menuItems=${[
-              { name: 'Show Toast', iconName: 'bell', action: async () => {
+              { name: 'Show Toast', iconName: 'bell', shortcut: '', action: async () => {
                 DeesToast.createAndShow({ message: 'Profile action triggered!', type: 'success' });
               }},
-              { divider: true },
-              { name: 'Settings', iconName: 'settings', action: async () => {} },
-              { name: 'Logout', iconName: 'logOut', action: async () => {} }
+              { divider: true } as const,
+              { name: 'Settings', iconName: 'settings', shortcut: '', action: async () => {} },
+              { name: 'Logout', iconName: 'logOut', shortcut: '', action: async () => {} }
             ]}
           ></dees-appui-profiledropdown>
         </div>
       </dees-panel>
 
-      <dees-panel .title=${'5. Edge Cases'} .subtitle=${'Special scenarios and gotchas'}>
+        <dees-panel .title=${'Edge Cases'} .subtitle=${'Special scenarios and gotchas'}>
         <div class="demo-grid">
-          <div>
+          <div class="demo-card">
             <h4>Multiple Toasts</h4>
             <dees-button @click=${async () => {
               DeesToast.createAndShow({ message: 'First toast', type: 'info' });
@@ -413,7 +642,7 @@ export const showcasePage = () => html`
             }}>Show Multiple Toasts</dees-button>
           </div>
 
-          <div>
+          <div class="demo-card">
             <h4>Fullscreen Modal</h4>
             <dees-button @click=${async () => {
               await DeesModal.createAndShow({
@@ -441,24 +670,41 @@ export const showcasePage = () => html`
           </div>
         </div>
       </dees-panel>
+      </div>
 
-      <dees-panel .title=${'Usage Guidelines'}>
+      <!-- Guidelines Section -->
+      <div class="showcase-section">
+        <div class="section-header">
+          <div class="section-icon guidelines">📖</div>
+          <div>
+            <h2 class="section-title">Usage Guidelines</h2>
+          </div>
+        </div>
+        <dees-panel>
         <h4>Best Practices:</h4>
         <ul>
-          <li>Always use the predefined z-index values from <code>00zindex.ts</code></li>
+          <li>Always use the z-index registry from <code>00zindex.ts</code></li>
           <li>Never use arbitrary z-index values like <code>z-index: 9999</code></li>
-          <li>When creating new overlay components, choose the appropriate layer</li>
+          <li>Get z-index from registry when showing elements: <code>zIndexRegistry.getNextZIndex()</code></li>
+          <li>Register elements to track them: <code>zIndexRegistry.register(element, zIndex)</code></li>
+          <li>Unregister on cleanup: <code>zIndexRegistry.unregister(element)</code></li>
+          <li>Elements created later automatically appear on top</li>
           <li>Test overlay interactions, especially dropdowns in modals</li>
-          <li>Remember that toasts should always be on top</li>
         </ul>
 
         <h4>Import Example:</h4>
         <pre style="background: ${cssManager.bdTheme('#f5f5f5', '#2a2a2a')}; padding: 16px; border-radius: 6px; overflow-x: auto;">
-<code>import { zIndexLayers } from './00zindex.js';
+<code>import { zIndexRegistry } from './00zindex.js';
 
-// In your component styles:
-z-index: \${zIndexLayers.overlay.modal};</code></pre>
+// In your component:
+const myZIndex = zIndexRegistry.getNextZIndex();
+element.style.zIndex = myZIndex.toString();
+zIndexRegistry.register(element, myZIndex);
+
+// On cleanup:
+zIndexRegistry.unregister(element);</code></pre>
       </dees-panel>
+      </div>
     </div>
   </div>
 `;