import { html, css, cssManager } from '@design.estate/dees-element'; import { DeesModal } from '../elements/dees-modal.js'; import { DeesToast } from '../elements/dees-toast.js'; import { DeesContextmenu } from '../elements/dees-contextmenu.js'; import '../elements/dees-button.js'; import '../elements/dees-input-dropdown.js'; import '../elements/dees-form.js'; import '../elements/dees-panel.js'; import '../elements/dees-input-text.js'; import '../elements/dees-input-radiogroup.js'; import '../elements/dees-input-tags.js'; import '../elements/dees-input-wysiwyg.js'; import '../elements/dees-appui-profiledropdown.js'; export const showcasePage = () => html`

Z-Index Management

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.

Important: The z-index values are managed centrally in 00zindex.ts. Never use arbitrary z-index values in components - always import and use the z-index registry.
📊

Live Registry Status

Z-Index Registry

Active Elements: 0
Current Z-Index: 1000
📚

Layer Hierarchy

The traditional z-index layers are still defined for reference, but the new registry system dynamically assigns z-indexes based on creation order.

Legacy Z-Index Layers (Reference)

Base Content z-index: auto
Fixed Navigation z-index: 10-250
Dropdown Overlays z-index: 1999-2000
Modal Dialogs z-index: 2999-3000
Context Menus z-index: 4000
Toast Notifications z-index: 5000
🎮

Interactive Demos

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.

Dropdown Test

{ if (e.detail.value?.payload === 'toast') { DeesToast.createAndShow({ message: 'Toast appears above dropdown!', type: 'success' }); } }} >

Context Menu Test

{ DeesContextmenu.openContextMenuWithOptions(e, [ { name: 'Show Toast', iconName: 'bell', action: async () => { DeesToast.createAndShow({ message: 'Toast from context menu!', type: 'info' }); }}, { divider: true }, { name: 'Item 2', iconName: 'check', action: async () => {} }, { name: 'Item 3', iconName: 'copy', action: async () => {} }, ]); }}> Right-click here for context menu

Toast Notification

{ DeesToast.createAndShow({ message: 'I appear on top of everything!', type: 'success' }); }}>Show Toast

This tests the most common z-index conflict scenario.

{ const modal = await DeesModal.createAndShow({ heading: 'Modal with Dropdown', width: 'medium', showHelpButton: true, onHelp: async () => { DeesToast.createAndShow({ message: 'Help requested! Toast appears above modal.', type: 'info' }); }, content: html`

The dropdown below should appear above this modal:

You can also right-click anywhere in this modal to test context menus.

`, menuOptions: [ { name: 'Cancel', action: async (modal) => modal.destroy() }, { name: 'Save', action: async (modal) => modal.destroy() } ] }); // Add context menu to modal content const modalContent = modal.shadowRoot.querySelector('.modal .content'); if (modalContent) { modalContent.addEventListener('contextmenu', async (e: MouseEvent) => { DeesContextmenu.openContextMenuWithOptions(e, [ { name: 'Context menu in modal', iconName: 'check', action: async () => {} }, { divider: true }, { name: 'Show Toast', iconName: 'bell', action: async () => { DeesToast.createAndShow({ message: 'Toast from modal context menu!', type: 'warning' }); }} ]); }); } }}>Open Modal with Dropdown

This creates a complex scenario with multiple overlays to test the complete hierarchy.

{ // Show base modal await DeesModal.createAndShow({ heading: 'Base Modal', width: 'large', content: html`

Level 1: Modal

This is the base modal. Try the following:

  1. Open the dropdown below
  2. Right-click for context menu
  3. Click "Show Second Modal" to stack modals
{ if (e.detail.value?.payload === 'toast') { DeesToast.createAndShow({ message: 'Toast triggered from dropdown in modal!', type: 'success' }); } }} >
{ await DeesModal.createAndShow({ heading: 'Second Modal', width: 'small', content: html`

Level 2: Stacked Modal

This modal appears on top of the first one.

The dropdown here should still work:

`, menuOptions: [ { name: 'Close', action: async (modal) => modal.destroy() } ] }); }}>Show Second Modal
`, menuOptions: [ { name: 'Close All', action: async (modal) => { modal.destroy(); // Also show a toast DeesToast.createAndShow({ message: 'All modals closed!', type: 'info' }); }} ] }); }}>Start Complex Stack Test

Profile dropdowns and similar UI elements use the dropdown z-index layer.

{ DeesToast.createAndShow({ message: 'Profile action triggered!', type: 'success' }); }}, { divider: true } as const, { name: 'Settings', iconName: 'settings', shortcut: '', action: async () => {} }, { name: 'Logout', iconName: 'logOut', shortcut: '', action: async () => {} } ]} >

Multiple Toasts

{ DeesToast.createAndShow({ message: 'First toast', type: 'info' }); setTimeout(() => { DeesToast.createAndShow({ message: 'Second toast', type: 'warning' }); }, 500); setTimeout(() => { DeesToast.createAndShow({ message: 'Third toast', type: 'success' }); }, 1000); }}>Show Multiple Toasts

Modal with WYSIWYG Editor

{ await DeesModal.createAndShow({ heading: 'WYSIWYG Editor Test', width: 'large', content: html`

Test the WYSIWYG editor slash commands and formatting menus in a modal:

Tips:
• Type "/" to open the slash command menu
• Select text to see the formatting toolbar
• Both menus should appear above this modal

`, menuOptions: [ { name: 'Cancel', action: async (modal) => modal.destroy() }, { name: 'Save', action: async (modal) => { DeesToast.createAndShow({ message: 'Document saved!', type: 'success' }); modal.destroy(); }} ] }); }}>Test WYSIWYG in Modal

Modal with Tags Input

{ await DeesModal.createAndShow({ heading: 'Tags Input Test', width: 'medium', content: html`

Test the tags input component in a modal:

`, menuOptions: [ { name: 'Cancel', action: async (modal) => modal.destroy() }, { name: 'Apply', action: async (modal) => { DeesToast.createAndShow({ message: 'Tags applied!', type: 'success' }); modal.destroy(); }} ] }); }}>Test Tags in Modal

Fullscreen Modal

{ await DeesModal.createAndShow({ heading: 'Fullscreen Modal Test', width: 'fullscreen', content: html`

Even in fullscreen, overlays should work properly:

`, menuOptions: [ { name: 'Exit Fullscreen', action: async (modal) => modal.destroy() } ] }); }}>Open Fullscreen
📖

Usage Guidelines

Best Practices:

  • Always use the z-index registry from 00zindex.ts
  • Never use arbitrary z-index values like z-index: 9999
  • Get z-index from registry when showing elements: zIndexRegistry.getNextZIndex()
  • Register elements to track them: zIndexRegistry.register(element, zIndex)
  • Unregister on cleanup: zIndexRegistry.unregister(element)
  • Elements created later automatically appear on top
  • Test overlay interactions, especially dropdowns in modals
  • WYSIWYG menus (slash commands, formatting) now use dynamic z-index

Import Example:

import { zIndexRegistry } from './00zindex.js';

// In your component:
const myZIndex = zIndexRegistry.getNextZIndex();
element.style.zIndex = myZIndex.toString();
zIndexRegistry.register(element, myZIndex);

// On cleanup:
zIndexRegistry.unregister(element);
`;