1.10.5

CLAUDE.md

@@ -0,0 +1,174 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+@design.estate/dees-catalog is a comprehensive web components library built with TypeScript and LitElement. It provides a large collection of UI components for building modern web applications with consistent design and behavior.
+
+## Build and Development Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the project
+pnpm run build
+# This runs: tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild
+
+# Run development watch mode
+pnpm run watch
+# This runs: tswatch element
+
+# Run tests (browser tests)
+pnpm test
+# This runs: tstest test/ --web --verbose --timeout 30 --logfile
+
+# Run a specific test file
+tsx test/test.wysiwyg-basic.browser.ts --verbose
+
+# Build documentation
+pnpm run buildDocs
+```
+
+### Testing Notes
+- Test files follow the pattern: `test.*.browser.ts`, `test.*.node.ts`, or `test.*.both.ts`
+- Browser tests run in a headless browser environment
+- Use `--logfile` option to store logs in `.nogit/testlogs/`
+- For debugging, create files in `.nogit/debug/` and run with `tsx`
+
+## Architecture Overview
+
+### Component Structure
+The library is organized into several categories:
+
+1. **Core UI Components** (`dees-button`, `dees-badge`, `dees-icon`, etc.)
+   - Basic building blocks with consistent theming
+   - All support light/dark themes via `cssManager.bdTheme()`
+
+2. **Form Components** (`dees-form`, `dees-input-*`)
+   - Complete form system with validation
+   - Base class `DeesInputBase` provides common functionality
+   - Form data collection via `DeesForm` container
+
+3. **Layout Components** (`dees-appui-*`)
+   - Application shell components
+   - `DeesAppuiBase` orchestrates the entire layout
+   - Grid-based responsive design
+
+4. **Data Display** (`dees-table`, `dees-dataview-*`, `dees-statsgrid`)
+   - Complex data visualization components
+   - Interactive tables with sorting/filtering
+   - Chart components using ApexCharts
+
+5. **Overlays** (`dees-modal`, `dees-contextmenu`, `dees-toast`)
+   - Managed by central z-index registry
+   - Window layer system for proper stacking
+
+### Key Architectural Patterns
+
+#### Z-Index Management
+All overlay components use a centralized z-index registry system:
+- Definition in `ts_web/elements/00zindex.ts`
+- Dynamic z-index assignment via `ZIndexRegistry` class
+- Components get z-index from registry when showing
+- Ensures proper stacking order (dropdowns above modals, etc.)
+
+#### Theme System
+- All components support light/dark themes
+- Use `cssManager.bdTheme(lightValue, darkValue)` for theme-aware colors
+- Consistent color palette defined in `00colors.ts`
+
+#### Component Demo System
+- Each component has a static `demo` property
+- Demo functions in separate `.demo.ts` files
+- Showcase pages aggregate demos (e.g., `input-showcase.ts`)
+
+#### WYSIWYG Editor Architecture
+The WYSIWYG editor uses a sophisticated architecture with separated concerns:
+- **Main Component**: `dees-input-wysiwyg.ts` - Orchestrates the editor
+- **Handler Classes**:
+  - `WysiwygInputHandler` - Handles text input and block transformations
+  - `WysiwygKeyboardHandler` - Manages keyboard shortcuts and navigation
+  - `WysiwygDragDropHandler` - Manages block reordering
+  - `WysiwygModalManager` - Shows configuration modals
+  - `WysiwygBlockOperations` - Core block manipulation logic
+- **Global Menus**: 
+  - `DeesSlashMenu` and `DeesFormattingMenu` render globally to avoid focus issues
+  - Singleton pattern ensures single instance
+- **Programmatic Rendering**: Uses manual DOM manipulation to prevent focus loss
+
+### Component Communication
+- Custom events for parent-child communication
+- Form components emit standardized events (`change`, `blur`, etc.)
+- Complex components like `DeesAppuiBase` re-emit child events
+
+### Build System
+- TypeScript compilation with decorators support
+- Web component bundling with esbuild
+- Element exports in `ts_web/elements/index.ts`
+- Distribution builds in `dist_ts_web/`
+
+## Important Implementation Details
+
+### When Creating New Components
+1. Extend `DeesElement` from `@design.estate/dees-element`
+2. Use `@customElement('dees-componentname')` decorator
+3. Implement theme support with `cssManager.bdTheme()`
+4. Create a demo function in a separate `.demo.ts` file
+5. Export from `elements/index.ts`
+
+### Form Input Components
+1. Extend `DeesInputBase` for form inputs
+2. Implement `getValue()` and `setValue()` methods
+3. Use `changeSubject.next(this)` to emit changes
+4. Support `disabled` and `required` properties
+
+### Overlay Components
+1. Import z-index from `00zindex.ts`
+2. Get z-index from registry when showing: `zIndexRegistry.getNextZIndex()`
+3. Register/unregister with the registry
+4. Use `DeesWindowLayer` for backdrop if needed
+
+### Testing Components
+1. Create test files in `test/` directory
+2. Use `@git.zone/tstest` with tap-bundle
+3. Test in browser environment for web components
+4. Use proper async/await for component lifecycle
+
+## Common Patterns and Pitfalls
+
+### Focus Management
+- WYSIWYG editor uses programmatic rendering to prevent focus loss
+- Use `requestAnimationFrame` for timing-sensitive focus operations
+- Avoid reactive re-renders during user input
+
+### Event Handling
+- Prevent event bubbling in nested interactive components
+- Use `pointer-events: none/auto` for click-through behavior
+- Handle both mouse and keyboard events for accessibility
+
+### Performance Considerations
+- Large components (editor, terminal) use lazy loading
+- Charts use debounced resize observers
+- Tables implement virtual scrolling for large datasets
+
+## File Organization
+```
+ts_web/
+├── elements/           # All component files
+│   ├── 00*.ts         # Shared utilities (colors, z-index, plugins)
+│   ├── dees-*.ts      # Component implementations
+│   ├── dees-*.demo.ts # Component demos
+│   ├── interfaces/    # Shared TypeScript interfaces
+│   ├── helperclasses/ # Utility classes (FormController)
+│   └── wysiwyg/       # WYSIWYG editor subsystem
+├── pages/             # Demo showcase pages
+└── index.ts           # Main export file
+```
+
+## Recent Major Changes
+- Z-Index Registry System (2025-12-24): Dynamic stacking order management
+- WYSIWYG Refactoring (2025-06-24): Complete architecture overhaul with separated concerns
+- Form System Enhancement: Unified validation and data collection
+- Theme System: Consistent light/dark theme support across all components

changelog.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 2025-06-27 - 1.10.1 - fix(modal)
+Improve modal overscroll behavior by adding 'overscroll-behavior: contain' to content container
+
+- Added 'overscroll-behavior: contain' to .modal .content to ensure proper scroll containment
+- Applied overscroll-behavior in modal container for enhanced responsiveness on mobile and desktop
+
+## 2025-06-26 - 1.10.0 - feat(dees-modal)
+Add mobileFullscreen option to modals for full-screen mobile support
+
+- Introduced a new boolean property 'mobileFullscreen' in ts_web/elements/dees-modal.ts
+- Updated modal CSS under the media query to apply 'mobile-fullscreen' class, allowing full viewport modals on mobile devices
+- Extended modal style rules to include adjustments for margin, border-radius, and maximum heights on smaller screens
+
+## 2025-06-26 - 1.9.9 - fix(dees-input-multitoggle, dees-input-typelist)
+Replace dynamic import with static import for demo functions in dees-input-multitoggle and dees-input-typelist
+
+- Converted `await import('./dees-input-multitoggle.demo.js')` to a direct static import.
+- Converted `await import('./dees-input-typelist.demo.js')` to a direct static import to improve build performance and clarity.
+
+## 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,14 +1,14 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.9.3",
+  "version": "1.10.5",
   "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",
   "typings": "dist_ts_web/index.d.ts",
   "type": "module",
   "scripts": {
-    "test": "tstest test/ --web --verbose --timeout 30",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "test": "tstest test/ --web --verbose --timeout 30 --logfile",
+    "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/extension-link": "^2.22.3",
-    "@tiptap/extension-text-align": "^2.22.3",
-    "@tiptap/extension-typography": "^2.22.3",
-    "@tiptap/extension-underline": "^2.22.3",
-    "@tiptap/starter-kit": "^2.22.3",
+    "@tiptap/core": "^2.23.0",
+    "@tiptap/extension-link": "^2.23.0",
+    "@tiptap/extension-text-align": "^2.23.0",
+    "@tiptap/extension-typography": "^2.23.0",
+    "@tiptap/extension-underline": "^2.23.0",
+    "@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.hints.md

@@ -1,5 +1,5 @@
 !!! Please pay attention to the following points when writing the readme: !!!
-* Give a short rundown of components and a few points abputspecific features on each.
+* Give a short rundown of components and a few points abput specific features on each.
 * Try to list all components in a summary.
 * Then list all components with a short description.
 
@@ -514,3 +514,94 @@ The refactoring follows the principles in instructions.md:
 - Uses static templates with manual DOM operations
 - Maintains separated concerns in different classes
 - Results in clean, concise, and manageable code
+
+## Z-Index Management System (2025-12-24)
+
+A comprehensive z-index management system has been implemented to fix overlay stacking conflicts:
+
+### The Problem:
+- Modals were hiding dropdown overlays
+- Context menus appeared behind modals
+- Inconsistent z-index values across components
+- No clear hierarchy for overlay stacking
+
+### The Solution:
+
+#### 1. Central Z-Index Constants (`00zindex.ts`):
+Created a centralized file defining all z-index layers:
+
+```typescript
+export const zIndexLayers = {
+  // Base layer: Regular content
+  base: {
+    content: 'auto',
+    inputElements: 1,
+  },
+  // Fixed UI elements
+  fixed: {
+    appBar: 10,
+    sideMenu: 10,
+    mobileNav: 250,
+  },
+  // Overlay backdrops
+  backdrop: {
+    dropdown: 1999,
+    modal: 2999,
+    contextMenu: 3999,
+  },
+  // Interactive overlays
+  overlay: {
+    dropdown: 2000,     // Dropdowns and select menus
+    modal: 3000,        // Modal dialogs
+    contextMenu: 4000,  // Context menus and tooltips
+    toast: 5000,        // Toast notifications
+  },
+  // Special cases
+  modalDropdown: 3500,    // Dropdowns inside modals
+  wysiwygMenus: 4500,     // Editor formatting menus
+}
+```
+
+#### 2. Updated Components:
+- **dees-modal**: Changed from 2000 to 3000
+- **dees-windowlayer**: Changed from 200-201 to 1999-2000 (used by dropdowns)
+- **dees-contextmenu**: Changed from 10000 to 4000
+- **dees-toast**: Changed from 10000 to 5000
+- **wysiwyg menus**: Changed from 10000 to 4500
+- **dees-appui-profiledropdown**: Uses new dropdown z-index (2000)
+
+#### 3. Stacking Order (bottom to top):
+1. Regular page content (auto)
+2. Fixed navigation elements (10-250)
+3. Dropdown backdrop (1999)
+4. Dropdown content (2000)
+5. Modal backdrop (2999)
+6. Modal content (3000)
+7. Context menu (4000)
+8. WYSIWYG menus (4500)
+9. Toast notifications (5000)
+
+#### 4. Key Benefits:
+- Dropdowns now appear above modals
+- Context menus appear above dropdowns and modals
+- Toast notifications always appear on top
+- Consistent and predictable stacking behavior
+- Easy to adjust hierarchy by modifying central constants
+
+#### 5. Testing:
+Created `test-zindex.demo.ts` to verify stacking behavior with:
+- Modal containing dropdown
+- Context menu on modal
+- Toast notifications
+- Complex overlay combinations
+
+### Usage:
+Import and use the z-index constants in any component:
+```typescript
+import { zIndexLayers } from './00zindex.js';
+
+// In styles
+z-index: ${zIndexLayers.overlay.modal};
+```
+
+This system ensures proper stacking order for all overlay components and prevents z-index conflicts.

readme.md

@@ -12,14 +12,15 @@ npm install @design.estate/dees-catalog
 
 | Category | Components |
 |----------|------------|
-| Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` |
-| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` |
-| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` |
-| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid` |
+| Core UI | `DeesButton`, `DeesButtonExit`, `DeesButtonGroup`, `DeesBadge`, `DeesChips`, `DeesHeading`, `DeesHint`, `DeesIcon`, `DeesLabel`, `DeesPanel`, `DeesSearchbar`, `DeesSpinner`, `DeesToast`, `DeesWindowcontrols` |
+| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadiogroup`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesInputTags`, `DeesInputTypelist`, `DeesInputRichtext`, `DeesInputWysiwyg`, `DeesFormSubmit` |
+| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesAppuiActivitylog`, `DeesAppuiProfiledropdown`, `DeesAppuiTabs`, `DeesAppuiView`, `DeesMobileNavigation` |
+| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid`, `DeesPagination` |
 | Visualization | `DeesChartArea`, `DeesChartLog` |
 | Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
-| Navigation | `DeesStepper`, `DeesProgressbar` |
-| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesTerminal`, `DeesUpdater` |
+| Navigation | `DeesStepper`, `DeesProgressbar`, `DeesMobileNavigation` |
+| 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.10.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00zindex.ts

@@ -0,0 +1,161 @@
+/**
+ * Central z-index management for consistent stacking order
+ * Higher numbers appear on top of lower numbers
+ */
+
+export const zIndexLayers = {
+  // Base layer: Regular content
+  base: {
+    content: 'auto',
+    inputElements: 1,
+  },
+
+  // Fixed UI elements
+  fixed: {
+    appBar: 10,
+    sideMenu: 10,
+    mobileNav: 250,
+  },
+
+  // Overlay backdrops (semi-transparent backgrounds)
+  backdrop: {
+    dropdown: 1999,  // Below modals but above fixed elements
+    modal: 2999,     // Below dropdowns on modals
+    contextMenu: 3999, // Below critical overlays
+  },
+
+  // Interactive overlays
+  overlay: {
+    dropdown: 2000,     // Dropdowns and select menus
+    modal: 3000,        // Modal dialogs
+    contextMenu: 4000,  // Context menus and tooltips
+    toast: 5000,        // Toast notifications (highest priority)
+  },
+
+  // Special cases for nested elements
+  modalDropdown: 3500,    // Dropdowns inside modals
+  wysiwygMenus: 4500,     // Editor formatting menus
+} as const;
+
+// Helper function to get z-index value
+export function getZIndex(category: keyof typeof zIndexLayers, subcategory?: string): number | string {
+  const categoryObj = zIndexLayers[category];
+  if (typeof categoryObj === 'object' && subcategory) {
+    return categoryObj[subcategory as keyof typeof categoryObj] || 'auto';
+  }
+  return typeof categoryObj === 'number' ? categoryObj : 'auto';
+}
+
+// Z-index assignments for components
+export const componentZIndex = {
+  'dees-modal': zIndexLayers.overlay.modal,
+  'dees-windowlayer': zIndexLayers.overlay.dropdown,
+  'dees-contextmenu': zIndexLayers.overlay.contextMenu,
+  'dees-toast': zIndexLayers.overlay.toast,
+  'dees-appui-mainmenu': zIndexLayers.fixed.appBar,
+  'dees-mobilenavigation': zIndexLayers.fixed.mobileNav,
+  'dees-slash-menu': zIndexLayers.wysiwygMenus,
+  'dees-formatting-menu': zIndexLayers.wysiwygMenus,
+} 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-appui-mainmenu.ts

@@ -1,5 +1,6 @@
 import * as plugins from './00plugins.js';
 import * as interfaces from './interfaces/index.js';
+import { zIndexLayers } from './00zindex.js';
 
 import {
   DeesElement,
@@ -46,7 +47,7 @@ export class DeesAppuiMainmenu extends DeesElement {
       .mainContainer {
         --menuSize: 60px;
         color: ${cssManager.bdTheme('#666', '#ccc')};
-        z-index: 10;
+        z-index: ${zIndexLayers.fixed.appBar};
         display: block;
         position: relative;
         width: var(--menuSize);

ts_web/elements/dees-appui-profiledropdown.ts

@@ -1,4 +1,5 @@
 import * as plugins from './00plugins.js';
+import { zIndexLayers } from './00zindex.js';
 
 import {
   DeesElement,
@@ -73,7 +74,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
           '0 4px 12px rgba(0, 0, 0, 0.15)',
           '0 4px 12px rgba(0, 0, 0, 0.3)'
         )};
-        z-index: 1000;
+        z-index: ${zIndexLayers.overlay.dropdown};
         opacity: 0;
         transform: scale(0.95) translateY(-10px);
         transition: opacity 0.2s, transform 0.2s;
@@ -258,7 +259,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.3);
-          z-index: 999;
+          z-index: ${zIndexLayers.backdrop.dropdown};
           opacity: 0;
           transition: opacity 0.2s;
           display: none;

ts_web/elements/dees-button.demo.ts

@@ -1,77 +1,301 @@
-import { html, css } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
+import './dees-form.js';
+import './dees-form-submit.js';
+import './dees-input-text.js';
+import './dees-icon.js';
 
 export const demoFunc = () => html`
-  <style>
-    ${css`
-      h3 {
-        margin-top: 32px;
-        margin-bottom: 16px;
-        color: #333;
-      }
-      
-      @media (prefers-color-scheme: dark) {
-        h3 {
-          color: #ccc;
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
         }
-      }
         
-      .form-demo {
-        background: #f5f5f5;
-        padding: 20px;
-        border-radius: 8px;
-        margin: 20px 0;
-      }
-      
-      @media (prefers-color-scheme: dark) {
-        .form-demo {
-          background: #1a1a1a;
+        dees-panel {
+          margin-bottom: 24px;
         }
-      }
         
-      .button-group {
-        display: flex;
-        gap: 16px;
-        margin: 20px 0;
-      }
-    `}
-  </style>
+        dees-panel:last-child {
+          margin-bottom: 0;
+        }
         
-  <h3>Button Types</h3>
-  <dees-button>This is a slotted Text</dees-button>
-  <p>
-    <dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button>
-  </p>
-  <p><dees-button type="discreet">This is discreete button</dees-button></p>
-  <p><dees-button disabled>This is a disabled button</dees-button></p>
-  <p><dees-button type="big">This is a slotted Text</dees-button></p>
+        .button-group {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          flex-wrap: wrap;
+        }
         
-  <h3>Button States</h3>
-  <p><dees-button status="normal">Normal Status</dees-button></p>
-  <p><dees-button disabled status="pending">Pending Status</dees-button></p>
-  <p><dees-button disabled status="success">Success Status</dees-button></p>
-  <p><dees-button disabled status="error">Error Status</dees-button></p>
+        .vertical-group {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          max-width: 300px;
+        }
         
-  <h3>Buttons in Forms (Auto-spacing)</h3>
-  <div class="form-demo">
-    <dees-form>
-      <dees-input-text label="Name" key="name"></dees-input-text>
-      <dees-input-text label="Email" key="email"></dees-input-text>
-      <dees-button>Save Draft</dees-button>
-      <dees-button type="highlighted">Save and Continue</dees-button>
-      <dees-form-submit>Submit Form</dees-form-submit>
-    </dees-form>
-  </div>
+        .horizontal-group {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          flex-wrap: wrap;
+        }
         
-  <h3>Buttons Outside Forms (No auto-spacing)</h3>
-  <div class="button-group">
-    <dees-button>Button 1</dees-button>
-    <dees-button>Button 2</dees-button>
-    <dees-button>Button 3</dees-button>
-  </div>
+        .demo-output {
+          margin-top: 16px;
+          padding: 12px;
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+          font-size: 14px;
+          font-family: monospace;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        }
         
-  <h3>Manual Form Spacing</h3>
-  <div>
-    <dees-button inside-form="true">Manually spaced button 1</dees-button>
-    <dees-button inside-form="true">Manually spaced button 2</dees-button>
-  </div>
+        .icon-row {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin: 8px 0;
+        }
+        
+        .code-snippet {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+          padding: 8px 12px;
+          border-radius: 4px;
+          font-family: monospace;
+          font-size: 13px;
+          display: inline-block;
+          margin: 4px 0;
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-panel .title=${'1. Button Variants'} .subtitle=${'Different visual styles for various use cases'}>
+        <div class="button-group">
+          <dees-button type="default">Default</dees-button>
+          <dees-button type="secondary">Secondary</dees-button>
+          <dees-button type="destructive">Destructive</dees-button>
+          <dees-button type="outline">Outline</dees-button>
+          <dees-button type="ghost">Ghost</dees-button>
+          <dees-button type="link">Link Button</dees-button>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'2. Button Sizes'} .subtitle=${'Multiple sizes for different contexts and use cases'}>
+        <div class="button-group">
+          <dees-button size="sm">Small Button</dees-button>
+          <dees-button size="default">Default Size</dees-button>
+          <dees-button size="lg">Large Button</dees-button>
+          <dees-button size="icon" type="outline" .text=${'🚀'}></dees-button>
+        </div>
+        
+        <div class="button-group" style="margin-top: 16px;">
+          <dees-button size="sm" type="secondary">Small Secondary</dees-button>
+          <dees-button size="default" type="destructive">Default Destructive</dees-button>
+          <dees-button size="lg" type="outline">Large Outline</dees-button>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
+        <div class="icon-row">
+          <dees-button>
+            <dees-icon iconFA="faPlus"></dees-icon>
+            Add Item
+          </dees-button>
+          <dees-button type="destructive">
+            <dees-icon iconFA="faTrash"></dees-icon>
+            Delete
+          </dees-button>
+          <dees-button type="outline">
+            <dees-icon iconFA="faDownload"></dees-icon>
+            Download
+          </dees-button>
+        </div>
+        
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm">
+            <dees-icon iconFA="faCog"></dees-icon>
+            Settings
+          </dees-button>
+          <dees-button type="ghost">
+            <dees-icon iconFA="faChevronLeft"></dees-icon>
+            Back
+          </dees-button>
+          <dees-button type="ghost">
+            Next
+            <dees-icon iconFA="faChevronRight"></dees-icon>
+          </dees-button>
+        </div>
+        
+        <div class="icon-row">
+          <dees-button size="icon" type="default">
+            <dees-icon iconFA="faPlus"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="secondary">
+            <dees-icon iconFA="faCog"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="outline">
+            <dees-icon iconFA="faSearch"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="ghost">
+            <dees-icon iconFA="faEllipsisV"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="destructive">
+            <dees-icon iconFA="faTrash"></dees-icon>
+          </dees-button>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'4. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
+        <div class="button-group">
+          <dees-button status="normal">Normal</dees-button>
+          <dees-button status="pending">Processing...</dees-button>
+          <dees-button status="success">Success!</dees-button>
+          <dees-button status="error">Error!</dees-button>
+          <dees-button disabled>Disabled</dees-button>
+        </div>
+        
+        <div class="button-group" style="margin-top: 16px;">
+          <dees-button type="secondary" status="pending" size="sm">Small Loading</dees-button>
+          <dees-button type="outline" status="pending">Default Loading</dees-button>
+          <dees-button type="destructive" status="pending" size="lg">Large Loading</dees-button>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'5. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
+        <div class="button-group">
+          <dees-button 
+            @clicked=${() => {
+              const output = document.querySelector('#click-output');
+              if (output) {
+                output.textContent = `Clicked: Default button at ${new Date().toLocaleTimeString()}`;
+              }
+            }}
+          >
+            Click Me
+          </dees-button>
+          
+          <dees-button 
+            type="secondary"
+            .eventDetailData=${'custom-data-123'}
+            @clicked=${(e: CustomEvent) => {
+              const output = document.querySelector('#click-output');
+              if (output) {
+                output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
+              }
+            }}
+          >
+            Click with Data
+          </dees-button>
+          
+          <dees-button 
+            type="destructive"
+            @clicked=${async () => {
+              const output = document.querySelector('#click-output');
+              if (output) {
+                output.textContent = 'Processing...';
+                await new Promise(resolve => setTimeout(resolve, 2000));
+                output.textContent = 'Action completed!';
+              }
+            }}
+          >
+            Async Action
+          </dees-button>
+        </div>
+        
+        <div id="click-output" class="demo-output">
+          <em>Click a button to see the result...</em>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'6. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
+        <dees-form @formData=${(e: CustomEvent) => {
+          const output = document.querySelector('#form-output');
+          if (output) {
+            output.innerHTML = '<strong>Form submitted with data:</strong><br>' + 
+              JSON.stringify(e.detail.data, null, 2);
+          }
+        }}>
+          <dees-input-text label="Name" key="name" required></dees-input-text>
+          <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
+          <dees-input-text label="Message" key="message" isMultiline></dees-input-text>
+          
+          <dees-button type="secondary">Save Draft</dees-button>
+          <dees-button type="ghost">Cancel</dees-button>
+          <dees-form-submit>Submit Form</dees-form-submit>
+        </dees-form>
+        
+        <div id="form-output" class="demo-output" style="white-space: pre-wrap;">
+          <em>Submit the form to see the data...</em>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'7. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
+        <div class="button-group">
+          <dees-button type="normal">Normal → Default</dees-button>
+          <dees-button type="highlighted">Highlighted → Destructive</dees-button>
+          <dees-button type="discreet">Discreet → Outline</dees-button>
+          <dees-button type="big">Big → Large Size</dees-button>
+        </div>
+        
+        <p style="margin-top: 16px; font-size: 14px; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};">
+          These legacy type values are maintained for backward compatibility but we recommend using the new variant system.
+        </p>
+      </dees-panel>
+      
+      <dees-panel .title=${'8. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
+        <div class="horizontal-group">
+          <div class="vertical-group">
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
+            <dees-button type="default" size="sm">
+              <dees-icon iconFA="faSave"></dees-icon>
+              Save Changes
+            </dees-button>
+            <dees-button type="secondary" size="sm">
+              <dees-icon iconFA="faUndo"></dees-icon>
+              Discard
+            </dees-button>
+            <dees-button type="ghost" size="sm">
+              <dees-icon iconFA="faQuestionCircle"></dees-icon>
+              Help
+            </dees-button>
+          </div>
+          
+          <div class="vertical-group">
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
+            <dees-button type="destructive" size="sm">
+              <dees-icon iconFA="faTrash"></dees-icon>
+              Delete Account
+            </dees-button>
+            <dees-button type="outline" size="sm">
+              <dees-icon iconFA="faArchive"></dees-icon>
+              Archive Data
+            </dees-button>
+            <dees-button type="ghost" size="sm" disabled>
+              <dees-icon iconFA="faBan"></dees-icon>
+              Not Available
+            </dees-button>
+          </div>
+        </div>
+        
+        <div style="margin-top: 24px;">
+          <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
+          <div class="code-snippet">
+            &lt;dees-button type="default" size="sm" @clicked="\${handleClick}"&gt;<br>
+            &nbsp;&nbsp;&lt;dees-icon iconFA="faSave"&gt;&lt;/dees-icon&gt;<br>
+            &nbsp;&nbsp;Save Changes<br>
+            &lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
 `;

ts_web/elements/dees-button.ts

@@ -48,7 +48,12 @@ export class DeesButton extends DeesElement {
   @property({
     type: String
   })
-  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
+  public type: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
+  
+  @property({
+    type: String
+  })
+  public size: 'default' | 'sm' | 'lg' | 'icon' = 'default';
 
   @property({
     type: String
@@ -77,25 +82,23 @@ export class DeesButton extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        display: block;
+        display: inline-block;
         box-sizing: border-box;
-        font-family: 'Geist Sans', 'monospace';
+        font-family: inherit;
       }
       :host([hidden]) {
         display: none;
       }
 
       /* Form spacing styles */
-      /* Default vertical form layout */
       :host([inside-form]) {
-        margin-bottom: 16px; /* Using standard 16px like inputs */
+        margin-bottom: 16px;
       }
       
       :host([inside-form]:last-child) {
         margin-bottom: 0;
       }
       
-      /* Horizontal form layout - auto-detected via parent */
       dees-form[horizontal-layout] :host([inside-form]) {
         display: inline-block;
         margin-right: 16px;
@@ -107,114 +110,260 @@ export class DeesButton extends DeesElement {
       }
 
       .button {
-        transition: all 0.1s , color 0s;
         position: relative;
-        font-size: 14px;
-        font-weight: 400;
-        display: flex;
-        justify-content: center;
+        display: inline-flex;
         align-items: center;
-        background: ${cssManager.bdTheme('#fff', '#333')};
-        box-shadow: ${cssManager.bdTheme('0px 1px 3px rgba(0,0,0,0.3)', 'none')};
-        border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
-        border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
-        border-radius: 4px;
-        height: 40px;
-        padding: 0px 8px;
-        min-width: 100px;
+        justify-content: center;
+        white-space: nowrap;
+        border-radius: 6px;
+        font-weight: 500;
+        transition: all 0.15s ease;
+        cursor: pointer;
         user-select: none;
-        color: ${cssManager.bdTheme('#333', ' #ccc')};
-        max-width: 500px;
+        outline: none;
+        letter-spacing: -0.01em;
+        gap: 8px;
       }
 
-      .button:hover {
-        background: #0050b9;
-        color: #ffffff;
-        border: 1px solid #0050b9;
-        border-top: 1px solid #0050b9;
+      /* Size variants */
+      .button.size-default {
+        height: 36px;
+        padding: 0 16px;
+        font-size: 14px;
       }
 
-      .button:active {
-        background: #0069f2;
-        border-top: 1px solid #0069f2;
+      .button.size-sm {
+        height: 32px;
+        padding: 0 12px;
+        font-size: 13px;
       }
 
-      .button.highlighted {
-        background: #e4002b;
+      .button.size-lg {
+        height: 44px;
+        padding: 0 24px;
+        font-size: 16px;
+      }
+
+      .button.size-icon {
+        height: 36px;
+        width: 36px;
+        padding: 0;
+      }
+
+      /* Default variant */
+      .button.default {
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+      }
+
+      .button.default:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 10.2%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 20%)')};
+      }
+
+      .button.default:active:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 9%)')};
+      }
+
+      /* Destructive variant */
+      .button.destructive {
+        background: hsl(0 84.2% 60.2%);
+        color: hsl(0 0% 98%);
+        border: 1px solid transparent;
+      }
+
+      .button.destructive:hover:not(.disabled) {
+        background: hsl(0 84.2% 56.2%);
+      }
+
+      .button.destructive:active:not(.disabled) {
+        background: hsl(0 84.2% 52.2%);
+      }
+
+      /* Outline variant */
+      .button.outline {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
+      }
+
+      .button.outline:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 26.8%)')};
+      }
+
+      .button.outline:active:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
+      }
+
+      /* Secondary variant */
+      .button.secondary {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        border: 1px solid transparent;
+      }
+
+      .button.secondary:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
+      }
+
+      .button.secondary:active:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 11.8%)')};
+      }
+
+      /* Ghost variant */
+      .button.ghost {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        border: 1px solid transparent;
+      }
+
+      .button.ghost:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+      }
+
+      .button.ghost:active:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
+      }
+
+      /* Link variant */
+      .button.link {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8%)')};
         border: none;
-        color: #fff;
+        text-decoration: underline;
+        text-decoration-color: transparent;
+        height: auto;
+        padding: 0;
       }
 
-      .button.highlighted:hover {
-        background: #b50021;
-        border: none;
-        color: #fff;
+      .button.link:hover:not(.disabled) {
+        text-decoration-color: currentColor;
       }
 
-      .button.discreet {
-        background: none;
-        border: 1px solid #9b9b9e;
-        color: ${cssManager.bdTheme('#000', '#fff')};
+      /* Status states */
+      .button.pending,
+      .button.success,
+      .button.error {
+        pointer-events: none;
+        padding-left: 36px; /* Space for spinner */
       }
       
-      .button.discreet:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+      .button.size-sm.pending,
+      .button.size-sm.success,
+      .button.size-sm.error {
+        padding-left: 32px;
       }
       
+      .button.size-lg.pending,
+      .button.size-lg.success,
+      .button.size-lg.error {
+        padding-left: 44px;
+      }
+
+      .button.pending {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(213.1 93.9% 67.8%)')};
+        border: 1px solid transparent;
+      }
+
+      .button.success {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(142.1 70.6% 45.3%)')};
+        border: 1px solid transparent;
+      }
+
+      .button.error {
+        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 62.8% 70.6% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 62.8% 70.6%)')};
+        border: 1px solid transparent;
+      }
+
+      /* Disabled state */
       .button.disabled {
-        background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
-        border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
-        color: #9b9b9e;
-        cursor: default;
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
       }
 
+      /* Hidden state */
       .button.hidden {
         display: none;
       }
 
-      .button.big {
-        width: 300px;
-        line-height: 48px;
-        font-size: 16px;
-        padding: 0px 48px;
-        margin-top: 32px;
-      }
-
-      .button.pending {
-        border: 1px dashed ${cssManager.bdTheme('#0069f2', '#0069f270')};
-        background: ${cssManager.bdTheme('#0069f2', '#0069f270')};
-        color: #fff;
-      }
-
-      .button.success {
-        border: 1px dashed ${cssManager.bdTheme('#689F38', '#8BC34A70')};
-        background: ${cssManager.bdTheme('#689F38', '#8BC34A70')};
-        color: #fff;
-      }
-
-      .button.error {
-        border: 1px dashed ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
-        background: ${cssManager.bdTheme('#B71C1C', '#E64A1970')};
-        color: #fff;
+      /* Focus state */
+      .button:focus-visible {
+        outline: 2px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8%)')};
+        outline-offset: 2px;
       }
 
+      /* Loading spinner */
       dees-spinner {
         position: absolute;
         left: 10px;
+        width: 16px;
+        height: 16px;
       }
+      
+      .button.size-sm dees-spinner {
+        left: 8px;
+        width: 14px;
+        height: 14px;
+      }
+      
+      .button.size-lg dees-spinner {
+        left: 14px;
+        width: 18px;
+        height: 18px;
+      }
+      
+      /* Icon sizing within buttons */
+      .button dees-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+      
+      .button.size-sm dees-icon {
+        width: 14px;
+        height: 14px;
+      }
+      
+      .button.size-lg dees-icon {
+        width: 18px;
+        height: 18px;
+      }
+
     `,
   ];
 
   public render(): TemplateResult {
+    // Map old types to new types for backward compatibility
+    const typeMap: {[key: string]: string} = {
+      'normal': 'default',
+      'highlighted': 'destructive',
+      'discreet': 'outline',
+      'big': 'default' // Will use size instead
+    };
+    
+    const actualType = typeMap[this.type] || this.type;
+    const actualSize = this.type === 'big' ? 'lg' : this.size;
+    
     return html`
       <div
-        class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.status} ${this.disabled
+        class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} ${this.status} ${this.disabled
           ? 'disabled'
-          : null}"
+          : ''}"
         @click="${this.dispatchClick}"
       >
         ${this.status === 'normal' ? html``: html`
-          <dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
+          <dees-spinner 
+            .bnw=${true} 
+            status="${this.status}"
+            size="${actualSize === 'sm' ? 14 : actualSize === 'lg' ? 18 : 16}"
+          ></dees-spinner>
         `}
         <div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
       </div>

ts_web/elements/dees-contextmenu.ts

@@ -14,6 +14,7 @@ import {
 
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesWindowLayer } from './dees-windowlayer.js';
+import { zIndexLayers } from './00zindex.js';
 import './dees-icon.js';
 
 declare global {
@@ -74,7 +75,7 @@ export class DeesContextmenu extends DeesElement {
     eventArg.stopPropagation();
     const contextMenu = new DeesContextmenu();
     contextMenu.style.position = 'fixed';
-    contextMenu.style.zIndex = '10000';
+    contextMenu.style.zIndex = String(zIndexLayers.overlay.contextMenu);
     contextMenu.style.opacity = '0';
     contextMenu.style.transform = 'scale(0.95) translateY(-10px)';
     contextMenu.menuItems = menuItemsArg;

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 {
-          background: #f8f9fa;
-          border-radius: 8px;
-          padding: 24px;
-          position: relative;
+        dees-panel {
+          margin-bottom: 24px;
         }
         
-        @media (prefers-color-scheme: dark) {
-          .demo-section {
-            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;
-          }
+        dees-panel:last-child {
+          margin-bottom: 0;
         }
         
         .horizontal-group {
@@ -66,10 +44,7 @@ export const demoFunc = () => html`
     </style>
     
     <div class="demo-container">
-      <div class="demo-section">
-        <h3>Basic Dropdowns</h3>
-        <p>Standard dropdown with search functionality and various options</p>
-        
+      <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
         <dees-input-dropdown
           .label=${'Select Country'}
           .options=${[
@@ -94,12 +69,9 @@ export const demoFunc = () => html`
             { option: 'Guest', key: 'guest' }
           ]}
         ></dees-input-dropdown>
-      </div>
-      
-      <div class="demo-section">
-        <h3>Without Search</h3>
-        <p>Dropdown with search functionality disabled for simpler selection</p>
+      </dees-panel>
       
+      <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
         <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>
-      
-      <div class="demo-section">
-        <h3>Horizontal Layout</h3>
-        <p>Multiple dropdowns in a horizontal layout for compact forms</p>
+      </dees-panel>
       
+      <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
         <div class="horizontal-group">
           <dees-input-dropdown
             .label=${'Department'}
@@ -150,12 +119,9 @@ export const demoFunc = () => html`
             ]}
           ></dees-input-dropdown>
         </div>
-      </div>
-      
-      <div class="demo-section">
-        <h3>States</h3>
-        <p>Different states and configurations</p>
+      </dees-panel>
       
+      <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
         <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">
-        <h3>Bottom Positioning</h3>
-        <p>Dropdown that opens upward when near bottom of viewport</p>
-        
+      <dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
         <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

@@ -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(
@@ -289,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 () => {
@@ -296,9 +307,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 +338,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-input-fileupload.demo.ts

@@ -51,85 +51,151 @@ export const demoFunc = () => html`
     </style>
     
     <div class="demo-container">
-      <dees-panel .title=${'Basic File Upload'} .subtitle=${'Simple file upload with drag and drop support'}>
+      <dees-panel .title=${'1. Basic File Upload'} .subtitle=${'Simple file upload with drag and drop support'}>
         <dees-input-fileupload
           .label=${'Attachments'}
-          .description=${'Upload files by clicking or dragging'}
+          .description=${'Upload any files by clicking or dragging them here'}
         ></dees-input-fileupload>
         
         <dees-input-fileupload
-          .label=${'Resume'}
-          .description=${'Upload your CV in PDF format'}
-          .buttonText=${'Choose Resume...'}
+          .label=${'Single File Only'}
+          .description=${'Only one file can be uploaded at a time'}
+          .multiple=${false}
+          .buttonText=${'Choose File'}
         ></dees-input-fileupload>
       </dees-panel>
       
-      <dees-panel .title=${'Multiple Upload Areas'} .subtitle=${'Different upload zones for various file types'}>
+      <dees-panel .title=${'2. File Type Restrictions'} .subtitle=${'Upload areas with specific file type requirements'}>
         <div class="upload-grid">
           <div class="upload-box">
-            <h4>Profile Picture</h4>
+            <h4>Images Only</h4>
             <dees-input-fileupload
-              .label=${'Avatar'}
-              .description=${'JPG, PNG or GIF'}
-              .buttonText=${'Select Image...'}
+              .label=${'Profile Picture'}
+              .description=${'JPG, PNG or GIF (max 5MB)'}
+              .accept=${'image/jpeg,image/png,image/gif'}
+              .maxSize=${5 * 1024 * 1024}
+              .multiple=${false}
+              .buttonText=${'Select Image'}
             ></dees-input-fileupload>
           </div>
           
           <div class="upload-box">
-            <h4>Cover Image</h4>
+            <h4>Documents Only</h4>
             <dees-input-fileupload
-              .label=${'Banner'}
-              .description=${'Recommended: 1200x400px'}
-              .buttonText=${'Select Banner...'}
+              .label=${'Resume'}
+              .description=${'PDF or Word documents only'}
+              .accept=${".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"}
+              .buttonText=${'Select Document'}
             ></dees-input-fileupload>
           </div>
         </div>
       </dees-panel>
       
-      <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different upload states for validation'}>
+      <dees-panel .title=${'3. Validation & Limits'} .subtitle=${'File size limits and validation examples'}>
         <dees-input-fileupload
-          .label=${'Identity Document'}
-          .description=${'Required for verification'}
-          .required=${true}
-          .buttonText=${'Upload Document...'}
+          .label=${'Small Files Only'}
+          .description=${'Maximum file size: 1MB'}
+          .maxSize=${1024 * 1024}
+          .buttonText=${'Upload Small File'}
         ></dees-input-fileupload>
         
         <dees-input-fileupload
-          .label=${'System Files'}
-          .description=${'File upload is disabled'}
-          .disabled=${true}
-          .value=${[]}
+          .label=${'Limited Upload'}
+          .description=${'Maximum 3 files, each up to 2MB'}
+          .maxFiles=${3}
+          .maxSize=${2 * 1024 * 1024}
+        ></dees-input-fileupload>
+        
+        <dees-input-fileupload
+          .label=${'Required Upload'}
+          .description=${'This field is required'}
+          .required=${true}
         ></dees-input-fileupload>
       </dees-panel>
       
-      <dees-panel .title=${'Application Form'} .subtitle=${'Complete form with file upload integration'}>
+      <dees-panel .title=${'4. States & Styling'} .subtitle=${'Different states and validation feedback'}>
+        <dees-input-fileupload
+          .label=${'Disabled Upload'}
+          .description=${'File upload is currently disabled'}
+          .disabled=${true}
+        ></dees-input-fileupload>
+        
+        <dees-input-fileupload
+          .label=${'Pre-filled Example'}
+          .description=${'Component with pre-loaded files'}
+          .value=${[
+            new File(['Hello World'], 'example.txt', { type: 'text/plain' }),
+            new File(['Test Data'], 'data.json', { type: 'application/json' })
+          ]}
+        ></dees-input-fileupload>
+      </dees-panel>
+      
+      <dees-panel .title=${'5. Form Integration'} .subtitle=${'Complete form with various file upload scenarios'}>
         <dees-form>
-          <dees-input-text .label=${'Full Name'} .required=${true}></dees-input-text>
-          <dees-input-text .label=${'Email'} .inputType=${'email'} .required=${true}></dees-input-text>
+          <h3 style="margin-top: 0; margin-bottom: 24px; color: ${cssManager.bdTheme('#333', '#fff')};">Job Application Form</h3>
+          
+          <dees-input-text 
+            .label=${'Full Name'} 
+            .required=${true}
+            .key=${'fullName'}
+          ></dees-input-text>
+          
+          <dees-input-text 
+            .label=${'Email'} 
+            .inputType=${'email'} 
+            .required=${true}
+            .key=${'email'}
+          ></dees-input-text>
+          
           <dees-input-fileupload
             .label=${'Resume'}
-            .description=${'Upload your CV (PDF preferred)'}
+            .description=${'Required: PDF format only (max 10MB)'}
             .required=${true}
+            .accept=${'application/pdf'}
+            .maxSize=${10 * 1024 * 1024}
+            .multiple=${false}
+            .key=${'resume'}
           ></dees-input-fileupload>
+          
           <dees-input-fileupload
             .label=${'Portfolio'}
-            .description=${'Optional: Upload work samples'}
+            .description=${'Optional: Upload up to 5 work samples (images or PDFs, max 5MB each)'}
+            .accept=${'image/*,application/pdf'}
+            .maxFiles=${5}
+            .maxSize=${5 * 1024 * 1024}
+            .key=${'portfolio'}
           ></dees-input-fileupload>
+          
+          <dees-input-fileupload
+            .label=${'References'}
+            .description=${'Upload reference letters (optional)'}
+            .accept=${".pdf,.doc,.docx"}
+            .key=${'references'}
+          ></dees-input-fileupload>
+          
           <dees-input-text
-            .label=${'Cover Letter'}
+            .label=${'Additional Comments'}
             .inputType=${'textarea'}
-            .description=${'Tell us why you would be a great fit'}
+            .description=${'Any additional information you would like to share'}
+            .key=${'comments'}
           ></dees-input-text>
+          
+          <dees-form-submit .text=${'Submit Application'}></dees-form-submit>
         </dees-form>
         
         <div class="info-section">
-          <h4>Features:</h4>
-          <ul>
-            <li>Click to select files or drag & drop</li>
-            <li>Multiple file selection support</li>
-            <li>Visual feedback for drag operations</li>
-            <li>Right-click files to remove them</li>
-            <li>Integrates seamlessly with forms</li>
+          <h4 style="margin-top: 0;">Enhanced Features:</h4>
+          <ul style="margin: 0; padding-left: 20px;">
+            <li>Drag & drop with visual feedback</li>
+            <li>File type restrictions via accept attribute</li>
+            <li>File size validation with custom limits</li>
+            <li>Maximum file count restrictions</li>
+            <li>Image preview thumbnails</li>
+            <li>File type-specific icons</li>
+            <li>Clear all button for multiple files</li>
+            <li>Proper validation states and messages</li>
+            <li>Keyboard accessible</li>
+            <li>Single or multiple file modes</li>
           </ul>
         </div>
       </dees-panel>

ts_web/elements/dees-input-fileupload.ts

@@ -42,6 +42,21 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   })
   public buttonText: string = 'Upload File...';
 
+  @property({ type: String })
+  public accept: string = '';
+
+  @property({ type: Boolean })
+  public multiple: boolean = true;
+
+  @property({ type: Number })
+  public maxSize: number = 0; // 0 means no limit
+
+  @property({ type: Number })
+  public maxFiles: number = 0; // 0 means no limit
+
+  @property({ type: String, reflect: true })
+  public validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+
   constructor() {
     super();
   }
@@ -52,7 +67,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
     css`
       :host {
         position: relative;
-        display: grid;
+        display: block;
         color: ${cssManager.bdTheme('#333', '#ccc')};
       }
 
@@ -60,13 +75,42 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
         display: none;
       }
 
+      .input-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
       .maincontainer {
         position: relative;
-        border-radius: 3px;
-        padding: 8px;
-        background: ${cssManager.bdTheme('#fafafa', '#222222')};
+        border-radius: 8px;
+        padding: 16px;
+        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
         color: ${cssManager.bdTheme('#333', '#ccc')};
-        border-top: 1px solid #ffffff10;
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        transition: all 0.2s ease;
+      }
+
+      .maincontainer:hover {
+        border-color: ${cssManager.bdTheme('#ccc', '#444')};
+      }
+
+      :host([disabled]) .maincontainer {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      :host([validationState="invalid"]) .maincontainer {
+        border-color: #e74c3c;
+      }
+
+      :host([validationState="valid"]) .maincontainer {
+        border-color: #27ae60;
+      }
+
+      :host([validationState="warn"]) .maincontainer {
+        border-color: #f39c12;
       }
 
       .maincontainer::after {
@@ -78,115 +122,385 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
         position: absolute;
         content: '';
         display: block;
-        border: 2px dashed rgba(255, 255, 255, 0);
-        transition: all 0.2s;
+        border: 2px dashed transparent;
+        border-radius: 6px;
+        transition: all 0.3s ease;
         pointer-events: none;
-        background: #00000000;
+        background: transparent;
       }
+      
+      .maincontainer.dragOver {
+        border-color: ${cssManager.bdTheme('#0084ff', '#0084ff')};
+        background: ${cssManager.bdTheme('#f0f8ff', '#001933')};
+      }
+      
       .maincontainer.dragOver::after {
         transform: scale3d(1, 1, 1);
-        border: 2px dashed rgba(255, 255, 255, 0.3);
-        background: #00000080;
+        border: 2px dashed ${cssManager.bdTheme('#0084ff', '#0084ff')};
       }
 
       .uploadButton {
         position: relative;
-        padding: 8px;
-        max-width: 600px;
-        background: ${cssManager.bdTheme('#fafafa', '#333333')};
-        border-radius: 3px;
+        padding: 12px 24px;
+        background: ${cssManager.bdTheme('#0084ff', '#0084ff')};
+        color: white;
+        border-radius: 6px;
         text-align: center;
         font-size: 14px;
-        cursor: default;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
       }
 
       .uploadButton:hover {
-        color: #fff;
-        background: ${unsafeCSS(colors.dark.blue)};
+        background: ${cssManager.bdTheme('#0073e6', '#0073e6')};
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 132, 255, 0.3);
+      }
+
+      .uploadButton:active {
+        transform: translateY(0);
+      }
+
+      .uploadButton dees-icon {
+        font-size: 16px;
+      }
+
+      .files-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 12px;
       }
 
       .uploadCandidate {
         display: grid;
-        grid-template-columns: 48px auto;
-        background: #333;
-        padding: 8px 8px 8px 0px;
-        margin-bottom: 8px;
+        grid-template-columns: 40px 1fr auto;
+        background: ${cssManager.bdTheme('#ffffff', '#2a2a2a')};
+        padding: 12px;
         text-align: left;
-        border-radius: 3px;
-        color: ${cssManager.bdTheme('#666', '#ccc')};
-        font-family: 'Geist Sans', sans-serif;
+        border-radius: 6px;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
         cursor: default;
         transition: all 0.2s;
-        border-top: 1px solid #ffffff10;
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        position: relative;
+        overflow: hidden;
       }
 
-      .uploadCandidate:last-child {
-        margin-bottom: 8px;
+      .uploadCandidate:hover {
+        background: ${cssManager.bdTheme('#f5f5f5', '#333')};
+        border-color: ${cssManager.bdTheme('#ccc', '#444')};
       }
 
       .uploadCandidate .icon {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 16px;
+        font-size: 20px;
+        color: ${cssManager.bdTheme('#666', '#999')};
       }
 
-      .uploadCandidate:hover {
-        background: #393939;
+      .uploadCandidate.image-file .icon {
+        color: #4CAF50;
       }
       
-      .uploadCandidate .description {
+      .uploadCandidate.pdf-file .icon {
+        color: #f44336;
+      }
+      
+      .uploadCandidate.doc-file .icon {
+        color: #2196F3;
+      }
+
+      .uploadCandidate .info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+      }
+      
+      .uploadCandidate .filename {
+        font-weight: 500;
         font-size: 14px;
-        border-left: 1px solid #ffffff10;
-        padding-left: 8px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      .uploadCandidate .filesize {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+      }
+
+      .uploadCandidate .actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .remove-button {
+        width: 32px;
+        height: 32px;
+        border-radius: 4px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+        color: ${cssManager.bdTheme('#666', '#999')};
+      }
+
+      .remove-button:hover {
+        background: ${cssManager.bdTheme('#fee', '#4a1c1c')};
+        color: ${cssManager.bdTheme('#e74c3c', '#ff6b6b')};
+      }
+
+      .clear-all-button {
+        margin-bottom: 8px;
+        text-align: right;
+      }
+
+      .clear-all-button button {
+        background: none;
+        border: none;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        cursor: pointer;
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: all 0.2s;
+      }
+
+      .clear-all-button button:hover {
+        background: ${cssManager.bdTheme('#fee', '#4a1c1c')};
+        color: ${cssManager.bdTheme('#e74c3c', '#ff6b6b')};
+      }
+
+      .validation-message {
+        font-size: 12px;
+        margin-top: 4px;
+        color: #e74c3c;
+      }
+
+      .drop-hint {
+        text-align: center;
+        padding: 40px 20px;
+        color: ${cssManager.bdTheme('#999', '#666')};
+        font-size: 14px;
+      }
+
+      .drop-hint dees-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+        opacity: 0.3;
+      }
+
+      .image-preview {
+        width: 40px;
+        height: 40px;
+        object-fit: cover;
+        border-radius: 4px;
+      }
+
+      .description-text {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        margin-top: 4px;
+        line-height: 1.4;
       }
     `,
   ];
 
   public render(): TemplateResult {
+    const hasFiles = this.value.length > 0;
+    const showClearAll = hasFiles && this.value.length > 1;
+    
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        ${this.label ? html`
+          <dees-label .label=${this.label}></dees-label>
+        ` : ''}
         <div class="hidden">
-          <input type="file">
+          <input 
+            type="file" 
+            ?multiple=${this.multiple}
+            accept="${this.accept}"
+          >
         </div>
         <div class="maincontainer ${this.state === 'dragOver' ? 'dragOver' : ''}">
-        ${this.value.map(
-          (fileArg) => html`
-          <div class="uploadCandidate" @contextmenu=${eventArg => {
-            DeesContextmenu.openContextMenuWithOptions(eventArg, [{
-              iconName: 'trash',
-              name: 'Remove',
-              action: async () => {
-                this.value.splice(this.value.indexOf(fileArg), 1);
-                this.requestUpdate();
-              }
-            }]);
-          }}>
-            <div class="icon">
-              <dees-icon .iconFA=${'paperclip'}></dees-icon>
+          ${hasFiles ? html`
+            ${showClearAll ? html`
+              <div class="clear-all-button">
+                <button @click=${this.clearAll}>Clear All</button>
+              </div>
+            ` : ''}
+            <div class="files-container">
+              ${this.value.map((fileArg) => {
+                const fileType = this.getFileType(fileArg);
+                const isImage = fileType === 'image';
+                return html`
+                  <div class="uploadCandidate ${fileType}-file">
+                    <div class="icon">
+                      ${isImage && this.canShowPreview(fileArg) ? html`
+                        <img class="image-preview" src="${URL.createObjectURL(fileArg)}" alt="${fileArg.name}">
+                      ` : html`
+                        <dees-icon .iconName=${this.getFileIcon(fileArg)}></dees-icon>
+                      `}
+                    </div>
+                    <div class="info">
+                      <div class="filename" title="${fileArg.name}">${fileArg.name}</div>
+                      <div class="filesize">${this.formatFileSize(fileArg.size)}</div>
+                    </div>
+                    <div class="actions">
+                      <button 
+                        class="remove-button" 
+                        @click=${() => this.removeFile(fileArg)}
+                        title="Remove file"
+                      >
+                        <dees-icon .iconName=${'lucide:x'}></dees-icon>
+                      </button>
+                    </div>
+                  </div>
+                `;
+              })}
             </div>
-            <div class="description">
-              <span style="font-weight: 600">${fileArg.name}</span><br />
-              <span style="font-weight: 400">${fileArg.size}</span>
+          ` : html`
+            <div class="drop-hint">
+              <dees-icon .iconName=${'lucide:cloud-upload'}></dees-icon>
+              <div>Drag files here or click to browse</div>
             </div>
-          </div> `
-        )}
-        <div class="uploadButton" @click=${
-          this.openFileSelector
-        }>
-          ${this.buttonText}
+          `}
+          <div class="uploadButton" @click=${this.openFileSelector}>
+            <dees-icon .iconName=${'lucide:upload'}></dees-icon>
+            ${this.buttonText}
+          </div>
         </div>
-      </div>
+        ${this.description ? html`
+          <div class="description-text">${this.description}</div>
+        ` : ''}
+        ${this.validationState === 'invalid' && this.validationMessage ? html`
+          <div class="validation-message">${this.validationMessage}</div>
+        ` : ''}
       </div>
     `;
   }
 
+  private validationMessage: string = '';
+
+  // Utility methods
+  private formatFileSize(bytes: number): string {
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    if (bytes === 0) return '0 Bytes';
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
+  }
+
+  private getFileType(file: File): string {
+    const type = file.type.toLowerCase();
+    if (type.startsWith('image/')) return 'image';
+    if (type === 'application/pdf') return 'pdf';
+    if (type.includes('word') || type.includes('document')) return 'doc';
+    if (type.includes('sheet') || type.includes('excel')) return 'spreadsheet';
+    if (type.includes('presentation') || type.includes('powerpoint')) return 'presentation';
+    if (type.startsWith('video/')) return 'video';
+    if (type.startsWith('audio/')) return 'audio';
+    if (type.includes('zip') || type.includes('compressed')) return 'archive';
+    return 'file';
+  }
+
+  private getFileIcon(file: File): string {
+    const type = this.getFileType(file);
+    const iconMap = {
+      'image': 'lucide:image',
+      'pdf': 'lucide:file-text',
+      'doc': 'lucide:file-text',
+      'spreadsheet': 'lucide:table',
+      'presentation': 'lucide:presentation',
+      'video': 'lucide:video',
+      'audio': 'lucide:music',
+      'archive': 'lucide:archive',
+      'file': 'lucide:file'
+    };
+    return iconMap[type] || 'lucide:file';
+  }
+
+  private canShowPreview(file: File): boolean {
+    return file.type.startsWith('image/') && file.size < 5 * 1024 * 1024; // 5MB limit for previews
+  }
+
+  private validateFile(file: File): boolean {
+    // Check file size
+    if (this.maxSize > 0 && file.size > this.maxSize) {
+      this.validationMessage = `File "${file.name}" exceeds maximum size of ${this.formatFileSize(this.maxSize)}`;
+      this.validationState = 'invalid';
+      return false;
+    }
+
+    // Check file type
+    if (this.accept) {
+      const acceptedTypes = this.accept.split(',').map(s => s.trim());
+      let isAccepted = false;
+      
+      for (const acceptType of acceptedTypes) {
+        if (acceptType.startsWith('.')) {
+          // Extension check
+          if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) {
+            isAccepted = true;
+            break;
+          }
+        } else if (acceptType.endsWith('/*')) {
+          // MIME type wildcard check
+          const mimePrefix = acceptType.slice(0, -2);
+          if (file.type.startsWith(mimePrefix)) {
+            isAccepted = true;
+            break;
+          }
+        } else if (file.type === acceptType) {
+          // Exact MIME type check
+          isAccepted = true;
+          break;
+        }
+      }
+      
+      if (!isAccepted) {
+        this.validationMessage = `File type not accepted. Please upload: ${this.accept}`;
+        this.validationState = 'invalid';
+        return false;
+      }
+    }
+
+    return true;
+  }
+
   public async openFileSelector() {
+    if (this.disabled) return;
     const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
     inputFile.click();
-    this.state = 'idle';
-    this.buttonText = 'Upload more files...';
+  }
+
+  private removeFile(file: File) {
+    const index = this.value.indexOf(file);
+    if (index > -1) {
+      this.value.splice(index, 1);
+      this.requestUpdate();
+      this.validate();
+      this.changeSubject.next(this);
+    }
+  }
+
+  private clearAll() {
+    this.value = [];
+    this.requestUpdate();
+    this.validate();
+    this.changeSubject.next(this);
   }
 
   public async updateValue(eventArg: Event) {
@@ -198,52 +512,131 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     super.firstUpdated(_changedProperties);
     const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
-    inputFile.addEventListener('change', (event: Event) => {
+    inputFile.addEventListener('change', async (event: Event) => {
       const target = event.target as HTMLInputElement;
-      for (const file of Array.from(target.files)) {
-        this.value.push(file);
-      }
-      this.requestUpdate();
-      console.log(`Got ${this.value.length} files!`);
+      const newFiles = Array.from(target.files);
+      await this.addFiles(newFiles);
       // Reset the input value to allow selecting the same file again if needed
       target.value = '';
     });
 
-    // lets handle drag and drop
+    // Handle drag and drop
     const dropArea = this.shadowRoot.querySelector('.maincontainer');
-    const handlerFunction = (eventArg: DragEvent) => {
+    const handlerFunction = async (eventArg: DragEvent) => {
       eventArg.preventDefault();
+      eventArg.stopPropagation();
+      
       switch (eventArg.type) {
+        case 'dragenter':
         case 'dragover':
           this.state = 'dragOver';
-          this.buttonText = 'release to upload file...';
           break;
         case 'dragleave':
-          this.state = 'idle';
-          this.buttonText = 'Upload File...';
+          // Check if we're actually leaving the drop area
+          const rect = dropArea.getBoundingClientRect();
+          const x = eventArg.clientX;
+          const y = eventArg.clientY;
+          if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+            this.state = 'idle';
+          }
           break;
         case 'drop':
           this.state = 'idle';
-          this.buttonText = 'Upload more files...';
+          const files = Array.from(eventArg.dataTransfer.files);
+          await this.addFiles(files);
+          break;
       }
-      console.log(eventArg);
-      for (const file of Array.from(eventArg.dataTransfer.files)) {
-        this.value.push(file);
-        this.requestUpdate();
-      }
-      console.log(`Got ${this.value.length} files!`);
     };
+    
     dropArea.addEventListener('dragenter', handlerFunction, false);
     dropArea.addEventListener('dragleave', handlerFunction, false);
     dropArea.addEventListener('dragover', handlerFunction, false);
     dropArea.addEventListener('drop', handlerFunction, false);
   }
 
+  private async addFiles(files: File[]) {
+    const filesToAdd: File[] = [];
+    
+    for (const file of files) {
+      if (this.validateFile(file)) {
+        filesToAdd.push(file);
+      }
+    }
+
+    if (filesToAdd.length === 0) return;
+
+    // Check max files limit
+    if (this.maxFiles > 0) {
+      const totalFiles = this.value.length + filesToAdd.length;
+      if (totalFiles > this.maxFiles) {
+        const allowedCount = this.maxFiles - this.value.length;
+        if (allowedCount <= 0) {
+          this.validationMessage = `Maximum ${this.maxFiles} files allowed`;
+          this.validationState = 'invalid';
+          return;
+        }
+        filesToAdd.splice(allowedCount);
+        this.validationMessage = `Only ${allowedCount} more file(s) can be added`;
+        this.validationState = 'warn';
+      }
+    }
+
+    // Add files
+    if (!this.multiple && filesToAdd.length > 0) {
+      this.value = [filesToAdd[0]];
+    } else {
+      this.value.push(...filesToAdd);
+    }
+
+    this.requestUpdate();
+    this.validate();
+    this.changeSubject.next(this);
+    
+    // Update button text
+    if (this.value.length > 0) {
+      this.buttonText = this.multiple ? 'Add more files' : 'Replace file';
+    }
+  }
+
+  public async validate(): Promise<boolean> {
+    this.validationMessage = '';
+    
+    if (this.required && this.value.length === 0) {
+      this.validationState = 'invalid';
+      this.validationMessage = 'Please select at least one file';
+      return false;
+    }
+    
+    // Validate all files
+    for (const file of this.value) {
+      if (!this.validateFile(file)) {
+        return false;
+      }
+    }
+    
+    this.validationState = 'valid';
+    return true;
+  }
+
   public getValue(): File[] {
     return this.value;
   }
 
   public setValue(value: File[]): void {
     this.value = value;
+    this.requestUpdate();
+    if (value.length > 0) {
+      this.buttonText = this.multiple ? 'Add more files' : 'Replace file';
+    } else {
+      this.buttonText = 'Upload File...';
+    }
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('value')) {
+      this.validate();
+    }
   }
 }

ts_web/elements/dees-input-multitoggle.ts

@@ -10,7 +10,7 @@ import { DeesInputBase } from './dees-input-base.js';
 
 import * as colors from './00colors.js'
 
-const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
+import { demoFunc } from './dees-input-multitoggle.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -0,0 +1,248 @@
+import { html, css } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        
+        dees-panel {
+          margin-bottom: 24px;
+        }
+        
+        dees-panel:last-child {
+          margin-bottom: 0;
+        }
+        
+        .grid-layout {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 16px;
+        }
+        
+        @media (max-width: 768px) {
+          .grid-layout {
+            grid-template-columns: 1fr;
+          }
+        }
+        
+        .output-preview {
+          margin-top: 16px;
+          padding: 16px;
+          background: #f3f4f6;
+          border-radius: 4px;
+          font-size: 12px;
+          color: #374151;
+          word-break: break-all;
+          max-height: 200px;
+          overflow-y: auto;
+        }
+        
+        @media (prefers-color-scheme: dark) {
+          .output-preview {
+            background: #2c2c2c;
+            color: #e4e4e7;
+          }
+        }
+        
+        .tag-preview {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          padding: 12px;
+          background: #f9fafb;
+          border-radius: 4px;
+          min-height: 40px;
+          align-items: center;
+        }
+        
+        @media (prefers-color-scheme: dark) {
+          .tag-preview {
+            background: #1f2937;
+          }
+        }
+        
+        .tag-preview-item {
+          display: inline-block;
+          padding: 4px 12px;
+          background: #e0e7ff;
+          color: #4338ca;
+          border-radius: 12px;
+          font-size: 14px;
+        }
+        
+        @media (prefers-color-scheme: dark) {
+          .tag-preview-item {
+            background: #312e81;
+            color: #c7d2fe;
+          }
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-panel .title=${'1. Basic Tags Input'} .subtitle=${'Simple tag input with common programming languages'}>
+        <dees-input-tags
+          .label=${'Programming Languages'}
+          .placeholder=${'Add a language...'}
+          .value=${['JavaScript', 'TypeScript', 'Python', 'Go']}
+          .description=${'Press Enter or comma to add tags'}
+        ></dees-input-tags>
+      </dees-panel>
+
+      <dees-panel .title=${'2. Tags with Suggestions'} .subtitle=${'Auto-complete suggestions for faster input'}>
+        <dees-input-tags
+          .label=${'Tech Stack'}
+          .placeholder=${'Type to see suggestions...'}
+          .suggestions=${[
+            'React', 'Vue', 'Angular', 'Svelte', 'Lit', 'Next.js', 'Nuxt', 'SvelteKit',
+            'Node.js', 'Deno', 'Bun', 'Express', 'Fastify', 'Nest.js', 'Koa',
+            'MongoDB', 'PostgreSQL', 'Redis', 'MySQL', 'SQLite', 'Cassandra',
+            'Docker', 'Kubernetes', 'AWS', 'Azure', 'GCP', 'Vercel', 'Netlify'
+          ]}
+          .value=${['React', 'Node.js', 'PostgreSQL', 'Docker']}
+          .description=${'Start typing to see suggestions from popular technologies'}
+        ></dees-input-tags>
+      </dees-panel>
+
+      <dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
+        <div class="grid-layout">
+          <dees-input-tags
+            .label=${'Top 3 Skills'}
+            .placeholder=${'Add up to 3 skills...'}
+            .maxTags=${3}
+            .value=${['Design', 'Development']}
+            .description=${'Maximum 3 tags allowed'}
+          ></dees-input-tags>
+          
+          <dees-input-tags
+            .label=${'Categories (Max 5)'}
+            .placeholder=${'Select categories...'}
+            .maxTags=${5}
+            .suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
+            .value=${['Tutorial', 'Guide']}
+            .description=${'Choose up to 5 categories'}
+          ></dees-input-tags>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'4. Required & Validation'} .subtitle=${'Tags input with validation requirements'}>
+        <dees-input-tags
+          .label=${'Project Tags'}
+          .placeholder=${'Add at least one tag...'}
+          .required=${true}
+          .description=${'This field is required - add at least one tag'}
+        ></dees-input-tags>
+      </dees-panel>
+
+      <dees-panel .title=${'5. Disabled State'} .subtitle=${'Read-only tags display'}>
+        <dees-input-tags
+          .label=${'System Tags'}
+          .value=${['System', 'Protected', 'Read-Only', 'Archive']}
+          .disabled=${true}
+          .description=${'These tags cannot be modified'}
+        ></dees-input-tags>
+      </dees-panel>
+
+      <dees-panel .title=${'6. Form Integration'} .subtitle=${'Tags input working within a form context'}>
+        <dees-form>
+          <dees-input-text
+            .label=${'Project Name'}
+            .placeholder=${'My Awesome Project'}
+            .required=${true}
+            .key=${'name'}
+          ></dees-input-text>
+          
+          <div class="grid-layout">
+            <dees-input-tags
+              .label=${'Technologies Used'}
+              .placeholder=${'Add technologies...'}
+              .required=${true}
+              .key=${'technologies'}
+              .suggestions=${[
+                'TypeScript', 'JavaScript', 'Python', 'Go', 'Rust',
+                'React', 'Vue', 'Angular', 'Svelte',
+                'Node.js', 'Deno', 'Express', 'FastAPI'
+              ]}
+            ></dees-input-tags>
+            
+            <dees-input-tags
+              .label=${'Project Tags'}
+              .placeholder=${'Add descriptive tags...'}
+              .key=${'tags'}
+              .maxTags=${10}
+              .suggestions=${[
+                'frontend', 'backend', 'fullstack', 'mobile', 'desktop',
+                'web', 'api', 'database', 'devops', 'ui/ux',
+                'opensource', 'saas', 'enterprise', 'startup'
+              ]}
+            ></dees-input-tags>
+          </div>
+          
+          <dees-input-text
+            .label=${'Description'}
+            .inputType=${'textarea'}
+            .placeholder=${'Describe your project...'}
+            .key=${'description'}
+          ></dees-input-text>
+          
+          <dees-form-submit .text=${'Create Project'}></dees-form-submit>
+        </dees-form>
+      </dees-panel>
+
+      <dees-panel .title=${'7. Interactive Demo'} .subtitle=${'Add tags and see them collected in real-time'}>
+        <dees-input-tags
+          id="interactive-tags"
+          .label=${'Your Interests'}
+          .placeholder=${'Type your interests...'}
+          .suggestions=${[
+            'Music', 'Movies', 'Books', 'Travel', 'Photography',
+            'Cooking', 'Gaming', 'Sports', 'Art', 'Technology',
+            'Fashion', 'Fitness', 'Nature', 'Science', 'History'
+          ]}
+          @change=${(e: CustomEvent) => {
+            const preview = document.querySelector('#tags-preview');
+            const tags = e.detail.value;
+            if (preview) {
+              if (tags.length === 0) {
+                preview.innerHTML = '<em style="color: #999;">No tags added yet...</em>';
+              } else {
+                preview.innerHTML = tags.map((tag: string) => 
+                  `<span class="tag-preview-item">${tag}</span>`
+                ).join('');
+              }
+            }
+          }}
+        ></dees-input-tags>
+        
+        <div class="tag-preview" id="tags-preview">
+          <em style="color: #999;">No tags added yet...</em>
+        </div>
+        
+        <div class="output-preview" id="tags-json">
+          <em>JSON output will appear here...</em>
+        </div>
+        
+        <script>
+          // Update JSON preview
+          const tagsInput = document.querySelector('#interactive-tags');
+          tagsInput?.addEventListener('change', (e) => {
+            const jsonPreview = document.querySelector('#tags-json');
+            if (jsonPreview) {
+              jsonPreview.textContent = JSON.stringify(e.detail.value, null, 2);
+            }
+          });
+        </script>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

ts_web/elements/dees-input-tags.ts

@@ -0,0 +1,401 @@
+import {
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { DeesInputBase } from './dees-input-base.js';
+import './dees-icon.js';
+import { demoFunc } from './dees-input-tags.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-tags': DeesInputTags;
+  }
+}
+
+@customElement('dees-input-tags')
+export class DeesInputTags extends DeesInputBase<DeesInputTags> {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @property({ type: Array })
+  public value: string[] = [];
+
+  @property({ type: String })
+  public placeholder: string = 'Add tags...';
+
+  @property({ type: Number })
+  public maxTags: number = 0; // 0 means unlimited
+
+  @property({ type: Array })
+  public suggestions: string[] = [];
+
+  @state()
+  private inputValue: string = '';
+
+  @state()
+  private showSuggestions: boolean = false;
+
+  @state()
+  private highlightedSuggestionIndex: number = -1;
+
+  @property({ type: String })
+  public validationText: string = '';
+
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: 'Geist Sans', sans-serif;
+      }
+
+      .input-wrapper {
+        width: 100%;
+      }
+
+      .tags-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        min-height: 40px;
+        background: ${cssManager.bdTheme('#fafafa', '#222222')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333333')};
+        border-radius: 8px;
+        transition: all 0.2s ease;
+        cursor: text;
+      }
+
+      .tags-container:focus-within {
+        border-color: ${cssManager.bdTheme('#0069f2', '#0084ff')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(0, 105, 242, 0.1)', 'rgba(0, 132, 255, 0.2)')};
+      }
+
+      .tags-container.disabled {
+        background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+
+      .tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 8px;
+        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
+        color: ${cssManager.bdTheme('#1976d2', '#90caf9')};
+        border-radius: 16px;
+        font-size: 14px;
+        line-height: 1.2;
+        user-select: none;
+        animation: tagAppear 0.2s ease;
+      }
+
+      @keyframes tagAppear {
+        from {
+          transform: scale(0.8);
+          opacity: 0;
+        }
+        to {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      .tag-remove {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        margin-left: 2px;
+      }
+
+      .tag-remove:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+      }
+
+      .tag-remove dees-icon {
+        width: 12px;
+        height: 12px;
+      }
+
+      .tag-input {
+        flex: 1;
+        min-width: 120px;
+        border: none;
+        background: transparent;
+        outline: none;
+        font-size: 14px;
+        font-family: inherit;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        padding: 4px;
+      }
+
+      .tag-input::placeholder {
+        color: ${cssManager.bdTheme('#999', '#666')};
+      }
+
+      .tag-input:disabled {
+        cursor: not-allowed;
+      }
+
+      /* Suggestions dropdown */
+      .suggestions-container {
+        position: relative;
+      }
+
+      .suggestions-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        margin-top: 4px;
+        background: ${cssManager.bdTheme('#ffffff', '#222222')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333333')};
+        border-radius: 8px;
+        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
+        max-height: 200px;
+        overflow-y: auto;
+        z-index: 1000;
+      }
+
+      .suggestion {
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+
+      .suggestion:hover,
+      .suggestion.highlighted {
+        background: ${cssManager.bdTheme('#f5f5f5', '#333333')};
+      }
+
+      .suggestion.highlighted {
+        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
+      }
+
+      /* Validation styles */
+      .validation-message {
+        color: #d32f2f;
+        font-size: 12px;
+        margin-top: 4px;
+        min-height: 16px;
+      }
+
+      /* Description styles */
+      .description {
+        color: ${cssManager.bdTheme('#666', '#999')};
+        font-size: 12px;
+        margin-top: 4px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const filteredSuggestions = this.suggestions.filter(
+      suggestion => 
+        !this.value.includes(suggestion) &&
+        suggestion.toLowerCase().includes(this.inputValue.toLowerCase())
+    );
+
+    return html`
+      <div class="input-wrapper">
+        ${this.label ? html`<dees-label .label=${this.label} .required=${this.required}></dees-label>` : ''}
+        
+        <div class="suggestions-container">
+          <div
+            class="tags-container ${this.disabled ? 'disabled' : ''}"
+            @click=${this.handleContainerClick}
+          >
+            ${this.value.map(tag => html`
+              <div class="tag">
+                <span>${tag}</span>
+                ${!this.disabled ? html`
+                  <div class="tag-remove" @click=${(e: Event) => this.removeTag(e, tag)}>
+                    <dees-icon .icon=${'lucide:x'}></dees-icon>
+                  </div>
+                ` : ''}
+              </div>
+            `)}
+            
+            ${!this.disabled && (!this.maxTags || this.value.length < this.maxTags) ? html`
+              <input
+                type="text"
+                class="tag-input"
+                .placeholder=${this.placeholder}
+                .value=${this.inputValue}
+                @input=${this.handleInput}
+                @keydown=${this.handleKeyDown}
+                @focus=${this.handleFocus}
+                @blur=${this.handleBlur}
+                ?disabled=${this.disabled}
+              />
+            ` : ''}
+          </div>
+
+          ${this.showSuggestions && filteredSuggestions.length > 0 ? html`
+            <div class="suggestions-dropdown">
+              ${filteredSuggestions.map((suggestion, index) => html`
+                <div
+                  class="suggestion ${index === this.highlightedSuggestionIndex ? 'highlighted' : ''}"
+                  @mousedown=${(e: Event) => {
+                    e.preventDefault(); // Prevent blur
+                    this.addTag(suggestion);
+                  }}
+                  @mouseenter=${() => this.highlightedSuggestionIndex = index}
+                >
+                  ${suggestion}
+                </div>
+              `)}
+            </div>
+          ` : ''}
+        </div>
+
+        ${this.validationText ? html`
+          <div class="validation-message">${this.validationText}</div>
+        ` : ''}
+        
+        ${this.description ? html`
+          <div class="description">${this.description}</div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private handleContainerClick(e: Event) {
+    if (this.disabled) return;
+    
+    const input = this.shadowRoot?.querySelector('.tag-input') as HTMLInputElement;
+    if (input && e.target !== input) {
+      input.focus();
+    }
+  }
+
+  private handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.inputValue = input.value;
+    
+    // Check for comma or semicolon to add tag
+    if (this.inputValue.includes(',') || this.inputValue.includes(';')) {
+      const tag = this.inputValue.replace(/[,;]/g, '').trim();
+      if (tag) {
+        this.addTag(tag);
+      }
+    }
+  }
+
+  private handleKeyDown(e: KeyboardEvent) {
+    const input = e.target as HTMLInputElement;
+    
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (this.highlightedSuggestionIndex >= 0 && this.showSuggestions) {
+        const filteredSuggestions = this.suggestions.filter(
+          suggestion => 
+            !this.value.includes(suggestion) &&
+            suggestion.toLowerCase().includes(this.inputValue.toLowerCase())
+        );
+        if (filteredSuggestions[this.highlightedSuggestionIndex]) {
+          this.addTag(filteredSuggestions[this.highlightedSuggestionIndex]);
+        }
+      } else if (this.inputValue.trim()) {
+        this.addTag(this.inputValue.trim());
+      }
+    } else if (e.key === 'Backspace' && !this.inputValue && this.value.length > 0) {
+      // Remove last tag when backspace is pressed on empty input
+      this.removeTag(e, this.value[this.value.length - 1]);
+    } else if (e.key === 'ArrowDown' && this.showSuggestions) {
+      e.preventDefault();
+      const filteredCount = this.suggestions.filter(
+        s => !this.value.includes(s) && s.toLowerCase().includes(this.inputValue.toLowerCase())
+      ).length;
+      this.highlightedSuggestionIndex = Math.min(
+        this.highlightedSuggestionIndex + 1,
+        filteredCount - 1
+      );
+    } else if (e.key === 'ArrowUp' && this.showSuggestions) {
+      e.preventDefault();
+      this.highlightedSuggestionIndex = Math.max(this.highlightedSuggestionIndex - 1, 0);
+    } else if (e.key === 'Escape') {
+      this.showSuggestions = false;
+      this.highlightedSuggestionIndex = -1;
+    }
+  }
+
+  private handleFocus() {
+    if (this.suggestions.length > 0) {
+      this.showSuggestions = true;
+    }
+  }
+
+  private handleBlur() {
+    // Delay to allow click on suggestions
+    setTimeout(() => {
+      this.showSuggestions = false;
+      this.highlightedSuggestionIndex = -1;
+    }, 200);
+  }
+
+  private addTag(tag: string) {
+    if (!tag || this.value.includes(tag)) return;
+    if (this.maxTags && this.value.length >= this.maxTags) return;
+
+    this.value = [...this.value, tag];
+    this.inputValue = '';
+    this.showSuggestions = false;
+    this.highlightedSuggestionIndex = -1;
+    
+    // Clear the input
+    const input = this.shadowRoot?.querySelector('.tag-input') as HTMLInputElement;
+    if (input) {
+      input.value = '';
+    }
+
+    this.emitChange();
+  }
+
+  private removeTag(e: Event, tag: string) {
+    e.stopPropagation();
+    this.value = this.value.filter(t => t !== tag);
+    this.emitChange();
+  }
+
+  private emitChange() {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+    this.changeSubject.next(this);
+  }
+
+  public getValue(): string[] {
+    return this.value;
+  }
+
+  public setValue(value: string[]): void {
+    this.value = value || [];
+  }
+
+  public async validate(): Promise<boolean> {
+    if (this.required && (!this.value || this.value.length === 0)) {
+      this.validationText = 'At least one tag is required';
+      return false;
+    }
+    this.validationText = '';
+    return true;
+  }
+}

ts_web/elements/dees-input-typelist.ts

@@ -10,7 +10,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesInputBase } from './dees-input-base.js';
 
-const { demoFunc } = await import('./dees-input-typelist.demo.js');
+import { demoFunc }  from './dees-input-typelist.demo.js';
 
 @customElement('dees-input-typelist')
 export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
@@ -35,12 +35,24 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
       }
       .mainbox {
         border-radius: 3px;
-        background: #222;
+        background: ${cssManager.bdTheme('#fafafa', '#222222')};
         overflow: hidden;
-        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
-        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
-        border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
-        border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #222')};
+        border-right: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        border-left: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+        transition: all 0.2s;
+        position: relative;
+      }
+      
+      .mainbox:hover {
+        filter: ${cssManager.bdTheme('brightness(0.98)', 'brightness(1.05)')};
+      }
+      
+      .mainbox:focus-within {
+        outline: 2px solid ${cssManager.bdTheme('#0069f2', '#0084ff')};
+        outline-offset: -2px;
       }
 
       .tags {
@@ -50,14 +62,15 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
 
       .notags {
         text-align: center;
-        opacity: 0.5;
-        font-size: 12px;
+        color: ${cssManager.bdTheme('#999', '#666')};
+        font-size: 13px;
+        font-style: italic;
       }
 
       input {
         display: block;
         box-sizing: border-box;
-        background: #181818;
+        background: ${cssManager.bdTheme('#f5f5f5', '#181818')};
         width: 100%;
         outline: none;
         border: none;
@@ -67,30 +80,68 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
         line-height: 32px;
         height: 0px;
         transition: height 0.2s;
+        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
       }
 
       input:focus {
         height: 32px;
+        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
+      }
+      
+      input::placeholder {
+        color: ${cssManager.bdTheme('#999', '#666')};
       }
 
       .tag {
         display: inline-block;
-        background: ${cssManager.bdTheme('#e0e0e0', '#444')};
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        padding: 4px 8px;
-        border-radius: 3px;
-        margin: 2px;
-        font-size: 12px;
+        background: ${cssManager.bdTheme('#e8f5e9', '#2d3a2d')};
+        color: ${cssManager.bdTheme('#2e7d32', '#81c784')};
+        padding: 4px 10px;
+        border-radius: 4px;
+        margin: 3px;
+        font-size: 13px;
+        font-weight: 500;
+        transition: all 0.2s;
+        border: 1px solid ${cssManager.bdTheme('#c8e6c9', '#1b5e20')};
+      }
+      
+      .tag:hover {
+        background: ${cssManager.bdTheme('#c8e6c9', '#3d4f3d')};
+        transform: translateY(-1px);
       }
 
       .tag .remove {
-        margin-left: 6px;
+        margin-left: 8px;
         cursor: pointer;
-        opacity: 0.6;
+        opacity: 0.7;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 1;
+        transition: opacity 0.2s;
       }
 
       .tag .remove:hover {
         opacity: 1;
+        color: ${cssManager.bdTheme('#c62828', '#ef5350')};
+      }
+      
+      /* Disabled state */
+      :host([disabled]) .mainbox {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+      
+      :host([disabled]) .tags {
+        cursor: not-allowed;
+      }
+      
+      :host([disabled]) .tag {
+        pointer-events: none;
+      }
+      
+      :host([disabled]) input {
+        cursor: not-allowed;
+        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
       }
     `,
   ];

ts_web/elements/dees-mobilenavigation.ts

@@ -1,4 +1,5 @@
 import * as plugins from './00plugins.js';
+import { zIndexLayers } from './00zindex.js';
 import {
   cssManager,
   css,
@@ -83,7 +84,7 @@ export class DeesMobilenavigation extends DeesElement {
         min-width: 280px;
         transform: translateX(200px);
         color: ${cssManager.bdTheme('#333', '#fff')};
-        z-index: 250;
+        z-index: ${zIndexLayers.fixed.mobileNav};
         opacity: 0;
         padding: 16px 32px;
         right: 0px;

ts_web/elements/dees-modal.demo.ts

@@ -1,37 +1,356 @@
-import { html } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 import { DeesModal } from './dees-modal.js';
 
 export const demoFunc = () => html`
-  <dees-button @click=${() => {
-    DeesModal.createAndShow({
-      heading: 'This is a heading',
-      content: html`
-        <dees-form>
-          <dees-input-text
-            .label=${'Username'}
-          >
-          </dees-input-text>
-          <dees-input-text
-            .label=${'Password'}
-          >
-          </dees-input-text>
-        </dees-form>
-      `,
-      menuOptions: [{
-        name: 'Cancel',
-        iconName: null,
-        action: async (deesModalArg) => {
-          deesModalArg.destroy();
-          return null;
-        }
-      }, {
-        name: 'Ok',
-        iconName: null,
-        action: async (deesModalArg) => {
-          deesModalArg.destroy();
-          return null;
-        }
-      }],
-    });
-  }}>open modal</dees-button>
+  <style>
+    ${css`
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding: 24px;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      
+      .demo-section {
+        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
+        border-radius: 8px;
+        padding: 24px;
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+      }
+      
+      .demo-section h3 {
+        margin-top: 0;
+        margin-bottom: 16px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+      
+      .demo-section p {
+        color: ${cssManager.bdTheme('#666', '#999')};
+        margin-bottom: 16px;
+      }
+      
+      .button-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 16px;
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Header Buttons</h3>
+      <p>Modals can have optional header buttons for help and closing.</p>
+      <div class="button-grid">
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'With Help Button',
+            showHelpButton: true,
+            onHelp: async () => {
+              const helpModal = await DeesModal.createAndShow({
+                heading: 'Help',
+                width: 'small',
+                showCloseButton: true,
+                showHelpButton: false,
+                content: html`
+                  <p>This is the help content for the modal.</p>
+                  <p>You can provide context-specific help here.</p>
+                `,
+                menuOptions: [{
+                  name: 'Got it',
+                  action: async (modal) => modal.destroy()
+                }],
+              });
+            },
+            content: html`
+              <p>This modal has a help button in the header. Click it to see help content.</p>
+              <p>The close button is also visible by default.</p>
+            `,
+            menuOptions: [{
+              name: 'OK',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>With Help Button</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'No Close Button',
+            showCloseButton: false,
+            content: html`
+              <p>This modal has no close button in the header.</p>
+              <p>You must use the action buttons or click outside to close it.</p>
+            `,
+            menuOptions: [{
+              name: 'Close',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>No Close Button</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Both Buttons',
+            showHelpButton: true,
+            showCloseButton: true,
+            onHelp: () => alert('Help clicked!'),
+            content: html`
+              <p>This modal has both help and close buttons.</p>
+            `,
+            menuOptions: [{
+              name: 'Done',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Both Buttons</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Clean Header',
+            showCloseButton: false,
+            showHelpButton: false,
+            content: html`
+              <p>This modal has a clean header with no buttons.</p>
+            `,
+            menuOptions: [{
+              name: 'Close',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Clean Header</dees-button>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>Modal Width Variations</h3>
+      <p>Modals can have different widths: small, medium, large, fullscreen, or custom pixel values.</p>
+      <div class="button-grid">
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Small Modal',
+            width: 'small',
+            content: html`
+              <p>This is a small modal with a width of 380px. Perfect for simple confirmations or brief messages.</p>
+            `,
+            menuOptions: [{
+              name: 'Cancel',
+              action: async (modal) => modal.destroy()
+            }, {
+              name: 'OK',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Small Modal</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Medium Modal (Default)',
+            width: 'medium',
+            content: html`
+              <dees-form>
+                <dees-input-text .label=${'Username'}></dees-input-text>
+                <dees-input-text .label=${'Email'} .inputType=${'email'}></dees-input-text>
+                <dees-input-text .label=${'Password'} .inputType=${'password'}></dees-input-text>
+              </dees-form>
+            `,
+            menuOptions: [{
+              name: 'Cancel',
+              action: async (modal) => modal.destroy()
+            }, {
+              name: 'Sign Up',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Medium Modal</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Large Modal',
+            width: 'large',
+            content: html`
+              <h4>Wide Content Area</h4>
+              <p>This large modal is 800px wide and perfect for displaying more complex content like forms with multiple columns, tables, or detailed information.</p>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;">
+                <dees-input-text .label=${'First Name'}></dees-input-text>
+                <dees-input-text .label=${'Last Name'}></dees-input-text>
+                <dees-input-text .label=${'Company'}></dees-input-text>
+                <dees-input-text .label=${'Position'}></dees-input-text>
+              </div>
+            `,
+            menuOptions: [{
+              name: 'Cancel',
+              action: async (modal) => modal.destroy()
+            }, {
+              name: 'Save',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Large Modal</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Fullscreen Editor',
+            width: 'fullscreen',
+            showHelpButton: true,
+            onHelp: async () => {
+              alert('In a real app, this would show editor documentation');
+            },
+            content: html`
+              <h4>Fullscreen Experience with Header Controls</h4>
+              <p>This modal takes up almost the entire viewport with a 20px margin on all sides. The header buttons are particularly useful in fullscreen mode.</p>
+              <p>The content area can be as tall as needed and will scroll if necessary.</p>
+              <div style="height: 200px; background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')}; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 16px;">
+                <span style="color: ${cssManager.bdTheme('#999', '#666')}">Large content area</span>
+              </div>
+            `,
+            menuOptions: [{
+              name: 'Save',
+              action: async (modal) => modal.destroy()
+            }, {
+              name: 'Cancel',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Fullscreen Modal</dees-button>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>Custom Width & Constraints</h3>
+      <p>You can also set custom pixel widths and min/max constraints.</p>
+      <div class="button-grid">
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Custom Width (700px)',
+            width: 700,
+            content: html`
+              <p>This modal has a custom width of exactly 700 pixels.</p>
+            `,
+            menuOptions: [{
+              name: 'Close',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Custom 700px</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'With Max Width',
+            width: 'large',
+            maxWidth: 600,
+            content: html`
+              <p>This modal is set to 'large' but constrained by a maxWidth of 600px.</p>
+            `,
+            menuOptions: [{
+              name: 'Got it',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Max Width 600px</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'With Min Width',
+            width: 300,
+            minWidth: 400,
+            content: html`
+              <p>This modal width is set to 300px but has a minWidth of 400px, so it will be 400px wide.</p>
+            `,
+            menuOptions: [{
+              name: 'OK',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Min Width 400px</dees-button>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>Button Variations</h3>
+      <p>Modals can have different button configurations with proper spacing.</p>
+      <div class="button-grid">
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Multiple Actions',
+            content: html`
+              <p>This modal demonstrates multiple buttons with proper spacing between them.</p>
+            `,
+            menuOptions: [{
+              name: 'Delete',
+              action: async (modal) => modal.destroy()
+            }, {
+              name: 'Cancel',
+              action: async (modal) => modal.destroy()
+            }, {
+              name: 'Save Changes',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Three Buttons</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Single Action',
+            content: html`
+              <p>Sometimes you just need one button.</p>
+            `,
+            menuOptions: [{
+              name: 'Acknowledge',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Single Button</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'No Actions',
+            content: html`
+              <p>This modal has no bottom buttons. Use the X button or click outside to close.</p>
+              <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')};">This is useful for informational modals that don't require user action.</p>
+            `,
+            menuOptions: [],
+          });
+        }}>No Buttons</dees-button>
+        
+        <dees-button @click=${() => {
+          DeesModal.createAndShow({
+            heading: 'Long Button Labels',
+            content: html`
+              <p>Testing button layout with longer labels.</p>
+            `,
+            menuOptions: [{
+              name: 'Discard All Changes',
+              action: async (modal) => modal.destroy()
+            }, {
+              name: 'Save and Continue Editing',
+              action: async (modal) => modal.destroy()
+            }],
+          });
+        }}>Long Labels</dees-button>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>Responsive Behavior</h3>
+      <p>All modals automatically become full-width on mobile devices (< 768px viewport width) for better usability.</p>
+      <dees-button @click=${() => {
+        DeesModal.createAndShow({
+          heading: 'Responsive Modal',
+          width: 'large',
+          showHelpButton: true,
+          onHelp: () => console.log('Help requested for responsive modal'),
+          content: html`
+            <p>Resize your browser window to see how this modal adapts. On mobile viewports, it will automatically take the full width minus margins.</p>
+            <p>The header buttons remain accessible at all viewport sizes.</p>
+          `,
+          menuOptions: [{
+            name: 'Close',
+            action: async (modal) => modal.destroy()
+          }],
+        });
+      }}>Test Responsive</dees-button>
+    </div>
+  </div>
 `

ts_web/elements/dees-modal.ts

@@ -1,5 +1,6 @@
 import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
+import { zIndexLayers, zIndexRegistry } from './00zindex.js';
 
 import { demoFunc } from './dees-modal.demo.js';
 import {
@@ -18,6 +19,7 @@ import {
 
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesWindowLayer } from './dees-windowlayer.js';
+import './dees-icon.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -34,12 +36,26 @@ export class DeesModal extends DeesElement {
     heading: string;
     content: TemplateResult;
     menuOptions: plugins.tsclass.website.IMenuItem<DeesModal>[];
+    width?: 'small' | 'medium' | 'large' | 'fullscreen' | number;
+    maxWidth?: number;
+    minWidth?: number;
+    showCloseButton?: boolean;
+    showHelpButton?: boolean;
+    onHelp?: () => void | Promise<void>;
+    mobileFullscreen?: boolean;
   }) {
     const body = document.body;
     const modal = new DeesModal();
     modal.heading = optionsArg.heading;
     modal.content = optionsArg.content;
     modal.menuOptions = optionsArg.menuOptions;
+    if (optionsArg.width) modal.width = optionsArg.width;
+    if (optionsArg.maxWidth) modal.maxWidth = optionsArg.maxWidth;
+    if (optionsArg.minWidth) modal.minWidth = optionsArg.minWidth;
+    if (optionsArg.showCloseButton !== undefined) modal.showCloseButton = optionsArg.showCloseButton;
+    if (optionsArg.showHelpButton !== undefined) modal.showHelpButton = optionsArg.showHelpButton;
+    if (optionsArg.onHelp) modal.onHelp = optionsArg.onHelp;
+    if (optionsArg.mobileFullscreen !== undefined) modal.mobileFullscreen = optionsArg.mobileFullscreen;
     modal.windowLayer = await DeesWindowLayer.createAndShow({
       blur: true,
     });
@@ -48,6 +64,12 @@ 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;
   }
 
   // INSTANCE
@@ -63,6 +85,30 @@ export class DeesModal extends DeesElement {
   @state({})
   public menuOptions: plugins.tsclass.website.IMenuItem<DeesModal>[] = [];
 
+  @property({ type: String })
+  public width: 'small' | 'medium' | 'large' | 'fullscreen' | number = 'medium';
+
+  @property({ type: Number })
+  public maxWidth: number;
+
+  @property({ type: Number })
+  public minWidth: number;
+
+  @property({ type: Boolean })
+  public showCloseButton: boolean = true;
+
+  @property({ type: Boolean })
+  public showHelpButton: boolean = false;
+
+  @property({ attribute: false })
+  public onHelp: () => void | Promise<void>;
+  
+  @property({ type: Boolean })
+  public mobileFullscreen: boolean = false;
+  
+  @state()
+  private modalZIndex: number = 1000;
+
   constructor() {
     super();
   }
@@ -85,20 +131,68 @@ export class DeesModal extends DeesElement {
         box-sizing: border-box;
         align-items: center;
         justify-content: center;
-        z-index: 2000;
       }
       .modal {
         will-change: transform;
         transform: translateY(0px) scale(0.95);
         opacity: 0;
-        width: 480px;
         min-height: 120px;
+        max-height: calc(100vh - 40px);
         background: ${cssManager.bdTheme('#ffffff', '#111')};
         border-radius: 8px;
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
         transition: all 0.2s;
         overflow: hidden;
         box-shadow: ${cssManager.bdTheme('0px 2px 10px rgba(0, 0, 0, 0.1)', '0px 2px 5px rgba(0, 0, 0, 0.5)')};
+        margin: 20px;
+        display: flex;
+        flex-direction: column;
+        overscroll-behavior: contain;
+      }
+
+      /* Width variations */
+      .modal.width-small {
+        width: 380px;
+      }
+
+      .modal.width-medium {
+        width: 560px;
+      }
+
+      .modal.width-large {
+        width: 800px;
+      }
+
+      .modal.width-fullscreen {
+        width: calc(100vw - 40px);
+        height: calc(100vh - 40px);
+        max-height: calc(100vh - 40px);
+      }
+
+      @media (max-width: 768px) {
+        .modal {
+          width: calc(100vw - 40px) !important;
+          max-width: none !important;
+        }
+        
+        /* Allow full height on mobile when content needs it */
+        .modalContainer {
+          padding: 10px;
+        }
+        
+        .modal {
+          margin: 10px;
+          max-height: calc(100vh - 20px);
+        }
+        
+        /* Full screen mode on mobile */
+        .modal.mobile-fullscreen {
+          width: 100vw !important;
+          height: 100vh !important;
+          max-height: 100vh !important;
+          margin: 0;
+          border-radius: 0;
+        }
       }
 
       .modal.show {
@@ -112,43 +206,94 @@ export class DeesModal extends DeesElement {
       }
 
       .modal .heading {
-        height: 32px;
+        height: 40px;
+        min-height: 40px;
         font-family: 'Geist Sans', sans-serif;
-        line-height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      .modal .heading .header-buttons {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .modal .heading .header-button {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s;
+        background: transparent;
+        color: ${cssManager.bdTheme('#666', '#999')};
+      }
+
+      .modal .heading .header-button:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')};
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+
+      .modal .heading .header-button:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)')};
+      }
+
+      .modal .heading .header-button dees-icon {
+        width: 16px;
+        height: 16px;
+        display: block;
+      }
+
+      .modal .heading .heading-text {
+        flex: 1;
         text-align: center;
         font-weight: 600;
-        font-size: 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        font-size: 14px;
+        line-height: 40px;
+        padding: 0 40px;
       }
 
       .modal .content {
         padding: 16px;
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        overscroll-behavior: contain;
       }
       .modal .bottomButtons {
         display: flex;
         flex-direction: row;
         border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
         justify-content: flex-end;
+        gap: 8px;
+        padding: 8px;
+        flex-shrink: 0;
       }
 
       .modal .bottomButtons .bottomButton {
-        margin: 8px 0px;
-        padding: 8px 12px;
-        border-radius: 4px;
+        padding: 8px 16px;
+        border-radius: 6px;
         line-height: 16px;
         text-align: center;
         font-size: 14px;
+        font-weight: 500;
         cursor: pointer;
         user-select: none;
         transition: all 0.2s;
         background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
-      }
-
-      .modal .bottomButtons .bottomButton:first-child {
-        margin-left: 8px;
-      }
-      .modal .bottomButtons .bottomButton:last-child {
-        margin-right: 8px;
+        white-space: nowrap;
       }
 
       .modal .bottomButtons .bottomButton:hover {
@@ -177,25 +322,47 @@ export class DeesModal extends DeesElement {
   ];
 
   public render(): TemplateResult {
+    const widthClass = typeof this.width === 'string' ? `width-${this.width}` : '';
+    const customWidth = typeof this.width === 'number' ? `${this.width}px` : '';
+    const maxWidthStyle = this.maxWidth ? `${this.maxWidth}px` : '';
+    const minWidthStyle = this.minWidth ? `${this.minWidth}px` : '';
+    const mobileFullscreenClass = this.mobileFullscreen ? 'mobile-fullscreen' : '';
+
     return html`
       <style>
-        .modal .bottomButtons {
-          grid-template-columns: ${cssManager.cssGridColumns(this.menuOptions.length, 0)};
-        }
+        ${customWidth ? `.modal { width: ${customWidth}; }` : ''}
+        ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''}
+        ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
       </style>
-      <div class="modalContainer" @click=${this.handleOutsideClick}>
-        <div class="modal">
-          <div class="heading">${this.heading}</div>
-          <div class="content">${this.content}</div>
-          <div class="bottomButtons">
-            ${this.menuOptions.map(
-              (actionArg, index) => html`
-                <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
-                  actionArg.action(this);
-                }}>${actionArg.name}</div>
-              `
-            )}
+      <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
+        <div class="modal ${widthClass} ${mobileFullscreenClass}">
+          <div class="heading">
+            <div class="heading-text">${this.heading}</div>
+            <div class="header-buttons">
+              ${this.showHelpButton ? html`
+                <div class="header-button" @click=${this.handleHelp} title="Help">
+                  <dees-icon .icon=${'lucide:helpCircle'}></dees-icon>
+                </div>
+              ` : ''}
+              ${this.showCloseButton ? html`
+                <div class="header-button" @click=${() => this.destroy()} title="Close">
+                  <dees-icon .icon=${'lucide:x'}></dees-icon>
+                </div>
+              ` : ''}
+            </div>
           </div>
+          <div class="content">${this.content}</div>
+          ${this.menuOptions.length > 0 ? html`
+            <div class="bottomButtons">
+              ${this.menuOptions.map(
+                (actionArg, index) => html`
+                  <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
+                    actionArg.action(this);
+                  }}>${actionArg.name}</div>
+                `
+              )}
+            </div>
+          ` : ''}
         </div>
       </div>
     `;
@@ -225,5 +392,14 @@ 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() {
+    if (this.onHelp) {
+      await this.onHelp();
+    }
   }
 }

ts_web/elements/dees-panel.ts

@@ -30,28 +30,30 @@ export class DeesPanel extends DeesElement {
     css`
       :host {
         display: block;
-        background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
         border-radius: 8px;
         padding: 24px;
-        box-shadow: 0 2px 4px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
-        border: 1px solid ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
       }
 
       .title {
-        margin: 0 0 16px 0;
+        margin: 0 0 8px 0;
         font-size: 18px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#0069f2', '#0099ff')};
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        letter-spacing: -0.025em;
       }
 
       .subtitle {
-        margin: -12px 0 16px 0;
+        margin: 0 0 16px 0;
         font-size: 14px;
-        color: ${cssManager.bdTheme('#666', '#999')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        letter-spacing: -0.01em;
       }
 
       .content {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
       }
 
       /* Remove margins from first and last children */

ts_web/elements/dees-statsgrid.demo.ts

@@ -1,389 +1,518 @@
-import { html, cssManager } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
 import type { IStatsTile } from './dees-statsgrid.js';
 
 export const demoFunc = () => {
-  // Demo data with different tile types
-  const demoTiles: IStatsTile[] = [
-    {
-      id: 'revenue',
-      title: 'Total Revenue',
-      value: 125420,
-      unit: '$',
-      type: 'number',
-      icon: 'faDollarSign',
-      description: '+12.5% from last month',
-      color: '#22c55e',
-      actions: [
-        {
-          name: 'View Details',
-          iconName: 'faChartLine',
-          action: async () => {
-            console.log('Viewing revenue details for tile:', 'revenue');
-            console.log('Current value:', 125420);
-            alert(`Revenue Details: $125,420 (+12.5%)`);
-          }
-        },
-        {
-          name: 'Export Data',
-          iconName: 'faFileExport',
-          action: async () => {
-            console.log('Exporting revenue data');
-            alert('Revenue data exported to CSV');
-          }
-        }
-      ]
-    },
-    {
-      id: 'users',
-      title: 'Active Users',
-      value: 3847,
-      type: 'number',
-      icon: 'faUsers',
-      description: '324 new this week',
-      actions: [
-        {
-          name: 'View User List',
-          iconName: 'faList',
-          action: async () => {
-            console.log('Viewing user list');
-          }
-        }
-      ]
-    },
-    {
-      id: 'cpu',
-      title: 'CPU Usage',
-      value: 73,
-      type: 'gauge',
-      icon: 'faMicrochip',
-      gaugeOptions: {
-        min: 0,
-        max: 100,
-        thresholds: [
-          { value: 0, color: '#22c55e' },
-          { value: 60, color: '#f59e0b' },
-          { value: 80, color: '#ef4444' }
-        ]
-      }
-    },
-    {
-      id: 'storage',
-      title: 'Storage Used',
-      value: 65,
-      type: 'percentage',
-      icon: 'faHardDrive',
-      description: '650 GB of 1 TB',
-      color: '#3b82f6'
-    },
-    {
-      id: 'memory',
-      title: 'Memory Usage',
-      value: 45,
-      type: 'gauge',
-      icon: 'faMemory',
-      gaugeOptions: {
-        min: 0,
-        max: 100,
-        thresholds: [
-          { value: 0, color: '#22c55e' },
-          { value: 70, color: '#f59e0b' },
-          { value: 90, color: '#ef4444' }
-        ]
-      }
-    },
-    {
-      id: 'requests',
-      title: 'API Requests',
-      value: '1.2k',
-      unit: '/min',
-      type: 'trend',
-      icon: 'faServer',
-      trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
-    },
-    {
-      id: 'uptime',
-      title: 'System Uptime',
-      value: '99.95%',
-      type: 'text',
-      icon: 'faCheckCircle',
-      color: '#22c55e',
-      description: 'Last 30 days'
-    },
-    {
-      id: 'latency',
-      title: 'Response Time',
-      value: 142,
-      unit: 'ms',
-      type: 'trend',
-      icon: 'faClock',
-      trendData: [150, 145, 148, 142, 138, 140, 135, 145, 142],
-      description: 'P95 latency'
-    },
-    {
-      id: 'errors',
-      title: 'Error Rate',
-      value: 0.03,
-      unit: '%',
-      type: 'number',
-      icon: 'faExclamationTriangle',
-      color: '#ef4444',
-      actions: [
-        {
-          name: 'View Error Logs',
-          iconName: 'faFileAlt',
-          action: async () => {
-            console.log('Viewing error logs');
-          }
-        }
-      ]
-    }
-  ];
-
-  // Grid actions for the demo
-  const gridActions = [
-    {
-      name: 'Refresh',
-      iconName: 'faSync',
-      action: async () => {
-        console.log('Refreshing stats...');
-        // Simulate refresh animation
-        const grid = document.querySelector('dees-statsgrid');
-        if (grid) {
-          grid.style.opacity = '0.5';
-          setTimeout(() => {
-            grid.style.opacity = '1';
-          }, 500);
-        }
-      }
-    },
-    {
-      name: 'Export Report',
-      iconName: 'faFileExport',
-      action: async () => {
-        console.log('Exporting stats report...');
-      }
-    },
-    {
-      name: 'Settings',
-      iconName: 'faCog',
-      action: async () => {
-        console.log('Opening settings...');
-      }
-    }
-  ];
-
   return html`
+  <dees-demowrapper>
     <style>
-      .demo-container {
-        padding: 32px;
-        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
-        min-height: 100vh;
-      }
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1400px;
+          margin: 0 auto;
+        }
         
-      .demo-section {
-        margin-bottom: 48px;
-      }
+        dees-panel {
+          margin-bottom: 24px;
+        }
         
-      .demo-title {
-        font-size: 24px;
-        font-weight: 600;
-        margin-bottom: 16px;
-        color: ${cssManager.bdTheme('#333', '#fff')};
-      }
+        dees-panel:last-child {
+          margin-bottom: 0;
+        }
         
-      .demo-description {
-        font-size: 14px;
-        color: ${cssManager.bdTheme('#666', '#aaa')};
-        margin-bottom: 24px;
-      }
+        .tile-config {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+          gap: 16px;
+          margin-top: 16px;
+        }
         
-      .theme-toggle {
-        position: fixed;
-        top: 16px;
-        right: 16px;
-        padding: 8px 16px;
-        background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
-        border-radius: 8px;
-        cursor: pointer;
-        z-index: 100;
-      }
+        .config-section {
+          padding: 16px;
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+        }
+        
+        .config-title {
+          font-size: 14px;
+          font-weight: 600;
+          margin-bottom: 8px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        }
+        
+        .config-description {
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        }
+        
+        .code-block {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+          padding: 16px;
+          font-family: monospace;
+          font-size: 13px;
+          overflow-x: auto;
+          white-space: pre;
+        }
+      `}
     </style>
     
     <div class="demo-container">
-      <button class="theme-toggle" @click=${() => {
-        document.body.classList.toggle('bright');
-      }}>Toggle Theme</button>
-
-      <div class="demo-section">
-        <h2 class="demo-title">Full Featured Stats Grid</h2>
-        <p class="demo-description">
-          A comprehensive dashboard with various tile types, actions, and real-time updates.
-        </p>
-        <dees-statsgrid
-          .tiles=${demoTiles}
-          .gridActions=${gridActions}
-          .minTileWidth=${250}
-          .gap=${16}
-        ></dees-statsgrid>
-      </div>
-
-      <div class="demo-section">
-        <h2 class="demo-title">Compact Grid (Smaller Tiles)</h2>
-        <p class="demo-description">
-          Same data displayed with smaller minimum tile width for more compact layouts.
-        </p>
-        <dees-statsgrid
-          .tiles=${demoTiles.slice(0, 6)}
-          .minTileWidth=${180}
-          .gap=${12}
-        ></dees-statsgrid>
-      </div>
-
-      <div class="demo-section">
-        <h2 class="demo-title">Simple Metrics (No Actions)</h2>
-        <p class="demo-description">
-          Clean display without interactive elements for pure visualization.
-        </p>
+      <dees-panel .title=${'1. Comprehensive Dashboard'} .subtitle=${'Full-featured stats grid with various tile types, actions, and Lucide icons'}>
         <dees-statsgrid
           .tiles=${[
             {
-              id: 'metric1',
-              title: 'Total Sales',
-              value: 48293,
-              type: 'number',
-              icon: 'faShoppingCart'
-            },
-            {
-              id: 'metric2',
-              title: 'Conversion Rate',
-              value: 3.4,
-              unit: '%',
-              type: 'number',
-              icon: 'faChartLine'
-            },
-            {
-              id: 'metric3',
-              title: 'Avg Order Value',
-              value: 127.50,
+              id: 'revenue',
+              title: 'Total Revenue',
+              value: 125420,
               unit: '$',
               type: 'number',
-              icon: 'faReceipt'
+              icon: 'lucide:dollar-sign',
+              description: '+12.5% from last month',
+              actions: [
+                {
+                  name: 'View Details',
+                  iconName: 'lucide:trending-up',
+                  action: async () => {
+                    const output = document.querySelector('#action-output');
+                    if (output) {
+                      output.textContent = 'Viewing revenue details: $125,420 (+12.5%)';
+                    }
+                  }
+                },
+                {
+                  name: 'Export Data',
+                  iconName: 'lucide:download',
+                  action: async () => {
+                    const output = document.querySelector('#action-output');
+                    if (output) {
+                      output.textContent = 'Exporting revenue data to CSV...';
+                    }
+                  }
+                }
+              ]
             },
             {
-              id: 'metric4',
-              title: 'Customer Satisfaction',
-              value: 92,
-              type: 'percentage',
-              icon: 'faSmile',
-              color: '#22c55e'
-            }
-          ]}
-          .minTileWidth=${220}
-          .gap=${16}
-        ></dees-statsgrid>
-      </div>
-
-      <div class="demo-section">
-        <h2 class="demo-title">Performance Monitoring</h2>
-        <p class="demo-description">
-          Real-time performance metrics with gauge visualizations and thresholds.
-        </p>
-        <dees-statsgrid
-          .tiles=${[
+              id: 'users',
+              title: 'Active Users',
+              value: 3847,
+              type: 'number',
+              icon: 'lucide:users',
+              description: '324 new this week',
+              actions: [
+                {
+                  name: 'View User List',
+                  iconName: 'lucide:list',
+                  action: async () => {
+                    const output = document.querySelector('#action-output');
+                    if (output) {
+                      output.textContent = 'Opening user list...';
+                    }
+                  }
+                }
+              ]
+            },
             {
-              id: 'perf1',
-              title: 'Database Load',
-              value: 42,
+              id: 'cpu',
+              title: 'CPU Usage',
+              value: 73,
+              unit: '%',
               type: 'gauge',
-              icon: 'faDatabase',
+              icon: 'lucide:cpu',
               gaugeOptions: {
                 min: 0,
                 max: 100,
                 thresholds: [
-                  { value: 0, color: '#10b981' },
-                  { value: 50, color: '#f59e0b' },
-                  { value: 75, color: '#ef4444' }
+                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
+                  { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
+                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
                 ]
               }
             },
             {
-              id: 'perf2',
-              title: 'Network I/O',
-              value: 856,
-              unit: 'MB/s',
-              type: 'trend',
-              icon: 'faNetworkWired',
-              trendData: [720, 780, 823, 845, 812, 876, 856]
-            },
-            {
-              id: 'perf3',
-              title: 'Cache Hit Rate',
-              value: 94.2,
+              id: 'storage',
+              title: 'Storage Used',
+              value: 65,
               type: 'percentage',
-              icon: 'faBolt',
-              color: '#3b82f6'
+              icon: 'lucide:hard-drive',
+              description: '650 GB of 1 TB',
             },
             {
-              id: 'perf4',
-              title: 'Active Connections',
-              value: 1428,
-              type: 'number',
-              icon: 'faLink',
-              description: 'Peak: 2,100'
+              id: 'latency',
+              title: 'Response Time',
+              value: 142,
+              unit: 'ms',
+              type: 'trend',
+              icon: 'lucide:activity',
+              trendData: [150, 145, 148, 142, 138, 140, 135, 145, 142],
+              description: 'P95'
+            },
+            {
+              id: 'uptime',
+              title: 'System Uptime',
+              value: '99.95%',
+              type: 'text',
+              icon: 'lucide:check-circle',
+              color: 'hsl(142.1 76.2% 36.3%)',
+              description: 'Last 30 days'
             }
           ]}
           .gridActions=${[
             {
-              name: 'Auto Refresh',
-              iconName: 'faPlay',
+              name: 'Refresh',
+              iconName: 'lucide:refresh-cw',
               action: async () => {
-                console.log('Starting auto refresh...');
+                const grid = document.querySelector('dees-statsgrid');
+                if (grid) {
+                  grid.style.opacity = '0.5';
+                  setTimeout(() => {
+                    grid.style.opacity = '1';
+                  }, 300);
+                }
+              }
+            },
+            {
+              name: 'Export',
+              iconName: 'lucide:share',
+              action: async () => {
+                const output = document.querySelector('#action-output');
+                if (output) {
+                  output.textContent = 'Exporting dashboard report...';
+                }
+              }
+            },
+            {
+              name: 'Settings',
+              iconName: 'lucide:settings',
+              action: async () => {
+                const output = document.querySelector('#action-output');
+                if (output) {
+                  output.textContent = 'Opening dashboard settings...';
+                }
               }
             }
           ]}
+          .minTileWidth=${250}
+          .gap=${16}
+        ></dees-statsgrid>
+        
+        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')}; border-radius: 6px; font-size: 14px; font-family: monospace; color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};">
+          <em>Click on tile actions or grid actions to see the result...</em>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'2. Tile Types'} .subtitle=${'Different visualization types available in the stats grid'}>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'number-example',
+              title: 'Number Tile',
+              value: 42195,
+              unit: '$',
+              type: 'number',
+              icon: 'lucide:hash',
+              description: 'Simple numeric display'
+            },
+            {
+              id: 'gauge-example',
+              title: 'Gauge Tile',
+              value: 68,
+              unit: '%',
+              type: 'gauge',
+              icon: 'lucide:gauge',
+              gaugeOptions: {
+                min: 0,
+                max: 100,
+                thresholds: [
+                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
+                  { value: 50, color: 'hsl(45.4 93.4% 47.5%)' },
+                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
+                ]
+              }
+            },
+            {
+              id: 'percentage-example',
+              title: 'Percentage Tile',
+              value: 78,
+              type: 'percentage',
+              icon: 'lucide:percent',
+              description: 'Progress bar visualization'
+            },
+            {
+              id: 'trend-example',
+              title: 'Trend Tile',
+              value: 892,
+              unit: 'ops/s',
+              type: 'trend',
+              icon: 'lucide:trending-up',
+              trendData: [720, 750, 780, 795, 810, 835, 850, 865, 880, 892],
+              description: 'avg'
+            },
+            {
+              id: 'text-example',
+              title: 'Text Tile',
+              value: 'Operational',
+              type: 'text',
+              icon: 'lucide:info',
+              color: 'hsl(142.1 76.2% 36.3%)',
+              description: 'Status display'
+            }
+          ]}
           .minTileWidth=${280}
+          .gap=${16}
+        ></dees-statsgrid>
+        
+        <div class="tile-config">
+          <div class="config-section">
+            <div class="config-title">Configuration Options</div>
+            <div class="config-description">
+              Each tile type supports different properties:
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>Number:</strong> value, unit, color, description</li>
+                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>
+                <li><strong>Percentage:</strong> value (0-100), color, description</li>
+                <li><strong>Trend:</strong> value, unit, trendData array, description</li>
+                <li><strong>Text:</strong> value (string), color, description</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'3. Grid Configurations'} .subtitle=${'Different layout options and responsive behavior'}>
+        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>
+        <dees-statsgrid
+          .tiles=${[
+            { id: '1', title: 'Orders', value: 156, type: 'number', icon: 'lucide:shopping-cart' },
+            { id: '2', title: 'Revenue', value: 8420, unit: '$', type: 'number', icon: 'lucide:dollar-sign' },
+            { id: '3', title: 'Users', value: 423, type: 'number', icon: 'lucide:users' },
+            { id: '4', title: 'Growth', value: 12.5, unit: '%', type: 'number', icon: 'lucide:trending-up', color: 'hsl(142.1 76.2% 36.3%)' }
+          ]}
+          .minTileWidth=${180}
+          .gap=${12}
+        ></dees-statsgrid>
+        
+        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'spacious1',
+              title: 'Monthly Revenue',
+              value: 184500,
+              unit: '$',
+              type: 'number',
+              icon: 'lucide:credit-card',
+              description: 'Total revenue this month'
+            },
+            {
+              id: 'spacious2',
+              title: 'Customer Satisfaction',
+              value: 94,
+              type: 'percentage',
+              icon: 'lucide:smile',
+              description: 'Based on 1,234 reviews'
+            },
+            {
+              id: 'spacious3',
+              title: 'Server Response',
+              value: 98,
+              unit: 'ms',
+              type: 'trend',
+              icon: 'lucide:server',
+              trendData: [105, 102, 100, 99, 98, 98, 97, 98],
+              description: 'avg response time'
+            }
+          ]}
+          .minTileWidth=${320}
           .gap=${20}
         ></dees-statsgrid>
-      </div>
+      </dees-panel>
       
-      <script>
-        // Simulate real-time updates
-        setInterval(() => {
-          const grids = document.querySelectorAll('dees-statsgrid');
-          grids.forEach(grid => {
-            if (grid.tiles && grid.tiles.length > 0) {
-              // Update some random values
-              const updatedTiles = [...grid.tiles];
-              
-              // Update trends with new data point
-              updatedTiles.forEach(tile => {
-                if (tile.type === 'trend' && tile.trendData) {
-                  tile.trendData = [...tile.trendData.slice(1), 
-                    tile.trendData[tile.trendData.length - 1] + Math.random() * 10 - 5
-                  ];
+      <dees-panel .title=${'4. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
+        <dees-statsgrid
+          id="interactive-grid"
+          .tiles=${[
+            {
+              id: 'live-cpu',
+              title: 'Live CPU',
+              value: 45,
+              unit: '%',
+              type: 'gauge',
+              icon: 'lucide:cpu',
+              gaugeOptions: {
+                min: 0,
+                max: 100,
+                thresholds: [
+                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
+                  { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
+                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
+                ]
+              }
+            },
+            {
+              id: 'live-requests',
+              title: 'Requests/sec',
+              value: 892,
+              type: 'trend',
+              icon: 'lucide:activity',
+              trendData: [850, 860, 870, 880, 885, 890, 892]
+            },
+            {
+              id: 'live-memory',
+              title: 'Memory Usage',
+              value: 62,
+              type: 'percentage',
+              icon: 'lucide:database'
+            },
+            {
+              id: 'counter',
+              title: 'Event Counter',
+              value: 0,
+              type: 'number',
+              icon: 'lucide:zap',
+              actions: [
+                {
+                  name: 'Increment',
+                  iconName: 'lucide:plus',
+                  action: async () => {
+                    const grid = document.querySelector('#interactive-grid') as any;
+                    if (!grid) return;
+                    const tile = grid.tiles.find((t: any) => t.id === 'counter');
+                    tile.value = typeof tile.value === 'number' ? tile.value + 1 : 1;
+                    grid.tiles = [...grid.tiles];
+                  }
+                },
+                {
+                  name: 'Reset',
+                  iconName: 'lucide:rotate-ccw',
+                  action: async () => {
+                    const grid = document.querySelector('#interactive-grid') as any;
+                    if (!grid) return;
+                    const tile = grid.tiles.find((t: any) => t.id === 'counter');
+                    tile.value = 0;
+                    grid.tiles = [...grid.tiles];
+                  }
                 }
-                
-                // Randomly update some numeric values
-                if (tile.type === 'number' && Math.random() > 0.7) {
-                  const currentValue = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
-                  tile.value = Math.round(currentValue + (Math.random() * 10 - 5));
-                }
-                
-                // Update gauge values
-                if (tile.type === 'gauge' && Math.random() > 0.5) {
-                  const currentValue = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
-                  const newValue = currentValue + (Math.random() * 10 - 5);
-                  tile.value = Math.max(tile.gaugeOptions?.min || 0, 
-                    Math.min(tile.gaugeOptions?.max || 100, Math.round(newValue)));
-                }
-              });
-              
-              grid.tiles = updatedTiles;
+              ]
             }
-          });
-        }, 3000);
-      </script>
+          ]}
+          .gridActions=${[
+            {
+              name: 'Start Live Updates',
+              iconName: 'lucide:play',
+              action: async function() {
+                // Toggle live updates
+                if (!(window as any).liveUpdateInterval) {
+                  (window as any).liveUpdateInterval = setInterval(() => {
+                    const grid = document.querySelector('#interactive-grid') as any;
+                    if (grid) {
+                      const tiles = [...grid.tiles];
+                      
+                      // Update CPU gauge
+                      const cpuTile = tiles.find(t => t.id === 'live-cpu');
+                      cpuTile.value = Math.max(0, Math.min(100, cpuTile.value + (Math.random() * 20 - 10)));
+                      
+                      // Update requests trend
+                      const requestsTile = tiles.find(t => t.id === 'live-requests');
+                      const newValue = requestsTile.value + Math.round(Math.random() * 50 - 25);
+                      requestsTile.value = Math.max(800, newValue);
+                      requestsTile.trendData = [...requestsTile.trendData.slice(1), requestsTile.value];
+                      
+                      // Update memory percentage
+                      const memoryTile = tiles.find(t => t.id === 'live-memory');
+                      memoryTile.value = Math.max(0, Math.min(100, memoryTile.value + (Math.random() * 10 - 5)));
+                      
+                      grid.tiles = tiles;
+                    }
+                  }, 1000);
+                  
+                  this.name = 'Stop Live Updates';
+                  this.iconName = 'lucide:pause';
+                } else {
+                  clearInterval((window as any).liveUpdateInterval);
+                  (window as any).liveUpdateInterval = null;
+                  this.name = 'Start Live Updates';
+                  this.iconName = 'lucide:play';
+                }
+              }
+            }
+          ]}
+          .minTileWidth=${250}
+          .gap=${16}
+        ></dees-statsgrid>
+      </dees-panel>
+      
+      <dees-panel .title=${'5. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
+        <div class="code-block">${`const tiles: IStatsTile[] = [
+  {
+    id: 'revenue',
+    title: 'Total Revenue',
+    value: 125420,
+    unit: '$',
+    type: 'number',
+    icon: 'lucide:dollar-sign',
+    description: '+12.5% from last month',
+    actions: [
+      {
+        name: 'View Details',
+        iconName: 'lucide:trending-up',
+        action: async () => {
+          console.log('View revenue details');
+        }
+      }
+    ]
+  },
+  {
+    id: 'cpu',
+    title: 'CPU Usage',
+    value: 73,
+    unit: '%',
+    type: 'gauge',
+    icon: 'lucide:cpu',
+    gaugeOptions: {
+      min: 0,
+      max: 100,
+      thresholds: [
+        { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
+        { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
+        { value: 80, color: 'hsl(0 84.2% 60.2%)' }
+      ]
+    }
+  }
+];
+
+// Render the stats grid
+html\`
+  <dees-statsgrid
+    .tiles=\${tiles}
+    .minTileWidth=\${250}
+    .gap=\${16}
+    .gridActions=\${[
+      {
+        name: 'Refresh',
+        iconName: 'lucide:refresh-cw',
+        action: async () => console.log('Refresh')
+      }
+    ]}
+  ></dees-statsgrid>
+\`;`}</div>
+      </dees-panel>
     </div>
+    
+    <script>
+      // Cleanup live updates on page unload
+      window.addEventListener('beforeunload', () => {
+        if ((window as any).liveUpdateInterval) {
+          clearInterval((window as any).liveUpdateInterval);
+        }
+      });
+    </script>
+  </dees-demowrapper>
   `;
 };

ts_web/elements/dees-statsgrid.ts

@@ -81,28 +81,44 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
       }
 
+      /* CSS Variables for consistent spacing and sizing */
+      :host {
+        --grid-gap: 16px;
+        --tile-padding: 24px;
+        --header-spacing: 16px;
+        --content-min-height: 48px;
+        --value-font-size: 30px;
+        --unit-font-size: 16px;
+        --label-font-size: 13px;
+        --title-font-size: 14px;
+        --description-spacing: 12px;
+        --border-radius: 8px;
+        --transition-duration: 0.15s;
+      }
+
+      /* Grid Layout */
       .grid-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: ${unsafeCSS(16)}px;
-        min-height: 32px;
+        margin-bottom: calc(var(--grid-gap) * 1.5);
+        min-height: 40px;
       }
 
       .grid-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        font-size: 16px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        letter-spacing: -0.01em;
       }
 
       .grid-actions {
         display: flex;
-        gap: 8px;
+        gap: 6px;
       }
 
       .grid-actions dees-button {
-        font-size: 14px;
-        min-width: auto;
+        font-size: var(--label-font-size);
       }
 
       .stats-grid {
@@ -112,86 +128,107 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
       }
 
+      /* Tile Base Styles */
       .stats-tile {
-        background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
-        border-radius: 12px;
-        padding: 20px;
-        transition: all 0.3s ease;
-        cursor: pointer;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 11.8%)')};
+        border-radius: var(--border-radius);
+        padding: var(--tile-padding);
+        transition: all var(--transition-duration) ease;
+        cursor: default;
         position: relative;
         overflow: hidden;
+        display: flex;
+        flex-direction: column;
       }
 
       .stats-tile:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
-        border-color: ${cssManager.bdTheme('#d0d0d0', '#3a3a3a')};
+        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 10.2%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 16.8%)')};
       }
 
       .stats-tile.clickable {
         cursor: pointer;
       }
 
+      .stats-tile.clickable:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.2)')};
+      }
+
+      /* Tile Header */
       .tile-header {
         display: flex;
         justify-content: space-between;
-        align-items: center;
-        margin-bottom: 12px;
-        width: 100%;
+        align-items: flex-start;
+        margin-bottom: var(--header-spacing);
+        flex-shrink: 0;
       }
 
       .tile-title {
-        font-size: 14px;
+        font-size: var(--title-font-size);
         font-weight: 500;
-        color: ${cssManager.bdTheme('#666', '#aaa')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         margin: 0;
+        letter-spacing: -0.01em;
+        line-height: 1.2;
       }
 
       .tile-icon {
-        opacity: 0.6;
+        opacity: 0.7;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        font-size: 16px;
+        flex-shrink: 0;
       }
 
+      /* Tile Content */
       .tile-content {
-        height: 90px;
+        min-height: var(--content-min-height);
         display: flex;
         flex-direction: column;
         justify-content: center;
-        align-items: center;
-        position: relative;
+        flex: 1;
       }
 
       .tile-value {
-        font-size: 32px;
+        font-size: var(--value-font-size);
         font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        line-height: 1.2;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1;
         display: flex;
         align-items: baseline;
-        justify-content: center;
-        gap: 6px;
-        width: 100%;
+        gap: 4px;
+        letter-spacing: -0.025em;
       }
 
       .tile-unit {
-        font-size: 18px;
+        font-size: var(--unit-font-size);
         font-weight: 400;
-        color: ${cssManager.bdTheme('#666', '#aaa')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        letter-spacing: -0.01em;
       }
 
       .tile-description {
-        font-size: 12px;
-        color: ${cssManager.bdTheme('#888', '#777')};
-        margin-top: 8px;
+        font-size: var(--label-font-size);
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        margin-top: var(--description-spacing);
+        letter-spacing: -0.01em;
+        flex-shrink: 0;
+      }
+
+      /* Gauge Styles */
+      .gauge-wrapper {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
       .gauge-container {
-        width: 100%;
+        width: 140px;
         height: 80px;
         position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        margin-top: -10px;
       }
 
       .gauge-svg {
@@ -201,96 +238,130 @@ export class DeesStatsGrid extends DeesElement {
 
       .gauge-background {
         fill: none;
-        stroke: ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
-        stroke-width: 6;
+        stroke: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
+        stroke-width: 8;
       }
 
       .gauge-fill {
         fill: none;
-        stroke-width: 6;
+        stroke-width: 8;
         stroke-linecap: round;
-        transition: stroke-dashoffset 0.5s ease;
+        transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       .gauge-text {
-        fill: ${cssManager.bdTheme('#333', '#fff')};
-        font-size: 18px;
+        fill: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        font-size: var(--value-font-size);
         font-weight: 600;
         text-anchor: middle;
+        dominant-baseline: alphabetic;
+        letter-spacing: -0.025em;
       }
       
-      .percentage-container {
+      .gauge-unit {
+        font-size: var(--unit-font-size);
+        fill: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        font-weight: 400;
+      }
+
+      /* Percentage Styles */
+      .percentage-wrapper {
         width: 100%;
-        height: 24px;
-        background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')};
-        border-radius: 12px;
-        overflow: hidden;
         position: relative;
       }
 
+      .percentage-value {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        letter-spacing: -0.025em;
+        margin-bottom: 8px;
+      }
+
+      .percentage-bar {
+        width: 100%;
+        height: 8px;
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
       .percentage-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#0084ff', '#0066cc')};
-        transition: width 0.5s ease;
-        border-radius: 12px;
-      }
-
-      .percentage-text {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 12px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        background: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 4px;
       }
 
+      /* Trend Styles */
       .trend-container {
         width: 100%;
-        height: 100%;
-        position: relative;
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 4px;
+        gap: 8px;
+      }
+
+      .trend-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+      }
+
+      .trend-value {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        letter-spacing: -0.025em;
+      }
+
+      .trend-unit {
+        font-size: var(--unit-font-size);
+        font-weight: 400;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .trend-label {
+        font-size: var(--label-font-size);
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        letter-spacing: -0.01em;
+        margin-left: auto;
+      }
+
+      .trend-graph {
+        width: 100%;
+        height: 32px;
+        position: relative;
       }
 
       .trend-svg {
         width: 100%;
-        height: 40px;
-        flex-shrink: 0;
+        height: 100%;
+        display: block;
       }
 
       .trend-line {
         fill: none;
-        stroke: ${cssManager.bdTheme('#0084ff', '#0066cc')};
+        stroke: ${cssManager.bdTheme('hsl(215.4 16.3% 66.9%)', 'hsl(215 20.2% 55.1%)')};
         stroke-width: 2;
+        stroke-linejoin: round;
+        stroke-linecap: round;
       }
 
       .trend-area {
-        fill: ${cssManager.bdTheme('rgba(0, 132, 255, 0.1)', 'rgba(0, 102, 204, 0.2)')};
+        fill: ${cssManager.bdTheme('hsl(215.4 16.3% 66.9% / 0.1)', 'hsl(215 20.2% 55.1% / 0.08)')};
       }
 
+      /* Text Value Styles */
       .text-value {
-        font-size: 32px;
+        font-size: var(--value-font-size);
         font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#fff')};
-      }
-
-      .trend-value {
-        font-size: 32px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        display: flex;
-        align-items: baseline;
-        gap: 6px;
-      }
-
-      .trend-value .tile-unit {
-        font-size: 18px;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        letter-spacing: -0.025em;
       }
 
+      /* Context Menu */
       dees-contextmenu {
         position: fixed;
         z-index: 1000;
@@ -306,10 +377,14 @@ export class DeesStatsGrid extends DeesElement {
     return html`
       ${this.gridActions.length > 0 ? html`
         <div class="grid-header">
-          <div class="grid-title">Statistics</div>
+          <div class="grid-title"></div>
           <div class="grid-actions">
             ${this.gridActions.map(action => html`
-              <dees-button @clicked=${() => this.handleGridAction(action)}>
+              <dees-button 
+                @clicked=${() => this.handleGridAction(action)}
+                type="outline"
+                size="sm"
+              >
                 ${action.iconName ? html`<dees-icon .iconFA=${action.iconName} size="small"></dees-icon>` : ''}
                 ${action.name}
               </dees-button>
@@ -354,7 +429,7 @@ export class DeesStatsGrid extends DeesElement {
           ${this.renderTileContent(tile)}
         </div>
         
-        ${tile.description ? html`
+        ${tile.description && tile.type !== 'trend' ? html`
           <div class="tile-description">${tile.description}</div>
         ` : ''}
       </div>
@@ -396,12 +471,31 @@ export class DeesStatsGrid extends DeesElement {
     const value = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
     const options = tile.gaugeOptions || { min: 0, max: 100 };
     const percentage = ((value - options.min) / (options.max - options.min)) * 100;
-    const strokeDasharray = 188.5; // Circumference of circle with r=30
-    const strokeDashoffset = strokeDasharray - (strokeDasharray * percentage) / 100;
     
-    let strokeColor = tile.color || cssManager.bdTheme('#0084ff', '#0066cc');
+    // SVG dimensions and calculations
+    const width = 140;
+    const height = 80;
+    const strokeWidth = 8;
+    const padding = strokeWidth / 2 + 2;
+    const radius = 48;
+    const centerX = width / 2;
+    const centerY = height - padding;
+    
+    // Arc path
+    const startX = centerX - radius;
+    const startY = centerY;
+    const endX = centerX + radius;
+    const endY = centerY;
+    const arcPath = `M ${startX} ${startY} A ${radius} ${radius} 0 0 1 ${endX} ${endY}`;
+    
+    // Calculate stroke dasharray and dashoffset
+    const circumference = Math.PI * radius;
+    const strokeDashoffset = circumference - (circumference * percentage) / 100;
+
+    let strokeColor = tile.color || cssManager.bdTheme('hsl(215.3 25% 28.8%)', 'hsl(210 40% 78%)');
     if (options.thresholds) {
-      for (const threshold of options.thresholds.reverse()) {
+      const sortedThresholds = [...options.thresholds].sort((a, b) => b.value - a.value);
+      for (const threshold of sortedThresholds) {
         if (value >= threshold.value) {
           strokeColor = threshold.color;
           break;
@@ -410,29 +504,28 @@ export class DeesStatsGrid extends DeesElement {
     }
 
     return html`
-      <div class="gauge-container">
-        <svg class="gauge-svg" viewBox="0 0 80 80">
-          <circle
-            class="gauge-background"
-            cx="40"
-            cy="40"
-            r="30"
-            transform="rotate(-90 40 40)"
-          />
-          <circle
-            class="gauge-fill"
-            cx="40"
-            cy="40"
-            r="30"
-            transform="rotate(-90 40 40)"
-            stroke="${strokeColor}"
-            stroke-dasharray="${strokeDasharray}"
-            stroke-dashoffset="${strokeDashoffset}"
-          />
-          <text class="gauge-text" x="40" y="40" dy="0.35em">
-            ${value}${tile.unit || ''}
-          </text>
-        </svg>
+      <div class="gauge-wrapper">
+        <div class="gauge-container">
+          <svg class="gauge-svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid meet">
+            <!-- Background arc -->
+            <path
+              class="gauge-background"
+              d="${arcPath}"
+            />
+            <!-- Filled arc -->
+            <path
+              class="gauge-fill"
+              d="${arcPath}"
+              stroke="${strokeColor}"
+              stroke-dasharray="${circumference}"
+              stroke-dashoffset="${strokeDashoffset}"
+            />
+            <!-- Value text -->
+            <text class="gauge-text" x="${centerX}" y="${centerY}">
+              <tspan>${value}</tspan>${tile.unit ? html`<tspan class="gauge-unit" dx="4">${tile.unit}</tspan>` : ''}
+            </text>
+          </svg>
+        </div>
       </div>
     `;
   }
@@ -442,12 +535,14 @@ export class DeesStatsGrid extends DeesElement {
     const percentage = Math.min(100, Math.max(0, value));
 
     return html`
-      <div class="percentage-container">
-        <div 
-          class="percentage-fill" 
-          style="width: ${percentage}%; ${tile.color ? `background: ${tile.color}` : ''}"
-        ></div>
-        <div class="percentage-text">${percentage}%</div>
+      <div class="percentage-wrapper">
+        <div class="percentage-value">${percentage}%</div>
+        <div class="percentage-bar">
+          <div 
+            class="percentage-fill" 
+            style="width: ${percentage}%; ${tile.color ? `background: ${tile.color}` : ''}"
+          ></div>
+        </div>
       </div>
     `;
   }
@@ -461,11 +556,14 @@ export class DeesStatsGrid extends DeesElement {
     const max = Math.max(...data);
     const min = Math.min(...data);
     const range = max - min || 1;
-    const width = 200;
-    const height = 40;
+    const width = 300;
+    const height = 32;
+    
+    // Add padding to prevent clipping
+    const padding = 2;
     const points = data.map((value, index) => {
       const x = (index / (data.length - 1)) * width;
-      const y = height - ((value - min) / range) * height;
+      const y = padding + (height - 2 * padding) - ((value - min) / range) * (height - 2 * padding);
       return `${x},${y}`;
     }).join(' ');
 
@@ -473,13 +571,16 @@ export class DeesStatsGrid extends DeesElement {
 
     return html`
       <div class="trend-container">
-        <svg class="trend-svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
-          <polygon class="trend-area" points="${areaPoints}" />
-          <polyline class="trend-line" points="${points}" />
-        </svg>
-        <div class="trend-value">
-          <span>${tile.value}</span>
-          ${tile.unit ? html`<span class="tile-unit">${tile.unit}</span>` : ''}
+        <div class="trend-header">
+          <span class="trend-value">${tile.value}</span>
+          ${tile.unit ? html`<span class="trend-unit">${tile.unit}</span>` : ''}
+          ${tile.description ? html`<span class="trend-label">${tile.description}</span>` : ''}
+        </div>
+        <div class="trend-graph">
+          <svg class="trend-svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
+            <polygon class="trend-area" points="${areaPoints}" />
+            <polyline class="trend-line" points="${points}" />
+          </svg>
         </div>
       </div>
     `;

ts_web/elements/dees-toast.ts

@@ -1,6 +1,7 @@
 import { customElement, DeesElement, type TemplateResult, html, css, property, cssManager } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
+import { zIndexLayers } from './00zindex.js';
 import { demoFunc } from './dees-toast.demo.js';
 
 declare global {
@@ -32,7 +33,7 @@ export class DeesToast extends DeesElement {
       container.className = `toast-container toast-container-${position}`;
       container.style.cssText = `
         position: fixed;
-        z-index: 10000;
+        z-index: ${zIndexLayers.overlay.toast};
         pointer-events: none;
         padding: 16px;
         display: flex;
@@ -105,6 +106,11 @@ export class DeesToast extends DeesElement {
     return toast;
   }
 
+  // Alias for consistency with DeesModal
+  public static async createAndShow(options: IToastOptions | string) {
+    return this.show(options);
+  }
+
   // Convenience methods
   public static info(message: string, duration?: number) {
     return this.show({ message, type: 'info', duration });

ts_web/elements/dees-windowlayer.ts

@@ -1,4 +1,5 @@
 import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
+import { zIndexLayers, zIndexRegistry } from './00zindex.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -33,6 +34,12 @@ export class DeesWindowLayer extends DeesElement {
     blur: false
   };
   
+  @state()
+  private backdropZIndex: number = 1000;
+  
+  @state()
+  private contentZIndex: number = 1001;
+
   // INSTANCE
   @property({
     type: Boolean
@@ -62,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: 200;
+          z-index: ${this.backdropZIndex};
         }
         .slotContent {
           position: fixed;
@@ -71,7 +78,12 @@ export class DeesWindowLayer extends DeesElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          z-index: 201;
+          z-index: ${this.contentZIndex};
+          pointer-events: none;
+        }
+        
+        .slotContent > * {
+          pointer-events: auto;
         }
         
         .visible {
@@ -80,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>
     `;
@@ -102,8 +114,20 @@ export class DeesWindowLayer extends DeesElement {
     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;
   }
@@ -118,6 +142,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/elements/index.ts

@@ -1,3 +1,4 @@
+export * from './00zindex.js';
 export * from './dees-appui-activitylog.js';
 export * from './dees-appui-appbar.js';
 export * from './dees-appui-base.js';
@@ -36,6 +37,7 @@ export * from './dees-progressbar.js';
 export * from './dees-input-quantityselector.js';
 export * from './dees-input-radiogroup.js';
 export * from './dees-input-richtext.js';
+export * from './dees-input-tags.js';
 export * from './dees-input-text.js';
 export * from './dees-label.js';
 export * from './dees-mobilenavigation.js';

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

@@ -7,6 +7,7 @@ import {
   css,
   state,
 } from '@design.estate/dees-element';
+import { zIndexRegistry } from '../00zindex.js';
 
 import { WysiwygFormatting } from './wysiwyg.formatting.js';
 
@@ -34,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 = [
@@ -41,12 +45,15 @@ export class DeesFormattingMenu extends DeesElement {
     css`
       :host {
         position: fixed;
-        z-index: 10000;
         pointer-events: none;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
       }
 
       .formatting-menu {
-        position: absolute;
+        position: fixed;
         background: ${cssManager.bdTheme('#ffffff', '#262626')};
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
         border-radius: 6px;
@@ -118,6 +125,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" 
@@ -152,13 +162,21 @@ 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 and apply immediately
+    this.menuZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.menuZIndex);
+    this.style.zIndex = this.menuZIndex.toString();
+    
     this.visible = true;
-    console.log('FormattingMenu.show - visible set to:', this.visible);
   }
 
   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

@@ -1,6 +1,5 @@
 import {
   customElement,
-  property,
   html,
   DeesElement,
   type TemplateResult,
@@ -8,6 +7,7 @@ import {
   css,
   state,
 } from '@design.estate/dees-element';
+import { zIndexRegistry } from '../00zindex.js';
 
 import { type ISlashMenuItem } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
@@ -42,6 +42,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 = [
@@ -49,12 +52,15 @@ export class DeesSlashMenu extends DeesElement {
     css`
       :host {
         position: fixed;
-        z-index: 10000;
         pointer-events: none;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
       }
 
       .slash-menu {
-        position: absolute;
+        position: fixed;
         background: ${cssManager.bdTheme('#ffffff', '#262626')};
         border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
         border-radius: 8px;
@@ -118,6 +124,9 @@ export class DeesSlashMenu extends DeesElement {
   render(): TemplateResult {
     if (!this.visible) return html``;
 
+    // Ensure z-index is applied to host element
+    this.style.zIndex = this.menuZIndex.toString();
+
     const menuItems = this.getFilteredMenuItems();
 
     return html`
@@ -161,6 +170,12 @@ export class DeesSlashMenu extends DeesElement {
     this.callback = callback;
     this.filter = '';
     this.selectedIndex = 0;
+    
+    // Get z-index from registry and apply immediately
+    this.menuZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.menuZIndex);
+    this.style.zIndex = this.menuZIndex.toString();
+    
     this.visible = true;
   }
 
@@ -169,6 +184,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/index.ts

@@ -1,2 +1,3 @@
 export * from './mainpage.js';
 export * from './input-showcase.js';
+export * from './zindex-showcase.js';

ts_web/pages/input-showcase.ts

@@ -377,6 +377,29 @@ export const inputShowcase = () => html`
           .placeholder=${'Type and press Enter'}
         ></dees-input-typelist>
       </dees-panel>
+
+      <dees-panel .title=${'Tags Input'} .subtitle=${'Add and manage tags with suggestions'}>
+        <div class="demo-grid">
+          <dees-input-tags
+            .label=${'Project Tags'}
+            .placeholder=${'Add tags...'}
+            .value=${['frontend', 'typescript', 'webcomponents']}
+            .description=${'Press Enter or comma to add'}
+          ></dees-input-tags>
+
+          <dees-input-tags
+            .label=${'Technologies'}
+            .placeholder=${'Type to see suggestions...'}
+            .suggestions=${[
+              'React', 'Vue', 'Angular', 'Svelte',
+              'Node.js', 'Deno', 'Express', 'MongoDB'
+            ]}
+            .value=${['React', 'Node.js']}
+            .maxTags=${5}
+            .description=${'Maximum 5 tags, with suggestions'}
+          ></dees-input-tags>
+        </div>
+      </dees-panel>
     </section>
 
     <!-- Numeric Inputs Section -->

ts_web/pages/zindex-showcase.ts

@@ -0,0 +1,814 @@
+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 zIndexShowcase = () => html`
+  <style>
+    ${css`
+      .page-wrapper {
+        display: block;
+        background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
+        min-height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+
+      .showcase-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 48px 24px;
+      }
+
+      .showcase-header {
+        text-align: center;
+        margin-bottom: 48px;
+      }
+
+      .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')};
+        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));
+        gap: 24px;
+        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: 12px;
+        padding: 32px;
+        margin-bottom: 40px;
+      }
+
+      .hierarchy-visual h3 {
+        margin-top: 0;
+        margin-bottom: 24px;
+        font-size: 24px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#1a1a1a', '#fff')};
+      }
+
+      .layer-stack {
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 8px;
+        margin-top: 16px;
+      }
+
+      .layer {
+        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: translateX(4px);
+        border-color: ${cssManager.bdTheme('#e0e0e0', '#444')};
+      }
+
+      .layer.base {
+        background: ${cssManager.bdTheme('#f0f0f0', '#222')};
+        color: ${cssManager.bdTheme('#666', '#999')};
+      }
+
+      .layer.fixed {
+        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
+        color: ${cssManager.bdTheme('#1976d2', '#90caf9')};
+      }
+
+      .layer.dropdown {
+        background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')};
+        color: ${cssManager.bdTheme('#7b1fa2', '#ce93d8')};
+      }
+
+      .layer.modal {
+        background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')};
+        color: ${cssManager.bdTheme('#388e3c', '#81c784')};
+      }
+
+      .layer.context {
+        background: ${cssManager.bdTheme('#fff3e0', '#e65100')};
+        color: ${cssManager.bdTheme('#f57c00', '#ffb74d')};
+      }
+
+      .layer.toast {
+        background: ${cssManager.bdTheme('#ffebee', '#b71c1c')};
+        color: ${cssManager.bdTheme('#d32f2f', '#ef5350')};
+      }
+
+      .layer-name {
+        font-weight: 600;
+      }
+
+      .layer-value {
+        opacity: 0.8;
+      }
+
+      .warning-box {
+        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('#f57f17', '#ffd93d')};
+      }
+
+      code {
+        background: ${cssManager.bdTheme('#f5f5f5', '#2a2a2a')};
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: 'Geist Mono', monospace;
+        font-size: 14px;
+      }
+
+      /* Consistent panel spacing */
+      dees-panel {
+        display: block;
+        margin-bottom: 24px;
+      }
+      
+      dees-panel:last-child {
+        margin-bottom: 0;
+      }
+
+      .test-area {
+        position: relative;
+        height: 200px;
+        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
+        border: 2px dashed ${cssManager.bdTheme('#ccc', '#444')};
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 16px;
+      }
+
+      .profile-demo {
+        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-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="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>
+        <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="registry-item">
+            <span>Current Z-Index:</span>
+            <span id="currentZIndex">1000</span>
+          </div>
+        </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>
+        <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</span>
+              <span class="layer-value">z-index: 4000</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>
+
+      <!-- Interactive Demos Section -->
+      <div class="showcase-section">
+        <div class="section-header">
+          <div class="section-icon demo">🎮</div>
+          <div>
+            <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=${[
+                {option: 'Show Toast', key: 'toast', payload: 'toast'},
+                {option: 'Option 2', key: 'opt2', payload: '2'},
+                {option: 'Option 3', key: 'opt3', payload: '3'},
+                {option: 'Option 4', key: 'opt4', payload: '4'},
+              ]}
+              @change=${async (e: CustomEvent) => {
+                if (e.detail.value?.payload === 'toast') {
+                  DeesToast.createAndShow({ message: 'Toast appears above dropdown!', type: 'success' });
+                }
+              }}
+            ></dees-input-dropdown>
+            </div>
+
+            <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 () => {
+                  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 () => {} },
+              ]);
+            }}>
+              <span style="color: ${cssManager.bdTheme('#999', '#666')}">Right-click here for context menu</span>
+            </div>
+            </div>
+
+            <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>
+        </dees-panel>
+
+        <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({
+            heading: 'Modal with Dropdown',
+            width: 'medium',
+            showHelpButton: true,
+            onHelp: async () => {
+              DeesToast.createAndShow({ message: 'Help requested! Toast appears above modal.', type: 'info' });
+            },
+            content: html`
+              <p>The dropdown below should appear <strong>above</strong> this modal:</p>
+              <dees-form>
+                <dees-input-dropdown
+                  .label=${'Select Country'}
+                  .options=${[
+                    {option: 'United States', key: 'us', payload: 'US'},
+                    {option: 'Canada', key: 'ca', payload: 'CA'},
+                    {option: 'United Kingdom', key: 'uk', payload: 'UK'},
+                    {option: 'Germany', key: 'de', payload: 'DE'},
+                    {option: 'France', key: 'fr', payload: 'FR'},
+                    {option: 'Japan', key: 'jp', payload: 'JP'},
+                    {option: 'Australia', key: 'au', payload: 'AU'},
+                    {option: 'Brazil', key: 'br', payload: 'BR'},
+                  ]}
+                  .required=${true}
+                ></dees-input-dropdown>
+                
+                <dees-input-text
+                  .label=${'Additional Field'}
+                  .placeholder=${'Just to show form context'}
+                ></dees-input-text>
+                
+                <dees-input-tags
+                  .label=${'Tags'}
+                  .placeholder=${'Add tags...'}
+                  .suggestions=${['urgent', 'bug', 'feature', 'documentation', 'testing']}
+                  .description=${'Add relevant tags'}
+                ></dees-input-tags>
+              </dees-form>
+              <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
+                You can also right-click anywhere in this modal to test context menus.
+              </p>
+            `,
+            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</dees-button>
+      </dees-panel>
+
+        <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
+          await DeesModal.createAndShow({
+            heading: 'Base Modal',
+            width: 'large',
+            content: html`
+              <h4>Level 1: Modal</h4>
+              <p>This is the base modal. Try the following:</p>
+              <ol>
+                <li>Open the dropdown below</li>
+                <li>Right-click for context menu</li>
+                <li>Click "Show Second Modal" to stack modals</li>
+              </ol>
+              
+              <dees-input-dropdown
+                .label=${'Test Dropdown in Modal'}
+                .options=${[
+                  {option: 'Trigger Toast', key: 'toast', payload: 'toast'},
+                  {option: 'Option 2', key: 'opt2', payload: '2'},
+                  {option: 'Option 3', key: 'opt3', payload: '3'},
+                ]}
+                @change=${async (e: CustomEvent) => {
+                  if (e.detail.value?.payload === 'toast') {
+                    DeesToast.createAndShow({ message: 'Toast triggered from dropdown in modal!', type: 'success' });
+                  }
+                }}
+              ></dees-input-dropdown>
+              
+              <div style="margin-top: 16px;">
+                <dees-button @click=${async () => {
+                  await DeesModal.createAndShow({
+                    heading: 'Second Modal',
+                    width: 'small',
+                    content: html`
+                      <h4>Level 2: Stacked Modal</h4>
+                      <p>This modal appears on top of the first one.</p>
+                      <p>The dropdown here should still work:</p>
+                      <dees-input-dropdown
+                        .label=${'Nested Dropdown'}
+                        .options=${[
+                          {option: 'Option A', key: 'a'},
+                          {option: 'Option B', key: 'b'},
+                          {option: 'Option C', key: 'c'},
+                        ]}
+                      ></dees-input-dropdown>
+                    `,
+                    menuOptions: [
+                      { name: 'Close', action: async (modal) => modal.destroy() }
+                    ]
+                  });
+                }}>Show Second Modal</dees-button>
+              </div>
+            `,
+            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</dees-button>
+      </dees-panel>
+
+        <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
+            .user=${{
+              name: 'Test User',
+              email: 'test@example.com',
+              avatar: 'https://randomuser.me/api/portraits/lego/1.jpg',
+              status: 'online' as const
+            }}
+            .menuItems=${[
+              { name: 'Show Toast', iconName: 'bell', shortcut: '', action: async () => {
+                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 () => {} }
+            ]}
+          ></dees-appui-profiledropdown>
+        </div>
+      </dees-panel>
+
+        <dees-panel .title=${'Edge Cases'} .subtitle=${'Special scenarios and gotchas'}>
+        <div class="demo-grid">
+          <div class="demo-card">
+            <h4>Multiple Toasts</h4>
+            <dees-button @click=${async () => {
+              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</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'}
+                      .value=${`<p>Welcome to the WYSIWYG editor demo!</p>
+<p>This editor demonstrates proper z-index management:</p>
+<ul>
+<li>Type <strong>/</strong> to open the slash command menu</li>
+<li>Select any text to see the formatting toolbar</li>
+<li>Both menus will appear <em>above</em> this modal</li>
+</ul>
+<p>Try it now: Type / here or select this text to format it.</p>`}
+                    ></dees-input-wysiwyg>
+                  </dees-form>
+                  <div style="margin-top: 16px; padding: 16px; background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; border-radius: 8px;">
+                    <strong style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">✨ Z-Index Fix Applied!</strong><br>
+                    <span style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">
+                      The WYSIWYG menus now properly use the dynamic z-index registry.<br>
+                      They will always appear above the modal, regardless of stacking order.
+                    </span>
+                  </div>
+                `,
+                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 () => {
+              await DeesModal.createAndShow({
+                heading: 'Tags Input Test',
+                width: 'medium',
+                content: html`
+                  <p>Test the tags input component in a modal:</p>
+                  <dees-form>
+                    <dees-input-tags
+                      .label=${'Search Terms'}
+                      .placeholder=${'Enter search terms...'}
+                      .value=${['typescript', 'modal']}
+                      .suggestions=${[
+                        'javascript', 'typescript', 'css', 'html',
+                        'react', 'vue', 'angular', 'svelte',
+                        'modal', 'dropdown', 'form', 'input'
+                      ]}
+                      .description=${'Add search terms to filter results'}
+                    ></dees-input-tags>
+                    
+                    <dees-input-tags
+                      .label=${'Categories'}
+                      .placeholder=${'Add categories...'}
+                      .required=${true}
+                      .maxTags=${3}
+                      .description=${'Select up to 3 categories'}
+                    ></dees-input-tags>
+                  </dees-form>
+                `,
+                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</dees-button>
+          </div>
+
+          <div class="demo-card">
+            <h4>Fullscreen Modal</h4>
+            <dees-button @click=${async () => {
+              await DeesModal.createAndShow({
+                heading: 'Fullscreen Modal Test',
+                width: 'fullscreen',
+                content: html`
+                  <p>Even in fullscreen, overlays should work properly:</p>
+                  <dees-input-radiogroup
+                    .label=${'Select Option'}
+                    .options=${['Option 1', 'Option 2', 'Option 3']}
+                  ></dees-input-radiogroup>
+                  <dees-input-dropdown
+                    .label=${'Dropdown in Fullscreen'}
+                    .options=${[
+                      {option: 'Works properly', key: '1'},
+                      {option: 'Above modal', key: '2'},
+                    ]}
+                  ></dees-input-dropdown>
+                `,
+                menuOptions: [
+                  { name: 'Exit Fullscreen', action: async (modal) => modal.destroy() }
+                ]
+              });
+            }}>Open Fullscreen</dees-button>
+          </div>
+        </div>
+      </dees-panel>
+      </div>
+
+      <!-- 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 z-index registry from <code>00zindex.ts</code></li>
+          <li>Never use arbitrary z-index values like <code>z-index: 9999</code></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>WYSIWYG menus (slash commands, formatting) now use dynamic z-index</li>
+        </ul>
+
+        <h4>Import Example:</h4>
+        <pre style="background: ${cssManager.bdTheme('#f5f5f5', '#2a2a2a')}; padding: 16px; border-radius: 6px; overflow-x: auto;">
+<code>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);</code></pre>
+      </dees-panel>
+      </div>
+    </div>
+  </div>
+`;