1.11.6

fix(dees-table): Improve Lucene range comparisons, pin monaco-editor to 0.52.2, and add local dev metadata
1.11.5
2025-09-16 16:29:52 +00:00 · 2025-09-16 16:29:52 +00:00 · 2025-09-16 16:22:25 +00:00 · 2025-09-16 16:22:25 +00:00 · 2025-09-16 16:20:35 +00:00 · 2025-09-16 16:17:03 +00:00
35 changed files with 8813 additions and 5117 deletions
--- a/.serena/.gitignore
+++ b/.serena/.gitignore
@@ -0,0 +1 @@
+/cache
--- a/.serena/memories/done_checklist.md
+++ b/.serena/memories/done_checklist.md
@@ -0,0 +1,6 @@
+Before finishing a task:
+- Run `pnpm run build` to ensure TypeScript compile + bundling succeed.
+- Verify `dist_ts_web/` and `dist_bundle/bundle.js` updated.
+- Optionally run `pnpm run test` and inspect failures.
+- Avoid changing public APIs unless required; keep changes scoped.
+- Update readme or inline docs only if user-facing behavior changes.
--- a/.serena/memories/project_overview.md
+++ b/.serena/memories/project_overview.md
@@ -0,0 +1,11 @@
+Project: @design.estate/dees-catalog
+Purpose: A component library of dynamic Web Components (TypeScript) for building modern web apps.
+Tech stack: TypeScript (ES2022, NodeNext), decorators, custom elements via @design.estate/dees-element (Lit-style), bundling with esbuild via @git.zone/tsbundle, TypeScript building via @git.zone/tsbuild (tsfolders), tests with @git.zone/tstest, various UI libs (tiptap, apexcharts, monaco-editor runtime via CDN), DOM helpers via @design.estate/dees-domtools.
+Structure: 
+- ts_web/: source of web components and pages
+- dist_ts_web/: transpiled TS output
+- dist_bundle/: production bundle (bundle.js + map)
+- test/: tests
+- html/: static demo assets
+Key configs: tsconfig.json sets ES2022, NodeNext module/resolution, decorators enabled, skipLibCheck enabled to avoid third-party d.ts issues.
+Entrypoints: ts_web/index.ts for bundling; custom elements annotated with @customElement.
--- a/.serena/memories/style_and_conventions.md
+++ b/.serena/memories/style_and_conventions.md
@@ -0,0 +1,5 @@
+Language: TypeScript, ES2022 target, NodeNext module + resolution.
+Patterns: Web Components with @customElement decorators; class-based components extending DeesElement; styles via css/cssManager; template render via html tagged literal.
+Typing: Prefer explicit types where practical; tolerate `any` for external browser-injected libs (e.g., monaco) to keep build healthy.
+Config: skipLibCheck enabled to avoid third-party d.ts breakages; exclude built declaration outputs.
+Formatting/Linting: Not explicitly configured; follow existing style (2-space indents, single quotes often, semicolons present).
--- a/.serena/memories/suggested_commands.md
+++ b/.serena/memories/suggested_commands.md
@@ -0,0 +1,6 @@
+Build: pnpm run build
+Watch: pnpm run watch
+Test: pnpm run test
+Docs: pnpm run buildDocs
+Inspect bundle size: ls -lh dist_bundle/bundle.js
+Open demo (if applicable): serve static `html/` with any web server
--- a/.serena/project.yml
+++ b/.serena/project.yml
@@ -0,0 +1,67 @@
+# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
+#  * For C, use cpp
+#  * For JavaScript, use typescript
+# Special requirements:
+#  * csharp: Requires the presence of a .sln file in the project folder.
+language: typescript
+
+# whether to use the project's gitignore file to ignore files
+# Added on 2025-04-07
+ignore_all_files_in_gitignore: true
+# list of additional paths to ignore
+# same syntax as gitignore, so you can use * and **
+# Was previously called `ignored_dirs`, please update your config if you are using that.
+# Added (renamed) on 2025-04-07
+ignored_paths: []
+
+# whether the project is in read-only mode
+# If set to true, all editing tools will be disabled and attempts to use them will result in an error
+# Added on 2025-04-18
+read_only: false
+
+# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
+# Below is the complete list of tools for convenience.
+# To make sure you have the latest list of tools, and to view their descriptions, 
+# execute `uv run scripts/print_tool_overview.py`.
+#
+#  * `activate_project`: Activates a project by name.
+#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
+#  * `create_text_file`: Creates/overwrites a file in the project directory.
+#  * `delete_lines`: Deletes a range of lines within a file.
+#  * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
+#  * `execute_shell_command`: Executes a shell command.
+#  * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
+#  * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
+#  * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
+#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
+#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
+#  * `initial_instructions`: Gets the initial instructions for the current project.
+#     Should only be used in settings where the system prompt cannot be set,
+#     e.g. in clients you have no control over, like Claude Desktop.
+#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
+#  * `insert_at_line`: Inserts content at a given line in a file.
+#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
+#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
+#  * `list_memories`: Lists memories in Serena's project-specific memory store.
+#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
+#  * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
+#  * `read_file`: Reads a file within the project directory.
+#  * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
+#  * `remove_project`: Removes a project from the Serena configuration.
+#  * `replace_lines`: Replaces a range of lines within a file with new content.
+#  * `replace_symbol_body`: Replaces the full definition of a symbol.
+#  * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
+#  * `search_for_pattern`: Performs a search for a pattern in the project.
+#  * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
+#  * `switch_modes`: Activates modes by providing a list of their names
+#  * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
+#  * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
+#  * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
+#  * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
+excluded_tools: []
+
+# initial prompt for the project. It will always be given to the LLM upon activating the project
+# (contrary to the memories, which are loaded on demand).
+initial_prompt: ""
+
+project_name: "dees-catalog"
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,66 @@
 # Changelog

+## 2025-09-16 - 1.11.6 - fix(dees-table)
+Improve Lucene range comparisons, pin monaco-editor to 0.52.2, and add local dev metadata
+
+- Fix lucene inRange behavior to correctly compare homogeneous types (strings, numbers, dates) and fall back to string comparison when needed (ts_web/elements/dees-table/lucene.ts).
+- Pin monaco-editor to 0.52.2 in package.json to avoid a breaking upgrade regression observed with ^0.53.0.
+- Add local development/tooling metadata and conveniences: .claude/settings.local.json (tool permissions) and .serena/ memory files (done_checklist, project_overview, style_and_conventions, suggested_commands).
+- Minor housekeeping: update project dev docs / memories to capture build/test/checklist guidance.
+
+## 2025-09-16 - 1.11.5 - fix(ci)
+Add local Claude agent settings for CI tooling
+
+- Add .claude/settings.local.json to configure local Claude agent permissions
+- Allow Bash commands matching pnpm run:* and the mcp__zen__chat permission for development tooling
+
+## 2025-09-10 - 1.11.4 - fix(readme)
+Rewrite and expand README with Quick Start, feature highlights, demos and usage examples; add local Claude settings file
+
+- Completely rewritten and reorganized README: added Quick Start, component highlights, usage examples, demos, development workflow, troubleshooting and links.
+- Added .claude/settings.local.json with local Claude permission configuration.
+
+## 2025-09-08 - 1.11.3 - fix(dees-input-list)
+Prevent list animations from affecting scroll bounds and fix content-visibility issues in dees-input-list; add local developer settings
+
+- dees-input-list: add overflow:hidden to list items to prevent animations from altering scroll bounds and causing visual/scroll glitches
+- dees-input-list: force content-visibility/contain to visible/none to avoid unexpected scrolling/layout issues when items animate
+- Add .claude/settings.local.json with local developer permissions (allows running pnpm scripts via Claude-local tooling)
+
+## 2025-09-07 - 1.11.2 - fix(DeesFormSubmit)
+Make form submit robust by locating nearest dees-form via closest(); add local CLAUDE settings
+
+- Fix: DeesFormSubmit.submit now walks up the DOM with closest('dees-form') to find and call gatherAndDispatch on the parent form. This fixes cases where the submit button is slotted or not a direct child of the form.
+- Chore: Add .claude/settings.local.json to permit running pnpm scripts in the local CLAUDE environment (allows Bash(pnpm run:*)).
+
+## 2025-09-06 - 1.11.1 - fix(dees-input-text)
+Normalize Lucide icon names for password toggle
+
+- Updated password visibility toggle icons in dees-input-text from 'lucide:eye'/'lucide:eye-off' to 'lucide:Eye'/'lucide:EyeOff' to match Lucide exports and avoid missing icon rendering.
+
+## 2025-09-05 - 1.11.0 - feat(dees-icon)
+Add full icon list and improve dees-icon demo with copy-all functionality and UI tweaks
+
+- Added readme.icons.md containing 1900+ icon identifiers (FontAwesome + Lucide) for easy reference and tooling
+- Enhanced ts_web/elements/dees-icon.demo.ts: added a 'Copy All Icon Names' button that copies prefixed icon names (fa:..., lucide:...) to the clipboard and shows temporary feedback
+- Updated demo presentation: prefixed displayed icon names (fa: / lucide:), improved search-container spacing and added button styling for better UX
+- Changes are documentation/demo only — no production runtime component logic changed
+
+## 2025-09-05 - 1.10.12 - fix(dees-simple-appdash)
+Fix icon rendering in dees-simple-appdash to respect provided icon strings
+
+- dees-simple-appdash: stop forcing a 'lucide:' prefix when rendering view icons — use the icon string as provided.
+- Prevents incorrect/missing icons when the iconName already includes a library prefix (e.g. 'fa:' or 'lucide:').
+
+## 2025-09-05 - 1.10.11 - fix(dees-simple-appdash)
+Bump deps and fix dees-simple-appdash icon binding and terminal sizing
+
+- Updated runtime dependencies: @design.estate/dees-element -> ^2.1.2, @design.estate/dees-wcctools -> ^1.1.1, @fortawesome/* -> ^7.0.1, apexcharts -> ^5.3.4, lucide -> ^0.542.0 (compatibility/security/stability updates)
+- Updated dev tooling: @git.zone/tsbuild -> ^2.6.8, @git.zone/tstest -> ^2.3.6, @git.zone/tswatch -> ^2.2.1
+- Fix: dees-simple-appdash — use proper string interpolation for lucide icon properties (prevents incorrect icon rendering)
+- Fix: dees-simple-appdash — enforce terminal maxWidth/maxHeight to avoid overflow and improve layout stability
+- Cosmetic: small style/behavior tweaks to dees-simple-appdash (logout/terminal/wifi icon bindings corrected)
+
 ## 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

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "1.10.10",
+  "version": "1.11.6",
  "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",
@@ -16,15 +16,15 @@
  "license": "MIT",
  "dependencies": {
    "@design.estate/dees-domtools": "^2.3.3",
-    "@design.estate/dees-element": "^2.0.45",
-    "@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",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@design.estate/dees-element": "^2.1.2",
+    "@design.estate/dees-wcctools": "^1.1.1",
+    "@fortawesome/fontawesome-svg-core": "^7.0.1",
+    "@fortawesome/free-brands-svg-icons": "^7.0.1",
+    "@fortawesome/free-regular-svg-icons": "^7.0.1",
+    "@fortawesome/free-solid-svg-icons": "^7.0.1",
    "@push.rocks/smarti18n": "^1.0.4",
    "@push.rocks/smartpromise": "^4.2.0",
-    "@push.rocks/smartstring": "^4.0.15",
+    "@push.rocks/smartstring": "^4.1.0",
    "@tiptap/core": "^2.23.0",
    "@tiptap/extension-link": "^2.23.0",
    "@tiptap/extension-text-align": "^2.23.0",
@@ -33,20 +33,20 @@
    "@tiptap/starter-kit": "^2.23.0",
    "@tsclass/tsclass": "^9.2.0",
    "@webcontainer/api": "1.2.0",
-    "apexcharts": "^4.7.0",
+    "apexcharts": "^5.3.5",
    "highlight.js": "11.11.1",
    "ibantools": "^4.5.1",
-    "lucide": "^0.525.0",
-    "monaco-editor": "^0.52.2",
+    "lucide": "^0.544.0",
+    "monaco-editor": "0.52.2",
    "pdfjs-dist": "^4.10.38",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
-    "@git.zone/tsbuild": "^2.6.4",
+    "@git.zone/tsbuild": "^2.6.8",
    "@git.zone/tsbundle": "^2.5.1",
-    "@git.zone/tstest": "^2.3.1",
-    "@git.zone/tswatch": "^2.1.2",
+    "@git.zone/tstest": "^2.3.8",
+    "@git.zone/tswatch": "^2.2.1",
    "@push.rocks/projectinfo": "^5.0.2",
    "@push.rocks/tapbundle": "^6.0.3",
    "@types/node": "^22.0.0"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - puppeteer
--- a/readme.appui-architecture.md
+++ b/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
--- a/readme.icons.md
+++ b/readme.icons.md
--- a/readme.md
+++ b/readme.md
--- a/readme.playbook.md
+++ b/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.
--- a/readme.refactoring-summary.md
+++ b/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.
--- a/readme.refactoring.md
+++ b/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
--- a/test-output.log
+++ b/test-output.log
@@ -1,72 +0,0 @@
-
-> @design.estate/dees-catalog@1.10.8 test /mnt/data/lossless/design.estate/dees-catalog
-> tstest test/ --web --verbose --timeout 30 --logfile test/test.tabs-indicator.browser.ts
-
-[38;5;231m
-🔍 Test Discovery[0m
-[38;5;231m   Mode: file[0m
-[38;5;231m   Pattern: test/test.tabs-indicator.browser.ts[0m
-[38;5;113m   Found: 1 test file(s)[0m
-[38;5;33m
-▶️  test/test.tabs-indicator.browser.ts (1/1)[0m
-[38;5;231m   Runtime: chromium[0m
-running spawned compilation process
-=======> ESBUILD
-{
-  cwd: '/mnt/data/lossless/design.estate/dees-catalog',
-  from: 'test/test.tabs-indicator.browser.ts',
-  to: '/mnt/data/lossless/design.estate/dees-catalog/.nogit/tstest_cache/test__test.tabs-indicator.browser.ts.js',
-  mode: 'test',
-  argv: { bundler: 'esbuild' }
-}
-switched to /mnt/data/lossless/design.estate/dees-catalog
-building for test:
-Got no SSL certificates. Please ensure encryption using e.g. a reverse proxy
-"/test" maps to 1 handlers
- -> GET
-"*" maps to 1 handlers
- -> GET
-now listening on 3007!
-Launching puppeteer browser with arguments:
-[]
-Using executable: /usr/bin/google-chrome
-added connection. now 1 sockets connected.
-added connection. now 2 sockets connected.
-connection ended
-removed connection. 1 sockets remaining.
-connection ended
-removed connection. 0 sockets remaining.
-added connection. now 1 sockets connected.
-/favicon.ico
-could not resolve /mnt/data/lossless/design.estate/dees-catalog/.nogit/tstest_cache/favicon.ico
-/test__test.tabs-indicator.browser.ts.js
-[38;5;231m   [38;5;116mTest starting: tabs indicator positioning debug[0m[0m
-[38;5;231m   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!![0m
-[38;5;231m   Using globalThis.tapPromise[0m
-[38;5;231m   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!![0m
-connection ended
-removed connection. 0 sockets remaining.
-[38;5;33m=> [0m Stopped [38;5;215mtest/test.tabs-indicator.browser.ts[0m chromium instance and server.
-[38;5;196m
-⚠️  Error[0m
-[38;5;196m   Only 0 out of 1 completed![0m
-[38;5;196m
-⚠️  Error[0m
-[38;5;196m   The amount of received tests and expectedTests is unequal! Therefore the testfile failed[0m
-[38;5;196m   Summary: -1 passed, 1 failed of 0 tests in 2.7s[0m
-[38;5;231m
-📊 Test Summary[0m
-[38;5;231m┌────────────────────────────────┐[0m
-[38;5;231m│ Total Files:                 1 │[0m
-[38;5;231m│ Total Tests:                 0 │[0m
-[38;5;113m│ Passed:                      0 │[0m
-[38;5;113m│ Failed:                      0 │[0m
-[38;5;231m│ Duration:                 4.2s │[0m
-[38;5;231m└────────────────────────────────┘[0m
-[38;5;116m
-⏱️  Performance Metrics:[0m
-[38;5;231m   Average per test: 0ms[0m
-[38;5;113m
-ALL TESTS PASSED! 🎉[0m
-Exited NOT OK!
- ELIFECYCLE  Test failed. See above for more details.
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '1.10.1',
+  version: '1.11.6',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/dees-form-submit.ts
+++ b/ts_web/elements/dees-form-submit.ts
@@ -57,9 +57,10 @@ export class DeesFormSubmit extends DeesElement {
    if (this.disabled) {
      return;
    }
-    const parentElement: DeesForm = this.parentElement as DeesForm;
-    if (parentElement && parentElement.gatherAndDispatch) {
-      parentElement.gatherAndDispatch();
+    // Walk up the DOM tree to find the nearest dees-form element
+    const parentFormElement = this.closest('dees-form') as DeesForm;
+    if (parentFormElement && parentFormElement.gatherAndDispatch) {
+      parentFormElement.gatherAndDispatch();
    }
  }

--- a/ts_web/elements/dees-form.ts
+++ b/ts_web/elements/dees-form.ts
@@ -20,7 +20,7 @@ import { DeesInputMultitoggle } from './dees-input-multitoggle.js';
 import { DeesInputPhone } from './dees-input-phone.js';
 import { DeesInputTypelist } from './dees-input-typelist.js';
 import { DeesFormSubmit } from './dees-form-submit.js';
-import { DeesTable } from './dees-table.js';
+import { DeesTable } from './dees-table/dees-table.js';
 import { demoFunc } from './dees-form.demo.js';

 // Unified set for form input types
--- a/ts_web/elements/dees-icon.demo.ts
+++ b/ts_web/elements/dees-icon.demo.ts
@@ -40,6 +40,26 @@ export const demoFunc = () => {
  }

  // Define the functions in TS scope instead of script tags
+  const copyAllIconNames = () => {
+    // Generate complete list of all icon names with prefixes
+    const faIconsList = faIcons.map(name => `fa:${name}`);
+    const lucideIconsListPrefixed = lucideIconsList.map(name => `lucide:${name}`);
+    const allIcons = [...faIconsList, ...lucideIconsListPrefixed];
+    const textToCopy = allIcons.join('\n');
+    
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      // Show feedback
+      const currentEvent = window.event as MouseEvent;
+      const button = currentEvent.currentTarget as HTMLElement;
+      const originalText = button.textContent;
+      button.textContent = `✓ Copied ${allIcons.length} icon names!`;
+      
+      setTimeout(() => {
+        button.textContent = originalText;
+      }, 2000);
+    });
+  };
+  
  const searchIcons = (event: InputEvent) => {
    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
    // Get the demo container first, then search within it
@@ -111,6 +131,7 @@ export const demoFunc = () => {
      width: 100%;
      margin-bottom: 20px;
      display: flex;
+      gap: 10px;
    }
    
    #iconSearch {
@@ -129,6 +150,27 @@ export const demoFunc = () => {
      border-color: #e4002b;
    }
    
+    .copy-all-button {
+      padding: 12px 20px;
+      font-size: 16px;
+      border: none;
+      border-radius: 4px;
+      background: #e4002b;
+      color: #fff;
+      cursor: pointer;
+      transition: all 0.2s;
+      white-space: nowrap;
+    }
+    
+    .copy-all-button:hover {
+      background: #c4001b;
+      transform: translateY(-1px);
+    }
+    
+    .copy-all-button:active {
+      transform: translateY(0);
+    }
+    
    dees-icon {
      transition: all 0.2s ease;
      color: #ffffff;
@@ -239,6 +281,7 @@ export const demoFunc = () => {
  <div class="demoContainer">
    <div class="search-container">
      <input type="text" id="iconSearch" placeholder="Search icons..." @input=${searchIcons}>
+      <button class="copy-all-button" @click=${copyAllIconNames}>📋 Copy All Icon Names</button>
    </div>
    
    <div class="api-note">
@@ -258,7 +301,7 @@ export const demoFunc = () => {
            return html`
              <div class="iconContainer fa-icon" data-name=${iconName.toLowerCase()} @click=${() => copyIconName(iconName, 'fa')}>
                <dees-icon .icon=${prefixedName as IconWithPrefix} iconSize="24"></dees-icon>
-                <div class="iconName">${iconName}</div>
+                <div class="iconName">fa:${iconName}</div>
                <span class="copy-tooltip">Click to copy</span>
              </div>
            `;
@@ -279,7 +322,7 @@ export const demoFunc = () => {
            return html`
              <div class="iconContainer lucide-icon" data-name=${iconName.toLowerCase()} @click=${() => copyIconName(iconName, 'lucide')}>
                <dees-icon .icon=${prefixedName as IconWithPrefix} iconSize="24"></dees-icon>
-                <div class="iconName">${iconName}</div>
+                <div class="iconName">lucide:${iconName}</div>
                <span class="copy-tooltip">Click to copy</span>
              </div>
            `;
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@@ -28,6 +28,9 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
  })
  public value: boolean = false;

+  @property({ type: Boolean })
+  public indeterminate: boolean = false;
+

  constructor() {
    super();
@@ -166,6 +169,14 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
                    </svg>
                  </span>
                `
+              : this.indeterminate
+                ? html`
+                    <span class="checkmark">
+                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 12H19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </span>
+                  `
                : html``}
          </div>
          <div class="label-container">
--- a/ts_web/elements/dees-input-list.demo.ts
+++ b/ts_web/elements/dees-input-list.demo.ts
@@ -0,0 +1,275 @@
+import { html, css } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import './dees-panel.js';
+import './dees-form.js';
+import './dees-input-text.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;
+        }
+        
+        .grid-layout {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 16px;
+        }
+        
+        @media (max-width: 768px) {
+          .grid-layout {
+            grid-template-columns: 1fr;
+          }
+        }
+        
+        .output-preview {
+          margin-top: 16px;
+          padding: 16px;
+          background: #f3f4f6;
+          border-radius: 4px;
+          font-size: 12px;
+          color: #374151;
+          word-break: break-all;
+          max-height: 200px;
+          overflow-y: auto;
+        }
+        
+        @media (prefers-color-scheme: dark) {
+          .output-preview {
+            background: #2c2c2c;
+            color: #e4e4e7;
+          }
+        }
+        
+        .feature-note {
+          margin-top: 12px;
+          padding: 12px;
+          background: #eff6ff;
+          border-left: 3px solid #3b82f6;
+          border-radius: 4px;
+          font-size: 13px;
+          color: #1e40af;
+        }
+        
+        @media (prefers-color-scheme: dark) {
+          .feature-note {
+            background: #1e3a5f;
+            color: #93c5fd;
+          }
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-panel .title=${'1. Basic List Input'} .subtitle=${'Simple list management with add, edit, and delete'}>
+        <dees-input-list
+          .label=${'Shopping List'}
+          .placeholder=${'Add item to your list...'}
+          .value=${['Milk', 'Bread', 'Eggs', 'Cheese']}
+          .description=${'Double-click to edit items, or use the edit button'}
+        ></dees-input-list>
+        <div class="feature-note">
+          💡 Double-click any item to quickly edit it inline
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'2. Sortable List'} .subtitle=${'Drag and drop to reorder items'}>
+        <dees-input-list
+          .label=${'Task Priority'}
+          .placeholder=${'Add a task...'}
+          .sortable=${true}
+          .value=${[
+            'Review pull requests',
+            'Fix critical bug',
+            'Update documentation',
+            'Deploy to production',
+            'Team standup meeting'
+          ]}
+          .description=${'Drag items using the handle to reorder them'}
+        ></dees-input-list>
+        <div class="feature-note">
+          🔄 Drag the grip handle to reorder tasks by priority
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
+        <div class="grid-layout">
+          <dees-input-list
+            .label=${'Team Members (Min 2, Max 5)'}
+            .placeholder=${'Add team member...'}
+            .minItems=${2}
+            .maxItems=${5}
+            .value=${['Alice', 'Bob']}
+            .required=${true}
+            .description=${'Add 2-5 team members'}
+          ></dees-input-list>
+          
+          <dees-input-list
+            .label=${'Unique Tags (No Duplicates)'}
+            .placeholder=${'Add unique tag...'}
+            .allowDuplicates=${false}
+            .value=${['frontend', 'backend', 'database']}
+            .description=${'Duplicate items are not allowed'}
+          ></dees-input-list>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
+        <dees-input-list
+          .label=${'Important Documents'}
+          .placeholder=${'Add document name...'}
+          .confirmDelete=${true}
+          .value=${[
+            'Contract_2024.pdf',
+            'Financial_Report_Q3.xlsx',
+            'Project_Proposal.docx',
+            'Meeting_Notes.txt'
+          ]}
+          .description=${'Deletion requires confirmation for safety'}
+        ></dees-input-list>
+      </dees-panel>
+
+      <dees-panel .title=${'5. Disabled State'} .subtitle=${'Read-only list display'}>
+        <dees-input-list
+          .label=${'System Defaults'}
+          .value=${['Default Setting 1', 'Default Setting 2', 'Default Setting 3']}
+          .disabled=${true}
+          .description=${'These items cannot be modified'}
+        ></dees-input-list>
+      </dees-panel>
+
+      <dees-panel .title=${'6. Form Integration'} .subtitle=${'List input working within a form context'}>
+        <dees-form>
+          <dees-input-text
+            .label=${'Recipe Name'}
+            .placeholder=${'My Amazing Recipe'}
+            .required=${true}
+            .key=${'name'}
+          ></dees-input-text>
+          
+          <div class="grid-layout">
+            <dees-input-list
+              .label=${'Ingredients'}
+              .placeholder=${'Add ingredient...'}
+              .required=${true}
+              .minItems=${3}
+              .key=${'ingredients'}
+              .sortable=${true}
+              .value=${[
+                '2 cups flour',
+                '1 cup sugar',
+                '3 eggs'
+              ]}
+              .description=${'Add at least 3 ingredients'}
+            ></dees-input-list>
+            
+            <dees-input-list
+              .label=${'Instructions'}
+              .placeholder=${'Add instruction step...'}
+              .required=${true}
+              .minItems=${2}
+              .key=${'instructions'}
+              .sortable=${true}
+              .value=${[
+                'Preheat oven to 350°F',
+                'Mix dry ingredients'
+              ]}
+              .description=${'Add cooking instructions in order'}
+            ></dees-input-list>
+          </div>
+          
+          <dees-input-text
+            .label=${'Notes'}
+            .inputType=${'textarea'}
+            .placeholder=${'Any special notes or tips...'}
+            .key=${'notes'}
+          ></dees-input-text>
+          
+          <dees-form-submit .text=${'Save Recipe'}></dees-form-submit>
+        </dees-form>
+      </dees-panel>
+
+      <dees-panel .title=${'7. Interactive Demo'} .subtitle=${'Build your own feature list and see the data'}>
+        <dees-input-list
+          id="interactive-list"
+          .label=${'Product Features'}
+          .placeholder=${'Add a feature...'}
+          .sortable=${true}
+          .confirmDelete=${false}
+          .allowDuplicates=${false}
+          .maxItems=${10}
+          @change=${(e: CustomEvent) => {
+            const preview = document.querySelector('#list-json');
+            if (preview) {
+              const data = {
+                items: e.detail.value,
+                count: e.detail.value.length,
+                timestamp: new Date().toISOString()
+              };
+              preview.textContent = JSON.stringify(data, null, 2);
+            }
+          }}
+        ></dees-input-list>
+        
+        <div class="output-preview" id="list-json">
+          {
+            "items": [],
+            "count": 0,
+            "timestamp": "${new Date().toISOString()}"
+          }
+        </div>
+        
+        <div class="feature-note">
+          ✨ Add, edit, remove, and reorder items to see the JSON output update in real-time
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'8. Advanced Configuration'} .subtitle=${'Combine all features for complex use cases'}>
+        <dees-input-list
+          .label=${'Project Milestones'}
+          .placeholder=${'Add milestone...'}
+          .value=${[
+            'Project Kickoff - Week 1',
+            'Requirements Gathering - Week 2-3',
+            'Design Phase - Week 4-6',
+            'Development Sprint 1 - Week 7-9',
+            'Testing & QA - Week 10-11',
+            'Deployment - Week 12'
+          ]}
+          .sortable=${true}
+          .confirmDelete=${true}
+          .allowDuplicates=${false}
+          .minItems=${3}
+          .maxItems=${12}
+          .required=${true}
+          .description=${'Manage project milestones (3-12 items, sortable, no duplicates)'}
+        ></dees-input-list>
+      </dees-panel>
+
+      <dees-panel .title=${'9. Empty State'} .subtitle=${'How the component looks with no items'}>
+        <dees-input-list
+          .label=${'Your Ideas'}
+          .placeholder=${'Share your ideas...'}
+          .value=${[]}
+          .description=${'Start adding items to build your list'}
+        ></dees-input-list>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;
--- a/ts_web/elements/dees-input-list.ts
+++ b/ts_web/elements/dees-input-list.ts
@@ -0,0 +1,622 @@
+import {
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { DeesInputBase } from './dees-input-base.js';
+import './dees-icon.js';
+import './dees-button.js';
+import { demoFunc } from './dees-input-list.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-list': DeesInputList;
+  }
+}
+
+@customElement('dees-input-list')
+export class DeesInputList extends DeesInputBase<DeesInputList> {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @property({ type: Array })
+  public value: string[] = [];
+
+  @property({ type: String })
+  public placeholder: string = 'Add new item...';
+
+  @property({ type: Number })
+  public maxItems: number = 0; // 0 means unlimited
+
+  @property({ type: Number })
+  public minItems: number = 0;
+
+  @property({ type: Boolean })
+  public allowDuplicates: boolean = false;
+
+  @property({ type: Boolean })
+  public sortable: boolean = false;
+
+  @property({ type: Boolean })
+  public confirmDelete: boolean = false;
+
+  @property({ type: String })
+  public validationText: string = '';
+
+  @state()
+  private inputValue: string = '';
+
+  @state()
+  private editingIndex: number = -1;
+
+  @state()
+  private editingValue: string = '';
+
+  @state()
+  private draggedIndex: number = -1;
+
+  @state()
+  private dragOverIndex: number = -1;
+
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      }
+
+      .input-wrapper {
+        width: 100%;
+      }
+
+      .list-container {
+        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: 6px;
+        overflow: hidden;
+        transition: all 0.15s ease;
+      }
+
+      .list-container:hover:not(.disabled) {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      }
+
+      .list-container:focus-within {
+        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)')};
+      }
+
+      .list-container.disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .list-items {
+        max-height: 400px;
+        overflow-y: auto;
+      }
+
+      .list-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        transition: all 0.15s ease;
+        position: relative;
+        overflow: hidden; /* Prevent animation from affecting scroll bounds */
+      }
+
+      .list-item:last-of-type {
+        border-bottom: none;
+      }
+
+      .list-item:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
+      }
+
+      .list-item.dragging {
+        opacity: 0.4;
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 10.8%)')};
+      }
+
+      .list-item.drag-over {
+        background: ${cssManager.bdTheme('hsl(210 40% 93.1%)', 'hsl(215 20.2% 13.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      }
+
+      .drag-handle {
+        display: flex;
+        align-items: center;
+        cursor: move;
+        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        transition: color 0.15s ease;
+      }
+
+      .drag-handle:hover {
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+      }
+
+      .drag-handle dees-icon {
+        width: 16px;
+        height: 16px;
+      }
+
+      .item-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        min-width: 0;
+      }
+
+      .item-text {
+        flex: 1;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        font-size: 14px;
+        line-height: 20px;
+        word-break: break-word;
+      }
+
+      .item-edit-input {
+        flex: 1;
+        padding: 4px 8px;
+        font-size: 14px;
+        font-family: inherit;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        border-radius: 4px;
+        outline: none;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .item-actions {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+      }
+
+      .action-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+      }
+
+      .action-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .action-button.save {
+        color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+      }
+
+      .action-button.save:hover {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.1)')};
+      }
+
+      .action-button.cancel {
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 50.6%)')};
+      }
+
+      .action-button.cancel:hover {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 50.6% / 0.1)')};
+      }
+
+      .action-button.delete {
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 50.6%)')};
+      }
+
+      .action-button.delete:hover {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 50.6% / 0.1)')};
+      }
+
+      .action-button dees-icon {
+        width: 14px;
+        height: 14px;
+      }
+
+      .add-item-container {
+        display: flex;
+        gap: 8px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+
+      .add-input {
+        flex: 1;
+        padding: 8px 12px;
+        font-size: 14px;
+        font-family: inherit;
+        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: 4px;
+        outline: none;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        transition: all 0.15s ease;
+      }
+
+      .add-input:focus {
+        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)')};
+      }
+
+      .add-input::placeholder {
+        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+      }
+
+      .add-input:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      .add-button {
+        padding: 8px 16px;
+      }
+
+      .empty-state {
+        padding: 32px 16px;
+        text-align: center;
+        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        font-size: 14px;
+        font-style: italic;
+      }
+
+      .validation-message {
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
+        font-size: 13px;
+        margin-top: 6px;
+        line-height: 1.5;
+      }
+
+      .description {
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        font-size: 13px;
+        margin-top: 6px;
+        line-height: 1.5;
+      }
+
+      /* Scrollbar styling */
+      .list-items::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .list-items::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .list-items::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 24.9%)')};
+        border-radius: 4px;
+      }
+
+      .list-items::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 34.9%)')};
+      }
+
+      /* Animation for adding/removing items */
+      @keyframes slideIn {
+        from {
+          opacity: 0;
+          transform: translateY(-10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .list-item {
+        animation: slideIn 0.2s ease;
+      }
+
+      /* Override any inherited contain/content-visibility that might cause scrolling issues */
+      .list-items, .list-item {
+        content-visibility: visible !important;
+        contain: none !important;
+        contain-intrinsic-size: auto !important;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        ${this.label ? html`<dees-label .label=${this.label} .required=${this.required}></dees-label>` : ''}
+        
+        <div class="list-container ${this.disabled ? 'disabled' : ''}">
+          <div class="list-items">
+            ${this.value.length > 0 ? this.value.map((item, index) => html`
+              <div
+                class="list-item ${this.draggedIndex === index ? 'dragging' : ''} ${this.dragOverIndex === index ? 'drag-over' : ''}"
+                draggable="${this.sortable && !this.disabled}"
+                @dragstart=${(e: DragEvent) => this.handleDragStart(e, index)}
+                @dragend=${this.handleDragEnd}
+                @dragover=${(e: DragEvent) => this.handleDragOver(e, index)}
+                @dragleave=${this.handleDragLeave}
+                @drop=${(e: DragEvent) => this.handleDrop(e, index)}
+              >
+                ${this.sortable && !this.disabled ? html`
+                  <div class="drag-handle">
+                    <dees-icon .icon=${'lucide:gripVertical'}></dees-icon>
+                  </div>
+                ` : ''}
+                
+                <div class="item-content">
+                  ${this.editingIndex === index ? html`
+                    <input
+                      type="text"
+                      class="item-edit-input"
+                      .value=${this.editingValue}
+                      @input=${(e: InputEvent) => this.editingValue = (e.target as HTMLInputElement).value}
+                      @keydown=${(e: KeyboardEvent) => this.handleEditKeyDown(e, index)}
+                      @blur=${() => this.saveEdit(index)}
+                    />
+                  ` : html`
+                    <div class="item-text" @dblclick=${() => !this.disabled && this.startEdit(index)}>
+                      ${item}
+                    </div>
+                  `}
+                </div>
+                
+                <div class="item-actions">
+                  ${this.editingIndex === index ? html`
+                    <button class="action-button save" @click=${() => this.saveEdit(index)}>
+                      <dees-icon .icon=${'lucide:check'}></dees-icon>
+                    </button>
+                    <button class="action-button cancel" @click=${() => this.cancelEdit()}>
+                      <dees-icon .icon=${'lucide:x'}></dees-icon>
+                    </button>
+                  ` : html`
+                    ${!this.disabled ? html`
+                      <button class="action-button" @click=${() => this.startEdit(index)}>
+                        <dees-icon .icon=${'lucide:pencil'}></dees-icon>
+                      </button>
+                      <button class="action-button delete" @click=${() => this.removeItem(index)}>
+                        <dees-icon .icon=${'lucide:trash2'}></dees-icon>
+                      </button>
+                    ` : ''}
+                  `}
+                </div>
+              </div>
+            `) : html`
+              <div class="empty-state">
+                No items added yet
+              </div>
+            `}
+          </div>
+          
+          ${!this.disabled && (!this.maxItems || this.value.length < this.maxItems) ? html`
+            <div class="add-item-container">
+              <input
+                type="text"
+                class="add-input"
+                .placeholder=${this.placeholder}
+                .value=${this.inputValue}
+                @input=${this.handleInput}
+                @keydown=${this.handleAddKeyDown}
+                ?disabled=${this.disabled}
+              />
+              <dees-button
+                class="add-button"
+                @click=${this.addItem}
+                ?disabled=${!this.inputValue.trim()}
+              >
+                <dees-icon .icon=${'lucide:plus'}></dees-icon> Add
+              </dees-button>
+            </div>
+          ` : ''}
+        </div>
+
+        ${this.validationText ? html`
+          <div class="validation-message">${this.validationText}</div>
+        ` : ''}
+        
+        ${this.description ? html`
+          <div class="description">${this.description}</div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private handleInput(e: InputEvent) {
+    this.inputValue = (e.target as HTMLInputElement).value;
+  }
+
+  private handleAddKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && this.inputValue.trim()) {
+      e.preventDefault();
+      this.addItem();
+    }
+  }
+
+  private handleEditKeyDown(e: KeyboardEvent, index: number) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.saveEdit(index);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this.cancelEdit();
+    }
+  }
+
+  private addItem() {
+    const trimmedValue = this.inputValue.trim();
+    if (!trimmedValue) return;
+
+    if (!this.allowDuplicates && this.value.includes(trimmedValue)) {
+      this.validationText = 'This item already exists in the list';
+      setTimeout(() => this.validationText = '', 3000);
+      return;
+    }
+
+    if (this.maxItems && this.value.length >= this.maxItems) {
+      this.validationText = `Maximum ${this.maxItems} items allowed`;
+      setTimeout(() => this.validationText = '', 3000);
+      return;
+    }
+
+    this.value = [...this.value, trimmedValue];
+    this.inputValue = '';
+    this.validationText = '';
+    
+    // Clear the input
+    const input = this.shadowRoot?.querySelector('.add-input') as HTMLInputElement;
+    if (input) {
+      input.value = '';
+      input.focus();
+    }
+
+    this.emitChange();
+  }
+
+  private startEdit(index: number) {
+    this.editingIndex = index;
+    this.editingValue = this.value[index];
+    
+    // Focus the input after render
+    this.updateComplete.then(() => {
+      const input = this.shadowRoot?.querySelector('.item-edit-input') as HTMLInputElement;
+      if (input) {
+        input.focus();
+        input.select();
+      }
+    });
+  }
+
+  private saveEdit(index: number) {
+    const trimmedValue = this.editingValue.trim();
+    
+    if (!trimmedValue) {
+      this.cancelEdit();
+      return;
+    }
+
+    if (!this.allowDuplicates && trimmedValue !== this.value[index] && this.value.includes(trimmedValue)) {
+      this.validationText = 'This item already exists in the list';
+      setTimeout(() => this.validationText = '', 3000);
+      return;
+    }
+
+    const newValue = [...this.value];
+    newValue[index] = trimmedValue;
+    this.value = newValue;
+    
+    this.editingIndex = -1;
+    this.editingValue = '';
+    this.validationText = '';
+    this.emitChange();
+  }
+
+  private cancelEdit() {
+    this.editingIndex = -1;
+    this.editingValue = '';
+  }
+
+  private async removeItem(index: number) {
+    if (this.confirmDelete) {
+      const confirmed = await this.showConfirmDialog(`Delete "${this.value[index]}"?`);
+      if (!confirmed) return;
+    }
+
+    this.value = this.value.filter((_, i) => i !== index);
+    this.emitChange();
+  }
+
+  private async showConfirmDialog(message: string): Promise<boolean> {
+    // For now, use native confirm. In production, this should use a proper modal
+    return confirm(message);
+  }
+
+  // Drag and drop handlers
+  private handleDragStart(e: DragEvent, index: number) {
+    if (!this.sortable || this.disabled) return;
+    
+    this.draggedIndex = index;
+    e.dataTransfer!.effectAllowed = 'move';
+    e.dataTransfer!.setData('text/plain', index.toString());
+  }
+
+  private handleDragEnd() {
+    this.draggedIndex = -1;
+    this.dragOverIndex = -1;
+  }
+
+  private handleDragOver(e: DragEvent, index: number) {
+    if (!this.sortable || this.disabled) return;
+    
+    e.preventDefault();
+    e.dataTransfer!.dropEffect = 'move';
+    this.dragOverIndex = index;
+  }
+
+  private handleDragLeave() {
+    this.dragOverIndex = -1;
+  }
+
+  private handleDrop(e: DragEvent, dropIndex: number) {
+    if (!this.sortable || this.disabled) return;
+    
+    e.preventDefault();
+    const draggedIndex = parseInt(e.dataTransfer!.getData('text/plain'));
+    
+    if (draggedIndex !== dropIndex) {
+      const newValue = [...this.value];
+      const [draggedItem] = newValue.splice(draggedIndex, 1);
+      newValue.splice(dropIndex, 0, draggedItem);
+      this.value = newValue;
+      this.emitChange();
+    }
+    
+    this.draggedIndex = -1;
+    this.dragOverIndex = -1;
+  }
+
+  private emitChange() {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+    this.changeSubject.next(this);
+  }
+
+  public getValue(): string[] {
+    return this.value;
+  }
+
+  public setValue(value: string[]): void {
+    this.value = value || [];
+  }
+
+  public async validate(): Promise<boolean> {
+    if (this.required && (!this.value || this.value.length === 0)) {
+      this.validationText = 'At least one item is required';
+      return false;
+    }
+    
+    if (this.minItems && this.value.length < this.minItems) {
+      this.validationText = `At least ${this.minItems} items required`;
+      return false;
+    }
+    
+    this.validationText = '';
+    return true;
+  }
+}
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@@ -231,7 +231,7 @@ export class DeesInputText extends DeesInputBase {
          ${this.isPasswordBool
            ? html`
                <div class="showPassword" @click=${this.togglePasswordView}>
-                  <dees-icon .icon=${this.showPasswordBool ? 'lucide:eye' : 'lucide:eye-off'}></dees-icon>
+                  <dees-icon .icon=${this.showPasswordBool ? 'lucide:Eye' : 'lucide:EyeOff'}></dees-icon>
                </div>
              `
            : html``}
--- a/ts_web/elements/dees-simple-appdash.ts
+++ b/ts_web/elements/dees-simple-appdash.ts
@@ -238,7 +238,7 @@ export class DeesSimpleAppDash extends DeesElement {
        <div class="appbar">
          <div>
            <div class="sidebar-header">
-              <dees-icon .icon="lucide:grid3x3" style="font-size: 18px;"></dees-icon>
+              <dees-icon .icon="${'lucide:grid3x3'}" style="font-size: 18px;"></dees-icon>
              <div class="appName">${this.name}</div>
            </div>
            <div class="viewTabs-container">
@@ -250,7 +250,7 @@ export class DeesSimpleAppDash extends DeesElement {
                      @click=${() => this.loadView(view)}
                    >
                      ${view.iconName ? html`
-                        <dees-icon .icon="${`lucide:${view.iconName}`}"></dees-icon>
+                        <dees-icon .icon="${`${view.iconName}`}"></dees-icon>
                      ` : ''}
                      <span style="flex: 1;">${view.name}</span>
                    </div>
@@ -263,7 +263,7 @@ export class DeesSimpleAppDash extends DeesElement {
            <div class="action" @click=${() => {
              this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
            }}>
-              <dees-icon .icon="lucide:logOut"></dees-icon>
+              <dees-icon .icon="${'lucide:logOut'}"></dees-icon>
              <span>Logout</span>
            </div>
          </div>
@@ -273,11 +273,11 @@ export class DeesSimpleAppDash extends DeesElement {
        </div>
        <div class="controlbar">
          <div class="control">
-            <dees-icon .icon="lucide:wifi"></dees-icon>
+            <dees-icon .icon="${'lucide:wifi'}"></dees-icon>
            <span>Connected</span>
          </div>
          <div class="control" @click=${this.launchTerminal}>
-            <dees-icon .icon="lucide:terminal"></dees-icon>
+            <dees-icon .icon="${'lucide:terminal'}"></dees-icon>
            <span>Terminal</span>
          </div>
        </div>
@@ -319,6 +319,8 @@ export class DeesSimpleAppDash extends DeesElement {
    terminal.style.transition = 'all 0.2s';
    terminal.style.background = '#000';
    terminal.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+    terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
+    terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
    
    // Add close button to terminal
    terminal.addEventListener('close', () => this.closeTerminal());
--- a/ts_web/elements/dees-table.demo.ts
+++ b/ts_web/elements/dees-table.demo.ts
@@ -1,432 +0,0 @@
-import { type ITableAction } from './dees-table.js';
-import * as plugins from './00plugins.js';
-import { html, css, cssManager } from '@design.estate/dees-element';
-
-interface ITableDemoData {
-  date: string;
-  amount: string;
-  description: string;
-}
-
-export const demoFunc = () => html`
-  <style>
-    ${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-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>
-`;
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -1,920 +0,0 @@
-import * as plugins from './00plugins.js';
-import { demoFunc } from './dees-table.demo.js';
-import { cssGeistFontFamily } from './00fonts.js';
-import {
-  customElement,
-  html,
-  DeesElement,
-  property,
-  type TemplateResult,
-  cssManager,
-  css,
-  directives,
-} from '@design.estate/dees-element';
-
-import { DeesContextmenu } from './dees-contextmenu.js';
-
-import * as domtools from '@design.estate/dees-domtools';
-import { type TIconKey } from './dees-icon.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-table': DeesTable<any>;
-  }
-}
-
-// interfaces
-export interface ITableAction<T = any> {
-  name: string;
-  iconName: TIconKey;
-  /**
-   * the table behaviour to use for this action
-   * e.g. upload: allows to upload files to the table
-   */
-  useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
-  /**
-   * the type of the action
-   */
-  type: (
-    | 'inRow'
-    | 'contextmenu'
-    | 'doubleClick'
-    | 'footer'
-    | 'header'
-    | 'preview'
-    | 'keyCombination'
-  )[];
-  /**
-   * allows to check if the action is relevant for the given item
-   * @param itemArg
-   * @returns
-   */
-  actionRelevancyCheckFunc?: (itemArg: T) => boolean;
-  /**
-   * the actual action function implementation
-   * @param itemArg
-   * @returns
-   */
-  actionFunc: (actionDataArg: ITableActionDataArg<T>) => Promise<any>;
-}
-
-export interface ITableActionDataArg<T> {
-  item: T;
-  table: DeesTable<T>;
-}
-
-export type TDisplayFunction<T = any> = (itemArg: T) => object;
-
-// the table implementation
-@customElement('dees-table')
-export class DeesTable<T> extends DeesElement {
-  public static demo = demoFunc;
-
-  // INSTANCE
-  @property({
-    type: String,
-  })
-  public heading1: string = 'heading 1';
-
-  @property({
-    type: String,
-  })
-  public heading2: string = 'heading 2';
-
-  @property({
-    type: Array,
-  })
-  public data: T[] = [];
-
-  // dees-form compatibility -----------------------------------------
-  @property({
-    type: String,
-  })
-  public key: string;
-
-  @property({
-    type: String,
-  })
-  public label: string;
-
-  @property({
-    type: Boolean,
-  })
-  public disabled: boolean = false;
-
-  @property({
-    type: Boolean,
-  })
-  public required: boolean = false;
-
-  get value() {
-    return this.data;
-  }
-  set value(_valueArg) {}
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
-  // end dees-form compatibility -----------------------------------------
-
-  /**
-   * What does a row of data represent?
-   */
-  @property({
-    type: String,
-    reflect: true,
-  })
-  public dataName: string;
-
-
-  @property({
-    type: Boolean,
-  })
-  searchable: boolean = true;
-
-  @property({
-    type: Array,
-  })
-  public dataActions: ITableAction<T>[] = [];
-
-  @property({
-    attribute: false,
-  })
-  public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;
-
-  @property({
-    attribute: false,
-  })
-  public reverseDisplayFunction: (itemArg: any) => T = (itemArg: any) => itemArg as T;
-
-  @property({
-    type: Object,
-  })
-  public selectedDataRow: T;
-
-  @property({
-    type: Array,
-  })
-  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();
-
-  public dataChangeSubject = new domtools.plugins.smartrx.rxjs.Subject();
-
-  constructor() {
-    super();
-  }
-
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        width: 100%;
-      }
-
-      .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: space-between;
-        align-items: center;
-        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 {
-        font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: 2px;
-      }
-
-      .headingSeparation {
-        display: none;
-      }
-
-      .headerActions {
-        user-select: none;
-        display: flex;
-        flex-direction: row;
-        gap: 8px;
-      }
-      
-      .headerAction {
-        display: flex;
-        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('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 {
-        width: 14px;
-        height: 14px;
-      }
-
-      .searchGrid {
-        display: grid;
-        grid-gap: 16px;
-        grid-template-columns: 1fr 200px;
-        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;
-        padding: 0px 24px;
-        border-bottom-width: 0px;
-      }
-
-      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%)')};
-      }
-      
-      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%)')};
-      }
-      
-      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;
-      }
-      
-      /* 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%)')};
-      }
-      
-      :host([show-horizontal-lines]) tbody tr:first-child {
-        border-top: none;
-      }
-      
-      :host([show-horizontal-lines]) tbody tr:last-child {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-      }
-      
-      tbody tr:hover {
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
-      }
-      
-      /* 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%)')};
-      }
-
-      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 {
-        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;
-      }
-      
-      :host([show-vertical-lines]) th {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-      }
-      
-      td {
-        padding: 12px 24px;
-        vertical-align: middle;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-      }
-      
-      :host([show-vertical-lines]) td {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-      }
-      
-      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 {
-        position: absolute;
-        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;
-        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;
-        gap: 4px;
-      }
-      
-      .action {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-        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('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('hsl(210 40% 96.1%)', 'hsl(0 0% 11.8%)')};
-      }
-      
-      .action dees-icon {
-        width: 16px;
-        height: 16px;
-      }
-
-      .footer {
-        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 {
-        font-weight: 500;
-      }
-
-      .footerActions {
-        display: flex;
-        gap: 8px;
-      }
-
-      .footerActions .footerAction {
-        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('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 {
-        width: 14px;
-        height: 14px;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <div class="mainbox">
-        <!-- the heading part -->
-        <div class="header">
-          <div class="headingContainer">
-            <div class="heading heading1">${this.label || this.heading1}</div>
-            <div class="heading heading2">${this.heading2}</div>
-          </div>
-          <div class="headerActions">
-            ${directives.resolveExec(async () => {
-              const resultArray: TemplateResult[] = [];
-              for (const action of this.dataActions) {
-                if (!action.type.includes('header')) continue;
-                resultArray.push(
-                  html`<div
-                    class="headerAction"
-                    @click=${() => {
-                      action.actionFunc({
-                        item: this.selectedDataRow,
-                        table: this,
-                      });
-                    }}
-                  >
-                    ${action.iconName
-                      ? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
-                          ${action.name}`
-                      : action.name}
-                  </div>`
-                );
-              }
-              return resultArray;
-            })}
-          </div>
-        </div>
-        <div class="headingSeparation"></div>
-        <div class="searchGrid hidden">
-          <dees-input-text
-            .label=${'lucene syntax search'}
-            .description=${`
-              You can use the lucene syntax to search for data, e.g.:
-              
-              \`\`\`
-              name: "john" AND age: 18
-              \`\`\`
-              
-            `}
-          ></dees-input-text>
-          <dees-input-multitoggle
-            .label=${'search mode'}
-            .options=${['table', 'data', 'server']}
-            .selectedOption=${'table'}
-            .description=${`
-              There are three basic modes:
-              
-              * table: only searches data already in the table
-              * data: searches original data, ignoring table transforms
-              * server: searches data on the server
-              
-            `}
-          ></dees-input-multitoggle>
-        </div>
-
-        <!-- the actual table -->
-        <style></style>
-        ${this.data.length > 0
-          ? (() => {
-              // Only pick up the keys from the first transformed data object
-              // as all data objects are assumed to have the same structure
-              const firstTransformedItem = this.displayFunction(this.data[0]);
-              const headings: string[] = Object.keys(firstTransformedItem);
-              return html`
-                <table>
-                  <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 => {
-                      if (elementArg.tagName === 'TR') {
-                        return elementArg;
-                      } else {
-                        return getTr(elementArg.parentElement);
-                      }
-                    };
-                    return html`
-                      <tr
-                        @click=${() => {
-                          this.selectedDataRow = itemArg;
-                        }}
-                        @dragenter=${async (eventArg: DragEvent) => {
-                          eventArg.preventDefault();
-                          eventArg.stopPropagation();
-                          const realTarget = getTr(eventArg.target as HTMLElement);
-                          console.log('dragenter');
-                          console.log(realTarget);
-                          setTimeout(() => {
-                            realTarget.classList.add('hasAttachment');
-                          }, 0);
-                        }}
-                        @dragleave=${async (eventArg: DragEvent) => {
-                          eventArg.preventDefault();
-                          eventArg.stopPropagation();
-                          const realTarget = getTr(eventArg.target as HTMLElement);
-                          realTarget.classList.remove('hasAttachment');
-                        }}
-                        @dragover=${async (eventArg: DragEvent) => {
-                          eventArg.preventDefault();
-                        }}
-                        @drop=${async (eventArg: DragEvent) => {
-                          eventArg.preventDefault();
-                          const newFiles = [];
-                          for (const file of Array.from(eventArg.dataTransfer.files)) {
-                            this.files.push(file);
-                            newFiles.push(file);
-                            this.requestUpdate();
-                          }
-                          const result: File[] = this.fileWeakMap.get(itemArg as object);
-                          if (!result) {
-                            this.fileWeakMap.set(itemArg as object, newFiles);
-                          } else {
-                            result.push(...newFiles);
-                          }
-                        }}
-                        @contextmenu=${async (eventArg: MouseEvent) => {
-                          DeesContextmenu.openContextMenuWithOptions(
-                            eventArg,
-                            this.getActionsForType('contextmenu').map((action) => {
-                              const menuItem: plugins.tsclass.website.IMenuItem = {
-                                name: action.name,
-                                iconName: action.iconName as any,
-                                action: async () => {
-                                  await action.actionFunc({
-                                    item: itemArg,
-                                    table: this,
-                                  });
-                                  return null;
-                                },
-                              };
-                              return menuItem;
-                            })
-                          );
-                        }}
-                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
-                      >
-                        ${headings.map(
-                          (headingArg) => html`
-                            <td
-                              @dblclick=${(e: Event) => {
-                                if (this.editableFields.includes(headingArg)) {
-                                  this.handleCellEditing(e, itemArg, headingArg);
-                                } else {
-                                  const wantedAction = this.dataActions.find((actionArg) =>
-                                    actionArg.type.includes('doubleClick')
-                                  );
-                                  if (wantedAction) {
-                                    wantedAction.actionFunc({
-                                      item: itemArg,
-                                      table: this,
-                                    });
-                                  }
-                                }
-                              }}
-                            >
-                              <div class="innerCellContainer">${transformedItem[headingArg]}</div>
-                            </td>
-                          `
-                        )}
-                        ${(() => {
-                          if (this.dataActions && this.dataActions.length > 0) {
-                            return html`
-                              <td>
-                                <div class="actionsContainer">
-                                  ${this.getActionsForType('inRow').map(
-                                    (actionArg) => html`
-                                        <div
-                                          class="action"
-                                          @click=${() =>
-                                            actionArg.actionFunc({
-                                              item: itemArg,
-                                              table: this,
-                                            })}
-                                        >
-                                          ${actionArg.iconName
-                                            ? html`
-                                                <dees-icon
-                                                  .icon=${actionArg.iconName}
-                                                ></dees-icon>
-                                              `
-                                            : actionArg.name}
-                                        </div>
-                                      `
-                                    )}
-                                </div>
-                              </td>
-                            `;
-                          }
-                        })()}
-                      </tr>
-                    `;
-                  })}
-                  </tbody>
-                </table>
-              `;
-            })()
-          : html` <div class="noDataSet">No data set!</div> `}
-        <div class="footer">
-          <div class="tableStatistics">
-            ${this.data.length} ${this.dataName || 'data rows'} (total) |
-            ${this.selectedDataRow ? '# ' + `${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
-            selected
-          </div>
-          <div class="footerActions">
-            ${directives.resolveExec(async () => {
-              const resultArray: TemplateResult[] = [];
-              for (const action of this.dataActions) {
-                if (!action.type.includes('footer')) continue;
-                resultArray.push(
-                  html`<div
-                    class="footerAction"
-                    @click=${() => {
-                      action.actionFunc({
-                        item: this.selectedDataRow,
-                        table: this,
-                      });
-                    }}
-                  >
-                    ${action.iconName
-                      ? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
-                          ${action.name}`
-                      : action.name}
-                  </div>`
-                );
-              }
-              return resultArray;
-            })}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  public async firstUpdated() {
-    
-  }
-
-  public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
-    super.updated(changedProperties);
-    this.determineColumnWidths();
-    if (this.searchable) {
-      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
-      if (!existing) {
-        this.dataActions.unshift({
-          name: 'Search',
-          iconName: 'magnifyingGlass',
-          type: ['header'],
-          actionFunc: async () => {
-            console.log('open search');
-            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
-            searchGrid.classList.toggle('hidden');
-          }
-        });
-        console.log(this.dataActions);
-        this.requestUpdate();
-      };
-    }
-  }
-
-  public async determineColumnWidths() {
-    const domtools = await this.domtoolsPromise;
-    await domtools.convenience.smartdelay.delayFor(0);
-    // Get the table element
-    const table = this.shadowRoot.querySelector('table');
-    if (!table) return;
-
-    // Get the first row's cells to measure the widths
-    const cells = table.rows[0].cells;
-
-    const handleColumnByIndex = async (i: number, waitForRenderArg: boolean = false) => {
-      const done = plugins.smartpromise.defer();
-      const cell = cells[i];
-
-      // Get computed width
-      const width = window.getComputedStyle(cell).width;
-      if (cell.textContent.includes('Actions')) {
-        const neededWidth =
-          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
-        cell.style.width = `${Math.max(neededWidth, 68)}px`;
-      } else {
-        cell.style.width = width;
-      }
-      if (waitForRenderArg) {
-        requestAnimationFrame(() => {
-          done.resolve();
-        });
-        await done.promise;
-      }
-    };
-
-    if (cells[cells.length - 1].textContent.includes('Actions')) {
-      await handleColumnByIndex(cells.length - 1, true);
-    }
-
-    for (let i = 0; i < cells.length; i++) {
-      if (cells[i].textContent.includes('Actions')) {
-        continue;
-      }
-      await handleColumnByIndex(i);
-    }
-    table.style.tableLayout = 'fixed';
-  }
-
-  getActionsForType(typeArg: ITableAction['type'][0]) {
-    const actions: ITableAction[] = [];
-    for (const action of this.dataActions) {
-      if (!action.type.includes(typeArg)) continue;
-      actions.push(action);
-    }
-    return actions;
-  }
-
-  async handleCellEditing(event: Event, itemArg: T, key: string) {
-    await this.domtoolsPromise;
-    const target = event.target as HTMLElement;
-    const originalColor = target.style.color;
-    target.style.color = 'transparent';
-    const transformedItem = this.displayFunction(itemArg);
-    const initialValue = (transformedItem[key] as unknown as string) || '';
-    // Create an input element
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.value = initialValue;
-
-    const blurInput = async (blurArg = true, saveArg = false) => {
-      if (blurArg) {
-        input.blur();
-      }
-      if (saveArg) {
-        itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
-        this.changeSubject.next(this);
-      }
-      input.remove();
-      target.style.color = originalColor;
-      this.requestUpdate();
-    };
-
-    // When the input loses focus or the Enter key is pressed, update the data
-    input.addEventListener('blur', () => {
-      blurInput(false, false);
-    });
-    input.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        blurInput(true, true); // This will trigger the blur event handler above
-      }
-    });
-
-    // Replace the cell's content with the input
-    target.appendChild(input);
-    input.focus();
-  }
-}
--- a/ts_web/elements/dees-table/data.ts
+++ b/ts_web/elements/dees-table/data.ts
@@ -0,0 +1,115 @@
+import type { Column, TDisplayFunction } from './types.js';
+
+export function computeColumnsFromDisplayFunction<T>(
+  displayFunction: TDisplayFunction<T>,
+  data: T[]
+): Column<T>[] {
+  if (!data || data.length === 0) return [];
+  const firstTransformedItem = displayFunction(data[0]);
+  const keys: string[] = Object.keys(firstTransformedItem);
+  return keys.map((key) => ({
+    key,
+    header: key,
+    value: (row: T) => displayFunction(row)[key],
+  }));
+}
+
+export function computeEffectiveColumns<T>(
+  columns: Column<T>[] | undefined,
+  augmentFromDisplayFunction: boolean,
+  displayFunction: TDisplayFunction<T>,
+  data: T[]
+): Column<T>[] {
+  const base = (columns || []).slice();
+  if (!augmentFromDisplayFunction) return base;
+  const fromDisplay = computeColumnsFromDisplayFunction(displayFunction, data);
+  const existingKeys = new Set(base.map((c) => String(c.key)));
+  for (const col of fromDisplay) {
+    if (!existingKeys.has(String(col.key))) {
+      base.push(col);
+    }
+  }
+  return base;
+}
+
+export function getCellValue<T>(row: T, col: Column<T>, displayFunction?: TDisplayFunction<T>): any {
+  return col.value ? col.value(row) : (row as any)[col.key as any];
+}
+
+export function getViewData<T>(
+  data: T[],
+  effectiveColumns: Column<T>[],
+  sortKey?: string,
+  sortDir?: 'asc' | 'desc' | null,
+  filterText?: string,
+  columnFilters?: Record<string, string>,
+  filterMode: 'table' | 'data' = 'table',
+  lucenePredicate?: (row: T) => boolean
+): T[] {
+  let arr = data.slice();
+  const ft = (filterText || '').trim().toLowerCase();
+  const cf = columnFilters || {};
+  const cfKeys = Object.keys(cf).filter((k) => (cf[k] ?? '').trim().length > 0);
+  if (ft || cfKeys.length > 0) {
+    arr = arr.filter((row) => {
+      // column filters (AND across columns)
+      for (const k of cfKeys) {
+        if (filterMode === 'data') {
+          // raw object check for that key
+          const val = (row as any)[k];
+          const s = String(val ?? '').toLowerCase();
+          const needle = String(cf[k]).toLowerCase();
+          if (!s.includes(needle)) return false;
+        } else {
+          const col = effectiveColumns.find((c) => String(c.key) === k);
+          if (!col || col.hidden || col.filterable === false) continue;
+          const val = getCellValue(row, col);
+          const s = String(val ?? '').toLowerCase();
+          const needle = String(cf[k]).toLowerCase();
+          if (!s.includes(needle)) return false;
+        }
+      }
+      // global filter (OR across visible columns) or lucene predicate
+      if (ft) {
+        if (lucenePredicate) {
+          if (!lucenePredicate(row)) return false;
+          return true;
+        }
+        let any = false;
+        if (filterMode === 'data') {
+          for (const val of Object.values(row as any)) {
+            const s = String(val ?? '').toLowerCase();
+            if (s.includes(ft)) { any = true; break; }
+          }
+        } else {
+          for (const col of effectiveColumns) {
+            if (col.hidden) continue;
+            const val = getCellValue(row, col);
+            const s = String(val ?? '').toLowerCase();
+            if (s.includes(ft)) { any = true; break; }
+          }
+        }
+        if (!any) return false;
+      }
+      return true;
+    });
+  }
+  if (!sortKey || !sortDir) return arr;
+  const col = effectiveColumns.find((c) => String(c.key) === sortKey);
+  if (!col) return arr;
+  const dir = sortDir === 'asc' ? 1 : -1;
+  arr.sort((a, b) => {
+    const va = getCellValue(a, col);
+    const vb = getCellValue(b, col);
+    if (va == null && vb == null) return 0;
+    if (va == null) return -1 * dir;
+    if (vb == null) return 1 * dir;
+    if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir;
+    const sa = String(va).toLowerCase();
+    const sb = String(vb).toLowerCase();
+    if (sa < sb) return -1 * dir;
+    if (sa > sb) return 1 * dir;
+    return 0;
+  });
+  return arr;
+}
--- a/ts_web/elements/dees-table/dees-table.demo.ts
+++ b/ts_web/elements/dees-table/dees-table.demo.ts
@@ -0,0 +1,678 @@
+import { type ITableAction } from './dees-table.js';
+import * as plugins from '../00plugins.js';
+import { html, css, cssManager } from '@design.estate/dees-element';
+
+interface ITableDemoData {
+  date: string;
+  amount: string;
+  description: string;
+}
+
+export const demoFunc = () => html`
+  <style>
+    ${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-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 class="demo-section">
+        <h2 class="demo-title">Schema-First Columns (New)</h2>
+        <p class="demo-description">Defines columns explicitly and renders via schema. No displayFunction needed.</p>
+        <dees-table
+          heading1="Users (Schema-First)"
+          heading2="Columns define rendering and order"
+          .columns=${[
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'email', header: 'Email', renderer: (v: string) => html`<dees-badge>${v}</dees-badge>` },
+            { key: 'joinedAt', header: 'Joined', renderer: (v: string) => new Date(v).toLocaleDateString() },
+          ]}
+          .data=${[
+            { name: 'Alice', email: 'alice@example.com', joinedAt: '2022-08-01' },
+            { name: 'Bob', email: 'bob@example.com', joinedAt: '2021-12-11' },
+            { name: 'Carol', email: 'carol@example.com', joinedAt: '2023-03-22' },
+          ]}
+          dataName="users"
+        ></dees-table>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Partial Schema + Augment (New)</h2>
+        <p class="demo-description">Provides only the important columns; the rest are merged in from displayFunction.</p>
+        <dees-table
+          heading1="Users (Partial + Augment)"
+          heading2="Missing columns are derived"
+          .columns=${[
+            { key: 'name', header: 'Name', sortable: true },
+          ]}
+          .displayFunction=${(u: any) => ({ name: u.name, email: u.email, role: u.role })}
+          .augmentFromDisplayFunction=${true}
+          .data=${[
+            { name: 'Erin', email: 'erin@example.com', role: 'Admin' },
+            { name: 'Finn', email: 'finn@example.com', role: 'User' },
+            { name: 'Gina', email: 'gina@example.com', role: 'User' },
+          ]}
+          dataName="users"
+        ></dees-table>
+      </div>
+
+      <div class="demo-section" 
+           @selectionChange=${(e: CustomEvent) => { console.log('Selection changed', e.detail); }}
+           @search-changed=${(e: CustomEvent) => {
+             const tbl = document.getElementById('tableFilterSelectDemo') as any;
+             if (tbl) tbl.setFilterText(e.detail.value);
+           }}
+           @search-submit=${(e: CustomEvent) => {
+             const tbl = document.getElementById('tableFilterSelectDemo') as any;
+             if (tbl) tbl.setFilterText(e.detail.value);
+           }}
+      >
+        <h2 class="demo-title">Filtering + Multi-Selection (New)</h2>
+        <p class="demo-description">Use the search bar to filter rows; toggle selection via checkboxes. Click headers to sort.</p>
+        <dees-searchbar></dees-searchbar>
+        <div style="height: 12px"></div>
+        <dees-table
+          id="tableFilterSelectDemo"
+          heading1="Inventory (Filter + Select)"
+          heading2="Try typing to filter and selecting multiple rows"
+          .selectionMode=${'multi'}
+          .rowKey=${'sku'}
+          .columns=${[
+            { key: 'sku', header: 'SKU', sortable: true },
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'stock', header: 'Stock', sortable: true },
+          ]}
+          .data=${[
+            { sku: 'A-100', name: 'USB-C Cable', stock: 120 },
+            { sku: 'A-101', name: 'Wireless Mouse', stock: 55 },
+            { sku: 'A-102', name: 'Laptop Stand', stock: 18 },
+            { sku: 'B-200', name: 'Keyboard (ISO)', stock: 89 },
+            { sku: 'B-201', name: 'HDMI Adapter', stock: 0 },
+            { sku: 'C-300', name: 'Webcam 1080p', stock: 42 },
+          ]}
+          dataName="items"
+        ></dees-table>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Column Filters + Sticky Header (New)</h2>
+        <p class="demo-description">Per-column quick filters and sticky header with internal scroll. Try filtering the Name column. Uses --table-max-height var.</p>
+        <style>
+          dees-table[sticky-header] { --table-max-height: 220px; }
+        </style>
+        <dees-table
+          heading1="Employees"
+          heading2="Quick filter per column + sticky header"
+          .showColumnFilters=${true}
+          .stickyHeader=${true}
+          .columns=${[
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'email', header: 'Email', sortable: true },
+            { key: 'department', header: 'Department', sortable: true },
+          ]}
+          .data=${[
+            { name: 'Alice Johnson', email: 'alice@corp.com', department: 'Engineering' },
+            { name: 'Bob Smith', email: 'bob@corp.com', department: 'Sales' },
+            { name: 'Charlie Davis', email: 'charlie@corp.com', department: 'HR' },
+            { name: 'Diana Martinez', email: 'diana@corp.com', department: 'Engineering' },
+            { name: 'Ethan Brown', email: 'ethan@corp.com', department: 'Finance' },
+            { name: 'Fiona Clark', email: 'fiona@corp.com', department: 'Sales' },
+            { name: 'Grace Lee', email: 'grace@corp.com', department: 'Engineering' },
+            { name: 'Henry Wilson', email: 'henry@corp.com', department: 'Marketing' },
+            { name: 'Irene Walker', email: 'irene@corp.com', department: 'Finance' },
+            { name: 'Jack Turner', email: 'jack@corp.com', department: 'Support' },
+          ]}
+          dataName="employees"
+        ></dees-table>
+      </div>
+
+      <div class="demo-section"
+        @searchRequest=${async (e: CustomEvent) => {
+          const { query } = e.detail || { query: '' };
+          const table = document.getElementById('serverSearchDemo') as any;
+          const baseData = [
+            { id: 1, name: 'Alice', city: 'Berlin', title: 'Engineer' },
+            { id: 2, name: 'Bob', city: 'Paris', title: 'Designer' },
+            { id: 3, name: 'Charlie', city: 'London', title: 'Manager' },
+            { id: 4, name: 'Diana', city: 'Madrid', title: 'Engineer' },
+            { id: 5, name: 'Ethan', city: 'Rome', title: 'Support' },
+          ];
+          // Simulate async request
+          await new Promise((r) => setTimeout(r, 300));
+          const q = String(query || '').toLowerCase();
+          const filtered = q
+            ? baseData.filter((r) => Object.values(r).some((v) => String(v).toLowerCase().includes(q)))
+            : baseData;
+          table.data = filtered;
+        }}
+      >
+        <h2 class="demo-title">Server Search (New)</h2>
+        <p class="demo-description">Select Server mode, type a query, and watch the table fetch simulated results.</p>
+        <dees-table
+          id="serverSearchDemo"
+          heading1="People (Server Search)"
+          heading2="Click Search, choose Server mode, and type"
+          .columns=${[
+            { key: 'name', header: 'Name' },
+            { key: 'city', header: 'City' },
+            { key: 'title', header: 'Title' },
+          ]}
+          .data=${[
+            { id: 1, name: 'Alice', city: 'Berlin', title: 'Engineer' },
+            { id: 2, name: 'Bob', city: 'Paris', title: 'Designer' },
+            { id: 3, name: 'Charlie', city: 'London', title: 'Manager' },
+            { id: 4, name: 'Diana', city: 'Madrid', title: 'Engineer' },
+            { id: 5, name: 'Ethan', city: 'Rome', title: 'Support' },
+          ]}
+          dataName="people"
+        ></dees-table>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Wide Properties + Many Actions</h2>
+        <p class="demo-description">A table with many columns and rich actions to stress test layout and sticky Actions.</p>
+        <dees-table
+          heading1="People Directory"
+          heading2="Many properties and actions"
+          .columns=${[
+            { key: 'id', header: 'ID', sortable: true },
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'role', header: 'Role', sortable: true },
+            { key: 'department', header: 'Department', sortable: true },
+            { key: 'email', header: 'Email' },
+            { key: 'phone', header: 'Phone' },
+            { key: 'location', header: 'Location', sortable: true },
+            { key: 'status', header: 'Status', sortable: true },
+            { key: 'createdAt', header: 'Created', sortable: true },
+            { key: 'updatedAt', header: 'Updated', sortable: true },
+            { key: 'lastLogin', header: 'Last Login', sortable: true },
+            { key: 'projects', header: 'Projects' },
+            { key: 'tags', header: 'Tags' },
+            { key: 'notes', header: 'Notes' },
+          ]}
+          .data=${[
+            { id: 1, name: 'Alice Johnson', role: 'Engineer', department: 'R&D', email: 'alice@corp.com', phone: '+1 202 555 0111', location: 'Berlin', status: 'Active', createdAt: '2023-01-12', updatedAt: '2024-05-03', lastLogin: '2024-10-01', projects: 5, tags: 'typescript, ui', notes: 'Mentor' },
+            { id: 2, name: 'Bob Smith', role: 'Designer', department: 'Design', email: 'bob@corp.com', phone: '+1 202 555 0112', location: 'Paris', status: 'Active', createdAt: '2022-11-05', updatedAt: '2024-04-10', lastLogin: '2024-09-28', projects: 8, tags: 'figma, brand', notes: 'Part-time' },
+            { id: 3, name: 'Charlie Davis', role: 'Manager', department: 'Ops', email: 'charlie@corp.com', phone: '+1 202 555 0113', location: 'London', status: 'On Leave', createdAt: '2021-04-21', updatedAt: '2024-02-15', lastLogin: '2024-08-12', projects: 3, tags: 'sre, leadership', notes: '' },
+            { id: 4, name: 'Diana Martinez', role: 'Engineer', department: 'Platform', email: 'diana@corp.com', phone: '+1 202 555 0114', location: 'Madrid', status: 'Active', createdAt: '2020-06-30', updatedAt: '2024-06-25', lastLogin: '2024-10-02', projects: 6, tags: 'node, api', notes: 'On-call' },
+            { id: 5, name: 'Ethan Brown', role: 'Support', department: 'CS', email: 'ethan@corp.com', phone: '+1 202 555 0115', location: 'Rome', status: 'Inactive', createdAt: '2019-09-18', updatedAt: '2024-03-09', lastLogin: '2024-06-19', projects: 2, tags: 'zendesk', notes: 'Rehire' },
+            { id: 6, name: 'Fiona Clark', role: 'QA', department: 'QA', email: 'fiona@corp.com', phone: '+1 202 555 0116', location: 'Vienna', status: 'Active', createdAt: '2022-03-14', updatedAt: '2024-03-01', lastLogin: '2024-09-07', projects: 7, tags: 'playwright', notes: '' },
+          ]}
+          .dataActions=${[
+            { name: 'View', iconName: 'lucide:eye', type: ['inRow', 'contextmenu'], actionFunc: async ({ item }) => { console.log('view', item); } },
+            { name: 'Edit', iconName: 'lucide:edit', type: ['inRow', 'contextmenu'], actionFunc: async ({ item }) => { console.log('edit', item); } },
+            { name: 'Delete', iconName: 'lucide:trash', type: ['inRow', 'contextmenu'], actionFunc: async ({ item }) => { console.log('delete', item); } },
+            { name: 'Message', iconName: 'lucide:message-square', type: ['inRow'], actionFunc: async ({ item }) => { console.log('message', item); } },
+            { name: 'History', iconName: 'lucide:clock', type: ['inRow'], actionFunc: async ({ item }) => { console.log('history', item); } },
+            { name: 'Add New', iconName: 'lucide:plus', type: ['header'], actionFunc: async ({ table }) => { console.log('add'); } },
+            { name: 'Export CSV', iconName: 'lucide:download', type: ['header'], actionFunc: async ({ table }) => { console.log('export'); } },
+            { name: 'Bulk Delete', iconName: 'lucide:trash-2', type: ['footer'], actionFunc: async ({ table }) => { console.log('bulk delete'); } },
+          ] as ITableAction[]}
+        ></dees-table>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Scrollable Small Height</h2>
+        <p class="demo-description">Same as above, but with many items and a small fixed height to force vertical scrolling inside the table. Actions remain visible on the right; horizontal scroll appears if needed.</p>
+        <style>
+          #scrollSmallHeight { --table-max-height: 240px; }
+        </style>
+        <dees-table
+          id="scrollSmallHeight"
+          .stickyHeader=${true}
+          heading1="People Directory (Scrollable)"
+          heading2="Forced scrolling with many items"
+          .columns=${[
+            { key: 'id', header: 'ID', sortable: true },
+            { key: 'name', header: 'Name', sortable: true },
+            { key: 'role', header: 'Role', sortable: true },
+            { key: 'department', header: 'Department', sortable: true },
+            { key: 'email', header: 'Email' },
+            { key: 'phone', header: 'Phone' },
+            { key: 'location', header: 'Location', sortable: true },
+            { key: 'status', header: 'Status', sortable: true },
+            { key: 'createdAt', header: 'Created', sortable: true },
+            { key: 'updatedAt', header: 'Updated', sortable: true },
+            { key: 'lastLogin', header: 'Last Login', sortable: true },
+            { key: 'projects', header: 'Projects' },
+            { key: 'tags', header: 'Tags' },
+            { key: 'notes', header: 'Notes' },
+          ]}
+          .data=${Array.from({ length: 100 }, (_, i) => ({
+            id: i + 1,
+            name: `User ${i + 1}`,
+            role: ['Engineer','Designer','Manager','QA','Support'][i % 5],
+            department: ['R&D','Design','Ops','QA','CS'][i % 5],
+            email: `user${i+1}@corp.com`,
+            phone: `+1 202 555 ${String(1000 + i).slice(-4)}`,
+            location: ['Berlin','Paris','London','Madrid','Rome'][i % 5],
+            status: ['Active','Inactive','On Leave'][i % 3],
+            createdAt: `2023-${String((i%12)+1).padStart(2,'0')}-${String((i%28)+1).padStart(2,'0')}`,
+            updatedAt: `2024-${String(((i+3)%12)+1).padStart(2,'0')}-${String(((i+7)%28)+1).padStart(2,'0')}`,
+            lastLogin: `2024-${String(((i+6)%12)+1).padStart(2,'0')}-${String(((i+10)%28)+1).padStart(2,'0')}`,
+            projects: (i % 12),
+            tags: i % 2 ? 'typescript' : 'design',
+            notes: i % 3 ? '' : 'Note',
+          }))}
+          .dataActions=${[
+            { name: 'View', iconName: 'lucide:eye', type: ['inRow'], actionFunc: async ({ item }) => {} },
+            { name: 'Edit', iconName: 'lucide:edit', type: ['inRow'], actionFunc: async ({ item }) => {} },
+            { name: 'Delete', iconName: 'lucide:trash', type: ['inRow'], actionFunc: async ({ item }) => {} },
+          ] as ITableAction[]}
+        ></dees-table>
+      </div>
+    </div>
+  </div>
+`;
--- a/ts_web/elements/dees-table/dees-table.ts
+++ b/ts_web/elements/dees-table/dees-table.ts
@@ -0,0 +1,841 @@
+import * as plugins from '../00plugins.js';
+import { demoFunc } from './dees-table.demo.js';
+import { customElement, html, DeesElement, property, type TemplateResult, directives } from '@design.estate/dees-element';
+
+import { DeesContextmenu } from '../dees-contextmenu.js';
+import * as domtools from '@design.estate/dees-domtools';
+import { type TIconKey } from '../dees-icon.js';
+import { tableStyles } from './styles.js';
+import type { Column, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';
+import {
+  computeColumnsFromDisplayFunction as computeColumnsFromDisplayFunctionFn,
+  computeEffectiveColumns as computeEffectiveColumnsFn,
+  getCellValue as getCellValueFn,
+  getViewData as getViewDataFn,
+} from './data.js';
+import { compileLucenePredicate } from './lucene.js';
+
+export type { Column, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-table': DeesTable<any>;
+  }
+}
+
+// interfaces moved to ./types.ts and re-exported above
+
+// the table implementation
+@customElement('dees-table')
+export class DeesTable<T> extends DeesElement {
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @property({
+    type: String,
+  })
+  public heading1: string = 'heading 1';
+
+  @property({
+    type: String,
+  })
+  public heading2: string = 'heading 2';
+
+  @property({
+    type: Array,
+  })
+  public data: T[] = [];
+
+  // dees-form compatibility -----------------------------------------
+  @property({
+    type: String,
+  })
+  public key: string;
+
+  @property({
+    type: String,
+  })
+  public label: string;
+
+  @property({
+    type: Boolean,
+  })
+  public disabled: boolean = false;
+
+  @property({
+    type: Boolean,
+  })
+  public required: boolean = false;
+
+  get value() {
+    return this.data;
+  }
+  set value(_valueArg) {}
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
+  // end dees-form compatibility -----------------------------------------
+
+  /**
+   * What does a row of data represent?
+   */
+  @property({
+    type: String,
+    reflect: true,
+  })
+  public dataName: string;
+
+
+  @property({
+    type: Boolean,
+  })
+  searchable: boolean = true;
+
+  @property({
+    type: Array,
+  })
+  public dataActions: ITableAction<T>[] = [];
+
+  // schema-first columns API
+  @property({ attribute: false })
+  public columns: Column<T>[] = [];
+
+  /**
+   * Stable row identity for selection and updates. If provided as a function,
+   * it is only usable as a property (not via attribute).
+   */
+  @property({ attribute: false })
+  public rowKey?: keyof T | ((row: T) => string);
+
+  /**
+   * When true and columns are provided, merge any missing columns discovered
+   * via displayFunction into the effective schema.
+   */
+  @property({ type: Boolean })
+  public augmentFromDisplayFunction: boolean = false;
+
+  @property({
+    attribute: false,
+  })
+  public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;
+
+  @property({
+    attribute: false,
+  })
+  public reverseDisplayFunction: (itemArg: any) => T = (itemArg: any) => itemArg as T;
+
+  @property({
+    type: Object,
+  })
+  public selectedDataRow: T;
+
+  @property({
+    type: Array,
+  })
+  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();
+
+  public dataChangeSubject = new domtools.plugins.smartrx.rxjs.Subject();
+
+  // simple client-side sorting (Phase 1)
+  @property({ attribute: false })
+  private sortKey?: string;
+  @property({ attribute: false })
+  private sortDir: 'asc' | 'desc' | null = null;
+
+  // simple client-side filtering (Phase 1)
+  @property({ type: String })
+  public filterText: string = '';
+  // per-column quick filters
+  @property({ attribute: false })
+  public columnFilters: Record<string, string> = {};
+  @property({ type: Boolean, attribute: 'show-column-filters' })
+  public showColumnFilters: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })
+  public stickyHeader: boolean = false;
+
+  // search row state
+  @property({ type: String })
+  public searchMode: 'table' | 'data' | 'server' = 'table';
+  private __searchTextSub?: { unsubscribe?: () => void };
+  private __searchModeSub?: { unsubscribe?: () => void };
+  
+  // selection (Phase 1)
+  @property({ type: String })
+  public selectionMode: 'none' | 'single' | 'multi' = 'none';
+  @property({ attribute: false })
+  private selectedIds: Set<string> = new Set();
+  private _rowIdMap = new WeakMap<object, string>();
+  private _rowIdCounter = 0;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = tableStyles;
+
+  public render(): TemplateResult {
+    const usingColumns = Array.isArray(this.columns) && this.columns.length > 0;
+    const effectiveColumns: Column<T>[] = usingColumns
+      ? computeEffectiveColumnsFn(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data)
+      : computeColumnsFromDisplayFunctionFn(this.displayFunction, this.data);
+
+    const lucenePred = compileLucenePredicate<T>(
+      this.filterText,
+      this.searchMode === 'data' ? 'data' : 'table',
+      effectiveColumns
+    );
+
+    const viewData = getViewDataFn(
+      this.data,
+      effectiveColumns,
+      this.sortKey,
+      this.sortDir,
+      this.filterText,
+      this.columnFilters,
+      this.searchMode === 'data' ? 'data' : 'table',
+      lucenePred || undefined
+    );
+    (this as any)._lastViewData = viewData;
+    return html`
+      <div class="mainbox">
+        <!-- the heading part -->
+        <div class="header">
+          <div class="headingContainer">
+            <div class="heading heading1">${this.label || this.heading1}</div>
+            <div class="heading heading2">${this.heading2}</div>
+          </div>
+          <div class="headerActions">
+            ${directives.resolveExec(async () => {
+              const resultArray: TemplateResult[] = [];
+              for (const action of this.dataActions) {
+                if (!action.type.includes('header')) continue;
+                resultArray.push(
+                  html`<div
+                    class="headerAction"
+                    @click=${() => {
+                      action.actionFunc({
+                        item: this.selectedDataRow,
+                        table: this,
+                      });
+                    }}
+                  >
+                    ${action.iconName
+                      ? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
+                          ${action.name}`
+                      : action.name}
+                  </div>`
+                );
+              }
+              return resultArray;
+            })}
+          </div>
+        </div>
+        <div class="headingSeparation"></div>
+        <div class="searchGrid hidden">
+          <dees-input-text
+            .label=${'lucene syntax search'}
+            .description=${`
+              You can use the lucene syntax to search for data, e.g.:
+              
+              \`\`\`
+              name: "john" AND age: 18
+              \`\`\`
+              
+            `}
+          ></dees-input-text>
+          <dees-input-multitoggle
+            .label=${'search mode'}
+            .options=${['table', 'data', 'server']}
+            .selectedOption=${'table'}
+            .description=${`
+              There are three basic modes:
+              
+              * table: only searches data already in the table
+              * data: searches original data, ignoring table transforms
+              * server: searches data on the server
+              
+            `}
+          ></dees-input-multitoggle>
+        </div>
+
+        <!-- the actual table -->
+        <style></style>
+        ${this.data.length > 0
+          ? html`
+              <div class="tableScroll">
+              <table>
+                <thead>
+                  <tr>
+                    ${this.selectionMode !== 'none'
+                      ? html`
+                          <th style="width:42px; text-align:center;">
+                            ${this.selectionMode === 'multi'
+                              ? html`
+                                  <dees-input-checkbox
+                                    .value=${this.areAllVisibleSelected()}
+                                    .indeterminate=${this.isVisibleSelectionIndeterminate()}
+                                    @newValue=${(e: CustomEvent<boolean>) => {
+                                      e.stopPropagation();
+                                      this.setSelectVisible(e.detail === true);
+                                    }}
+                                  ></dees-input-checkbox>
+                                `
+                              : html``}
+                          </th>
+                        `
+                      : html``}
+                    ${effectiveColumns
+                      .filter((c) => !c.hidden)
+                      .map((col) => {
+                        const isSortable = !!col.sortable;
+                        const ariaSort = this.getAriaSort(col);
+                        return html`
+                          <th
+                            role="columnheader"
+                            aria-sort=${ariaSort}
+                            style="${isSortable ? 'cursor: pointer;' : ''}"
+                            @click=${() => (isSortable ? this.toggleSort(col) : null)}
+                          >
+                            ${col.header ?? (col.key as any)}
+                            ${this.renderSortIndicator(col)}
+                          </th>`;
+                      })}
+                    ${(() => {
+                      if (this.dataActions && this.dataActions.length > 0) {
+                        return html` <th class="actionsCol">Actions</th> `;
+                      }
+                    })()}
+                  </tr>
+                  ${this.showColumnFilters
+                    ? html`<tr class="filtersRow">
+                        ${this.selectionMode !== 'none'
+                          ? html`<th style="width:42px;"></th>`
+                          : html``}
+                        ${effectiveColumns
+                          .filter((c) => !c.hidden)
+                          .map((col) => {
+                            const key = String(col.key);
+                            if (col.filterable === false) return html`<th></th>`;
+                            return html`<th>
+                              <input type="text" placeholder="Filter..." .value=${this.columnFilters[key] || ''}
+                                @input=${(e: Event) => this.setColumnFilter(key, (e.target as HTMLInputElement).value)} />
+                            </th>`;
+                          })}
+                        ${(() => {
+                          if (this.dataActions && this.dataActions.length > 0) {
+                            return html` <th></th> `;
+                          }
+                        })()}
+                      </tr>`
+                    : html``}
+                </thead>
+                <tbody>
+                  ${viewData.map((itemArg, rowIndex) => {
+                    const getTr = (elementArg: HTMLElement): HTMLElement => {
+                      if (elementArg.tagName === 'TR') {
+                        return elementArg;
+                      } else {
+                        return getTr(elementArg.parentElement);
+                      }
+                    };
+                    return html`
+                      <tr
+                        @click=${() => {
+                          this.selectedDataRow = itemArg;
+                          if (this.selectionMode === 'single') {
+                            const id = this.getRowId(itemArg);
+                            this.selectedIds.clear();
+                            this.selectedIds.add(id);
+                            this.emitSelectionChange();
+                            this.requestUpdate();
+                          }
+                        }}
+                        @dragenter=${async (eventArg: DragEvent) => {
+                          eventArg.preventDefault();
+                          eventArg.stopPropagation();
+                          const realTarget = getTr(eventArg.target as HTMLElement);
+                          setTimeout(() => {
+                            realTarget.classList.add('hasAttachment');
+                          }, 0);
+                        }}
+                        @dragleave=${async (eventArg: DragEvent) => {
+                          eventArg.preventDefault();
+                          eventArg.stopPropagation();
+                          const realTarget = getTr(eventArg.target as HTMLElement);
+                          realTarget.classList.remove('hasAttachment');
+                        }}
+                        @dragover=${async (eventArg: DragEvent) => {
+                          eventArg.preventDefault();
+                        }}
+                        @drop=${async (eventArg: DragEvent) => {
+                          eventArg.preventDefault();
+                          const newFiles = [];
+                          for (const file of Array.from(eventArg.dataTransfer.files)) {
+                            this.files.push(file);
+                            newFiles.push(file);
+                            this.requestUpdate();
+                          }
+                          const result: File[] = this.fileWeakMap.get(itemArg as object);
+                          if (!result) {
+                            this.fileWeakMap.set(itemArg as object, newFiles);
+                          } else {
+                            result.push(...newFiles);
+                          }
+                        }}
+                        @contextmenu=${async (eventArg: MouseEvent) => {
+                          DeesContextmenu.openContextMenuWithOptions(
+                            eventArg,
+                            this.getActionsForType('contextmenu').map((action) => {
+                              const menuItem: plugins.tsclass.website.IMenuItem = {
+                                name: action.name,
+                                iconName: action.iconName as any,
+                                action: async () => {
+                                  await action.actionFunc({
+                                    item: itemArg,
+                                    table: this,
+                                  });
+                                  return null;
+                                },
+                              };
+                              return menuItem;
+                            })
+                          );
+                        }}
+                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
+                      >
+                        ${this.selectionMode !== 'none'
+                          ? html`<td style="width:42px; text-align:center;">
+                              <dees-input-checkbox
+                                .value=${this.isRowSelected(itemArg)}
+                                @newValue=${(e: CustomEvent<boolean>) => {
+                                  e.stopPropagation();
+                                  this.setRowSelected(itemArg, e.detail === true);
+                                }}
+                              ></dees-input-checkbox>
+                            </td>`
+                          : html``}
+                        ${effectiveColumns
+                          .filter((c) => !c.hidden)
+                          .map((col, colIndex) => {
+                            const value = getCellValueFn(itemArg, col, this.displayFunction);
+                            const content = col.renderer
+                              ? col.renderer(value, itemArg, { rowIndex, colIndex, column: col })
+                              : value;
+                            const editKey = String(col.key);
+                            return html`
+                              <td
+                                @dblclick=${(e: Event) => {
+                                  const dblAction = this.dataActions.find((actionArg) =>
+                                    actionArg.type.includes('doubleClick')
+                                  );
+                                  if (this.editableFields.includes(editKey)) {
+                                    this.handleCellEditing(e, itemArg, editKey);
+                                  } else if (dblAction) {
+                                    dblAction.actionFunc({ item: itemArg, table: this });
+                                  }
+                                }}
+                              >
+                                <div class="innerCellContainer">${content}</div>
+                              </td>
+                            `;
+                          })}
+                        ${(() => {
+                          if (this.dataActions && this.dataActions.length > 0) {
+                            return html`
+                              <td class="actionsCol">
+                                <div class="actionsContainer">
+                                  ${this.getActionsForType('inRow').map(
+                                    (actionArg) => html`
+                                      <div
+                                        class="action"
+                                        @click=${() =>
+                                          actionArg.actionFunc({
+                                            item: itemArg,
+                                            table: this,
+                                          })}
+                                      >
+                                        ${actionArg.iconName
+                                          ? html` <dees-icon .icon=${actionArg.iconName}></dees-icon> `
+                                          : actionArg.name}
+                                      </div>
+                                    `
+                                  )}
+                                </div>
+                              </td>
+                            `;
+                          }
+                        })()}
+                      </tr>`;
+                  })}
+                </tbody>
+              </table>
+              </div>
+            `
+          : html` <div class="noDataSet">No data set!</div> `}
+        <div class="footer">
+          <div class="tableStatistics">
+            ${this.data.length} ${this.dataName || 'data rows'} (total) |
+            ${this.selectedDataRow ? '# ' + `${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
+            selected
+          </div>
+          <div class="footerActions">
+            ${directives.resolveExec(async () => {
+              const resultArray: TemplateResult[] = [];
+              for (const action of this.dataActions) {
+                if (!action.type.includes('footer')) continue;
+                resultArray.push(
+                  html`<div
+                    class="footerAction"
+                    @click=${() => {
+                      action.actionFunc({
+                        item: this.selectedDataRow,
+                        table: this,
+                      });
+                    }}
+                  >
+                    ${action.iconName
+                      ? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
+                          ${action.name}`
+                      : action.name}
+                  </div>`
+                );
+              }
+              return resultArray;
+            })}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    
+  }
+
+  public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+    super.updated(changedProperties);
+    this.determineColumnWidths();
+    if (this.searchable) {
+      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
+      if (!existing) {
+        this.dataActions.unshift({
+          name: 'Search',
+          iconName: 'magnifyingGlass',
+          type: ['header'],
+          actionFunc: async () => {
+            console.log('open search');
+            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
+            searchGrid.classList.toggle('hidden');
+          }
+        });
+        console.log(this.dataActions);
+        this.requestUpdate();
+      };
+      // wire search inputs
+      this.wireSearchInputs();
+    }
+  }
+
+  private __debounceTimer?: any;
+  private debounceRun(fn: () => void, ms = 200) {
+    if (this.__debounceTimer) clearTimeout(this.__debounceTimer);
+    this.__debounceTimer = setTimeout(fn, ms);
+  }
+
+  private wireSearchInputs() {
+    const searchTextEl: any = this.shadowRoot?.querySelector('.searchGrid dees-input-text');
+    const searchModeEl: any = this.shadowRoot?.querySelector('.searchGrid dees-input-multitoggle');
+    if (searchTextEl && !this.__searchTextSub) {
+      this.__searchTextSub = searchTextEl.changeSubject.subscribe((el: any) => {
+        const val: string = el?.value ?? '';
+        this.debounceRun(() => {
+          if (this.searchMode === 'server') {
+            this.dispatchEvent(
+              new CustomEvent('searchRequest', {
+                detail: { query: val, mode: 'server' },
+                bubbles: true,
+              })
+            );
+          } else {
+            this.setFilterText(val);
+          }
+        });
+      });
+    }
+    if (searchModeEl && !this.__searchModeSub) {
+      this.__searchModeSub = searchModeEl.changeSubject.subscribe((el: any) => {
+        const mode: string = el?.selectedOption || el?.value || 'table';
+        if (mode === 'table' || mode === 'data' || mode === 'server') {
+          this.searchMode = mode as any;
+          // When switching modes, re-apply current text input
+          const val: string = searchTextEl?.value ?? '';
+          this.debounceRun(() => {
+            if (this.searchMode === 'server') {
+              this.dispatchEvent(new CustomEvent('searchRequest', { detail: { query: val, mode: 'server' }, bubbles: true }));
+            } else {
+              this.setFilterText(val);
+            }
+          });
+        }
+      });
+    }
+  }
+
+  public async determineColumnWidths() {
+    const domtools = await this.domtoolsPromise;
+    await domtools.convenience.smartdelay.delayFor(0);
+    // Get the table element
+    const table = this.shadowRoot.querySelector('table');
+    if (!table) return;
+
+    // Get the first row's cells to measure the widths
+    const cells = table.rows[0].cells;
+
+    const handleColumnByIndex = async (i: number, waitForRenderArg: boolean = false) => {
+      const done = plugins.smartpromise.defer();
+      const cell = cells[i];
+
+      // Get computed width
+      const width = window.getComputedStyle(cell).width;
+      if (cell.textContent.includes('Actions')) {
+        const neededWidth =
+          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
+        cell.style.width = `${Math.max(neededWidth, 68)}px`;
+      } else {
+        cell.style.width = width;
+      }
+      if (waitForRenderArg) {
+        requestAnimationFrame(() => {
+          done.resolve();
+        });
+        await done.promise;
+      }
+    };
+
+    if (cells[cells.length - 1].textContent.includes('Actions')) {
+      await handleColumnByIndex(cells.length - 1, true);
+    }
+
+    for (let i = 0; i < cells.length; i++) {
+      if (cells[i].textContent.includes('Actions')) {
+        continue;
+      }
+      await handleColumnByIndex(i);
+    }
+    table.style.tableLayout = 'fixed';
+  }
+
+  // compute helpers moved to ./data.ts
+
+  private toggleSort(col: Column<T>) {
+    const key = String(col.key);
+    if (this.sortKey !== key) {
+      this.sortKey = key;
+      this.sortDir = 'asc';
+    } else {
+      if (this.sortDir === 'asc') this.sortDir = 'desc';
+      else if (this.sortDir === 'desc') {
+        this.sortDir = null;
+        this.sortKey = undefined;
+      } else this.sortDir = 'asc';
+    }
+    this.dispatchEvent(
+      new CustomEvent('sortChange', {
+        detail: { key: this.sortKey, dir: this.sortDir },
+        bubbles: true,
+      })
+    );
+    this.requestUpdate();
+  }
+
+  private getAriaSort(col: Column<T>): 'none' | 'ascending' | 'descending' {
+    if (String(col.key) !== this.sortKey || !this.sortDir) return 'none';
+    return this.sortDir === 'asc' ? 'ascending' : 'descending';
+  }
+
+  private renderSortIndicator(col: Column<T>) {
+    if (String(col.key) !== this.sortKey || !this.sortDir) return html``;
+    return html`<span style="margin-left:6px; opacity:0.7;">${this.sortDir === 'asc' ? '▲' : '▼'}</span>`;
+  }
+
+  // filtering helpers
+  public setFilterText(value: string) {
+    const prev = this.filterText;
+    this.filterText = value ?? '';
+    if (prev !== this.filterText) {
+      this.dispatchEvent(
+        new CustomEvent('filterChange', {
+          detail: { text: this.filterText, columns: { ...this.columnFilters } },
+          bubbles: true,
+        })
+      );
+      this.requestUpdate();
+    }
+  }
+
+  public setColumnFilter(key: string, value: string) {
+    this.columnFilters = { ...this.columnFilters, [key]: value };
+    this.dispatchEvent(
+      new CustomEvent('filterChange', {
+        detail: { text: this.filterText, columns: { ...this.columnFilters } },
+        bubbles: true,
+      })
+    );
+    this.requestUpdate();
+  }
+
+  // selection helpers
+  private getRowId(row: T): string {
+    if (this.rowKey) {
+      if (typeof this.rowKey === 'function') return this.rowKey(row);
+      return String((row as any)[this.rowKey]);
+    }
+    const key = row as any as object;
+    if (!this._rowIdMap.has(key)) {
+      this._rowIdMap.set(key, String(++this._rowIdCounter));
+    }
+    return this._rowIdMap.get(key);
+  }
+
+  private isRowSelected(row: T): boolean {
+    return this.selectedIds.has(this.getRowId(row));
+  }
+
+  private toggleRowSelected(row: T) {
+    const id = this.getRowId(row);
+    if (this.selectionMode === 'single') {
+      this.selectedIds.clear();
+      this.selectedIds.add(id);
+    } else if (this.selectionMode === 'multi') {
+      if (this.selectedIds.has(id)) this.selectedIds.delete(id);
+      else this.selectedIds.add(id);
+    }
+    this.emitSelectionChange();
+    this.requestUpdate();
+  }
+
+  private setRowSelected(row: T, checked: boolean) {
+    const id = this.getRowId(row);
+    if (this.selectionMode === 'single') {
+      this.selectedIds.clear();
+      if (checked) this.selectedIds.add(id);
+    } else if (this.selectionMode === 'multi') {
+      if (checked) this.selectedIds.add(id);
+      else this.selectedIds.delete(id);
+    }
+    this.emitSelectionChange();
+    this.requestUpdate();
+  }
+
+  private areAllVisibleSelected(): boolean {
+    const view: T[] = (this as any)._lastViewData || [];
+    if (view.length === 0) return false;
+    for (const r of view) {
+      if (!this.selectedIds.has(this.getRowId(r))) return false;
+    }
+    return true;
+  }
+
+  private isVisibleSelectionIndeterminate(): boolean {
+    const view: T[] = (this as any)._lastViewData || [];
+    if (view.length === 0) return false;
+    let count = 0;
+    for (const r of view) {
+      if (this.selectedIds.has(this.getRowId(r))) count++;
+    }
+    return count > 0 && count < view.length;
+  }
+
+  private setSelectVisible(checked: boolean) {
+    const view: T[] = (this as any)._lastViewData || [];
+    if (checked) {
+      for (const r of view) this.selectedIds.add(this.getRowId(r));
+    } else {
+      for (const r of view) this.selectedIds.delete(this.getRowId(r));
+    }
+    this.emitSelectionChange();
+    this.requestUpdate();
+  }
+
+  private emitSelectionChange() {
+    const selectedIds = Array.from(this.selectedIds);
+    const selectedRows = this.data.filter((r) => this.selectedIds.has(this.getRowId(r)));
+    this.dispatchEvent(
+      new CustomEvent('selectionChange', {
+        detail: { selectedIds, selectedRows },
+        bubbles: true,
+      })
+    );
+  }
+
+  getActionsForType(typeArg: ITableAction['type'][0]) {
+    const actions: ITableAction[] = [];
+    for (const action of this.dataActions) {
+      if (!action.type.includes(typeArg)) continue;
+      actions.push(action);
+    }
+    return actions;
+  }
+
+  async handleCellEditing(event: Event, itemArg: T, key: string) {
+    await this.domtoolsPromise;
+    const target = event.target as HTMLElement;
+    const originalColor = target.style.color;
+    target.style.color = 'transparent';
+    const transformedItem = this.displayFunction(itemArg);
+    const initialValue = ((transformedItem as any)[key] ?? (itemArg as any)[key] ?? '') as string;
+    // Create an input element
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = initialValue;
+
+    const blurInput = async (blurArg = true, saveArg = false) => {
+      if (blurArg) {
+        input.blur();
+      }
+      if (saveArg) {
+        itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
+        this.changeSubject.next(this);
+      }
+      input.remove();
+      target.style.color = originalColor;
+      this.requestUpdate();
+    };
+
+    // When the input loses focus or the Enter key is pressed, update the data
+    input.addEventListener('blur', () => {
+      blurInput(false, false);
+    });
+    input.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        blurInput(true, true); // This will trigger the blur event handler above
+      }
+    });
+
+    // Replace the cell's content with the input
+    target.appendChild(input);
+    input.focus();
+  }
+}
--- a/ts_web/elements/dees-table/lucene.ts
+++ b/ts_web/elements/dees-table/lucene.ts
@@ -0,0 +1,170 @@
+import type { Column } from './types.js';
+
+type FilterMode = 'table' | 'data';
+
+export type RowPredicate<T> = (row: T) => boolean;
+
+interface Term {
+  field?: string; // if undefined, match across all fields
+  value?: string; // lowercased string
+  negate?: boolean;
+  range?: { lower: string; upper: string; inclusive: boolean };
+}
+
+interface Clause {
+  terms: Term[]; // AND across terms
+}
+
+interface LuceneQuery {
+  clauses: Clause[]; // OR across clauses
+}
+
+function stripQuotes(s: string): string {
+  if ((s.startsWith('"') && s.endsWith('"')) || (s.startsWith("'") && s.endsWith("'"))) {
+    return s.slice(1, -1);
+  }
+  return s;
+}
+
+function splitByOr(input: string): string[] {
+  return input.split(/\s+OR\s+/i).map((s) => s.trim()).filter(Boolean);
+}
+
+function splitByAnd(input: string): string[] {
+  return input.split(/\s+AND\s+/i).map((s) => s.trim()).filter(Boolean);
+}
+
+function parseTerm(raw: string): Term | null {
+  if (!raw) return null;
+  let negate = false;
+  // handle NOT prefix or leading '-'
+  const notMatch = raw.match(/^\s*(NOT\s+|-)\s*(.*)$/i);
+  if (notMatch) {
+    negate = true;
+    raw = notMatch[2];
+  }
+  // range: field:[lower TO upper]
+  const rangeMatch = raw.match(/^([^:\s]+)\s*:\s*\[(.*?)\s+TO\s+(.*?)\]$/i);
+  if (rangeMatch) {
+    return {
+      field: rangeMatch[1],
+      negate,
+      range: { lower: stripQuotes(rangeMatch[2]).toLowerCase(), upper: stripQuotes(rangeMatch[3]).toLowerCase(), inclusive: true },
+    };
+  }
+  // field:value (value may be quoted)
+  const m = raw.match(/^([^:\s]+)\s*:\s*("[^"]*"|'[^']*'|[^"'\s]+)$/);
+  if (m) {
+    return { field: m[1], value: stripQuotes(m[2]).toLowerCase(), negate };
+  }
+  // plain term
+  if (raw.length > 0) {
+    return { value: stripQuotes(raw).toLowerCase(), negate };
+  }
+  return null;
+}
+
+function parseLucene(input: string): LuceneQuery | null {
+  if (!input) return null;
+  const clauses = splitByOr(input).map((clauseStr) => {
+    const terms = splitByAnd(clauseStr)
+      .map(parseTerm)
+      .filter((t): t is Term => !!t && !!t.value);
+    return { terms } as Clause;
+  }).filter((c) => c.terms.length > 0);
+  if (clauses.length === 0) return null;
+  return { clauses };
+}
+
+export function compileLucenePredicate<T>(
+  input: string,
+  mode: FilterMode,
+  columns: Column<T>[]
+): RowPredicate<T> | null {
+  const ast = parseLucene(input);
+  if (!ast) return null;
+  const colMap = new Map<string, Column<T>>(
+    columns.map((c) => [String(c.key), c])
+  );
+  const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0);
+  const coerce = (s: any) => {
+    const str = String(s ?? '').toLowerCase();
+    const num = Number(str);
+    const date = Date.parse(str);
+    if (!Number.isNaN(num) && str.trim() !== '') return { t: 'n' as const, v: num };
+    if (!Number.isNaN(date)) return { t: 'd' as const, v: date };
+    return { t: 's' as const, v: str };
+  };
+  const inRange = (val: any, lower: string, upper: string) => {
+    const a = coerce(val);
+    const lo = coerce(lower);
+    const up = coerce(upper);
+    // All strings: lexical compare
+    if (a.t === 's' && lo.t === 's' && up.t === 's') {
+      const av = a.v as string;
+      return cmp(av, lo.v as string) >= 0 && cmp(av, up.v as string) <= 0;
+    }
+    // All numbers
+    if (a.t === 'n' && lo.t === 'n' && up.t === 'n') {
+      const av = a.v as number;
+      return av >= (lo.v as number) && av <= (up.v as number);
+    }
+    // All dates (as numbers)
+    if (a.t === 'd' && lo.t === 'd' && up.t === 'd') {
+      const av = a.v as number;
+      return av >= (lo.v as number) && av <= (up.v as number);
+    }
+    // Fallback: compare string forms
+    const as = String(val ?? '').toLowerCase();
+    return cmp(as, lower) >= 0 && cmp(as, upper) <= 0;
+  };
+  return (row: T) => {
+    for (const clause of ast.clauses) {
+      let clauseOk = true;
+      for (const term of clause.terms) {
+        let ok = false;
+        if (term.range && term.field) {
+          // range compare on field
+          if (mode === 'data') {
+            ok = inRange((row as any)[term.field], term.range.lower, term.range.upper);
+          } else {
+            const col = colMap.get(term.field);
+            if (!col || col.hidden) { ok = false; } else {
+              const val = col.value ? col.value(row) : (row as any)[col.key as any];
+              ok = inRange(val, term.range.lower, term.range.upper);
+            }
+          }
+        } else if (term.field && term.value != null) {
+          if (mode === 'data') {
+            const s = String((row as any)[term.field] ?? '').toLowerCase();
+            ok = s.includes(term.value);
+          } else {
+            const col = colMap.get(term.field);
+            if (!col || col.hidden === true) { ok = false; }
+            else {
+              const val = col.value ? col.value(row) : (row as any)[col.key as any];
+              const s = String(val ?? '').toLowerCase();
+              ok = s.includes(term.value);
+            }
+          }
+        } else if (term.value != null) {
+          // search across all visible/raw fields
+          if (mode === 'data') {
+            ok = Object.values(row as any).some((v) => String(v ?? '').toLowerCase().includes(term.value!));
+          } else {
+            ok = columns.some((col) => {
+              if (col.hidden) return false;
+              const val = col.value ? col.value(row) : (row as any)[col.key as any];
+              const s = String(val ?? '').toLowerCase();
+              return s.includes(term.value!);
+            });
+          }
+        }
+        if (term.negate) ok = !ok;
+        if (!ok) { clauseOk = false; break; }
+      }
+      if (clauseOk) return true;
+    }
+    return false;
+  };
+}
--- a/ts_web/elements/dees-table/styles.ts
+++ b/ts_web/elements/dees-table/styles.ts
@@ -0,0 +1,429 @@
+import { cssManager, css, type CSSResult } from '@design.estate/dees-element';
+import { cssGeistFontFamily } from '../00fonts.js';
+
+export const tableStyles: CSSResult[] = [
+  cssManager.defaultStyles,
+  css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .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: space-between;
+        align-items: center;
+        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 {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        margin-top: 2px;
+      }
+
+      .headingSeparation {
+        display: none;
+      }
+
+      .headerActions {
+        user-select: none;
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+      }
+      
+      .headerAction {
+        display: flex;
+        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('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 {
+        width: 14px;
+        height: 14px;
+      }
+
+      .searchGrid {
+        display: grid;
+        grid-gap: 16px;
+        grid-template-columns: 1fr max-content;
+        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;
+      }
+
+      @media (max-width: 900px) {
+        .searchGrid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      /* let search mode size to content (no forced width) */
+
+      .searchGrid.hidden {
+        height: 0px;
+        opacity: 0;
+        overflow: hidden;
+        padding: 0px 24px;
+        border-bottom-width: 0px;
+      }
+
+      .tableScroll {
+        /* enable horizontal scroll only when content exceeds width */
+        overflow-x: auto;
+        /* prevent vertical scroll inside the table container */
+        overflow-y: hidden;
+        /* avoid reserving extra space for classic scrollbars where possible */
+        scrollbar-gutter: stable both-edges;
+      }
+      /* Hide horizontal scrollbar entirely when not using sticky header */
+      :host(:not([sticky-header])) .tableScroll {
+        -ms-overflow-style: none; /* IE/Edge */
+        scrollbar-width: none;   /* Firefox (hides both axes) */
+      }
+      :host(:not([sticky-header])) .tableScroll::-webkit-scrollbar {
+        display: none; /* Chrome/Safari */
+      }
+      /* In sticky-header mode, hide only the horizontal scrollbar in WebKit/Blink */
+      :host([sticky-header]) .tableScroll::-webkit-scrollbar:horizontal {
+        height: 0px;
+      }
+      :host([sticky-header]) .tableScroll {
+        max-height: var(--table-max-height, 360px);
+        overflow: auto;
+      }
+
+      table {
+        /* allow table to grow wider than container so actions column can stick */
+        width: max-content;
+        min-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%)')};
+      }
+      
+      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%)')};
+      }
+      :host([sticky-header]) thead th {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+      }
+      
+      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;
+      }
+      
+      /* 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%)')};
+      }
+      
+      :host([show-horizontal-lines]) tbody tr:first-child {
+        border-top: none;
+      }
+      
+      :host([show-horizontal-lines]) tbody tr:last-child {
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
+      tbody tr:hover {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
+      }
+      
+      /* Column hover effect for better traceability */
+      td {
+        position: relative;
+      }
+      
+      td::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        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;
+      }
+
+      /* Sticky Actions column (right pinned) */
+      thead th.actionsCol,
+      tbody td.actionsCol {
+        position: sticky;
+        right: 0;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+      }
+      thead th.actionsCol { z-index: 3; }
+      tbody td.actionsCol {
+        z-index: 1;
+        box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
+      tbody tr.selected {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+      }
+
+      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 {
+        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;
+      }
+      
+      :host([show-vertical-lines]) th {
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
+      td {
+        padding: 12px 24px;
+        vertical-align: middle;
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+      }
+      
+      :host([show-vertical-lines]) td {
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      
+      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 {
+        position: absolute;
+        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;
+        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)')};
+      }
+
+      /* filter row */
+      thead tr.filtersRow th {
+        padding: 8px 12px 12px 12px;
+      }
+      thead tr.filtersRow th input[type='text'] {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 6px 8px;
+        font-size: 13px;
+        border-radius: 6px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+      }
+      .actionsContainer {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+      }
+      
+      .action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        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('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('hsl(210 40% 96.1%)', 'hsl(0 0% 11.8%)')};
+      }
+      
+      .action dees-icon {
+        width: 16px;
+        height: 16px;
+      }
+
+      .footer {
+        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 {
+        font-weight: 500;
+      }
+
+      .footerActions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .footerActions .footerAction {
+        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('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 {
+        width: 14px;
+        height: 14px;
+      }
+  `,
+];
--- a/ts_web/elements/dees-table/types.ts
+++ b/ts_web/elements/dees-table/types.ts
@@ -0,0 +1,29 @@
+import type { TemplateResult } from '@design.estate/dees-element';
+import type { TIconKey } from '../dees-icon.js';
+
+export interface ITableActionDataArg<T> {
+  item: T;
+  table: any; // avoid circular typing with DeesTable; consumers rely on shape only
+}
+
+export interface ITableAction<T = any> {
+  name: string;
+  iconName: TIconKey;
+  useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
+  type: ('inRow' | 'contextmenu' | 'doubleClick' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
+  actionRelevancyCheckFunc?: (itemArg: T) => boolean;
+  actionFunc: (actionDataArg: ITableActionDataArg<T>) => Promise<any>;
+}
+
+export interface Column<T = any> {
+  key: keyof T | string;
+  header?: string | TemplateResult;
+  value?: (row: T) => any;
+  renderer?: (value: any, row: T, ctx: { rowIndex: number; colIndex: number; column: Column<T> }) => TemplateResult | string;
+  sortable?: boolean;
+  /** whether this column participates in per-column quick filtering (default: true) */
+  filterable?: boolean;
+  hidden?: boolean;
+}
+
+export type TDisplayFunction<T = any> = (itemArg: T) => Record<string, any>;
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -32,6 +32,7 @@ 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 './dees-input-list.js';
 export * from './profilepicture/dees-input-profilepicture.js';
 export * from './dees-input-typelist.js';
 export * from './dees-input-phone.js';
@@ -56,7 +57,7 @@ export * from './dees-speechbubble.js';
 export * from './dees-spinner.js';
 export * from './dees-statsgrid.js';
 export * from './dees-stepper.js';
-export * from './dees-table.js';
+export * from './dees-table/dees-table.js';
 export * from './dees-terminal.js';
 export * from './dees-toast.js';
 export * from './dees-updater.js';
Author	SHA1	Message	Date
Juergen Kunz	a212536cfa	1.11.6 Some checks failed Default (tags) / security (push) Failing after 21s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-16 16:29:52 +00:00
Juergen Kunz	18297d54c4	fix(dees-table): Improve Lucene range comparisons, pin monaco-editor to 0.52.2, and add local dev metadata	2025-09-16 16:29:52 +00:00
Juergen Kunz	f790ca38d0	1.11.5 Some checks failed Default (tags) / security (push) Failing after 21s Details Default (tags) / test (push) Failing after 13s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-16 16:22:25 +00:00
Juergen Kunz	ce2b42ecd5	fix(ci): Add local Claude agent settings for CI tooling	2025-09-16 16:22:25 +00:00
Juergen Kunz	09e299bc2e	feat(styles): enhance table scrollbar behavior for sticky and non-sticky headers	2025-09-16 16:20:35 +00:00
Juergen Kunz	bbc7dfe29a	feat(demo): add demo sections for wide properties and scrollable table with actions	2025-09-16 16:17:03 +00:00
Juergen Kunz	49b9e833e8	feat(styles): enhance actions column with sticky positioning and responsive layout adjustments	2025-09-16 16:12:13 +00:00
Juergen Kunz	f739bb608e	feat: enhance DeesTable with server-side search and Lucene filtering capabilities	2025-09-16 15:46:44 +00:00
Juergen Kunz	286a6f9088	feat(styles): adjust searchGrid layout for content-based sizing	2025-09-16 15:28:12 +00:00
Juergen Kunz	e32b9589a5	feat(styles): update searchGrid layout for improved responsiveness and control width	2025-09-16 15:25:04 +00:00
Juergen Kunz	6427510c98	feat: add per-column filtering and sticky header support to DeesTable component	2025-09-16 15:17:33 +00:00
Juergen Kunz	cf92a423cf	Refactor DeesTable component: modularize data handling and styles - Moved column computation and data retrieval logic to a new data.ts file for better separation of concerns. - Created a styles.ts file to encapsulate all CSS styles related to the DeesTable component. - Updated the DeesTable class to utilize the new data handling functions and styles. - Introduced selection and filtering features, allowing for single and multi-row selection. - Enhanced rendering logic to accommodate selection checkboxes and filtering capabilities. - Re-exported types from types.ts for better type management and clarity.	2025-09-16 14:53:59 +00:00
Juergen Kunz	3f3677ebaa	feat: implement DeesTable component with schema-first columns API, data actions, and customizable styles - Added DeesTable class extending DeesElement - Introduced properties for headings, data, actions, and columns - Implemented rendering logic for table headers, rows, and cells - Added support for sorting, searching, and context menus - Included customizable styles for table layout and appearance - Integrated editable fields and drag-and-drop file handling - Enhanced accessibility with ARIA attributes for sorting	2025-09-14 19:57:50 +00:00
Juergen Kunz	edc15a727c	1.11.4 Some checks failed Default (tags) / security (push) Failing after 24s Details Default (tags) / test (push) Failing after 14s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-14 19:23:23 +00:00
Juergen Kunz	960085145d	fix(readme): Rewrite and expand README with Quick Start, feature highlights, demos and usage examples; add local Claude settings file	2025-09-14 19:23:23 +00:00
Juergen Kunz	7fdb4f19a8	1.11.3 Some checks failed Default (tags) / security (push) Failing after 23s Details Default (tags) / test (push) Failing after 13s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-09 11:18:56 +00:00
Juergen Kunz	e21fb79731	fix(dees-input-list): Prevent list animations from affecting scroll bounds and fix content-visibility issues in dees-input-list; add local developer settings	2025-09-09 11:18:56 +00:00
Juergen Kunz	05f669a7bd	feat(dees-input-list): add new input list component with demo and validation features	2025-09-08 19:21:37 +00:00
Juergen Kunz	8137d79e18	1.11.2 Some checks failed Default (tags) / security (push) Failing after 22s Details Default (tags) / test (push) Failing after 12s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-07 09:02:25 +00:00
Juergen Kunz	3b474b7dcc	fix(DeesFormSubmit): Make form submit robust by locating nearest dees-form via closest(); add local CLAUDE settings	2025-09-07 09:02:25 +00:00
Juergen Kunz	e449b413d1	1.11.1 Some checks failed Default (tags) / security (push) Failing after 23s Details Default (tags) / test (push) Failing after 13s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-06 13:29:39 +00:00
Juergen Kunz	8918dc94bd	fix(dees-input-text): Normalize Lucide icon names for password toggle	2025-09-06 13:29:38 +00:00
Juergen Kunz	2c595bf803	1.11.0 Some checks failed Default (tags) / security (push) Failing after 22s Details Default (tags) / test (push) Failing after 13s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-05 15:37:31 +00:00
Juergen Kunz	75f31a6cec	feat(dees-icon): Add full icon list and improve dees-icon demo with copy-all functionality and UI tweaks	2025-09-05 15:37:31 +00:00
Juergen Kunz	b211c0d068	1.10.12 Some checks failed Default (tags) / security (push) Failing after 22s Details Default (tags) / test (push) Failing after 14s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-05 15:26:19 +00:00
Juergen Kunz	911159ee55	fix(dees-simple-appdash): Fix icon rendering in dees-simple-appdash to respect provided icon strings	2025-09-05 15:26:19 +00:00
Juergen Kunz	c0dbc3c0d0	1.10.11 Some checks failed Default (tags) / security (push) Failing after 24s Details Default (tags) / test (push) Failing after 14s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-09-05 15:00:00 +00:00
Juergen Kunz	7eea21c9d4	fix(dees-simple-appdash): Bump deps and fix dees-simple-appdash icon binding and terminal sizing	2025-09-05 15:00:00 +00:00
Juergen Kunz	2f17dea480	feat(playbook): add PlayBook	2025-07-04 18:42:53 +00:00