feat(playbook): add PlayBook

- Replace old zIndexLayers with new zIndexRegistry system
- Update design to match shadcn aesthetic with clean borders and shadows
- Add support for icons in menu items using Lucide icons
- Improve animations with staggered item appearance
- Better typography using Geist font family
- Add divider support for menu item grouping
- Improve hover and active states
- Add custom scrollbar styling
- Create comprehensive demo showcasing all features
- Ensure proper cleanup in disconnectedCallback

changelog.md

@@ -1,5 +1,80 @@
 # Changelog
 
+## 2025-06-29 - 1.10.10 - improve(dees-dashboardgrid, dees-input-wysiwyg)
+Enhanced dashboard grid component with advanced spacing and layout features inspired by gridstack.js
+
+Dashboard Grid improvements:
+- Improved margin system supporting uniform or individual margins (top, right, bottom, left)
+- Added collision detection to prevent widget overlap during drag operations
+- Implemented auto-positioning for new widgets to find first available space
+- Added compact() method to eliminate gaps and compress layout vertically or horizontally
+- Enhanced resize constraints with minW, maxW, minH, maxH support
+- Added optional grid lines visualization for better layout understanding
+- Improved resize handles with better visibility and hover states
+- Added RTL (right-to-left) layout support
+- Implemented cellHeightUnit option supporting 'px', 'em', 'rem', or 'auto' (square cells)
+- Added configurable animation with enableAnimation property
+- Enhanced demo with interactive controls for testing all features
+- Better calculation of widget positions accounting for margins between cells
+- Added findAvailablePosition() for intelligent widget placement
+- Improved drag and resize calculations for pixel-perfect positioning
+
+WYSIWYG editor drag and drop fixes:
+- Fixed drop indicator positioning to properly account for block margins
+- Added defensive checks in drag event handlers to prevent potential crashes
+- Improved updateBlockPositions with null checks and error handling
+- Updated drop indicator calculation to use simplified margin approach
+- Fixed drop indicator height to match the exact space occupied by dragged blocks
+- Improved drop indicator positioning algorithm to accurately show where blocks will land
+- Simplified visual block position calculations accounting for CSS transforms
+- Enhanced margin calculation to use correct values based on block type (16px for paragraphs, 24px for headings, 20px for code/quotes)
+- Fixed index calculation issue when dragging blocks downward by adjusting target index for excluded dragged block
+
+## 2025-06-28 - 1.10.9 - feat(dees-dashboardgrid)
+Add new dashboard grid component with drag-and-drop and resize capabilities
+
+- Created dees-dashboardgrid component for building flexible dashboard layouts
+- Features drag-and-drop functionality for rearranging widgets
+- Includes resize handles for adjusting widget dimensions
+- Supports configurable grid properties (columns, cell height, gap)
+- Provides widget locking and editable mode controls
+- Styled with shadcn design principles
+- No external dependencies - built with native browser APIs
+- Emits events for widget movements and resizes
+- Includes comprehensive demo with sample dashboard widgets
+
+## 2025-06-27 - 1.10.8 - feat(ui-components)
+Update multiple components with shadcn-aligned styling and improved animations
+
+- Updated dees-modal with shadcn colors, borders, and subtle shadows
+- Updated dees-chips with shadcn styling and fixed selection logic bug
+- Updated dees-dataview-codebox with shadcn syntax highlighting colors and responsive label layout
+- Updated dees-input-multitoggle with transparent blue indicator and smooth animations
+- Updated dees-appui-tabs with animated sliding indicator for both horizontal and vertical layouts
+- Fixed indicator positioning to be perfectly centered on tab content
+- Indicator width is content width + 8px for minimal visual padding
+- Fixed tab content centering by using consistent padding (12px → 16px on all sides)
+- Fixed icon rendering by correcting property name from .iconName to .icon
+- Added visual separators between tabs for better distinction
+- Added subtle hover backgrounds for improved interactivity
+- Refactored tabs component code for better maintainability and elegance
+- Updated dees-appui-activitylog with shadcn-aligned styling:
+  - Updated background and text colors to match shadcn palette
+  - Enhanced topbar with better spacing and typography
+  - Improved activity entries with subtle hover states and better spacing
+  - Added activity type icons with color-coded backgrounds (login, logout, view, create, update)
+  - Added date separators ("Today", "Yesterday") for better temporal organization
+  - Enhanced streaming indicators with animated pulse effect
+  - Redesigned searchbox with modern input styling, search icon, and focus states
+  - Added custom scrollbar styling for consistency
+  - Updated timestamps to be more subtle with tabular number formatting
+  - Refined shadow effects for better visual hierarchy
+  - Added subtle box shadow to component for depth
+  - Added fade-in animation for new activity entries
+  - Improved user name highlighting with better typography
+  - Updated context menu with more relevant actions
+- Improved overall spacing and visual consistency across components
+
 ## 2025-06-27 - 1.10.1 - fix(modal)
 Improve modal overscroll behavior by adding 'overscroll-behavior: contain' to content container
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.10.6",
+  "version": "1.10.10",
   "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",
@@ -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.101",
+    "@design.estate/dees-wcctools": "^1.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -36,7 +36,7 @@
     "apexcharts": "^4.7.0",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.523.0",
+    "lucide": "^0.525.0",
     "monaco-editor": "^0.52.2",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^2.0.45
         version: 2.0.45
       '@design.estate/dees-wcctools':
-        specifier: ^1.0.101
-        version: 1.0.101
+        specifier: ^1.1.0
+        version: 1.1.0
       '@fortawesome/fontawesome-svg-core':
         specifier: ^6.7.2
         version: 6.7.2
@@ -72,8 +72,8 @@ importers:
         specifier: ^4.5.1
         version: 4.5.1
       lucide:
-        specifier: ^0.523.0
-        version: 0.523.0
+        specifier: ^0.525.0
+        version: 0.525.0
       monaco-editor:
         specifier: ^0.52.2
         version: 0.52.2
@@ -323,8 +323,8 @@ packages:
   '@design.estate/dees-element@2.0.45':
     resolution: {integrity: sha512-dj8nOOtfwvqEtQceTXQQ5IEy75HIFZ+iuDxPeIynLedYpxtHPsxFrHW8IQ7/ad9MNvVO0kTnlwUOmkjylul+DA==}
 
-  '@design.estate/dees-wcctools@1.0.101':
-    resolution: {integrity: sha512-6j2kGORf7egRkHGwQUNuxSdTe2+6y7eX3+dVomBLeWczH30KhPi1jJKINSt/MqkpB5i7o3kQwvvWA6JYBOjXcg==}
+  '@design.estate/dees-wcctools@1.1.0':
+    resolution: {integrity: sha512-eniG2JsGgcVXQLkSE6M7azJ7av/UeTvvzhE6s3JbcIieHd589SCxQqF+BhlOyKqzJQ1n5jJ7KKdmhvQU5bbdtg==}
 
   '@emnapi/core@1.4.3':
     resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==}
@@ -3481,8 +3481,8 @@ packages:
     resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==}
     engines: {node: '>=16.14'}
 
-  lucide@0.523.0:
-    resolution: {integrity: sha512-tiIp5xEP4kpeulfT1J+a/NEaIZGT1k6RyMS3evQWfHRhJvR8uTat/+lN4wnX5qIexOwN02BhmcyMHBNwt+jkLA==}
+  lucide@0.525.0:
+    resolution: {integrity: sha512-sfehWlaE/7NVkcEQ4T9JD3eID8RNMIGJBBUq9wF3UFiJIrcMKRbU3g1KGfDk4svcW7yw8BtDLXaXo02scDtUYQ==}
 
   make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -5588,7 +5588,7 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@1.0.101':
+  '@design.estate/dees-wcctools@1.1.0':
     dependencies:
       '@design.estate/dees-domtools': 2.3.3
       '@design.estate/dees-element': 2.0.45
@@ -5905,10 +5905,8 @@ snapshots:
     transitivePeerDependencies:
       - '@nuxt/kit'
       - '@swc/helpers'
-      - bufferutil
       - react
       - supports-color
-      - utf-8-validate
       - vue
 
   '@hapi/bourne@3.0.0': {}
@@ -9564,7 +9562,7 @@ snapshots:
 
   lru-cache@8.0.5: {}
 
-  lucide@0.523.0: {}
+  lucide@0.525.0: {}
 
   make-dir@3.1.0:
     dependencies:

readme.appui-architecture.md

@@ -1,513 +0,0 @@
-# Building Applications with dees-appui Architecture
-
-## Overview
-
-The dees-appui system provides a comprehensive framework for building desktop-style web applications with a consistent layout, navigation, and view management system. This document outlines the architecture and best practices for building applications using these components.
-
-## Core Architecture
-
-### Component Hierarchy
-
-```
-dees-appui-base
-├── dees-appui-appbar (top menu bar)
-├── dees-appui-mainmenu (left sidebar - primary navigation)
-├── dees-appui-mainselector (second sidebar - contextual navigation)
-├── dees-appui-maincontent (main content area)
-│   └── dees-appui-view (view container)
-│       └── dees-appui-tabs (tab navigation within views)
-└── dees-appui-activitylog (right sidebar - optional)
-```
-
-### View-Based Architecture
-
-The system is built around the concept of **Views** - self-contained modules that represent different sections of your application. Each view can have:
-
-- Its own tabs for sub-navigation
-- Menu items for the selector (contextual navigation)
-- Content areas with dynamic loading
-- State management
-- Event handling
-
-## Implementation Plan
-
-### Phase 1: Application Shell Setup
-
-```typescript
-// app-shell.ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import type { IAppView } from '@design.estate/dees-catalog';
-
-@customElement('my-app-shell')
-export class MyAppShell extends LitElement {
-  @property({ type: Array })
-  views: IAppView[] = [];
-
-  @property({ type: String })
-  activeViewId: string = '';
-
-  render() {
-    const activeView = this.views.find(v => v.id === this.activeViewId);
-    
-    return html`
-      <dees-appui-base
-        .appbarMenuItems=${this.getAppBarMenuItems()}
-        .appbarBreadcrumbs=${this.getBreadcrumbs()}
-        .appbarTheme=${'dark'}
-        .appbarUser=${{ name: 'User', status: 'online' }}
-        .mainmenuTabs=${this.getMainMenuTabs()}
-        .mainselectorOptions=${activeView?.menuItems || []}
-        @mainmenu-tab-select=${this.handleMainMenuSelect}
-        @mainselector-option-select=${this.handleSelectorSelect}
-      >
-        <dees-appui-view
-          slot="maincontent"
-          .viewConfig=${activeView}
-          @view-tab-select=${this.handleViewTabSelect}
-        ></dees-appui-view>
-      </dees-appui-base>
-    `;
-  }
-}
-```
-
-### Phase 2: View Definition
-
-```typescript
-// views/dashboard-view.ts
-export const dashboardView: IAppView = {
-  id: 'dashboard',
-  name: 'Dashboard',
-  description: 'System overview and metrics',
-  iconName: 'home',
-  tabs: [
-    {
-      key: 'overview',
-      iconName: 'chart-line',
-      action: () => console.log('Overview selected'),
-      content: () => html`
-        <dashboard-overview></dashboard-overview>
-      `
-    },
-    {
-      key: 'metrics',
-      iconName: 'tachometer-alt',
-      action: () => console.log('Metrics selected'),
-      content: () => html`
-        <dashboard-metrics></dashboard-metrics>
-      `
-    },
-    {
-      key: 'alerts',
-      iconName: 'bell',
-      action: () => console.log('Alerts selected'),
-      content: () => html`
-        <dashboard-alerts></dashboard-alerts>
-      `
-    }
-  ],
-  menuItems: [
-    { key: 'Time Range', action: () => showTimeRangeSelector() },
-    { key: 'Refresh Rate', action: () => showRefreshSettings() },
-    { key: 'Export Data', action: () => exportDashboardData() }
-  ]
-};
-```
-
-### Phase 3: View Management System
-
-```typescript
-// services/view-manager.ts
-export class ViewManager {
-  private views: Map<string, IAppView> = new Map();
-  private activeView: IAppView | null = null;
-  private viewCache: Map<string, any> = new Map();
-
-  registerView(view: IAppView) {
-    this.views.set(view.id, view);
-  }
-
-  async activateView(viewId: string) {
-    const view = this.views.get(viewId);
-    if (!view) throw new Error(`View ${viewId} not found`);
-
-    // Deactivate current view
-    if (this.activeView) {
-      await this.deactivateView(this.activeView.id);
-    }
-
-    // Activate new view
-    this.activeView = view;
-    
-    // Update navigation
-    this.updateMainSelector(view.menuItems);
-    this.updateBreadcrumbs(view);
-    
-    // Load view data if needed
-    if (!this.viewCache.has(viewId)) {
-      await this.loadViewData(view);
-    }
-    
-    return view;
-  }
-
-  private async loadViewData(view: IAppView) {
-    // Implement lazy loading of view data
-    const viewData = await import(`./views/${view.id}/data.js`);
-    this.viewCache.set(view.id, viewData);
-  }
-}
-```
-
-### Phase 4: Navigation Integration
-
-```typescript
-// navigation/app-navigation.ts
-export class AppNavigation {
-  constructor(
-    private viewManager: ViewManager,
-    private appShell: MyAppShell
-  ) {}
-
-  setupMainMenu(): ITab[] {
-    return [
-      {
-        key: 'dashboard',
-        iconName: 'home',
-        action: () => this.navigateToView('dashboard')
-      },
-      {
-        key: 'projects',
-        iconName: 'folder',
-        action: () => this.navigateToView('projects')
-      },
-      {
-        key: 'analytics',
-        iconName: 'chart-bar',
-        action: () => this.navigateToView('analytics')
-      },
-      {
-        key: 'settings',
-        iconName: 'cog',
-        action: () => this.navigateToView('settings')
-      }
-    ];
-  }
-
-  async navigateToView(viewId: string) {
-    const view = await this.viewManager.activateView(viewId);
-    this.appShell.activeViewId = viewId;
-    
-    // Update URL
-    window.history.pushState(
-      { viewId }, 
-      view.name, 
-      `/${viewId}`
-    );
-  }
-
-  handleBrowserNavigation() {
-    window.addEventListener('popstate', (event) => {
-      if (event.state?.viewId) {
-        this.navigateToView(event.state.viewId);
-      }
-    });
-  }
-}
-```
-
-### Phase 5: Dynamic View Loading
-
-```typescript
-// views/view-loader.ts
-export class ViewLoader {
-  private loadedViews: Set<string> = new Set();
-
-  async loadView(viewId: string): Promise<IAppView> {
-    if (this.loadedViews.has(viewId)) {
-      return this.getViewConfig(viewId);
-    }
-
-    // Dynamic import
-    const viewModule = await import(`./views/${viewId}/index.js`);
-    const viewConfig = viewModule.default as IAppView;
-    
-    // Register custom elements if needed
-    if (viewModule.registerElements) {
-      await viewModule.registerElements();
-    }
-    
-    this.loadedViews.add(viewId);
-    return viewConfig;
-  }
-
-  async preloadViews(viewIds: string[]) {
-    const promises = viewIds.map(id => this.loadView(id));
-    await Promise.all(promises);
-  }
-}
-```
-
-## Best Practices
-
-### 1. View Organization
-
-```
-src/
-├── views/
-│   ├── dashboard/
-│   │   ├── index.ts          # View configuration
-│   │   ├── data.ts           # Data fetching/management
-│   │   ├── components/       # View-specific components
-│   │   │   ├── dashboard-overview.ts
-│   │   │   ├── dashboard-metrics.ts
-│   │   │   └── dashboard-alerts.ts
-│   │   └── styles.ts         # View-specific styles
-│   ├── projects/
-│   │   └── ...
-│   └── settings/
-│       └── ...
-├── services/
-│   ├── view-manager.ts
-│   ├── navigation.ts
-│   └── state-manager.ts
-└── app-shell.ts
-```
-
-### 2. State Management
-
-```typescript
-// services/state-manager.ts
-export class StateManager {
-  private viewStates: Map<string, any> = new Map();
-
-  saveViewState(viewId: string, state: any) {
-    this.viewStates.set(viewId, {
-      ...this.getViewState(viewId),
-      ...state,
-      lastUpdated: Date.now()
-    });
-  }
-
-  getViewState(viewId: string): any {
-    return this.viewStates.get(viewId) || {};
-  }
-
-  // Persist to localStorage
-  persistState() {
-    const serialized = JSON.stringify(
-      Array.from(this.viewStates.entries())
-    );
-    localStorage.setItem('app-state', serialized);
-  }
-
-  restoreState() {
-    const saved = localStorage.getItem('app-state');
-    if (saved) {
-      const entries = JSON.parse(saved);
-      this.viewStates = new Map(entries);
-    }
-  }
-}
-```
-
-### 3. View Communication
-
-```typescript
-// events/view-events.ts
-export class ViewEventBus {
-  private eventTarget = new EventTarget();
-
-  emit(eventName: string, detail: any) {
-    this.eventTarget.dispatchEvent(
-      new CustomEvent(eventName, { detail })
-    );
-  }
-
-  on(eventName: string, handler: (detail: any) => void) {
-    this.eventTarget.addEventListener(eventName, (e: CustomEvent) => {
-      handler(e.detail);
-    });
-  }
-
-  // Cross-view communication
-  sendMessage(fromView: string, toView: string, message: any) {
-    this.emit('view-message', {
-      from: fromView,
-      to: toView,
-      message
-    });
-  }
-}
-```
-
-### 4. Responsive Design
-
-```typescript
-// views/responsive-view.ts
-export const createResponsiveView = (config: IAppView): IAppView => {
-  return {
-    ...config,
-    tabs: config.tabs.map(tab => ({
-      ...tab,
-      content: () => html`
-        <div class="view-content ${getDeviceClass()}">
-          ${tab.content()}
-        </div>
-      `
-    }))
-  };
-};
-
-function getDeviceClass(): string {
-  const width = window.innerWidth;
-  if (width < 768) return 'mobile';
-  if (width < 1024) return 'tablet';
-  return 'desktop';
-}
-```
-
-### 5. Performance Optimization
-
-```typescript
-// optimization/lazy-components.ts
-export const lazyComponent = (
-  importFn: () => Promise<any>,
-  componentName: string
-) => {
-  let loaded = false;
-  
-  return () => {
-    if (!loaded) {
-      importFn().then(() => {
-        loaded = true;
-      });
-      return html`<dees-spinner></dees-spinner>`;
-    }
-    
-    return html`<${componentName}></${componentName}>`;
-  };
-};
-
-// Usage in view
-tabs: [
-  {
-    key: 'heavy-component',
-    content: lazyComponent(
-      () => import('./components/heavy-component.js'),
-      'heavy-component'
-    )
-  }
-]
-```
-
-## Advanced Features
-
-### 1. View Permissions
-
-```typescript
-interface IAppViewWithPermissions extends IAppView {
-  requiredPermissions?: string[];
-  visibleTo?: (user: User) => boolean;
-}
-
-class PermissionManager {
-  canAccessView(view: IAppViewWithPermissions, user: User): boolean {
-    if (view.visibleTo) {
-      return view.visibleTo(user);
-    }
-    
-    if (view.requiredPermissions) {
-      return view.requiredPermissions.every(
-        perm => user.permissions.includes(perm)
-      );
-    }
-    
-    return true;
-  }
-}
-```
-
-### 2. View Lifecycle Hooks
-
-```typescript
-interface IAppViewLifecycle extends IAppView {
-  onActivate?: () => Promise<void>;
-  onDeactivate?: () => Promise<void>;
-  onTabChange?: (oldTab: string, newTab: string) => void;
-  onDestroy?: () => void;
-}
-```
-
-### 3. Dynamic Menu Generation
-
-```typescript
-class DynamicMenuBuilder {
-  buildMainMenu(views: IAppView[], user: User): ITab[] {
-    return views
-      .filter(view => this.canShowInMenu(view, user))
-      .map(view => ({
-        key: view.id,
-        iconName: view.iconName || 'file',
-        action: () => this.navigation.navigateToView(view.id)
-      }));
-  }
-
-  buildSelectorMenu(view: IAppView, context: any): ISelectionOption[] {
-    const baseItems = view.menuItems || [];
-    const contextItems = this.getContextualItems(view, context);
-    
-    return [...baseItems, ...contextItems];
-  }
-}
-```
-
-## Migration Strategy
-
-For existing applications:
-
-1. **Identify Views**: Map existing routes/pages to views
-2. **Extract Components**: Move page-specific components into view folders
-3. **Define View Configs**: Create IAppView configurations
-4. **Update Navigation**: Replace existing routing with view navigation
-5. **Migrate State**: Move page state to ViewManager
-6. **Test & Optimize**: Ensure smooth transitions and performance
-
-## Example Application Structure
-
-```typescript
-// main.ts
-import { ViewManager } from './services/view-manager.js';
-import { AppNavigation } from './services/navigation.js';
-import { dashboardView } from './views/dashboard/index.js';
-import { projectsView } from './views/projects/index.js';
-import { settingsView } from './views/settings/index.js';
-
-const app = new MyAppShell();
-const viewManager = new ViewManager();
-const navigation = new AppNavigation(viewManager, app);
-
-// Register views
-viewManager.registerView(dashboardView);
-viewManager.registerView(projectsView);
-viewManager.registerView(settingsView);
-
-// Setup navigation
-app.views = [dashboardView, projectsView, settingsView];
-navigation.setupMainMenu();
-navigation.handleBrowserNavigation();
-
-// Initial navigation
-navigation.navigateToView('dashboard');
-
-document.body.appendChild(app);
-```
-
-This architecture provides:
-- **Modularity**: Each view is self-contained
-- **Scalability**: Easy to add new views
-- **Performance**: Lazy loading and caching
-- **Consistency**: Unified navigation and layout
-- **Flexibility**: Customizable per view
-- **Maintainability**: Clear separation of concerns

readme.md

@@ -1,5 +1,8 @@
 # @design.estate/dees-catalog
-An extensive library for building modern web applications with dynamic components using Web Components, JavaScript, and TypeScript.
+A comprehensive web components library built with TypeScript and LitElement, providing 75+ UI components for building modern web applications with consistent design and behavior.
+
+## Development Guide
+For developers working on this library, please refer to the [UI Components Playbook](readme.playbook.md) for comprehensive patterns, best practices, and architectural guidelines.
 
 ## Install
 To install the `@design.estate/dees-catalog` library, you can use npm or any other compatible JavaScript package manager:
@@ -12,15 +15,16 @@ npm install @design.estate/dees-catalog
 
 | Category | Components |
 |----------|------------|
-| 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`, `DeesMobileNavigation` |
-| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesEditorMarkdownoutlet`, `DeesTerminal`, `DeesUpdater` |
-| Auth & Utilities | `DeesSimpleAppdash`, `DeesSimpleLogin` |
+| Core UI | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
+| Forms | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
+| Layout | [`DeesAppuiBase`](#deesappuibase), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiMainselector`](#deesappuimainselector), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesAppuiView`](#deesappuiview), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| Data Display | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
+| Visualization | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
+| Dialogs & Overlays | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
+| Navigation | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
+| Development | [`DeesEditor`](#deeseditor), [`DeesEditorMarkdown`](#deeseditormarkdown), [`DeesEditorMarkdownoutlet`](#deeseditormarkdownoutlet), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
+| Auth & Utilities | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
+| Shopping | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
 
 ## Detailed Component Documentation
 
@@ -70,14 +74,36 @@ Interactive chips/tags with selection capabilities.
 ```
 
 #### `DeesIcon`
-Display icons from various icon sets including FontAwesome.
+Display icons from FontAwesome and Lucide icon libraries with library prefixes.
 
 ```typescript
+// FontAwesome icons - use 'fa:' prefix
 <dees-icon
-  icon="home"           // FontAwesome icon name
-  type="solid"          // Options: solid, regular, brands
-  size="1.5rem"         // Optional: custom size
+  icon="fa:check"       // FontAwesome icon with fa: prefix
+  iconSize="24"         // Size in pixels
+  color="#22c55e"       // Optional: custom color
+></dees-icon>
+
+// Lucide icons - use 'lucide:' prefix  
+<dees-icon
+  icon="lucide:menu"    // Lucide icon with lucide: prefix
+  iconSize="24"         // Size in pixels
   color="#007bff"       // Optional: custom color
+  strokeWidth="2"       // Optional: stroke width for Lucide icons
+></dees-icon>
+
+// Available FontAwesome icons include:
+// fa:check, fa:bell, fa:gear, fa:trash, fa:copy, fa:paste, fa:eye, fa:eyeSlash,
+// fa:plus, fa:minus, fa:circleInfo, fa:circleCheck, fa:circleXmark, fa:message,
+// fa:arrowRight, fa:facebook, fa:twitter, fa:linkedin, fa:instagram, etc.
+
+// Available Lucide icons include:
+// lucide:menu, lucide:settings, lucide:home, lucide:file, lucide:folder,
+// lucide:search, lucide:user, lucide:heart, lucide:star, lucide:download, etc.
+
+// Legacy API (deprecated but still supported)
+<dees-icon
+  iconFA="check"        // Without prefix - assumes FontAwesome
 ></dees-icon>
 ```
 
@@ -431,6 +457,78 @@ Dynamic list input for managing arrays of typed values.
 ></dees-input-typelist>
 ```
 
+#### `DeesInputDatepicker`
+Date and time picker component with calendar interface and manual typing support.
+
+```typescript
+<dees-input-datepicker
+  key="eventDate"
+  label="Event Date"
+  placeholder="YYYY-MM-DD"
+  value="2025-01-15T14:30:00Z"  // ISO string format
+  dateFormat="YYYY-MM-DD"        // Display format (default: YYYY-MM-DD)
+  enableTime={true}              // Enable time selection
+  timeFormat="24h"               // Options: 24h, 12h
+  minuteIncrement={15}           // Time step in minutes
+  minDate="2025-01-01"          // Minimum selectable date
+  maxDate="2025-12-31"          // Maximum selectable date
+  .disabledDates=${[            // Array of disabled dates
+    '2025-01-10', 
+    '2025-01-11'
+  ]}
+  weekStartsOn={1}              // 0 = Sunday, 1 = Monday
+  required
+  @change=${handleDateChange}
+></dees-input-datepicker>
+```
+
+Key Features:
+- Interactive calendar popup
+- Manual date typing with multiple formats
+- Optional time selection
+- Configurable date format
+- Min/max date constraints
+- Disable specific dates
+- Keyboard navigation
+- Today button
+- Clear functionality
+- 12/24 hour time formats
+- Theme-aware styling
+- Live parsing and validation
+
+Manual Input Formats:
+```typescript
+// Date formats supported
+"2023-12-20"     // ISO format (YYYY-MM-DD)
+"20.12.2023"     // European format (DD.MM.YYYY)
+"12/20/2023"     // US format (MM/DD/YYYY)
+
+// Date with time (add space and time after any date format)
+"2023-12-20 14:30"
+"20.12.2023 9:45"
+"12/20/2023 16:00"
+```
+
+The component automatically parses and validates input as you type, updating the internal date value when a valid date is recognized.
+
+#### `DeesInputSearchselect`
+Search-enabled dropdown selection component.
+
+```typescript
+<dees-input-searchselect
+  key="category"
+  label="Select Category"
+  placeholder="Search categories..."
+  .options=${[
+    { key: 'tech', label: 'Technology' },
+    { key: 'health', label: 'Healthcare' },
+    { key: 'finance', label: 'Finance' }
+  ]}
+  required
+  @change=${handleCategoryChange}
+></dees-input-searchselect>
+```
+
 #### `DeesInputRichtext`
 Rich text editor with formatting toolbar powered by TipTap.
 
@@ -529,9 +627,9 @@ Base container component for application layout structure with integrated appbar
   
   // Main menu configuration (left sidebar)
   .mainmenuTabs=${[
-    { key: 'dashboard', iconName: 'home', action: () => {} },
-    { key: 'projects', iconName: 'folder', action: () => {} },
-    { key: 'settings', iconName: 'cog', action: () => {} }
+    { key: 'dashboard', iconName: 'lucide:home', action: () => {} },
+    { key: 'projects', iconName: 'lucide:folder', action: () => {} },
+    { key: 'settings', iconName: 'lucide:settings', action: () => {} }
   ]}
   .mainmenuSelectedTab=${selectedTab}
   
@@ -545,7 +643,7 @@ Base container component for application layout structure with integrated appbar
   
   // Main content tabs
   .maincontentTabs=${[
-    { key: 'tab1', iconName: 'file', action: () => {} }
+    { key: 'tab1', iconName: 'lucide:file', action: () => {} }
   ]}
   
   // Event handlers
@@ -919,6 +1017,100 @@ Responsive navigation component for mobile devices.
 ></dees-mobile-navigation>
 ```
 
+#### `DeesDashboardGrid`
+Drag-and-drop grid layout system for creating customizable dashboards.
+
+```typescript
+<dees-dashboardgrid
+  .widgets=${[
+    {
+      id: 'widget1',
+      x: 0,          // Grid column position
+      y: 0,          // Grid row position
+      w: 4,          // Width in grid units
+      h: 3,          // Height in grid units
+      minW: 2,       // Minimum width
+      minH: 2,       // Minimum height
+      maxW: 6,       // Maximum width
+      title: 'Sales Overview',
+      icon: 'fa:chart-line',
+      content: html`<div>Widget content here</div>`,
+      noMove: false,  // Allow moving
+      noResize: false // Allow resizing
+    },
+    {
+      id: 'widget2',
+      x: 4,
+      y: 0,
+      w: 4,
+      h: 3,
+      title: 'Recent Activity',
+      content: html`<dees-table .data=${activityData}></dees-table>`,
+      autoPosition: true  // Auto-find position
+    }
+  ]}
+  columns={12}         // Number of grid columns
+  cellHeight={80}      // Height of each grid cell in pixels
+  cellHeightUnit="px"  // Options: px, em, rem, auto
+  margin={10}          // Gap between widgets
+  editable={true}      // Enable drag and resize
+  showGridLines={false} // Show grid guidelines
+  enableAnimation={true} // Smooth transitions
+  rtl={false}          // Right-to-left support
+  @widget-move=${handleWidgetMove}
+  @widget-resize=${handleWidgetResize}
+></dees-dashboardgrid>
+
+// Programmatic methods
+const grid = document.querySelector('dees-dashboardgrid');
+
+// Add a new widget
+grid.addWidget({
+  id: 'newWidget',
+  x: 0,
+  y: 0,
+  w: 3,
+  h: 2,
+  content: html`<div>New widget</div>`
+}, true); // true = auto-position
+
+// Remove widget
+grid.removeWidget('widget1');
+
+// Update widget
+grid.updateWidget('widget2', { 
+  title: 'Updated Title',
+  w: 6 
+});
+
+// Get/set layout
+const layout = grid.getLayout(); // Returns position data
+grid.setLayout(savedLayout);      // Restore positions
+
+// Compact widgets
+grid.compact('vertical');  // Or 'horizontal'
+
+// Lock/unlock editing
+grid.lockGrid();
+grid.unlockGrid();
+```
+
+Key Features:
+- Drag-and-drop widget repositioning
+- Resize handles on edges and corners
+- Grid-based layout system
+- Collision detection
+- Auto-positioning for new widgets
+- Configurable constraints (min/max dimensions)
+- Lock individual widgets or entire grid
+- Compact layout algorithm
+- Save/restore layout positions
+- RTL layout support
+- Optional grid lines for alignment
+- Smooth animations
+- Responsive sizing
+- Empty state display
+
 ### Data Display Components
 
 #### `DeesTable`
@@ -1913,6 +2105,69 @@ Key Features:
 - Responsive layout
 - Loading states
 
+### Shopping Components
+
+#### `DeesShoppingProductcard`
+Product card component for e-commerce applications.
+
+```typescript
+<dees-shopping-productcard
+  .productData=${{
+    name: 'Premium Headphones',
+    category: 'Electronics',
+    description: 'High-quality wireless headphones with noise cancellation',
+    price: 199.99,
+    originalPrice: 249.99,  // Shows strikethrough price
+    currency: '$',
+    inStock: true,
+    stockText: 'In Stock',  // Custom stock text
+    imageUrl: '/images/headphones.jpg',
+    iconName: 'lucide:headphones' // Fallback icon if no image
+  }}
+  quantity={1}               // Current quantity
+  showQuantitySelector={true} // Show quantity selector
+  selectable={false}         // Enable selection mode
+  selected={false}           // Selection state
+  @quantityChange=${(e) => handleQuantityChange(e.detail)}
+  @selectionChange=${(e) => handleSelectionChange(e.detail)}
+></dees-shopping-productcard>
+```
+
+Key Features:
+- Product image with fallback icon
+- Category label
+- Product name and description
+- Price display with original price strikethrough
+- Stock status indicator
+- Built-in quantity selector
+- Selection mode for bulk operations
+- Hover effects
+- Responsive design
+- Theme-aware styling
+
+Product Data Interface:
+```typescript
+interface IProductData {
+  name: string;
+  category?: string;
+  description?: string;
+  price: number;
+  originalPrice?: number;
+  currency?: string;
+  inStock?: boolean;
+  stockText?: string;
+  imageUrl?: string;
+  iconName?: string;
+}
+```
+
+Common Use Cases:
+- Product listings
+- Shopping carts
+- Order summaries
+- Product comparisons
+- Wishlist displays
+
 ## 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.

readme.playbook.md

@@ -0,0 +1,784 @@
+# UI Components Playbook
+
+This playbook provides comprehensive guidance for creating and maintaining UI components in the @design.estate/dees-catalog library. Follow these patterns and best practices to ensure consistency, maintainability, and quality.
+
+## Table of Contents
+
+1. [Component Creation Checklist](#component-creation-checklist)
+2. [Architectural Patterns](#architectural-patterns)
+3. [Component Types and Base Classes](#component-types-and-base-classes)
+4. [Theming System](#theming-system)
+5. [Event Handling](#event-handling)
+6. [State Management](#state-management)
+7. [Form Components](#form-components)
+8. [Overlay Components](#overlay-components)
+9. [Complex Components](#complex-components)
+10. [Performance Optimization](#performance-optimization)
+11. [Focus Management](#focus-management)
+12. [Demo System](#demo-system)
+13. [Common Pitfalls and Anti-patterns](#common-pitfalls-and-anti-patterns)
+14. [Code Examples](#code-examples)
+
+## Component Creation Checklist
+
+When creating a new component, follow this checklist:
+
+- [ ] Choose the appropriate base class (`DeesElement` or `DeesInputBase`)
+- [ ] Use `@customElement('dees-componentname')` decorator
+- [ ] Implement consistent theming with `cssManager.bdTheme()`
+- [ ] Create demo function in separate `.demo.ts` file
+- [ ] Export component from `ts_web/elements/index.ts`
+- [ ] Use proper TypeScript types and interfaces (prefix with `I` for interfaces, `T` for types)
+- [ ] Implement proper event handling with bubbling and composition
+- [ ] Consider mobile responsiveness
+- [ ] Add focus states for accessibility
+- [ ] Clean up resources in `destroy()` method
+- [ ] Follow lowercase naming convention for files
+- [ ] Add z-index registry support if it's an overlay component
+
+## Architectural Patterns
+
+### Base Component Structure
+
+```typescript
+import { customElement, property, state, css, TemplateResult, html } from '@design.estate/dees-element';
+import { DeesElement } from '@design.estate/dees-element';
+import * as cssManager from './00colors.js';
+import * as demoFunc from './dees-componentname.demo.js';
+
+@customElement('dees-componentname')
+export class DeesComponentName extends DeesElement {
+  // Static demo reference
+  public static demo = demoFunc.demoFunc;
+
+  // Public properties (reactive, can be set via attributes)
+  @property({ type: String })
+  public label: string = '';
+
+  @property({ type: Boolean, reflect: true })
+  public disabled: boolean = false;
+
+  // Internal state (reactive, but not exposed as attributes)
+  @state()
+  private internalState: string = '';
+
+  // Static styles with theme support
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+      }
+    `
+  ];
+
+  // Render method
+  public render(): TemplateResult {
+    return html`
+      <div class="main-container">
+        <!-- Component content -->
+      </div>
+    `;
+  }
+
+  // Lifecycle methods
+  public connectedCallback() {
+    super.connectedCallback();
+    // Setup that needs DOM access
+  }
+
+  public async firstUpdated() {
+    // One-time initialization after first render
+  }
+
+  // Cleanup
+  public destroy() {
+    // Clean up listeners, observers, registrations
+    super.destroy();
+  }
+}
+```
+
+### Advanced Patterns
+
+#### 1. Separation of Concerns (Complex Components)
+
+For complex components like WYSIWYG editors, separate concerns into handler classes:
+
+```typescript
+export class DeesComplexComponent extends DeesElement {
+  // Orchestrator pattern - main component coordinates handlers
+  private inputHandler: InputHandler;
+  private stateHandler: StateHandler;
+  private renderHandler: RenderHandler;
+
+  constructor() {
+    super();
+    this.inputHandler = new InputHandler(this);
+    this.stateHandler = new StateHandler(this);
+    this.renderHandler = new RenderHandler(this);
+  }
+}
+```
+
+#### 2. Singleton Pattern (Global Components)
+
+For global UI elements like menus:
+
+```typescript
+export class DeesGlobalMenu extends DeesElement {
+  private static instance: DeesGlobalMenu;
+
+  public static getInstance(): DeesGlobalMenu {
+    if (!DeesGlobalMenu.instance) {
+      DeesGlobalMenu.instance = new DeesGlobalMenu();
+      document.body.appendChild(DeesGlobalMenu.instance);
+    }
+    return DeesGlobalMenu.instance;
+  }
+}
+```
+
+#### 3. Registry Pattern (Z-Index Management)
+
+Use centralized registries for global state:
+
+```typescript
+class ComponentRegistry {
+  private static instance: ComponentRegistry;
+  private registry = new WeakMap<HTMLElement, number>();
+  
+  public register(element: HTMLElement, value: number) {
+    this.registry.set(element, value);
+  }
+  
+  public unregister(element: HTMLElement) {
+    this.registry.delete(element);
+  }
+}
+```
+
+## Component Types and Base Classes
+
+### Standard Component (extends DeesElement)
+
+Use for most UI components:
+- Buttons, badges, icons
+- Layout components
+- Data display components
+- Overlay components
+
+### Form Input Component (extends DeesInputBase)
+
+Use for all form inputs:
+- Text inputs, dropdowns, checkboxes
+- Date pickers, file uploads
+- Rich text editors
+
+**Required implementations:**
+```typescript
+export class DeesInputCustom extends DeesInputBase<ValueType> {
+  // Required: Get current value
+  public getValue(): ValueType {
+    return this.value;
+  }
+
+  // Required: Set value programmatically
+  public setValue(value: ValueType): void {
+    this.value = value;
+    this.changeSubject.next(this); // Notify form
+  }
+
+  // Optional: Custom validation
+  public async validate(): Promise<boolean> {
+    // Custom validation logic
+    return true;
+  }
+}
+```
+
+## Theming System
+
+### DO: Use Theme Functions
+
+Always use `cssManager.bdTheme()` for colors that change between themes:
+
+```typescript
+// ✅ CORRECT
+background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+color: ${cssManager.bdTheme('#000000', '#ffffff')};
+border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333333')};
+
+// ❌ INCORRECT
+background: #ffffff; // Hard-coded color
+color: var(--custom-color); // Custom CSS variable
+```
+
+### DO: Use Consistent Color Values
+
+Reference shared color constants when possible:
+
+```typescript
+// From 00colors.ts
+background: ${cssManager.bdTheme(colors.bright.background, colors.dark.background)};
+```
+
+## Event Handling
+
+### DO: Dispatch Custom Events Properly
+
+```typescript
+// ✅ CORRECT - Events bubble and cross shadow DOM
+this.dispatchEvent(new CustomEvent('dees-componentname-change', {
+  detail: { value: this.value },
+  bubbles: true,
+  composed: true
+}));
+
+// ❌ INCORRECT - Event won't propagate properly
+this.dispatchEvent(new CustomEvent('change', {
+  detail: { value: this.value }
+  // Missing bubbles and composed
+}));
+```
+
+### DO: Use Event Delegation
+
+For dynamic content, use event delegation:
+
+```typescript
+// ✅ CORRECT - Single listener for all items
+this.addEventListener('click', (e: MouseEvent) => {
+  const item = (e.target as HTMLElement).closest('.item');
+  if (item) {
+    this.handleItemClick(item);
+  }
+});
+
+// ❌ INCORRECT - Multiple listeners
+this.items.forEach(item => {
+  item.addEventListener('click', () => this.handleItemClick(item));
+});
+```
+
+## State Management
+
+### DO: Use Appropriate Property Decorators
+
+```typescript
+// Public API - use @property
+@property({ type: String })
+public label: string;
+
+// Internal state - use @state
+@state()
+private isLoading: boolean = false;
+
+// Reflect to attribute when needed
+@property({ type: Boolean, reflect: true })
+public disabled: boolean = false;
+```
+
+### DON'T: Manipulate State in Render
+
+```typescript
+// ❌ INCORRECT - Side effects in render
+public render() {
+  this.counter++; // Don't modify state
+  return html`<div>${this.counter}</div>`;
+}
+
+// ✅ CORRECT - Pure render function
+public render() {
+  return html`<div>${this.counter}</div>`;
+}
+```
+
+## Form Components
+
+### DO: Extend DeesInputBase
+
+All form inputs must extend the base class:
+
+```typescript
+export class DeesInputNew extends DeesInputBase<string> {
+  // Inherits: key, label, value, required, disabled, validationState
+}
+```
+
+### DO: Emit Changes Consistently
+
+```typescript
+private handleInput(e: Event) {
+  this.value = (e.target as HTMLInputElement).value;
+  this.changeSubject.next(this); // Notify form system
+}
+```
+
+### DO: Support Standard Form Properties
+
+```typescript
+// All form inputs should support:
+@property() public key: string;
+@property() public label: string;
+@property() public required: boolean = false;
+@property() public disabled: boolean = false;
+@property() public validationState: 'valid' | 'warn' | 'invalid';
+```
+
+## Overlay Components
+
+### DO: Use Z-Index Registry
+
+Never hardcode z-index values:
+
+```typescript
+// ✅ CORRECT
+import { zIndexRegistry } from './00zindex.js';
+
+public async show() {
+  this.modalZIndex = zIndexRegistry.getNextZIndex();
+  zIndexRegistry.register(this, this.modalZIndex);
+  this.style.zIndex = `${this.modalZIndex}`;
+}
+
+public async hide() {
+  zIndexRegistry.unregister(this);
+}
+
+// ❌ INCORRECT
+public async show() {
+  this.style.zIndex = '9999'; // Hardcoded z-index
+}
+```
+
+### DO: Use Window Layers
+
+For modal backdrops:
+
+```typescript
+import { DeesWindowLayer } from './dees-windowlayer.js';
+
+private windowLayer: DeesWindowLayer;
+
+public async show() {
+  this.windowLayer = new DeesWindowLayer();
+  this.windowLayer.zIndex = zIndexRegistry.getNextZIndex();
+  document.body.append(this.windowLayer);
+}
+```
+
+## Complex Components
+
+### DO: Use Handler Classes
+
+For complex logic, separate into specialized handlers:
+
+```typescript
+// wysiwyg/handlers/input.handler.ts
+export class InputHandler {
+  constructor(private component: DeesInputWysiwyg) {}
+  
+  public handleInput(event: InputEvent) {
+    // Specialized input handling
+  }
+}
+
+// Main component orchestrates
+export class DeesInputWysiwyg extends DeesInputBase {
+  private inputHandler = new InputHandler(this);
+}
+```
+
+### DO: Use Programmatic Rendering
+
+For performance-critical updates that shouldn't trigger re-renders:
+
+```typescript
+// ✅ CORRECT - Direct DOM manipulation when needed
+private updateBlockContent(blockId: string, content: string) {
+  const blockElement = this.shadowRoot.querySelector(`#${blockId}`);
+  if (blockElement) {
+    blockElement.textContent = content; // Direct update
+  }
+}
+
+// ❌ INCORRECT - Triggering full re-render
+private updateBlockContent(blockId: string, content: string) {
+  this.blocks.find(b => b.id === blockId).content = content;
+  this.requestUpdate(); // Unnecessary re-render
+}
+```
+
+## Performance Optimization
+
+### DO: Debounce Expensive Operations
+
+```typescript
+private resizeTimeout: number;
+
+private handleResize = () => {
+  clearTimeout(this.resizeTimeout);
+  this.resizeTimeout = window.setTimeout(() => {
+    this.updateLayout();
+  }, 250);
+};
+```
+
+### DO: Use Observers Efficiently
+
+```typescript
+// Clean up observers
+public disconnectedCallback() {
+  super.disconnectedCallback();
+  this.resizeObserver?.disconnect();
+  this.mutationObserver?.disconnect();
+}
+```
+
+### DO: Implement Virtual Scrolling
+
+For large lists:
+
+```typescript
+// Only render visible items
+private getVisibleItems() {
+  const scrollTop = this.scrollContainer.scrollTop;
+  const containerHeight = this.scrollContainer.clientHeight;
+  const itemHeight = 50;
+  
+  const startIndex = Math.floor(scrollTop / itemHeight);
+  const endIndex = Math.ceil((scrollTop + containerHeight) / itemHeight);
+  
+  return this.items.slice(startIndex, endIndex);
+}
+```
+
+## Focus Management
+
+### DO: Handle Focus Timing
+
+```typescript
+// ✅ CORRECT - Wait for render
+async focusInput() {
+  await this.updateComplete;
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  this.inputElement?.focus();
+}
+
+// ❌ INCORRECT - Focus too early
+focusInput() {
+  this.inputElement?.focus(); // Element might not exist
+}
+```
+
+### DO: Prevent Focus Loss
+
+```typescript
+// For global menus
+constructor() {
+  super();
+  // Prevent focus loss when clicking menu
+  this.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+  });
+}
+```
+
+### DO: Implement Blur Debouncing
+
+```typescript
+private blurTimeout: number;
+
+private handleBlur = () => {
+  clearTimeout(this.blurTimeout);
+  this.blurTimeout = window.setTimeout(() => {
+    // Check if truly blurred
+    if (!this.contains(document.activeElement)) {
+      this.handleTrueBlur();
+    }
+  }, 100);
+};
+```
+
+## Demo System
+
+### DO: Create Comprehensive Demos
+
+Every component needs a demo:
+
+```typescript
+// dees-button.demo.ts
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <dees-button>Default Button</dees-button>
+  <dees-button type="primary">Primary Button</dees-button>
+  <dees-button type="danger" disabled>Disabled Danger</dees-button>
+`;
+
+// In component file
+import * as demoFunc from './dees-button.demo.js';
+
+export class DeesButton extends DeesElement {
+  public static demo = demoFunc.demoFunc;
+}
+```
+
+### DO: Include All Variants
+
+Show all component states and variations in demos:
+- Default state
+- Different types/variants
+- Disabled state
+- Loading state
+- Error states
+- Edge cases (long text, empty content)
+
+## Common Pitfalls and Anti-patterns
+
+### ❌ DON'T: Hardcode Z-Index Values
+
+```typescript
+// ❌ WRONG
+this.style.zIndex = '9999';
+
+// ✅ CORRECT
+this.style.zIndex = `${zIndexRegistry.getNextZIndex()}`;
+```
+
+### ❌ DON'T: Skip Base Classes
+
+```typescript
+// ❌ WRONG - Form input without base class
+export class DeesInputCustom extends DeesElement {
+  // Missing standard form functionality
+}
+
+// ✅ CORRECT
+export class DeesInputCustom extends DeesInputBase<string> {
+  // Inherits all form functionality
+}
+```
+
+### ❌ DON'T: Forget Theme Support
+
+```typescript
+// ❌ WRONG
+background-color: #ffffff;
+color: #000000;
+
+// ✅ CORRECT
+background-color: ${cssManager.bdTheme('#ffffff', '#09090b')};
+color: ${cssManager.bdTheme('#000000', '#ffffff')};
+```
+
+### ❌ DON'T: Create Components Without Demos
+
+```typescript
+// ❌ WRONG
+export class DeesComponent extends DeesElement {
+  // No demo property
+}
+
+// ✅ CORRECT
+export class DeesComponent extends DeesElement {
+  public static demo = demoFunc.demoFunc;
+}
+```
+
+### ❌ DON'T: Emit Non-Bubbling Events
+
+```typescript
+// ❌ WRONG
+this.dispatchEvent(new CustomEvent('change', {
+  detail: this.value
+}));
+
+// ✅ CORRECT
+this.dispatchEvent(new CustomEvent('change', {
+  detail: this.value,
+  bubbles: true,
+  composed: true
+}));
+```
+
+### ❌ DON'T: Skip Cleanup
+
+```typescript
+// ❌ WRONG
+public connectedCallback() {
+  window.addEventListener('resize', this.handleResize);
+}
+
+// ✅ CORRECT
+public connectedCallback() {
+  super.connectedCallback();
+  window.addEventListener('resize', this.handleResize);
+}
+
+public disconnectedCallback() {
+  super.disconnectedCallback();
+  window.removeEventListener('resize', this.handleResize);
+}
+```
+
+### ❌ DON'T: Use Inline Styles for Theming
+
+```typescript
+// ❌ WRONG
+<div style="background-color: ${this.darkMode ? '#000' : '#fff'}">
+
+// ✅ CORRECT
+<div class="themed-container">
+// In styles:
+.themed-container {
+  background-color: ${cssManager.bdTheme('#ffffff', '#000000')};
+}
+```
+
+### ❌ DON'T: Forget Mobile Responsiveness
+
+```typescript
+// ❌ WRONG
+:host {
+  width: 800px; // Fixed width
+}
+
+// ✅ CORRECT
+:host {
+  width: 100%;
+  max-width: 800px;
+}
+
+@media (max-width: 768px) {
+  :host {
+    /* Mobile adjustments */
+  }
+}
+```
+
+## Code Examples
+
+### Example: Creating a New Button Variant
+
+```typescript
+// dees-special-button.ts
+import { customElement, property, css, html } from '@design.estate/dees-element';
+import { DeesElement } from '@design.estate/dees-element';
+import * as cssManager from './00colors.js';
+import * as demoFunc from './dees-special-button.demo.js';
+
+@customElement('dees-special-button')
+export class DeesSpecialButton extends DeesElement {
+  public static demo = demoFunc.demoFunc;
+
+  @property({ type: String })
+  public text: string = 'Click me';
+
+  @property({ type: Boolean, reflect: true })
+  public loading: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .button {
+        padding: 8px 16px;
+        background: ${cssManager.bdTheme('#0066ff', '#0044cc')};
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
+      }
+
+      :host([loading]) .button {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <button class="button" ?disabled=${this.loading} @click=${this.handleClick}>
+        ${this.loading ? html`<dees-spinner size="small"></dees-spinner>` : this.text}
+      </button>
+    `;
+  }
+
+  private handleClick() {
+    this.dispatchEvent(new CustomEvent('special-click', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+}
+```
+
+### Example: Creating a Form Input
+
+```typescript
+// dees-input-special.ts
+export class DeesInputSpecial extends DeesInputBase<string> {
+  public static demo = demoFunc.demoFunc;
+
+  public render() {
+    return html`
+      <dees-label .label=${this.label} .required=${this.required}>
+        <input
+          type="text"
+          .value=${this.value || ''}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+        />
+      </dees-label>
+    `;
+  }
+
+  private handleInput(e: Event) {
+    this.value = (e.target as HTMLInputElement).value;
+    this.changeSubject.next(this);
+  }
+
+  private handleBlur() {
+    this.dispatchEvent(new CustomEvent('blur', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+    this.changeSubject.next(this);
+  }
+}
+```
+
+## Summary
+
+This playbook represents the collective wisdom and patterns found in the @design.estate/dees-catalog component library. Following these guidelines will help you create components that are:
+
+- **Consistent**: Following established patterns
+- **Maintainable**: Easy to understand and modify
+- **Performant**: Optimized for real-world use
+- **Accessible**: Usable by everyone
+- **Theme-aware**: Supporting light and dark modes
+- **Well-integrated**: Working seamlessly with the component ecosystem
+
+Remember: When in doubt, look at existing components for examples. The codebase itself is the best documentation of these patterns in action.

readme.refactoring-summary.md

@@ -1,138 +0,0 @@
-# WYSIWYG Editor Refactoring Progress Summary
-
-## Latest Updates
-
-### Selection Highlighting Fix ✅
-- **Issue**: "Paragraphs are not highlighted consistently, headings are always highlighted"
-- **Root Cause**: The `shouldUpdate` method in `dees-wysiwyg-block.ts` was using a generic `.block` selector that would match the first element with that class, not necessarily the correct block element
-- **Solution**: Changed the selector to be more specific: `.block.${blockType}` which ensures the correct element is found for each block type
-- **Result**: All block types now highlight consistently when selected
-
-### Enter Key Block Creation Fix ✅
-- **Issue**: "When pressing enter and jumping to new block then typing something: The cursor is not at the beginning of the new block and there is content"
-- **Root Cause**: Block handlers were rendering content with template syntax `${block.content || ''}` in their render methods, which violates the static HTML principle
-- **Solution**: 
-  - Removed all `${block.content}` from render methods in paragraph, heading, quote, and code block handlers
-  - Content is now set programmatically in the setup() method only when needed
-  - Fixed `setCursorToStart` and `setCursorToEnd` to always find elements fresh instead of relying on cached `blockElement`
-- **Result**: New empty blocks remain truly empty, cursor positioning works correctly
-
-### Backspace Key Deletion Fix ✅
-- **Issue**: "After typing in a new block, pressing backspace deletes the whole block instead of just the last character"
-- **Root Cause**: 
-  1. `getCursorPositionInElement` was using `element.contains()` which doesn't work across Shadow DOM boundaries
-  2. The backspace handler was checking `block.content === ''` which only contains the stored content, not the actual DOM content
-- **Solution**:
-  1. Fixed `getCursorPositionInElement` to use `containsAcrossShadowDOM` for proper Shadow DOM support
-  2. Updated backspace handler to get actual content from DOM using `blockComponent.getContent()` instead of relying on stored `block.content`
-  3. Added debug logging to track cursor position and content state
-- **Result**: Backspace now correctly deletes individual characters instead of the whole block
-
-### Arrow Left Navigation Fix ✅
-- **Issue**: "When jumping to the previous block from the beginning of a block with arrow left, the cursor should be at the end of the previous block, not at the start"
-- **Root Cause**: Browser's default focus behavior places cursor at the beginning of contenteditable elements, overriding our cursor positioning
-- **Solution**: For 'end' position, set up the selection range BEFORE focusing the element:
-  1. Create a range pointing to the end of content
-  2. Apply the selection
-  3. Then focus the element (which preserves the existing selection)
-  4. Only use setCursorToEnd for empty blocks
-- **Result**: Arrow left navigation now correctly places cursor at the end of the previous block
-
-## Completed Phases
-
-### Phase 1: Infrastructure ✅
-- Created modular block handler architecture
-- Implemented `IBlockHandler` interface and `BaseBlockHandler` class
-- Created `BlockRegistry` for dynamic block type registration
-- Set up proper file structure under `blocks/` directory
-
-### Phase 2: Proof of Concept ✅
-- Successfully migrated divider block as the simplest example
-- Validated the architecture works correctly
-- Established patterns for block migration
-
-### Phase 3: Text Blocks ✅
-- **Paragraph Block**: Full editing support with text splitting, selection handling, and cursor tracking
-- **Heading Blocks**: All three heading levels (h1, h2, h3) with unified handler
-- **Quote Block**: Italic styling with border, full editing capabilities
-- **Code Block**: Monospace font, tab handling, plain text paste support
-- **List Block**: Bullet/numbered lists with proper list item management
-
-## Key Achievements
-
-### 1. Preserved Critical Knowledge
-- **Static Rendering**: Blocks use `innerHTML` in `firstUpdated` to prevent focus loss during typing
-- **Shadow DOM Selection**: Implemented `containsAcrossShadowDOM` utility for proper selection detection
-- **Cursor Position Tracking**: All editable blocks track cursor position across multiple events
-- **Content Splitting**: HTML-aware splitting using Range API preserves formatting
-- **Focus Management**: Microtask-based focus restoration ensures reliable cursor placement
-
-### 2. Enhanced Architecture
-- Each block type is now self-contained in its own file
-- Block handlers are dynamically registered and loaded
-- Common functionality is shared through base classes
-- Styles are co-located with their block handlers
-
-### 3. Maintained Functionality
-- All keyboard navigation works (arrows, backspace, delete, enter)
-- Text selection across Shadow DOM boundaries functions correctly
-- Block merging and splitting behave as before
-- IME (Input Method Editor) support is preserved
-- Formatting shortcuts (Cmd/Ctrl+B/I/U/K) continue to work
-
-## Code Organization
-
-```
-ts_web/elements/wysiwyg/
-├── dees-wysiwyg-block.ts (simplified main component)
-├── wysiwyg.selection.ts (Shadow DOM selection utilities)
-├── wysiwyg.blockregistration.ts (handler registration)
-└── blocks/
-    ├── index.ts (exports and registry)
-    ├── block.base.ts (base handler interface)
-    ├── decorative/
-    │   └── divider.block.ts
-    └── text/
-        ├── paragraph.block.ts
-        ├── heading.block.ts
-        ├── quote.block.ts
-        ├── code.block.ts
-        └── list.block.ts
-```
-
-## Next Steps
-
-### Phase 4: Media Blocks (In Progress)
-- Image block with upload/drag-drop support
-- YouTube block with video embedding
-- Attachment block for file uploads
-
-### Phase 5: Content Blocks
-- Markdown block with preview toggle
-- HTML block with raw HTML editing
-
-### Phase 6: Cleanup
-- Remove old code from main component
-- Optimize bundle size
-- Update documentation
-
-## Technical Improvements
-
-1. **Modularity**: Each block type is now completely self-contained
-2. **Extensibility**: New blocks can be added by creating a handler and registering it
-3. **Maintainability**: Files are smaller and focused on single responsibilities
-4. **Type Safety**: Strong TypeScript interfaces ensure consistent implementation
-5. **Performance**: No degradation in performance; potential for lazy loading in future
-
-## Migration Pattern
-
-For future block migrations, follow this pattern:
-
-1. Create block handler extending `BaseBlockHandler`
-2. Implement required methods: `render()`, `setup()`, `getStyles()`
-3. Add helper methods for cursor/content management
-4. Handle Shadow DOM selection properly using utilities
-5. Register handler in `wysiwyg.blockregistration.ts`
-6. Test all interactions (typing, selection, navigation)
-
-The refactoring has been successful in making the codebase more maintainable while preserving all the hard-won functionality and edge case handling from the original implementation.

readme.refactoring.md

@@ -1,82 +0,0 @@
-# WYSIWYG Editor Refactoring
-
-## Summary of Changes
-
-This refactoring cleaned up the wysiwyg editor implementation to fix focus, cursor position, and selection issues.
-
-### Phase 1: Code Organization
-
-#### 1. Removed Duplicate Code
-- Removed duplicate `handleBlockInput` method from main component (was already in inputHandler)
-- Removed duplicate `handleBlockKeyDown` method from main component (was already in keyboardHandler)
-- Consolidated all input handling in the respective handler classes
-
-#### 2. Simplified Focus Management
-- Removed complex `updated` lifecycle method that was trying to maintain focus
-- Simplified `handleBlockBlur` to not immediately close menus
-- Added `requestAnimationFrame` to focus operations for better timing
-- Removed `slashMenuOpenTime` tracking which was no longer needed
-
-#### 3. Fixed Slash Menu Behavior
-- Changed from `@mousedown` to `@click` events for better UX
-- Added proper event prevention to avoid focus loss
-- Menu now closes when clicking outside
-- Simplified the insertBlock method to close menu first
-
-### Phase 2: Cursor & Selection Fixes
-
-#### 4. Enhanced Cursor Position Management
-- Added `focusWithCursor()` method to block component for precise cursor positioning
-- Improved `handleSlashCommand` to preserve cursor position when menu opens
-- Added `getCaretCoordinates()` for accurate menu positioning based on cursor location
-- Updated `focusBlock()` to support numeric cursor positions
-
-#### 5. Fixed Selection Across Shadow DOM
-- Added custom `block-text-selected` event to communicate selections across shadow boundaries
-- Implemented `handleMouseUp()` in block component to detect selections
-- Updated main component to listen for selection events from blocks
-- Selection now works properly even with nested shadow DOMs
-
-#### 6. Improved Slash Menu Close Behavior
-- Added optional `clearSlash` parameter to `closeSlashMenu()`
-- Escape key now properly clears the slash command
-- Clicking outside clears the slash if menu is open
-- Selecting an item preserves content and just transforms the block
-
-### Technical Improvements
-
-#### Block Component (`dees-wysiwyg-block`)
-- Better focus management with immediate focus (removed unnecessary requestAnimationFrame)
-- Added cursor position control methods
-- Custom event dispatching for cross-shadow-DOM communication
-- Improved content handling for different block types
-
-#### Input Handler
-- Preserves cursor position when showing slash menu
-- Better caret coordinate calculation for menu positioning
-- Ensures focus stays in the block when menu appears
-
-#### Block Operations
-- Enhanced `focusBlock()` to support start/end/numeric positions
-- Better timing with requestAnimationFrame for focus operations
-
-### Key Benefits
-- Slash menu no longer causes focus or cursor position loss
-- Text selection works properly across shadow DOM boundaries
-- Cursor position is preserved when interacting with menus
-- Cleaner, more maintainable code structure
-- Better separation of concerns
-
-## Testing
-
-Use the test files in `.nogit/debug/`:
-- `test-slash-menu.html` - Tests slash menu focus behavior
-- `test-wysiwyg-formatting.html` - Tests text formatting
-
-## Known Issues Fixed
-- Slash menu disappearing immediately on first "/"
-- Focus lost when slash menu opens
-- Cursor position lost when typing "/"
-- Text selection not working properly
-- Selection events not propagating across shadow DOM
-- Duplicate event handling causing conflicts

test/test.contextmenu-demo.browser.ts

@@ -0,0 +1,35 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+import { demoFunc } from '../ts_web/elements/dees-contextmenu.demo.js';
+
+tap.test('should render context menu demo', async () => {
+  // Create demo container
+  const demoContainer = document.createElement('div');
+  document.body.appendChild(demoContainer);
+  
+  // Render the demo
+  const demoContent = demoFunc();
+  
+  // Create a temporary element to hold the rendered template
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = demoContent.strings.join('');
+  
+  // Check that panels are rendered
+  const panels = tempDiv.querySelectorAll('dees-panel');
+  expect(panels.length).toEqual(4);
+  
+  // Check panel headings
+  expect(panels[0].getAttribute('heading')).toEqual('Basic Context Menu with Nested Submenus');
+  expect(panels[1].getAttribute('heading')).toEqual('Component-Specific Context Menu');
+  expect(panels[2].getAttribute('heading')).toEqual('Advanced Context Menu Example');
+  expect(panels[3].getAttribute('heading')).toEqual('Static Context Menu (Always Visible)');
+  
+  // Check that static context menu exists
+  const staticMenu = tempDiv.querySelector('dees-contextmenu');
+  expect(staticMenu).toBeTruthy();
+  
+  // Clean up
+  demoContainer.remove();
+});
+
+export default tap.start();

test/test.contextmenu-nested-close.browser.ts

@@ -0,0 +1,93 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+
+tap.test('should close all parent menus when clicking action in nested submenu', async () => {
+  let actionCalled = false;
+  
+  // Create a test element
+  const testDiv = document.createElement('div');
+  testDiv.style.width = '300px';
+  testDiv.style.height = '300px';
+  testDiv.style.background = '#f0f0f0';
+  testDiv.innerHTML = 'Right-click for nested menu test';
+  document.body.appendChild(testDiv);
+  
+  // Simulate right-click to open context menu
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 150,
+    clientY: 150,
+    bubbles: true,
+    cancelable: true
+  });
+  
+  // Open context menu with nested structure
+  DeesContextmenu.openContextMenuWithOptions(contextMenuEvent, [
+    {
+      name: 'Parent Item',
+      iconName: 'folder',
+      action: async () => {}, // Parent items with submenus need an action
+      submenu: [
+        {
+          name: 'Child Item',
+          iconName: 'file',
+          action: async () => {
+            actionCalled = true;
+            console.log('Child action called');
+          }
+        },
+        {
+          name: 'Another Child',
+          iconName: 'fileText',
+          action: async () => console.log('Another child')
+        }
+      ]
+    },
+    {
+      name: 'Regular Item',
+      iconName: 'box',
+      action: async () => console.log('Regular item')
+    }
+  ]);
+  
+  // Wait for main menu to appear
+  await new Promise(resolve => setTimeout(resolve, 150));
+  
+  // Check main menu exists
+  const mainMenu = document.querySelector('dees-contextmenu');
+  expect(mainMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Hover over "Parent Item" to trigger submenu
+  const parentItem = mainMenu!.shadowRoot!.querySelector('.menuitem');
+  expect(parentItem).toBeTruthy();
+  parentItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check submenu exists
+  const allMenus = document.querySelectorAll('dees-contextmenu');
+  expect(allMenus.length).toEqual(2); // Main menu and submenu
+  
+  const submenu = allMenus[1];
+  expect(submenu).toBeTruthy();
+  
+  // Click on "Child Item" in submenu
+  const childItem = submenu.shadowRoot!.querySelector('.menuitem');
+  expect(childItem).toBeTruthy();
+  childItem!.click();
+  
+  // Wait for menus to close
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Verify action was called
+  expect(actionCalled).toEqual(true);
+  
+  // Verify all menus are closed
+  const remainingMenus = document.querySelectorAll('dees-contextmenu');
+  expect(remainingMenus.length).toEqual(0);
+  
+  // Clean up
+  testDiv.remove();
+});
+
+export default tap.start();

test/test.contextmenu-shadowdom.browser.ts

@@ -0,0 +1,71 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+import { DeesElement, customElement, html } from '@design.estate/dees-element';
+
+// Create a test element with shadow DOM
+@customElement('test-shadow-element')
+class TestShadowElement extends DeesElement {
+  public getContextMenuItems() {
+    return [
+      { name: 'Shadow Item 1', iconName: 'box', action: async () => console.log('Shadow 1') },
+      { name: 'Shadow Item 2', iconName: 'package', action: async () => console.log('Shadow 2') }
+    ];
+  }
+  
+  render() {
+    return html`
+      <div style="padding: 40px; background: #eee; border-radius: 8px;">
+        <h3>Shadow DOM Content</h3>
+        <p>Right-click anywhere inside this shadow DOM</p>
+      </div>
+    `;
+  }
+}
+
+tap.test('should show context menu when right-clicking inside shadow DOM', async () => {
+  // Create the shadow DOM element
+  const shadowElement = document.createElement('test-shadow-element');
+  document.body.appendChild(shadowElement);
+  
+  // Wait for element to be ready
+  await shadowElement.updateComplete;
+  
+  // Get the content inside shadow DOM
+  const shadowContent = shadowElement.shadowRoot!.querySelector('div');
+  expect(shadowContent).toBeTruthy();
+  
+  // Simulate right-click on content inside shadow DOM
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 100,
+    clientY: 100,
+    bubbles: true,
+    cancelable: true,
+    composed: true // Important for shadow DOM
+  });
+  
+  shadowContent!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items from shadow element are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  expect(menuItems.length).toBeGreaterThanOrEqual(2);
+  
+  // Check menu item text
+  const menuTexts = Array.from(menuItems).map(item => 
+    item.querySelector('.menuitem-text')?.textContent
+  );
+  expect(menuTexts).toContain('Shadow Item 1');
+  expect(menuTexts).toContain('Shadow Item 2');
+  
+  // Clean up
+  contextMenu!.remove();
+  shadowElement.remove();
+});
+
+export default tap.start();

test/test.contextmenu.browser.ts

@@ -0,0 +1,77 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+
+tap.test('should show context menu with nested submenu', async () => {
+  // Create a test element with context menu items
+  const testDiv = document.createElement('div');
+  testDiv.style.width = '200px';
+  testDiv.style.height = '200px';
+  testDiv.style.background = '#eee';
+  testDiv.innerHTML = 'Right-click me';
+  
+  // Add getContextMenuItems method
+  (testDiv as any).getContextMenuItems = () => {
+    return [
+      {
+        name: 'Change Type',
+        iconName: 'type',
+        submenu: [
+          { name: 'Paragraph', iconName: 'text', action: () => console.log('Paragraph') },
+          { name: 'Heading 1', iconName: 'heading1', action: () => console.log('Heading 1') },
+          { name: 'Heading 2', iconName: 'heading2', action: () => console.log('Heading 2') },
+          { divider: true },
+          { name: 'Code Block', iconName: 'fileCode', action: () => console.log('Code') },
+          { name: 'Quote', iconName: 'quote', action: () => console.log('Quote') }
+        ]
+      },
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'trash2',
+        action: () => console.log('Delete')
+      }
+    ];
+  };
+  
+  document.body.appendChild(testDiv);
+  
+  // Simulate right-click
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 100,
+    clientY: 100,
+    bubbles: true,
+    cancelable: true
+  });
+  
+  testDiv.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  expect(menuItems.length).toEqual(2); // "Change Type" and "Delete"
+  
+  // Hover over "Change Type" to trigger submenu
+  const changeTypeItem = menuItems[0] as HTMLElement;
+  changeTypeItem.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check if submenu is created
+  const submenus = document.querySelectorAll('dees-contextmenu');
+  expect(submenus.length).toEqual(2); // Main menu and submenu
+  
+  // Clean up
+  contextMenu!.remove();
+  const submenu = submenus[1];
+  if (submenu) submenu.remove();
+  testDiv.remove();
+});
+
+export default tap.start();

test/test.tabs-indicator.browser.ts

@@ -0,0 +1,146 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import * as deesCatalog from '../ts_web/index.js';
+
+tap.test('tabs indicator positioning - detailed measurements', async () => {
+  // Create tabs element with different length labels
+  const tabsElement = new deesCatalog.DeesAppuiTabs();
+  tabsElement.tabs = [
+    { key: 'Home', iconName: 'lucide:home', action: () => {} },
+    { key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => {} },
+    { key: 'User Settings', iconName: 'lucide:settings', action: () => {} },
+  ];
+  
+  document.body.appendChild(tabsElement);
+  await tabsElement.updateComplete;
+  
+  // Wait for fonts and indicator initialization
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Get all elements
+  const shadowRoot = tabsElement.shadowRoot;
+  const wrapper = shadowRoot.querySelector('.tabs-wrapper') as HTMLElement;
+  const container = shadowRoot.querySelector('.tabsContainer') as HTMLElement;
+  const tabs = shadowRoot.querySelectorAll('.tab');
+  const firstTab = tabs[0] as HTMLElement;
+  const firstContent = firstTab.querySelector('.tab-content') as HTMLElement;
+  const indicator = shadowRoot.querySelector('.tabIndicator') as HTMLElement;
+  
+  // Verify all elements exist
+  expect(wrapper).toBeInstanceOf(HTMLElement);
+  expect(container).toBeInstanceOf(HTMLElement);
+  expect(firstTab).toBeInstanceOf(HTMLElement);
+  expect(firstContent).toBeInstanceOf(HTMLElement);
+  expect(indicator).toBeInstanceOf(HTMLElement);
+  
+  // Get all measurements
+  const wrapperRect = wrapper.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const tabRect = firstTab.getBoundingClientRect();
+  const contentRect = firstContent.getBoundingClientRect();
+  const indicatorRect = indicator.getBoundingClientRect();
+  
+  console.log('\n=== DETAILED MEASUREMENTS ===');
+  console.log('Document body left:', document.body.getBoundingClientRect().left);
+  console.log('Wrapper left:', wrapperRect.left);
+  console.log('Container left:', containerRect.left);
+  console.log('Tab left:', tabRect.left);
+  console.log('Content left:', contentRect.left);
+  console.log('Indicator left (actual):', indicatorRect.left);
+  
+  console.log('\n=== RELATIVE POSITIONS ===');
+  console.log('Container padding (container - wrapper):', containerRect.left - wrapperRect.left);
+  console.log('Tab position in container:', tabRect.left - containerRect.left);
+  console.log('Content position in tab:', contentRect.left - tabRect.left);
+  console.log('Content relative to wrapper:', contentRect.left - wrapperRect.left);
+  console.log('Indicator relative to wrapper (actual):', indicatorRect.left - wrapperRect.left);
+  
+  console.log('\n=== WIDTHS ===');
+  console.log('Tab width:', tabRect.width);
+  console.log('Content width:', contentRect.width);
+  console.log('Indicator width:', indicatorRect.width);
+  
+  console.log('\n=== STYLES (what we set) ===');
+  console.log('Indicator style.left:', indicator.style.left);
+  console.log('Indicator style.width:', indicator.style.width);
+  
+  console.log('\n=== CALCULATIONS ===');
+  const expectedIndicatorLeft = contentRect.left - wrapperRect.left - 4; // We subtract 4 to center
+  const expectedIndicatorWidth = contentRect.width + 8; // We add 8 in the code
+  console.log('Expected indicator left:', expectedIndicatorLeft);
+  console.log('Expected indicator width:', expectedIndicatorWidth);
+  console.log('Actual indicator left (from style):', parseFloat(indicator.style.left));
+  console.log('Actual indicator width (from style):', parseFloat(indicator.style.width));
+  
+  console.log('\n=== VISUAL ALIGNMENT CHECK ===');
+  const tabCenter = tabRect.left + (tabRect.width / 2);
+  const contentCenter = contentRect.left + (contentRect.width / 2);
+  const indicatorCenter = indicatorRect.left + (indicatorRect.width / 2);
+  
+  console.log('Tab center:', tabCenter);
+  console.log('Content center:', contentCenter);
+  console.log('Indicator center:', indicatorCenter);
+  console.log('Content offset from tab center:', contentCenter - tabCenter);
+  console.log('Indicator offset from content center:', indicatorCenter - contentCenter);
+  console.log('Indicator offset from tab center:', indicatorCenter - tabCenter);
+  console.log('---');
+  console.log('Indicator extends left of content by:', contentRect.left - indicatorRect.left);
+  console.log('Indicator extends right of content by:', (indicatorRect.left + indicatorRect.width) - (contentRect.left + contentRect.width));
+  
+  // Check if icons are rendering
+  const icon = firstContent.querySelector('dees-icon');
+  console.log('\n=== ICON CHECK ===');
+  console.log('Icon element found:', icon ? 'YES' : 'NO');
+  if (icon) {
+    const iconRect = icon.getBoundingClientRect();
+    console.log('Icon width:', iconRect.width);
+    console.log('Icon height:', iconRect.height);
+    console.log('Icon visible:', iconRect.width > 0 && iconRect.height > 0 ? 'YES' : 'NO');
+  }
+  
+  // Verify indicator is visible
+  expect(indicator.style.opacity).toEqual('1');
+  
+  // Verify positioning calculations
+  expect(parseFloat(indicator.style.left)).toBeCloseTo(expectedIndicatorLeft, 1);
+  expect(parseFloat(indicator.style.width)).toBeCloseTo(expectedIndicatorWidth, 1);
+  
+  // Verify visual centering on content (should be perfectly centered)
+  expect(Math.abs(indicatorCenter - contentCenter)).toBeLessThan(1);
+  
+  document.body.removeChild(tabsElement);
+});
+
+tap.test('tabs indicator should move when tab is clicked', async () => {
+  // Create tabs element
+  const tabsElement = new deesCatalog.DeesAppuiTabs();
+  tabsElement.tabs = [
+    { key: 'Home', iconName: 'lucide:home', action: () => {} },
+    { key: 'Analytics', iconName: 'lucide:barChart', action: () => {} },
+    { key: 'Settings', iconName: 'lucide:settings', action: () => {} },
+  ];
+  
+  document.body.appendChild(tabsElement);
+  await tabsElement.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  const shadowRoot = tabsElement.shadowRoot;
+  const tabs = shadowRoot.querySelectorAll('.tab');
+  const indicator = shadowRoot.querySelector('.tabIndicator') as HTMLElement;
+  
+  // Get initial position
+  const initialLeft = parseFloat(indicator.style.left);
+  
+  // Click second tab
+  (tabs[1] as HTMLElement).click();
+  await tabsElement.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Position should have changed
+  const newLeft = parseFloat(indicator.style.left);
+  expect(newLeft).not.toEqual(initialLeft);
+  expect(newLeft).toBeGreaterThan(initialLeft);
+  
+  document.body.removeChild(tabsElement);
+});
+
+export default tap.start();

test/test.wysiwyg-blockmovement.browser.ts

@@ -0,0 +1,85 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg block movement during drag', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  
+  // Start dragging block 1
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: () => {},
+      setDragImage: () => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Verify drag state
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Check that drag height was calculated
+  console.log('Checking drag height...');
+  const dragHandler = element.dragDropHandler as any;
+  console.log('draggedBlockHeight:', dragHandler.draggedBlockHeight);
+  console.log('draggedBlockContentHeight:', dragHandler.draggedBlockContentHeight);
+  
+  // Manually call updateBlockPositions to simulate drag movement
+  console.log('Simulating drag movement...');
+  const updateBlockPositions = dragHandler.updateBlockPositions.bind(dragHandler);
+  
+  // Simulate dragging down past block 2
+  const block2 = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
+  const block2Rect = block2.getBoundingClientRect();
+  const dragToY = block2Rect.bottom + 10;
+  
+  console.log('Dragging to Y position:', dragToY);
+  updateBlockPositions(dragToY);
+  
+  // Check if blocks have moved
+  await new Promise(resolve => setTimeout(resolve, 50));
+  
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  console.log('Block states after drag:');
+  blocks.forEach((block, i) => {
+    const classes = block.className;
+    const offset = (block as HTMLElement).style.getPropertyValue('--drag-offset');
+    console.log(`Block ${i}: classes="${classes}", offset="${offset}"`);
+  });
+  
+  // Check that at least one block has move class
+  const movedUpBlocks = editorContent.querySelectorAll('.block-wrapper.move-up');
+  const movedDownBlocks = editorContent.querySelectorAll('.block-wrapper.move-down');
+  console.log('Moved up blocks:', movedUpBlocks.length);
+  console.log('Moved down blocks:', movedDownBlocks.length);
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.start();

test/test.wysiwyg-blocktype-change.browser.ts

@@ -0,0 +1,98 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+
+tap.test('should change block type via context menu', async () => {
+  // Create WYSIWYG editor with a paragraph
+  const wysiwygEditor = new DeesInputWysiwyg();
+  wysiwygEditor.value = '<p>This is a test paragraph</p>';
+  document.body.appendChild(wysiwygEditor);
+  
+  // Wait for editor to be ready
+  await wysiwygEditor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the first block
+  const firstBlock = wysiwygEditor.blocks[0];
+  expect(firstBlock.type).toEqual('paragraph');
+  
+  // Get the block element
+  const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper');
+  expect(firstBlockWrapper).toBeTruthy();
+  
+  const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any;
+  expect(blockComponent).toBeTruthy();
+  await blockComponent.updateComplete;
+  
+  // Get the editable content inside the block's shadow DOM
+  const editableBlock = blockComponent.shadowRoot!.querySelector('.block');
+  expect(editableBlock).toBeTruthy();
+  
+  // Simulate right-click on the editable block
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 200,
+    clientY: 200,
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  editableBlock!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Find "Change Type" menu item
+  const menuItems = Array.from(contextMenu!.shadowRoot!.querySelectorAll('.menuitem'));
+  const changeTypeItem = menuItems.find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type'
+  );
+  expect(changeTypeItem).toBeTruthy();
+  
+  // Hover over "Change Type" to trigger submenu
+  changeTypeItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check if submenu is created
+  const allMenus = document.querySelectorAll('dees-contextmenu');
+  expect(allMenus.length).toEqual(2);
+  
+  const submenu = allMenus[1];
+  const submenuItems = Array.from(submenu.shadowRoot!.querySelectorAll('.menuitem'));
+  
+  // Find "Heading 1" option
+  const heading1Item = submenuItems.find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Heading 1'
+  );
+  expect(heading1Item).toBeTruthy();
+  
+  // Click on "Heading 1"
+  (heading1Item as HTMLElement).click();
+  
+  // Wait for menu to close and block to update
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Verify block type has changed
+  expect(wysiwygEditor.blocks[0].type).toEqual('heading-1');
+  
+  // Verify DOM has been updated
+  const updatedBlockComponent = wysiwygEditor.shadowRoot!
+    .querySelector('.block-wrapper')!
+    .querySelector('dees-wysiwyg-block') as any;
+  
+  await updatedBlockComponent.updateComplete;
+  
+  const updatedBlock = updatedBlockComponent.shadowRoot!.querySelector('.block');
+  expect(updatedBlock?.classList.contains('heading-1')).toEqual(true);
+  
+  // Clean up
+  wysiwygEditor.remove();
+});
+
+export default tap.start();

test/test.wysiwyg-contextmenu.browser.ts

@@ -0,0 +1,68 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+
+tap.test('should show context menu on WYSIWYG blocks', async () => {
+  // Create WYSIWYG editor
+  const wysiwygEditor = new DeesInputWysiwyg();
+  wysiwygEditor.value = '<p>Test paragraph</p><h1>Test heading</h1>';
+  document.body.appendChild(wysiwygEditor);
+  
+  // Wait for editor to be ready
+  await wysiwygEditor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the first block element
+  const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper');
+  expect(firstBlockWrapper).toBeTruthy();
+  
+  const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any;
+  expect(blockComponent).toBeTruthy();
+  
+  // Wait for block to be ready
+  await blockComponent.updateComplete;
+  
+  // Get the editable content inside the block's shadow DOM
+  const editableBlock = blockComponent.shadowRoot!.querySelector('.block');
+  expect(editableBlock).toBeTruthy();
+  
+  // Simulate right-click on the editable block
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 200,
+    clientY: 200,
+    bubbles: true,
+    cancelable: true,
+    composed: true // Important for shadow DOM
+  });
+  
+  editableBlock!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items from WYSIWYG block are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  const menuTexts = Array.from(menuItems).map(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim()
+  );
+  
+  // Should have "Change Type" and "Delete Block" items
+  expect(menuTexts).toContain('Change Type');
+  expect(menuTexts).toContain('Delete Block');
+  
+  // Check if "Change Type" has submenu indicator
+  const changeTypeItem = Array.from(menuItems).find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type'
+  );
+  expect(changeTypeItem?.classList.contains('has-submenu')).toEqual(true);
+  
+  // Clean up
+  contextMenu!.remove();
+  wysiwygEditor.remove();
+});
+
+export default tap.start();

test/test.wysiwyg-dragdrop-simple.browser.ts

@@ -0,0 +1,95 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag handler initialization', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  // Wait for element to be ready
+  await element.updateComplete;
+  
+  // Check that drag handler is initialized
+  expect(element.dragDropHandler).toBeTruthy();
+  
+  // Set initial content with multiple blocks
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'block2', type: 'paragraph', content: 'Second paragraph' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Check that editor content ref exists
+  console.log('editorContentRef:', element.editorContentRef);
+  expect(element.editorContentRef).toBeTruthy();
+  
+  // Check that blocks are rendered
+  const blockWrappers = element.shadowRoot!.querySelectorAll('.block-wrapper');
+  console.log('Number of block wrappers:', blockWrappers.length);
+  expect(blockWrappers.length).toEqual(2);
+  
+  // Check drag handles
+  const dragHandles = element.shadowRoot!.querySelectorAll('.drag-handle');
+  console.log('Number of drag handles:', dragHandles.length);
+  expect(dragHandles.length).toEqual(2);
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag start behavior', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const dragHandle = element.shadowRoot!.querySelector('.drag-handle') as HTMLElement;
+  expect(dragHandle).toBeTruthy();
+  
+  // Check that drag handle has draggable attribute
+  console.log('Drag handle draggable:', dragHandle.draggable);
+  expect(dragHandle.draggable).toBeTrue();
+  
+  // Test drag handler state before drag
+  console.log('Initial drag state:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toBeNull();
+  
+  // Try to manually call handleDragStart
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData called with:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage called');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Check drag state after drag start
+  console.log('Drag state after start:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.start();

test/test.wysiwyg-dragdrop-visual.browser.ts

@@ -0,0 +1,133 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag visual feedback - block movement', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  
+  // Manually start drag
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {},
+      setDragImage: (img: any, x: number, y: number) => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Check dragging state
+  console.log('Block 1 classes:', block1.className);
+  console.log('Editor content classes:', editorContent.className);
+  expect(block1.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Check drop indicator exists
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  console.log('Drop indicator:', dropIndicator);
+  expect(dropIndicator).toBeTruthy();
+  
+  // Test block movement calculation
+  console.log('Testing updateBlockPositions...');
+  
+  // Access private method for testing
+  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
+  
+  // Simulate dragging to different position
+  updateBlockPositions(150); // Move down
+  
+  // Check if blocks have move classes
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  console.log('Block classes after move:');
+  blocks.forEach((block, i) => {
+    console.log(`Block ${i}:`, block.className, 'transform:', (block as HTMLElement).style.getPropertyValue('--drag-offset'));
+  });
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drop indicator positioning', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Paragraph 1' },
+    { id: 'block2', type: 'heading-2', content: 'Heading 2' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  
+  // Start dragging first block
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {},
+      setDragImage: (img: any, x: number, y: number) => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for initialization
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Get drop indicator
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  expect(dropIndicator).toBeTruthy();
+  
+  // Check initial display state
+  console.log('Drop indicator initial display:', dropIndicator.style.display);
+  
+  // Trigger updateBlockPositions to see drop indicator
+  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
+  updateBlockPositions(100);
+  
+  // Check drop indicator position
+  console.log('Drop indicator after update:');
+  console.log('- display:', dropIndicator.style.display);
+  console.log('- top:', dropIndicator.style.top);
+  console.log('- height:', dropIndicator.style.height);
+  
+  expect(dropIndicator.style.display).toEqual('block');
+  expect(dropIndicator.style.top).toBeTruthy();
+  expect(dropIndicator.style.height).toBeTruthy();
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.start();

test/test.wysiwyg-dragdrop.browser.ts

@@ -0,0 +1,172 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag and drop should work correctly', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  // Wait for element to be ready
+  await element.updateComplete;
+  
+  // Set initial content with multiple blocks
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'block2', type: 'heading-2', content: 'Test Heading' },
+    { id: 'block3', type: 'paragraph', content: 'Second paragraph' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Check that blocks are rendered
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  expect(editorContent).toBeTruthy();
+  
+  const blockWrappers = editorContent.querySelectorAll('.block-wrapper');
+  expect(blockWrappers.length).toEqual(3);
+  
+  // Test drag handles exist for non-divider blocks
+  const dragHandles = editorContent.querySelectorAll('.drag-handle');
+  expect(dragHandles.length).toEqual(3);
+  
+  // Get references to specific blocks
+  const firstBlock = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const secondBlock = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
+  const firstDragHandle = firstBlock.querySelector('.drag-handle') as HTMLElement;
+  
+  expect(firstBlock).toBeTruthy();
+  expect(secondBlock).toBeTruthy();
+  expect(firstDragHandle).toBeTruthy();
+  
+  // Test drag initialization
+  console.log('Testing drag initialization...');
+  
+  // Create drag event
+  const dragStartEvent = new DragEvent('dragstart', {
+    dataTransfer: new DataTransfer(),
+    clientY: 100,
+    bubbles: true
+  });
+  
+  // Simulate drag start
+  firstDragHandle.dispatchEvent(dragStartEvent);
+  
+  // Check that drag state is initialized
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Check that dragging class is applied
+  await new Promise(resolve => setTimeout(resolve, 20)); // Wait for setTimeout in drag start
+  expect(firstBlock.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Test drop indicator creation
+  const dropIndicator = editorContent.querySelector('.drop-indicator');
+  expect(dropIndicator).toBeTruthy();
+  
+  // Simulate drag over
+  const dragOverEvent = new DragEvent('dragover', {
+    dataTransfer: new DataTransfer(),
+    clientY: 200,
+    bubbles: true,
+    cancelable: true
+  });
+  
+  document.dispatchEvent(dragOverEvent);
+  
+  // Check that blocks move out of the way
+  console.log('Checking block movements...');
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  const hasMovedBlocks = blocks.some(block => 
+    block.classList.contains('move-up') || block.classList.contains('move-down')
+  );
+  
+  console.log('Blocks with move classes:', blocks.filter(block => 
+    block.classList.contains('move-up') || block.classList.contains('move-down')
+  ).length);
+  
+  // Test drag end
+  const dragEndEvent = new DragEvent('dragend', {
+    bubbles: true
+  });
+  
+  document.dispatchEvent(dragEndEvent);
+  
+  // Wait for cleanup
+  await new Promise(resolve => setTimeout(resolve, 150));
+  
+  // Check that drag state is cleaned up
+  expect(element.dragDropHandler.dragState.draggedBlockId).toBeNull();
+  expect(firstBlock.classList.contains('dragging')).toBeFalse();
+  expect(editorContent.classList.contains('dragging')).toBeFalse();
+  
+  // Check that drop indicator is removed
+  const dropIndicatorAfter = editorContent.querySelector('.drop-indicator');
+  expect(dropIndicatorAfter).toBeFalsy();
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag and drop visual feedback', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const dragHandle1 = block1.querySelector('.drag-handle') as HTMLElement;
+  
+  // Start dragging block 1
+  const dragStartEvent = new DragEvent('dragstart', {
+    dataTransfer: new DataTransfer(),
+    clientY: 50,
+    bubbles: true
+  });
+  
+  dragHandle1.dispatchEvent(dragStartEvent);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Simulate dragging down
+  const dragOverEvent = new DragEvent('dragover', {
+    dataTransfer: new DataTransfer(),
+    clientY: 150, // Move down past block 2
+    bubbles: true,
+    cancelable: true
+  });
+  
+  // Trigger the global drag over handler
+  element.dragDropHandler['handleGlobalDragOver'](dragOverEvent);
+  
+  // Check that transform is applied to dragged block
+  const transform = block1.style.transform;
+  console.log('Dragged block transform:', transform);
+  expect(transform).toContain('translateY');
+  
+  // Check drop indicator position
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  if (dropIndicator) {
+    const indicatorStyle = dropIndicator.style;
+    console.log('Drop indicator position:', indicatorStyle.top, 'display:', indicatorStyle.display);
+  }
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.start();

test/test.wysiwyg-dragissue.browser.ts

@@ -0,0 +1,124 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag full flow without await', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Mock drag event
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Starting drag...');
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  console.log('Drag started');
+  
+  // Check immediate state
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Instead of await with setTimeout, use a done callback
+  return new Promise<void>((resolve) => {
+    console.log('Setting up delayed check...');
+    
+    // Use regular setTimeout
+    setTimeout(() => {
+      console.log('In setTimeout callback');
+      
+      try {
+        const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+        const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+        
+        console.log('Block has dragging class:', block1?.classList.contains('dragging'));
+        console.log('Editor has dragging class:', editorContent?.classList.contains('dragging'));
+        
+        // Clean up
+        element.dragDropHandler.handleDragEnd();
+        document.body.removeChild(element);
+        
+        resolve();
+      } catch (error) {
+        console.error('Error in setTimeout:', error);
+        throw error;
+      }
+    }, 50);
+  });
+});
+
+tap.test('identify the crash point', async () => {
+  console.log('Test started');
+  
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  console.log('Element created');
+  await element.updateComplete;
+  
+  console.log('Setting blocks');
+  element.blocks = [{ id: 'block1', type: 'paragraph', content: 'Test' }];
+  element.renderBlocksProgrammatically();
+  
+  console.log('Waiting for update');
+  await element.updateComplete;
+  
+  console.log('Creating mock event');
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: () => {},
+      setDragImage: () => {}
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Calling handleDragStart');
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  console.log('handleDragStart completed');
+  
+  // Try different wait methods
+  console.log('About to wait...');
+  
+  // Method 1: Direct promise
+  await Promise.resolve();
+  console.log('Promise.resolve completed');
+  
+  // Method 2: setTimeout 0
+  await new Promise(resolve => setTimeout(resolve, 0));
+  console.log('setTimeout 0 completed');
+  
+  // Method 3: requestAnimationFrame
+  await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+  console.log('requestAnimationFrame completed');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+  console.log('Cleanup completed');
+});
+
+tap.start();

test/test.wysiwyg-dropindicator.browser.ts

@@ -0,0 +1,108 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drop indicator creation', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Check editorContentRef
+  console.log('editorContentRef exists:', !!element.editorContentRef);
+  console.log('editorContentRef tagName:', element.editorContentRef?.tagName);
+  expect(element.editorContentRef).toBeTruthy();
+  
+  // Check initial state - no drop indicator
+  let dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator before drag:', dropIndicator);
+  expect(dropIndicator).toBeFalsy();
+  
+  // Manually call createDropIndicator
+  try {
+    console.log('Calling createDropIndicator...');
+    element.dragDropHandler['createDropIndicator']();
+    console.log('createDropIndicator succeeded');
+  } catch (error) {
+    console.error('Error creating drop indicator:', error);
+    throw error;
+  }
+  
+  // Check drop indicator was created
+  dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator after creation:', dropIndicator);
+  console.log('Drop indicator parent:', dropIndicator?.parentElement?.className);
+  expect(dropIndicator).toBeTruthy();
+  expect(dropIndicator!.style.display).toEqual('none');
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag initialization with drop indicator', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Mock drag event
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Starting drag...');
+  
+  try {
+    element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+    console.log('Drag start succeeded');
+  } catch (error) {
+    console.error('Error during drag start:', error);
+    throw error;
+  }
+  
+  // Wait for async operations
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Check drop indicator exists
+  const dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator after drag start:', dropIndicator);
+  expect(dropIndicator).toBeTruthy();
+  
+  // Check drag state
+  console.log('Drag state:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.start();

test/test.wysiwyg-eventlisteners.browser.ts

@@ -0,0 +1,114 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg global event listeners', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+  console.log('Block 1 found:', !!block1);
+  
+  // Set up drag state manually without using handleDragStart
+  element.dragDropHandler['draggedBlockId'] = 'block1';
+  element.dragDropHandler['draggedBlockElement'] = block1;
+  element.dragDropHandler['initialMouseY'] = 100;
+  
+  // Create drop indicator manually
+  element.dragDropHandler['createDropIndicator']();
+  
+  // Test adding global event listeners
+  console.log('Adding event listeners...');
+  const handleGlobalDragOver = element.dragDropHandler['handleGlobalDragOver'];
+  const handleGlobalDragEnd = element.dragDropHandler['handleGlobalDragEnd'];
+  
+  try {
+    document.addEventListener('dragover', handleGlobalDragOver);
+    console.log('dragover listener added');
+    
+    document.addEventListener('dragend', handleGlobalDragEnd);
+    console.log('dragend listener added');
+  } catch (error) {
+    console.error('Error adding event listeners:', error);
+    throw error;
+  }
+  
+  // Test firing a dragover event
+  console.log('Creating dragover event...');
+  const dragOverEvent = new Event('dragover', {
+    bubbles: true,
+    cancelable: true
+  });
+  Object.defineProperty(dragOverEvent, 'clientY', { value: 150 });
+  
+  console.log('Dispatching dragover event...');
+  document.dispatchEvent(dragOverEvent);
+  console.log('dragover event dispatched');
+  
+  // Clean up
+  document.removeEventListener('dragover', handleGlobalDragOver);
+  document.removeEventListener('dragend', handleGlobalDragEnd);
+  
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg setTimeout in drag start', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  
+  // Set drag state
+  element.dragDropHandler['draggedBlockId'] = 'block1';
+  element.dragDropHandler['draggedBlockElement'] = block1;
+  
+  console.log('Testing setTimeout callback...');
+  
+  // Test the setTimeout callback directly
+  try {
+    if (block1) {
+      console.log('Adding dragging class to block...');
+      block1.classList.add('dragging');
+      console.log('Block classes:', block1.className);
+    }
+    if (editorContent) {
+      console.log('Adding dragging class to editor...');
+      editorContent.classList.add('dragging');
+      console.log('Editor classes:', editorContent.className);
+    }
+  } catch (error) {
+    console.error('Error in setTimeout callback:', error);
+    throw error;
+  }
+  
+  expect(block1.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.start();

ts_web/elements/00fonts.ts

@@ -26,6 +26,22 @@ export const monoFontFamily = `'${intelOneMonoFont}', 'SF Mono', 'Monaco', 'Inco
 export const cssGeistFontFamily = unsafeCSS(geistFontFamily);
 export const cssMonoFontFamily = unsafeCSS(monoFontFamily);
 
+/**
+ * Cal Sans font for headings - Display font
+ * May need to be loaded separately
+ */
+export const calSansFont = 'Cal Sans';
+export const calSansFontFamily = `'${calSansFont}', ${geistFontFamily}`;
+export const cssCalSansFontFamily = unsafeCSS(calSansFontFamily);
+
+/**
+ * Roboto Slab font for special content - Serif font
+ * May need to be loaded separately
+ */
+export const robotoSlabFont = 'Roboto Slab';
+export const robotoSlabFontFamily = `'${robotoSlabFont}', Georgia, serif`;
+export const cssRobotoSlabFontFamily = unsafeCSS(robotoSlabFontFamily);
+
 /**
  * Base font styles that can be applied to components
  */

ts_web/elements/dees-appui-activitylog.ts

@@ -11,27 +11,46 @@ import {
 
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from './dees-contextmenu.js';
+import './dees-icon.js';
 
 @customElement('dees-appui-activitylog')
 export class DeesAppuiActivitylog extends DeesElement {
   // STATIC
-  public static demo = () => html`<dees-appui-activitylog></dees-appui-activitylog>`;
+  public static demo = () => html`
+    <style>
+      .demo-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 600px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
+        padding: 32px;
+      }
+    </style>
+    <div class="demo-container">
+      <dees-appui-activitylog></dees-appui-activitylog>
+    </div>
+  `;
 
   // INSTANCE
   public static styles = [
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         position: relative;
         display: block;
         width: 100%;
-        max-width: 300px;
+        max-width: 320px;
         height: 100%;
-        background: ${cssManager.bdTheme('#f8f8f8', '#111c28')};
-        font-family: 'Intel One Mono', sans-serif;
-        border-left: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        font-family: 'Geist Mono', monospace;
+        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         cursor: default;
+        box-shadow: ${cssManager.bdTheme(
+          '-4px 0 12px rgba(0, 0, 0, 0.02)',
+          '-4px 0 12px rgba(0, 0, 0, 0.2)'
+        )};
       }
       .maincontainer {
         position: absolute;
@@ -44,108 +63,265 @@ export class DeesAppuiActivitylog extends DeesElement {
       .topbar {
         position: absolute;
         top: 0px;
-        height: 32px;
+        height: 40px;
         width: 100%;
-        padding: 0px 12px 0px 12px;
-        background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        padding: 0px 16px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        display: flex;
+        align-items: center;
       }
 
       .topbar .heading {
-        text-align: left;
-        line-height: 24px;
-        padding-top: 8px;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 14px;
         font-family: 'Geist Sans', sans-serif;
-        color: ${cssManager.bdTheme('#666', '#ccc')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .activityContainer {
         position: absolute;
-        top: 32px;
-        bottom: 40px;
+        top: 40px;
+        bottom: 48px;
         width: 100%;
-        padding: 8px 0px;
-        overflow-y: scroll;
-
+        padding: 12px 0px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('#e5e7eb', '#27272a')} transparent;
+      }
+      
+      .activityContainer::-webkit-scrollbar {
+        width: 6px;
+      }
+      
+      .activityContainer::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      
+      .activityContainer::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 3px;
+      }
+      
+      .activityContainer::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
       }
 
       .streamingIndicator {
-        font-size: 12px;
+        font-size: 11px;
         text-align: center;
-        padding-top: 16px;
-        color: ${cssManager.bdTheme('#666', '#888')}
+        padding: 16px;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        font-family: 'Geist Sans', sans-serif;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
+      
+      .streamingIndicator::before {
+        content: '';
+        width: 6px;
+        height: 6px;
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        border-radius: 50%;
+        animation: pulse 2s ease-in-out infinite;
+      }
+      
+      @keyframes pulse {
+        0%, 100% { opacity: 0.4; transform: scale(0.8); }
+        50% { opacity: 1; transform: scale(1.2); }
       }
 
       .streamingIndicator.bottom {
-        padding-top: 0px;
+        padding-top: 8px;
         padding-bottom: 16px;
       }
 
       .activityentry {
-        min-height: 30px;
-        font-size: 12px;
-        padding: 8px 16px;
-        border-bottom: 1px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
+        min-height: 36px;
+        font-size: 13px;
+        padding: 10px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        transition: all 0.15s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        line-height: 1.4;
+        animation: fadeIn 0.3s ease-out;
+      }
+      
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(-4px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
       }
 
       .activityentry:last-of-type {
-        border-bottom: 1px solid transparent;
+        border-bottom: none;
       }
 
       .activityentry:hover {
-        background: ${cssManager.bdTheme('#00000005', '#00000080')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
       }
 
       .timestamp {
-        color: ${cssManager.bdTheme('#e57373', '#ff8787')};
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        font-weight: 500;
+        font-size: 12px;
+        font-variant-numeric: tabular-nums;
+        flex-shrink: 0;
+        min-width: 45px;
+      }
+      
+      .activity-icon {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-size: 14px;
+      }
+      
+      .activity-icon.login {
+        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.1)', 'rgba(34, 197, 94, 0.1)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+      
+      .activity-icon.logout {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.1)', 'rgba(239, 68, 68, 0.1)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+      
+      .activity-icon.view {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+        color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
+      }
+      
+      .activity-icon.create {
+        background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.1)', 'rgba(168, 85, 247, 0.1)')};
+        color: ${cssManager.bdTheme('#9333ea', '#a855f7')};
+      }
+      
+      .activity-icon.update {
+        background: ${cssManager.bdTheme('rgba(251, 146, 60, 0.1)', 'rgba(251, 146, 60, 0.1)')};
+        color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
+      }
+      
+      .activity-text {
+        flex: 1;
+        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
+      }
+      
+      .activity-user {
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+      
+      .date-separator {
+        padding: 12px 16px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        background: ${cssManager.bdTheme('#f9fafb', '#09090b')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        position: sticky;
+        top: 0;
+        z-index: 1;
       }
 
       .searchbox {
         position: absolute;
         bottom: 0px;
         width: 100%;
-        height: 40px;
-        background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
-        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        height: 48px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        padding: 8px;
       }
-      .searchbox input {
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        background: none;
+      
+      .search-wrapper {
+        position: relative;
         width: 100%;
-        height: 40px;
-        line-height: 32px;
-        border: none;
-        padding: 4px 12px;
-        font-family: 'Intel One Mono', sans-serif;
+        height: 32px;
+      }
+      
+      .search-icon {
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        font-size: 14px;
+        pointer-events: none;
+        transition: color 0.15s ease;
+      }
+      
+      .searchbox input {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        width: 100%;
+        height: 100%;
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 6px;
+        padding: 0 12px 0 36px;
+        font-family: 'Geist Sans', sans-serif;
+        font-size: 13px;
+        transition: all 0.15s ease;
+      }
+
+      .searchbox input::placeholder {
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
       }
 
       .searchbox input:focus {
         outline: none;
+        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+      }
+      
+      .searchbox input:focus ~ .search-icon,
+      .search-wrapper:has(input:focus) .search-icon {
+        color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
       }
 
       .bottomShadow {
         position: absolute;
         width: 100%;
-        height: 32px;
-        bottom: 40px;
+        height: 24px;
+        bottom: 48px;
         background: ${cssManager.bdTheme(
-          'linear-gradient(180deg, #f8f8f800 0%, #ffffff 100%)',
-          'linear-gradient(180deg, #111c2800 0%, #0e151f 100%)'
+          'linear-gradient(180deg, transparent 0%, #fafafa 100%)',
+          'linear-gradient(180deg, transparent 0%, #0a0a0a 100%)'
         )};
         pointer-events: none;
+        opacity: 0.8;
       }
+      
       .topShadow {
         position: absolute;
         width: 100%;
-        height: 32px;
-        top: 32px;
+        height: 24px;
+        top: 40px;
         background: ${cssManager.bdTheme(
-          'linear-gradient(0deg, #f8f8f800 0%, #ffffff 100%)',
-          'linear-gradient(0deg, #111c2800 0%, #0e151f 100%)'
+          'linear-gradient(0deg, transparent 0%, #fafafa 100%)',
+          'linear-gradient(0deg, transparent 0%, #0a0a0a 100%)'
         )};
         pointer-events: none;
+        opacity: 0.8;
       }
     `,
   ];
@@ -159,86 +335,174 @@ export class DeesAppuiActivitylog extends DeesElement {
           <div class="heading">Activity Log</div>
         </div>
         <div class="activityContainer">
-          <div class="streamingIndicator">streaming...</div>
+          <div class="streamingIndicator">Live Updates</div>
+          
+          <div class="date-separator">Today</div>
+          
           <div class="activityentry" @contextmenu=${async eventArg => {
             DeesContextmenu.openContextMenuWithOptions(eventArg, [
               {
-                name: 'app settings',
+                name: 'Copy activity',
                 action: async () => {},
               },
               {
-                name: 'account settings',
+                name: 'View details',
                 action: async () => {},
               },
               {
-                name: 'logout',
+                name: 'Filter by user',
                 action: async () => {},
               },
             ]);
           }}>
-            <span class="timestamp">22:01:</span> Max Mustermann logged in
+            <span class="timestamp">22:20</span>
+            <div class="activity-icon logout">
+              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged out
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:02:</span> Max Mustermann viewed an invoice
+            <span class="timestamp">22:19</span>
+            <div class="activity-icon update">
+              <dees-icon .icon=${'lucide:checkCircle'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> approved a payment
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:03:</span> Max Mustermann added a new contact
+            <span class="timestamp">22:18</span>
+            <div class="activity-icon view">
+              <dees-icon .icon=${'lucide:archive'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> archived an invoice
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:04:</span> Max Mustermann updated account settings
+            <span class="timestamp">22:17</span>
+            <div class="activity-icon login">
+              <dees-icon .icon=${'lucide:logIn'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged in
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:05:</span> Max Mustermann logged out
+            <span class="timestamp">22:16</span>
+            <div class="activity-icon logout">
+              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged out
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:06:</span> Max Mustermann logged in
+            <span class="timestamp">22:15</span>
+            <div class="activity-icon update">
+              <dees-icon .icon=${'lucide:key'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> changed password
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:07:</span> Max Mustermann created a new invoice
+            <span class="timestamp">22:14</span>
+            <div class="activity-icon create">
+              <dees-icon .icon=${'lucide:userPlus'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> added a new user
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:08:</span> Max Mustermann sent an invoice
+            <span class="timestamp">22:13</span>
+            <div class="activity-icon view">
+              <dees-icon .icon=${'lucide:messageCircle'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> contacted support
+            </div>
           </div>
+          
+          <div class="date-separator">Yesterday</div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:09:</span> Max Mustermann viewed reports
+            <span class="timestamp">18:45</span>
+            <div class="activity-icon update">
+              <dees-icon .icon=${'lucide:trash2'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> deleted an invoice
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:10:</span> Max Mustermann logged out
+            <span class="timestamp">17:30</span>
+            <div class="activity-icon login">
+              <dees-icon .icon=${'lucide:logIn'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged in
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:11:</span> Max Mustermann logged in
+            <span class="timestamp">16:15</span>
+            <div class="activity-icon logout">
+              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged out
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:12:</span> Max Mustermann deleted an invoice
+            <span class="timestamp">14:20</span>
+            <div class="activity-icon view">
+              <dees-icon .icon=${'lucide:barChart'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> viewed reports
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:13:</span> Max Mustermann contacted support
+            <span class="timestamp">13:45</span>
+            <div class="activity-icon create">
+              <dees-icon .icon=${'lucide:send'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> sent an invoice
+            </div>
           </div>
+          
           <div class="activityentry">
-            <span class="timestamp">22:14:</span> Max Mustermann added a new user
+            <span class="timestamp">13:30</span>
+            <div class="activity-icon create">
+              <dees-icon .icon=${'lucide:filePlus'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> created a new invoice
+            </div>
           </div>
-          <div class="activityentry">
-            <span class="timestamp">22:15:</span> Max Mustermann changed password
-          </div>
-          <div class="activityentry">
-            <span class="timestamp">22:16:</span> Max Mustermann logged out
-          </div>
-          <div class="activityentry">
-            <span class="timestamp">22:17:</span> Max Mustermann logged in
-          </div>
-          <div class="activityentry">
-            <span class="timestamp">22:18:</span> Max Mustermann archived an invoice
-          </div>
-          <div class="activityentry">
-            <span class="timestamp">22:19:</span> Max Mustermann approved a payment
-          </div>
-          <div class="activityentry">
-            <span class="timestamp">22:20:</span> Max Mustermann logged out
-          </div>
-          <div class="streamingIndicator bottom">loading more...</div>
+          
+          <div class="streamingIndicator bottom">Loading History</div>
         </div>
         <div class="searchbox">
-          <input type="text" placeholder="Search" />
+          <div class="search-wrapper">
+            <dees-icon class="search-icon" .icon=${'lucide:search'}></dees-icon>
+            <input type="text" placeholder="Search activities, users..." />
+          </div>
         </div>
         <div class="topShadow"></div>
         <div class="bottomShadow"></div>

ts_web/elements/dees-appui-base.demo.ts

@@ -65,10 +65,10 @@ export const demoFunc = () => {
 
   // Main menu tabs (left sidebar)
   const mainMenuTabs: ITab[] = [
-    { key: 'dashboard', iconName: 'home', action: () => console.log('Dashboard selected') },
-    { key: 'projects', iconName: 'folder', action: () => console.log('Projects selected') },
-    { key: 'analytics', iconName: 'lineChart', action: () => console.log('Analytics selected') },
-    { key: 'settings', iconName: 'settings', action: () => console.log('Settings selected') },
+    { key: 'dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard selected') },
+    { key: 'projects', iconName: 'lucide:folder', action: () => console.log('Projects selected') },
+    { key: 'analytics', iconName: 'lucide:lineChart', action: () => console.log('Analytics selected') },
+    { key: 'settings', iconName: 'lucide:settings', action: () => console.log('Settings selected') },
   ];
 
   // Selector options (second sidebar)
@@ -83,9 +83,9 @@ export const demoFunc = () => {
 
   // Main content tabs
   const mainContentTabs: ITab[] = [
-    { key: 'Details', iconName: 'file', action: () => console.log('Details tab') },
-    { key: 'Logs', iconName: 'list', action: () => console.log('Logs tab') },
-    { key: 'Metrics', iconName: 'lineChart', action: () => console.log('Metrics tab') },
+    { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details tab') },
+    { key: 'Logs', iconName: 'lucide:list', action: () => console.log('Logs tab') },
+    { key: 'Metrics', iconName: 'lucide:lineChart', action: () => console.log('Metrics tab') },
   ];
 
   // Profile menu items

ts_web/elements/dees-appui-maincontent.ts

@@ -19,9 +19,9 @@ export class DeesAppuiMaincontent extends DeesElement {
   public static demo = () => html`
     <dees-appui-maincontent
       .tabs=${[
-        { key: 'Overview', iconName: 'home', action: () => console.log('Overview') },
-        { key: 'Details', iconName: 'file', action: () => console.log('Details') },
-        { key: 'Settings', iconName: 'cog', action: () => console.log('Settings') },
+        { key: 'Overview', iconName: 'lucide:home', action: () => console.log('Overview') },
+        { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details') },
+        { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
       ]}
     >
       <div slot="content" style="padding: 40px; color: #ccc;">

ts_web/elements/dees-appui-mainmenu.ts

@@ -22,10 +22,10 @@ export class DeesAppuiMainmenu extends DeesElement {
   public static demo = () => html`
     <dees-appui-mainmenu
       .tabs=${[
-        { key: 'Dashboard', iconName: 'home', action: () => console.log('Dashboard') },
-        { key: 'Projects', iconName: 'folder', action: () => console.log('Projects') },
-        { key: 'Analytics', iconName: 'lineChart', action: () => console.log('Analytics') },
-        { key: 'Settings', iconName: 'settings', action: () => console.log('Settings') },
+        { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
+        { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
+        { key: 'Analytics', iconName: 'lucide:lineChart', action: () => console.log('Analytics') },
+        { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
       ]}
     ></dees-appui-mainmenu>
   `;
@@ -35,7 +35,7 @@ export class DeesAppuiMainmenu extends DeesElement {
   // INSTANCE
   @property({ type: Array })
   public tabs: interfaces.ITab[] = [
-    { key: '⚠️ Please set tabs', iconName: 'alertTriangle', action: () => console.warn('No tabs configured for mainmenu') },
+    { key: '⚠️ Please set tabs', iconName: 'lucide:alertTriangle', action: () => console.warn('No tabs configured for mainmenu') },
   ];
 
   @property()
@@ -112,7 +112,7 @@ export class DeesAppuiMainmenu extends DeesElement {
                   this.updateTab(tabArg);
                 }}"
               >
-                <dees-icon .icon="${tabArg.iconName ? `lucide:${tabArg.iconName}` : ''}"></dees-icon>
+                <dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
               </div>
             `;
           })}

ts_web/elements/dees-appui-tabs.ts

@@ -14,15 +14,94 @@ import * as domtools from '@design.estate/dees-domtools';
 
 @customElement('dees-appui-tabs')
 export class DeesAppuiTabs extends DeesElement {
-  public static demo = () => html`
-    <dees-appui-tabs
-      .tabs=${[
-        { key: 'Tab 1', action: () => console.log('Tab 1 clicked') },
-        { key: 'Tab 2', action: () => console.log('Tab 2 clicked') },
-        { key: 'Tab 3', action: () => console.log('Tab 3 clicked') },
-      ]}
-    ></dees-appui-tabs>
-  `;
+  public static demo = () => {
+    const horizontalTabs: interfaces.ITab[] = [
+      { key: 'Home', iconName: 'lucide:home', action: () => console.log('Home clicked') },
+      { key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => console.log('Analytics clicked') },
+      { key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports clicked') },
+      { key: 'User Settings', iconName: 'lucide:settings', action: () => console.log('Settings clicked') },
+      { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help clicked') },
+    ];
+
+    const verticalTabs: interfaces.ITab[] = [
+      { key: 'Profile', iconName: 'lucide:user', action: () => console.log('Profile clicked') },
+      { key: 'Security', iconName: 'lucide:shield', action: () => console.log('Security clicked') },
+      { key: 'Notifications', iconName: 'lucide:bell', action: () => console.log('Notifications clicked') },
+      { key: 'Integrations', iconName: 'lucide:link', action: () => console.log('Integrations clicked') },
+      { key: 'Advanced', iconName: 'lucide:code', action: () => console.log('Advanced clicked') },
+    ];
+
+    const noIndicatorTabs: interfaces.ITab[] = [
+      { key: 'All', action: () => console.log('All clicked') },
+      { key: 'Active', action: () => console.log('Active clicked') },
+      { key: 'Completed', action: () => console.log('Completed clicked') },
+      { key: 'Archived', action: () => console.log('Archived clicked') },
+    ];
+
+    const demoContent = (text: string) => html`
+      <div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
+        ${text}
+      </div>
+    `;
+
+    return html`
+      <style>
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 32px;
+          padding: 48px;
+          background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+          min-height: 100vh;
+        }
+        
+        .section {
+          background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-radius: 8px;
+          padding: 24px;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        
+        .section-title {
+          font-size: 18px;
+          font-weight: 600;
+          margin-bottom: 16px;
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        }
+        
+        .two-column {
+          display: grid;
+          grid-template-columns: 200px 1fr;
+          gap: 24px;
+          align-items: start;
+        }
+      </style>
+      <div class="demo-container">
+        <div class="section">
+          <div class="section-title">Horizontal Tabs with Animated Indicator</div>
+          <dees-appui-tabs .tabs=${horizontalTabs}>
+            ${demoContent('Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.')}
+          </dees-appui-tabs>
+        </div>
+        
+        <div class="section">
+          <div class="section-title">Vertical Tabs Layout</div>
+          <div class="two-column">
+            <dees-appui-tabs .tabStyle=${'vertical'} .tabs=${verticalTabs}></dees-appui-tabs>
+            ${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
+          </div>
+        </div>
+        
+        <div class="section">
+          <div class="section-title">Without Indicator</div>
+          <dees-appui-tabs .showTabIndicator=${false} .tabs=${noIndicatorTabs}>
+            ${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
+          </dees-appui-tabs>
+        </div>
+      </div>
+    `;
+  };
 
   // INSTANCE
   @property({
@@ -50,148 +129,217 @@ export class DeesAppuiTabs extends DeesElement {
 
       .tabs-wrapper {
         position: relative;
-        background: ${cssManager.bdTheme('#f5f5f5', '#000000')};
-        height: 52px;
+      }
+
+      .tabs-wrapper.horizontal-wrapper {
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
       }
 
       .tabsContainer {
         position: relative;
-        z-index: 1;
         user-select: none;
       }
 
       .tabsContainer.horizontal {
-        display: grid;
-        padding-top: 20px;
-        padding-bottom: 0px;
-        margin-left: 24px;
+        display: flex;
+        align-items: center;
         font-size: 14px;
+        overflow-x: auto;
+        scrollbar-width: none;
+        height: 48px;
+        padding: 0 16px;
+        gap: 4px;
+      }
+
+      .tabsContainer.horizontal::-webkit-scrollbar {
+        display: none;
       }
 
       .tabsContainer.vertical {
         display: flex;
         flex-direction: column;
-        padding: 20px;
+        padding: 8px;
         font-size: 14px;
+        gap: 2px;
+        position: relative;
+        background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+        border-radius: 8px;
       }
 
       .tab {
-        color: ${cssManager.bdTheme('#666', '#a0a0a0')};
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
         white-space: nowrap;
-        cursor: default;
-        transition: color 0.1s;
+        cursor: pointer;
+        transition: color 0.15s ease;
+        font-weight: 500;
+        position: relative;
+        z-index: 2;
       }
 
       .horizontal .tab {
-        margin-right: 30px;
-        padding-top: 4px;
-        padding-bottom: 12px;
+        padding: 0 16px;
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        position: relative;
+        border-radius: 6px 6px 0 0;
+        transition: background-color 0.15s ease;
       }
-
-      .vertical .tab {
-        padding: 12px 16px;
-        margin-bottom: 4px;
-        border-radius: 4px;
-        width: 100%;
-        display: flex;
+      
+      .horizontal .tab:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        right: -2px;
+        top: 50%;
+        transform: translateY(-50%);
+        height: 20px;
+        width: 1px;
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.5;
+      }
+      
+      .horizontal .tab .tab-content {
+        display: inline-flex;
         align-items: center;
         gap: 8px;
       }
 
+      .vertical .tab {
+        padding: 10px 16px;
+        border-radius: 6px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: all 0.15s ease;
+      }
+
       .tab:hover {
-        color: ${cssManager.bdTheme('#000', '#ffffff')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+      
+      .horizontal .tab:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)')};
+      }
+      
+      .horizontal .tab:hover::after,
+      .horizontal .tab:hover + .tab::after {
+        opacity: 0;
       }
 
       .vertical .tab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+        background: ${cssManager.bdTheme('rgba(244, 244, 245, 0.5)', 'rgba(39, 39, 42, 0.5)')};
       }
 
-      .tab.selectedTab {
-        color: ${cssManager.bdTheme('#333', '#e0e0e0')};
+      .horizontal .tab.selectedTab {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+      
+      .horizontal .tab.selectedTab::after,
+      .horizontal .tab.selectedTab + .tab::after {
+        opacity: 0;
       }
 
       .vertical .tab.selectedTab {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
-        color: ${cssManager.bdTheme('#000', '#ffffff')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .tab dees-icon {
         font-size: 16px;
       }
 
-      .tabs-wrapper .tabIndicator {
+      .tabIndicator {
         position: absolute;
-        z-index: 0;
-        left: 40px;
-        bottom: 0px;
-        height: 40px;
-        width: 40px;
-        background: ${cssManager.bdTheme('#ffffff', '#161616')};
-        transition: all 0.1s;
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444444')};
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        opacity: 0;
+      }
+      
+      .tabIndicator.no-transition {
+        transition: none;
       }
 
-      .vertical .tabIndicator {
-        display: none;
+      .tabs-wrapper .tabIndicator {
+        height: 3px;
+        bottom: 0;
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        border-radius: 3px 3px 0 0;
+        z-index: 3;
+      }
+
+      .vertical-wrapper {
+        position: relative;
+      }
+
+      .vertical-wrapper .tabIndicator {
+        left: 8px;
+        right: 8px;
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        z-index: 1;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
       }
 
       .content {
-        margin-top: 20px;
+        padding: 32px 24px;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      ${this.tabStyle === 'horizontal' ? html`
-        <style>
-          .tabsContainer.horizontal {
-            grid-template-columns: repeat(${this.tabs.length}, min-content);
-          }
-        </style>
-        <div class="tabs-wrapper">
-          <div class="tabsContainer horizontal">
-            ${this.tabs.map((tabArg) => {
-              return html`
-                <div
-                  class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
-                  @click="${() => this.selectTab(tabArg)}"
-                >
-                  ${tabArg.key}
-                </div>
-              `;
-            })}
-          </div>
-          ${this.showTabIndicator ? html`
-            <div class="tabIndicator"></div>
-          ` : ''}
-        </div>
-      ` : html`
-        <div class="tabsContainer vertical">
-          ${this.tabs.map((tabArg) => {
-            return html`
-              <div
-                class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
-                @click="${() => this.selectTab(tabArg)}"
-              >
-                ${tabArg.iconName ? html`<dees-icon .iconName=${tabArg.iconName}></dees-icon>` : ''}
-                ${tabArg.key}
-              </div>
-            `;
-          })}
-        </div>
-      `}
+      ${this.renderTabsWrapper()}
       <div class="content">
         <slot></slot>
       </div>
     `;
   }
 
+  private renderTabsWrapper(): TemplateResult {
+    const isHorizontal = this.tabStyle === 'horizontal';
+    const wrapperClass = isHorizontal ? 'tabs-wrapper horizontal-wrapper' : 'vertical-wrapper';
+    const containerClass = `tabsContainer ${this.tabStyle}`;
+
+    return html`
+      <div class="${wrapperClass}">
+        <div class="${containerClass}">
+          ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+        </div>
+        ${this.showTabIndicator ? html`<div class="tabIndicator"></div>` : ''}
+      </div>
+    `;
+  }
+
+  private renderTab(tab: interfaces.ITab, isHorizontal: boolean): TemplateResult {
+    const isSelected = tab === this.selectedTab;
+    const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
+    
+    const content = isHorizontal ? html`
+      <span class="tab-content">
+        ${this.renderTabIcon(tab)}
+        ${tab.key}
+      </span>
+    ` : html`
+      ${this.renderTabIcon(tab)}
+      ${tab.key}
+    `;
+
+    return html`
+      <div
+        class="${classes}"
+        @click="${() => this.selectTab(tab)}"
+      >
+        ${content}
+      </div>
+    `;
+  }
+
+  private renderTabIcon(tab: interfaces.ITab): TemplateResult | '' {
+    return tab.iconName ? html`<dees-icon .icon=${tab.iconName}></dees-icon>` : '';
+  }
+
   private selectTab(tabArg: interfaces.ITab) {
     this.selectedTab = tabArg;
-    this.updateTabIndicator();
     tabArg.action();
     
     // Emit tab-select event
@@ -202,31 +350,6 @@ export class DeesAppuiTabs extends DeesElement {
     }));
   }
 
-  /**
-   * updates the indicator position
-   */
-  private updateTabIndicator() {
-    if (!this.showTabIndicator || this.tabStyle !== 'horizontal' || !this.selectedTab) {
-      return;
-    }
-    
-    const tabIndex = this.tabs.indexOf(this.selectedTab);
-    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
-      `.tabs-wrapper .tabsContainer .tab:nth-child(${tabIndex + 1})`
-    );
-    
-    if (!selectedTabElement) return;
-    
-    const tabsContainer: HTMLElement = this.shadowRoot.querySelector('.tabs-wrapper .tabsContainer');
-    const marginLeft = parseInt(window.getComputedStyle(tabsContainer).getPropertyValue("margin-left"));
-    const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabs-wrapper .tabIndicator');
-    
-    if (tabIndicator) {
-      tabIndicator.style.width = selectedTabElement.clientWidth + 24 + 'px';
-      tabIndicator.style.left = selectedTabElement.offsetLeft + marginLeft - 12 + 'px';
-    }
-  }
-
   firstUpdated() {
     if (this.tabs && this.tabs.length > 0) {
       this.selectTab(this.tabs[0]);
@@ -241,7 +364,88 @@ export class DeesAppuiTabs extends DeesElement {
     }
     
     if (changedProperties.has('selectedTab') || changedProperties.has('tabs')) {
-      this.updateTabIndicator();
+      await this.updateComplete;
+      // Wait for fonts to load on first update
+      if (!this.indicatorInitialized && document.fonts) {
+        await document.fonts.ready;
+      }
+      requestAnimationFrame(() => {
+        this.updateTabIndicator();
+      });
     }
   }
+
+  private indicatorInitialized = false;
+
+  private updateTabIndicator() {
+    if (!this.shouldShowIndicator()) return;
+
+    const selectedTabElement = this.getSelectedTabElement();
+    if (!selectedTabElement) return;
+
+    const indicator = this.getIndicatorElement();
+    if (!indicator) return;
+
+    this.handleInitialTransition(indicator);
+    
+    if (this.tabStyle === 'horizontal') {
+      this.updateHorizontalIndicator(indicator, selectedTabElement);
+    } else {
+      this.updateVerticalIndicator(indicator, selectedTabElement);
+    }
+
+    indicator.style.opacity = '1';
+  }
+
+  private shouldShowIndicator(): boolean {
+    return this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
+  }
+
+  private getSelectedTabElement(): HTMLElement | null {
+    const selectedIndex = this.tabs.indexOf(this.selectedTab);
+    const isHorizontal = this.tabStyle === 'horizontal';
+    const selector = isHorizontal 
+      ? `.tabs-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`
+      : `.vertical-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`;
+      
+    return this.shadowRoot.querySelector(selector);
+  }
+
+  private getIndicatorElement(): HTMLElement | null {
+    return this.shadowRoot.querySelector('.tabIndicator');
+  }
+
+  private handleInitialTransition(indicator: HTMLElement): void {
+    if (!this.indicatorInitialized) {
+      indicator.classList.add('no-transition');
+      this.indicatorInitialized = true;
+      
+      setTimeout(() => {
+        indicator.classList.remove('no-transition');
+      }, 50);
+    }
+  }
+
+  private updateHorizontalIndicator(indicator: HTMLElement, tabElement: HTMLElement): void {
+    const tabContent = tabElement.querySelector('.tab-content') as HTMLElement;
+    if (!tabContent) return;
+
+    const wrapperRect = indicator.parentElement.getBoundingClientRect();
+    const contentRect = tabContent.getBoundingClientRect();
+    
+    const contentLeft = contentRect.left - wrapperRect.left;
+    const indicatorWidth = contentRect.width + 8;
+    const indicatorLeft = contentLeft - 4;
+    
+    indicator.style.width = `${indicatorWidth}px`;
+    indicator.style.left = `${indicatorLeft}px`;
+  }
+
+  private updateVerticalIndicator(indicator: HTMLElement, tabElement: HTMLElement): void {
+    const tabsContainer = this.shadowRoot.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
+    if (!tabsContainer) return;
+    
+    indicator.style.top = `${tabElement.offsetTop + tabsContainer.offsetTop}px`;
+    indicator.style.height = `${tabElement.clientHeight}px`;
+  }
 }

ts_web/elements/dees-appui-view.ts

@@ -35,17 +35,17 @@ export class DeesAppuiView extends DeesElement {
         id: 'demo-view',
         name: 'Demo View',
         description: 'A demonstration view',
-        iconName: 'home',
+        iconName: 'lucide:home',
         tabs: [
           {
             key: 'overview',
-            iconName: 'chart-line',
+            iconName: 'lucide:lineChart',
             action: () => console.log('Overview tab'),
             content: html`<div style="padding: 20px;">Overview Content</div>`
           },
           {
             key: 'details',
-            iconName: 'file-alt',
+            iconName: 'lucide:fileText',
             action: () => console.log('Details tab'),
             content: html`<div style="padding: 20px;">Details Content</div>`
           }

ts_web/elements/dees-button.demo.ts

@@ -1,83 +1,93 @@
-import { html, css, cssManager } from '@design.estate/dees-element';
+import { html, css, cssManager, domtools } 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';
+import type { DeesButton } from './dees-button.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;
-        }
-        
-        .button-group {
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          flex-wrap: wrap;
-        }
-        
-        .vertical-group {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-          max-width: 300px;
-        }
-        
-        .horizontal-group {
-          display: flex;
-          align-items: center;
-          gap: 16px;
-          flex-wrap: wrap;
-        }
-        
-        .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%)')};
-        }
-        
-        .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">
+  <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;
+      }
+      
+      .button-group {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      
+      .vertical-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        max-width: 300px;
+      }
+      
+      .horizontal-group {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      
+      .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%)')};
+      }
+      
+      .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-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Log button clicks for demo purposes
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const type = button.getAttribute('type') || 'default';
+          console.log(`Button variant clicked: ${type}`);
+        });
+      });
+    }}>
       <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>
@@ -88,7 +98,18 @@ export const demoFunc = () => html`
           <dees-button type="link">Link Button</dees-button>
         </div>
       </dees-panel>
-      
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate size differences programmatically
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const size = button.getAttribute('size') || 'default';
+          console.log(`Button size: ${size}`);
+        });
+      });
+    }}>
       <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>
@@ -103,7 +124,21 @@ export const demoFunc = () => html`
           <dees-button size="lg" type="outline">Large Outline</dees-button>
         </div>
       </dees-panel>
-      
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track icon button clicks
+      const iconButtons = elementArg.querySelectorAll('dees-button');
+      iconButtons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const hasIcon = button.querySelector('dees-icon');
+          if (hasIcon) {
+            const iconName = hasIcon.getAttribute('iconFA') || 'unknown';
+            console.log(`Icon button clicked: ${iconName}`);
+          }
+        });
+      });
+    }}>
       <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
         <div class="icon-row">
           <dees-button>
@@ -153,7 +188,33 @@ export const demoFunc = () => html`
           </dees-button>
         </div>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate status changes
+      const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
+      const successButton = elementArg.querySelector('dees-button[status="success"]');
+      const errorButton = elementArg.querySelector('dees-button[status="error"]');
       
+      // Simulate status changes
+      if (pendingButton) {
+        setTimeout(() => {
+          console.log('Pending button is showing loading state');
+        }, 1000);
+      }
+      
+      if (successButton) {
+        successButton.addEventListener('clicked', () => {
+          console.log('Success state button clicked');
+        });
+      }
+      
+      if (errorButton) {
+        errorButton.addEventListener('clicked', () => {
+          console.log('Error state button clicked');
+        });
+      }
+    }}>
       <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>
@@ -169,61 +230,81 @@ export const demoFunc = () => html`
           <dees-button type="destructive" status="pending" size="lg">Large Loading</dees-button>
         </div>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Set up click handlers with the output element
+      const output = elementArg.querySelector('#click-output');
       
+      const clickMeBtn = elementArg.querySelector('dees-button:first-of-type');
+      const dataBtn = elementArg.querySelector('dees-button[type="secondary"]');
+      const asyncBtn = elementArg.querySelector('dees-button[type="destructive"]');
+      
+      if (clickMeBtn && output) {
+        clickMeBtn.addEventListener('clicked', () => {
+          output.textContent = `Clicked: Default button at ${new Date().toLocaleTimeString()}`;
+        });
+      }
+      
+      if (dataBtn && output) {
+        dataBtn.addEventListener('clicked', (e: CustomEvent) => {
+          output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
+        });
+      }
+      
+      if (asyncBtn && output) {
+        asyncBtn.addEventListener('clicked', async () => {
+          output.textContent = 'Processing...';
+          await domtools.plugins.smartdelay.delayFor(2000);
+          output.textContent = 'Action completed!';
+        });
+      }
+    }}>
       <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}`;
-              }
-            }}
-          >
+          <dees-button>Click Me</dees-button>
+          <dees-button type="secondary" .eventDetailData=${'custom-data-123'}>
             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>
+          <dees-button type="destructive">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-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Set up form submission handling
+      const form = elementArg.querySelector('dees-form');
+      const output = elementArg.querySelector('#form-output');
       
+      if (form && output) {
+        form.addEventListener('formData', (e: CustomEvent) => {
+          output.innerHTML = '<strong>Form submitted with data:</strong><br>' + 
+            JSON.stringify(e.detail.data, null, 2);
+        });
+      }
+      
+      // Track non-submit button clicks
+      const draftBtn = elementArg.querySelector('dees-button[type="secondary"]');
+      const cancelBtn = elementArg.querySelector('dees-button[type="ghost"]');
+      
+      if (draftBtn) {
+        draftBtn.addEventListener('clicked', () => {
+          console.log('Save Draft clicked');
+        });
+      }
+      
+      if (cancelBtn) {
+        cancelBtn.addEventListener('clicked', () => {
+          console.log('Cancel clicked');
+        });
+      }
+    }}>
       <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-form>
           <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>
@@ -237,7 +318,18 @@ export const demoFunc = () => html`
           <em>Submit the form to see the data...</em>
         </div>
       </dees-panel>
-      
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Log legacy type mappings
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        const type = button.getAttribute('type');
+        if (type) {
+          console.log(`Legacy type "${type}" is supported for backward compatibility`);
+        }
+      });
+    }}>
       <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>
@@ -250,7 +342,35 @@ export const demoFunc = () => html`
           These legacy type values are maintained for backward compatibility but we recommend using the new variant system.
         </p>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track action group clicks
+      const actionGroup = elementArg.querySelectorAll('.vertical-group')[0];
+      const dangerGroup = elementArg.querySelectorAll('.vertical-group')[1];
       
+      if (actionGroup) {
+        const buttons = actionGroup.querySelectorAll('dees-button');
+        buttons.forEach((button, index) => {
+          button.addEventListener('clicked', () => {
+            const action = ['Save Changes', 'Discard', 'Help'][index];
+            console.log(`Action group: ${action} clicked`);
+          });
+        });
+      }
+      
+      if (dangerGroup) {
+        const buttons = dangerGroup.querySelectorAll('dees-button');
+        buttons.forEach((button, index) => {
+          button.addEventListener('clicked', () => {
+            const action = ['Delete Account', 'Archive Data', 'Not Available'][index];
+            if (index !== 2) { // Skip disabled button
+              console.log(`Danger zone: ${action} clicked`);
+            }
+          });
+        });
+      }
+    }}>
       <dees-panel .title=${'8. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
         <div class="horizontal-group">
           <div class="vertical-group">
@@ -296,6 +416,6 @@ export const demoFunc = () => html`
           </div>
         </div>
       </dees-panel>
-    </div>
-  </dees-demowrapper>
-`;
+    </dees-demowrapper>
+  </div>
+`;

ts_web/elements/dees-chips.demo.ts

@@ -1,41 +1,112 @@
-import { html } from '@design.estate/dees-element';
+import { html, cssManager } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
   <style>
     .demoContainer {
       display: flex;
       flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      background: #222;
+      gap: 32px;
+      padding: 48px;
+      background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+      min-height: 100vh;
+    }
+    
+    .section {
+      background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+      border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+      border-radius: 8px;
+      padding: 24px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+    }
+    
+    .section-description {
+      font-size: 14px;
+      color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      margin-bottom: 16px;
     }
   </style>
   <div class="demoContainer">
-    <dees-chips
-      selectionMode="none"
-      .selectableChips=${[
-        { key: 'account1', value: 'Payment Account 1' },
-        { key: 'account2', value: 'PaymentAccount2' },
-        { key: 'account3', value: 'Payment Account 3' },
-      ]}
-    ></dees-chips>
-    <dees-chips
-      selectionMode="single"
-      chipsAreRemovable
-      .selectableChips=${[
-        { key: 'account1', value: 'Payment Account 1' },
-        { key: 'account2', value: 'PaymentAccount2' },
-        { key: 'account3', value: 'Payment Account 3' },
-      ]}
-    ></dees-chips>
-    <dees-chips
-      selectionMode="multiple"
-      .selectableChips=${[
-        { key: 'account1', value: 'Payment Account 1' },
-        { key: 'account2', value: 'PaymentAccount2' },
-        { key: 'account3', value: 'Payment Account 3' },
-      ]}
-    ></dees-chips>
+    <div class="section">
+      <div class="section-title">Non-Selectable Chips</div>
+      <div class="section-description">Basic chips without selection capability. Use for display-only tags.</div>
+      <dees-chips
+        selectionMode="none"
+        .selectableChips=${[
+          { key: 'status', value: 'Active' },
+          { key: 'tier', value: 'Premium' },
+          { key: 'region', value: 'EU-West' },
+          { key: 'type', value: 'Enterprise' },
+        ]}
+      ></dees-chips>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Single Selection Chips</div>
+      <div class="section-description">Click to select one chip at a time. Useful for filters and options.</div>
+      <dees-chips
+        selectionMode="single"
+        .selectableChips=${[
+          { key: 'all', value: 'All Projects' },
+          { key: 'active', value: 'Active' },
+          { key: 'archived', value: 'Archived' },
+          { key: 'drafts', value: 'Drafts' },
+        ]}
+      ></dees-chips>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Multiple Selection Chips</div>
+      <div class="section-description">Select multiple chips simultaneously. Great for tag selection.</div>
+      <dees-chips
+        selectionMode="multiple"
+        .selectableChips=${[
+          { key: 'js', value: 'JavaScript' },
+          { key: 'ts', value: 'TypeScript' },
+          { key: 'react', value: 'React' },
+          { key: 'vue', value: 'Vue' },
+          { key: 'angular', value: 'Angular' },
+          { key: 'node', value: 'Node.js' },
+        ]}
+      ></dees-chips>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Removable Chips with Keys</div>
+      <div class="section-description">Chips with remove buttons and key-value pairs. Perfect for dynamic lists.</div>
+      <dees-chips
+        selectionMode="single"
+        chipsAreRemovable
+        .selectableChips=${[
+          { key: 'env', value: 'Production' },
+          { key: 'version', value: '2.4.1' },
+          { key: 'branch', value: 'main' },
+          { key: 'author', value: 'John Doe' },
+        ]}
+      ></dees-chips>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Mixed Content Example</div>
+      <div class="section-description">Combining different chip types for complex UIs.</div>
+      <dees-chips
+        selectionMode="multiple"
+        chipsAreRemovable
+        .selectableChips=${[
+          { key: 'priority', value: 'High' },
+          { key: 'status', value: 'In Progress' },
+          { key: 'bug', value: 'Bug' },
+          { key: 'feature', value: 'Feature' },
+          { key: 'sprint', value: 'Sprint 23' },
+          { key: 'assignee', value: 'Alice' },
+        ]}
+      ></dees-chips>
+    </div>
   </div>
 `;

ts_web/elements/dees-chips.ts

@@ -60,52 +60,93 @@ export class DeesChips extends DeesElement {
 
       .mainbox {
         user-select: none;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
       }
 
       .chip {
-        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
-        background: #333333;
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
         display: inline-flex;
-        height: 20px;
-        line-height: 20px;
-        padding: 0px 8px;
-        font-size: 12px;
-        color: #fff;
-        border-radius: 40px;
-        margin-right: 4px;
-        margin-bottom: 4px;
+        align-items: center;
+        height: 32px;
+        padding: 0px 12px;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        border-radius: 6px;
         position: relative;
-        overflow: hidden;
-        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+        transition: all 0.15s ease;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       }
 
       .chip:hover {
-        background: #666666;
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
+      }
+
+      .chip:active {
+        transform: scale(0.98);
       }
 
       .chip.selected {
-        background: #00a3ff;
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        color: #ffffff;
+      }
+
+      .chip.selected:hover {
+        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
       }
 
       .chipKey {
-        background: rgba(0, 0, 0, 0.3);
-        height: 100%;
-        display: inline-block;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+        height: 20px;
+        line-height: 20px;
+        display: inline-flex;
+        align-items: center;
         margin-left: -8px;
-        padding-left: 8px;
-        padding-right: 8px;
+        padding: 0px 8px;
         margin-right: 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .chip.selected .chipKey {
+        background: rgba(255, 255, 255, 0.2);
+        color: rgba(255, 255, 255, 0.9);
       }
 
       dees-icon {
-        padding: 0px 6px 0px 4px;
-        margin-left: 4px;
-        margin-right: -8px;
-        background: rgba(0, 0, 0, 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+        margin-right: -6px;
+        border-radius: 3px;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .chip.selected dees-icon {
+        color: rgba(255, 255, 255, 0.8);
       }
 
       dees-icon:hover {
-        background: #e4002b;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#ef4444', '#ef4444')};
+      }
+
+      .chip.selected dees-icon:hover {
+        background: rgba(255, 255, 255, 0.2);
+        color: #ffffff;
       }
     `,
   ];
@@ -127,7 +168,7 @@ export class DeesChips extends DeesElement {
                         event.stopPropagation(); // prevent the selectChip event from being triggered
                         this.removeChip(chip);
                       }}
-                      .iconFA=${'xmark'}
+                      .icon=${'fa:xmark'}
                     ></dees-icon>
                   `
                 : html``}
@@ -139,19 +180,25 @@ export class DeesChips extends DeesElement {
   }
 
   public async firstUpdated() {
-    if (!this.textContent) {
-      this.textContent = 'Button';
-      this.performUpdate();
-    }
+    // Component initialized
   }
 
   private isSelected(chip: Tag): boolean {
     if (this.selectionMode === 'single') {
-      return this.selectedChip?.key === chip.key;
+      return this.selectedChip ? this.isSameChip(this.selectedChip, chip) : false;
     } else {
-      return this.selectedChips.some((selected) => selected.key === chip.key);
+      return this.selectedChips.some((selected) => this.isSameChip(selected, chip));
     }
   }
+  
+  private isSameChip(chip1: Tag, chip2: Tag): boolean {
+    // If both have keys, compare by key
+    if (chip1.key && chip2.key) {
+      return chip1.key === chip2.key;
+    }
+    // Otherwise compare by value (and key if present)
+    return chip1.value === chip2.value && chip1.key === chip2.key;
+  }
 
   public async selectChip(chip: Tag) {
     if (this.selectionMode === 'none') {
@@ -168,7 +215,7 @@ export class DeesChips extends DeesElement {
       }
     } else if (this.selectionMode === 'multiple') {
       if (this.isSelected(chip)) {
-        this.selectedChips = this.selectedChips.filter((selected) => selected.key !== chip.key);
+        this.selectedChips = this.selectedChips.filter((selected) => !this.isSameChip(selected, chip));
       } else {
         this.selectedChips = [...this.selectedChips, chip];
       }
@@ -179,13 +226,13 @@ export class DeesChips extends DeesElement {
 
   public removeChip(chipToRemove: Tag): void {
     // Remove the chip from selectableChips
-    this.selectableChips = this.selectableChips.filter((chip) => chip.key !== chipToRemove.key);
+    this.selectableChips = this.selectableChips.filter((chip) => !this.isSameChip(chip, chipToRemove));
 
     // Remove the chip from selectedChips if present
-    this.selectedChips = this.selectedChips.filter((chip) => chip.key !== chipToRemove.key);
+    this.selectedChips = this.selectedChips.filter((chip) => !this.isSameChip(chip, chipToRemove));
 
     // If the removed chip was the selectedChip, set selectedChip to null
-    if (this.selectedChip && this.selectedChip.key === chipToRemove.key) {
+    if (this.selectedChip && this.isSameChip(this.selectedChip, chipToRemove)) {
       this.selectedChip = null;
     }
 

ts_web/elements/dees-contextmenu.demo.ts

@@ -13,139 +13,203 @@ export const demoFunc = () => html`
     display: flex;
     flex-direction: column;
     gap: 20px;
-    padding: 40px;
-    background: #f5f5f5;
+    padding: 20px;
     min-height: 400px;
   }
   .demo-area {
-    background: white;
     padding: 40px;
     border-radius: 8px;
-    border: 1px solid #e0e0e0;
     text-align: center;
     cursor: context-menu;
+    transition: background 0.2s;
+  }
+  .demo-area:hover {
+    background: rgba(0, 0, 0, 0.02);
   }
 </style>
 <div class="demo-container">
-  <div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
-    DeesContextmenu.openContextMenuWithOptions(eventArg, [
-      {
-        name: 'Cut',
-        iconName: 'scissors',
-        shortcut: 'Cmd+X',
-        action: async () => {
-          console.log('Cut action');
+  <dees-panel heading="Basic Context Menu with Nested Submenus">
+    <div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
+      DeesContextmenu.openContextMenuWithOptions(eventArg, [
+        {
+          name: 'File',
+          iconName: 'fileText',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'New', iconName: 'filePlus', shortcut: 'Cmd+N', action: async () => console.log('New file') },
+            { name: 'Open', iconName: 'folderOpen', shortcut: 'Cmd+O', action: async () => console.log('Open file') },
+            { name: 'Save', iconName: 'save', shortcut: 'Cmd+S', action: async () => console.log('Save') },
+            { divider: true },
+            { name: 'Export as PDF', iconName: 'download', action: async () => console.log('Export PDF') },
+            { name: 'Export as HTML', iconName: 'code', action: async () => console.log('Export HTML') },
+          ]
         },
-      },
-      {
-        name: 'Copy',
-        iconName: 'copy',
-        shortcut: 'Cmd+C',
-        action: async () => {
-          console.log('Copy action');
+        {
+          name: 'Edit',
+          iconName: 'edit3',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'Cut', iconName: 'scissors', shortcut: 'Cmd+X', action: async () => console.log('Cut') },
+            { name: 'Copy', iconName: 'copy', shortcut: 'Cmd+C', action: async () => console.log('Copy') },
+            { name: 'Paste', iconName: 'clipboard', shortcut: 'Cmd+V', action: async () => console.log('Paste') },
+            { divider: true },
+            { name: 'Find', iconName: 'search', shortcut: 'Cmd+F', action: async () => console.log('Find') },
+            { name: 'Replace', iconName: 'repeat', shortcut: 'Cmd+H', action: async () => console.log('Replace') },
+          ]
         },
-      },
-      {
-        name: 'Paste',
-        iconName: 'clipboard',
-        shortcut: 'Cmd+V',
-        action: async () => {
-          console.log('Paste action');
+        {
+          name: 'View',
+          iconName: 'eye',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'Zoom In', iconName: 'zoomIn', shortcut: 'Cmd++', action: async () => console.log('Zoom in') },
+            { name: 'Zoom Out', iconName: 'zoomOut', shortcut: 'Cmd+-', action: async () => console.log('Zoom out') },
+            { name: 'Reset Zoom', iconName: 'maximize2', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
+            { divider: true },
+            { name: 'Full Screen', iconName: 'maximize', shortcut: 'F11', action: async () => console.log('Full screen') },
+          ]
         },
-      },
-      { divider: true },
-      {
-        name: 'Delete',
-        iconName: 'trash2',
-        action: async () => {
-          console.log('Delete action');
+        { divider: true },
+        {
+          name: 'Settings',
+          iconName: 'settings',
+          action: async () => console.log('Settings')
         },
-      },
-      { divider: true },
-      {
-        name: 'Select All',
-        shortcut: 'Cmd+A',
-        action: async () => {
-          console.log('Select All action');
+        {
+          name: 'Help',
+          iconName: 'helpCircle',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
+            { name: 'Keyboard Shortcuts', iconName: 'keyboard', action: async () => console.log('Shortcuts') },
+            { divider: true },
+            { name: 'About', iconName: 'info', action: async () => console.log('About') },
+          ]
+        }
+      ]);
+    }}>
+      <h3>Right-click anywhere in this area</h3>
+      <p>A context menu with nested submenus will appear</p>
+    </div>
+  </dees-panel>
+  <dees-panel heading="Component-Specific Context Menu">
+    <dees-button style="margin: 20px;" @contextmenu=${(eventArg: MouseEvent) => {
+      DeesContextmenu.openContextMenuWithOptions(eventArg, [
+        {
+          name: 'Button Actions',
+          iconName: 'mousePointer',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'Click', iconName: 'mouse', action: async () => console.log('Click action') },
+            { name: 'Double Click', iconName: 'zap', action: async () => console.log('Double click') },
+            { name: 'Long Press', iconName: 'clock', action: async () => console.log('Long press') },
+          ]
         },
-      },
-    ]);
-  }}>
-    <h3>Right-click anywhere in this area</h3>
-    <p>A context menu will appear with various options</p>
-  </div>
+        {
+          name: 'Button State',
+          iconName: 'toggleLeft',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'Enable', iconName: 'checkCircle', action: async () => console.log('Enable') },
+            { name: 'Disable', iconName: 'xCircle', action: async () => console.log('Disable') },
+            { divider: true },
+            { name: 'Show', iconName: 'eye', action: async () => console.log('Show') },
+            { name: 'Hide', iconName: 'eyeOff', action: async () => console.log('Hide') },
+          ]
+        },
+        { divider: true },
+        {
+          name: 'Disabled Action',
+          iconName: 'ban',
+          disabled: true,
+          action: async () => console.log('This should not run'),
+        },
+        {
+          name: 'Properties',
+          iconName: 'settings',
+          action: async () => console.log('Button properties'),
+        },
+      ]);
+    }}>Right-click on this button</dees-button>
+  </dees-panel>
+
+  <dees-panel heading="Advanced Context Menu Example">
+    <div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
+      DeesContextmenu.openContextMenuWithOptions(eventArg, [
+        {
+          name: 'Format',
+          iconName: 'type',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'Bold', iconName: 'bold', shortcut: 'Cmd+B', action: async () => console.log('Bold') },
+            { name: 'Italic', iconName: 'italic', shortcut: 'Cmd+I', action: async () => console.log('Italic') },
+            { name: 'Underline', iconName: 'underline', shortcut: 'Cmd+U', action: async () => console.log('Underline') },
+            { divider: true },
+            { name: 'Font Size', iconName: 'type', action: async () => console.log('Font size menu') },
+            { name: 'Font Color', iconName: 'palette', action: async () => console.log('Font color menu') },
+          ]
+        },
+        {
+          name: 'Transform',
+          iconName: 'shuffle',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'To Uppercase', iconName: 'arrowUp', action: async () => console.log('Uppercase') },
+            { name: 'To Lowercase', iconName: 'arrowDown', action: async () => console.log('Lowercase') },
+            { name: 'Capitalize', iconName: 'type', action: async () => console.log('Capitalize') },
+          ]
+        },
+        { divider: true },
+        {
+          name: 'Delete',
+          iconName: 'trash2',
+          action: async () => console.log('Delete')
+        }
+      ]);
+    }}>
+      <h3>Advanced Nested Menu Example</h3>
+      <p>This shows deeply nested submenus and various formatting options</p>
+    </div>
+  </dees-panel>
   
-  <dees-button @contextmenu=${(eventArg: MouseEvent) => {
-    DeesContextmenu.openContextMenuWithOptions(eventArg, [
-      {
-        name: 'Button Action 1',
-        iconName: 'play',
-        action: async () => {
-          console.log('Button action 1');
-        },
-      },
-      {
-        name: 'Button Action 2',
-        iconName: 'pause',
-        action: async () => {
-          console.log('Button action 2');
-        },
-      },
-      {
-        name: 'Disabled Action',
-        iconName: 'ban',
-        disabled: true,
-        action: async () => {
-          console.log('This should not run');
-        },
-      },
-      { divider: true },
-      {
-        name: 'Settings',
-        iconName: 'settings',
-        action: async () => {
-          console.log('Settings');
-        },
-      },
-    ]);
-  }}>Right-click on this button for a different menu</dees-button>
-  
-  <div style="margin-top: 20px;">
-    <h4>Static Context Menu (always visible):</h4>
+  <dees-panel heading="Static Context Menu (Always Visible)">
     <dees-contextmenu
       class="withMargin"
       .menuItems=${[
         {
-          name: 'New File',
-          iconName: 'filePlus',
-          shortcut: 'Cmd+N',
-          action: async () => console.log('New file'),
+          name: 'Project',
+          iconName: 'folder',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'New Project', iconName: 'folderPlus', shortcut: 'Cmd+Shift+N', action: async () => console.log('New project') },
+            { name: 'Open Project', iconName: 'folderOpen', shortcut: 'Cmd+Shift+O', action: async () => console.log('Open project') },
+            { divider: true },
+            { name: 'Recent Projects', iconName: 'clock', action: async () => {}, submenu: [
+              { name: 'Project Alpha', action: async () => console.log('Open Alpha') },
+              { name: 'Project Beta', action: async () => console.log('Open Beta') },
+              { name: 'Project Gamma', action: async () => console.log('Open Gamma') },
+            ]},
+          ]
         },
         {
-          name: 'Open File',
-          iconName: 'folderOpen',
-          shortcut: 'Cmd+O',
-          action: async () => console.log('Open file'),
-        },
-        {
-          name: 'Save',
-          iconName: 'save',
-          shortcut: 'Cmd+S',
-          action: async () => console.log('Save'),
+          name: 'Tools',
+          iconName: 'tool',
+          action: async () => {}, // Parent items with submenus still need an action
+          submenu: [
+            { name: 'Terminal', iconName: 'terminal', shortcut: 'Cmd+T', action: async () => console.log('Terminal') },
+            { name: 'Console', iconName: 'monitor', shortcut: 'Cmd+K', action: async () => console.log('Console') },
+            { divider: true },
+            { name: 'Extensions', iconName: 'package', action: async () => console.log('Extensions') },
+          ]
         },
         { divider: true },
         {
-          name: 'Export',
-          iconName: 'download',
-          action: async () => console.log('Export'),
-        },
-        {
-          name: 'Import',
-          iconName: 'upload',
-          action: async () => console.log('Import'),
+          name: 'Preferences',
+          iconName: 'sliders',
+          action: async () => console.log('Preferences'),
         },
       ]}
     ></dees-contextmenu>
-  </div>
+  </dees-panel>
 </div>
 `;

ts_web/elements/dees-contextmenu.ts

@@ -31,7 +31,7 @@ export class DeesContextmenu extends DeesElement {
   // STATIC
   // This will store all the accumulated menu items
   public static contextMenuDeactivated = false;
-  public static accumulatedMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[] = [];
+  public static accumulatedMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[] } | { divider: true })[] = [];
 
   // Add a global event listener for the right-click context menu
   public static initializeGlobalListener() {
@@ -41,16 +41,16 @@ export class DeesContextmenu extends DeesElement {
       }
       event.preventDefault();
 
-      // Get the target element of the right-click
-      let target: EventTarget | null = event.target;
-
       // Clear previously accumulated items
       DeesContextmenu.accumulatedMenuItems = [];
 
-      // Traverse up the DOM tree to accumulate menu items
-      while (target) {
-        if ((target as any).getContextMenuItems) {
-          const items = (target as any).getContextMenuItems();
+      // Use composedPath to properly traverse shadow DOM boundaries
+      const path = event.composedPath();
+      
+      // Traverse the composed path to accumulate menu items
+      for (const element of path) {
+        if ((element as any).getContextMenuItems) {
+          const items = (element as any).getContextMenuItems();
           if (items && items.length > 0) {
             if (DeesContextmenu.accumulatedMenuItems.length > 0) {
               DeesContextmenu.accumulatedMenuItems.push({ divider: true });
@@ -58,7 +58,6 @@ export class DeesContextmenu extends DeesElement {
             DeesContextmenu.accumulatedMenuItems.push(...items);
           }
         }
-        target = (target as Node).parentNode;
       }
 
       // Open the context menu with the accumulated items
@@ -67,7 +66,7 @@ export class DeesContextmenu extends DeesElement {
   }
 
   // allows opening of a contextmenu with options
-  public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[]) {
+  public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[] } | { divider: true })[]) {
     if (this.contextMenuDeactivated) {
       return;
     }
@@ -80,8 +79,13 @@ export class DeesContextmenu extends DeesElement {
     contextMenu.style.transform = 'scale(0.95) translateY(-10px)';
     contextMenu.menuItems = menuItemsArg;
     contextMenu.windowLayer = await DeesWindowLayer.createAndShow();
-    contextMenu.windowLayer.addEventListener('click', async () => {
-      await contextMenu.destroy();
+    contextMenu.windowLayer.addEventListener('click', async (event) => {
+      // Check if click is on the context menu or its submenus
+      const clickedElement = event.target as HTMLElement;
+      const isContextMenu = clickedElement.closest('dees-contextmenu');
+      if (!isContextMenu) {
+        await contextMenu.destroy();
+      }
     })
     document.body.append(contextMenu);
     
@@ -123,8 +127,12 @@ export class DeesContextmenu extends DeesElement {
   @property({
     type: Array,
   })
-  public menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; divider?: never } | { divider: true })[] = [];
+  public menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[]; divider?: never } | { divider: true })[] = [];
   windowLayer: DeesWindowLayer;
+  
+  private submenu: DeesContextmenu | null = null;
+  private submenuTimeout: any = null;
+  private parentMenu: DeesContextmenu | null = null;
 
   constructor() {
     super();
@@ -167,13 +175,22 @@ export class DeesContextmenu extends DeesElement {
         cursor: default;
         transition: background 0.1s;
         line-height: 1;
+        position: relative;
       }
 
       .menuitem:hover {
         background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
       }
+      
+      .menuitem.has-submenu::after {
+        content: '›';
+        position: absolute;
+        right: 8px;
+        font-size: 16px;
+        opacity: 0.5;
+      }
 
-      .menuitem:active {
+      .menuitem:active:not(.has-submenu) {
         background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
       }
       
@@ -215,14 +232,20 @@ export class DeesContextmenu extends DeesElement {
             return html`<div class="menu-divider"></div>`;
           }
           
-          const menuItem = menuItemArg as plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean };
+          const menuItem = menuItemArg as plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: any };
+          const hasSubmenu = menuItem.submenu && menuItem.submenu.length > 0;
           return html`
-            <div class="menuitem ${menuItem.disabled ? 'disabled' : ''}" @click=${() => !menuItem.disabled && this.handleClick(menuItem)}>
+            <div 
+              class="menuitem ${menuItem.disabled ? 'disabled' : ''} ${hasSubmenu ? 'has-submenu' : ''}" 
+              @click=${() => !menuItem.disabled && !hasSubmenu && this.handleClick(menuItem)}
+              @mouseenter=${() => this.handleMenuItemHover(menuItem, hasSubmenu)}
+              @mouseleave=${() => this.handleMenuItemLeave()}
+            >
               ${menuItem.iconName ? html`
                 <dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>
               ` : ''}
               <span class="menuitem-text">${menuItem.name}</span>
-              ${menuItem.shortcut ? html`
+              ${menuItem.shortcut && !hasSubmenu ? html`
                 <span class="menuitem-shortcut">${menuItem.shortcut}</span>
               ` : ''}
             </div>
@@ -282,17 +305,151 @@ export class DeesContextmenu extends DeesElement {
 
   public async handleClick(menuItem: plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean }) {
     menuItem.action();
-    await this.destroy();
+    
+    // Close all menus in the chain (this menu and all parent menus)
+    await this.destroyAll();
+  }
+  
+  private async handleMenuItemHover(menuItem: plugins.tsclass.website.IMenuItem & { submenu?: any }, hasSubmenu: boolean) {
+    // Clear any existing timeout
+    if (this.submenuTimeout) {
+      clearTimeout(this.submenuTimeout);
+      this.submenuTimeout = null;
+    }
+    
+    // Hide any existing submenu if hovering a different item
+    if (this.submenu) {
+      await this.hideSubmenu();
+    }
+    
+    // Show submenu if this item has one
+    if (hasSubmenu && menuItem.submenu) {
+      this.submenuTimeout = setTimeout(() => {
+        this.showSubmenu(menuItem);
+      }, 200); // Small delay to prevent accidental triggers
+    }
+  }
+  
+  private handleMenuItemLeave() {
+    // Add a delay before hiding to allow moving to submenu
+    if (this.submenuTimeout) {
+      clearTimeout(this.submenuTimeout);
+    }
+    
+    this.submenuTimeout = setTimeout(() => {
+      if (this.submenu && !this.submenu.matches(':hover')) {
+        this.hideSubmenu();
+      }
+    }, 300);
+  }
+  
+  private async showSubmenu(menuItem: plugins.tsclass.website.IMenuItem & { submenu?: any }) {
+    if (!menuItem.submenu || menuItem.submenu.length === 0) return;
+    
+    // Find the menu item element
+    const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem'));
+    const menuItemElement = menuItems.find(el => el.querySelector('.menuitem-text')?.textContent === menuItem.name) as HTMLElement;
+    if (!menuItemElement) return;
+    
+    // Create submenu
+    this.submenu = new DeesContextmenu();
+    this.submenu.menuItems = menuItem.submenu;
+    this.submenu.parentMenu = this;
+    this.submenu.style.position = 'fixed';
+    this.submenu.style.zIndex = String(parseInt(this.style.zIndex) + 1);
+    this.submenu.style.opacity = '0';
+    this.submenu.style.transform = 'scale(0.95)';
+    
+    // Don't create a window layer for submenus
+    document.body.append(this.submenu);
+    
+    // Position submenu
+    await domtools.plugins.smartdelay.delayFor(0);
+    const itemRect = menuItemElement.getBoundingClientRect();
+    const menuRect = this.getBoundingClientRect();
+    const submenuRect = this.submenu.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    
+    let left = menuRect.right - 4; // Slight overlap
+    let top = itemRect.top;
+    
+    // Check if submenu would go off right edge
+    if (left + submenuRect.width > windowWidth - 10) {
+      // Show on left side instead
+      left = menuRect.left - submenuRect.width + 4;
+    }
+    
+    // Adjust vertical position if needed
+    if (top + submenuRect.height > window.innerHeight - 10) {
+      top = window.innerHeight - submenuRect.height - 10;
+    }
+    
+    this.submenu.style.left = `${left}px`;
+    this.submenu.style.top = `${top}px`;
+    
+    // Animate in
+    await domtools.plugins.smartdelay.delayFor(0);
+    this.submenu.style.opacity = '1';
+    this.submenu.style.transform = 'scale(1)';
+    
+    // Handle submenu hover
+    this.submenu.addEventListener('mouseenter', () => {
+      if (this.submenuTimeout) {
+        clearTimeout(this.submenuTimeout);
+        this.submenuTimeout = null;
+      }
+    });
+    
+    this.submenu.addEventListener('mouseleave', () => {
+      this.handleMenuItemLeave();
+    });
+  }
+  
+  private async hideSubmenu() {
+    if (!this.submenu) return;
+    
+    await this.submenu.destroy();
+    this.submenu = null;
   }
 
   public async destroy() {
-    if (this.windowLayer) {
+    // Clear timeout
+    if (this.submenuTimeout) {
+      clearTimeout(this.submenuTimeout);
+      this.submenuTimeout = null;
+    }
+    
+    // Destroy submenu first
+    if (this.submenu) {
+      await this.submenu.destroy();
+      this.submenu = null;
+    }
+    
+    // Only destroy window layer if this is not a submenu
+    if (this.windowLayer && !this.parentMenu) {
       this.windowLayer.destroy();
     }
+    
     this.style.opacity = '0';
     this.style.transform = 'scale(0.95) translateY(-10px)';
     await domtools.plugins.smartdelay.delayFor(100);
-    this.parentElement.removeChild(this);
+    
+    if (this.parentElement) {
+      this.parentElement.removeChild(this);
+    }
+  }
+  
+  /**
+   * Destroys this menu and all parent menus in the chain
+   */
+  public async destroyAll() {
+    // First destroy parent menus if they exist
+    if (this.parentMenu) {
+      await this.parentMenu.destroyAll();
+    } else {
+      // If we're at the top level, just destroy this menu
+      await this.destroy();
+    }
   }
 }
 

ts_web/elements/dees-dashboardgrid.demo.ts

@@ -0,0 +1,191 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const grid = elementArg.querySelector('#dashboardGrid') as DeesDashboardgrid;
+      
+      // Set initial widgets
+      grid.widgets = [
+        {
+          id: 'metrics1',
+          x: 0,
+          y: 0,
+          w: 3,
+          h: 2,
+          title: 'Revenue',
+          icon: 'lucide:dollarSign',
+          content: html`
+            <div style="padding: 20px;">
+              <div style="font-size: 32px; font-weight: 700; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">$124,563</div>
+              <div style="color: #22c55e; font-size: 14px; margin-top: 8px;">↑ 12.5% from last month</div>
+            </div>
+          `
+        },
+        {
+          id: 'metrics2',
+          x: 3,
+          y: 0,
+          w: 3,
+          h: 2,
+          title: 'Users',
+          icon: 'lucide:users',
+          content: html`
+            <div style="padding: 20px;">
+              <div style="font-size: 32px; font-weight: 700; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">8,234</div>
+              <div style="color: #3b82f6; font-size: 14px; margin-top: 8px;">↑ 5.2% from last week</div>
+            </div>
+          `
+        },
+        {
+          id: 'chart1',
+          x: 6,
+          y: 0,
+          w: 6,
+          h: 4,
+          title: 'Analytics',
+          icon: 'lucide:lineChart',
+          content: html`
+            <div style="padding: 20px; height: 100%; display: flex; align-items: center; justify-content: center;">
+              <div style="text-align: center; color: #71717a;">
+                <dees-icon .icon=${'lucide:lineChart'} style="font-size: 48px; margin-bottom: 16px;"></dees-icon>
+                <div>Chart visualization area</div>
+              </div>
+            </div>
+          `
+        }
+      ];
+      
+      // Configure grid
+      grid.cellHeight = 80;
+      grid.margin = { top: 10, right: 10, bottom: 10, left: 10 };
+      grid.enableAnimation = true;
+      grid.showGridLines = false;
+      
+      let widgetCounter = 4;
+      
+      // Control buttons
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach(button => {
+        const text = button.textContent?.trim();
+        
+        if (text === 'Toggle Animation') {
+          button.addEventListener('click', () => {
+            grid.enableAnimation = !grid.enableAnimation;
+          });
+        } else if (text === 'Toggle Grid Lines') {
+          button.addEventListener('click', () => {
+            grid.showGridLines = !grid.showGridLines;
+          });
+        } else if (text === 'Add Widget') {
+          button.addEventListener('click', () => {
+            const newWidget = {
+              id: `widget${widgetCounter++}`,
+              x: 0,
+              y: 0,
+              w: 3,
+              h: 2,
+              autoPosition: true,
+              title: `Widget ${widgetCounter - 1}`,
+              icon: 'lucide:package',
+              content: html`
+                <div style="padding: 20px; text-align: center;">
+                  <div style="color: #71717a;">New widget content</div>
+                  <div style="margin-top: 8px; font-size: 24px; font-weight: 600; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">${Math.floor(Math.random() * 1000)}</div>
+                </div>
+              `
+            };
+            grid.addWidget(newWidget, true);
+          });
+        } else if (text === 'Compact Grid') {
+          button.addEventListener('click', () => {
+            grid.compact();
+          });
+        } else if (text === 'Toggle Edit Mode') {
+          button.addEventListener('click', () => {
+            grid.editable = !grid.editable;
+            button.textContent = grid.editable ? 'Lock Grid' : 'Unlock Grid';
+          });
+        }
+      });
+      
+      // Listen to grid events
+      grid.addEventListener('widget-move', (e: CustomEvent) => {
+        console.log('Widget moved:', e.detail.widget);
+      });
+      
+      grid.addEventListener('widget-resize', (e: CustomEvent) => {
+        console.log('Widget resized:', e.detail.widget);
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          
+          .demo-controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+          }
+          
+          .demo-controls dees-button {
+            flex-shrink: 0;
+          }
+          
+          .grid-container-wrapper {
+            flex: 1;
+            min-height: 600px;
+            position: relative;
+          }
+          
+          .info {
+            color: ${cssManager.bdTheme('#71717a', '#71717a')};
+            font-size: 12px;
+            font-family: 'Geist Sans', sans-serif;
+            text-align: center;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="demo-controls">
+          <dees-button-group label="Animation:">
+            <dees-button>Toggle Animation</dees-button>
+          </dees-button-group>
+          
+          <dees-button-group label="Display:">
+            <dees-button>Toggle Grid Lines</dees-button>
+          </dees-button-group>
+          
+          <dees-button-group label="Actions:">
+            <dees-button>Add Widget</dees-button>
+            <dees-button>Compact Grid</dees-button>
+          </dees-button-group>
+          
+          <dees-button-group label="Mode:">
+            <dees-button>Toggle Edit Mode</dees-button>
+          </dees-button-group>
+        </div>
+        
+        <div class="grid-container-wrapper">
+          <dees-dashboardgrid id="dashboardGrid"></dees-dashboardgrid>
+        </div>
+        
+        <div class="info">
+          Drag widgets to reposition • Resize from edges and corners • Add widgets with auto-positioning
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/dees-dashboardgrid.ts

@@ -0,0 +1,813 @@
+import * as plugins from './00plugins.js';
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import './dees-icon.js';
+import { demoFunc } from './dees-dashboardgrid.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-dashboardgrid': DeesDashboardgrid;
+  }
+}
+
+export interface IDashboardWidget {
+  id: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  minW?: number;
+  minH?: number;
+  maxW?: number;
+  maxH?: number;
+  content: TemplateResult | string;
+  title?: string;
+  icon?: string;
+  noMove?: boolean;
+  noResize?: boolean;
+  locked?: boolean;
+  autoPosition?: boolean; // Auto-position widget in first available space
+}
+
+@customElement('dees-dashboardgrid')
+export class DeesDashboardgrid extends DeesElement {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @property({ type: Array })
+  public widgets: IDashboardWidget[] = [];
+
+  @property({ type: Number })
+  public cellHeight: number = 80;
+
+  @property({ type: Object })
+  public margin: number | { top?: number; right?: number; bottom?: number; left?: number } = 10;
+
+  @property({ type: Number })
+  public columns: number = 12;
+
+  @property({ type: Boolean })
+  public editable: boolean = true;
+  
+  @property({ type: Boolean, reflect: true })
+  public enableAnimation: boolean = true;
+  
+  @property({ type: String })
+  public cellHeightUnit: 'px' | 'em' | 'rem' | 'auto' = 'px';
+  
+  @property({ type: Boolean })
+  public rtl: boolean = false; // Right-to-left support
+  
+  @property({ type: Boolean })
+  public showGridLines: boolean = false;
+
+  @state()
+  private draggedWidget: IDashboardWidget | null = null;
+
+  @state()
+  private draggedElement: HTMLElement | null = null;
+
+  @state()
+  private dragOffsetX: number = 0;
+
+  @state()
+  private dragOffsetY: number = 0;
+  
+  @state()
+  private dragMouseX: number = 0;
+  
+  @state()
+  private dragMouseY: number = 0;
+  
+  @state()
+  private placeholderPosition: { x: number; y: number } | null = null;
+
+  @state()
+  private resizingWidget: IDashboardWidget | null = null;
+
+  @state()
+  private resizeStartW: number = 0;
+
+  @state()
+  private resizeStartH: number = 0;
+
+  @state()
+  private resizeStartX: number = 0;
+
+  @state()
+  private resizeStartY: number = 0;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+
+      .grid-container {
+        position: relative;
+        width: 100%;
+        min-height: 400px;
+        box-sizing: border-box;
+      }
+
+      .grid-widget {
+        position: absolute;
+        will-change: auto;
+      }
+      
+      :host([enableanimation]) .grid-widget {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .grid-widget.dragging {
+        z-index: 1000;
+        transition: none !important;
+        opacity: 0.8;
+        cursor: grabbing;
+        pointer-events: none;
+        will-change: transform;
+      }
+      
+      .grid-widget.placeholder {
+        pointer-events: none;
+        z-index: 1;
+      }
+      
+      .grid-widget.placeholder .widget-content {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+        border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        box-shadow: none;
+      }
+
+      .grid-widget.resizing {
+        transition: none !important;
+      }
+
+      .widget-content {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 8px;
+        box-shadow: ${cssManager.bdTheme(
+          '0 1px 3px rgba(0, 0, 0, 0.1)',
+          '0 1px 3px rgba(0, 0, 0, 0.3)'
+        )};
+        transition: box-shadow 0.2s ease;
+      }
+
+      .grid-widget:hover .widget-content {
+        box-shadow: ${cssManager.bdTheme(
+          '0 4px 12px rgba(0, 0, 0, 0.15)',
+          '0 4px 12px rgba(0, 0, 0, 0.4)'
+        )};
+      }
+
+      .grid-widget.dragging .widget-content {
+        box-shadow: ${cssManager.bdTheme(
+          '0 16px 48px rgba(0, 0, 0, 0.25)',
+          '0 16px 48px rgba(0, 0, 0, 0.6)'
+        )};
+        transform: scale(1.05);
+      }
+
+      .widget-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
+        cursor: grab;
+        user-select: none;
+      }
+      
+      .widget-header:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+      }
+      
+      .widget-header:active {
+        cursor: grabbing;
+      }
+
+      .widget-header.locked {
+        cursor: default;
+      }
+      
+      .widget-header.locked:hover {
+        background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
+      }
+
+      .widget-header dees-icon {
+        font-size: 16px;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+      }
+
+      .widget-body {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: auto;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .widget-body.has-header {
+        top: 45px;
+      }
+
+      /* Resize handles */
+      .resize-handle {
+        position: absolute;
+        background: transparent;
+        z-index: 10;
+      }
+
+      .resize-handle:hover {
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        opacity: 0.3;
+      }
+
+      .resize-handle-e {
+        cursor: ew-resize;
+        width: 12px;
+        right: -6px;
+        top: 10%;
+        height: 80%;
+      }
+
+      .resize-handle-s {
+        cursor: ns-resize;
+        height: 12px;
+        width: 80%;
+        bottom: -6px;
+        left: 10%;
+      }
+
+      .resize-handle-se {
+        cursor: se-resize;
+        width: 20px;
+        height: 20px;
+        right: -2px;
+        bottom: -2px;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+      
+      .resize-handle-se::after {
+        content: '';
+        position: absolute;
+        right: 4px;
+        bottom: 4px;
+        width: 6px;
+        height: 6px;
+        border-right: 2px solid ${cssManager.bdTheme('#71717a', '#71717a')};
+        border-bottom: 2px solid ${cssManager.bdTheme('#71717a', '#71717a')};
+      }
+
+      .grid-widget:hover .resize-handle-se {
+        opacity: 0.7;
+      }
+
+      .resize-handle-se:hover {
+        opacity: 1 !important;
+      }
+      
+      .resize-handle-se:hover::after {
+        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+      }
+
+      /* Placeholder */
+      .grid-placeholder {
+        position: absolute;
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        opacity: 0.1;
+        border-radius: 8px;
+        border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        transition: all 0.2s ease;
+        pointer-events: none;
+      }
+
+      /* Empty state */
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 400px;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        text-align: center;
+        padding: 32px;
+      }
+
+      .empty-state dees-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+        opacity: 0.5;
+      }
+      
+      /* Grid lines */
+      .grid-lines {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+        z-index: -1;
+      }
+      
+      .grid-line-vertical {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.3;
+      }
+      
+      .grid-line-horizontal {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.3;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (this.widgets.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:layoutGrid'}></dees-icon>
+          <div>No widgets configured</div>
+          <div style="font-size: 14px; margin-top: 8px;">Add widgets to populate the dashboard</div>
+        </div>
+      `;
+    }
+
+    const margins = this.getMargins();
+    const maxY = Math.max(...this.widgets.map(w => w.y + w.h), 4);
+    const cellHeightValue = this.getCellHeight();
+    const gridHeight = maxY * cellHeightValue + (maxY + 1) * margins.vertical;
+
+    return html`
+      <div class="grid-container" style="height: ${gridHeight}px;">
+        ${this.showGridLines ? this.renderGridLines(gridHeight) : ''}
+        ${this.widgets.map(widget => this.renderWidget(widget))}
+        ${this.placeholderPosition && this.draggedWidget ? this.renderPlaceholder() : ''}
+      </div>
+    `;
+  }
+
+  private renderGridLines(gridHeight: number): TemplateResult {
+    const margins = this.getMargins();
+    const cellHeightValue = this.getCellHeight();
+    
+    // Convert margin to percentage for consistent calculation
+    const containerWidth = this.getBoundingClientRect().width;
+    const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
+    
+    const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
+    
+    const verticalLines = [];
+    const horizontalLines = [];
+    
+    // Vertical lines
+    for (let i = 0; i <= this.columns; i++) {
+      const left = i * cellWidth + i * marginHorizontalPercent;
+      verticalLines.push(html`
+        <div class="grid-line-vertical" style="left: ${left}%;"></div>
+      `);
+    }
+    
+    // Horizontal lines
+    const numHorizontalLines = Math.ceil(gridHeight / (cellHeightValue + margins.vertical));
+    for (let i = 0; i <= numHorizontalLines; i++) {
+      const top = i * cellHeightValue + i * margins.vertical;
+      horizontalLines.push(html`
+        <div class="grid-line-horizontal" style="top: ${top}px;"></div>
+      `);
+    }
+    
+    return html`
+      <div class="grid-lines">
+        ${verticalLines}
+        ${horizontalLines}
+      </div>
+    `;
+  }
+
+  private renderWidget(widget: IDashboardWidget): TemplateResult {
+    const isDragging = this.draggedWidget?.id === widget.id;
+    const isResizing = this.resizingWidget?.id === widget.id;
+    const isLocked = widget.locked || !this.editable;
+
+    const margins = this.getMargins();
+    const cellHeightValue = this.getCellHeight();
+    
+    // Convert margin to percentage of container width for consistent calculation
+    const containerWidth = this.getBoundingClientRect().width;
+    const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
+    
+    const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
+    
+    const left = widget.x * cellWidth + (widget.x + 1) * marginHorizontalPercent;
+    const top = widget.y * cellHeightValue + (widget.y + 1) * margins.vertical;
+    const width = widget.w * cellWidth + (widget.w - 1) * marginHorizontalPercent;
+    const height = widget.h * cellHeightValue + (widget.h - 1) * margins.vertical;
+    
+    // Apply transform when dragging for smooth movement
+    let transform = '';
+    if (isDragging && this.draggedElement) {
+      const containerRect = this.getBoundingClientRect();
+      const translateX = this.dragMouseX - containerRect.left - this.dragOffsetX - (left / 100 * containerRect.width);
+      const translateY = this.dragMouseY - containerRect.top - this.dragOffsetY - top;
+      transform = `transform: translate(${translateX}px, ${translateY}px);`;
+    }
+
+    return html`
+      <div 
+        class="grid-widget ${isDragging ? 'dragging' : ''} ${isResizing ? 'resizing' : ''}"
+        style="
+          ${this.rtl ? 'right' : 'left'}: ${left}%;
+          top: ${top}px;
+          width: ${width}%;
+          height: ${height}px;
+          ${transform}
+        "
+        data-widget-id="${widget.id}"
+      >
+        <div class="widget-content">
+          ${widget.title ? html`
+            <div 
+              class="widget-header ${isLocked ? 'locked' : ''}"
+              @mousedown=${!isLocked && !widget.noMove ? (e: MouseEvent) => this.startDrag(e, widget) : null}
+            >
+              ${widget.icon ? html`<dees-icon .icon=${widget.icon}></dees-icon>` : ''}
+              ${widget.title}
+            </div>
+          ` : ''}
+          <div class="widget-body ${widget.title ? 'has-header' : ''}">
+            ${widget.content}
+          </div>
+          ${!isLocked && !widget.noResize ? html`
+            <div class="resize-handle resize-handle-e" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 'e')}></div>
+            <div class="resize-handle resize-handle-s" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 's')}></div>
+            <div class="resize-handle resize-handle-se" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 'se')}></div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+  
+  private renderPlaceholder(): TemplateResult {
+    if (!this.placeholderPosition || !this.draggedWidget) return html``;
+    
+    const margins = this.getMargins();
+    const cellHeightValue = this.getCellHeight();
+    
+    // Convert margin to percentage of container width for consistent calculation
+    const containerWidth = this.getBoundingClientRect().width;
+    const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
+    
+    const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
+    
+    const left = this.placeholderPosition.x * cellWidth + (this.placeholderPosition.x + 1) * marginHorizontalPercent;
+    const top = this.placeholderPosition.y * cellHeightValue + (this.placeholderPosition.y + 1) * margins.vertical;
+    const width = this.draggedWidget.w * cellWidth + (this.draggedWidget.w - 1) * marginHorizontalPercent;
+    const height = this.draggedWidget.h * cellHeightValue + (this.draggedWidget.h - 1) * margins.vertical;
+    
+    return html`
+      <div 
+        class="grid-widget placeholder"
+        style="
+          ${this.rtl ? 'right' : 'left'}: ${left}%;
+          top: ${top}px;
+          width: ${width}%;
+          height: ${height}px;
+        "
+      >
+        <div class="widget-content"></div>
+      </div>
+    `;
+  }
+
+  private startDrag(e: MouseEvent, widget: IDashboardWidget) {
+    e.preventDefault();
+    this.draggedWidget = widget;
+    this.draggedElement = (e.currentTarget as HTMLElement).closest('.grid-widget') as HTMLElement;
+    
+    const rect = this.draggedElement.getBoundingClientRect();
+    
+    this.dragOffsetX = e.clientX - rect.left;
+    this.dragOffsetY = e.clientY - rect.top;
+    
+    // Initialize mouse position
+    this.dragMouseX = e.clientX;
+    this.dragMouseY = e.clientY;
+    
+    // Initialize placeholder at current widget position
+    this.placeholderPosition = { x: widget.x, y: widget.y };
+
+    document.addEventListener('mousemove', this.handleDrag);
+    document.addEventListener('mouseup', this.endDrag);
+    
+    this.requestUpdate();
+  }
+
+  private handleDrag = (e: MouseEvent) => {
+    if (!this.draggedWidget || !this.draggedElement) return;
+    
+    // Update mouse position for smooth dragging
+    this.dragMouseX = e.clientX;
+    this.dragMouseY = e.clientY;
+
+    const containerRect = this.getBoundingClientRect();
+    const margins = this.getMargins();
+    const cellHeightValue = this.getCellHeight();
+    
+    // Get widget position relative to grid container
+    const mouseX = e.clientX - containerRect.left - this.dragOffsetX;
+    const mouseY = e.clientY - containerRect.top - this.dragOffsetY;
+    
+    // Use pixel calculations for accuracy
+    const totalWidth = containerRect.width;
+    const totalMarginWidth = margins.horizontal * (this.columns + 1);
+    const availableWidth = totalWidth - totalMarginWidth;
+    const cellWidthPx = availableWidth / this.columns;
+    
+    // Calculate grid X position
+    // Account for the initial margin and then repeating pattern of cell+margin
+    let gridX = 0;
+    if (mouseX > margins.horizontal) {
+      const adjustedX = mouseX - margins.horizontal;
+      const cellPlusMargin = cellWidthPx + margins.horizontal;
+      gridX = Math.floor(adjustedX / cellPlusMargin + 0.5); // +0.5 for rounding to nearest
+    }
+    
+    // Calculate grid Y position  
+    let gridY = 0;
+    if (mouseY > margins.vertical) {
+      const adjustedY = mouseY - margins.vertical;
+      const cellPlusMargin = cellHeightValue + margins.vertical;
+      gridY = Math.floor(adjustedY / cellPlusMargin + 0.5); // +0.5 for rounding to nearest
+    }
+    
+    const clampedX = Math.max(0, Math.min(gridX, this.columns - this.draggedWidget.w));
+    const clampedY = Math.max(0, gridY);
+    
+    // Update placeholder position instead of widget position during drag
+    if (!this.placeholderPosition || 
+        clampedX !== this.placeholderPosition.x || 
+        clampedY !== this.placeholderPosition.y) {
+      const collision = this.checkCollision(this.draggedWidget, clampedX, clampedY);
+      if (!collision) {
+        this.placeholderPosition = { x: clampedX, y: clampedY };
+        this.requestUpdate();
+      }
+    }
+  };
+
+  private endDrag = () => {
+    // Apply final position from placeholder
+    if (this.draggedWidget && this.placeholderPosition) {
+      this.draggedWidget.x = this.placeholderPosition.x;
+      this.draggedWidget.y = this.placeholderPosition.y;
+      
+      this.dispatchEvent(new CustomEvent('widget-move', {
+        detail: { widget: this.draggedWidget },
+        bubbles: true,
+        composed: true,
+      }));
+    }
+    
+    // Clear drag state
+    this.draggedWidget = null;
+    this.draggedElement = null;
+    this.placeholderPosition = null;
+    this.dragMouseX = 0;
+    this.dragMouseY = 0;
+    
+    document.removeEventListener('mousemove', this.handleDrag);
+    document.removeEventListener('mouseup', this.endDrag);
+    
+    this.requestUpdate();
+  };
+
+  private startResize(e: MouseEvent, widget: IDashboardWidget, handle: string) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.resizingWidget = widget;
+    this.resizeStartW = widget.w;
+    this.resizeStartH = widget.h;
+    this.resizeStartX = e.clientX;
+    this.resizeStartY = e.clientY;
+
+    const handleResize = (e: MouseEvent) => {
+      if (!this.resizingWidget) return;
+
+      const containerRect = this.getBoundingClientRect();
+      const margins = this.getMargins();
+      const cellHeightValue = this.getCellHeight();
+      const cellWidth = (containerRect.width - margins.horizontal * (this.columns + 1)) / this.columns;
+      
+      const deltaX = e.clientX - this.resizeStartX;
+      const deltaY = e.clientY - this.resizeStartY;
+      
+      if (handle.includes('e')) {
+        const newW = Math.round(this.resizeStartW + deltaX / (cellWidth + margins.horizontal));
+        const maxW = widget.maxW || (this.columns - this.resizingWidget.x);
+        this.resizingWidget.w = Math.max(widget.minW || 1, Math.min(newW, maxW));
+      }
+      
+      if (handle.includes('s')) {
+        const newH = Math.round(this.resizeStartH + deltaY / (cellHeightValue + margins.vertical));
+        const maxH = widget.maxH || Infinity;
+        this.resizingWidget.h = Math.max(widget.minH || 1, Math.min(newH, maxH));
+      }
+      
+      this.requestUpdate();
+      
+      this.dispatchEvent(new CustomEvent('widget-resize', {
+        detail: { widget: this.resizingWidget },
+        bubbles: true,
+        composed: true,
+      }));
+    };
+
+    const endResize = () => {
+      this.resizingWidget = null;
+      document.removeEventListener('mousemove', handleResize);
+      document.removeEventListener('mouseup', endResize);
+    };
+
+    document.addEventListener('mousemove', handleResize);
+    document.addEventListener('mouseup', endResize);
+  }
+
+
+  public removeWidget(widgetId: string) {
+    this.widgets = this.widgets.filter(w => w.id !== widgetId);
+  }
+
+  public updateWidget(widgetId: string, updates: Partial<IDashboardWidget>) {
+    this.widgets = this.widgets.map(w => 
+      w.id === widgetId ? { ...w, ...updates } : w
+    );
+  }
+
+  public getLayout(): Array<{ id: string; x: number; y: number; w: number; h: number }> {
+    return this.widgets.map(({ id, x, y, w, h }) => ({ id, x, y, w, h }));
+  }
+
+  public setLayout(layout: Array<{ id: string; x: number; y: number; w: number; h: number }>) {
+    this.widgets = this.widgets.map(widget => {
+      const layoutItem = layout.find(l => l.id === widget.id);
+      return layoutItem ? { ...widget, ...layoutItem } : widget;
+    });
+  }
+
+  public lockGrid() {
+    this.editable = false;
+  }
+
+  public unlockGrid() {
+    this.editable = true;
+  }
+
+  private getMargins(): { horizontal: number; vertical: number; top: number; right: number; bottom: number; left: number } {
+    if (typeof this.margin === 'number') {
+      return {
+        horizontal: this.margin,
+        vertical: this.margin,
+        top: this.margin,
+        right: this.margin,
+        bottom: this.margin,
+        left: this.margin,
+      };
+    }
+    
+    const margins = {
+      top: this.margin.top ?? 10,
+      right: this.margin.right ?? 10,
+      bottom: this.margin.bottom ?? 10,
+      left: this.margin.left ?? 10,
+    };
+    
+    return {
+      ...margins,
+      horizontal: (margins.left + margins.right) / 2,
+      vertical: (margins.top + margins.bottom) / 2,
+    };
+  }
+
+  private getCellHeight(): number {
+    if (this.cellHeightUnit === 'auto') {
+      // Calculate square cells based on container width
+      const containerWidth = this.getBoundingClientRect().width;
+      const margins = this.getMargins();
+      const cellWidth = (containerWidth - margins.horizontal * (this.columns + 1)) / this.columns;
+      return cellWidth;
+    }
+    
+    return this.cellHeight;
+  }
+
+  private checkCollision(widget: IDashboardWidget, newX: number, newY: number): boolean {
+    const widgets = this.widgets.filter(w => w.id !== widget.id);
+    
+    for (const other of widgets) {
+      if (newX < other.x + other.w &&
+          newX + widget.w > other.x &&
+          newY < other.y + other.h &&
+          newY + widget.h > other.y) {
+        return true;
+      }
+    }
+    
+    return false;
+  }
+
+  public addWidget(widget: IDashboardWidget, autoPosition = false) {
+    if (autoPosition || widget.autoPosition) {
+      // Find first available position
+      const position = this.findAvailablePosition(widget.w, widget.h);
+      widget.x = position.x;
+      widget.y = position.y;
+    }
+    
+    this.widgets = [...this.widgets, widget];
+  }
+
+  private findAvailablePosition(width: number, height: number): { x: number; y: number } {
+    // Try to find space starting from top-left
+    for (let y = 0; y < 100; y++) { // Reasonable limit
+      for (let x = 0; x <= this.columns - width; x++) {
+        const testWidget = { id: 'test', x, y, w: width, h: height, content: '' } as IDashboardWidget;
+        if (!this.checkCollision(testWidget, x, y)) {
+          return { x, y };
+        }
+      }
+    }
+
+    // If no space found, place at bottom
+    const maxY = Math.max(...this.widgets.map(w => w.y + w.h), 0);
+    return { x: 0, y: maxY };
+  }
+
+  public compact(direction: 'vertical' | 'horizontal' = 'vertical') {
+    const sortedWidgets = [...this.widgets].sort((a, b) => {
+      if (direction === 'vertical') {
+        if (a.y !== b.y) return a.y - b.y;
+        return a.x - b.x;
+      } else {
+        if (a.x !== b.x) return a.x - b.x;
+        return a.y - b.y;
+      }
+    });
+
+    for (const widget of sortedWidgets) {
+      if (widget.locked || widget.noMove) continue;
+      
+      if (direction === 'vertical') {
+        // Move up as far as possible
+        while (widget.y > 0 && !this.checkCollision(widget, widget.x, widget.y - 1)) {
+          widget.y--;
+        }
+      } else {
+        // Move left as far as possible
+        while (widget.x > 0 && !this.checkCollision(widget, widget.x - 1, widget.y)) {
+          widget.x--;
+        }
+      }
+    }
+
+    this.requestUpdate();
+  }
+}

ts_web/elements/dees-dataview-codebox.demo.ts

@@ -1,18 +1,199 @@
-import { html } from '@design.estate/dees-element';
+import { html, cssManager } from '@design.estate/dees-element';
 
-export const demoFunc = () => html` <style>
-.demoWrapper {
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  background: none;
+export const demoFunc = () => html`
+  <style>
+    .demoWrapper {
+      box-sizing: border-box;
+      position: relative;
+      width: 100%;
+      min-height: 100vh;
+      padding: 48px;
+      background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+    }
+    
+    .section {
+      max-width: 900px;
+      width: 100%;
+      margin: 0 auto;
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+    }
+    
+    .section-description {
+      font-size: 14px;
+      color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      margin-bottom: 16px;
+    }
+  </style>
+  <div class="demoWrapper">
+    <div class="section">
+      <div class="section-title">TypeScript Code Example</div>
+      <div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
+      <dees-dataview-codebox proglang="typescript">
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  isActive: boolean;
 }
-</style>
-<div class="demoWrapper">
-<dees-dataview-codebox proglang="typescript">
-  import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
-  console.log('nice one'); }
-</dees-dataview-codebox>
-</div>`
+
+class UserService {
+  private users: User[] = [];
+  
+  constructor(private apiUrl: string) {
+    console.log('UserService initialized');
+  }
+  
+  async getUsers(): Promise<User[]> {
+    try {
+      const response = await fetch(this.apiUrl);
+      const data = await response.json();
+      return data.users;
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      return [];
+    }
+  }
+  
+  addUser(user: User): void {
+    this.users.push(user);
+  }
+}
+
+// Usage example
+const service = new UserService('https://api.example.com/users');
+const users = await service.getUsers();
+console.log('Found users:', users.length);
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">JavaScript Example</div>
+      <div class="section-description">Modern JavaScript with ES6+ features.</div>
+      <dees-dataview-codebox proglang="javascript">
+// Array manipulation examples
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+const filtered = numbers.filter(n => n > 3);
+
+// Object destructuring
+const user = { name: 'John', age: 30, city: 'New York' };
+const { name, age } = user;
+
+// Promise handling
+const fetchData = async (url) => {
+  const response = await fetch(url);
+  return response.json();
+};
+
+// Modern syntax
+const greet = (name = 'World') => \`Hello, \${name}!\`;
+console.log(greet('ShadCN'));
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Python Example</div>
+      <div class="section-description">Python code with classes and type hints.</div>
+      <dees-dataview-codebox proglang="python">
+from typing import List, Optional
+import asyncio
+
+class DataProcessor:
+    """A simple data processor class"""
+    
+    def __init__(self, name: str):
+        self.name = name
+        self.data: List[dict] = []
+    
+    async def process_data(self, items: List[dict]) -> List[dict]:
+        """Process data items asynchronously"""
+        results = []
+        for item in items:
+            # Simulate async processing
+            await asyncio.sleep(0.1)
+            results.append({
+                'id': item.get('id'),
+                'processed': True,
+                'processor': self.name
+            })
+        return results
+    
+    def get_summary(self) -> dict:
+        return {
+            'processor': self.name,
+            'items_processed': len(self.data)
+        }
+
+# Usage
+processor = DataProcessor("Main")
+data = await processor.process_data([{'id': 1}, {'id': 2}])
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">CSS Example</div>
+      <div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
+      <dees-dataview-codebox proglang="css">
+/* Modern CSS with custom properties */
+:root {
+  --primary-color: #3b82f6;
+  --secondary-color: #10b981;
+  --background: #ffffff;
+  --text-color: #09090b;
+  --border-radius: 6px;
+}
+
+.card {
+  background: var(--background);
+  border: 1px solid #e5e7eb;
+  border-radius: var(--border-radius);
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">JSON Example</div>
+      <div class="section-description">JSON configuration with proper formatting.</div>
+      <dees-dataview-codebox proglang="json">
+{
+  "name": "@design.estate/dees-catalog",
+  "version": "1.10.7",
+  "description": "A comprehensive catalog of web components",
+  "main": "dist_ts_web/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element",
+    "test": "tstest test/ --web --verbose"
+  },
+  "dependencies": {
+    "@design.estate/dees-element": "^2.0.45",
+    "highlight.js": "^11.9.0"
+  }
+}
+      </dees-dataview-codebox>
+    </div>
+  </div>
+`

ts_web/elements/dees-dataview-codebox.ts

@@ -8,6 +8,7 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
+import { cssGeistFontFamily, cssMonoFontFamily } from './00fonts.js';
 
 import hlight from 'highlight.js';
 
@@ -48,27 +49,27 @@ export class DeesDataviewCodebox extends DeesElement {
           display: block;
           text-align: left;
           font-size: 16px;
-          font-family: 'Geist Sans', sans-serif;
+          font-family: ${cssGeistFontFamily};
         }
         .mainbox {
           position: relative;
-          color: ${this.goBright ? '#333333' : '#ffffff'};
-          border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
-          box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
-          background: ${this.goBright ? '#ffffff' : '#191919'};
-          border-radius: 16px;
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+          background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+          border-radius: 6px;
           overflow: hidden;
         }
 
         .appbar {
           position: relative;
-          color: ${cssManager.bdTheme('#333', '#ccc')};
-          background: ${cssManager.bdTheme('#ffffff', '#161616')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
-          height: 24px;
+          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          height: 32px;
           display: flex;
-          font-size: 12px;
-          line-height: 24px;
+          font-size: 13px;
+          line-height: 32px;
           justify-content: center;
           align-items: center;
         }
@@ -81,31 +82,38 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
-          color: ${cssManager.bdTheme('#333', '#ccc')};
-          background: ${cssManager.bdTheme('#ffffff', '#161616')};
-          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
-          height: 24px;
+          position: relative;
+          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+          border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          height: 28px;
           font-size: 12px;
-          line-height: 24px;
-          text-align: right;
-          padding-right: 100px;
+          line-height: 28px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: stretch;
+          overflow: hidden;
+        }
+
+        .spacesLabel {
+          padding: 0 16px;
+          display: flex;
+          align-items: center;
         }
 
         .languageLabel {
-          color: ${cssManager.bdTheme('#333', '#ccc')};
+          color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
           font-size: 12px;
-          line-height: 24px;
-          z-index: 10;
-          background: #6596ff20;
-          display: inline-block;
-          position: absolute;
-          bottom: 0px;
-          right: 0px;
-          padding: 0px 16px 0px 8px;
+          line-height: 28px;
+          background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+          padding: 0px 16px;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
         }
 
         .hljs-keyword {
-          color: #ff65ec;
+          color: ${cssManager.bdTheme('#dc2626', '#f87171')};
         }
 
         .codegrid {
@@ -115,10 +123,10 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .lineNumbers {
-          color: ${this.goBright ? '#acacac' : '#666666'};
-          padding: 30px 16px 0px 0px;
+          color: ${cssManager.bdTheme('#71717a', '#52525b')};
+          padding: 24px 16px 0px 0px;
           text-align: right;
-          border-right: 1px solid ${this.goBright ? '#eaeaea' : '#222222'};
+          border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         }
 
         .lineCounter:last-child {
@@ -128,11 +136,11 @@ export class DeesDataviewCodebox extends DeesElement {
         pre {
           overflow-x: auto;
           margin: 0px;
-          padding: 30px 40px;
+          padding: 24px 24px;
         }
 
         code {
-          font-weight: ${this.goBright ? '400' : '300'};
+          font-weight: 400;
           padding: 0px;
           margin: 0px;
         }
@@ -142,27 +150,43 @@ export class DeesDataviewCodebox extends DeesElement {
         .lineNumbers {
           line-height: 1.4em;
           font-weight: 200;
-          font-family: 'Intel One Mono', 'Geist Mono', 'monospace';
+          font-family: ${cssMonoFontFamily};
         }
 
         .hljs-string {
-          color: #ffa465;
+          color: ${cssManager.bdTheme('#059669', '#10b981')};
         }
 
         .hljs-built_in {
-          color: #65ff6a;
+          color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
         }
 
         .hljs-function {
-          color: ${this.goBright ? '#2765DF' : '#6596ff'};
+          color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
         }
 
         .hljs-params {
-          color: ${this.goBright ? '#3DB420' : '#65d5ff'};
+          color: ${cssManager.bdTheme('#0891b2', '#06b6d4')};
         }
 
         .hljs-comment {
-          color: ${this.goBright ? '#EF9300' : '#ffd765'};
+          color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        }
+
+        .hljs-number {
+          color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
+        }
+
+        .hljs-literal {
+          color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+        }
+
+        .hljs-attr {
+          color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
+        }
+
+        .hljs-variable {
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
       </style>
       <div
@@ -197,7 +221,7 @@ export class DeesDataviewCodebox extends DeesElement {
           <pre><code></code></pre>
         </div>
         <div class="bottomBar">
-          Spaces: 2
+          <div class="spacesLabel">Spaces: 2</div>
           <div class="languageLabel">${this.progLang}</div>
         </div>
       </div>

ts_web/elements/dees-dataview-statusobject.ts

@@ -175,21 +175,21 @@ export class DeesDataviewStatusobject extends DeesElement {
                 DeesContextmenu.openContextMenuWithOptions(event, [
                   {
                     name: 'Copy Value',
-                    iconName: 'lucideCopy',
+                    iconName: 'lucide:copy',
                     action: async () => {
                       await this.copyToClipboard(detailArg.value, 'Value');
                     },
                   },
                   {
                     name: 'Copy Key',
-                    iconName: 'lucideKey',
+                    iconName: 'lucide:key',
                     action: async () => {
                       await this.copyToClipboard(detailArg.name, 'Key');
                     },
                   },
                   {
                     name: 'Copy Key:Value',
-                    iconName: 'lucideCopyPlus',
+                    iconName: 'lucide:copy-plus',
                     action: async () => {
                       await this.copyToClipboard(`${detailArg.name}: ${detailArg.value}`, 'Key:Value');
                     },

ts_web/elements/dees-form.demo.ts

@@ -3,40 +3,91 @@ import type { DeesForm } from './dees-form.js';
 import '@design.estate/dees-wcctools/demotools';
 
 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;
-        }
+  <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;
+      }
+      
+      .form-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;
+        white-space: pre-wrap;
+      }
+      
+      .status-message {
+        margin-top: 16px;
+        padding: 12px;
+        border-radius: 6px;
+        font-size: 14px;
+      }
+      
+      .status-message.success {
+        background: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(142.1 70.6% 35.3%)', 'hsl(142.1 70.6% 65.3%)')};
+      }
+      
+      .status-message.error {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 72.2% 50.6% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 72.2% 40.6%)', 'hsl(0 72.2% 60.6%)')};
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
+      const outputDiv = elementArg.querySelector('.form-output');
+      
+      if (form && outputDiv) {
+        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+          const data = eventArg.detail.data;
+          console.log('Form submitted with data:', data);
+          
+          // Show processing state
+          form.setStatus('pending', 'Processing your registration...');
+          outputDiv.innerHTML = `<strong>Submitted Data:</strong>\n${JSON.stringify(data, null, 2)}`;
+          
+          // Simulate API call
+          await domtools.plugins.smartdelay.delayFor(2000);
+          
+          // Show success
+          form.setStatus('success', 'Registration completed successfully!');
+          
+          // Reset form after delay
+          await domtools.plugins.smartdelay.delayFor(2000);
+          form.reset();
+          outputDiv.innerHTML = '<em>Form has been reset</em>';
+        });
         
-        dees-panel {
-          margin-bottom: 24px;
-        }
-        
-        dees-panel:last-child {
-          margin-bottom: 0;
-        }
-      `}
-    </style>
-    
-    <div class="demo-container">
+        // Track individual field changes
+        const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
+        inputs.forEach((input) => {
+          input.addEventListener('changeSubject', () => {
+            console.log('Field changed:', input.getAttribute('key'));
+          });
+        });
+      }
+    }}>
       <dees-panel .heading="Complete Form Example" .description="A comprehensive form with various input types, validation, and form submission handling">
-        <dees-form
-          @formData=${async (eventArg) => {
-            const form: DeesForm = eventArg.currentTarget;
-            form.setStatus('pending', 'Processing...');
-            await domtools.plugins.smartdelay.delayFor(2000);
-            form.setStatus('success', 'Form submitted successfully!');
-            await domtools.plugins.smartdelay.delayFor(2000);
-            form.reset();
-          }}
-        >
+        <dees-form>
           <dees-input-text 
             .required=${true} 
             key="firstName" 
@@ -92,13 +143,47 @@ export const demoFunc = () => html`
           
           <dees-form-submit>Create Account</dees-form-submit>
         </dees-form>
+        
+        <div class="form-output">
+          <em>Submit the form to see the collected data...</em>
+        </div>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
       
+      if (form) {
+        // Track horizontal layout behavior
+        console.log('Horizontal form layout active');
+        
+        // Monitor filter changes
+        form.addEventListener('formData', (event: CustomEvent) => {
+          const filters = event.detail.data;
+          console.log('Filter applied:', filters);
+          
+          // Simulate search
+          const resultsCount = Math.floor(Math.random() * 100) + 1;
+          console.log(`Found ${resultsCount} results with filters:`, filters);
+        });
+        
+        // Setup real-time filter updates
+        const inputs = form.querySelectorAll('[key]');
+        inputs.forEach((input) => {
+          input.addEventListener('changeSubject', async () => {
+            // Get current form data
+            const formData = await form.collectFormData();
+            console.log('Live filter update:', formData);
+          });
+        });
+      }
+    }}>
       <dees-panel .heading="Horizontal Form Layout" .description="Compact form with inputs arranged horizontally - perfect for filters and quick forms">
         <dees-form horizontal-layout>
           <dees-input-text 
             key="search" 
             label="Search"
+            placeholder="Enter keywords..."
           ></dees-input-text>
           
           <dees-input-dropdown
@@ -132,16 +217,55 @@ export const demoFunc = () => html`
           ></dees-input-checkbox>
         </dees-form>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
+      const statusDiv = elementArg.querySelector('#status-display');
       
+      if (form) {
+        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+          const data = eventArg.detail.data;
+          console.log('Advanced form data:', data);
+          
+          // Show validation in progress
+          form.setStatus('pending', 'Validating your information...');
+          
+          // Simulate validation
+          await domtools.plugins.smartdelay.delayFor(1500);
+          
+          // Check IBAN validity (simple check)
+          if (data.iban && data.iban.length > 15) {
+            form.setStatus('success', 'Application submitted successfully!');
+            
+            if (statusDiv) {
+              statusDiv.className = 'status-message success';
+              statusDiv.textContent = '✓ Your application has been submitted. We will contact you soon.';
+            }
+          } else {
+            form.setStatus('error', 'Please check your IBAN');
+            
+            if (statusDiv) {
+              statusDiv.className = 'status-message error';
+              statusDiv.textContent = '✗ Invalid IBAN format. Please check and try again.';
+            }
+          }
+          
+          console.log('Form data logged:', data);
+        });
+        
+        // Monitor file uploads
+        const fileUpload = form.querySelector('dees-input-fileupload');
+        if (fileUpload) {
+          fileUpload.addEventListener('change', (event: any) => {
+            const files = event.detail?.files || [];
+            console.log(`${files.length} file(s) selected for upload`);
+          });
+        }
+      }
+    }}>
       <dees-panel .heading="Advanced Form Features" .description="Form with specialized input types and complex validation">
-        <dees-form
-          @formData=${async (eventArg) => {
-            const form: DeesForm = eventArg.currentTarget;
-            const data = eventArg.detail.data;
-            console.log('Form data:', data);
-            form.setStatus('success', 'Data logged to console!');
-          }}
-        >
+        <dees-form>
           <dees-input-iban 
             key="iban"
             label="IBAN"
@@ -181,7 +305,9 @@ export const demoFunc = () => html`
           
           <dees-form-submit>Submit Application</dees-form-submit>
         </dees-form>
+        
+        <div id="status-display"></div>
       </dees-panel>
-    </div>
-  </dees-demowrapper>
+    </dees-demowrapper>
+  </div>
 `;

ts_web/elements/dees-form.ts

@@ -9,6 +9,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 
 import { DeesInputCheckbox } from './dees-input-checkbox.js';
+import { DeesInputDatepicker } from './dees-input-datepicker.js';
 import { DeesInputText } from './dees-input-text.js';
 import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
 import { DeesInputRadiogroup } from './dees-input-radiogroup.js';
@@ -25,6 +26,7 @@ import { demoFunc } from './dees-form.demo.js';
 // Unified set for form input types
 const FORM_INPUT_TYPES = [
   DeesInputCheckbox,
+  DeesInputDatepicker,
   DeesInputDropdown,
   DeesInputFileupload,
   DeesInputIban,
@@ -39,6 +41,7 @@ const FORM_INPUT_TYPES = [
 
 export type TFormInputElement =
   | DeesInputCheckbox
+  | DeesInputDatepicker
   | DeesInputDropdown
   | DeesInputFileupload
   | DeesInputIban

ts_web/elements/dees-heading.ts

@@ -10,6 +10,7 @@ import {
 } from '@design.estate/dees-element';
 
 import { demoFunc } from './dees-heading.demo.js';
+import { cssCalSansFontFamily } from './00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -39,7 +40,7 @@ export class DeesHeading extends DeesElement {
         font-weight: 600;
         color: ${cssManager.bdTheme('#000', '#fff')};
       }
-      h1 { font-size: 32px; font-family: 'Cal Sans'; letter-spacing: 0.025em;}
+      h1 { font-size: 32px; font-family: ${cssCalSansFontFamily}; letter-spacing: 0.025em;}
       h2 { font-size: 28px; }
       h3 { font-size: 24px; }
       h4 { font-size: 20px; }

ts_web/elements/dees-input-checkbox.ts

@@ -8,6 +8,7 @@ import {
 } from '@design.estate/dees-element';
 import { DeesInputBase } from './dees-input-base.js';
 import { demoFunc } from './dees-input-checkbox.demo.js';
+import { cssGeistFontFamily } from './00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -44,7 +45,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
         :host {
           position: relative;
           cursor: default;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+          font-family: ${cssGeistFontFamily};
         }
 
         .maincontainer {

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

@@ -0,0 +1,410 @@
+import { html, css } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
+import './dees-input-datepicker.js';
+import type { DeesInputDatepicker } from './dees-input-datepicker.js';
+
+export const demoFunc = () => html`
+  <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;
+      }
+      
+      .demo-output {
+        margin-top: 16px;
+        padding: 12px;
+        background: rgba(0, 105, 242, 0.1);
+        border-radius: 4px;
+        font-size: 14px;
+        font-family: monospace;
+      }
+      
+      .date-group {
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate basic date picker functionality
+      const datePicker = elementArg.querySelector('dees-input-datepicker');
+      
+      if (datePicker) {
+        datePicker.addEventListener('change', (event: CustomEvent) => {
+          console.log('Basic date selected:', (event.target as DeesInputDatepicker).value);
+        });
+      }
+    }}>
+      <dees-panel .title=${'Basic Date Picker'} .subtitle=${'Simple date selection without time'}>
+        <dees-input-datepicker
+          label="Select Date"
+          description="Choose a date from the calendar"
+        ></dees-input-datepicker>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate date and time picker
+      const dateTimePicker = elementArg.querySelector('dees-input-datepicker[label="Event Date & Time"]');
+      const appointmentPicker = elementArg.querySelector('dees-input-datepicker[label="Appointment"]');
+      
+      if (dateTimePicker) {
+        dateTimePicker.addEventListener('change', (event: CustomEvent) => {
+          const value = (event.target as DeesInputDatepicker).value;
+          console.log('24h format datetime:', value);
+        });
+      }
+      
+      if (appointmentPicker) {
+        appointmentPicker.addEventListener('change', (event: CustomEvent) => {
+          const value = (event.target as DeesInputDatepicker).value;
+          console.log('12h format datetime:', value);
+        });
+      }
+    }}>
+      <dees-panel .title=${'Date and Time Selection'} .subtitle=${'Date pickers with time selection in different formats'}>
+        <dees-input-datepicker
+          label="Event Date & Time"
+          description="Select both date and time (24-hour format)"
+          .enableTime=${true}
+          timeFormat="24h"
+        ></dees-input-datepicker>
+        
+        <dees-input-datepicker
+          label="Appointment"
+          description="Date and time with AM/PM selector (15-minute increments)"
+          .enableTime=${true}
+          timeFormat="12h"
+          .minuteIncrement=${15}
+        ></dees-input-datepicker>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate timezone functionality
+      const timezonePickers = elementArg.querySelectorAll('dees-input-datepicker');
+      
+      timezonePickers.forEach((picker) => {
+        picker.addEventListener('change', (event: CustomEvent) => {
+          const target = event.target as DeesInputDatepicker;
+          console.log(`${target.label} value:`, target.value);
+          const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
+          if (input) {
+            console.log(`${target.label} formatted:`, input.value);
+          }
+        });
+      });
+    }}>
+      <dees-panel .title=${'Timezone Support'} .subtitle=${'Date and time selection with timezone awareness'}>
+        <dees-input-datepicker
+          label="Meeting Time (with Timezone)"
+          description="Select a date/time and timezone for the meeting"
+          .enableTime=${true}
+          .enableTimezone=${true}
+          timeFormat="24h"
+          timezone="America/New_York"
+        ></dees-input-datepicker>
+        
+        <dees-input-datepicker
+          label="Global Event Schedule"
+          description="Schedule an event across different timezones"
+          .enableTime=${true}
+          .enableTimezone=${true}
+          timeFormat="12h"
+          timezone="Europe/London"
+          .minuteIncrement=${30}
+        ></dees-input-datepicker>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate date constraints
+      const futureDatePicker = elementArg.querySelector('dees-input-datepicker');
+      
+      if (futureDatePicker) {
+        // Show the min/max constraints in action
+        futureDatePicker.addEventListener('change', (event: CustomEvent) => {
+          const value = (event.target as DeesInputDatepicker).value;
+          if (value) {
+            const selectedDate = new Date(value);
+            const today = new Date();
+            const daysDiff = Math.floor((selectedDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+            console.log(`Selected date is ${daysDiff} days from today`);
+          }
+        });
+      }
+    }}>
+      <dees-panel .title=${'Date Range Constraints'} .subtitle=${'Limit selectable dates with min and max values'}>
+        <dees-input-datepicker
+          label="Future Date Only"
+          description="Can only select dates from today to 90 days in the future"
+          .minDate=${new Date().toISOString()}
+          .maxDate=${new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString()}
+        ></dees-input-datepicker>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate different date formats
+      const formatters = {
+        'DD/MM/YYYY': 'European',
+        'MM/DD/YYYY': 'US',
+        'YYYY-MM-DD': 'ISO'
+      };
+      
+      const datePickers = elementArg.querySelectorAll('dees-input-datepicker');
+      datePickers.forEach((picker) => {
+        picker.addEventListener('change', (event: CustomEvent) => {
+          const target = event.target as DeesInputDatepicker;
+          // Log the formatted value that's displayed in the input
+          const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
+          if (input) {
+            console.log(`${target.label} format:`, input.value);
+          }
+        });
+      });
+    }}>
+      <dees-panel .title=${'Date Formats'} .subtitle=${'Different date display formats for various regions'}>
+        <div class="date-group">
+          <dees-input-datepicker
+            label="European Format"
+            dateFormat="DD/MM/YYYY"
+            .value=${new Date().toISOString()}
+          ></dees-input-datepicker>
+          
+          <dees-input-datepicker
+            label="US Format"
+            dateFormat="MM/DD/YYYY"
+            .value=${new Date().toISOString()}
+          ></dees-input-datepicker>
+          
+          <dees-input-datepicker
+            label="ISO Format"
+            dateFormat="YYYY-MM-DD"
+            .value=${new Date().toISOString()}
+          ></dees-input-datepicker>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate required field validation
+      const requiredPicker = elementArg.querySelector('dees-input-datepicker[required]');
+      
+      if (requiredPicker) {
+        // Monitor blur events for validation
+        requiredPicker.addEventListener('blur', () => {
+          const picker = requiredPicker as DeesInputDatepicker;
+          const value = picker.getValue();
+          if (!value) {
+            console.log('Required date field is empty');
+          }
+        });
+      }
+    }}>
+      <dees-panel .title=${'Form States'} .subtitle=${'Required and disabled states'}>
+        <dees-input-datepicker
+          label="Birth Date"
+          description="This field is required"
+          .required=${true}
+          placeholder="Select your birth date"
+        ></dees-input-datepicker>
+        
+        <dees-input-datepicker
+          label="Disabled Date"
+          description="This field cannot be edited"
+          .disabled=${true}
+          .value=${new Date().toISOString()}
+        ></dees-input-datepicker>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate week start customization
+      const usPicker = elementArg.querySelector('dees-input-datepicker[label="US Calendar"]');
+      const euPicker = elementArg.querySelector('dees-input-datepicker[label="EU Calendar"]');
+      
+      if (usPicker) {
+        console.log('US Calendar starts on Sunday (0)');
+      }
+      if (euPicker) {
+        console.log('EU Calendar starts on Monday (1)');
+      }
+    }}>
+      <dees-panel .title=${'Calendar Customization'} .subtitle=${'Different week start days for various regions'}>
+        <div class="date-group">
+          <dees-input-datepicker
+            label="US Calendar"
+            description="Week starts on Sunday"
+            .weekStartsOn=${0}
+          ></dees-input-datepicker>
+          
+          <dees-input-datepicker
+            label="EU Calendar"
+            description="Week starts on Monday"
+            .weekStartsOn=${1}
+          ></dees-input-datepicker>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Generate weekend dates for the current month
+      const generateWeekends = () => {
+        const weekends = [];
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = now.getMonth();
+        
+        // Get all weekends for current month
+        const date = new Date(year, month, 1);
+        while (date.getMonth() === month) {
+          if (date.getDay() === 0 || date.getDay() === 6) {
+            weekends.push(new Date(date).toISOString());
+          }
+          date.setDate(date.getDate() + 1);
+        }
+        return weekends;
+      };
+      
+      const picker = elementArg.querySelector('dees-input-datepicker');
+      if (picker) {
+        picker.disabledDates = generateWeekends();
+        console.log('Disabled weekend dates for current month');
+      }
+    }}>
+      <dees-panel .title=${'Disabled Dates'} .subtitle=${'Calendar with specific dates disabled (weekends in current month)'}>
+        <dees-input-datepicker
+          label="Availability Calendar"
+          description="Weekends are disabled for the current month"
+        ></dees-input-datepicker>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Generate sample events for the calendar
+      const today = new Date();
+      const currentMonth = today.getMonth();
+      const currentYear = today.getFullYear();
+      
+      const sampleEvents = [
+        // Current week events
+        {
+          date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`,
+          title: "Team Meeting",
+          type: "info" as const,
+          count: 2
+        },
+        {
+          date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${(today.getDate() + 1).toString().padStart(2, '0')}`,
+          title: "Project Deadline",
+          type: "warning" as const
+        },
+        {
+          date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${(today.getDate() + 2).toString().padStart(2, '0')}`,
+          title: "Release Day",
+          type: "success" as const
+        },
+        {
+          date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${(today.getDate() + 5).toString().padStart(2, '0')}`,
+          title: "Urgent Fix Required",
+          type: "error" as const
+        },
+        // Multiple events on one day
+        {
+          date: `${currentYear}-${(currentMonth + 1).toString().padStart(2, '0')}-${(today.getDate() + 7).toString().padStart(2, '0')}`,
+          title: "Multiple Events Today",
+          type: "info" as const,
+          count: 5
+        },
+        // Next month event
+        {
+          date: `${currentYear}-${(currentMonth + 2).toString().padStart(2, '0')}-15`,
+          title: "Future Planning Session",
+          type: "info" as const
+        }
+      ];
+      
+      const picker = elementArg.querySelector('dees-input-datepicker');
+      if (picker) {
+        picker.events = sampleEvents;
+        console.log('Calendar events loaded:', sampleEvents);
+      }
+    }}>
+      <dees-panel .title=${'Calendar with Events'} .subtitle=${'Visual feedback for scheduled events'}>
+        <dees-input-datepicker
+          label="Event Calendar"
+          description="Days with colored dots have events. Hover to see details."
+        ></dees-input-datepicker>
+        
+        <div class="demo-output" style="margin-top: 16px;">
+          <strong>Event Legend:</strong><br>
+          <span style="color: #0969da;">● Info</span> | 
+          <span style="color: #d29922;">● Warning</span> | 
+          <span style="color: #2ea043;">● Success</span> | 
+          <span style="color: #cf222e;">● Error</span><br>
+          <em>Days with more than 3 events show a count badge</em>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Interactive event demonstration
+      const picker = elementArg.querySelector('dees-input-datepicker');
+      const output = elementArg.querySelector('#event-output');
+      
+      if (picker && output) {
+        picker.addEventListener('change', (event: CustomEvent) => {
+          const target = event.target as DeesInputDatepicker;
+          const value = target.value;
+          if (value) {
+            const date = new Date(value);
+            // Get the formatted value from the input element
+            const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
+            const formattedValue = input?.value || 'N/A';
+            output.innerHTML = `
+              <strong>Event triggered!</strong><br>
+              ISO Value: ${value}<br>
+              Formatted: ${formattedValue}<br>
+              Date object: ${date.toLocaleString()}
+            `;
+          } else {
+            output.innerHTML = '<em>Date cleared</em>';
+          }
+        });
+        
+        picker.addEventListener('blur', () => {
+          console.log('Datepicker lost focus');
+        });
+      }
+    }}>
+      <dees-panel .title=${'Event Handling'} .subtitle=${'Interactive demonstration of change events'}>
+        <dees-input-datepicker
+          label="Event Demo"
+          description="Select a date to see the event details"
+        ></dees-input-datepicker>
+        
+        <div id="event-output" class="demo-output">
+          <em>Select a date to see event details...</em>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+  </div>
+`;

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

@@ -5,45 +5,63 @@ import './dees-form.js';
 import './dees-form-submit.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;
-        }
-        
-        .horizontal-group {
-          display: flex;
-          align-items: center;
-          gap: 16px;
-          flex-wrap: wrap;
-        }
-        
-        .spacer {
-          height: 200px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: #999;
-          font-size: 14px;
-        }
-      `}
-    </style>
-    
-    <div class="demo-container">
+  <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;
+      }
+      
+      .horizontal-group {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      
+      .spacer {
+        height: 200px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #999;
+        font-size: 14px;
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate programmatic interaction with basic dropdowns
+      const countryDropdown = elementArg.querySelector('dees-input-dropdown[label="Select Country"]');
+      const roleDropdown = elementArg.querySelector('dees-input-dropdown[label="Select Role"]');
+      
+      // Log when country changes
+      if (countryDropdown) {
+        countryDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+          console.log('Country selected:', event.detail);
+        });
+      }
+      
+      // Log when role changes
+      if (roleDropdown) {
+        roleDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+          console.log('Role selected:', event.detail);
+        });
+      }
+    }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
         <dees-input-dropdown
           .label=${'Select Country'}
@@ -70,7 +88,18 @@ export const demoFunc = () => html`
           ]}
         ></dees-input-dropdown>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate simpler dropdown without search
+      const priorityDropdown = elementArg.querySelector('dees-input-dropdown');
       
+      if (priorityDropdown) {
+        priorityDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+          console.log(`Priority changed to: ${event.detail.option}`);
+        });
+      }
+    }}>
       <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
         <dees-input-dropdown
           .label=${'Priority Level'}
@@ -83,7 +112,20 @@ export const demoFunc = () => html`
           .selectedOption=${{ option: 'Medium', key: 'medium' }}
         ></dees-input-dropdown>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate horizontal layout with multiple dropdowns
+      const dropdowns = elementArg.querySelectorAll('dees-input-dropdown');
       
+      // Log all changes from horizontal dropdowns
+      dropdowns.forEach((dropdown) => {
+        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+          const label = dropdown.getAttribute('label');
+          console.log(`${label}: ${event.detail.option}`);
+        });
+      });
+    }}>
       <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
         <div class="horizontal-group">
           <dees-input-dropdown
@@ -120,7 +162,19 @@ export const demoFunc = () => html`
           ></dees-input-dropdown>
         </div>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate state handling
+      const requiredDropdown = elementArg.querySelector('dees-input-dropdown[required]');
       
+      if (requiredDropdown) {
+        // Show validation state changes
+        requiredDropdown.addEventListener('blur', () => {
+          console.log('Required dropdown lost focus');
+        });
+      }
+    }}>
       <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
         <dees-input-dropdown
           .label=${'Required Field'}
@@ -141,11 +195,25 @@ export const demoFunc = () => html`
           .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
         ></dees-input-dropdown>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <div class="spacer">
+      (Spacer to test dropdown positioning)
+    </div>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // This dropdown demonstrates automatic positioning
+      const dropdown = elementArg.querySelector('dees-input-dropdown');
       
-      <div class="spacer">
-        (Spacer to test dropdown positioning)
-      </div>
-      
+      if (dropdown) {
+        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+          console.log('Bottom dropdown selected:', event.detail);
+        });
+        
+        // Note: The dropdown automatically detects available space
+        // and opens upward when near the bottom of the viewport
+      }
+    }}>
       <dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
         <dees-input-dropdown
           .label=${'Opens Upward'}
@@ -158,7 +226,30 @@ export const demoFunc = () => html`
           ]}
         ></dees-input-dropdown>
       </dees-panel>
+    </dees-demowrapper>
 
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Setup the interactive payload display
+      const dropdown = elementArg.querySelector('dees-input-dropdown');
+      const output = elementArg.querySelector('#selection-output');
+      
+      if (dropdown && output) {
+        // Initialize output
+        output.innerHTML = '<em>Select a product to see details...</em>';
+        
+        // Handle dropdown changes
+        dropdown.addEventListener('change', (event: CustomEvent) => {
+          if (event.detail.value) {
+            output.innerHTML = `
+              <strong>Selected:</strong> ${event.detail.value.option}<br>
+              <strong>Key:</strong> ${event.detail.value.key}<br>
+              <strong>Price:</strong> $${event.detail.value.payload?.price || 'N/A'}<br>
+              <strong>Features:</strong> ${event.detail.value.payload?.features?.join(', ') || 'N/A'}
+            `;
+          }
+        });
+      }
+    }}>
       <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
         <dees-input-dropdown
           .label=${'Select Product'}
@@ -167,24 +258,35 @@ export const demoFunc = () => html`
             { 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>
+        <div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;"></div>
       </dees-panel>
+    </dees-demowrapper>
 
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate form integration and validation
+      const form = elementArg.querySelector('dees-form');
+      const projectTypeDropdown = elementArg.querySelector('dees-input-dropdown[key="projectType"]');
+      const frameworkDropdown = elementArg.querySelector('dees-input-dropdown[key="framework"]');
+      
+      if (form) {
+        form.addEventListener('formData', (event: CustomEvent) => {
+          console.log('Form submitted with data:', event.detail.data);
+        });
+      }
+      
+      if (projectTypeDropdown && frameworkDropdown) {
+        // Filter frameworks based on project type
+        projectTypeDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+          const selectedType = event.detail.key;
+          console.log(`Project type changed to: ${selectedType}`);
+          
+          // In a real app, you could filter the framework options based on project type
+          // For demo purposes, we just log the change
+        });
+      }
+    }}>
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
         <dees-form>
           <dees-input-dropdown
@@ -216,6 +318,6 @@ export const demoFunc = () => html`
           <dees-form-submit .text=${'Create Project'}></dees-form-submit>
         </dees-form>
       </dees-panel>
-    </div>
-  </dees-demowrapper>
+    </dees-demowrapper>
+  </div>
 `

ts_web/elements/dees-input-dropdown.ts

@@ -10,6 +10,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-input-dropdown.demo.js';
 import { DeesInputBase } from './dees-input-base.js';
+import { cssGeistFontFamily } from './00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -67,7 +68,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       }
 
       :host {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-family: ${cssGeistFontFamily};
         position: relative;
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }

ts_web/elements/dees-input-fileupload.ts

@@ -37,6 +37,9 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   @property()
   public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
 
+  @property({ type: Boolean })
+  private isLoading: boolean = false;
+
   @property({
     type: String,
   })
@@ -317,6 +320,53 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
         margin-top: 6px;
         line-height: 1.5;
       }
+
+      /* Loading state styles */
+      .uploadButton.loading {
+        pointer-events: none;
+        opacity: 0.8;
+      }
+
+      .uploadButton .button-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
+
+      .loading-spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        border-top-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes pulse {
+        0% {
+          transform: scale(1);
+          opacity: 1;
+        }
+        50% {
+          transform: scale(1.02);
+          opacity: 0.9;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      .uploadButton.loading {
+        animation: pulse 1s ease-in-out infinite;
+      }
     `,
   ];
 
@@ -353,7 +403,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
                       ${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>
+                        <dees-icon .icon=${this.getFileIcon(fileArg)}></dees-icon>
                       `}
                     </div>
                     <div class="info">
@@ -366,7 +416,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
                         @click=${() => this.removeFile(fileArg)}
                         title="Remove file"
                       >
-                        <dees-icon .iconName=${'lucide:x'}></dees-icon>
+                        <dees-icon .icon=${'lucide:x'}></dees-icon>
                       </button>
                     </div>
                   </div>
@@ -375,13 +425,20 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
             </div>
           ` : html`
             <div class="drop-hint">
-              <dees-icon .iconName=${'lucide:cloud-upload'}></dees-icon>
+              <dees-icon .icon=${'lucide:cloud-upload'}></dees-icon>
               <div>Drag files here or click to browse</div>
             </div>
           `}
-          <div class="uploadButton" @click=${this.openFileSelector}>
-            <dees-icon .iconName=${'lucide:upload'}></dees-icon>
-            ${this.buttonText}
+          <div class="uploadButton ${this.isLoading ? 'loading' : ''}" @click=${this.openFileSelector}>
+            <div class="button-content">
+              ${this.isLoading ? html`
+                <div class="loading-spinner"></div>
+                <span>Opening...</span>
+              ` : html`
+                <dees-icon .icon=${'lucide:upload'}></dees-icon>
+                ${this.buttonText}
+              `}
+            </div>
           </div>
         </div>
         ${this.description ? html`
@@ -482,8 +539,25 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   }
 
   public async openFileSelector() {
-    if (this.disabled) return;
+    if (this.disabled || this.isLoading) return;
+    
+    // Set loading state
+    this.isLoading = true;
+    
     const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
+    
+    // Set up a focus handler to detect when the dialog is closed without selection
+    const handleFocus = () => {
+      setTimeout(() => {
+        // Check if no file was selected
+        if (!inputFile.files || inputFile.files.length === 0) {
+          this.isLoading = false;
+        }
+        window.removeEventListener('focus', handleFocus);
+      }, 300);
+    };
+    
+    window.addEventListener('focus', handleFocus);
     inputFile.click();
   }
 
@@ -516,6 +590,10 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
     inputFile.addEventListener('change', async (event: Event) => {
       const target = event.target as HTMLInputElement;
       const newFiles = Array.from(target.files);
+      
+      // Always reset loading state when file dialog interaction completes
+      this.isLoading = false;
+      
       await this.addFiles(newFiles);
       // Reset the input value to allow selecting the same file again if needed
       target.value = '';

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

@@ -1,4 +1,4 @@
-import { html, css } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
   <dees-demowrapper>
@@ -7,10 +7,31 @@ export const demoFunc = () => html`
         .demo-container {
           display: flex;
           flex-direction: column;
-          gap: 24px;
+          gap: 32px;
+          padding: 48px;
+          background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+          min-height: 100vh;
+        }
+        
+        .section {
+          background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-radius: 8px;
           padding: 24px;
-          max-width: 1200px;
-          margin: 0 auto;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        
+        .section-title {
+          font-size: 18px;
+          font-weight: 600;
+          margin-bottom: 8px;
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        }
+        
+        .section-description {
+          font-size: 14px;
+          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          margin-bottom: 24px;
         }
         
         .settings-grid {
@@ -28,7 +49,10 @@ export const demoFunc = () => html`
     </style>
     
     <div class="demo-container">
-      <dees-panel .title=${'Multi-Option Toggle'} .subtitle=${'Select from multiple options with a sliding indicator'}>
+      <div class="section">
+        <div class="section-title">Multi-Option Toggle</div>
+        <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
+        
         <dees-input-multitoggle
           .label=${'Display Mode'}
           .description=${'Choose how content is displayed'}
@@ -36,15 +60,20 @@ export const demoFunc = () => html`
           .selectedOption=${'Grid View'}
         ></dees-input-multitoggle>
         
+        <br><br>
+        
         <dees-input-multitoggle
           .label=${'T-Shirt Size'}
           .description=${'Select your preferred size'}
           .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
           .selectedOption=${'M'}
         ></dees-input-multitoggle>
-      </dees-panel>
+      </div>
       
-      <dees-panel .title=${'Boolean Toggle'} .subtitle=${'Simple on/off switches with custom labels'}>
+      <div class="section">
+        <div class="section-title">Boolean Toggle</div>
+        <div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
+        
         <dees-input-multitoggle
           .label=${'Notifications'}
           .description=${'Enable or disable push notifications'}
@@ -52,6 +81,8 @@ export const demoFunc = () => html`
           .selectedOption=${'true'}
         ></dees-input-multitoggle>
         
+        <br><br>
+        
         <dees-input-multitoggle
           .label=${'Theme Mode'}
           .description=${'Switch between light and dark theme'}
@@ -60,13 +91,15 @@ export const demoFunc = () => html`
           .booleanFalseName=${'Light'}
           .selectedOption=${'Dark'}
         ></dees-input-multitoggle>
-      </dees-panel>
+      </div>
       
-      <dees-panel .title=${'Settings Panel'} .subtitle=${'Configuration options in a horizontal layout'}>
+      <div class="section">
+        <div class="section-title">Settings Grid</div>
+        <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
+        
         <div class="settings-grid">
           <dees-input-multitoggle
             .label=${'Auto-Save'}
-            .layoutMode=${'horizontal'}
             .type=${'boolean'}
             .booleanTrueName=${'Enabled'}
             .booleanFalseName=${'Disabled'}
@@ -75,30 +108,30 @@ export const demoFunc = () => html`
           
           <dees-input-multitoggle
             .label=${'Language'}
-            .layoutMode=${'horizontal'}
             .options=${['English', 'German', 'French', 'Spanish']}
             .selectedOption=${'English'}
           ></dees-input-multitoggle>
           
           <dees-input-multitoggle
             .label=${'Quality'}
-            .layoutMode=${'horizontal'}
             .options=${['Low', 'Medium', 'High', 'Ultra']}
             .selectedOption=${'High'}
           ></dees-input-multitoggle>
           
           <dees-input-multitoggle
             .label=${'Privacy'}
-            .layoutMode=${'horizontal'}
             .type=${'boolean'}
             .booleanTrueName=${'Private'}
             .booleanFalseName=${'Public'}
             .selectedOption=${'Private'}
           ></dees-input-multitoggle>
         </div>
-      </dees-panel>
+      </div>
       
-      <dees-panel .title=${'States & Form Integration'} .subtitle=${'Disabled states and form usage'}>
+      <div class="section">
+        <div class="section-title">States & Form Integration</div>
+        <div class="section-description">Examples of disabled states and integration within forms.</div>
+        
         <dees-input-multitoggle
           .label=${'Account Type'}
           .description=${'This setting is locked'}
@@ -107,6 +140,8 @@ export const demoFunc = () => html`
           .disabled=${true}
         ></dees-input-multitoggle>
         
+        <br><br>
+        
         <dees-form>
           <dees-input-text .label=${'Project Name'} .required=${true}></dees-input-text>
           <dees-input-multitoggle
@@ -122,7 +157,7 @@ export const demoFunc = () => html`
             .selectedOption=${'MIT'}
           ></dees-input-multitoggle>
         </dees-form>
-      </dees-panel>
+      </div>
     </div>
   </dees-demowrapper>
 `;

ts_web/elements/dees-input-multitoggle.ts

@@ -57,9 +57,12 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     } else {
       this.selectedOption = val as string;
     }
+    this.requestUpdate();
     // Defer indicator update to next frame if component not yet updated
     if (this.hasUpdated) {
-      this.setIndicator();
+      requestAnimationFrame(() => {
+        this.setIndicator();
+      });
     }
   }
 
@@ -68,59 +71,71 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         user-select: none;
       }
 
-
       .selections {
         position: relative;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        background: ${cssManager.bdTheme('#fff', '#222')};
-        width: min-content;
-        border-radius: 20px;
-        height: 32px;
-        border-top: 1px solid ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
+        display: inline-flex;
+        align-items: center;
+        background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        padding: 4px;
+        border-radius: 8px;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       }
 
       .option {
-        color: ${cssManager.bdTheme('#666', '#999')};
         position: relative;
-        padding: 0px 16px;
-        line-height: 32px;
-        cursor: default;
-        width: min-content; /* Make the width as per the content */
-        white-space: nowrap; /* Prevent text wrapping */
-        transition: all 0.1s;
+        padding: 8px 20px;
+        border-radius: 6px;
+        cursor: pointer;
+        white-space: nowrap;
+        transition: color 0.2s ease;
         font-size: 14px;
-        transform: translateY(-1px);
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        line-height: 1;
+        z-index: 2;
       }
 
       .option:hover {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
       }
 
       .option.selected {
-        color: ${cssManager.bdTheme('#fff', '#fff')};
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
       }
 
       .indicator {
         opacity: 0;
         position: absolute;
-        height: 24px;
-        left: 4px;
-        top: 3px;
-        border-radius: 16px;
-        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
-        min-width: 24px;
-        transition: all 0.1s ease-in-out;
+        height: calc(100% - 8px);
+        top: 4px;
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.15)')};
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: 1;
       }
       
       .indicator.no-transition {
         transition: none;
       }
+      
+      :host([disabled]) .selections {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      :host([disabled]) .option {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      :host([disabled]) .indicator {
+        background: ${cssManager.bdTheme('rgba(113, 113, 122, 0.15)', 'rgba(113, 113, 122, 0.15)')};
+      }
     `,
   ];
 
@@ -148,6 +163,14 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     // Initialize boolean options early
     if (this.type === 'boolean' && this.options.length === 0) {
       this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false'];
+      // Set default selection for boolean if not set
+      if (!this.selectedOption) {
+        this.selectedOption = this.booleanFalseName || 'false';
+      }
+    }
+    // Set default selection to first option if not set
+    if (!this.selectedOption && this.options.length > 0) {
+      this.selectedOption = this.options[0];
     }
   }
 
@@ -159,16 +182,28 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     }
     // Wait for the next frame to ensure DOM is fully rendered
     await this.updateComplete;
-    requestAnimationFrame(() => {
-      this.setIndicator();
-    });
-  }
-
-  public async handleSelection(optionArg: string) {
-    this.selectedOption = optionArg;
+    
+    // Wait for fonts to load
+    if (document.fonts) {
+      await document.fonts.ready;
+    }
+    
+    // Wait one more frame after fonts are loaded
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    
+    // Now set the indicator
     this.setIndicator();
   }
 
+  public async handleSelection(optionArg: string) {
+    if (this.disabled) return;
+    this.selectedOption = optionArg;
+    this.requestUpdate();
+    this.changeSubject.next(this);
+    await this.updateComplete;
+    this.setIndicator();
+  }
+  
   private indicatorInitialized = false;
 
   public async setIndicator() {
@@ -199,8 +234,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
         }, 50);
       }
       
-      indicator.style.width = `${option.clientWidth - 8}px`;
-      indicator.style.left = `${option.offsetLeft + 4}px`;
+      indicator.style.width = `${option.clientWidth}px`;
+      indicator.style.left = `${option.offsetLeft}px`;
       indicator.style.opacity = '1';
     }
   }
@@ -218,8 +253,11 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     } else {
       this.selectedOption = value as string;
     }
+    this.requestUpdate();
     if (this.hasUpdated) {
-      this.setIndicator();
+      requestAnimationFrame(() => {
+        this.setIndicator();
+      });
     }
   }
 }

ts_web/elements/dees-input-richtext.ts

@@ -96,27 +96,27 @@ export class DeesInputRichtext extends DeesInputBase<string> {
         margin-bottom: 8px;
         font-size: 14px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('#374151', '#e4e4e7')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
       }
 
       .editor-container {
         display: flex;
         flex-direction: column;
         min-height: ${cssManager.bdTheme('200px', '200px')};
-        border: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')};
-        border-radius: 8px;
-        background: ${cssManager.bdTheme('#ffffff', '#141414')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
         overflow: hidden;
-        transition: all 0.2s ease;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       .editor-container:hover {
-        border-color: ${cssManager.bdTheme('#d1d5db', '#404040')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
 
       .editor-container.focused {
-        border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')};
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 80, 185, 0.1)', 'rgba(0, 105, 242, 0.1)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
       }
 
       .editor-toolbar {
@@ -124,8 +124,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
         flex-wrap: wrap;
         gap: 4px;
         padding: 8px 12px;
-        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         align-items: center;
         position: relative;
       }
@@ -142,8 +142,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
         cursor: pointer;
         font-size: 14px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('#374151', '#9ca3af')};
-        transition: all 0.2s;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        transition: all 0.15s ease;
         user-select: none;
       }
 
@@ -153,13 +153,13 @@ export class DeesInputRichtext extends DeesInputBase<string> {
       }
 
       .toolbar-button:hover {
-        background: ${cssManager.bdTheme('#e5e7eb', '#2c2c2c')};
-        color: ${cssManager.bdTheme('#1f2937', '#e4e4e7')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
 
       .toolbar-button.active {
-        background: ${cssManager.bdTheme('#0050b9', '#0069f2')};
-        color: white;
+        background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
       }
 
       .toolbar-button:disabled {
@@ -170,7 +170,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
       .toolbar-divider {
         width: 1px;
         height: 24px;
-        background: ${cssManager.bdTheme('#d1d5db', '#404040')};
+        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         margin: 0 4px;
       }
 
@@ -184,7 +184,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
       .editor-content .ProseMirror {
         outline: none;
         line-height: 1.6;
-        color: ${cssManager.bdTheme('#374151', '#e4e4e7')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
         min-height: 100%;
       }
 
@@ -232,25 +232,25 @@ export class DeesInputRichtext extends DeesInputBase<string> {
       }
 
       .editor-content .ProseMirror blockquote {
-        border-left: 4px solid ${cssManager.bdTheme('#d1d5db', '#404040')};
+        border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         margin: 1em 0;
         padding-left: 1em;
-        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         font-style: italic;
       }
 
       .editor-content .ProseMirror code {
-        background: ${cssManager.bdTheme('#f3f4f6', '#2c2c2c')};
-        border-radius: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 3px;
         padding: 0.2em 0.4em;
-        font-family: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
         font-size: 0.9em;
-        color: ${cssManager.bdTheme('#e11d48', '#f87171')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
       }
 
       .editor-content .ProseMirror pre {
-        background: ${cssManager.bdTheme('#1f2937', '#0a0a0a')};
-        color: ${cssManager.bdTheme('#f9fafb', '#e4e4e7')};
+        background: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 3.9%)')};
         border-radius: 6px;
         padding: 1em;
         margin: 1em 0;
@@ -265,21 +265,21 @@ export class DeesInputRichtext extends DeesInputBase<string> {
       }
 
       .editor-content .ProseMirror a {
-        color: ${cssManager.bdTheme('#0050b9', '#0069f2')};
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
         text-decoration: underline;
         cursor: pointer;
       }
 
       .editor-content .ProseMirror a:hover {
-        color: ${cssManager.bdTheme('#0069f2', '#0084ff')};
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 41.2%)', 'hsl(217.2 91.2% 69.8%)')};
       }
 
       .editor-footer {
         padding: 8px 12px;
-        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
-        border-top: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         font-size: 12px;
-        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -295,8 +295,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
         top: 100%;
         left: 0;
         right: 0;
-        background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
-        border: 1px solid ${cssManager.bdTheme('#d1d5db', '#404040')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         border-radius: 6px;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         padding: 12px;
@@ -310,17 +310,18 @@ export class DeesInputRichtext extends DeesInputBase<string> {
       .link-input input {
         width: 100%;
         padding: 8px 12px;
-        border: 1px solid ${cssManager.bdTheme('#d1d5db', '#404040')};
-        border-radius: 4px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
         outline: none;
         font-size: 14px;
-        background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
-        color: ${cssManager.bdTheme('#374151', '#e4e4e7')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       .link-input input:focus {
-        border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')};
-        box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(0, 80, 185, 0.1)', 'rgba(0, 105, 242, 0.1)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
       }
 
       .link-input-buttons {
@@ -331,33 +332,36 @@ export class DeesInputRichtext extends DeesInputBase<string> {
 
       .link-input-buttons button {
         padding: 6px 12px;
-        border: 1px solid ${cssManager.bdTheme('#d1d5db', '#404040')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         border-radius: 4px;
-        background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
         cursor: pointer;
         font-size: 12px;
-        color: ${cssManager.bdTheme('#374151', '#e4e4e7')};
-        transition: all 0.2s;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        transition: all 0.15s ease;
+        font-weight: 500;
       }
 
       .link-input-buttons button:hover {
-        background: ${cssManager.bdTheme('#f3f4f6', '#2c2c2c')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
 
       .link-input-buttons button.primary {
-        background: ${cssManager.bdTheme('#0050b9', '#0069f2')};
-        color: white;
-        border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')};
+        background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
       }
 
       .link-input-buttons button.primary:hover {
-        background: ${cssManager.bdTheme('#0069f2', '#0084ff')};
+        background: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
       }
 
       .description {
         margin-top: 8px;
         font-size: 12px;
-        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         line-height: 1.4;
       }
 

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

@@ -1,67 +1,87 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
 import './dees-panel.js';
+import type { DeesInputText } from './dees-input-text.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;
-        }
-        
-        .horizontal-group {
-          display: flex;
-          align-items: center;
-          gap: 16px;
-          flex-wrap: wrap;
-        }
-        
+  <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;
+      }
+      
+      .horizontal-group {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      
+      .grid-layout {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+      }
+      
+      @media (max-width: 768px) {
         .grid-layout {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 16px;
+          grid-template-columns: 1fr;
         }
+      }
+      
+      .interactive-section {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        border-radius: 8px;
+        padding: 16px;
+        margin-top: 16px;
+      }
+      
+      .output-text {
+        font-family: monospace;
+        font-size: 13px;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
+        padding: 8px;
+        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
+        border-radius: 4px;
+        min-height: 24px;
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate basic text input functionality
+      const inputs = elementArg.querySelectorAll('dees-input-text');
+      
+      inputs.forEach((input: DeesInputText) => {
+        input.addEventListener('changeSubject', (event: CustomEvent) => {
+          console.log(`Input "${input.label}" changed to:`, input.getValue());
+        });
         
-        @media (max-width: 768px) {
-          .grid-layout {
-            grid-template-columns: 1fr;
-          }
-        }
-        
-        .interactive-section {
-          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
-          border-radius: 8px;
-          padding: 16px;
-          margin-top: 16px;
-        }
-        
-        .output-text {
-          font-family: monospace;
-          font-size: 13px;
-          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
-          padding: 8px;
-          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
-          border-radius: 4px;
-          min-height: 24px;
-        }
-      `}
-    </style>
-    
-    <div class="demo-container">
+        input.addEventListener('blur', () => {
+          console.log(`Input "${input.label}" lost focus`);
+        });
+      });
+      
+      // Show password visibility toggle
+      const passwordInput = elementArg.querySelector('dees-input-text[key="password"]') as DeesInputText;
+      if (passwordInput) {
+        console.log('Password input includes visibility toggle');
+      }
+    }}>
       <dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
         <dees-input-text 
           .label=${'Username'} 
@@ -83,7 +103,33 @@ export const demoFunc = () => html`
           .key=${'password'}
         ></dees-input-text>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate horizontal layout behavior
+      const horizontalInputs = elementArg.querySelectorAll('dees-input-text');
       
+      // Check that inputs are properly spaced horizontally
+      horizontalInputs.forEach((input: DeesInputText) => {
+        const computedStyle = window.getComputedStyle(input);
+        console.log(`Horizontal input "${input.label}" display:`, computedStyle.display);
+      });
+      
+      // Track value changes
+      const firstNameInput = elementArg.querySelector('dees-input-text[key="firstName"]');
+      const lastNameInput = elementArg.querySelector('dees-input-text[key="lastName"]');
+      
+      if (firstNameInput && lastNameInput) {
+        const updateFullName = () => {
+          const firstName = (firstNameInput as DeesInputText).getValue();
+          const lastName = (lastNameInput as DeesInputText).getValue();
+          console.log(`Full name: ${firstName} ${lastName}`);
+        };
+        
+        firstNameInput.addEventListener('changeSubject', updateFullName);
+        lastNameInput.addEventListener('changeSubject', updateFullName);
+      }
+    }}>
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
         <div class="horizontal-group">
           <dees-input-text 
@@ -108,7 +154,23 @@ export const demoFunc = () => html`
           ></dees-input-text>
         </div>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate different label positions
+      const inputs = elementArg.querySelectorAll('dees-input-text');
       
+      inputs.forEach((input: DeesInputText) => {
+        const position = input.labelPosition;
+        console.log(`Input "${input.label}" has label position: ${position}`);
+      });
+      
+      // Show how label position affects layout
+      const leftLabelInputs = elementArg.querySelectorAll('dees-input-text[labelPosition="left"]');
+      if (leftLabelInputs.length > 0) {
+        console.log(`${leftLabelInputs.length} inputs have left-aligned labels for inline layout`);
+      }
+    }}>
       <dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
         <dees-input-text 
           .label=${'Label on Top (Default)'} 
@@ -136,7 +198,41 @@ export const demoFunc = () => html`
           ></dees-input-text>
         </div>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate validation states
+      const requiredInput = elementArg.querySelector('dees-input-text[required]') as DeesInputText;
+      const disabledInput = elementArg.querySelector('dees-input-text[disabled]') as DeesInputText;
+      const errorInput = elementArg.querySelector('dees-input-text[validationState="invalid"]') as DeesInputText;
       
+      if (requiredInput) {
+        // Show validation on blur for empty required field
+        requiredInput.addEventListener('blur', () => {
+          if (!requiredInput.getValue()) {
+            console.log('Required field is empty!');
+          }
+        });
+      }
+      
+      if (disabledInput) {
+        console.log('Disabled input cannot be edited');
+      }
+      
+      if (errorInput) {
+        console.log('Error input shows validation message:', errorInput.validationText);
+        
+        // Simulate fixing the error
+        errorInput.addEventListener('changeSubject', () => {
+          const value = errorInput.getValue();
+          if (value.includes('@') && value.includes('.')) {
+            errorInput.validationState = 'valid';
+            errorInput.validationText = '';
+            console.log('Email validation passed!');
+          }
+        });
+      }
+    }}>
       <dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
         <dees-input-text 
           .label=${'Required Field'} 
@@ -157,7 +253,31 @@ export const demoFunc = () => html`
           .validationState=${'invalid'}
         ></dees-input-text>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track password visibility toggles
+      const passwordInputs = elementArg.querySelectorAll('dees-input-text[isPasswordBool]');
       
+      passwordInputs.forEach((input: DeesInputText) => {
+        // Monitor for toggle button clicks within shadow DOM
+        const checkToggle = () => {
+          const inputEl = input.shadowRoot?.querySelector('input');
+          if (inputEl) {
+            console.log(`Password field "${input.label}" type:`, inputEl.type);
+          }
+        };
+        
+        // Use MutationObserver to detect changes
+        if (input.shadowRoot) {
+          const observer = new MutationObserver(checkToggle);
+          const inputEl = input.shadowRoot.querySelector('input');
+          if (inputEl) {
+            observer.observe(inputEl, { attributes: true, attributeFilter: ['type'] });
+          }
+        }
+      });
+    }}>
       <dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
         <dees-input-text 
           .label=${'Password with Toggle'} 
@@ -173,23 +293,47 @@ export const demoFunc = () => html`
           .description=${'Keep this key secure and never share it'}
         ></dees-input-text>
       </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Set up interactive example
+      const dynamicInput = elementArg.querySelector('dees-input-text');
+      const output = elementArg.querySelector('#text-input-output');
       
+      if (dynamicInput && output) {
+        // Update output on every change
+        dynamicInput.addEventListener('changeSubject', (event: CustomEvent) => {
+          const value = (event.detail as DeesInputText).getValue();
+          output.textContent = `Current value: "${value}"`;
+        });
+        
+        // Also track focus/blur events
+        dynamicInput.addEventListener('focus', () => {
+          console.log('Input focused');
+        });
+        
+        dynamicInput.addEventListener('blur', () => {
+          console.log('Input blurred');
+        });
+        
+        // Track keypress events
+        let keypressCount = 0;
+        dynamicInput.addEventListener('keydown', () => {
+          keypressCount++;
+          console.log(`Keypress count: ${keypressCount}`);
+        });
+      }
+    }}>
       <dees-panel .title=${'Interactive Example'} .subtitle=${'Try typing in the inputs to see real-time value changes'}>
         <dees-input-text 
           .label=${'Dynamic Input'} 
           .placeholder=${'Type something here...'}
-          @changeSubject=${(event) => {
-            const output = document.querySelector('#text-input-output');
-            if (output && event.detail) {
-              output.textContent = `Current value: "${event.detail.getValue()}"`;
-            }
-          }}
         ></dees-input-text>
         
         <div class="interactive-section">
           <div id="text-input-output" class="output-text">Current value: ""</div>
         </div>
       </dees-panel>
-    </div>
-  </dees-demowrapper>
+    </dees-demowrapper>
+  </div>
 `;

ts_web/elements/dees-input-text.ts

@@ -1,6 +1,7 @@
 import * as colors from './00colors.js';
 import { DeesInputBase } from './dees-input-base.js';
 import { demoFunc } from './dees-input-text.demo.js';
+import { cssGeistFontFamily, cssMonoFontFamily } from './00fonts.js';
 
 import {
   customElement,
@@ -65,7 +66,7 @@ export class DeesInputText extends DeesInputBase {
       :host {
         position: relative;
         z-index: auto;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-family: ${cssGeistFontFamily};
       }
 
       .maincontainer {
@@ -80,18 +81,18 @@ export class DeesInputText extends DeesInputBase {
         padding: 0 12px;
         font-size: 14px;
         line-height: 40px;
-        background: transparent;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
         border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         border-radius: 6px;
-        transition: all 0.15s ease;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         outline: none;
         cursor: text;
         font-family: inherit;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
       }
 
       input::placeholder {
-        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
       }
 
       input:hover:not(:disabled):not(:focus) {
@@ -100,14 +101,14 @@ export class DeesInputText extends DeesInputBase {
 
       input:focus {
         outline: none;
-        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
       }
 
       input:disabled {
         background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
         border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
         cursor: not-allowed;
         opacity: 0.5;
       }
@@ -166,7 +167,8 @@ export class DeesInputText extends DeesInputBase {
       }
 
       :host([validation-state="invalid"]) input:focus {
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.1)', 'hsl(0 72.2% 50.6% / 0.1)')};
+        border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.05)', 'hsl(0 72.2% 50.6% / 0.05)')};
       }
 
       /* Warning state for input */
@@ -175,7 +177,8 @@ export class DeesInputText extends DeesInputBase {
       }
 
       :host([validation-state="warn"]) input:focus {
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(25 95% 53% / 0.1)', 'hsl(25 95% 63% / 0.1)')};
+        border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(25 95% 53% / 0.05)', 'hsl(25 95% 63% / 0.05)')};
       }
 
       /* Valid state for input */
@@ -184,7 +187,8 @@ export class DeesInputText extends DeesInputBase {
       }
 
       :host([validation-state="valid"]) input:focus {
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.1)')};
+        border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.05)', 'hsl(142.1 70.6% 45.3% / 0.05)')};
       }
     `,
   ];
@@ -193,7 +197,7 @@ export class DeesInputText extends DeesInputBase {
     return html`
       <style>
         input {
-          font-family: ${this.isPasswordBool ? 'SF Mono, Monaco, Consolas, Liberation Mono, Courier New, monospace' : 'inherit'};
+          font-family: ${this.isPasswordBool ? cssMonoFontFamily : 'inherit'};
           letter-spacing: ${this.isPasswordBool ? '0.5px' : 'normal'};
           padding-right: ${this.isPasswordBool ? '48px' : '12px'};
         }
@@ -227,7 +231,7 @@ export class DeesInputText extends DeesInputBase {
           ${this.isPasswordBool
             ? html`
                 <div class="showPassword" @click=${this.togglePasswordView}>
-                  <dees-icon .iconName=${this.showPasswordBool ? 'lucideEye' : 'lucideEyeOff'}></dees-icon>
+                  <dees-icon .icon=${this.showPasswordBool ? 'lucide:eye' : 'lucide:eye-off'}></dees-icon>
                 </div>
               `
             : html``}

ts_web/elements/dees-label.ts

@@ -82,7 +82,7 @@ export class DeesLabel extends DeesElement {
               ${this.required ? html`<span class="required">*</span>` : ''}
               ${this.description
                 ? html`
-                    <dees-icon .iconName=${'lucideInfo'}></dees-icon>
+                    <dees-icon .icon=${'lucide:info'}></dees-icon>
                     <dees-speechbubble .text=${this.description}></dees-speechbubble>
                   `
                 : html``}

ts_web/elements/dees-mobilenavigation.demo.ts

@@ -0,0 +1,215 @@
+import { html, css } from '@design.estate/dees-element';
+import './dees-button.js';
+import './dees-panel.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 800px;
+          margin: 0 auto;
+        }
+
+        .demo-buttons {
+          display: flex;
+          gap: 16px;
+          flex-wrap: wrap;
+        }
+      `}
+    </style>
+
+    <div class="demo-container">
+      <dees-panel .title=${'Mobile Navigation'} .subtitle=${'Shadcn-style slide-in navigation menu with icons'}>
+        <div class="demo-buttons">
+          <dees-button 
+            @click=${async () => {
+              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
+              DeesMobilenavigation.createAndShow([
+                {
+                  name: 'Dashboard',
+                  iconName: 'lucide:layout-dashboard',
+                  action: async (nav) => {
+                    console.log('Navigate to dashboard');
+                  },
+                },
+                {
+                  name: 'Profile',
+                  iconName: 'lucide:user',
+                  action: async (nav) => {
+                    console.log('Navigate to profile');
+                  },
+                },
+                {
+                  name: 'Messages',
+                  iconName: 'lucide:mail',
+                  action: async (nav) => {
+                    console.log('Navigate to messages');
+                  },
+                },
+                {
+                  name: 'Settings',
+                  iconName: 'lucide:settings',
+                  action: async (nav) => {
+                    console.log('Navigate to settings');
+                  },
+                },
+                { divider: true } as any,
+                {
+                  name: 'Help & Support',
+                  iconName: 'lucide:help-circle',
+                  action: async (nav) => {
+                    console.log('Show help');
+                  },
+                },
+                {
+                  name: 'Sign Out',
+                  iconName: 'lucide:log-out',
+                  action: async (nav) => {
+                    console.log('Sign out');
+                  },
+                },
+              ]);
+            }}
+          >
+            Open Navigation Menu
+          </dees-button>
+
+          <dees-button 
+            type="secondary"
+            @click=${async () => {
+              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
+              const nav = await DeesMobilenavigation.createAndShow([
+                {
+                  name: 'New Document',
+                  iconName: 'lucide:file-plus',
+                  action: async () => console.log('New document'),
+                },
+                {
+                  name: 'Upload File',
+                  iconName: 'lucide:upload',
+                  action: async () => console.log('Upload file'),
+                },
+                {
+                  name: 'Download',
+                  iconName: 'lucide:download',
+                  action: async () => console.log('Download'),
+                },
+                { divider: true } as any,
+                {
+                  name: 'Share',
+                  iconName: 'lucide:share-2',
+                  action: async () => console.log('Share'),
+                },
+                {
+                  name: 'Export',
+                  iconName: 'lucide:export',
+                  action: async () => console.log('Export'),
+                },
+              ]);
+              nav.heading = 'File Actions';
+            }}
+          >
+            File Actions Menu
+          </dees-button>
+
+          <dees-button 
+            type="outline"
+            @click=${async () => {
+              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
+              const nav = await DeesMobilenavigation.createAndShow([
+                {
+                  name: 'Cut',
+                  iconName: 'lucide:scissors',
+                  action: async () => console.log('Cut'),
+                },
+                {
+                  name: 'Copy',
+                  iconName: 'lucide:copy',
+                  action: async () => console.log('Copy'),
+                },
+                {
+                  name: 'Paste',
+                  iconName: 'lucide:clipboard',
+                  action: async () => console.log('Paste'),
+                },
+                { divider: true } as any,
+                {
+                  name: 'Select All',
+                  iconName: 'lucide:square-check',
+                  action: async () => console.log('Select all'),
+                },
+                {
+                  name: 'Find',
+                  iconName: 'lucide:search',
+                  action: async () => console.log('Find'),
+                },
+                {
+                  name: 'Replace',
+                  iconName: 'lucide:replace',
+                  action: async () => console.log('Replace'),
+                },
+              ]);
+              nav.heading = 'Edit';
+            }}
+          >
+            Edit Menu
+          </dees-button>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Features'} .subtitle=${'Modern shadcn-inspired mobile navigation'}>
+        <div style="padding: 16px;">
+          <ul style="margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px;">
+            <li>Smooth slide-in animation from the right</li>
+            <li>Z-index registry integration for proper stacking</li>
+            <li>Backdrop blur with window layer</li>
+            <li>Support for icons using Lucide icons</li>
+            <li>Menu item dividers for grouping</li>
+            <li>Staggered animation for menu items</li>
+            <li>Responsive design that adapts to mobile screens</li>
+            <li>Clean, modern shadcn-style aesthetics</li>
+            <li>Dark/light theme support</li>
+            <li>Singleton pattern ensures only one instance</li>
+          </ul>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Code Example'} .subtitle=${'How to use the mobile navigation'}>
+        <div style="padding: 16px; background: var(--background-secondary); border-radius: 8px;">
+          <pre style="margin: 0; font-family: monospace; font-size: 13px; line-height: 1.6;"><code>import { DeesMobilenavigation } from '@design.estate/dees-catalog';
+
+DeesMobilenavigation.createAndShow([
+  {
+    name: 'Dashboard',
+    iconName: 'lucide:layout-dashboard',
+    action: async (nav) => {
+      console.log('Navigate to dashboard');
+    },
+  },
+  {
+    name: 'Settings',
+    iconName: 'lucide:settings',
+    action: async (nav) => {
+      console.log('Navigate to settings');
+    },
+  },
+  { divider: true },
+  {
+    name: 'Sign Out',
+    iconName: 'lucide:log-out',
+    action: async (nav) => {
+      console.log('Sign out');
+    },
+  },
+]);</code></pre>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

ts_web/elements/dees-mobilenavigation.ts

@@ -1,5 +1,6 @@
 import * as plugins from './00plugins.js';
-import { zIndexLayers } from './00zindex.js';
+import { zIndexRegistry } from './00zindex.js';
+import { cssGeistFontFamily } from './00fonts.js';
 import {
   cssManager,
   css,
@@ -9,8 +10,10 @@ import {
   domtools,
   html,
   property,
+  state,
 } from '@design.estate/dees-element';
 import { DeesWindowLayer } from './dees-windowlayer.js';
+import './dees-icon.js';
 
 @customElement('dees-mobilenavigation')
 export class DeesMobilenavigation extends DeesElement {
@@ -19,14 +22,48 @@ export class DeesMobilenavigation extends DeesElement {
     <dees-button @click=${() => {
       DeesMobilenavigation.createAndShow([
         {
-          name: 'Test',
+          name: 'Dashboard',
+          iconName: 'lucide:layout-dashboard',
           action: async (deesMobileNav) => {
-            alert('test');
+            console.log('Navigate to dashboard');
+            return null;
+          },
+        },
+        {
+          name: 'Profile',
+          iconName: 'lucide:user',
+          action: async (deesMobileNav) => {
+            console.log('Navigate to profile');
+            return null;
+          },
+        },
+        {
+          name: 'Settings',
+          iconName: 'lucide:settings',
+          action: async (deesMobileNav) => {
+            console.log('Navigate to settings');
+            return null;
+          },
+        },
+        { divider: true } as any,
+        {
+          name: 'Help',
+          iconName: 'lucide:help-circle',
+          action: async (deesMobileNav) => {
+            console.log('Show help');
+            return null;
+          },
+        },
+        {
+          name: 'Sign Out',
+          iconName: 'lucide:log-out',
+          action: async (deesMobileNav) => {
+            console.log('Sign out');
             return null;
           },
         },
       ]);
-    }}></dees-button>
+    }}>Open Mobile Navigation</dees-button>
   `;
 
   private static singletonRef: DeesMobilenavigation;
@@ -44,15 +81,18 @@ export class DeesMobilenavigation extends DeesElement {
 
   // INSTANCE
   @property({
-    type: Array,
+    type: String,
   })
-  public heading: string = `MENU`;
+  public heading: string = `Menu`;
 
   @property({
     type: Array,
   })
   public menuItems: plugins.tsclass.website.IMenuItem[] = [];
 
+  @state()
+  private mobileNavZIndex: number = 1000;
+
   readyDeferred: plugins.smartpromise.Deferred<any> = domtools.plugins.smartpromise.defer();
 
   constructor() {
@@ -74,25 +114,32 @@ export class DeesMobilenavigation extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
+        font-family: ${cssGeistFontFamily};
       }
 
       .main {
-        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         will-change: transform;
         position: fixed;
         height: 100vh;
-        min-width: 280px;
-        transform: translateX(200px);
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        z-index: ${zIndexLayers.fixed.mobileNav};
+        width: 100%;
+        max-width: 320px;
+        transform: translateX(100%);
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        z-index: var(--z-index);
         opacity: 0;
-        padding: 16px 32px;
         right: 0px;
         top: 0px;
         bottom: 0px;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
-        border-left: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222')};
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         pointer-events: none;
+        box-shadow: ${cssManager.bdTheme(
+          '-20px 0 25px -5px rgba(0, 0, 0, 0.1), -10px 0 10px -5px rgba(0, 0, 0, 0.04)',
+          '-20px 0 25px -5px rgba(0, 0, 0, 0.3), -10px 0 10px -5px rgba(0, 0, 0, 0.2)'
+        )};
+        display: flex;
+        flex-direction: column;
       }
 
       .main.show {
@@ -101,47 +148,151 @@ export class DeesMobilenavigation extends DeesElement {
         opacity: 1;
       }
 
-      .menuItem {
-        text-align: left;
-        padding: 8px;
-        margin-left: -8px;
-        margin-right: -8px;
-        border-radius: 3px;
-      }
-      .menuItem:hover {
-        background: ${cssManager.bdTheme('#CCC', '#333')};;
+      .header {
+        padding: 24px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
       }
 
       .heading {
-        text-align: left;
-        font-size: 24px;
-        padding: 8px 0px;
-        font-family: 'Geist Sans', sans-serif;
-        font-weight: 300;
-        border-bottom: 1px dashed #444;
-        margin-top: 16px;
-        margin-bottom: 16px;
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        margin: 0;
+      }
+
+      .menu-container {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+      }
+
+      .menuItem {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        margin-bottom: 2px;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        position: relative;
+        user-select: none;
+      }
+
+      .menuItem:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .menuItem:active {
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        transform: scale(0.98);
+      }
+
+      .menuItem dees-icon {
+        flex-shrink: 0;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        transition: color 0.15s ease;
+      }
+
+      .menuItem:hover dees-icon {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .menuItem-text {
+        flex: 1;
+        letter-spacing: -0.01em;
+      }
+
+      .menuItem-divider {
+        height: 1px;
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        margin: 8px 16px;
+      }
+
+      /* Mobile responsiveness */
+      @media (max-width: 400px) {
+        .main {
+          max-width: 100vw;
+          width: 85vw;
+        }
+      }
+
+      /* Animation for menu items */
+      @keyframes slideInRight {
+        from {
+          opacity: 0;
+          transform: translateX(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      .main.show .menuItem {
+        animation: slideInRight 0.3s ease-out forwards;
+        animation-delay: calc(var(--item-index, 0) * 0.05s);
+        opacity: 0;
+      }
+
+      /* Scrollbar styling */
+      .menu-container::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .menu-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .menu-container::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        border-radius: 3px;
+      }
+
+      .menu-container::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('#d1d5db', '#52525b')};
       }
     `,
   ];
 
   public render() {
     return html`
+      <style>
+        .main {
+          --z-index: ${this.mobileNavZIndex};
+        }
+      </style>
       <div class="main">
-        <div class="heading">${this.heading}</div>
-        ${this.menuItems.map((menuItem) => {
-          return html`
-            <div
-              class="menuItem"
-              @click="${() => {
-                this.hide();
-                menuItem.action(this);
-              }}"
-            >
-              ${menuItem.name}
-            </div>
-          `;
-        })}
+        <div class="header">
+          <h2 class="heading">${this.heading}</h2>
+        </div>
+        <div class="menu-container">
+          ${this.menuItems.map((menuItem, index) => {
+            if ('divider' in menuItem && menuItem.divider) {
+              return html`<div class="menuItem-divider"></div>`;
+            }
+            return html`
+              <div
+                class="menuItem"
+                style="--item-index: ${index}"
+                @click="${() => {
+                  this.hide();
+                  menuItem.action(this);
+                }}"
+              >
+                ${menuItem.iconName ? html`
+                  <dees-icon .icon=${menuItem.iconName} size="20"></dees-icon>
+                ` : ''}
+                <span class="menuItem-text">${menuItem.name}</span>
+              </div>
+            `;
+          })}
+        </div>
       </div>
     `;
   }
@@ -154,18 +305,25 @@ export class DeesMobilenavigation extends DeesElement {
   public async show() {
     const domtools = await this.domtoolsPromise;
     const main = this.shadowRoot.querySelector('.main');
+    
+    // Create window layer first (it will get its own z-index)
     if (!this.windowLayer) {
-      this.windowLayer = new DeesWindowLayer();
-      this.windowLayer.options.blur = true;
+      this.windowLayer = await DeesWindowLayer.createAndShow({
+        blur: true,
+      });
       this.windowLayer.addEventListener('click', () => {
         this.hide();
       });
+    } else {
+      document.body.append(this.windowLayer);
+      await this.windowLayer.show();
     }
-    document.body.append(this.windowLayer);
-    await domtools.convenience.smartdelay.delayFor(0);
-    this.windowLayer.show();
+    
+    // Get z-index for mobile nav (will be above window layer)
+    this.mobileNavZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.mobileNavZIndex);
 
-    await domtools.convenience.smartdelay.delayFor(0);
+    await domtools.convenience.smartdelay.delayFor(10);
     main.classList.add('show');
   }
 
@@ -176,10 +334,23 @@ export class DeesMobilenavigation extends DeesElement {
     const domtools = await this.domtoolsPromise;
     const main = this.shadowRoot.querySelector('.main');
     main.classList.remove('show');
-    this.windowLayer.hide();
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
+    
+    if (this.windowLayer) {
+      await this.windowLayer.destroy();
+    }
   }
 
   async disconnectedCallback() {
-    document.body.removeChild(this.windowLayer);
+    super.disconnectedCallback();
+    
+    // Cleanup
+    zIndexRegistry.unregister(this);
+    
+    if (this.windowLayer) {
+      await this.windowLayer.destroy();
+    }
   }
 }

ts_web/elements/dees-modal.ts

@@ -1,6 +1,7 @@
 import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
 import { zIndexLayers, zIndexRegistry } from './00zindex.js';
+import { cssGeistFontFamily } from './00fonts.js';
 
 import { demoFunc } from './dees-modal.demo.js';
 import {
@@ -117,7 +118,7 @@ export class DeesModal extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         color: ${cssManager.bdTheme('#333', '#fff')};
         will-change: transform;
       }
@@ -138,12 +139,12 @@ export class DeesModal extends DeesElement {
         opacity: 0;
         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;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border-radius: 6px;
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        transition: all 0.2s ease;
         overflow: hidden;
-        box-shadow: ${cssManager.bdTheme('0px 2px 10px rgba(0, 0, 0, 0.1)', '0px 2px 5px rgba(0, 0, 0, 0.5)')};
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
         margin: 20px;
         display: flex;
         flex-direction: column;
@@ -192,6 +193,7 @@ export class DeesModal extends DeesElement {
           max-height: 100vh !important;
           margin: 0;
           border-radius: 0;
+          border: none;
         }
       }
 
@@ -208,12 +210,12 @@ export class DeesModal extends DeesElement {
       .modal .heading {
         height: 40px;
         min-height: 40px;
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         position: relative;
         flex-shrink: 0;
       }
@@ -231,23 +233,23 @@ export class DeesModal extends DeesElement {
       .modal .heading .header-button {
         width: 28px;
         height: 28px;
-        border-radius: 6px;
+        border-radius: 4px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        transition: all 0.2s;
+        transition: all 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme('#666', '#999')};
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
       }
 
       .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')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .modal .heading .header-button:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)')};
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
       }
 
       .modal .heading .header-button dees-icon {
@@ -263,6 +265,7 @@ export class DeesModal extends DeesElement {
         font-size: 14px;
         line-height: 40px;
         padding: 0 40px;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .modal .content {
@@ -275,7 +278,7 @@ export class DeesModal extends DeesElement {
       .modal .bottomButtons {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         justify-content: flex-end;
         gap: 8px;
         padding: 8px;
@@ -284,39 +287,43 @@ export class DeesModal extends DeesElement {
 
       .modal .bottomButtons .bottomButton {
         padding: 8px 16px;
-        border-radius: 6px;
+        border-radius: 4px;
         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)')};
+        transition: all 0.15s ease;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         white-space: nowrap;
       }
 
       .modal .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
-        color: #ffffff;
+        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
+        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
       }
       .modal .bottomButtons .bottomButton:active {
-        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
-        color: #ffffff;
+        background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
       }
       .modal .bottomButtons .bottomButton:last-child {
         border-right: none;
       }
 
       .modal .bottomButtons .bottomButton.primary {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
         color: #ffffff;
       }
       .modal .bottomButtons .bottomButton.primary:hover {
-        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
       }
       .modal .bottomButtons .bottomButton.primary:active {
-        background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
+        background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
+        border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
       }
     `,
   ];

ts_web/elements/dees-shopping-productcard.ts

@@ -252,7 +252,7 @@ export class DeesShoppingProductcard extends DeesElement {
           ${imageUrl ? html`
             <img src="${imageUrl}" alt="${name}">
           ` : html`
-            <dees-icon .iconName=${iconName}></dees-icon>
+            <dees-icon .icon=${iconName}></dees-icon>
           `}
           ${this.selectable ? html`
             <div 
@@ -262,7 +262,7 @@ export class DeesShoppingProductcard extends DeesElement {
                 this.handleSelectionToggle();
               }}
             >
-              <dees-icon .iconName=${'lucide:check'}></dees-icon>
+              <dees-icon .icon=${'lucide:check'}></dees-icon>
             </div>
           ` : ''}
         </div>
@@ -275,7 +275,7 @@ export class DeesShoppingProductcard extends DeesElement {
             <div class="product-description">${description}</div>
           ` : ''}
           <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
-            <dees-icon .iconName=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
+            <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
             ${stockText}
           </div>
           <div class="product-footer">

ts_web/elements/dees-spinner.ts

@@ -120,9 +120,9 @@ export class DeesSpinner extends DeesElement {
       <div class="${this.status}" id="loading">
         ${(() => {
           if (this.status === 'success') {
-            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'circleCheck' as any}></dees-icon>`;
+            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .icon=${'fa:circle-check'}></dees-icon>`;
           } else if (this.status === 'error') {
-            return  html`<dees-icon .iconFA=${'circleXmark' as any}></dees-icon>`;
+            return  html`<dees-icon .icon=${'fa:circle-xmark'}></dees-icon>`;
           }
         })()}
       </div>

ts_web/elements/dees-statsgrid.ts

@@ -1,5 +1,6 @@
 import { demoFunc } from './dees-statsgrid.demo.js';
 import * as plugins from './00plugins.js';
+import { cssGeistFontFamily } from './00fonts.js';
 import {
   customElement,
   html,
@@ -79,6 +80,7 @@ export class DeesStatsGrid extends DeesElement {
       :host {
         display: block;
         width: 100%;
+        font-family: ${cssGeistFontFamily};
       }
 
       /* CSS Variables for consistent spacing and sizing */
@@ -194,7 +196,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--value-font-size);
         font-weight: 600;
         color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
-        line-height: 1;
+        line-height: 1.1;
         display: flex;
         align-items: baseline;
         gap: 4px;
@@ -251,10 +253,10 @@ export class DeesStatsGrid extends DeesElement {
 
       .gauge-text {
         fill: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        font-family: ${cssGeistFontFamily};
         font-size: var(--value-font-size);
         font-weight: 600;
         text-anchor: middle;
-        dominant-baseline: alphabetic;
         letter-spacing: -0.025em;
       }
       
@@ -262,6 +264,7 @@ export class DeesStatsGrid extends DeesElement {
         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;
+        font-family: ${cssGeistFontFamily};
       }
 
       /* Percentage Styles */
@@ -274,6 +277,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--value-font-size);
         font-weight: 600;
         color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
         letter-spacing: -0.025em;
         margin-bottom: 8px;
       }
@@ -311,6 +315,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--value-font-size);
         font-weight: 600;
         color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
         letter-spacing: -0.025em;
       }
 
@@ -358,6 +363,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--value-font-size);
         font-weight: 600;
         color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
         letter-spacing: -0.025em;
       }
 
@@ -385,7 +391,7 @@ export class DeesStatsGrid extends DeesElement {
                 type="outline"
                 size="sm"
               >
-                ${action.iconName ? html`<dees-icon .iconFA=${action.iconName} size="small"></dees-icon>` : ''}
+                ${action.iconName ? html`<dees-icon .icon=${action.iconName} size="small"></dees-icon>` : ''}
                 ${action.name}
               </dees-button>
             `)}
@@ -401,7 +407,7 @@ export class DeesStatsGrid extends DeesElement {
         <dees-contextmenu
           .x=${this.contextMenuPosition.x}
           .y=${this.contextMenuPosition.y}
-          .menuItems=${this.contextMenuActions}
+          .menuItems=${this.contextMenuActions as any}
           @clicked=${() => this.contextMenuVisible = false}
         ></dees-contextmenu>
       ` : ''}
@@ -421,7 +427,7 @@ export class DeesStatsGrid extends DeesElement {
         <div class="tile-header">
           <h3 class="tile-title">${tile.title}</h3>
           ${tile.icon ? html`
-            <dees-icon class="tile-icon" .iconFA=${tile.icon} size="small"></dees-icon>
+            <dees-icon class="tile-icon" .icon=${tile.icon} size="small"></dees-icon>
           ` : ''}
         </div>
         
@@ -521,8 +527,8 @@ export class DeesStatsGrid extends DeesElement {
               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 class="gauge-text" x="${centerX}" y="${centerY - 8}" dominant-baseline="middle">
+              <tspan>${value}</tspan>${tile.unit ? html`<tspan class="gauge-unit" dx="2" dy="0">${tile.unit}</tspan>` : ''}
             </text>
           </svg>
         </div>

ts_web/elements/dees-table.demo.ts

@@ -1,6 +1,6 @@
 import { type ITableAction } from './dees-table.js';
 import * as plugins from './00plugins.js';
-import { html } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 
 interface ITableDemoData {
   date: string;
@@ -10,120 +10,423 @@ interface ITableDemoData {
 
 export const demoFunc = () => html`
   <style>
-    .demoWrapper {
-      box-sizing: border-box;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      padding: 20px;
-      background: #000000;
-    }
+    ${css`
+      .demoWrapper {
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 32px;
+        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 5%)')};
+        overflow-y: auto;
+      }
+      .demo-container {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      .demo-section {
+        margin-bottom: 48px;
+      }
+      .demo-title {
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+      .demo-description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        margin-bottom: 24px;
+      }
+      .theme-toggle {
+        position: fixed;
+        top: 16px;
+        right: 16px;
+        z-index: 1000;
+      }
+    `}
   </style>
   <div class="demoWrapper">
-    <dees-table
-      heading1="Current Account Statement"
-      heading2="Bunq - Payment Account 2 - April 2021"
-      .editableFields="${['description']}"
-      .data=${[
-        {
-          date: '2021-04-01',
-          amount: '2464.65 €',
-          description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
-        },
-        {
-          date: '2021-04-02',
-          amount: '165.65 €',
-          description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
-        },
-        {
-          date: '2021-04-03',
-          amount: '2999,00 €',
-          description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
-        },
-        {
-          date: '2021-04-01',
-          amount: '2464.65 €',
-          description: 'Office-Supplies - STAPLES BREMEN',
-        },
-        {
-          date: '2021-04-01',
-          amount: '2464.65 €',
-          description: 'Office-Supplies - STAPLES BREMEN',
-        },
-      ]}
-      dataName="transactions"
-      .dataActions="${[
-        {
-          name: 'upload',
-          iconName: 'bell',
-          useTableBehaviour: 'upload',
-          type: ['inRow'],
-          actionFunc: async (optionsArg) => {
-            alert(optionsArg.item.amount);
-          },
-        },
-        {
-          name: 'visibility',
-          iconName: 'copy',
-          type: ['inRow'],
-          useTableBehaviour: 'preview',
-          actionFunc: async (itemArg: any) => {},
-        },
-        {
-          name: 'create new',
-          iconName: 'instagram',
-          type: ['header'],
-          useTableBehaviour: 'preview',
-          actionFunc: async (itemArg: any) => {},
-        },
-        {
-          name: 'to gallery',
-          iconName: 'message',
-          type: ['footer'],
-          useTableBehaviour: 'preview',
-          actionFunc: async (itemArg: any) => {},
-        },
-        {
-          name: 'copy',
-          iconName: 'copySolid',
-          type: ['contextmenu', 'inRow'],
-          action: async () => {
-            return null;
-          },
-        },
-        {
-          name: 'edit (from demo)',
-          iconName: 'penToSquare',
-          type: ['contextmenu'],
-          action: async () => {
-            return null;
-          },
-        },
-        {
-          name: 'paste',
-          iconName: 'pasteSolid',
-          type: ['contextmenu'],
-          action: async () => {
-            return null;
-          },
-        },
-        {
-          name: 'preview',
-          type: ['doubleClick', 'contextmenu'],
-          iconName: 'eye',
-          actionFunc: async (itemArg) => {
-            alert(itemArg.item.amount);
-            return null;
-          },
-        }
-      ] as (ITableAction<ITableDemoData>)[] as any}"
-      .displayFunction=${(itemArg) => {
-        return {
-          ...itemArg,
-          onlyDisplayProp: 'onlyDisplay',
-        };
-      }}
-      >This is a slotted Text</dees-table
-    >
+    <dees-button class="theme-toggle" @click=${() => {
+      document.body.classList.toggle('bright');
+      document.body.classList.toggle('dark');
+    }}>Toggle Theme</dees-button>
+    
+    <div class="demo-container">
+      <div class="demo-section">
+        <h2 class="demo-title">Basic Table with Actions</h2>
+        <p class="demo-description">A standard table with row actions, editable fields, and context menu support. Double-click on descriptions to edit. Grid lines are enabled by default.</p>
+        <dees-table
+          heading1="Current Account Statement"
+          heading2="Bunq - Payment Account 2 - April 2021"
+          .editableFields="${['description']}"
+          .data=${[
+            {
+              date: '2021-04-01',
+              amount: '2464.65 €',
+              description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
+            },
+            {
+              date: '2021-04-02',
+              amount: '165.65 €',
+              description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
+            },
+            {
+              date: '2021-04-03',
+              amount: '2999,00 €',
+              description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
+            },
+            {
+              date: '2021-04-01',
+              amount: '2464.65 €',
+              description: 'Office-Supplies - STAPLES BREMEN',
+            },
+            {
+              date: '2021-04-01',
+              amount: '2464.65 €',
+              description: 'Office-Supplies - STAPLES BREMEN',
+            },
+          ]}
+          dataName="transactions"
+          .dataActions="${[
+            {
+              name: 'upload',
+              iconName: 'bell',
+              useTableBehaviour: 'upload',
+              type: ['inRow'],
+              actionFunc: async (optionsArg) => {
+                alert(optionsArg.item.amount);
+              },
+            },
+            {
+              name: 'visibility',
+              iconName: 'copy',
+              type: ['inRow'],
+              useTableBehaviour: 'preview',
+              actionFunc: async (itemArg: any) => {},
+            },
+            {
+              name: 'create new',
+              iconName: 'instagram',
+              type: ['header'],
+              useTableBehaviour: 'preview',
+              actionFunc: async (itemArg: any) => {},
+            },
+            {
+              name: 'to gallery',
+              iconName: 'message',
+              type: ['footer'],
+              useTableBehaviour: 'preview',
+              actionFunc: async (itemArg: any) => {},
+            },
+            {
+              name: 'copy',
+              iconName: 'copySolid',
+              type: ['contextmenu', 'inRow'],
+              action: async () => {
+                return null;
+              },
+            },
+            {
+              name: 'edit (from demo)',
+              iconName: 'penToSquare',
+              type: ['contextmenu'],
+              action: async () => {
+                return null;
+              },
+            },
+            {
+              name: 'paste',
+              iconName: 'pasteSolid',
+              type: ['contextmenu'],
+              action: async () => {
+                return null;
+              },
+            },
+            {
+              name: 'preview',
+              type: ['doubleClick', 'contextmenu'],
+              iconName: 'eye',
+              actionFunc: async (itemArg) => {
+                alert(itemArg.item.amount);
+                return null;
+              },
+            }
+          ] as ITableAction[]}"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Table with Vertical Lines</h2>
+        <p class="demo-description">Enhanced column separation for better data tracking.</p>
+        <dees-table
+          heading1="Product Inventory"
+          heading2="Current stock levels across warehouses"
+          .showVerticalLines=${true}
+          .data=${[
+            {
+              product: 'MacBook Pro 16"',
+              warehouse_a: '45',
+              warehouse_b: '32',
+              warehouse_c: '28',
+              total: '105',
+              status: '✓ In Stock'
+            },
+            {
+              product: 'iPhone 15 Pro',
+              warehouse_a: '120',
+              warehouse_b: '89',
+              warehouse_c: '156',
+              total: '365',
+              status: '✓ In Stock'
+            },
+            {
+              product: 'AirPods Pro',
+              warehouse_a: '0',
+              warehouse_b: '12',
+              warehouse_c: '5',
+              total: '17',
+              status: '⚠ Low Stock'
+            },
+            {
+              product: 'iPad Air',
+              warehouse_a: '23',
+              warehouse_b: '45',
+              warehouse_c: '67',
+              total: '135',
+              status: '✓ In Stock'
+            }
+          ]}
+          dataName="products"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Table with Full Grid</h2>
+        <p class="demo-description">Complete grid lines for maximum readability and structure.</p>
+        <dees-table
+          heading1="Server Monitoring Dashboard"
+          heading2="Real-time metrics across regions"
+          .showGrid=${true}
+          .data=${[
+            {
+              server: 'API-1',
+              region: 'US-East',
+              cpu: '45%',
+              memory: '62%',
+              disk: '78%',
+              latency: '12ms',
+              uptime: '99.9%',
+              status: '🟢 Healthy'
+            },
+            {
+              server: 'API-2',
+              region: 'EU-West',
+              cpu: '38%',
+              memory: '55%',
+              disk: '45%',
+              latency: '25ms',
+              uptime: '99.8%',
+              status: '🟢 Healthy'
+            },
+            {
+              server: 'DB-Master',
+              region: 'US-East',
+              cpu: '72%',
+              memory: '81%',
+              disk: '92%',
+              latency: '8ms',
+              uptime: '100%',
+              status: '🟡 Warning'
+            },
+            {
+              server: 'DB-Replica',
+              region: 'EU-West',
+              cpu: '23%',
+              memory: '34%',
+              disk: '45%',
+              latency: '15ms',
+              uptime: '99.7%',
+              status: '🟢 Healthy'
+            },
+            {
+              server: 'Cache-1',
+              region: 'AP-South',
+              cpu: '89%',
+              memory: '92%',
+              disk: '12%',
+              latency: '120ms',
+              uptime: '98.5%',
+              status: '🔴 Critical'
+            }
+          ]}
+          dataName="servers"
+          .dataActions="${[
+            {
+              name: 'SSH Connect',
+              iconName: 'lucide:terminal',
+              type: ['inRow'],
+              actionFunc: async (optionsArg) => {
+                console.log('Connecting to:', optionsArg.item.server);
+              },
+            },
+            {
+              name: 'View Logs',
+              iconName: 'lucide:file-text',
+              type: ['inRow', 'contextmenu'],
+              actionFunc: async (optionsArg) => {
+                console.log('Viewing logs for:', optionsArg.item.server);
+              },
+            },
+            {
+              name: 'Restart Server',
+              iconName: 'lucide:refresh-cw',
+              type: ['contextmenu'],
+              actionFunc: async (optionsArg) => {
+                console.log('Restarting:', optionsArg.item.server);
+              },
+            }
+          ] as ITableAction[]}"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Table with Horizontal Lines Only</h2>
+        <p class="demo-description">Emphasis on row separation without column dividers.</p>
+        <dees-table
+          heading1="Sales Performance"
+          heading2="Top performers this quarter"
+          .showHorizontalLines=${true}
+          .showVerticalLines=${false}
+          .data=${[
+            {
+              salesperson: 'Emily Johnson',
+              region: 'North America',
+              deals_closed: '42',
+              revenue: '$1.2M',
+              quota_achievement: '128%',
+              rating: '⭐⭐⭐⭐⭐'
+            },
+            {
+              salesperson: 'Michael Chen',
+              region: 'Asia Pacific',
+              deals_closed: '38',
+              revenue: '$980K',
+              quota_achievement: '115%',
+              rating: '⭐⭐⭐⭐⭐'
+            },
+            {
+              salesperson: 'Sarah Williams',
+              region: 'Europe',
+              deals_closed: '35',
+              revenue: '$875K',
+              quota_achievement: '108%',
+              rating: '⭐⭐⭐⭐'
+            },
+            {
+              salesperson: 'David Garcia',
+              region: 'Latin America',
+              deals_closed: '31',
+              revenue: '$750K',
+              quota_achievement: '95%',
+              rating: '⭐⭐⭐⭐'
+            }
+          ]}
+          dataName="sales reps"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Simple Table (No Grid)</h2>
+        <p class="demo-description">Clean, minimal design without grid lines. Set showGrid to false to disable the default grid.</p>
+        <dees-table
+          heading1="Team Members"
+          heading2="Engineering Department"
+          .showGrid=${false}
+          .data=${[
+            {
+              name: 'Alice Johnson',
+              role: 'Lead Engineer',
+              email: 'alice@company.com',
+              location: 'San Francisco',
+              joined: '2020-03-15'
+            },
+            {
+              name: 'Bob Smith',
+              role: 'Senior Developer',
+              email: 'bob@company.com',
+              location: 'New York',
+              joined: '2019-07-22'
+            },
+            {
+              name: 'Charlie Davis',
+              role: 'DevOps Engineer',
+              email: 'charlie@company.com',
+              location: 'London',
+              joined: '2021-01-10'
+            },
+            {
+              name: 'Diana Martinez',
+              role: 'Frontend Developer',
+              email: 'diana@company.com',
+              location: 'Barcelona',
+              joined: '2022-05-18'
+            }
+          ]}
+          dataName="team members"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Table with Custom Display Function</h2>
+        <p class="demo-description">Transform data for display using custom formatting.</p>
+        <dees-table
+          heading1="Sales Report"
+          heading2="Q4 2023 Performance"
+          .data=${[
+            {
+              product: 'Enterprise License',
+              units: 45,
+              revenue: 225000,
+              growth: 0.23,
+              forecast: 280000
+            },
+            {
+              product: 'Professional License',
+              units: 128,
+              revenue: 128000,
+              growth: 0.15,
+              forecast: 147000
+            },
+            {
+              product: 'Starter License',
+              units: 342,
+              revenue: 68400,
+              growth: 0.42,
+              forecast: 97000
+            }
+          ]}
+          .displayFunction=${(item) => ({
+            Product: item.product,
+            'Units Sold': item.units.toLocaleString(),
+            Revenue: '$' + item.revenue.toLocaleString(),
+            Growth: (item.growth * 100).toFixed(1) + '%',
+            'Q1 2024 Forecast': '$' + item.forecast.toLocaleString()
+          })}
+          dataName="products"
+        ></dees-table>
+      </div>
+      
+      <div class="demo-section">
+        <h2 class="demo-title">Empty Table State</h2>
+        <p class="demo-description">How the table looks when no data is available.</p>
+        <dees-table
+          heading1="No Data Available"
+          heading2="This table is currently empty"
+          .data=${[]}
+          dataName="items"
+        ></dees-table>
+      </div>
+    </div>
   </div>
-`;
+`;

ts_web/elements/dees-table.ts

@@ -1,6 +1,6 @@
-import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
+import { cssGeistFontFamily } from './00fonts.js';
 import {
   customElement,
   html,
@@ -9,9 +9,6 @@ import {
   type TemplateResult,
   cssManager,
   css,
-  unsafeCSS,
-  type CSSResult,
-  state,
   directives,
 } from '@design.estate/dees-element';
 
@@ -113,7 +110,7 @@ export class DeesTable<T> extends DeesElement {
   get value() {
     return this.data;
   }
-  set value(valueArg) {}
+  set value(_valueArg) {}
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
   // end dees-form compatibility -----------------------------------------
 
@@ -157,6 +154,27 @@ export class DeesTable<T> extends DeesElement {
   })
   public editableFields: string[] = [];
 
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'show-vertical-lines'
+  })
+  public showVerticalLines: boolean = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'show-horizontal-lines'
+  })
+  public showHorizontalLines: boolean = false;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'show-grid'
+  })
+  public showGrid: boolean = true;
+
   public files: File[] = [];
   public fileWeakMap = new WeakMap();
 
@@ -169,238 +187,358 @@ export class DeesTable<T> extends DeesElement {
   public static styles = [
     cssManager.defaultStyles,
     css`
-      .mainbox {
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        font-family: 'Geist Sans', sans-serif;
-        font-weight: 400;
-        font-size: 14px;
-        padding: 16px;
+      :host {
         display: block;
         width: 100%;
-        min-height: 50px;
-        background: ${cssManager.bdTheme('#ffffff', '#222222')};
-        border-radius: 3px;
-        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
-        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
-        overflow-x: auto;
+      }
+
+      .mainbox {
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        font-family: ${cssGeistFontFamily};
+        font-weight: 400;
+        font-size: 14px;
+        display: block;
+        width: 100%;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 8px;
+        overflow: hidden;
         cursor: default;
       }
 
       .header {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
         align-items: center;
-        font-family: 'Geist Sans', sans-serif;
+        padding: 16px 24px;
+        min-height: 64px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       .headingContainer {
+        flex: 1;
       }
 
       .heading {
+        line-height: 1.5;
       }
 
       .heading1 {
+        font-size: 18px;
         font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        letter-spacing: -0.025em;
       }
+      
       .heading2 {
-        opacity: 0.6;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        margin-top: 2px;
       }
 
       .headingSeparation {
-        margin-top: 7px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#444444')};
+        display: none;
       }
 
       .headerActions {
         user-select: none;
         display: flex;
         flex-direction: row;
-        margin-left: auto;
+        gap: 8px;
       }
+      
       .headerAction {
         display: flex;
-        flex-direction: row;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-        margin-left: 16px;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
       }
 
       .headerAction:hover {
-        color: ${cssManager.bdTheme('#555', '#fff')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
 
       .headerAction dees-icon {
-        margin-right: 8px;
+        width: 14px;
+        height: 14px;
       }
 
       .searchGrid {
-        background: ${cssManager.bdTheme('#fff', '#111111')};
         display: grid;
         grid-gap: 16px;
         grid-template-columns: 1fr 200px;
-        margin-top: 16px;
-        padding: 0px 16px;
-        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
-        border-radius: 8px;
+        padding: 16px 24px;
+        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        transition: all 0.2s ease;
       }
 
       .searchGrid.hidden {
         height: 0px;
         opacity: 0;
         overflow: hidden;
-        margin-top: 0px;
+        padding: 0px 24px;
+        border-bottom-width: 0px;
       }
 
-      table,
-      .noDataSet {
-        margin-top: 16px;
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        border-collapse: collapse;
+      table {
         width: 100%;
+        caption-side: bottom;
+        font-size: 14px;
+        border-collapse: separate;
+        border-spacing: 0;
       }
+      
       .noDataSet {
+        padding: 48px 24px;
         text-align: center;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
       }
-      tr {
-        border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
-        text-align: left;
+      
+      thead {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
-      tr:last-child {
+      
+      tbody tr {
+        transition: background-color 0.15s ease;
+        position: relative;
+      }
+      
+      /* Default horizontal lines (bottom border only) */
+      tbody tr {
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
+      tbody tr:last-child {
         border-bottom: none;
-        text-align: left;
       }
-      tr:hover {
+      
+      /* Full horizontal lines when enabled */
+      :host([show-horizontal-lines]) tbody tr {
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
-      tr:hover td {
-        background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
+      
+      :host([show-horizontal-lines]) tbody tr:first-child {
+        border-top: none;
       }
-      tr:first-child:hover {
-        cursor: auto;
+      
+      :host([show-horizontal-lines]) tbody tr:last-child {
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
-      tr:first-child:hover .innerCellContainer {
-        background: none;
+      
+      tbody tr:hover {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
       }
-      tr.selected td {
-        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
+      
+      /* Column hover effect for better traceability */
+      td {
+        position: relative;
+      }
+      
+      td::after {
+        content: '';
+        position: absolute;
+        top: -1000px;
+        bottom: -1000px;
+        left: 0;
+        right: 0;
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.15s ease;
+        z-index: -1;
+      }
+      
+      td:hover::after {
+        opacity: 1;
+      }
+      
+      /* Grid mode - shows both vertical and horizontal lines */
+      :host([show-grid]) th {
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: none;
+        border-top: none;
+      }
+      
+      :host([show-grid]) td {
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: none;
+        border-top: none;
+      }
+      
+      :host([show-grid]) th:first-child,
+      :host([show-grid]) td:first-child {
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
+      :host([show-grid]) tbody tr:first-child td {
+        border-top: none;
+      }
+      
+      tbody tr.selected {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
       }
 
-      tr.hasAttachment td {
-        background: ${cssManager.bdTheme('#0098847c', '#0098847c')};
+      tbody tr.hasAttachment {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 76.2% 36.3% / 0.1)')};
       }
 
       th {
-        text-transform: none;
-        font-family: 'Geist Sans', sans-serif;
+        height: 48px;
+        padding: 12px 24px;
+        text-align: left;
         font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        letter-spacing: -0.01em;
       }
-      th,
+      
+      :host([show-vertical-lines]) th {
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
       td {
-        position: relative;
-        vertical-align: top;
-
-        padding: 0px;
-        border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
+        padding: 12px 24px;
+        vertical-align: middle;
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
       }
-      .innerCellContainer {
-        min-height: 36px;
-        position: relative;
-        height: 100%;
-        width: 100%;
-        padding: 6px 8px;
-        line-height: 24px;
+      
+      :host([show-vertical-lines]) td {
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
-      th:first-child .innerCellContainer,
-      td:first-child .innerCellContainer {
-        padding-left: 0px;
-      }
-      th:last-child .innerCellContainer,
-      td:last-child .innerCellContainer {
-        padding-right: 0px;
+      
+      th:first-child,
+      td:first-child {
+        padding-left: 24px;
       }
+      
       th:last-child,
       td:last-child {
+        padding-right: 24px;
+      }
+      
+      :host([show-vertical-lines]) th:last-child,
+      :host([show-vertical-lines]) td:last-child {
         border-right: none;
       }
+      
+      .innerCellContainer {
+        position: relative;
+        min-height: 24px;
+        line-height: 24px;
+      }
       td input {
-        width: 100%;
-        height: 100%;
-        outline: none;
-        border: 2px solid #fa6101;
-        top: 0px;
-        bottom: 0px;
-        right: 0px;
-        left: 0px;
         position: absolute;
-        background: #fa610140;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        top: 4px;
+        bottom: 4px;
+        left: 20px;
+        right: 20px;
+        width: calc(100% - 40px);
+        height: calc(100% - 8px);
+        padding: 0 12px;
+        outline: none;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
-        padding: 0px 6px;
+        transition: all 0.15s ease;
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+      }
+      
+      td input:focus {
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.2)', 'hsl(217.2 91.2% 59.8% / 0.2)')};
       }
       .actionsContainer {
         display: flex;
         flex-direction: row;
-        height: 24px;
-        transform: translateY(-4px);
-        margin-left: -6px;
+        gap: 4px;
       }
+      
       .action {
-        position: relative;
-        padding: 8px 10px;
-        line-height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
         height: 32px;
-        size: 16px;
-        border-radius: 8px;
+        border-radius: 6px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        cursor: pointer;
+        transition: all 0.15s ease;
       }
 
       .action:hover {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
 
       .action:active {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blueActive)};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 11.8%)')};
       }
-
-      .action:hover dees-icon {
-        filter: ${cssManager.bdTheme('invert(1) brightness(3)', '')};
+      
+      .action dees-icon {
+        width: 16px;
+        height: 16px;
       }
 
       .footer {
-        font-family: 'Geist Sans', sans-serif;
-        font-size: 14px;
-        color: ${cssManager.bdTheme('#111', '#ffffff90')};
-        background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
-        margin: 16px -16px -16px -16px;
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
         display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 52px;
+        padding: 0 24px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       .tableStatistics {
-        padding: 8px 16px;
+        font-weight: 500;
       }
 
       .footerActions {
-        margin-left: auto;
+        display: flex;
+        gap: 8px;
       }
 
       .footerActions .footerAction {
-        padding: 8px 16px;
         display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        border-radius: 6px;
+        cursor: pointer;
         user-select: none;
+        transition: all 0.15s ease;
       }
 
       .footerActions .footerAction:hover {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
-        color: #fff;
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
 
       .footerActions .footerAction dees-icon {
-        display: flex;
-        margin-right: 8px;
-      }
-
-      .footerActions .footerAction:hover dees-icon {
+        width: 14px;
+        height: 14px;
       }
     `,
   ];
@@ -430,7 +568,7 @@ export class DeesTable<T> extends DeesElement {
                     }}
                   >
                     ${action.iconName
-                      ? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
+                      ? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
                           ${action.name}`
                       : action.name}
                   </div>`
@@ -478,24 +616,23 @@ export class DeesTable<T> extends DeesElement {
               const headings: string[] = Object.keys(firstTransformedItem);
               return html`
                 <table>
-                  <tr>
-                    ${headings.map(
-                      (headingArg) => html`
-                        <th>
-                          <div class="innerCellContainer">${headingArg}</div>
-                        </th>
-                      `
-                    )}
-                    ${(() => {
-                      if (this.dataActions && this.dataActions.length > 0) {
-                        return html`
-                          <th>
-                            <div class="innerCellContainer">Actions</div>
-                          </th>
-                        `;
-                      }
-                    })()}
-                  </tr>
+                  <thead>
+                    <tr>
+                      ${headings.map(
+                        (headingArg) => html`
+                          <th>${headingArg}</th>
+                        `
+                      )}
+                      ${(() => {
+                        if (this.dataActions && this.dataActions.length > 0) {
+                          return html`
+                            <th>Actions</th>
+                          `;
+                        }
+                      })()}
+                    </tr>
+                  </thead>
+                  <tbody>
                   ${this.data.map((itemArg) => {
                     const transformedItem = this.displayFunction(itemArg);
                     const getTr = (elementArg: HTMLElement): HTMLElement => {
@@ -592,10 +729,9 @@ export class DeesTable<T> extends DeesElement {
                           if (this.dataActions && this.dataActions.length > 0) {
                             return html`
                               <td>
-                                <div class="innerCellContainer">
-                                  <div class="actionsContainer">
-                                    ${this.getActionsForType('inRow').map(
-                                      (actionArg) => html`
+                                <div class="actionsContainer">
+                                  ${this.getActionsForType('inRow').map(
+                                    (actionArg) => html`
                                         <div
                                           class="action"
                                           @click=${() =>
@@ -607,14 +743,13 @@ export class DeesTable<T> extends DeesElement {
                                           ${actionArg.iconName
                                             ? html`
                                                 <dees-icon
-                                                  .iconFA=${actionArg.iconName}
+                                                  .icon=${actionArg.iconName}
                                                 ></dees-icon>
                                               `
                                             : actionArg.name}
                                         </div>
                                       `
                                     )}
-                                  </div>
                                 </div>
                               </td>
                             `;
@@ -623,6 +758,7 @@ export class DeesTable<T> extends DeesElement {
                       </tr>
                     `;
                   })}
+                  </tbody>
                 </table>
               `;
             })()
@@ -649,7 +785,7 @@ export class DeesTable<T> extends DeesElement {
                     }}
                   >
                     ${action.iconName
-                      ? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
+                      ? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
                           ${action.name}`
                       : action.name}
                   </div>`
@@ -743,7 +879,7 @@ export class DeesTable<T> extends DeesElement {
   }
 
   async handleCellEditing(event: Event, itemArg: T, key: string) {
-    const domtools = await this.domtoolsPromise;
+    await this.domtoolsPromise;
     const target = event.target as HTMLElement;
     const originalColor = target.style.color;
     target.style.color = 'transparent';

ts_web/elements/dees-toast.ts

@@ -3,6 +3,7 @@ import { customElement, DeesElement, type TemplateResult, html, css, property, c
 import * as domtools from '@design.estate/dees-domtools';
 import { zIndexLayers } from './00zindex.js';
 import { demoFunc } from './dees-toast.demo.js';
+import { cssGeistFontFamily } from './00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -152,7 +153,7 @@ export class DeesToast extends DeesElement {
       :host {
         display: block;
         pointer-events: auto;
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         opacity: 0;
         transform: translateY(-10px);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

ts_web/elements/index.ts

@@ -18,6 +18,7 @@ export * from './dees-chips.js';
 export * from './dees-contextmenu.js';
 export * from './dees-dataview-codebox.js';
 export * from './dees-dataview-statusobject.js';
+export * from './dees-dashboardgrid.js';
 export * from './dees-editor.js';
 export * from './dees-editor-markdown.js';
 export * from './dees-editor-markdownoutlet.js';
@@ -27,9 +28,11 @@ export * from './dees-heading.js';
 export * from './dees-hint.js';
 export * from './dees-icon.js';
 export * from './dees-input-checkbox.js';
+export * from './dees-input-datepicker.js';
 export * from './dees-input-dropdown.js';
 export * from './dees-input-fileupload.js';
 export * from './dees-input-iban.js';
+export * from './profilepicture/dees-input-profilepicture.js';
 export * from './dees-input-typelist.js';
 export * from './dees-input-phone.js';
 export * from './dees-input-wysiwyg.js';

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

@@ -0,0 +1,208 @@
+import { html, css } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../dees-panel.js';
+import './dees-input-profilepicture.js';
+import type { DeesInputProfilePicture } from './dees-input-profilepicture.js';
+
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding: 24px;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      
+      dees-panel {
+        margin-bottom: 24px;
+      }
+      
+      .demo-row {
+        display: flex;
+        gap: 48px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      
+      .demo-output {
+        margin-top: 16px;
+        padding: 12px;
+        background: rgba(0, 105, 242, 0.1);
+        border-radius: 4px;
+        font-size: 14px;
+        font-family: monospace;
+        word-break: break-all;
+        max-height: 100px;
+        overflow-y: auto;
+      }
+      
+      .feature-list {
+        margin-top: 16px;
+        padding-left: 20px;
+      }
+      
+      .feature-list li {
+        margin-bottom: 8px;
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Basic demo with round profile picture
+      const roundProfile = elementArg.querySelector('dees-input-profilepicture[shape="round"]');
+      
+      if (roundProfile) {
+        roundProfile.addEventListener('change', (event: CustomEvent) => {
+          const target = event.target as DeesInputProfilePicture;
+          console.log('Round profile picture changed:', target.value?.substring(0, 50) + '...');
+        });
+      }
+    }}>
+      <dees-panel .title=${'Profile Picture Input'} .subtitle=${'Basic usage with round and square shapes'}>
+        <div class="demo-row">
+          <dees-input-profilepicture
+            label="Profile Picture (Round)"
+            description="Click to upload or drag & drop an image"
+            shape="round"
+            size="120"
+          ></dees-input-profilepicture>
+          
+          <dees-input-profilepicture
+            label="Profile Picture (Square)"
+            description="Supports JPEG, PNG, and WebP formats"
+            shape="square"
+            size="120"
+          ></dees-input-profilepicture>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Different sizes demo
+      const profiles = elementArg.querySelectorAll('dees-input-profilepicture');
+      profiles.forEach((profile) => {
+        profile.addEventListener('change', (event: CustomEvent) => {
+          const target = event.target as DeesInputProfilePicture;
+          console.log(`Profile (size ${target.size}) changed`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'Size Variations'} .subtitle=${'Profile pictures in different sizes'}>
+        <div class="demo-row">
+          <dees-input-profilepicture
+            label="Small (80px)"
+            shape="round"
+            size="80"
+          ></dees-input-profilepicture>
+          
+          <dees-input-profilepicture
+            label="Medium (120px)"
+            shape="round"
+            size="120"
+          ></dees-input-profilepicture>
+          
+          <dees-input-profilepicture
+            label="Large (160px)"
+            shape="round"
+            size="160"
+          ></dees-input-profilepicture>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Pre-filled profile with placeholder
+      const sampleImageUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNjY3ZWVhIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NjRiYTIiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkaWVudCkiIC8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI4MCIgZmlsbD0id2hpdGUiPkpEPC90ZXh0Pgo8L3N2Zz4=';
+      
+      const prefilledProfile = elementArg.querySelector('#prefilled-profile') as DeesInputProfilePicture;
+      if (prefilledProfile) {
+        prefilledProfile.value = sampleImageUrl;
+        
+        prefilledProfile.addEventListener('change', (event: CustomEvent) => {
+          const target = event.target as DeesInputProfilePicture;
+          const output = elementArg.querySelector('#prefilled-output');
+          if (output) {
+            output.textContent = target.value ? 
+              `Image data: ${target.value.substring(0, 80)}...` : 
+              'No image selected';
+          }
+        });
+      }
+    }}>
+      <dees-panel .title=${'Pre-filled and Value Binding'} .subtitle=${'Profile picture with initial value and change tracking'}>
+        <dees-input-profilepicture
+          id="prefilled-profile"
+          label="Edit Existing Profile"
+          description="Click the edit button to change or delete to remove"
+          shape="round"
+          size="150"
+        ></dees-input-profilepicture>
+        
+        <div id="prefilled-output" class="demo-output">
+          Image data will appear here when changed
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Disabled state demo
+      const disabledProfile = elementArg.querySelector('#disabled-profile') as DeesInputProfilePicture;
+      if (disabledProfile) {
+        disabledProfile.value = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2NjY2NjYyIgLz4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjYwIiBmaWxsPSJ3aGl0ZSI+TkE8L3RleHQ+Cjwvc3ZnPg==';
+      }
+    }}>
+      <dees-panel .title=${'Form States'} .subtitle=${'Different states and configurations'}>
+        <div class="demo-row">
+          <dees-input-profilepicture
+            label="Required Field"
+            description="This field is required"
+            shape="round"
+            .required=${true}
+          ></dees-input-profilepicture>
+          
+          <dees-input-profilepicture
+            id="disabled-profile"
+            label="Disabled State"
+            description="Cannot be edited"
+            shape="square"
+            .disabled=${true}
+          ></dees-input-profilepicture>
+          
+          <dees-input-profilepicture
+            label="Upload Only"
+            description="Delete not allowed"
+            shape="round"
+            .allowDelete=${false}
+          ></dees-input-profilepicture>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper>
+      <dees-panel .title=${'Features'} .subtitle=${'Complete feature set of the profile picture input'}>
+        <ul class="feature-list">
+          <li><strong>Image Upload:</strong> Click to upload or drag & drop images</li>
+          <li><strong>Image Cropping:</strong> Interactive crop tool with resize handles</li>
+          <li><strong>Shape Support:</strong> Round or square profile pictures</li>
+          <li><strong>Size Customization:</strong> Adjustable dimensions</li>
+          <li><strong>Preview & Edit:</strong> Hover overlay with edit and delete options</li>
+          <li><strong>File Validation:</strong> Format and size restrictions</li>
+          <li><strong>Responsive Design:</strong> Works on desktop and mobile devices</li>
+          <li><strong>Form Integration:</strong> Standard form value binding and validation</li>
+          <li><strong>Accessibility:</strong> Keyboard navigation and screen reader support</li>
+          <li><strong>Z-Index Management:</strong> Proper modal stacking with registry</li>
+        </ul>
+        
+        <div style="margin-top: 24px;">
+          <strong>Supported Formats:</strong> JPEG, PNG, WebP<br>
+          <strong>Max File Size:</strong> 5MB (configurable)<br>
+          <strong>Output Format:</strong> Base64 encoded JPEG
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+  </div>
+`;

ts_web/elements/profilepicture/dees-input-profilepicture.ts

@@ -0,0 +1,455 @@
+import {
+  customElement,
+  html,
+  property,
+  css,
+  cssManager,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base.js';
+import '../dees-icon.js';
+import '../dees-label.js';
+import { ProfilePictureModal } from './profilepicture.modal.js';
+import { demoFunc } from './dees-input-profilepicture.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-profilepicture': DeesInputProfilePicture;
+  }
+}
+
+export type ProfileShape = 'square' | 'round';
+
+@customElement('dees-input-profilepicture')
+export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePicture> {
+  public static demo = demoFunc;
+
+  @property({ type: String })
+  public value: string = ''; // Base64 encoded image or URL
+
+  @property({ type: String })
+  public shape: ProfileShape = 'round';
+
+  @property({ type: Number })
+  public size: number = 120;
+
+  @property({ type: String })
+  public placeholder: string = '';
+
+  @property({ type: Boolean })
+  public allowUpload: boolean = true;
+
+  @property({ type: Boolean })
+  public allowDelete: boolean = true;
+
+  @property({ type: Number })
+  public maxFileSize: number = 5 * 1024 * 1024; // 5MB
+
+  @property({ type: Array })
+  public acceptedFormats: string[] = ['image/jpeg', 'image/png', 'image/webp'];
+
+  @property({ type: Number })
+  public outputSize: number = 800; // Output resolution in pixels
+
+  @property({ type: Number })
+  public outputQuality: number = 0.95; // 0-1 quality for JPEG
+
+  @state()
+  private isHovered: boolean = false;
+
+  @state()
+  private isDragging: boolean = false;
+
+  @state()
+  private isLoading: boolean = false;
+
+  private modalInstance: ProfilePictureModal | null = null;
+
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .input-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .profile-container {
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .profile-container:hover {
+        transform: scale(1.02);
+      }
+
+      .profile-picture {
+        width: var(--size, 120px);
+        height: var(--size, 120px);
+        background: ${cssManager.bdTheme('#f5f5f5', '#18181b')};
+        border: 3px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        transition: all 0.3s ease;
+      }
+
+      .profile-picture.round {
+        border-radius: 50%;
+      }
+
+      .profile-picture.square {
+        border-radius: 12px;
+      }
+
+      .profile-picture.dragging {
+        border-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        box-shadow: 0 0 0 4px ${cssManager.bdTheme('rgba(59, 130, 246, 0.15)', 'rgba(96, 165, 250, 0.15)')};
+      }
+
+      .profile-picture:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+      }
+
+      .profile-picture:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      .profile-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .placeholder-icon {
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        pointer-events: none;
+      }
+
+      .profile-container:hover .overlay {
+        opacity: 1;
+      }
+
+      .overlay-content {
+        display: flex;
+        gap: 12px;
+      }
+
+      .overlay-button {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(39, 39, 42, 0.95)')};
+        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        pointer-events: auto;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .overlay-button:hover {
+        background: ${cssManager.bdTheme('#ffffff', '#3f3f46')};
+        transform: scale(1.1);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      .overlay-button.delete {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.9)', 'rgba(220, 38, 38, 0.9)')};
+        color: white;
+        border-color: transparent;
+      }
+
+      .overlay-button.delete:hover {
+        background: ${cssManager.bdTheme('#ef4444', '#dc2626')};
+      }
+
+      .drop-zone-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        color: white;
+        font-weight: 500;
+        pointer-events: none;
+      }
+
+      .hidden-input {
+        display: none;
+      }
+
+      /* Loading animation */
+      .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.8)')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: inherit;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease;
+      }
+
+      .loading-overlay.show {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        border-top-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes pulse {
+        0% {
+          transform: scale(1);
+          opacity: 1;
+        }
+        50% {
+          transform: scale(1.05);
+          opacity: 0.8;
+        }
+        100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      .profile-picture.clicking {
+        animation: pulse 0.3s ease-out;
+      }
+    `,
+  ];
+
+  render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        
+        <div 
+          class="profile-container"
+          @click=${this.handleClick}
+          @dragover=${this.handleDragOver}
+          @dragleave=${this.handleDragLeave}
+          @drop=${this.handleDrop}
+          style="--size: ${this.size}px"
+        >
+          <div class="profile-picture ${this.shape} ${this.isDragging ? 'dragging' : ''} ${this.isLoading && !this.value ? 'clicking' : ''}">
+            ${this.value ? html`
+              <img class="profile-image" src="${this.value}" alt="Profile picture" />
+            ` : html`
+              <dees-icon class="placeholder-icon" icon="lucide:user" iconSize="${this.size * 0.5}"></dees-icon>
+            `}
+            
+            ${this.isDragging ? html`
+              <div class="overlay" style="opacity: 1">
+                <div class="drop-zone-text">
+                  Drop image here
+                </div>
+              </div>
+            ` : ''}
+            
+            ${this.value && !this.disabled ? html`
+              <div class="overlay">
+                <div class="overlay-content">
+                  ${this.allowUpload ? html`
+                    <button class="overlay-button" @click=${(e: Event) => { e.stopPropagation(); this.openModal(); }} title="Change picture">
+                      <dees-icon icon="lucide:pencil" iconSize="20"></dees-icon>
+                    </button>
+                  ` : ''}
+                  ${this.allowDelete ? html`
+                    <button class="overlay-button delete" @click=${(e: Event) => { e.stopPropagation(); this.deletePicture(); }} title="Delete picture">
+                      <dees-icon icon="lucide:trash2" iconSize="20"></dees-icon>
+                    </button>
+                  ` : ''}
+                </div>
+              </div>
+            ` : ''}
+            
+            ${this.isLoading && !this.value ? html`
+              <div class="loading-overlay show">
+                <div class="loading-spinner"></div>
+              </div>
+            ` : ''}
+          </div>
+        </div>
+        
+        <input
+          type="file"
+          class="hidden-input"
+          accept="${this.acceptedFormats.join(',')}"
+          @change=${this.handleFileSelect}
+        />
+      </div>
+    `;
+  }
+
+  private handleClick(): void {
+    if (this.disabled || !this.allowUpload) return;
+    
+    if (!this.value) {
+      // If no image, open file picker
+      this.isLoading = true;
+      const input = this.shadowRoot!.querySelector('.hidden-input') as HTMLInputElement;
+      
+      // Set up a focus handler to detect when the dialog is closed without selection
+      const handleFocus = () => {
+        setTimeout(() => {
+          // Check if no file was selected
+          if (!input.files || input.files.length === 0) {
+            this.isLoading = false;
+          }
+          window.removeEventListener('focus', handleFocus);
+        }, 300);
+      };
+      
+      window.addEventListener('focus', handleFocus);
+      input.click();
+    }
+  }
+
+  private handleFileSelect(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    
+    // Always reset loading state when file dialog interaction completes
+    this.isLoading = false;
+    
+    if (file) {
+      this.processFile(file);
+    }
+    
+    // Reset input to allow selecting the same file again
+    input.value = '';
+  }
+
+  private handleDragOver(event: DragEvent): void {
+    event.preventDefault();
+    if (!this.disabled && this.allowUpload) {
+      this.isDragging = true;
+    }
+  }
+
+  private handleDragLeave(): void {
+    this.isDragging = false;
+  }
+
+  private handleDrop(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragging = false;
+    
+    if (this.disabled || !this.allowUpload) return;
+    
+    const file = event.dataTransfer?.files[0];
+    if (file) {
+      this.processFile(file);
+    }
+  }
+
+  private async processFile(file: File): Promise<void> {
+    // Validate file type
+    if (!this.acceptedFormats.includes(file.type)) {
+      console.error('Invalid file type:', file.type);
+      return;
+    }
+    
+    // Validate file size
+    if (file.size > this.maxFileSize) {
+      console.error('File too large:', file.size);
+      return;
+    }
+    
+    // Read file as base64
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const base64 = e.target?.result as string;
+      
+      // Open modal for cropping
+      await this.openModal(base64);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  private async openModal(initialImage?: string): Promise<void> {
+    const imageToEdit = initialImage || this.value;
+    
+    if (!imageToEdit) {
+      // If no image provided, open file picker
+      const input = this.shadowRoot!.querySelector('.hidden-input') as HTMLInputElement;
+      input.click();
+      return;
+    }
+    
+    // Create and show modal
+    this.modalInstance = new ProfilePictureModal();
+    this.modalInstance.shape = this.shape;
+    this.modalInstance.initialImage = imageToEdit;
+    this.modalInstance.outputSize = this.outputSize;
+    this.modalInstance.outputQuality = this.outputQuality;
+    
+    this.modalInstance.addEventListener('save', (event: CustomEvent) => {
+      this.value = event.detail.croppedImage;
+      this.changeSubject.next(this);
+    });
+    
+    document.body.appendChild(this.modalInstance);
+  }
+
+  private deletePicture(): void {
+    this.value = '';
+    this.changeSubject.next(this);
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+  }
+}

ts_web/elements/profilepicture/index.ts

@@ -0,0 +1,3 @@
+export * from './dees-input-profilepicture.js';
+export * from './profilepicture.modal.js';
+export * from './profilepicture.cropper.js';

ts_web/elements/profilepicture/profilepicture.cropper.ts

@@ -0,0 +1,456 @@
+import type { ProfileShape } from './dees-input-profilepicture.js';
+
+export interface CropperOptions {
+  container: HTMLElement;
+  image: string;
+  shape: ProfileShape;
+  aspectRatio: number;
+  minSize?: number;
+  outputSize?: number;
+  outputQuality?: number;
+}
+
+export class ImageCropper {
+  private options: CropperOptions;
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private img: HTMLImageElement;
+  private overlayCanvas: HTMLCanvasElement;
+  private overlayCtx: CanvasRenderingContext2D;
+  
+  // Crop area properties
+  private cropX: number = 0;
+  private cropY: number = 0;
+  private cropSize: number = 200;
+  private minCropSize: number = 50;
+  
+  // Interaction state
+  private isDragging: boolean = false;
+  private isResizing: boolean = false;
+  private dragStartX: number = 0;
+  private dragStartY: number = 0;
+  private resizeHandle: string = '';
+  
+  // Image properties
+  private imageScale: number = 1;
+  private imageOffsetX: number = 0;
+  private imageOffsetY: number = 0;
+
+  constructor(options: CropperOptions) {
+    this.options = {
+      minSize: 50,
+      outputSize: 800, // Higher default resolution
+      outputQuality: 0.95, // Higher quality
+      ...options
+    };
+    
+    this.canvas = document.createElement('canvas');
+    this.ctx = this.canvas.getContext('2d')!;
+    
+    this.overlayCanvas = document.createElement('canvas');
+    this.overlayCtx = this.overlayCanvas.getContext('2d')!;
+    
+    this.img = new Image();
+  }
+
+  async initialize(): Promise<void> {
+    // Load image
+    await this.loadImage();
+    
+    // Setup canvases
+    this.setupCanvases();
+    
+    // Setup event listeners
+    this.setupEventListeners();
+    
+    // Initial render
+    this.render();
+  }
+
+  private async loadImage(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.img.onload = () => resolve();
+      this.img.onerror = reject;
+      this.img.src = this.options.image;
+    });
+  }
+
+  private setupCanvases(): void {
+    const container = this.options.container;
+    const containerSize = Math.min(container.clientWidth, container.clientHeight);
+    
+    // Set canvas sizes
+    this.canvas.width = containerSize;
+    this.canvas.height = containerSize;
+    this.canvas.style.width = '100%';
+    this.canvas.style.height = '100%';
+    this.canvas.style.position = 'absolute';
+    this.canvas.style.top = '0';
+    this.canvas.style.left = '0';
+    
+    this.overlayCanvas.width = containerSize;
+    this.overlayCanvas.height = containerSize;
+    this.overlayCanvas.style.width = '100%';
+    this.overlayCanvas.style.height = '100%';
+    this.overlayCanvas.style.position = 'absolute';
+    this.overlayCanvas.style.top = '0';
+    this.overlayCanvas.style.left = '0';
+    this.overlayCanvas.style.cursor = 'move';
+    
+    container.appendChild(this.canvas);
+    container.appendChild(this.overlayCanvas);
+    
+    // Calculate image scale to fit within container (not fill)
+    const scale = Math.min(
+      containerSize / this.img.width,
+      containerSize / this.img.height
+    );
+    
+    this.imageScale = scale;
+    this.imageOffsetX = (containerSize - this.img.width * scale) / 2;
+    this.imageOffsetY = (containerSize - this.img.height * scale) / 2;
+    
+    // Initialize crop area
+    // Make the crop area fit within the actual image bounds
+    const scaledImageWidth = this.img.width * scale;
+    const scaledImageHeight = this.img.height * scale;
+    const maxCropSize = Math.min(scaledImageWidth, scaledImageHeight, containerSize * 0.8);
+    
+    this.cropSize = maxCropSize * 0.8; // Start at 80% of max possible size
+    this.cropX = (containerSize - this.cropSize) / 2;
+    this.cropY = (containerSize - this.cropSize) / 2;
+  }
+
+  private setupEventListeners(): void {
+    this.overlayCanvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
+    this.overlayCanvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
+    this.overlayCanvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
+    this.overlayCanvas.addEventListener('mouseleave', this.handleMouseUp.bind(this));
+    
+    // Touch events
+    this.overlayCanvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
+    this.overlayCanvas.addEventListener('touchmove', this.handleTouchMove.bind(this));
+    this.overlayCanvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
+  }
+
+  private handleMouseDown(e: MouseEvent): void {
+    const rect = this.overlayCanvas.getBoundingClientRect();
+    const x = (e.clientX - rect.left) * (this.overlayCanvas.width / rect.width);
+    const y = (e.clientY - rect.top) * (this.overlayCanvas.height / rect.height);
+    
+    const handle = this.getResizeHandle(x, y);
+    
+    if (handle) {
+      this.isResizing = true;
+      this.resizeHandle = handle;
+    } else if (this.isInsideCropArea(x, y)) {
+      this.isDragging = true;
+    }
+    
+    this.dragStartX = x;
+    this.dragStartY = y;
+  }
+
+  private handleMouseMove(e: MouseEvent): void {
+    const rect = this.overlayCanvas.getBoundingClientRect();
+    const x = (e.clientX - rect.left) * (this.overlayCanvas.width / rect.width);
+    const y = (e.clientY - rect.top) * (this.overlayCanvas.height / rect.height);
+    
+    // Update cursor
+    const handle = this.getResizeHandle(x, y);
+    if (handle) {
+      this.overlayCanvas.style.cursor = this.getResizeCursor(handle);
+    } else if (this.isInsideCropArea(x, y)) {
+      this.overlayCanvas.style.cursor = 'move';
+    } else {
+      this.overlayCanvas.style.cursor = 'default';
+    }
+    
+    // Handle dragging
+    if (this.isDragging) {
+      const dx = x - this.dragStartX;
+      const dy = y - this.dragStartY;
+      
+      // Constrain crop area to image bounds
+      const minX = this.imageOffsetX;
+      const maxX = this.imageOffsetX + this.img.width * this.imageScale - this.cropSize;
+      const minY = this.imageOffsetY;
+      const maxY = this.imageOffsetY + this.img.height * this.imageScale - this.cropSize;
+      
+      this.cropX = Math.max(minX, Math.min(maxX, this.cropX + dx));
+      this.cropY = Math.max(minY, Math.min(maxY, this.cropY + dy));
+      
+      this.dragStartX = x;
+      this.dragStartY = y;
+      this.render();
+    }
+    
+    // Handle resizing
+    if (this.isResizing) {
+      this.handleResize(x, y);
+      this.dragStartX = x;
+      this.dragStartY = y;
+      this.render();
+    }
+  }
+
+  private handleMouseUp(): void {
+    this.isDragging = false;
+    this.isResizing = false;
+    this.resizeHandle = '';
+  }
+
+  private handleTouchStart(e: TouchEvent): void {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const mouseEvent = new MouseEvent('mousedown', {
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    });
+    this.handleMouseDown(mouseEvent);
+  }
+
+  private handleTouchMove(e: TouchEvent): void {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const mouseEvent = new MouseEvent('mousemove', {
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    });
+    this.handleMouseMove(mouseEvent);
+  }
+
+  private handleTouchEnd(e: TouchEvent): void {
+    e.preventDefault();
+    this.handleMouseUp();
+  }
+
+  private getResizeHandle(x: number, y: number): string {
+    const handleSize = 20;
+    const handles = {
+      'nw': { x: this.cropX, y: this.cropY },
+      'ne': { x: this.cropX + this.cropSize, y: this.cropY },
+      'sw': { x: this.cropX, y: this.cropY + this.cropSize },
+      'se': { x: this.cropX + this.cropSize, y: this.cropY + this.cropSize }
+    };
+    
+    for (const [key, pos] of Object.entries(handles)) {
+      if (Math.abs(x - pos.x) < handleSize && Math.abs(y - pos.y) < handleSize) {
+        return key;
+      }
+    }
+    
+    return '';
+  }
+
+  private getResizeCursor(handle: string): string {
+    const cursors: Record<string, string> = {
+      'nw': 'nw-resize',
+      'ne': 'ne-resize',
+      'sw': 'sw-resize',
+      'se': 'se-resize'
+    };
+    return cursors[handle] || 'default';
+  }
+
+  private isInsideCropArea(x: number, y: number): boolean {
+    return x >= this.cropX && x <= this.cropX + this.cropSize &&
+           y >= this.cropY && y <= this.cropY + this.cropSize;
+  }
+
+  private handleResize(x: number, y: number): void {
+    const dx = x - this.dragStartX;
+    const dy = y - this.dragStartY;
+    
+    // Get image bounds
+    const imgLeft = this.imageOffsetX;
+    const imgTop = this.imageOffsetY;
+    const imgRight = this.imageOffsetX + this.img.width * this.imageScale;
+    const imgBottom = this.imageOffsetY + this.img.height * this.imageScale;
+    
+    switch (this.resizeHandle) {
+      case 'se':
+        this.cropSize = Math.max(this.minCropSize, Math.min(
+          this.cropSize + Math.max(dx, dy),
+          Math.min(
+            imgRight - this.cropX,
+            imgBottom - this.cropY
+          )
+        ));
+        break;
+      case 'nw':
+        const newSize = Math.max(this.minCropSize, this.cropSize - Math.max(dx, dy));
+        const sizeDiff = this.cropSize - newSize;
+        const newX = this.cropX + sizeDiff;
+        const newY = this.cropY + sizeDiff;
+        if (newX >= imgLeft && newY >= imgTop) {
+          this.cropX = newX;
+          this.cropY = newY;
+          this.cropSize = newSize;
+        }
+        break;
+      case 'ne':
+        const neSizeDx = Math.max(dx, -dy);
+        const neNewSize = Math.max(this.minCropSize, this.cropSize + neSizeDx);
+        const neSizeDiff = neNewSize - this.cropSize;
+        const neNewY = this.cropY - neSizeDiff;
+        if (neNewY >= imgTop && this.cropX + neNewSize <= imgRight) {
+          this.cropY = neNewY;
+          this.cropSize = neNewSize;
+        }
+        break;
+      case 'sw':
+        const swSizeDx = Math.max(-dx, dy);
+        const swNewSize = Math.max(this.minCropSize, this.cropSize + swSizeDx);
+        const swSizeDiff = swNewSize - this.cropSize;
+        const swNewX = this.cropX - swSizeDiff;
+        if (swNewX >= imgLeft && this.cropY + swNewSize <= imgBottom) {
+          this.cropX = swNewX;
+          this.cropSize = swNewSize;
+        }
+        break;
+    }
+  }
+
+  private render(): void {
+    // Clear canvases
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
+    
+    // Fill background
+    this.ctx.fillStyle = '#000000';
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    
+    // Draw image
+    this.ctx.drawImage(
+      this.img,
+      this.imageOffsetX,
+      this.imageOffsetY,
+      this.img.width * this.imageScale,
+      this.img.height * this.imageScale
+    );
+    
+    // Draw overlay only over the image area
+    this.overlayCtx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    this.overlayCtx.fillRect(
+      this.imageOffsetX,
+      this.imageOffsetY,
+      this.img.width * this.imageScale,
+      this.img.height * this.imageScale
+    );
+    
+    // Clear crop area
+    this.overlayCtx.save();
+    
+    if (this.options.shape === 'round') {
+      this.overlayCtx.beginPath();
+      this.overlayCtx.arc(
+        this.cropX + this.cropSize / 2,
+        this.cropY + this.cropSize / 2,
+        this.cropSize / 2,
+        0,
+        Math.PI * 2
+      );
+      this.overlayCtx.clip();
+    } else {
+      this.overlayCtx.beginPath();
+      this.overlayCtx.rect(this.cropX, this.cropY, this.cropSize, this.cropSize);
+      this.overlayCtx.clip();
+    }
+    
+    this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
+    this.overlayCtx.restore();
+    
+    // Draw crop border
+    this.overlayCtx.strokeStyle = 'white';
+    this.overlayCtx.lineWidth = 2;
+    
+    if (this.options.shape === 'round') {
+      this.overlayCtx.beginPath();
+      this.overlayCtx.arc(
+        this.cropX + this.cropSize / 2,
+        this.cropY + this.cropSize / 2,
+        this.cropSize / 2,
+        0,
+        Math.PI * 2
+      );
+      this.overlayCtx.stroke();
+    } else {
+      this.overlayCtx.strokeRect(this.cropX, this.cropY, this.cropSize, this.cropSize);
+    }
+    
+    // Draw resize handles
+    this.drawResizeHandles();
+  }
+
+  private drawResizeHandles(): void {
+    const handleSize = 8;
+    const handles = [
+      { x: this.cropX, y: this.cropY },
+      { x: this.cropX + this.cropSize, y: this.cropY },
+      { x: this.cropX, y: this.cropY + this.cropSize },
+      { x: this.cropX + this.cropSize, y: this.cropY + this.cropSize }
+    ];
+    
+    this.overlayCtx.fillStyle = 'white';
+    
+    handles.forEach(handle => {
+      this.overlayCtx.beginPath();
+      this.overlayCtx.arc(handle.x, handle.y, handleSize, 0, Math.PI * 2);
+      this.overlayCtx.fill();
+    });
+  }
+
+  async getCroppedImage(): Promise<string> {
+    const cropCanvas = document.createElement('canvas');
+    const cropCtx = cropCanvas.getContext('2d')!;
+    
+    // Calculate the actual crop size in original image pixels
+    const scale = 1 / this.imageScale;
+    const originalCropSize = this.cropSize * scale;
+    
+    // Use requested output size, but warn if upscaling
+    const outputSize = this.options.outputSize!;
+    
+    if (outputSize > originalCropSize) {
+      console.info(`Profile picture: Upscaling from ${Math.round(originalCropSize)}px to ${outputSize}px`);
+    }
+    
+    cropCanvas.width = outputSize;
+    cropCanvas.height = outputSize;
+    
+    // Calculate source coordinates
+    const sx = (this.cropX - this.imageOffsetX) * scale;
+    const sy = (this.cropY - this.imageOffsetY) * scale;
+    const sSize = this.cropSize * scale;
+    
+    // Apply shape mask if round
+    if (this.options.shape === 'round') {
+      cropCtx.beginPath();
+      cropCtx.arc(outputSize / 2, outputSize / 2, outputSize / 2, 0, Math.PI * 2);
+      cropCtx.clip();
+    }
+    
+    // Enable image smoothing for quality
+    cropCtx.imageSmoothingEnabled = true;
+    cropCtx.imageSmoothingQuality = 'high';
+    
+    // Draw cropped image
+    cropCtx.drawImage(
+      this.img,
+      sx, sy, sSize, sSize,
+      0, 0, outputSize, outputSize
+    );
+    
+    // Detect format from original image
+    const isPng = this.options.image.includes('image/png');
+    const format = isPng ? 'image/png' : 'image/jpeg';
+    
+    return cropCanvas.toDataURL(format, this.options.outputQuality);
+  }
+
+  destroy(): void {
+    this.canvas.remove();
+    this.overlayCanvas.remove();
+  }
+}

ts_web/elements/profilepicture/profilepicture.modal.ts

@@ -0,0 +1,395 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  property,
+  css,
+  cssManager,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import * as colors from '../00colors.js';
+import { cssGeistFontFamily } from '../00fonts.js';
+import { zIndexRegistry } from '../00zindex.js';
+import '../dees-icon.js';
+import '../dees-button.js';
+import '../dees-windowlayer.js';
+import { DeesWindowLayer } from '../dees-windowlayer.js';
+import { ImageCropper } from './profilepicture.cropper.js';
+import type { ProfileShape } from './dees-input-profilepicture.js';
+
+@customElement('dees-profilepicture-modal')
+export class ProfilePictureModal extends DeesElement {
+  @property({ type: String })
+  public initialImage: string = '';
+
+  @property({ type: String })
+  public shape: ProfileShape = 'round';
+
+  @property({ type: Number })
+  public outputSize: number = 800;
+
+  @property({ type: Number })
+  public outputQuality: number = 0.95;
+
+  @state()
+  private currentStep: 'crop' | 'preview' = 'crop';
+
+  @state()
+  private croppedImage: string = '';
+
+  @state()
+  private isProcessing: boolean = false;
+
+  private cropper: ImageCropper | null = null;
+  private windowLayer: any;
+  private zIndex: number = 0;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: ${cssGeistFontFamily};
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: var(--z-index);
+      }
+
+      .modal-container {
+        background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
+        border-radius: 12px;
+        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')};
+        box-shadow: ${cssManager.bdTheme(
+          '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+          '0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2)'
+        )};
+        width: 480px;
+        max-width: calc(100vw - 32px);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        transform: translateY(10px) scale(0.98);
+        opacity: 0;
+        animation: modalShow 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      @keyframes modalShow {
+        to {
+          opacity: 1;
+          transform: translateY(0px) scale(1);
+        }
+      }
+
+      .modal-header {
+        height: 52px;
+        padding: 0 20px;
+        border-bottom: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      .modal-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        letter-spacing: -0.01em;
+      }
+
+      .close-button {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        transition: all 0.15s ease;
+      }
+
+      .close-button:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .close-button:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')};
+      }
+
+      .modal-body {
+        flex: 1;
+        padding: 24px;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+      }
+
+      .cropper-container {
+        width: 100%;
+        max-width: 360px;
+        aspect-ratio: 1;
+        position: relative;
+        background: ${cssManager.bdTheme('#000000', '#000000')};
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: ${cssManager.bdTheme(
+          'inset 0 2px 4px rgba(0, 0, 0, 0.06)',
+          'inset 0 2px 4px rgba(0, 0, 0, 0.2)'
+        )};
+      }
+
+      .preview-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+      }
+
+      .preview-image {
+        width: 180px;
+        height: 180px;
+        object-fit: cover;
+        border: 4px solid ${cssManager.bdTheme('#ffffff', '#18181b')};
+        box-shadow: ${cssManager.bdTheme(
+          '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+          '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)'
+        )};
+      }
+
+      .preview-image.round {
+        border-radius: 50%;
+      }
+
+      .preview-image.square {
+        border-radius: 16px;
+      }
+
+      .success-message {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 20px;
+        background: ${cssManager.bdTheme('#10b981', '#10b981')};
+        color: white;
+        border-radius: 100px;
+        font-weight: 500;
+        font-size: 14px;
+        animation: successPulse 0.4s ease-out;
+      }
+
+      @keyframes successPulse {
+        0% { transform: scale(0.9); opacity: 0; }
+        50% { transform: scale(1.02); }
+        100% { transform: scale(1); opacity: 1; }
+      }
+
+      .modal-footer {
+        padding: 20px 24px;
+        border-top: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')};
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+      }
+
+      .instructions {
+        text-align: center;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        font-size: 13px;
+        line-height: 1.5;
+        max-width: 320px;
+      }
+
+      .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        border-top-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @media (max-width: 768px) {
+        .modal-container {
+          width: calc(100vw - 32px);
+          margin: 16px;
+        }
+        
+        .modal-body {
+          padding: 24px;
+        }
+      }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    
+    // Create window layer first (it will get its own z-index)
+    this.windowLayer = await DeesWindowLayer.createAndShow({
+      blur: true,
+    });
+    this.windowLayer.addEventListener('click', () => this.close());
+    
+    // Now get z-index for modal (will be above window layer)
+    this.zIndex = zIndexRegistry.getNextZIndex();
+    this.style.setProperty('--z-index', this.zIndex.toString());
+    
+    // Register with z-index registry
+    zIndexRegistry.register(this, this.zIndex);
+  }
+
+  async disconnectedCallback() {
+    super.disconnectedCallback();
+    
+    // Cleanup
+    if (this.cropper) {
+      this.cropper.destroy();
+    }
+    
+    if (this.windowLayer) {
+      await this.windowLayer.destroy();
+    }
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
+  }
+
+  render(): TemplateResult {
+    return html`
+      <div class="modal-container" @click=${(e: Event) => e.stopPropagation()}>
+        <div class="modal-header">
+          <h3 class="modal-title">
+            ${this.currentStep === 'crop' ? 'Adjust Image' : 'Success'}
+          </h3>
+          <button class="close-button" @click=${this.close} title="Close">
+            <dees-icon icon="lucide:x" iconSize="16"></dees-icon>
+          </button>
+        </div>
+        
+        <div class="modal-body">
+          ${this.currentStep === 'crop' ? html`
+            <div class="instructions">
+              Position and resize the square to select your profile area
+            </div>
+            <div class="cropper-container" id="cropperContainer"></div>
+          ` : html`
+            <div class="preview-container">
+              ${this.isProcessing ? html`
+                <div class="loading-spinner"></div>
+                <div class="instructions">Saving...</div>
+              ` : html`
+                <img 
+                  class="preview-image ${this.shape}" 
+                  src="${this.croppedImage}" 
+                  alt="Cropped preview"
+                />
+                <div class="success-message">
+                  <dees-icon icon="lucide:check" iconSize="16"></dees-icon>
+                  <span>Looking good!</span>
+                </div>
+              `}
+            </div>
+          `}
+        </div>
+        
+        <div class="modal-footer">
+          ${this.currentStep === 'crop' ? html`
+            <dees-button type="destructive" size="sm" @click=${this.close}>
+              Cancel
+            </dees-button>
+            <dees-button type="default" size="sm" @click=${this.handleCrop}>
+              Save
+            </dees-button>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    if (this.currentStep === 'crop') {
+      await this.initializeCropper();
+    }
+  }
+
+  private async initializeCropper(): Promise<void> {
+    await this.updateComplete;
+    
+    const container = this.shadowRoot!.getElementById('cropperContainer');
+    if (!container) return;
+    
+    this.cropper = new ImageCropper({
+      container,
+      image: this.initialImage,
+      shape: this.shape,
+      aspectRatio: 1,
+      outputSize: this.outputSize,
+      outputQuality: this.outputQuality,
+    });
+    
+    await this.cropper.initialize();
+  }
+
+  private async handleCrop(): Promise<void> {
+    if (!this.cropper) return;
+    
+    try {
+      this.isProcessing = true;
+      this.currentStep = 'preview';
+      await this.updateComplete;
+      
+      // Get cropped image
+      const croppedData = await this.cropper.getCroppedImage();
+      this.croppedImage = croppedData;
+      
+      // Simulate processing time for better UX
+      await new Promise(resolve => setTimeout(resolve, 800));
+      
+      this.isProcessing = false;
+      
+      // Emit save event
+      this.dispatchEvent(new CustomEvent('save', {
+        detail: { croppedImage: this.croppedImage },
+        bubbles: true,
+        composed: true
+      }));
+      
+      // Auto close after showing success
+      setTimeout(() => {
+        this.close();
+      }, 1500);
+      
+    } catch (error) {
+      console.error('Error cropping image:', error);
+      this.isProcessing = false;
+    }
+  }
+
+  private close(): void {
+    this.remove();
+  }
+}

ts_web/elements/wysiwyg/blocks/text/code.block.ts

@@ -3,6 +3,8 @@ import type { IBlock } from '../../wysiwyg.types.js';
 import { cssManager } from '@design.estate/dees-element';
 import { WysiwygSelection } from '../../wysiwyg.selection.js';
 import hlight from 'highlight.js';
+import { cssGeistFontFamily, cssMonoFontFamily } from '../../../00fonts.js';
+import { PROGRAMMING_LANGUAGES } from '../../wysiwyg.constants.js';
 
 /**
  * CodeBlockHandler with improved architecture
@@ -20,7 +22,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
   private highlightTimer: any = null;
   
   render(block: IBlock, isSelected: boolean): string {
-    const language = block.metadata?.language || 'javascript';
+    const language = block.metadata?.language || 'typescript';
     const content = block.content || '';
     const lineCount = content.split('\n').length;
     
@@ -30,10 +32,18 @@ export class CodeBlockHandler extends BaseBlockHandler {
       lineNumbersHtml += `<div class="line-number">${i}</div>`;
     }
     
+    // Generate language options
+    const languageOptions = PROGRAMMING_LANGUAGES.map(lang => {
+      const value = lang.toLowerCase();
+      return `<option value="${value}" ${value === language ? 'selected' : ''}>${lang}</option>`;
+    }).join('');
+    
     return `
       <div class="code-block-container${isSelected ? ' selected' : ''}" data-language="${language}">
         <div class="code-header">
-          <span class="language-label">${language}</span>
+          <select class="language-selector" data-block-id="${block.id}">
+            ${languageOptions}
+          </select>
           <button class="copy-button" title="Copy code">
             <svg class="copy-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
               <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
@@ -60,9 +70,29 @@ export class CodeBlockHandler extends BaseBlockHandler {
     const editor = element.querySelector('.code-editor') as HTMLElement;
     const container = element.querySelector('.code-block-container') as HTMLElement;
     const copyButton = element.querySelector('.copy-button') as HTMLButtonElement;
+    const languageSelector = element.querySelector('.language-selector') as HTMLSelectElement;
     
     if (!editor || !container) return;
     
+    // Setup language selector
+    if (languageSelector) {
+      languageSelector.addEventListener('change', (e) => {
+        const newLanguage = (e.target as HTMLSelectElement).value;
+        block.metadata = { ...block.metadata, language: newLanguage };
+        container.setAttribute('data-language', newLanguage);
+        
+        // Update the syntax highlighting if content exists and not focused
+        if (block.content && document.activeElement !== editor) {
+          this.applyHighlighting(element, block);
+        }
+        
+        // Notify about the change
+        if (handlers.onInput) {
+          handlers.onInput(new InputEvent('input'));
+        }
+      });
+    }
+    
     // Setup copy button
     if (copyButton) {
       copyButton.addEventListener('click', async () => {
@@ -285,7 +315,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
     
     // Get plain text content
     const content = editor.textContent || '';
-    const language = block.metadata?.language || 'javascript';
+    const language = block.metadata?.language || 'typescript';
     
     // Apply highlighting
     try {
@@ -336,7 +366,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         type: 'code',
         content: content,
         metadata: { 
-          language: element.querySelector('.code-block-container')?.getAttribute('data-language') || 'javascript'
+          language: element.querySelector('.code-block-container')?.getAttribute('data-language') || 'typescript'
         }
       };
       this.applyHighlighting(element, block);
@@ -440,13 +470,30 @@ export class CodeBlockHandler extends BaseBlockHandler {
         align-items: center;
       }
       
-      .language-label {
+      .language-selector {
         font-size: 12px;
         color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-family: ${cssGeistFontFamily};
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        padding: 4px 8px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        outline: none;
+      }
+      
+      .language-selector:hover {
+        background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
+        border-color: ${cssManager.bdTheme('#e5e7eb', '#374151')};
+        color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
+      }
+      
+      .language-selector:focus {
+        border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
       }
       
       /* Copy Button - Minimal */
@@ -460,7 +507,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         border-radius: 4px;
         color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
         font-size: 12px;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-family: ${cssGeistFontFamily};
         cursor: pointer;
         transition: all 0.15s ease;
         outline: none;
@@ -515,7 +562,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
       .line-number {
         padding: 0 12px 0 8px;
         color: ${cssManager.bdTheme('#9ca3af', '#4b5563')};
-        font-family: 'SF Mono', Monaco, Consolas, monospace;
+        font-family: ${cssMonoFontFamily};
         font-size: 13px;
         line-height: 20px;
         height: 20px;
@@ -538,7 +585,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         display: block;
         padding: 12px 16px;
         margin: 0;
-        font-family: 'SF Mono', Monaco, Consolas, monospace;
+        font-family: ${cssMonoFontFamily};
         font-size: 13px;
         line-height: 20px;
         color: ${cssManager.bdTheme('#111827', '#f9fafb')};

ts_web/elements/wysiwyg/dees-input-wysiwyg.ts

@@ -235,6 +235,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
     const blockComponent = document.createElement('dees-wysiwyg-block') as any;
     blockComponent.block = block;
     blockComponent.isSelected = this.selectedBlockId === block.id;
+    blockComponent.wysiwygComponent = this; // Pass parent reference
     blockComponent.handlers = {
       onInput: (e: InputEvent) => this.inputHandler.handleBlockInput(e, block),
       onKeyDown: (e: KeyboardEvent) => this.keyboardHandler.handleBlockKeyDown(e, block),
@@ -247,28 +248,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
     };
     wrapper.appendChild(blockComponent);
     
-    // Add settings button for non-divider blocks
-    if (block.type !== 'divider') {
-      const settings = document.createElement('div');
-      settings.className = 'block-settings';
-      settings.innerHTML = `
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-          <circle cx="12" cy="5" r="2"></circle>
-          <circle cx="12" cy="12" r="2"></circle>
-          <circle cx="12" cy="19" r="2"></circle>
-        </svg>
-      `;
-      settings.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        WysiwygModalManager.showBlockSettingsModal(block, () => {
-          this.updateValue();
-          // Re-render only the updated block
-          this.updateBlockElement(block.id);
-        });
-      });
-      wrapper.appendChild(settings);
-    }
+    // Remove settings button - context menu will handle this
     
     // Add drag event listeners
     wrapper.addEventListener('dragover', (e) => this.dragDropHandler.handleDragOver(e, block));
@@ -507,13 +487,9 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
     // Close menu
     this.closeSlashMenu(false);
     
-    // If it's a code block, ask for language
+    // If it's a code block, default to TypeScript
     if (type === 'code') {
-      const language = await WysiwygModalManager.showLanguageSelectionModal();
-      if (!language) {
-        return; // User cancelled
-      }
-      currentBlock.metadata = { language };
+      currentBlock.metadata = { language: 'typescript' };
     }
     
     // Transform the current block

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

@@ -8,6 +8,7 @@ import {
   state,
 } from '@design.estate/dees-element';
 import { zIndexRegistry } from '../00zindex.js';
+import '../dees-icon.js';
 
 import { type ISlashMenuItem } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
@@ -61,10 +62,10 @@ export class DeesSlashMenu extends DeesElement {
 
       .slash-menu {
         position: fixed;
-        background: ${cssManager.bdTheme('#ffffff', '#262626')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
-        border-radius: 8px;
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 4px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
         padding: 4px;
         min-width: 220px;
         max-height: 300px;
@@ -77,7 +78,7 @@ export class DeesSlashMenu extends DeesElement {
       @keyframes fadeInScale {
         from {
           opacity: 0;
-          transform: scale(0.95) translateY(-10px);
+          transform: scale(0.98) translateY(-2px);
         }
         to {
           opacity: 1;
@@ -86,37 +87,35 @@ export class DeesSlashMenu extends DeesElement {
       }
 
       .slash-menu-item {
-        padding: 10px 12px;
+        padding: 8px 10px;
         cursor: pointer;
         transition: all 0.15s ease;
         display: flex;
         align-items: center;
         gap: 12px;
-        border-radius: 4px;
-        color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+        border-radius: 3px;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         font-size: 14px;
       }
 
       .slash-menu-item:hover,
       .slash-menu-item.selected {
-        background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
-        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .slash-menu-item .icon {
-        width: 24px;
-        height: 24px;
+        width: 20px;
+        height: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 16px;
-        color: ${cssManager.bdTheme('#666', '#999')};
-        font-weight: 600;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
       }
 
       .slash-menu-item:hover .icon,
       .slash-menu-item.selected .icon {
-        color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+        color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
       }
     `,
   ];
@@ -142,7 +141,7 @@ export class DeesSlashMenu extends DeesElement {
             data-item-type="${item.type}"
             data-item-index="${index}"
           >
-            <span class="icon">${item.icon}</span>
+            <dees-icon class="icon" .icon="${item.icon}" iconSize="16"></dees-icon>
             <span>${item.label}</span>
           </div>
         `)}

ts_web/elements/wysiwyg/dees-wysiwyg-block.ts

@@ -13,6 +13,8 @@ import { WysiwygBlocks } from './wysiwyg.blocks.js';
 import { WysiwygSelection } from './wysiwyg.selection.js';
 import { BlockRegistry, type IBlockEventHandlers } from './blocks/index.js';
 import './wysiwyg.blockregistration.js';
+import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
+import '../dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -37,6 +39,9 @@ export class DeesWysiwygBlock extends DeesElement {
 
   @property({ type: Object })
   public handlers: IBlockEventHandlers;
+  
+  @property({ type: Object })
+  public wysiwygComponent: any; // Reference to parent dees-input-wysiwyg
 
   // Reference to the editable block element
   private blockElement: HTMLDivElement | null = null;
@@ -685,6 +690,125 @@ export class DeesWysiwygBlock extends DeesElement {
   
 
   
+  /**
+   * Get context menu items for this block
+   */
+  public getContextMenuItems(): any[] {
+    if (!this.block || this.block.type === 'divider') {
+      return [];
+    }
+    
+    const blockTypes = WysiwygShortcuts.getSlashMenuItems();
+    const currentType = this.block.type;
+    
+    // Use the parent reference passed from dees-input-wysiwyg
+    const wysiwygComponent = this.wysiwygComponent;
+    const blockId = this.block.id;
+    
+    
+    // Create submenu items for block type change
+    const blockTypeItems = blockTypes
+      .filter(item => item.type !== currentType && item.type !== 'divider')
+      .map(item => ({
+        name: item.label,
+        iconName: item.icon.replace('lucide:', ''),
+        action: async () => {
+          if (wysiwygComponent && wysiwygComponent.blockOperations) {
+            // Transform the block type
+            const blockToTransform = wysiwygComponent.blocks.find((b: IBlock) => b.id === blockId);
+            if (blockToTransform) {
+              blockToTransform.type = item.type;
+              blockToTransform.content = blockToTransform.content || '';
+              
+              // Handle special metadata for different block types
+              if (item.type === 'code') {
+                blockToTransform.metadata = { language: 'typescript' };
+              } else if (item.type === 'list') {
+                blockToTransform.metadata = { listType: 'bullet' };
+              } else if (item.type === 'image') {
+                blockToTransform.content = '';
+                blockToTransform.metadata = { url: '', loading: false };
+              } else if (item.type === 'youtube') {
+                blockToTransform.content = '';
+                blockToTransform.metadata = { videoId: '', url: '' };
+              } else if (item.type === 'markdown') {
+                blockToTransform.metadata = { showPreview: false };
+              } else if (item.type === 'html') {
+                blockToTransform.metadata = { showPreview: false };
+              } else if (item.type === 'attachment') {
+                blockToTransform.content = '';
+                blockToTransform.metadata = { files: [] };
+              }
+              
+              // Update the block element
+              wysiwygComponent.updateBlockElement(blockId);
+              wysiwygComponent.updateValue();
+              
+              // Focus the block after transformation
+              requestAnimationFrame(() => {
+                wysiwygComponent.blockOperations.focusBlock(blockId);
+              });
+            }
+          }
+        }
+      }));
+    
+    const menuItems: any[] = [
+      {
+        name: 'Change Type',
+        iconName: 'type',
+        submenu: blockTypeItems
+      }
+    ];
+    
+    // Add copy/cut/paste for editable blocks
+    if (!['image', 'divider', 'youtube', 'attachment'].includes(this.block.type)) {
+      menuItems.push(
+        { divider: true },
+        {
+          name: 'Cut',
+          iconName: 'scissors',
+          shortcut: 'Cmd+X',
+          action: async () => {
+            document.execCommand('cut');
+          }
+        },
+        {
+          name: 'Copy',
+          iconName: 'copy',
+          shortcut: 'Cmd+C',
+          action: async () => {
+            document.execCommand('copy');
+          }
+        },
+        {
+          name: 'Paste',
+          iconName: 'clipboard',
+          shortcut: 'Cmd+V',
+          action: async () => {
+            document.execCommand('paste');
+          }
+        }
+      );
+    }
+    
+    // Add delete option
+    menuItems.push(
+      { divider: true },
+      {
+        name: 'Delete Block',
+        iconName: 'trash2',
+        action: async () => {
+          if (wysiwygComponent && wysiwygComponent.blockOperations) {
+            wysiwygComponent.blockOperations.deleteBlock(blockId);
+          }
+        }
+      }
+    );
+    
+    return menuItems;
+  }
+
   /**
    * Gets content split at cursor position
    */

ts_web/elements/wysiwyg/wysiwyg.dragdrophandler.ts

@@ -11,6 +11,8 @@ export class WysiwygDragDropHandler {
   private initialBlockY: number = 0;
   private draggedBlockElement: HTMLElement | null = null;
   private draggedBlockHeight: number = 0;
+  private draggedBlockContentHeight: number = 0;
+  private draggedBlockMarginTop: number = 0;
   private lastUpdateTime: number = 0;
   private updateThrottle: number = 80; // milliseconds
 
@@ -48,11 +50,33 @@ export class WysiwygDragDropHandler {
     this.initialMouseY = e.clientY;
     this.draggedBlockElement = this.component.editorContentRef.querySelector(`[data-block-id="${block.id}"]`);
     
+    
     if (this.draggedBlockElement) {
+      // Get the wrapper rect for measurements
       const rect = this.draggedBlockElement.getBoundingClientRect();
-      this.draggedBlockHeight = rect.height;
       this.initialBlockY = rect.top;
       
+      // Get the inner block element for proper measurements
+      const innerBlock = this.draggedBlockElement.querySelector('.block');
+      if (innerBlock) {
+        const innerRect = innerBlock.getBoundingClientRect();
+        const computedStyle = window.getComputedStyle(innerBlock);
+        this.draggedBlockMarginTop = parseInt(computedStyle.marginTop) || 0;
+        this.draggedBlockContentHeight = innerRect.height;
+      }
+      
+      // The drop indicator should match the wrapper height exactly
+      // The wrapper already includes all the space the block occupies
+      this.draggedBlockHeight = rect.height;
+      
+      console.log('Drag measurements:', {
+        wrapperHeight: rect.height,
+        marginTop: this.draggedBlockMarginTop,
+        dropIndicatorHeight: this.draggedBlockHeight,
+        contentHeight: this.draggedBlockContentHeight,
+        blockId: block.id
+      });
+      
       // Create drop indicator
       this.createDropIndicator();
       
@@ -98,6 +122,8 @@ export class WysiwygDragDropHandler {
     this.dragOverPosition = null;
     this.draggedBlockElement = null;
     this.draggedBlockHeight = 0;
+    this.draggedBlockContentHeight = 0;
+    this.draggedBlockMarginTop = 0;
     this.initialBlockY = 0;
     
     // Update component state
@@ -284,34 +310,93 @@ export class WysiwygDragDropHandler {
     if (!this.dropIndicator || !this.draggedBlockElement) return;
     
     this.dropIndicator.style.display = 'block';
-    this.dropIndicator.style.height = `${this.draggedBlockHeight}px`;
     
     const containerRect = this.component.editorContentRef.getBoundingClientRect();
-    // Calculate where the block will actually land
     let topPosition = 0;
     
-    if (targetIndex === 0) {
-      // Before first block
-      topPosition = 0;
-    } else {
-      // After a specific block
-      const prevIndex = targetIndex - 1;
-      let blockCount = 0;
+    // Build array of visual block positions (excluding dragged block)
+    const visualBlocks: { index: number, top: number, bottom: number }[] = [];
+    
+    for (let i = 0; i < blocks.length; i++) {
+      if (i === draggedIndex) continue; // Skip the dragged block
       
-      // Find the visual position of the block that will be before our dropped block
-      for (let i = 0; i < blocks.length; i++) {
-        if (i === draggedIndex) continue; // Skip the dragged block
-        
-        if (blockCount === prevIndex) {
-          const rect = blocks[i].getBoundingClientRect();
-          topPosition = rect.bottom - containerRect.top + 16; // 16px gap
-          break;
+      const block = blocks[i];
+      const rect = block.getBoundingClientRect();
+      let top = rect.top - containerRect.top;
+      let bottom = rect.bottom - containerRect.top;
+      
+      // Account for any transforms
+      const transform = window.getComputedStyle(block).transform;
+      if (transform && transform !== 'none') {
+        const matrix = new DOMMatrix(transform);
+        const yOffset = matrix.m42;
+        top += yOffset;
+        bottom += yOffset;
+      }
+      
+      visualBlocks.push({ index: i, top, bottom });
+    }
+    
+    // Sort by visual position
+    visualBlocks.sort((a, b) => a.top - b.top);
+    
+    // Adjust targetIndex to account for excluded dragged block
+    let adjustedTargetIndex = targetIndex;
+    if (targetIndex > draggedIndex) {
+      adjustedTargetIndex--; // Reduce by 1 since dragged block is not in visualBlocks
+    }
+    
+    // Calculate drop position
+    // Get the margin that will be applied based on the dragged block type
+    let blockMargin = 16; // default margin
+    if (this.draggedBlockElement) {
+      const draggedBlock = this.component.blocks.find(b => b.id === this.draggedBlockId);
+      if (draggedBlock) {
+        const blockType = draggedBlock.type;
+        if (blockType === 'heading-1' || blockType === 'heading-2' || blockType === 'heading-3') {
+          blockMargin = 24;
+        } else if (blockType === 'code' || blockType === 'quote') {
+          blockMargin = 20;
         }
-        blockCount++;
       }
     }
     
-    this.dropIndicator.style.top = `${topPosition}px`;
+    if (adjustedTargetIndex === 0) {
+      // Insert at the very top - no margin needed for first block
+      topPosition = 0;
+    } else if (adjustedTargetIndex >= visualBlocks.length) {
+      // Insert at the end
+      const lastBlock = visualBlocks[visualBlocks.length - 1];
+      if (lastBlock) {
+        topPosition = lastBlock.bottom;
+        // Add margin that will be applied to the dropped block
+        topPosition += blockMargin;
+      }
+    } else {
+      // Insert between blocks
+      const blockBefore = visualBlocks[adjustedTargetIndex - 1];
+      if (blockBefore) {
+        topPosition = blockBefore.bottom;
+        // Add margin that will be applied to the dropped block
+        topPosition += blockMargin;
+      }
+    }
+    
+    // Set the indicator height to match the dragged block
+    this.dropIndicator.style.height = `${this.draggedBlockHeight}px`;
+    
+    // Set position
+    this.dropIndicator.style.top = `${Math.max(0, topPosition)}px`;
+    
+    console.log('Drop indicator update:', {
+      targetIndex,
+      adjustedTargetIndex,
+      draggedIndex,
+      topPosition,
+      height: this.draggedBlockHeight,
+      blockMargin,
+      visualBlocks: visualBlocks.map(b => ({ index: b.index, top: b.top, bottom: b.bottom }))
+    });
   }
 
   /**

ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts

@@ -49,19 +49,19 @@ export class WysiwygShortcuts {
 
   static getSlashMenuItems(): ISlashMenuItem[] {
     return [
-      { type: 'paragraph', label: 'Paragraph', icon: '¶' },
-      { type: 'heading-1', label: 'Heading 1', icon: 'H₁' },
-      { type: 'heading-2', label: 'Heading 2', icon: 'H₂' },
-      { type: 'heading-3', label: 'Heading 3', icon: 'H₃' },
-      { type: 'quote', label: 'Quote', icon: '"' },
-      { type: 'code', label: 'Code', icon: '<>' },
-      { type: 'list', label: 'List', icon: '•' },
-      { type: 'image', label: 'Image', icon: '🖼' },
-      { type: 'divider', label: 'Divider', icon: '—' },
-      { type: 'youtube', label: 'YouTube', icon: '▶️' },
-      { type: 'markdown', label: 'Markdown', icon: 'M↓' },
-      { type: 'html', label: 'HTML', icon: '</>' },
-      { type: 'attachment', label: 'File Attachment', icon: '📎' },
+      { type: 'paragraph', label: 'Paragraph', icon: 'lucide:pilcrow' },
+      { type: 'heading-1', label: 'Heading 1', icon: 'lucide:heading1' },
+      { type: 'heading-2', label: 'Heading 2', icon: 'lucide:heading2' },
+      { type: 'heading-3', label: 'Heading 3', icon: 'lucide:heading3' },
+      { type: 'quote', label: 'Quote', icon: 'lucide:quote' },
+      { type: 'code', label: 'Code Block', icon: 'lucide:fileCode' },
+      { type: 'list', label: 'Bullet List', icon: 'lucide:list' },
+      { type: 'image', label: 'Image', icon: 'lucide:image' },
+      { type: 'divider', label: 'Divider', icon: 'lucide:minus' },
+      { type: 'youtube', label: 'YouTube', icon: 'lucide:youtube' },
+      { type: 'markdown', label: 'Markdown', icon: 'lucide:fileText' },
+      { type: 'html', label: 'HTML', icon: 'lucide:code' },
+      { type: 'attachment', label: 'File Attachment', icon: 'lucide:paperclip' },
     ];
   }
 

ts_web/elements/wysiwyg/wysiwyg.styles.ts

@@ -7,23 +7,25 @@ export const wysiwygStyles = css`
   }
 
   .wysiwyg-container {
-    background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
-    border-radius: 8px;
+    background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 6px;
     min-height: 200px;
-    padding: 32px 40px;
+    padding: 24px;
     position: relative;
     transition: all 0.2s ease;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .wysiwyg-container:hover {
-    border-color: ${cssManager.bdTheme('#d0d0d0', '#444')};
+    border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
   }
 
   .wysiwyg-container:focus-within {
-    border-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
-    box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(77, 148, 255, 0.1)')};
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 2px ${cssManager.bdTheme('#f4f4f5', '#18181b')}, 0 0 0 4px ${cssManager.bdTheme('rgba(59, 130, 246, 0.5)', 'rgba(59, 130, 246, 0.5)')};
+    border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 
   /* Visual hint for text selection */
@@ -44,7 +46,7 @@ export const wysiwygStyles = css`
     position: relative;
     transition: all 0.15s ease;
     min-height: 1.6em;
-    color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   /* First and last blocks don't need extra spacing */
@@ -57,8 +59,9 @@ export const wysiwygStyles = css`
   }
 
   .block.selected {
-    background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.05)', 'rgba(77, 148, 255, 0.08)')};
-    box-shadow: inset 0 0 0 2px ${cssManager.bdTheme('rgba(0, 102, 204, 0.2)', 'rgba(77, 148, 255, 0.2)')};
+    background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.05)')};
+    outline: 2px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
+    outline-offset: -2px;
     border-radius: 4px;
     margin-left: -8px;
     margin-right: -8px;
@@ -78,7 +81,7 @@ export const wysiwygStyles = css`
 
   .block.paragraph:empty::before {
     content: "Type '/' for commands...";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 16px;
     line-height: 1.6;
@@ -89,12 +92,12 @@ export const wysiwygStyles = css`
     font-size: 32px;
     font-weight: 700;
     line-height: 1.2;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block.heading-1:empty::before {
     content: "Heading 1";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 32px;
     line-height: 1.2;
@@ -105,12 +108,12 @@ export const wysiwygStyles = css`
     font-size: 24px;
     font-weight: 600;
     line-height: 1.3;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block.heading-2:empty::before {
     content: "Heading 2";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 24px;
     line-height: 1.3;
@@ -121,12 +124,12 @@ export const wysiwygStyles = css`
     font-size: 20px;
     font-weight: 600;
     line-height: 1.4;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block.heading-3:empty::before {
     content: "Heading 3";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 20px;
     line-height: 1.4;
@@ -134,10 +137,10 @@ export const wysiwygStyles = css`
   }
 
   .block.quote {
-    border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    border-left: 2px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
     padding-left: 20px;
     font-style: italic;
-    color: ${cssManager.bdTheme('#555', '#b0b0b0')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
     margin-left: 0;
     margin-right: 0;
     line-height: 1.6;
@@ -145,7 +148,7 @@ export const wysiwygStyles = css`
 
   .block.quote:empty::before {
     content: "Quote";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 16px;
     line-height: 1.6;
@@ -162,33 +165,33 @@ export const wysiwygStyles = css`
     position: absolute;
     top: 0;
     right: 0;
-    background: ${cssManager.bdTheme('#e1e4e8', '#333333')};
-    color: ${cssManager.bdTheme('#586069', '#8b949e')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
     padding: 4px 12px;
     font-size: 12px;
-    border-radius: 0 6px 0 6px;
+    border-radius: 0 4px 0 4px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     text-transform: lowercase;
     z-index: 1;
   }
 
   .block.code {
-    background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
-    border-radius: 6px;
-    padding: 16px 20px;
+    background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 4px;
+    padding: 16px;
     padding-top: 32px; /* Make room for language indicator */
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
     font-size: 14px;
     line-height: 1.5;
     white-space: pre-wrap;
-    color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
     overflow-x: auto;
   }
 
   .block.code:empty::before {
     content: "// Code block";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
     font-size: 14px;
@@ -233,16 +236,16 @@ export const wysiwygStyles = css`
 
   .block.divider hr {
     border: none;
-    border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+    border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
     margin: 0;
   }
 
   .slash-menu {
     position: absolute;
-    background: ${cssManager.bdTheme('#ffffff', '#262626')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
-    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     padding: 4px;
     z-index: 1000;
     min-width: 220px;
@@ -253,21 +256,21 @@ export const wysiwygStyles = css`
   }
 
   .slash-menu-item {
-    padding: 10px 12px;
+    padding: 8px 10px;
     cursor: pointer;
     transition: all 0.15s ease;
     display: flex;
     align-items: center;
     gap: 12px;
-    border-radius: 4px;
-    color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+    border-radius: 3px;
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
     font-size: 14px;
   }
 
   .slash-menu-item:hover,
   .slash-menu-item.selected {
-    background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .slash-menu-item .icon {
@@ -277,23 +280,23 @@ export const wysiwygStyles = css`
     align-items: center;
     justify-content: center;
     font-size: 16px;
-    color: ${cssManager.bdTheme('#666', '#999')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
     font-weight: 600;
   }
 
   .slash-menu-item:hover .icon,
   .slash-menu-item.selected .icon {
-    color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 
   .toolbar {
     position: absolute;
     top: -40px;
     left: 0;
-    background: ${cssManager.bdTheme('#ffffff', '#262626')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
-    border-radius: 6px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     padding: 4px;
     display: none;
     gap: 4px;
@@ -310,17 +313,17 @@ export const wysiwygStyles = css`
     border: none;
     background: transparent;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: 3px;
     transition: all 0.15s ease;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .toolbar-button:hover {
-    background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
-    color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 
   /* Drag and Drop Styles */
@@ -360,7 +363,7 @@ export const wysiwygStyles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     border-radius: 4px;
   }
 
@@ -375,13 +378,13 @@ export const wysiwygStyles = css`
   }
 
   .drag-handle:hover {
-    color: ${cssManager.bdTheme('#666', '#999')};
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
   }
 
   .drag-handle:active {
     cursor: grabbing;
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
   }
 
   .block-wrapper.dragging {
@@ -407,9 +410,9 @@ export const wysiwygStyles = css`
     position: absolute;
     left: 0;
     right: 0;
-    background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.08)', 'rgba(77, 148, 255, 0.08)')};
-    border: 2px dashed ${cssManager.bdTheme('#0066cc', '#4d94ff')};
-    border-radius: 8px;
+    background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.05)')};
+    border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+    border-radius: 4px;
     transition: top 0.2s ease, height 0.2s ease;
     pointer-events: none;
     z-index: 1999;
@@ -426,50 +429,21 @@ export const wysiwygStyles = css`
     user-select: none;
   }
 
-  /* Block Settings Button */
-  .block-settings {
-    position: absolute;
-    right: -40px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 28px;
-    height: 28px;
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${cssManager.bdTheme('#999', '#666')};
-    border-radius: 4px;
-  }
-
-  .block-wrapper:hover .block-settings {
-    opacity: 1;
-  }
-
-  .block-settings:hover {
-    color: ${cssManager.bdTheme('#666', '#999')};
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
-  }
-
-  .block-settings:active {
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
-  }
+  /* Block Settings Button - Removed in favor of context menu */
 
   /* Text Selection Styles */
   .block ::selection {
-    background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.3)', 'rgba(77, 148, 255, 0.3)')};
+    background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
     color: inherit;
   }
 
   /* Formatting Menu */
   .formatting-menu {
     position: absolute;
-    background: ${cssManager.bdTheme('#ffffff', '#262626')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
-    border-radius: 6px;
-    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
+    background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     padding: 4px;
     display: flex;
     gap: 2px;
@@ -480,7 +454,7 @@ export const wysiwygStyles = css`
   @keyframes fadeInScale {
     from {
       opacity: 0;
-      transform: scale(0.95) translateY(5px);
+      transform: scale(0.98) translateY(2px);
     }
     to {
       opacity: 1;
@@ -494,20 +468,20 @@ export const wysiwygStyles = css`
     border: none;
     background: transparent;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: 3px;
     transition: all 0.15s ease;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
     font-weight: 600;
     font-size: 14px;
     position: relative;
   }
 
   .format-button:hover {
-    background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
-    color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 
   .format-button:active {
@@ -535,7 +509,7 @@ export const wysiwygStyles = css`
   .block strong,
   .block b {
     font-weight: 600;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block em,
@@ -554,22 +528,22 @@ export const wysiwygStyles = css`
   }
 
   .block code {
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
     padding: 2px 6px;
     border-radius: 3px;
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
     font-size: 0.9em;
-    color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block a {
-    color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: border-color 0.15s ease;
   }
 
   .block a:hover {
-    border-bottom-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    border-bottom-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 `;

ts_web/pages/input-showcase.ts

@@ -443,6 +443,32 @@ export const inputShowcase = () => html`
         Specialized input components for specific data types like phone numbers, IBAN, and file uploads.
       </p>
 
+      <dees-panel .title=${'Date & Time Picker'} .subtitle=${'Calendar-based date selection'}>
+        <div class="demo-grid">
+          <dees-input-datepicker
+            .label=${'Event Date'}
+            .placeholder=${'Select date'}
+            .description=${'Choose a date from the calendar'}
+          ></dees-input-datepicker>
+
+          <dees-input-datepicker
+            .label=${'Appointment Time'}
+            .enableTime=${true}
+            .timeFormat=${'12h'}
+            .description=${'Date and time with AM/PM'}
+          ></dees-input-datepicker>
+
+          <dees-input-datepicker
+            .label=${'Deadline'}
+            .enableTime=${true}
+            .timeFormat=${'24h'}
+            .minuteIncrement=${15}
+            .minDate=${new Date().toISOString()}
+            .description=${'Future dates only, 15 min increments'}
+          ></dees-input-datepicker>
+        </div>
+      </dees-panel>
+
       <dees-panel .title=${'Phone & IBAN'}>
         <div class="demo-grid">
           <dees-input-phone
@@ -474,6 +500,31 @@ export const inputShowcase = () => html`
           .accept=${'image/*'}
         ></dees-input-fileupload>
       </dees-panel>
+
+      <dees-panel .title=${'Profile Picture Input'} .subtitle=${'Image upload with cropping'}>
+        <div class="demo-grid">
+          <dees-input-profilepicture
+            .label=${'User Avatar'}
+            .description=${'Round profile picture'}
+            .shape=${'round'}
+            .size=${120}
+          ></dees-input-profilepicture>
+
+          <dees-input-profilepicture
+            .label=${'Company Logo'}
+            .description=${'Square format'}
+            .shape=${'square'}
+            .size=${120}
+          ></dees-input-profilepicture>
+
+          <dees-input-profilepicture
+            .label=${'Team Member'}
+            .description=${'Larger profile image'}
+            .shape=${'round'}
+            .size=${150}
+          ></dees-input-profilepicture>
+        </div>
+      </dees-panel>
     </section>
 
     <!-- Rich Editors Section -->