1.9.8

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2025-06-26 - 1.9.8 - fix(deps, windowlayer)
+Update dependency versions and adjust dees-windowlayer CSS to add pointer-events fix
+
+- Bump @design.estate/dees-wcctools from ^1.0.98 to ^1.0.101
+- Bump @tiptap packages from 2.22.3 to 2.23.0
+- Bump lucide from ^0.522.0 to ^0.523.0
+- Bump @git.zone/tsbundle from ^2.4.0 to ^2.5.1 and tswatch from ^2.0.37 to ^2.1.2
+- Add 'pointer-events: none' to dees-windowlayer CSS to improve overlay behavior
+
 ## 2025-06-22 - 1.9.0 - feat(form-inputs)
 Improve form input consistency and auto spacing across inputs and buttons
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/ --web --verbose --timeout 30",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
     "watch": "tswatch element",
     "buildDocs": "tsdoc"
   },
@@ -17,7 +17,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.3.3",
     "@design.estate/dees-element": "^2.0.45",
-    "@design.estate/dees-wcctools": "^1.0.98",
+    "@design.estate/dees-wcctools": "^1.0.101",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -25,18 +25,18 @@
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.0.15",
-    "@tiptap/core": "^2.22.3",
+    "@tiptap/core": "^2.23.0",
-    "@tiptap/extension-link": "^2.22.3",
+    "@tiptap/extension-link": "^2.23.0",
-    "@tiptap/extension-text-align": "^2.22.3",
+    "@tiptap/extension-text-align": "^2.23.0",
-    "@tiptap/extension-typography": "^2.22.3",
+    "@tiptap/extension-typography": "^2.23.0",
-    "@tiptap/extension-underline": "^2.22.3",
+    "@tiptap/extension-underline": "^2.23.0",
-    "@tiptap/starter-kit": "^2.22.3",
+    "@tiptap/starter-kit": "^2.23.0",
     "@tsclass/tsclass": "^9.2.0",
     "@webcontainer/api": "1.2.0",
     "apexcharts": "^4.7.0",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.522.0",
+    "lucide": "^0.523.0",
     "monaco-editor": "^0.52.2",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
@@ -44,9 +44,9 @@
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^2.6.4",
-    "@git.zone/tsbundle": "^2.4.0",
+    "@git.zone/tsbundle": "^2.5.1",
     "@git.zone/tstest": "^2.3.1",
-    "@git.zone/tswatch": "^2.0.37",
+    "@git.zone/tswatch": "^2.1.2",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
     "@types/node": "^22.0.0"

readme.md

@@ -12,14 +12,15 @@ npm install @design.estate/dees-catalog
 
 | Category | Components |
 |----------|------------|
-| Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` |
+| Core UI | `DeesButton`, `DeesButtonExit`, `DeesButtonGroup`, `DeesBadge`, `DeesChips`, `DeesHeading`, `DeesHint`, `DeesIcon`, `DeesLabel`, `DeesPanel`, `DeesSearchbar`, `DeesSpinner`, `DeesToast`, `DeesWindowcontrols` |
-| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` |
+| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadiogroup`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesInputTags`, `DeesInputTypelist`, `DeesInputRichtext`, `DeesInputWysiwyg`, `DeesFormSubmit` |
-| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` |
+| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesAppuiActivitylog`, `DeesAppuiProfiledropdown`, `DeesAppuiTabs`, `DeesAppuiView`, `DeesMobileNavigation` |
-| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid` |
+| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid`, `DeesPagination` |
 | Visualization | `DeesChartArea`, `DeesChartLog` |
 | Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
-| Navigation | `DeesStepper`, `DeesProgressbar` |
+| Navigation | `DeesStepper`, `DeesProgressbar`, `DeesMobileNavigation` |
-| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesTerminal`, `DeesUpdater` |
+| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesEditorMarkdownoutlet`, `DeesTerminal`, `DeesUpdater` |
+| Auth & Utilities | `DeesSimpleAppdash`, `DeesSimpleLogin` |
 
 ## Detailed Component Documentation
 
@@ -149,6 +150,93 @@ Key Features:
 - Theme-aware styling
 - Programmatic control
 
+#### `DeesButtonExit`
+Exit/close button component with consistent styling.
+
+```typescript
+<dees-button-exit
+  @click=${handleClose}
+></dees-button-exit>
+```
+
+#### `DeesButtonGroup`
+Container for grouping related buttons together.
+
+```typescript
+<dees-button-group
+  .buttons=${[
+    { text: 'Save', type: 'highlighted', action: handleSave },
+    { text: 'Cancel', type: 'normal', action: handleCancel }
+  ]}
+  spacing="medium"    // Options: small, medium, large
+></dees-button-group>
+```
+
+#### `DeesHeading`
+Consistent heading component with level and styling options.
+
+```typescript
+<dees-heading
+  level={1}           // 1-6 for H1-H6
+  text="Page Title"
+  .subheading=${'Optional subtitle'}
+  centered           // Optional: center alignment
+></dees-heading>
+```
+
+#### `DeesHint`
+Hint/tooltip component for providing contextual help.
+
+```typescript
+<dees-hint
+  text="This field is required"
+  type="info"        // Options: info, warning, error, success
+  position="top"     // Options: top, bottom, left, right
+></dees-hint>
+```
+
+#### `DeesPanel`
+Container component for grouping related content with optional title and actions.
+
+```typescript
+<dees-panel
+  .title=${'Panel Title'}
+  .subtitle=${'Optional subtitle'}
+  collapsible        // Optional: allow collapse/expand
+  collapsed={false}  // Initial collapsed state
+  .actions=${[
+    { icon: 'settings', action: handleSettings }
+  ]}
+>
+  <!-- Panel content -->
+</dees-panel>
+```
+
+#### `DeesSearchbar`
+Search input component with suggestions and search handling.
+
+```typescript
+<dees-searchbar
+  placeholder="Search..."
+  .suggestions=${['item1', 'item2', 'item3']}
+  showClearButton    // Show clear button when has value
+  @search=${handleSearch}
+  @suggestion-select=${handleSuggestionSelect}
+></dees-searchbar>
+```
+
+#### `DeesWindowcontrols`
+Window control buttons (minimize, maximize, close) for desktop-like applications.
+
+```typescript
+<dees-windowcontrols
+  .controls=${['minimize', 'maximize', 'close']}
+  @minimize=${handleMinimize}
+  @maximize=${handleMaximize}
+  @close=${handleClose}
+></dees-windowcontrols>
+```
+
 ### Form Components
 
 #### `DeesForm`
@@ -207,22 +295,6 @@ Dropdown selection component with search and filtering capabilities.
 ></dees-input-dropdown>
 ```
 
-#### `DeesInputRadio`
-Radio button group for single-choice selections.
-
-```typescript
-<dees-input-radio
-  key="gender"
-  label="Gender"
-  .options=${[
-    { key: 'male', option: 'Male' },
-    { key: 'female', option: 'Female' },
-    { key: 'other', option: 'Other' }
-  ]}
-  required
-></dees-input-radio>
-```
-
 #### `DeesInputFileupload`
 File upload component with drag-and-drop support.
 
@@ -293,6 +365,121 @@ Multi-state toggle button group.
 ></dees-input-multitoggle>
 ```
 
+#### `DeesInputRadiogroup`
+Radio button group for single-choice selections with internal state management.
+
+```typescript
+<dees-input-radiogroup
+  key="plan"
+  label="Select Plan"
+  .options=${['Free', 'Pro', 'Enterprise']}
+  selectedOption="Pro"
+  required
+  @change=${handlePlanChange}
+></dees-input-radiogroup>
+
+// With custom option objects
+<dees-input-radiogroup
+  key="priority"
+  label="Priority Level"
+  .options=${[
+    { key: 'low', label: 'Low Priority' },
+    { key: 'medium', label: 'Medium Priority' },
+    { key: 'high', label: 'High Priority' }
+  ]}
+  selectedOption="medium"
+></dees-input-radiogroup>
+```
+
+#### `DeesInputTags`
+Tag input component for managing lists of tags with auto-complete and validation.
+
+```typescript
+<dees-input-tags
+  key="skills"
+  label="Skills"
+  .value=${['JavaScript', 'TypeScript', 'CSS']}
+  placeholder="Add a skill..."
+  .suggestions=${[
+    'JavaScript', 'TypeScript', 'Python', 'Go', 'Rust',
+    'React', 'Vue', 'Angular', 'Node.js', 'Docker'
+  ]}
+  maxTags={10}  // Optional: limit number of tags
+  required
+  @change=${handleTagsChange}
+></dees-input-tags>
+```
+
+Key Features:
+- Add tags by pressing Enter or typing comma/semicolon
+- Remove tags with click or backspace
+- Auto-complete suggestions with keyboard navigation
+- Maximum tag limit support
+- Full theme support
+- Form validation integration
+
+#### `DeesInputTypelist`
+Dynamic list input for managing arrays of typed values.
+
+```typescript
+<dees-input-typelist
+  key="features"
+  label="Product Features"
+  placeholder="Add a feature..."
+  .value=${['Feature 1', 'Feature 2']}
+  @change=${handleFeaturesChange}
+></dees-input-typelist>
+```
+
+#### `DeesInputRichtext`
+Rich text editor with formatting toolbar powered by TipTap.
+
+```typescript
+<dees-input-richtext
+  key="content"
+  label="Article Content"
+  .value=${htmlContent}
+  placeholder="Start writing..."
+  minHeight={300}      // Minimum editor height
+  showWordCount={true} // Show word/character count
+  @change=${handleContentChange}
+></dees-input-richtext>
+```
+
+Key Features:
+- Full formatting toolbar (bold, italic, underline, strike, etc.)
+- Heading levels (H1-H6)
+- Lists (bullet, ordered)
+- Links with URL editing
+- Code blocks and inline code
+- Blockquotes
+- Horizontal rules
+- Undo/redo support
+- Word and character count
+- HTML output
+
+#### `DeesInputWysiwyg`
+Advanced block-based editor with slash commands and rich content blocks.
+
+```typescript
+<dees-input-wysiwyg
+  key="document"
+  label="Document Editor"
+  .value=${documentContent}
+  outputFormat="html"  // Options: html, markdown, json
+  @change=${handleDocumentChange}
+></dees-input-wysiwyg>
+```
+
+Key Features:
+- Slash commands for quick formatting
+- Block-based editing (paragraphs, headings, lists, etc.)
+- Drag and drop block reordering
+- Multiple output formats
+- Keyboard shortcuts
+- Collaborative editing ready
+- Extensible block types
+
 #### `DeesFormSubmit`
 Submit button component specifically designed for `DeesForm`.
 
@@ -622,6 +809,91 @@ Best Practices:
    - Test with screen readers
    - Maintain focus management
 
+#### `DeesAppuiActivitylog`
+Activity log component for displaying system events and user actions.
+
+```typescript
+<dees-appui-activitylog
+  .entries=${[
+    {
+      timestamp: new Date(),
+      type: 'info',
+      message: 'User logged in',
+      details: { userId: '123' }
+    },
+    {
+      timestamp: new Date(),
+      type: 'error',
+      message: 'Failed to save document',
+      details: { error: 'Network error' }
+    }
+  ]}
+  maxEntries={100}    // Maximum entries to display
+  @entry-click=${handleEntryClick}
+></dees-appui-activitylog>
+```
+
+#### `DeesAppuiProfiledropdown`
+User profile dropdown component with status and menu options.
+
+```typescript
+<dees-appui-profiledropdown
+  .user=${{
+    name: 'John Doe',
+    email: 'john@example.com',
+    avatar: '/path/to/avatar.jpg',
+    status: 'online'  // Options: online, offline, busy, away
+  }}
+  .menuItems=${[
+    { name: 'Profile', iconName: 'user', action: async () => {} },
+    { name: 'Settings', iconName: 'settings', action: async () => {} },
+    { divider: true },
+    { name: 'Logout', iconName: 'logOut', action: async () => {} }
+  ]}
+  @status-change=${handleStatusChange}
+></dees-appui-profiledropdown>
+```
+
+#### `DeesAppuiTabs`
+Tab navigation component for organizing content sections.
+
+```typescript
+<dees-appui-tabs
+  .tabs=${[
+    {
+      key: 'overview',
+      label: 'Overview',
+      icon: 'home',
+      content: html`<div>Overview content</div>`
+    },
+    {
+      key: 'details',
+      label: 'Details',
+      icon: 'info',
+      content: html`<div>Details content</div>`
+    }
+  ]}
+  selectedTab="overview"
+  @tab-change=${handleTabChange}
+></dees-appui-tabs>
+```
+
+#### `DeesAppuiView`
+View container component for consistent page layouts.
+
+```typescript
+<dees-appui-view
+  viewTitle="Dashboard"
+  viewSubtitle="System Overview"
+  .headerActions=${[
+    { icon: 'refresh', action: handleRefresh },
+    { icon: 'settings', action: handleSettings }
+  ]}
+>
+  <!-- View content -->
+</dees-appui-view>
+```
+
 #### `DeesMobileNavigation`
 Responsive navigation component for mobile devices.
 
@@ -982,6 +1254,27 @@ setInterval(() => {
 }, 3000);
 ```
 
+#### `DeesPagination`
+Pagination component for navigating through large datasets.
+
+```typescript
+<dees-pagination
+  totalItems={500}
+  itemsPerPage={20}
+  currentPage={1}
+  maxVisiblePages={7}  // Maximum page numbers to display
+  @page-change=${handlePageChange}
+></dees-pagination>
+```
+
+Key Features:
+- Page number navigation
+- Previous/next buttons
+- Jump to first/last page
+- Configurable items per page
+- Responsive design
+- Keyboard navigation support
+
 ### Visualization Components
 
 #### `DeesChartArea`
@@ -1306,52 +1599,6 @@ Key Features:
 - Animation support
 - Accessibility features
 
-#### `DeesMobileNavigation`
-Mobile-optimized navigation component with touch support.
-
-```typescript
-// Programmatic usage
-DeesMobilenavigation.createAndShow([
-  {
-    name: 'Home',
-    action: async (nav) => {
-      // Handle navigation
-      return null;
-    }
-  },
-  {
-    name: 'Settings',
-    action: async (nav) => {
-      // Handle navigation
-      return null;
-    }
-  }
-]);
-
-// Component usage
-<dees-mobilenavigation
-  heading="MENU"
-  .menuItems=${[
-    {
-      name: 'Profile',
-      action: (nav) => handleNavigation('profile')
-    },
-    {
-      name: 'Settings',
-      action: (nav) => handleNavigation('settings')
-    }
-  ]}
-></dees-mobilenavigation>
-```
-
-Key Features:
-- Touch-friendly interface
-- Slide-in animation
-- Backdrop overlay
-- Single instance management
-- Custom menu items
-- Responsive design
-
 Best Practices:
 
 1. Stepper Implementation
@@ -1368,13 +1615,6 @@ Best Practices:
    - Performance monitoring
    - Error state handling
 
-3. Mobile Navigation
-   - Touch-optimized targets
-   - Clear visual hierarchy
-   - Smooth animations
-   - Gesture support
-   - Responsive behavior
-
 Common Use Cases:
 
 1. Stepper
@@ -1391,13 +1631,6 @@ Common Use Cases:
    - Task completion
    - Step progression
 
-3. Mobile Navigation
-   - Responsive menus
-   - App navigation
-   - Settings access
-   - User actions
-   - Context switching
-
 Accessibility Considerations:
 - Keyboard navigation support
 - ARIA labels and roles
@@ -1461,6 +1694,26 @@ Key Features:
 - Spellcheck integration
 - Auto-save functionality
 
+#### `DeesEditorMarkdownoutlet`
+Markdown preview component for rendering markdown content.
+
+```typescript
+<dees-editor-markdownoutlet
+  .markdown=${markdownContent}
+  .theme=${'github'}  // Options: github, dark, custom
+  .plugins=${['mermaid', 'highlight']}  // Optional plugins
+  allowHtml={false}   // Security: disable raw HTML
+></dees-editor-markdownoutlet>
+```
+
+Key Features:
+- Safe markdown rendering
+- Multiple themes
+- Plugin support (mermaid diagrams, syntax highlighting)
+- XSS protection
+- Custom CSS injection
+- Responsive images
+
 #### `DeesTerminal`
 Terminal emulator component for command-line interface.
 
@@ -1606,6 +1859,60 @@ Accessibility Features:
 - Focus management
 - ARIA attributes
 
+### Auth & Utilities Components
+
+#### `DeesSimpleAppdash`
+Simple application dashboard component for quick prototyping.
+
+```typescript
+<dees-simple-appdash
+  .appTitle=${'My Application'}
+  .menuItems=${[
+    { name: 'Dashboard', icon: 'home', route: '/dashboard' },
+    { name: 'Settings', icon: 'settings', route: '/settings' }
+  ]}
+  .user=${{
+    name: 'John Doe',
+    role: 'Administrator'
+  }}
+  @menu-select=${handleMenuSelect}
+>
+  <!-- Dashboard content -->
+</dees-simple-appdash>
+```
+
+Key Features:
+- Quick setup dashboard layout
+- Built-in navigation
+- User profile section
+- Responsive design
+- Minimal configuration
+
+#### `DeesSimpleLogin`
+Simple login form component with validation and customization.
+
+```typescript
+<dees-simple-login
+  .appName=${'My Application'}
+  .logo=${'./assets/logo.png'}
+  .backgroundImage=${'./assets/background.jpg'}
+  .fields=${['username', 'password']}  // Options: username, email, password
+  showForgotPassword
+  showRememberMe
+  @login=${handleLogin}
+  @forgot-password=${handleForgotPassword}
+></dees-simple-login>
+```
+
+Key Features:
+- Customizable fields
+- Built-in validation
+- Remember me option
+- Forgot password link
+- Custom branding
+- Responsive layout
+- Loading states
+
 ## License and Legal Information
 
 This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the license file within this repository.

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.9.0',
+  version: '1.9.8',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-input-dropdown.demo.ts

@@ -1,5 +1,8 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
+import './dees-form.js';
+import './dees-form-submit.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>
@@ -14,37 +17,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
-        .demo-section {
+        dees-panel {
-          background: #f8f9fa;
+          margin-bottom: 24px;
-          border-radius: 8px;
-          padding: 24px;
-          position: relative;
         }
         
-        @media (prefers-color-scheme: dark) {
+        dees-panel:last-child {
-          .demo-section {
+          margin-bottom: 0;
-            background: #1a1a1a;
-          }
-        }
-        
-        .demo-section h3 {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #0069f2;
-          font-size: 18px;
-        }
-        
-        .demo-section p {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: #666;
-          font-size: 14px;
-        }
-        
-        @media (prefers-color-scheme: dark) {
-          .demo-section p {
-            color: #999;
-          }
         }
         
         .horizontal-group {
@@ -66,10 +44,7 @@ export const demoFunc = () => html`
     </style>
     
     <div class="demo-container">
-      <div class="demo-section">
+      <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
-        <h3>Basic Dropdowns</h3>
-        <p>Standard dropdown with search functionality and various options</p>
-        
         <dees-input-dropdown
           .label=${'Select Country'}
           .options=${[
@@ -94,12 +69,9 @@ export const demoFunc = () => html`
             { option: 'Guest', key: 'guest' }
           ]}
         ></dees-input-dropdown>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
+      <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
-        <h3>Without Search</h3>
-        <p>Dropdown with search functionality disabled for simpler selection</p>
-        
         <dees-input-dropdown
           .label=${'Priority Level'}
           .enableSearch=${false}
@@ -110,12 +82,9 @@ export const demoFunc = () => html`
           ]}
           .selectedOption=${{ option: 'Medium', key: 'medium' }}
         ></dees-input-dropdown>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
+      <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
-        <h3>Horizontal Layout</h3>
-        <p>Multiple dropdowns in a horizontal layout for compact forms</p>
-        
         <div class="horizontal-group">
           <dees-input-dropdown
             .label=${'Department'}
@@ -150,12 +119,9 @@ export const demoFunc = () => html`
             ]}
           ></dees-input-dropdown>
         </div>
-      </div>
+      </dees-panel>
       
-      <div class="demo-section">
+      <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
-        <h3>States</h3>
-        <p>Different states and configurations</p>
-        
         <dees-input-dropdown
           .label=${'Required Field'}
           .required=${true}
@@ -174,16 +140,13 @@ export const demoFunc = () => html`
           ]}
           .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
         ></dees-input-dropdown>
-      </div>
+      </dees-panel>
       
       <div class="spacer">
         (Spacer to test dropdown positioning)
       </div>
       
-      <div class="demo-section">
+      <dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
-        <h3>Bottom Positioning</h3>
-        <p>Dropdown that opens upward when near bottom of viewport</p>
-        
         <dees-input-dropdown
           .label=${'Opens Upward'}
           .options=${[
@@ -194,7 +157,65 @@ export const demoFunc = () => html`
             { option: 'Fifth Option', key: 'fifth' }
           ]}
         ></dees-input-dropdown>
-      </div>
+      </dees-panel>
+
+      <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
+        <dees-input-dropdown
+          .label=${'Select Product'}
+          .options=${[
+            { option: 'Basic Plan', key: 'basic', payload: { price: 9.99, features: ['Feature A'] } },
+            { option: 'Pro Plan', key: 'pro', payload: { price: 19.99, features: ['Feature A', 'Feature B'] } },
+            { option: 'Enterprise Plan', key: 'enterprise', payload: { price: 49.99, features: ['Feature A', 'Feature B', 'Feature C'] } }
+          ]}
+          @change=${(e: CustomEvent) => {
+            const output = document.querySelector('#selection-output');
+            if (output && e.detail.value) {
+              output.innerHTML = `
+                <strong>Selected:</strong> ${e.detail.value.option}<br>
+                <strong>Key:</strong> ${e.detail.value.key}<br>
+                <strong>Price:</strong> $${e.detail.value.payload?.price || 'N/A'}<br>
+                <strong>Features:</strong> ${e.detail.value.payload?.features?.join(', ') || 'N/A'}
+              `;
+            }
+          }}
+        ></dees-input-dropdown>
+        
+        <div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;">
+          <em>Select a product to see details...</em>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
+        <dees-form>
+          <dees-input-dropdown
+            .label=${'Project Type'}
+            .key=${'projectType'}
+            .required=${true}
+            .options=${[
+              { option: 'Web Application', key: 'web' },
+              { option: 'Mobile Application', key: 'mobile' },
+              { option: 'Desktop Application', key: 'desktop' },
+              { option: 'API Service', key: 'api' }
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-dropdown
+            .label=${'Development Framework'}
+            .key=${'framework'}
+            .required=${true}
+            .options=${[
+              { option: 'React', key: 'react', payload: { type: 'web' } },
+              { option: 'Vue.js', key: 'vue', payload: { type: 'web' } },
+              { option: 'Angular', key: 'angular', payload: { type: 'web' } },
+              { option: 'React Native', key: 'react-native', payload: { type: 'mobile' } },
+              { option: 'Flutter', key: 'flutter', payload: { type: 'mobile' } },
+              { option: 'Electron', key: 'electron', payload: { type: 'desktop' } }
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-form-submit .text=${'Create Project'}></dees-form-submit>
+        </dees-form>
+      </dees-panel>
     </div>
   </dees-demowrapper>
 `

ts_web/elements/dees-input-dropdown.ts

@@ -294,6 +294,12 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       console.log(elevatedDropdown.selectedOption);
       console.log(elevatedDropdown.highlightedIndex);
       this.windowOverlay.appendChild(elevatedDropdown);
+      
+      // Prevent clicks on the dropdown from closing it
+      elevatedDropdown.addEventListener('click', (e: Event) => {
+        e.stopPropagation();
+      });
+      
       await domtoolsInstance.convenience.smartdelay.delayFor(0);
       elevatedDropdown.toggleSelectionBox();
       const destroyOverlay = async () => {

ts_web/elements/dees-windowlayer.ts

@@ -79,6 +79,11 @@ export class DeesWindowLayer extends DeesElement {
           justify-content: center;
           align-items: center;
           z-index: ${this.contentZIndex};
+          pointer-events: none;
+        }
+        
+        .slotContent > * {
+          pointer-events: auto;
         }
         
         .visible {
@@ -87,9 +92,9 @@ export class DeesWindowLayer extends DeesElement {
           pointer-events: all;
         }
       </style>
-      <div class="windowOverlay ${this.visible ? 'visible' : null}">
+      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
       </div>
-      <div @click=${this.dispatchClicked} class="slotContent">
+      <div class="slotContent">
         <slot></slot>
       </div>
     `;

ts_web/elements/wysiwyg/dees-formatting-menu.ts

@@ -7,7 +7,7 @@ import {
   css,
   state,
 } from '@design.estate/dees-element';
-import { zIndexLayers } from '../00zindex.js';
+import { zIndexRegistry } from '../00zindex.js';
 
 import { WysiwygFormatting } from './wysiwyg.formatting.js';
 
@@ -35,6 +35,9 @@ export class DeesFormattingMenu extends DeesElement {
   @state()
   private position: { x: number; y: number } = { x: 0, y: 0 };
 
+  @state()
+  private menuZIndex: number = 1000;
+
   private callback: ((command: string) => void | Promise<void>) | null = null;
 
   public static styles = [
@@ -42,7 +45,6 @@ export class DeesFormattingMenu extends DeesElement {
     css`
       :host {
         position: fixed;
-        z-index: ${zIndexLayers.wysiwygMenus};
         pointer-events: none;
       }
 
@@ -119,6 +121,9 @@ export class DeesFormattingMenu extends DeesElement {
   render(): TemplateResult {
     if (!this.visible) return html``;
 
+    // Apply z-index to host element
+    this.style.zIndex = this.menuZIndex.toString();
+
     return html`
       <div 
         class="formatting-menu" 
@@ -153,6 +158,11 @@ export class DeesFormattingMenu extends DeesElement {
     console.log('FormattingMenu.show called:', { position, visible: this.visible });
     this.position = position;
     this.callback = callback;
+    
+    // Get z-index from registry
+    this.menuZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.menuZIndex);
+    
     this.visible = true;
     console.log('FormattingMenu.show - visible set to:', this.visible);
   }
@@ -160,6 +170,9 @@ export class DeesFormattingMenu extends DeesElement {
   public hide(): void {
     this.visible = false;
     this.callback = null;
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
   }
 
   public updatePosition(position: { x: number; y: number }): void {

ts_web/elements/wysiwyg/dees-slash-menu.ts

@@ -8,7 +8,7 @@ import {
   css,
   state,
 } from '@design.estate/dees-element';
-import { zIndexLayers } from '../00zindex.js';
+import { zIndexRegistry } from '../00zindex.js';
 
 import { type ISlashMenuItem } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
@@ -43,6 +43,9 @@ export class DeesSlashMenu extends DeesElement {
   @state()
   private selectedIndex: number = 0;
 
+  @state()
+  private menuZIndex: number = 1000;
+
   private callback: ((type: string) => void) | null = null;
 
   public static styles = [
@@ -50,7 +53,6 @@ export class DeesSlashMenu extends DeesElement {
     css`
       :host {
         position: fixed;
-        z-index: ${zIndexLayers.wysiwygMenus};
         pointer-events: none;
       }
 
@@ -119,6 +121,9 @@ export class DeesSlashMenu extends DeesElement {
   render(): TemplateResult {
     if (!this.visible) return html``;
 
+    // Apply z-index to host element
+    this.style.zIndex = this.menuZIndex.toString();
+
     const menuItems = this.getFilteredMenuItems();
 
     return html`
@@ -162,6 +167,11 @@ export class DeesSlashMenu extends DeesElement {
     this.callback = callback;
     this.filter = '';
     this.selectedIndex = 0;
+    
+    // Get z-index from registry
+    this.menuZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.menuZIndex);
+    
     this.visible = true;
   }
 
@@ -170,6 +180,9 @@ export class DeesSlashMenu extends DeesElement {
     this.callback = null;
     this.filter = '';
     this.selectedIndex = 0;
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
   }
 
   public updateFilter(filter: string): void {

ts_web/pages/zindex-showcase.ts

@@ -9,6 +9,7 @@ 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`
@@ -412,8 +413,8 @@ export const showcasePage = () => html`
               <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-name">Context Menus</span>
-              <span class="layer-value">z-index: 4000-4500</span>
+              <span class="layer-value">z-index: 4000</span>
             </div>
             <div class="layer toast">
               <span class="layer-name">Toast Notifications</span>
@@ -650,6 +651,40 @@ export const showcasePage = () => html`
             }}>Show Multiple Toasts</dees-button>
           </div>
 
+          <div class="demo-card">
+            <h4>Modal with WYSIWYG Editor</h4>
+            <dees-button @click=${async () => {
+              await DeesModal.createAndShow({
+                heading: 'WYSIWYG Editor Test',
+                width: 'large',
+                content: html`
+                  <p>Test the WYSIWYG editor slash commands and formatting menus in a modal:</p>
+                  <dees-form>
+                    <dees-input-wysiwyg
+                      .label=${'Document Content'}
+                      .placeholder=${'Type "/" to see slash commands or select text to format...'}
+                      .outputFormat=${'html'}
+                      .description=${'The slash menu and formatting menu should appear above this modal'}
+                    ></dees-input-wysiwyg>
+                  </dees-form>
+                  <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
+                    <strong>Tips:</strong><br>
+                    • Type "/" to open the slash command menu<br>
+                    • Select text to see the formatting toolbar<br>
+                    • Both menus should appear above this modal
+                  </p>
+                `,
+                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</dees-button>
+          </div>
+          
           <div class="demo-card">
             <h4>Modal with Tags Input</h4>
             <dees-button @click=${async () => {
@@ -739,6 +774,7 @@ export const showcasePage = () => html`
           <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>WYSIWYG menus (slash commands, formatting) now use dynamic z-index</li>
         </ul>
 
         <h4>Import Example:</h4>