v3.1.2

- Updated import paths in dees-panel, dees-pdf, dees-progressbar, dees-searchbar, dees-shopping-productcard, dees-simple-appdash, dees-speechbubble, dees-statsgrid, dees-table, dees-toast, dees-updater, and dees-windowlayer to use consistent directory structure.
- Created index.ts files for various components to streamline imports and improve modularity.
- Ensured all imports point to the correct subdirectory structure, enhancing maintainability and readability of the codebase.

CLAUDE.md

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

changelog.md

@@ -1,5 +1,325 @@
 # Changelog
 
+## 2025-12-08 - 3.1.2 - fix(DeesAppuiMainmenu, DeesAppuiSecondarymenu)
+Add position: relative to main and secondary app UI menus to fix positioning of overlays and tooltips
+
+- ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts: add `position: relative` to host styles
+- ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts: add `position: relative` to host styles
+- Fixes incorrect positioning for absolutely positioned children (tooltips, overlays, badges) inside the main and secondary menus
+
+## 2025-12-08 - 3.1.1 - fix(dees-appui)
+Extract demos for main and secondary app menus, adjust collapsed styles and toggle placement, bump devDependency
+
+- Extracted inline demo markup into separate demo files: ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.demo.ts and ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts and wired them up via imported demoFunc to reduce component size.
+- Moved collapse toggle button markup in both dees-appui-mainmenu and dees-appui-secondarymenu templates to after the main container to improve layout/stacking and focus behavior.
+- Adjusted collapsed logo/heading styles: removed extra padding/gap and hide logo text using display:none for a cleaner collapsed state.
+- Bumped devDependency @git.zone/tswatch from ^2.3.1 to ^2.3.2 in package.json.
+
+## 2025-12-08 - 3.1.0 - feat(dees-appui)
+Add collapsible/compact mode to AppUI sidebars (mainmenu & secondarymenu) with toggles, tooltips and improved z-index stacking
+
+- Add collapsed property to dees-appui-mainmenu and dees-appui-secondarymenu (reflect: true) to enable compact horizontal mode.
+- Add floating collapse toggle buttons and public toggleCollapse() methods on mainmenu and secondarymenu; these dispatch 'collapse-change' events (bubbles & composed).
+- Expose and track collapse state in dees-appui-base via mainmenuCollapsed and secondarymenuCollapsed properties; bind states to child components and re-emit collapse-change events as mainmenu-collapse-change and secondarymenu-collapse-change.
+- Implement collapsed styles and animations: reduced sidebar widths, hide/compact labels and headers, center icons, hide badges, and add smooth width/opacity transitions.
+- Add tooltips that appear for tabs/items when sidebars are collapsed to preserve discoverability.
+- Adjust layout grid in DeesAppuiBase (use auto columns) and add explicit z-index layering to ensure proper stacking order of mainmenu, secondarymenu, maincontent and activitylog.
+
+## 2025-12-08 - 3.0.1 - fix(dees-appui)
+Normalize header heights and box-sizing for App UI components
+
+- Set topbar/header heights to 48px (was 40px) and adjusted dependent offsets (activity container top, topShadow position) in dees-appui-activitylog.
+- Make logo and secondary menu headers fixed 48px tall and replace vertical padding with horizontal padding for consistent vertical alignment (dees-appui-mainmenu, dees-appui-secondarymenu).
+- Ensure tabs wrapper uses explicit 48px height and tabsContainer fills height (height:100%) to keep tab items vertically centered (dees-appui-tabs).
+- Add box-sizing: border-box to affected header/logo containers to prevent overflow and ensure correct sizing.
+- Minor CSS alignment and overflow fixes to improve consistent layout and scrolling behavior across the app UI components.
+
+## 2025-12-08 - 3.0.0 - BREAKING CHANGE(dees-appui-secondarymenu)
+Add SecondaryMenu component and replace Mainselector with new SecondaryMenu in AppUI
+
+- Add dees-appui-secondarymenu component: collapsible groups, badges, dynamic heading, context menu and legacy flat-options support
+- Introduce interfaces ISecondaryMenuItem and ISecondaryMenuGroup under elements/interfaces
+- Replace dees-appui-mainselector usage with dees-appui-secondarymenu in DeesAppuiBase (props/events updated: secondarymenuGroups, secondarymenuHeading, secondarymenuOptions, item-select / secondarymenu-item-select)
+- Remove dees-appui-mainselector implementation and its index export; update group exports and imports to expose secondarymenu
+- Update demos and pages to showcase the new SecondaryMenu and adjust import paths for grouped components
+- Bump devDependency @git.zone/tswatch to ^2.3.1
+
+## 2025-12-08 - 2.0.7 - fix(structure)
+Add many new UI components, input controls, charts, editors, and demos
+
+- Introduce App UI components: dees-appui-appbar, dees-appui-mainmenu, dees-appui-mainselector, dees-appui-maincontent, dees-appui-activitylog, dees-appui-profiledropdown, dees-appui-tabs, dees-appui-base, dees-appui-view (templates, styles and demos included).
+- Add a comprehensive set of input components: dees-input-text, dees-input-checkbox, dees-input-dropdown, dees-input-fileupload, dees-input-datepicker, dees-input-phone, dees-input-iban, dees-input-quantityselector, dees-input-list, dees-input-typelist, dees-input-tags, dees-input-multitoggle, dees-input-radiogroup, dees-input-richtext and supporting demos/styles/templates.
+- Add form primitives and integration: dees-form and dees-form-submit with validation, collection and demo pages showcasing usage.
+- Add button family and utilities: dees-button (with updated variants, sizes, status handling and demo), dees-button-group and dees-button-exit.
+- Add charting components: dees-chart-area (ApexCharts integration) and dees-chart-log (log viewer) plus rich demo scenarios and realtime features.
+- Add data display components: dees-dataview-codebox (highlight.js integration) and dees-dataview-statusobject with copy/context behaviours and demos.
+- Add editor tooling: dees-editor (Monaco loader/version management), dees-editor-markdown and dees-editor-markdownoutlet; also TipTap-based richtext input with toolbar and link handling.
+- Add global utilities and infra: dees-toast (programmatic toast API and containers), z-index registry and theme/font helpers (fonts, color tokens), plus many styles and accessibility/keyboard improvements across components.
+- Export and index updates: new group exports added to ts_web/elements index and many index.ts files to expose the new components and demos.
+- Extensive demos and showcase pages added (input-showcase, component demos) to illustrate integration, keyboard navigation, theming and form flows.
+
+## 2025-12-06 - 2.0.6 - fix(dees-input-richtext)
+Initialize editor and link input element references in firstUpdated to ensure they exist before editor initialization.
+
+- Assign editorElement from shadowRoot.querySelector('.editor-content') in firstUpdated.
+- Assign linkInputElement from shadowRoot.querySelector('.link-input input') in firstUpdated.
+- Call initializeEditor() after DOM references are set to avoid undefined-element runtime errors.
+
+## 2025-12-06 - 2.0.5 - fix(build)
+Bump devDependencies: update @git.zone/tsbundle and @git.zone/tswatch to patched versions
+
+- Update @git.zone/tsbundle from ^2.6.2 to ^2.6.3
+- Update @git.zone/tswatch from ^2.2.2 to ^2.2.3
+
+## 2025-12-06 - 2.0.4 - fix(imports)
+Normalize and fix relative import paths for web components to ensure correct module resolution
+
+- Replaced numerous './<component>.js' imports with explicit '../<component>/<component>.js' paths across many elements and demos to fix module resolution.
+- Updated imports for core shared components such as dees-icon, dees-panel, dees-contextmenu, dees-windowlayer, dees-windowcontrols and several app-ui components (appbar, maincontent, mainselector, activitylog, mobilenavigation, modal, pdf, profilepicture, statsgrid, etc.).
+- No runtime behavior changes — this is a refactor to import paths to address build/bundling and resolution issues.
+
+## 2025-12-03 - 2.0.3 - fix(dependencies)
+Bump dependencies and developer tooling versions
+
+- Upgrade lucide from ^0.553.0 to ^0.555.0
+- Bump @git.zone/tsbuild from ^3.1.0 to ^3.1.2
+- Bump @git.zone/tsbundle from ^2.5.2 to ^2.6.2
+- Bump @git.zone/tstest from ^2.8.1 to ^3.1.3
+- Bump @git.zone/tswatch from ^2.2.1 to ^2.2.2
+- Upgrade @types/node from ^22.0.0 to ^24.10.1
+- Patch release: increment package version to 2.0.3
+
+## 2025-11-30 - 2.0.2 - fix(dees-stepper)
+Make step validation abortable and cancel active step listeners when navigating
+
+- Extend IStep.validationFunc signature to accept an optional AbortSignal so validation handlers can be cancelled.
+- Store an AbortController on the selected step and pass its signal into validationFunc when invoked.
+- Abort the step's AbortController when navigating to the previous or next step to cancel any active listeners or async operations.
+
+## 2025-11-30 - 2.0.1 - fix(dees-stepper)
+Improve dees-stepper visual style and transitions
+
+- Smooth animation: extend .step transition duration and use a cubic-bezier curve for smoother motion.
+- Add .step.entrance class with a shorter easing for entrance animations to keep entrance timing distinct.
+- Visual tweaks: reduce border-radius from 18px to 12px and increase inner content padding to 32px.
+- Color and border updates: adjust background and border colors for light/dark themes to more consistent values.
+- Shadow simplification: replace theme-dependent heavy shadows with a single subtle shadow (0 8px 32px rgba(0,0,0,0.4)).
+- Remove selected-state border/box-shadow overrides (selection visuals simplified).
+- Remove background-clip: padding-box to simplify rendering.
+
+## 2025-11-17 - 2.0.0 - BREAKING CHANGE(decorators)
+Migrate to TC39 standard decorators (accessor) across components, update tsconfig and bump dependencies
+
+- Replaced experimental decorator-backed class fields with the TC39-compatible "accessor" form across ~69 web component files (properties and state fields) to follow Lit 3.x recommendations.
+- Updated tsconfig.json to remove experimentalDecorators and useDefineForClassFields, aligning compiler settings with the standard decorators migration.
+- Fixed optional/nullable fields to explicit `Type | undefined = undefined` where necessary to preserve runtime behavior and typing.
+- Adjusted/remove usages of some non-reactive decorators/@query patterns to be compatible with the new decorator model (notable changes in a few components).
+- Bumped several dependencies and devDependencies (examples: @design.estate/dees-domtools, @design.estate/dees-element, @design.estate/dees-wcctools, @git.zone/tsbuild, @git.zone/tstest, apexcharts, lucide).
+- Added migration notes and testing summary to readme.hints.md documenting the TC39 decorators migration and verification steps.
+
+## 2025-10-23 - 1.12.6 - fix(dependencies)
+Bump FontAwesome to ^7.1.0 and add local claude settings
+
+- Updated @fortawesome packages (@fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-regular-svg-icons, @fortawesome/free-solid-svg-icons) to ^7.1.0 in package.json
+- Added .claude/settings.local.json to configure local Claude/tooling permissions for repository operations
+
+## 2025-09-23 - 1.12.5 - fix(ci)
+Add local permissions settings for development
+
+- Adds a new local settings file: .claude/settings.local.json
+- Provides explicit permission entries for development tasks (allow running pnpm scripts, reading files, searching/replacing patterns, activating project, and helper tooling)
+- Intended for local dev environment to enable tool automation without changing repository code
+
+## 2025-09-20 - 1.12.4 - fix(ci)
+Add local assistant settings to enable permitted dev tooling commands
+
+- Add a local assistant settings file to configure allowed development tooling commands.
+- Allows running pnpm scripts, file read/search/replace operations and other local project helper actions.
+- Local configuration only — does not change library code or public API.
+
+## 2025-09-19 - 1.12.3 - fix(dees-input-fileupload)
+Show selected files inside dropzone and improve file upload UX
+
+- Render the selected file list inside the dropzone container so files are displayed inline with the drop area
+- Add dropzone--has-files class and styles to visually indicate when files are present
+- Avoid opening the file selector when clicking on the browse button or inside the file list (prevents accidental re-opening)
+- Refine file list and file-row styles (sizes, paddings, border radius, hover/background behavior and thumbnail/icon sizes) for a more compact and consistent appearance
+- Simplify empty-state handling by returning an empty template when no files are present (file list is only rendered when files exist)
+
+## 2025-09-18 - 1.12.2 - fix(dees-input-wysiwyg)
+Integrate output format preview into WYSIWYG demo; update plan and add local dev settings
+
+- Wire output format preview into the WYSIWYG demo (ts_web/elements/dees-input-wysiwyg.demo.ts) by calling setupOutputFormatDemo(editors.meeting, editors.recipe) so HTML/Markdown preview controls are initialized.
+- Update readme.plan.md: mark the Output Formats review tasks as completed and document that preview controls were added.
+- Add a local settings file to allow running local tooling tasks (grants permission for pnpm run scripts and related local commands).
+- No library API or runtime component behavior changed — this is a demo/documentation and local-settings update.
+
+## 2025-09-18 - 1.12.1 - fix(ci)
+Add local settings to allow running pnpm scripts and enable dev chat permission
+
+- Add a repository-local settings file granting permission to run pnpm scripts (Bash(pnpm run:*)) for development tooling.
+- Enable the mcp__zen__chat permission for local dev workflows.
+
+## 2025-09-18 - 1.12.0 - feat(dees-stepper)
+Revamp dees-stepper: modern styling, new steps and improved navigation/validation
+
+- Visual refresh for dees-stepper: updated card shapes, shadows, refined borders and stronger selected-state visuals for a modern shadcn-inspired look
+- Improved transitions and animations (transform, box-shadow, filter) for smoother step selection and show/hide behavior
+- Expanded default/demo steps: replaced small sample with a richer multi-step flow (Account Setup, Profile Details, Contact Information, Team Size, Goals, Brand Preferences, Integrations, Review & Launch)
+- Enhanced step interactions: safer goNext/goBack handling with boundary checks and reset of validation flags to avoid stale validation state
+- Better toolbar/controls placement for stepper demo (spacing, counters, accessible back control) and improved keyboard/UX affordances
+- Minor documentation and meta updates: readme.plan.md extended with dees-stepper plan items and added .claude/settings.local.json
+
+## 2025-09-18 - 1.11.8 - fix(ci)
+Add local tool permissions config to allow running pnpm scripts and enable mcp__zen__chat
+
+- Add local settings file to grant permission to run pnpm scripts (Bash(pnpm run:*))
+- Enable mcp__zen__chat permission in local tool settings
+
+## 2025-09-16 - 1.11.7 - fix(readme)
+Expand README with comprehensive component documentation, examples and developer guide; add local Claude settings
+
+- Expanded README substantially: installation, component overview, detailed component docs, usage examples, demos and developer guidance
+- Updated many example snippets and API usage examples (icons, inputs, editor, forms, overlays, charts, etc.) to be more explicit and consistent
+- Added .claude/settings.local.json to configure local Claude permissions for repository tooling
+- No runtime or library code changes — documentation and demo content only
+
+## 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
+
+Dashboard Grid improvements:
+- Improved margin system supporting uniform or individual margins (top, right, bottom, left)
+- Added collision detection to prevent widget overlap during drag operations
+- Implemented auto-positioning for new widgets to find first available space
+- Added compact() method to eliminate gaps and compress layout vertically or horizontally
+- Enhanced resize constraints with minW, maxW, minH, maxH support
+- Added optional grid lines visualization for better layout understanding
+- Improved resize handles with better visibility and hover states
+- Added RTL (right-to-left) layout support
+- Implemented cellHeightUnit option supporting 'px', 'em', 'rem', or 'auto' (square cells)
+- Added configurable animation with enableAnimation property
+- Enhanced demo with interactive controls for testing all features
+- Better calculation of widget positions accounting for margins between cells
+- Added findAvailablePosition() for intelligent widget placement
+- Improved drag and resize calculations for pixel-perfect positioning
+
+WYSIWYG editor drag and drop fixes:
+- Fixed drop indicator positioning to properly account for block margins
+- Added defensive checks in drag event handlers to prevent potential crashes
+- Improved updateBlockPositions with null checks and error handling
+- Updated drop indicator calculation to use simplified margin approach
+- Fixed drop indicator height to match the exact space occupied by dragged blocks
+- Improved drop indicator positioning algorithm to accurately show where blocks will land
+- Simplified visual block position calculations accounting for CSS transforms
+- Enhanced margin calculation to use correct values based on block type (16px for paragraphs, 24px for headings, 20px for code/quotes)
+- Fixed index calculation issue when dragging blocks downward by adjusting target index for excluded dragged block
+
+## 2025-06-28 - 1.10.9 - feat(dees-dashboardgrid)
+Add new dashboard grid component with drag-and-drop and resize capabilities
+
+- Created dees-dashboardgrid component for building flexible dashboard layouts
+- Features drag-and-drop functionality for rearranging widgets
+- Includes resize handles for adjusting widget dimensions
+- Supports configurable grid properties (columns, cell height, gap)
+- Provides widget locking and editable mode controls
+- Styled with shadcn design principles
+- No external dependencies - built with native browser APIs
+- Emits events for widget movements and resizes
+- Includes comprehensive demo with sample dashboard widgets
+
+## 2025-06-27 - 1.10.8 - feat(ui-components)
+Update multiple components with shadcn-aligned styling and improved animations
+
+- Updated dees-modal with shadcn colors, borders, and subtle shadows
+- Updated dees-chips with shadcn styling and fixed selection logic bug
+- Updated dees-dataview-codebox with shadcn syntax highlighting colors and responsive label layout
+- Updated dees-input-multitoggle with transparent blue indicator and smooth animations
+- Updated dees-appui-tabs with animated sliding indicator for both horizontal and vertical layouts
+- Fixed indicator positioning to be perfectly centered on tab content
+- Indicator width is content width + 8px for minimal visual padding
+- Fixed tab content centering by using consistent padding (12px → 16px on all sides)
+- Fixed icon rendering by correcting property name from .iconName to .icon
+- Added visual separators between tabs for better distinction
+- Added subtle hover backgrounds for improved interactivity
+- Refactored tabs component code for better maintainability and elegance
+- Updated dees-appui-activitylog with shadcn-aligned styling:
+  - Updated background and text colors to match shadcn palette
+  - Enhanced topbar with better spacing and typography
+  - Improved activity entries with subtle hover states and better spacing
+  - Added activity type icons with color-coded backgrounds (login, logout, view, create, update)
+  - Added date separators ("Today", "Yesterday") for better temporal organization
+  - Enhanced streaming indicators with animated pulse effect
+  - Redesigned searchbox with modern input styling, search icon, and focus states
+  - Added custom scrollbar styling for consistency
+  - Updated timestamps to be more subtle with tabular number formatting
+  - Refined shadow effects for better visual hierarchy
+  - Added subtle box shadow to component for depth
+  - Added fade-in animation for new activity entries
+  - Improved user name highlighting with better typography
+  - Updated context menu with more relevant actions
+- Improved overall spacing and visual consistency across components
+
 ## 2025-06-27 - 1.10.1 - fix(modal)
 Improve modal overscroll behavior by adding 'overscroll-behavior: contain' to content container
 
@@ -71,7 +391,7 @@ Add dees-searchbar component with live search and filter demo
 ## 2025-04-22 - 1.6.0 - feat(documentation/dees-heading)
 Add codex documentation overview and dees-heading component demo
 
-- Introduce 'codex.md' to provide a high-level overview of project layout, component patterns, and build workflow
+- Introduce contributor overview doc (`codex.md`, now consolidated into `readme.info.md`) to provide a high-level overview of project layout, component patterns, and build workflow
 - Add and update dees-heading component with demo to support multiple heading levels and horizontal rule styles
 - Update component export index to include dees-heading
 

codex.md

@@ -1,43 +0,0 @@
-# Codex: Project Overview and Codebase Structure
-
-## Project Overview
-- Package: `@design.estate/dees-catalog`
-- Focus: Web Components library providing UI elements and layouts for modern web apps.
-
-## Directory Layout
-- ts_web/: TypeScript source files
-  - elements/: Individual Web Component definitions
-  - pages/: Page-level templates for composite layouts
-- html/: Demo/app entry point loading the bundled scripts
-- dist_bundle/: Bundled browser JS and source maps
-- dist_ts_web/: ES module outputs for TypeScript/web consumers
-- dist_watch/: Watch-mode development bundle with live reload
-- test/: Browser-based tests using `@push.rocks/tapbundle`
-
-## Component Patterns
-- Each component in ts_web/elements/:
-  - Decorated with `@customElement('tag-name')`
-  - Extends `DeesElement` from `@design.estate/dees-element`
-  - Uses `@property` for reactive, reflected attributes
-  - Defines `static styles = [cssManager.defaultStyles, css`...`]`
-  - Implements `render()` returning a Lit `html` template with slots or markup
-  - Exposes a demo via `public static demo` linking to `.demo.ts` files
-
-## Build & Development Workflow
-- Install dependencies: `npm install` or `pnpm install`
-- Build production bundle: `npm run build`
-- Start dev watch mode: `npm run watch`
-- Run tests: `npm test` (launches browser fixtures)
-
-## Theming & Utilities
-- Default global styles via `cssManager.defaultStyles`
-- Theme-aware values with `cssManager.bdTheme(light, dark)`
-- DOM utilities set up in `html/index.ts` using `@design.estate/dees-domtools`
-
-## Documentation
-- `readme.md` provides an overview of all components and basic usage
-- Live examples in `.demo.ts` files
-  accessible via component `demo` static property
-
-## Updates to this file
-If you have pattern insisights or general changes to the codebase, please update this file.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.10.8",
+  "version": "3.1.2",
   "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",
@@ -10,46 +10,48 @@
     "test": "tstest test/ --web --verbose --timeout 30 --logfile",
     "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
     "watch": "tswatch element",
-    "buildDocs": "tsdoc"
+    "buildDocs": "tsdoc",
+    "postinstall": "node scripts/update-monaco-version.cjs"
   },
   "author": "Lossless GmbH",
   "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-domtools": "^2.3.6",
+    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-wcctools": "^1.2.1",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@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",
     "@tiptap/extension-typography": "^2.23.0",
     "@tiptap/extension-underline": "^2.23.0",
     "@tiptap/starter-kit": "^2.23.0",
-    "@tsclass/tsclass": "^9.2.0",
+    "@tsclass/tsclass": "^9.3.0",
     "@webcontainer/api": "1.2.0",
-    "apexcharts": "^4.7.0",
+    "apexcharts": "^5.3.6",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.525.0",
-    "monaco-editor": "^0.52.2",
+    "lit": "^3.3.1",
+    "lucide": "^0.555.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/tsbundle": "^2.5.1",
-    "@git.zone/tstest": "^2.3.1",
-    "@git.zone/tswatch": "^2.1.2",
+    "@git.zone/tsbuild": "^3.1.2",
+    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tstest": "^3.1.3",
+    "@git.zone/tswatch": "^2.3.2",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
-    "@types/node": "^22.0.0"
+    "@types/node": "^24.10.1"
   },
   "files": [
     "ts/**/*",

readme.appui-architecture.md

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

readme.hints.md

@@ -604,4 +604,80 @@ import { zIndexLayers } from './00zindex.js';
 z-index: ${zIndexLayers.overlay.modal};
 ```
 
-This system ensures proper stacking order for all overlay components and prevents z-index conflicts.
+This system ensures proper stacking order for all overlay components and prevents z-index conflicts.
+
+## TC39 Standard Decorators Migration (2025-01-17)
+
+Successfully migrated from experimental TypeScript decorators to standard TC39 decorators as recommended by Lit 3.x documentation.
+
+### Migration Overview:
+
+#### 1. Changes Made:
+- **Added `accessor` keyword** to all `@property` and `@state` decorated fields across 69 component files
+- **Updated tsconfig.json**: Removed `experimentalDecorators: true` and `useDefineForClassFields: false`
+- **Fixed optional properties**: Changed `accessor prop?: Type` to `accessor prop: Type | undefined = undefined`
+- **Removed incompatible decorators**: Removed `@query` and non-reactive `@state` decorators from regular fields
+
+#### 2. Key Pattern Changes:
+
+**Before (Experimental Decorators):**
+```typescript
+@property({ type: String })
+public value: string = '';
+
+@property({ type: Boolean })
+public disabled?: boolean;
+```
+
+**After (Standard TC39 Decorators):**
+```typescript
+@property({ type: String })
+accessor value: string = '';
+
+@property({ type: Boolean })
+accessor disabled: boolean | undefined = undefined;
+```
+
+#### 3. Important Rules:
+- **@property and @state**: MUST use `accessor` keyword for reactive properties
+- **@query decorators**: Should NOT use `accessor` (they work with regular fields)
+- **Optional properties**: Cannot use `?` syntax with accessor, must use `| undefined = undefined`
+- **Private fields**: Non-reactive private fields should not use decorators
+
+#### 4. TypeScript Configuration:
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  }
+}
+```
+Note: `experimentalDecorators` defaults to false, and `useDefineForClassFields` defaults to true with ES2022 target.
+
+#### 5. Build Results:
+- ✅ Build successful with standard decorators
+- ✅ Tests passing (7/8 - same as before migration)
+- ✅ No bundle size changes reported
+- ✅ All components working correctly
+
+#### 6. Files Modified:
+- 69 component files with decorator updates
+- 16 files with optional property fixes
+- 3 files with @query decorator removals
+- tsconfig.json configuration update
+
+### Why This Migration:
+
+According to Lit's documentation (https://lit.dev/docs/components/decorators/#decorator-versions):
+- TC39 standard decorators are the future-proof approach
+- Provides better TypeScript integration
+- Aligns with JavaScript specification
+- While bundle sizes are slightly larger, the standardization benefits outweigh this
+
+### Testing:
+- All unit tests passing
+- Manual testing of key components verified
+- No regressions detected
+- Focus management and interactions working correctly

readme.info.md

@@ -0,0 +1,80 @@
+# Contributor Information
+
+This reference consolidates the helper notes previously split across `codex.md` and `CLAUDE.md`. Use it to get oriented quickly when working on `@design.estate/dees-catalog`, a TypeScript/Lit web-components library that ships themed UI building blocks for modern web applications.
+
+## Project Snapshot
+- Package: `@design.estate/dees-catalog`
+- Description: Comprehensive catalog of reusable web components with cohesive design, advanced form inputs, data displays, and layout scaffolding.
+- Entry points: builds ship to `dist_ts_web/` (ES modules) and `dist_bundle/` (browser bundle); demos live in `html/`.
+- Type system: strict TypeScript targeting modern browsers (see `tsconfig.json`).
+
+## Repository Layout
+- `ts_web/` – TypeScript source
+  - `elements/` – component implementations (`00*.ts` shared utilities, `dees-*.ts` components, `*.demo.ts` demos)
+  - `pages/` – showcase pages aggregating demos
+  - `index.ts` – main export surface
+- `html/` – demo entry point bootstrapping bundles
+- `dist_bundle/`, `dist_ts_web/`, `dist_watch/` – build outputs (production, module, and watch bundles)
+- `test/` – browser/node tests powered by `@push.rocks/tapbundle`
+- `scripts/` – maintenance utilities (e.g., Monaco version sync postinstall)
+
+## Build & Development Commands
+All workflows use pnpm (see `package.json`).
+
+```bash
+pnpm install           # install dependencies
+pnpm run build         # tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild
+pnpm run watch         # tswatch element (development watch/dev server)
+pnpm test              # tstest test/ --web --verbose --timeout 30 --logfile
+pnpm run buildDocs     # tsdoc (generates docs)
+tsx test/test.file.ts  # run a specific test file (file must be named test.*)
+```
+
+`postinstall` runs `node scripts/update-monaco-version.cjs` to sync the Monaco editor version, so keep the script intact when updating dependencies.
+
+## Testing Guidelines
+- Framework: `@push.rocks/tapbundle` with smartexpect assertions. Always review https://code.foss.global/push.rocks/smartexpect/raw/branch/master/readme.md when adding tests.
+- Import pattern:
+  ```typescript
+  import { tap, expect } from '@push.rocks/tapbundle';
+  ```
+- Test naming: `test.*.both.ts` for dual runtime, `.node.ts` for Node-only, `.browser.ts` for browser-only suites.
+- Prefer `pnpm test` for full runs; use `tsx` for focused debugging. Type-check failing tests with `tsc --noEmit`.
+- Logs live under `.nogit/testlogs/`; put ad-hoc debug artefacts in `.nogit/debug/`.
+
+## Component Architecture
+- **Base pattern**: Components extend `DeesElement` from `@design.estate/dees-element`, use Lit decorators (`@customElement`, `@property`), and combine `cssManager.defaultStyles` with component styles. Rendering happens via Lit `html` templates; demos sit on a static `demo` property referencing a `.demo.ts` module.
+- **Theming**: `cssManager.bdTheme(light, dark)` selects theme-aware values. Shared palettes live in `ts_web/elements/00colors.ts`.
+- **Z-index management**: Overlays consult the registry in `ts_web/elements/00zindex.ts` (`ZIndexRegistry`) to coordinate stacking.
+- **Component families**:
+  - Core UI (`dees-button`, `dees-badge`, `dees-icon`, …) focus on consistent theming and interactions.
+  - Form inputs (`dees-form`, `dees-input-*`) build on `DeesInputBase` and communicate through subjects/events for validation.
+  - Layout shells (`dees-appui-*`) orchestrate responsive app frames with centralized event rebroadcasts.
+  - Data views (`dees-table`, `dees-dataview-*`, `dees-statsgrid`) handle large datasets with virtualisation and chart integrations.
+  - Overlays (`dees-modal`, `dees-contextmenu`, `dees-toast`) respect the z-index registry and use shared window-layer utilities.
+- **WYSIWYG editor**: `dees-input-wysiwyg` coordinates specialized handler classes (`WysiwygInputHandler`, `WysiwygKeyboardHandler`, drag/drop & modal managers) and global menus (`DeesSlashMenu`, `DeesFormattingMenu`). Rendering is imperative to preserve caret focus.
+
+## Implementation Guidelines
+- Import external modules through `ts_web/elements/00plugins.ts`: `import * as plugins from './plugins.ts';` then reference `plugins.moduleName`.
+- When creating new components:
+  1. Extend `DeesElement` and decorate with `@customElement('dees-component')`.
+  2. Support theming, slots, and accessibility; provide meaningful default styles.
+  3. Expose a `.demo.ts` for the component and re-export via `elements/index.ts`.
+- Form components must implement `getValue()` / `setValue()` and emit through `changeSubject` while honoring `disabled` and `required` states.
+- Overlay components retrieve z-indices from the registry, register/unregister on show/hide, and use `DeesWindowLayer` for backdrops when appropriate.
+- Avoid simplifying away functionality; prefer small, targeted changes and keep compatibility with existing APIs.
+
+## Common Patterns & Pitfalls
+- Focus management: schedule DOM updates with `requestAnimationFrame` inside interactive editors to avoid focus loss.
+- Event handling: stop propagation where nested interactive elements coexist; mix pointer and keyboard handling for accessibility.
+- Performance: heavy blocks/components may load lazily; charts use debounced observers, tables rely on virtual scrolling. Watch bundle size when adding dependencies.
+
+## Documentation & Demos
+- `readme.md` surfaces component overviews; demos in `.demo.ts` illustrate real usage.
+- Update this `readme.info.md` when architectural patterns or workflows change so contributors stay in sync.
+
+## Recent Highlights
+- Z-index registry overhaul enables dynamic stacking control across overlays.
+- WYSIWYG refactor separated block handlers for maintainability.
+- Dashboard grid enhancements added live drag-and-drop previews and overlap fixes.
+- Monaco editor integration now reads the installed version at build time.

readme.playbook.md

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

readme.refactoring-summary.md

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

readme.refactoring.md

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

scripts/update-monaco-version.cjs

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const projectRoot = path.resolve(__dirname, '..');
+
+function resolveMonacoPackageJson() {
+  try {
+    const resolvedPath = require.resolve('monaco-editor/package.json', {
+      paths: [projectRoot],
+    });
+    return resolvedPath;
+  } catch (error) {
+    console.error('[dees-editor] Unable to resolve monaco-editor/package.json');
+    throw error;
+  }
+}
+
+function getMonacoVersion() {
+  const monacoPackagePath = resolveMonacoPackageJson();
+  const monacoPackage = require(monacoPackagePath);
+  if (!monacoPackage.version) {
+    throw new Error('[dees-editor] monaco-editor/package.json does not expose a version field');
+  }
+  return monacoPackage.version;
+}
+
+function writeVersionModule(version) {
+  const targetDir = path.join(projectRoot, 'ts_web', 'elements', 'dees-editor');
+  fs.mkdirSync(targetDir, { recursive: true });
+  const targetFile = path.join(targetDir, 'version.ts');
+  const fileContent = `// Auto-generated by scripts/update-monaco-version.cjs\nexport const MONACO_VERSION = '${version}';\n`;
+  fs.writeFileSync(targetFile, fileContent, 'utf8');
+  console.log(`[dees-editor] Wrote ${path.relative(projectRoot, targetFile)} with monaco-editor@${version}`);
+}
+
+try {
+  const version = getMonacoVersion();
+  writeVersionModule(version);
+} catch (error) {
+  console.error('[dees-editor] Failed to update Monaco version module.');
+  console.error(error instanceof Error ? error.message : error);
+  process.exitCode = 1;
+}

test/test.dashboardgrid-layout.node.ts

@@ -0,0 +1,28 @@
+import { tap, expect } from '@push.rocks/tapbundle';
+
+import {
+  resolveWidgetPlacement,
+  collectCollisions,
+} from '../ts_web/elements/dees-dashboardgrid/layout.ts';
+import type { DashboardWidget } from '../ts_web/elements/dees-dashboardgrid/types.ts';
+
+tap.test('dashboardgrid does not overlap widgets after swap attempt', async () => {
+  const widgets: DashboardWidget[] = [
+    { id: 'w0', x: 6, y: 5, w: 1, h: 3 },
+    { id: 'w1', x: 6, y: 1, w: 1, h: 3 },
+    { id: 'w2', x: 3, y: 0, w: 2, h: 2 },
+    { id: 'w3', x: 9, y: 0, w: 1, h: 2 },
+    { id: 'w4', x: 4, y: 3, w: 1, h: 2 },
+  ];
+
+  const placement = resolveWidgetPlacement(widgets, 'w0', { x: 6, y: 3 }, 12);
+  expect(placement).toBeTruthy();
+
+  const layout = placement!.widgets;
+  for (const widget of layout) {
+    const collisions = collectCollisions(layout, widget, widget.x, widget.y, widget.w, widget.h);
+    expect(collisions).toBeEmptyArray();
+  }
+});
+
+export default tap.start();

test/test.tabs-indicator.browser.ts

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

test/test.wysiwyg-blockmovement.browser.ts

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

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

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

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

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

test/test.wysiwyg-dragdrop.browser.ts

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

test/test.wysiwyg-dragissue.browser.ts

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

test/test.wysiwyg-dropindicator.browser.ts

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

test/test.wysiwyg-eventlisteners.browser.ts

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts

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

ts_web/elements/00group-appui/dees-appui-activitylog/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-activitylog.js';

ts_web/elements/00group-appui/dees-appui-appbar/component.ts

@@ -5,19 +5,19 @@ import {
   property,
   state,
   html,
-  css,
-  cssManager,
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import * as interfaces from './interfaces/index.js';
-import * as plugins from './00plugins.js';
-import { demoFunc } from './dees-appui-appbar.demo.js';
+import * as interfaces from '../../interfaces/index.js';
+import * as plugins from '../../00plugins.js';
+import { demoFunc } from './demo.js';
+import { appuiAppbarStyles } from './styles.js';
+import { renderAppuiAppbar } from './template.js';
 
 // Import required components
-import './dees-icon.js';
-import './dees-windowcontrols.js';
-import './dees-appui-profiledropdown.js';
+import '../../dees-icon/dees-icon.js';
+import '../../dees-windowcontrols/dees-windowcontrols.js';
+import '../dees-appui-profiledropdown/dees-appui-profiledropdown.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -31,301 +31,58 @@ export class DeesAppuiBar extends DeesElement {
 
   // INSTANCE PROPERTIES
   @property({ type: Array })
-  public menuItems: interfaces.IAppBarMenuItem[] = [];
+  accessor menuItems: interfaces.IAppBarMenuItem[] = [];
 
   @property({ type: String })
-  public breadcrumbs: string = '';
+  accessor breadcrumbs: string = '';
 
   @property({ type: String })
-  public breadcrumbSeparator: string = ' > ';
+  accessor breadcrumbSeparator: string = ' > ';
 
   @property({ type: Boolean })
-  public showWindowControls: boolean = true;
+  accessor showWindowControls: boolean = true;
 
 
   @property({ type: Object })
-  public user?: {
+  accessor user: {
     name: string;
     email?: string;
     avatar?: string;
     status?: 'online' | 'offline' | 'busy' | 'away';
-  };
+  } | undefined = undefined;
 
   @property({ type: Array })
-  public profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+  accessor profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
 
   @property({ type: Boolean })
-  public showSearch: boolean = false;
+  accessor showSearch: boolean = false;
 
   // STATE
   @state()
-  private activeMenu: string | null = null;
+  accessor activeMenu: string | null = null;
 
   @state()
-  private openDropdowns: Set<string> = new Set();
+  accessor openDropdowns: Set<string> = new Set();
 
   @state()
-  private focusedItem: string | null = null;
+  accessor focusedItem: string | null = null;
 
   @state()
-  private focusedDropdownItem: number = -1;
+  accessor focusedDropdownItem: number = -1;
 
   @state()
-  private isProfileDropdownOpen: boolean = false;
+  accessor isProfileDropdownOpen: boolean = false;
 
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        /* CSS Variables for theming */
-        --appbar-height: 40px;
-        --appbar-font-size: 12px;
-        
-        display: block;
-        position: relative;
-        width: 100%;
-        height: var(--appbar-height);
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
-        font-size: var(--appbar-font-size);
-        display: grid;
-        grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
-        -webkit-app-region: drag;
-        user-select: none;
-      }
-
-      .menus {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        padding: 0 8px;
-        cursor: default;
-      }
-
-      .menuItem {
-        position: relative;
-        line-height: 24px;
-        padding: 0px 12px;
-        margin: 8px 0px;
-        border-radius: 4px;
-        -webkit-app-region: no-drag;
-        transition: all 0.2s ease;
-        cursor: default;
-        outline: none;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-
-      /* Optional: Style for menu items with icons (not typically used for top-level items) */
-      .menuItem dees-icon {
-        font-size: 14px;
-        opacity: 0.8;
-      }
-
-      .menuItem:hover {
-        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
-        color: ${cssManager.bdTheme('#000000', '#ffffff')};
-      }
-
-      .menuItem.active {
-        background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
-        color: ${cssManager.bdTheme('#000000', '#ffffff')};
-      }
-
-      .menuItem[disabled] {
-        opacity: 0.5;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-
-      .menuItem:focus-visible {
-        box-shadow: 0 0 0 2px ${cssManager.bdTheme('#00000080', '#ffffff80')};
-      }
-
-
-      /* Dropdown styles */
-      .dropdown {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        min-width: 200px;
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        border-radius: 4px;
-        box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')};
-        margin-top: 4px;
-        z-index: 1000;
-        opacity: 0;
-        transform: translateY(-10px);
-        transition: opacity 0.2s, transform 0.2s;
-        pointer-events: none;
-      }
-
-      .dropdown.open {
-        opacity: 1;
-        transform: translateY(0);
-        pointer-events: auto;
-      }
-
-      .dropdown-item {
-        padding: 8px 16px;
-        cursor: default;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        transition: background 0.1s;
-      }
-
-      .dropdown-item:hover,
-      .dropdown-item.focused {
-        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
-      }
-
-      .dropdown-divider {
-        height: 1px;
-        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        margin: 4px 0;
-      }
-
-      .dropdown-item[disabled] {
-        opacity: 0.5;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-
-      .dropdown-item .shortcut {
-        margin-left: auto;
-        opacity: 0.6;
-        font-size: 11px;
-      }
-
-      /* Breadcrumbs */
-      .breadcrumbs {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 0 16px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .breadcrumb-item {
-        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
-        cursor: default;
-        transition: color 0.2s;
-      }
-
-      .breadcrumb-item:hover {
-        color: ${cssManager.bdTheme('#000000', '#ffffff')};
-      }
-
-      .breadcrumb-separator {
-        margin: 0 8px;
-        opacity: 0.5;
-      }
-
-      /* Account section */
-      .account {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding: 0 16px;
-        gap: 12px;
-      }
-
-      .search-icon {
-        cursor: default;
-        opacity: 0.7;
-        transition: opacity 0.2s;
-      }
-
-      .search-icon:hover {
-        opacity: 1;
-      }
-
-      .user-info {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        cursor: default;
-        padding: 4px 8px;
-        border-radius: 4px;
-        transition: background 0.2s;
-      }
-
-      .user-info:hover {
-        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
-      }
-
-      .user-avatar {
-        position: relative;
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 10px;
-        font-weight: bold;
-      }
-
-      .user-avatar img {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        object-fit: cover;
-      }
-
-      .user-status {
-        position: absolute;
-        bottom: -2px;
-        right: -2px;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
-      }
-
-      .user-status.online {
-        background: #4caf50;
-      }
-
-      .user-status.offline {
-        background: #757575;
-      }
-
-      .user-status.busy {
-        background: #f44336;
-      }
-
-      .user-status.away {
-        background: #ff9800;
-      }
-    `,
-  ];
+  public static styles = appuiAppbarStyles;
 
   // INSTANCE
   public render(): TemplateResult {
-    return html`
-      <div class="menus">
-        ${this.showWindowControls ? html`<dees-windowcontrols></dees-windowcontrols>` : ''}
-        ${this.renderMenuItems()}
-      </div>
-      <div class="breadcrumbs">
-        ${this.renderBreadcrumbs()}
-      </div>
-      <div class="account">
-        ${this.renderAccountSection()}
-      </div>
-    `;
+    return renderAppuiAppbar(this);
   }
 
-  private renderMenuItems(): TemplateResult {
+
+
+  public renderMenuItems(): TemplateResult {
     return html`
       ${this.menuItems.map((item, index) => this.renderMenuItem(item, `menu-${index}`))}
     `;
@@ -398,7 +155,7 @@ export class DeesAppuiBar extends DeesElement {
     `;
   }
 
-  private renderBreadcrumbs(): TemplateResult {
+  public renderBreadcrumbs(): TemplateResult {
     if (!this.breadcrumbs) {
       return html``;
     }
@@ -417,7 +174,7 @@ export class DeesAppuiBar extends DeesElement {
     `;
   }
 
-  private renderAccountSection(): TemplateResult {
+  public renderAccountSection(): TemplateResult {
     return html`
       ${this.showSearch ? html`
         <dees-icon 

ts_web/elements/00group-appui/dees-appui-appbar/demo.ts

@@ -1,7 +1,8 @@
 import { html, css } from '@design.estate/dees-element';
-import type { DeesAppuiBar } from './dees-appui-appbar.js';
-import type { IAppBarMenuItem } from './interfaces/appbarmenuitem.js';
+import type { DeesAppuiBar } from './component.js';
+import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js';
 import '@design.estate/dees-wcctools/demotools';
+import './component.js';
 
 export const demoFunc = () => {
   // Sample menu items with various configurations

ts_web/elements/00group-appui/dees-appui-appbar/index.ts

@@ -0,0 +1 @@
+export * from './component.js';

ts_web/elements/00group-appui/dees-appui-appbar/styles.ts

@@ -0,0 +1,238 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const appuiAppbarStyles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        /* CSS Variables for theming */
+        --appbar-height: 40px;
+        --appbar-font-size: 12px;
+        
+        display: block;
+        position: relative;
+        width: 100%;
+        height: var(--appbar-height);
+        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
+        font-size: var(--appbar-font-size);
+        display: grid;
+        grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
+        -webkit-app-region: drag;
+        user-select: none;
+      }
+
+      .menus {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0 8px;
+        cursor: default;
+      }
+
+      .menuItem {
+        position: relative;
+        line-height: 24px;
+        padding: 0px 12px;
+        margin: 8px 0px;
+        border-radius: 4px;
+        -webkit-app-region: no-drag;
+        transition: all 0.2s ease;
+        cursor: default;
+        outline: none;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      /* Optional: Style for menu items with icons (not typically used for top-level items) */
+      .menuItem dees-icon {
+        font-size: 14px;
+        opacity: 0.8;
+      }
+
+      .menuItem:hover {
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+      }
+
+      .menuItem.active {
+        background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+      }
+
+      .menuItem[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .menuItem:focus-visible {
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('#00000080', '#ffffff80')};
+      }
+
+
+      /* Dropdown styles */
+      .dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        min-width: 200px;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        border-radius: 4px;
+        box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')};
+        margin-top: 4px;
+        z-index: 1000;
+        opacity: 0;
+        transform: translateY(-10px);
+        transition: opacity 0.2s, transform 0.2s;
+        pointer-events: none;
+      }
+
+      .dropdown.open {
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+
+      .dropdown-item {
+        padding: 8px 16px;
+        cursor: default;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: background 0.1s;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item.focused {
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
+      }
+
+      .dropdown-divider {
+        height: 1px;
+        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        margin: 4px 0;
+      }
+
+      .dropdown-item[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .dropdown-item .shortcut {
+        margin-left: auto;
+        opacity: 0.6;
+        font-size: 11px;
+      }
+
+      /* Breadcrumbs */
+      .breadcrumbs {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 0 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .breadcrumb-item {
+        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
+        cursor: default;
+        transition: color 0.2s;
+      }
+
+      .breadcrumb-item:hover {
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+      }
+
+      .breadcrumb-separator {
+        margin: 0 8px;
+        opacity: 0.5;
+      }
+
+      /* Account section */
+      .account {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 0 16px;
+        gap: 12px;
+      }
+
+      .search-icon {
+        cursor: default;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+      }
+
+      .search-icon:hover {
+        opacity: 1;
+      }
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: default;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background 0.2s;
+      }
+
+      .user-info:hover {
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
+      }
+
+      .user-avatar {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        font-weight: bold;
+      }
+
+      .user-avatar img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      .user-status {
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
+      }
+
+      .user-status.online {
+        background: #4caf50;
+      }
+
+      .user-status.offline {
+        background: #757575;
+      }
+
+      .user-status.busy {
+        background: #f44336;
+      }
+
+      .user-status.away {
+        background: #ff9800;
+      }
+    `,
+  ];
+

ts_web/elements/00group-appui/dees-appui-appbar/template.ts

@@ -0,0 +1,18 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesAppuiBar } from './component.js';
+
+export const renderAppuiAppbar = (component: DeesAppuiBar): TemplateResult => {
+      return html`
+        <div class="menus">
+          ${component.showWindowControls ? html`<dees-windowcontrols></dees-windowcontrols>` : ''}
+          ${component.renderMenuItems()}
+        </div>
+        <div class="breadcrumbs">
+          ${component.renderBreadcrumbs()}
+        </div>
+        <div class="account">
+          ${component.renderAccountSection()}
+        </div>
+      `;
+  
+};

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

@@ -0,0 +1,238 @@
+import { html, css } from '@design.estate/dees-element';
+import type { DeesAppuiBase } from '../dees-appui-base/dees-appui-base.js';
+import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js';
+import type { ITab } from '../../interfaces/tab.js';
+import type { ISelectionOption } from '../../interfaces/selectionoption.js';
+import type { IMenuGroup } from '../../interfaces/menugroup.js';
+import type { ISecondaryMenuGroup } from '../../interfaces/secondarymenu.js';
+import * as plugins from '../../00plugins.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => {
+  // Menu items for the appbar
+  const menuItems: IAppBarMenuItem[] = [
+    {
+      name: 'File',
+      action: async () => {},
+      submenu: [
+        { name: 'New Project', shortcut: 'Cmd+N', iconName: 'filePlus', action: async () => console.log('New project') },
+        { name: 'Open Project...', shortcut: 'Cmd+O', iconName: 'folderOpen', action: async () => console.log('Open project') },
+        { name: 'Recent Projects', action: async () => {}, submenu: [
+          { name: 'my-app', action: async () => console.log('Open my-app') },
+          { name: 'component-lib', action: async () => console.log('Open component-lib') },
+          { name: 'api-server', action: async () => console.log('Open api-server') },
+        ]},
+        { divider: true },
+        { name: 'Save All', shortcut: 'Cmd+Shift+S', iconName: 'save', action: async () => console.log('Save all') },
+        { divider: true },
+        { name: 'Close Project', action: async () => console.log('Close project') },
+      ]
+    },
+    {
+      name: 'Edit',
+      action: async () => {},
+      submenu: [
+        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => console.log('Undo') },
+        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => console.log('Redo') },
+        { divider: true },
+        { name: 'Cut', shortcut: 'Cmd+X', iconName: 'scissors', action: async () => console.log('Cut') },
+        { name: 'Copy', shortcut: 'Cmd+C', iconName: 'copy', action: async () => console.log('Copy') },
+        { name: 'Paste', shortcut: 'Cmd+V', iconName: 'clipboard', action: async () => console.log('Paste') },
+      ]
+    },
+    {
+      name: 'View',
+      action: async () => {},
+      submenu: [
+        { name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => console.log('Toggle sidebar') },
+        { name: 'Toggle Terminal', shortcut: 'Cmd+J', iconName: 'terminal', action: async () => console.log('Toggle terminal') },
+        { divider: true },
+        { name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoomIn', action: async () => console.log('Zoom in') },
+        { name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoomOut', action: async () => console.log('Zoom out') },
+        { name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
+      ]
+    },
+    {
+      name: 'Help',
+      action: async () => {},
+      submenu: [
+        { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
+        { name: 'Release Notes', iconName: 'fileText', action: async () => console.log('Release notes') },
+        { divider: true },
+        { name: 'Report Issue', iconName: 'bug', action: async () => console.log('Report issue') },
+        { name: 'About', iconName: 'info', action: async () => console.log('About') },
+      ]
+    }
+  ];
+
+  // Main menu groups (left sidebar)
+  const mainMenuGroups: IMenuGroup[] = [
+    {
+      tabs: [
+        { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard selected') },
+        { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox selected') },
+      ]
+    },
+    {
+      name: 'Workspace',
+      tabs: [
+        { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects selected') },
+        { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks selected') },
+        { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents selected') },
+      ]
+    },
+    {
+      name: 'Analytics',
+      tabs: [
+        { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports selected') },
+        { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights selected') },
+      ]
+    }
+  ];
+
+  // Main menu bottom tabs (pinned to bottom)
+  const mainMenuBottomTabs: ITab[] = [
+    { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings selected') },
+    { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help selected') },
+  ];
+
+  // Secondary menu groups (second sidebar with collapsible groups)
+  // These showcase the new shadcn-style design with badges and collapsible sections
+  const secondaryMenuGroups: ISecondaryMenuGroup[] = [
+    {
+      name: 'Quick Access',
+      iconName: 'lucide:zap',
+      items: [
+        { key: 'Overview', iconName: 'layoutDashboard', action: () => console.log('Overview selected') },
+        { key: 'Recent Activity', iconName: 'clock', action: () => console.log('Recent Activity selected'), badge: 5 },
+        { key: 'Favorites', iconName: 'star', action: () => console.log('Favorites selected') },
+      ]
+    },
+    {
+      name: 'Resources',
+      iconName: 'lucide:layers',
+      items: [
+        { key: 'Components', iconName: 'package', action: () => console.log('Components selected'), badge: 24 },
+        { key: 'Services', iconName: 'server', action: () => console.log('Services selected'), badge: 'new', badgeVariant: 'success' },
+        { key: 'APIs', iconName: 'globe', action: () => console.log('APIs selected'), badge: 3, badgeVariant: 'warning' },
+        { key: 'Webhooks', iconName: 'webhook', action: () => console.log('Webhooks selected') },
+      ]
+    },
+    {
+      name: 'Data Management',
+      iconName: 'lucide:database',
+      items: [
+        { key: 'Database', iconName: 'database', action: () => console.log('Database selected') },
+        { key: 'Storage', iconName: 'hardDrive', action: () => console.log('Storage selected'), badge: '85%', badgeVariant: 'warning' },
+        { key: 'Backups', iconName: 'archive', action: () => console.log('Backups selected'), badge: 'OK', badgeVariant: 'success' },
+      ]
+    },
+    {
+      name: 'System',
+      iconName: 'lucide:settings',
+      collapsed: true,
+      items: [
+        { key: 'Configuration', iconName: 'sliders', action: () => console.log('Configuration selected') },
+        { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations selected'), badge: 2, badgeVariant: 'error' },
+        { key: 'Permissions', iconName: 'shield', action: () => console.log('Permissions selected') },
+        { key: 'Logs', iconName: 'fileText', action: () => console.log('Logs selected') },
+      ]
+    }
+  ];
+
+  // Main content tabs
+  const mainContentTabs: ITab[] = [
+    { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details tab') },
+    { key: 'Logs', iconName: 'lucide:list', action: () => console.log('Logs tab') },
+    { key: 'Metrics', iconName: 'lucide:lineChart', action: () => console.log('Metrics tab') },
+  ];
+
+  // Profile menu items
+  const profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [
+    { name: 'Profile Settings', iconName: 'user', action: async () => console.log('Profile settings') },
+    { name: 'Account', iconName: 'settings', action: async () => console.log('Account settings') },
+    { divider: true },
+    { name: 'Help & Support', iconName: 'helpCircle', action: async () => console.log('Help') },
+    { name: 'Keyboard Shortcuts', iconName: 'keyboard', shortcut: 'Cmd+K', action: async () => console.log('Shortcuts') },
+    { divider: true },
+    { name: 'Sign Out', iconName: 'logOut', action: async () => console.log('Sign out') }
+  ];
+
+  return html`
+    <dees-demowrapper>
+      <style>
+        ${css`
+        .demo-container {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 100%;
+          overflow: hidden;
+        }
+        
+      `}
+      </style>
+      
+      <div class="demo-container">
+        <dees-appui-base
+          .appbarMenuItems=${menuItems}
+          .appbarBreadcrumbs=${'Dashboard'}
+          .appbarUser=${{
+            name: 'Jane Smith',
+            email: 'jane.smith@example.com',
+            status: 'online' as 'online' | 'offline' | 'busy' | 'away'
+          }}
+          .appbarProfileMenuItems=${profileMenuItems}
+          .appbarShowWindowControls=${true}
+          .appbarShowSearch=${true}
+          .mainmenuLogoIcon=${'lucide:box'}
+          .mainmenuLogoText=${'Acme App'}
+          .mainmenuGroups=${mainMenuGroups}
+          .mainmenuBottomTabs=${mainMenuBottomTabs}
+          .secondarymenuHeading=${'Dashboard'}
+          .secondarymenuGroups=${secondaryMenuGroups}
+          .maincontentTabs=${mainContentTabs}
+          @appbar-menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail)}
+          @appbar-breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb:', e.detail)}
+          @appbar-search-click=${() => console.log('Search clicked')}
+          @appbar-user-menu-open=${() => console.log('User menu opened')}
+          @appbar-profile-menu-select=${(e: CustomEvent) => console.log('Profile menu selected:', e.detail)}
+          @mainmenu-tab-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
+          @secondarymenu-item-select=${(e: CustomEvent) => console.log('Item selected:', e.detail)}
+        >
+          <div slot="maincontent" style="padding: 40px; color: #a3a3a3; font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;">
+            <h1 style="color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px;">Welcome to Acme App</h1>
+            <p style="color: #737373; margin-bottom: 32px;">This demo showcases the AppUI component system with the new SecondaryMenu.</p>
+
+            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px;">
+              <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
+                <h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">SecondaryMenu Features</h3>
+                <ul style="margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8;">
+                  <li>Collapsible groups with smooth animations</li>
+                  <li>Badge support (counts, status, variants)</li>
+                  <li>Dynamic heading from MainMenu selection</li>
+                  <li>shadcn-inspired modern design</li>
+                </ul>
+              </div>
+              <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
+                <h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">Badge Variants</h3>
+                <div style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px;">
+                  <span style="background: #27272a; color: #a1a1aa; padding: 2px 8px; border-radius: 9px;">default</span>
+                  <span style="background: #14532d; color: #4ade80; padding: 2px 8px; border-radius: 9px;">success</span>
+                  <span style="background: #451a03; color: #fbbf24; padding: 2px 8px; border-radius: 9px;">warning</span>
+                  <span style="background: #450a0a; color: #f87171; padding: 2px 8px; border-radius: 9px;">error</span>
+                </div>
+              </div>
+            </div>
+
+            <p style="font-size: 13px; color: #525252;">
+              Try clicking items in the MainMenu (left) - the SecondaryMenu heading updates automatically.
+              Click group headers in the SecondaryMenu to collapse/expand sections.
+            </p>
+          </div>
+        </dees-appui-base>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts

@@ -0,0 +1,298 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import * as interfaces from '../../interfaces/index.js';
+import * as plugins from '../../00plugins.js';
+import type { DeesAppuiBar } from '../dees-appui-appbar/index.js';
+import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainmenu.js';
+import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
+import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
+import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
+import { demoFunc } from './dees-appui-base.demo.js';
+
+// Import child components
+import '../dees-appui-appbar/index.js';
+import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
+import '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
+import '../dees-appui-maincontent/dees-appui-maincontent.js';
+import '../dees-appui-activitylog/dees-appui-activitylog.js';
+
+@customElement('dees-appui-base')
+export class DeesAppuiBase extends DeesElement {
+  public static demo = demoFunc;
+
+  // Properties for appbar
+  @property({ type: Array })
+  accessor appbarMenuItems: interfaces.IAppBarMenuItem[] = [];
+
+  @property({ type: String })
+  accessor appbarBreadcrumbs: string = '';
+
+  @property({ type: String })
+  accessor appbarBreadcrumbSeparator: string = ' > ';
+
+  @property({ type: Boolean })
+  accessor appbarShowWindowControls: boolean = true;
+
+
+  @property({ type: Object })
+  accessor appbarUser: {
+    name: string;
+    email?: string;
+    avatar?: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+  } | undefined = undefined;
+
+  @property({ type: Array })
+  accessor appbarProfileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+
+  @property({ type: Boolean })
+  accessor appbarShowSearch: boolean = false;
+
+  // Properties for mainmenu
+  @property({ type: String })
+  accessor mainmenuLogoIcon: string = '';
+
+  @property({ type: String })
+  accessor mainmenuLogoText: string = '';
+
+  @property({ type: Array })
+  accessor mainmenuGroups: interfaces.IMenuGroup[] = [];
+
+  @property({ type: Array })
+  accessor mainmenuBottomTabs: interfaces.ITab[] = [];
+
+  @property({ type: Array })
+  accessor mainmenuTabs: interfaces.ITab[] = [];
+
+  @property({ type: Object })
+  accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
+
+  // Properties for secondarymenu
+  @property({ type: String })
+  accessor secondarymenuHeading: string = 'Menu';
+
+  @property({ type: Array })
+  accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
+
+  @property({ type: Object })
+  accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItem | undefined = undefined;
+
+  /** Legacy support for flat options (backward compatibility) */
+  @property({ type: Array })
+  accessor secondarymenuOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
+
+  // Collapse states
+  @property({ type: Boolean })
+  accessor mainmenuCollapsed: boolean = false;
+
+  @property({ type: Boolean })
+  accessor secondarymenuCollapsed: boolean = false;
+
+  // Properties for maincontent
+  @property({ type: Array })
+  accessor maincontentTabs: interfaces.ITab[] = [];
+
+  // References to child components
+  @state()
+  accessor appbar: DeesAppuiBar | undefined = undefined;
+
+  @state()
+  accessor mainmenu: DeesAppuiMainmenu | undefined = undefined;
+
+  @state()
+  accessor secondarymenu: DeesAppuiSecondarymenu | undefined = undefined;
+
+  @state()
+  accessor maincontent: DeesAppuiMaincontent | undefined = undefined;
+
+  @state()
+  accessor activitylog: DeesAppuiActivitylog | undefined = undefined;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
+      }
+      .maingrid {
+        position: absolute;
+        top: 40px;
+        height: calc(100% - 40px);
+        width: 100%;
+        display: grid;
+        grid-template-columns: auto auto 1fr 240px;
+        grid-template-rows: 1fr;
+      }
+
+      /* Z-index layering for proper stacking (position: relative required for z-index to work) */
+      .maingrid > dees-appui-mainmenu {
+        position: relative;
+        z-index: 3;
+      }
+
+      .maingrid > dees-appui-secondarymenu {
+        position: relative;
+        z-index: 2;
+      }
+
+      .maingrid > dees-appui-maincontent {
+        position: relative;
+        z-index: 1;
+      }
+
+      .maingrid > dees-appui-activitylog {
+        position: relative;
+        z-index: 1;
+      }
+    `,
+  ];
+
+  // INSTANCE
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <dees-appui-appbar
+        .menuItems=${this.appbarMenuItems}
+        .breadcrumbs=${this.appbarBreadcrumbs}
+        .breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
+        .showWindowControls=${this.appbarShowWindowControls}
+        .user=${this.appbarUser}
+        .profileMenuItems=${this.appbarProfileMenuItems}
+        .showSearch=${this.appbarShowSearch}
+        @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
+        @breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
+        @search-click=${() => this.handleAppbarSearchClick()}
+        @user-menu-open=${() => this.handleAppbarUserMenuOpen()}
+        @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
+      ></dees-appui-appbar>
+      <div class="maingrid">
+        <dees-appui-mainmenu
+          .logoIcon=${this.mainmenuLogoIcon}
+          .logoText=${this.mainmenuLogoText}
+          .menuGroups=${this.mainmenuGroups}
+          .bottomTabs=${this.mainmenuBottomTabs}
+          .tabs=${this.mainmenuTabs}
+          .selectedTab=${this.mainmenuSelectedTab}
+          .collapsed=${this.mainmenuCollapsed}
+          @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
+        ></dees-appui-mainmenu>
+        <dees-appui-secondarymenu
+          .heading=${this.secondarymenuHeading}
+          .groups=${this.secondarymenuGroups}
+          .selectionOptions=${this.secondarymenuOptions}
+          .selectedItem=${this.secondarymenuSelectedItem}
+          .collapsed=${this.secondarymenuCollapsed}
+          @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
+        ></dees-appui-secondarymenu>
+        <dees-appui-maincontent
+          .tabs=${this.maincontentTabs}
+        >
+          <slot name="maincontent"></slot>
+        </dees-appui-maincontent>
+        <dees-appui-activitylog></dees-appui-activitylog>
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    // Get references to child components
+    this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
+    this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
+    this.secondarymenu = this.shadowRoot.querySelector('dees-appui-secondarymenu');
+    this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
+    this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
+  }
+
+  // Event handlers for appbar
+  private handleAppbarMenuSelect(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-menu-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarBreadcrumbNavigate(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-breadcrumb-navigate', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarSearchClick() {
+    this.dispatchEvent(new CustomEvent('appbar-search-click', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarUserMenuOpen() {
+    this.dispatchEvent(new CustomEvent('appbar-user-menu-open', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarProfileMenuSelect(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-profile-menu-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  // Event handlers for mainmenu
+  private handleMainmenuTabSelect(e: CustomEvent) {
+    this.mainmenuSelectedTab = e.detail.tab;
+    // Update secondary menu heading based on main menu selection
+    this.secondarymenuHeading = e.detail.tab.key;
+    this.dispatchEvent(new CustomEvent('mainmenu-tab-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  // Event handlers for secondarymenu
+  private handleSecondarymenuItemSelect(e: CustomEvent) {
+    this.secondarymenuSelectedItem = e.detail.item;
+    this.dispatchEvent(new CustomEvent('secondarymenu-item-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  // Event handlers for collapse state changes
+  private handleMainmenuCollapseChange(e: CustomEvent) {
+    this.mainmenuCollapsed = e.detail.collapsed;
+    this.dispatchEvent(new CustomEvent('mainmenu-collapse-change', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleSecondarymenuCollapseChange(e: CustomEvent) {
+    this.secondarymenuCollapsed = e.detail.collapsed;
+    this.dispatchEvent(new CustomEvent('secondarymenu-collapse-change', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+}

ts_web/elements/00group-appui/dees-appui-base/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-base.js';

ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts

@@ -1,4 +1,4 @@
-import * as interfaces from './interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,
@@ -11,17 +11,17 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import './dees-appui-tabs.js';
-import type { DeesAppuiTabs } from './dees-appui-tabs.js';
+import '../dees-appui-tabs/dees-appui-tabs.js';
+import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
 
 @customElement('dees-appui-maincontent')
 export class DeesAppuiMaincontent extends DeesElement {
   public static demo = () => html`
     <dees-appui-maincontent
       .tabs=${[
-        { key: 'Overview', iconName: 'home', action: () => console.log('Overview') },
-        { key: 'Details', iconName: 'file', action: () => console.log('Details') },
-        { key: 'Settings', iconName: 'cog', action: () => console.log('Settings') },
+        { key: 'Overview', iconName: 'lucide:home', action: () => console.log('Overview') },
+        { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details') },
+        { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
       ]}
     >
       <div slot="content" style="padding: 40px; color: #ccc;">
@@ -35,12 +35,12 @@ export class DeesAppuiMaincontent extends DeesElement {
   @property({
     type: Array,
   })
-  public tabs: interfaces.ITab[] = [
+  accessor tabs: interfaces.ITab[] = [
     { key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
   ];
 
   @property({ type: Object })
-  public selectedTab: interfaces.ITab | null = null;
+  accessor selectedTab: interfaces.ITab | null = null;
 
   public static styles = [
     cssManager.defaultStyles,

ts_web/elements/00group-appui/dees-appui-maincontent/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-maincontent.js';

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.demo.ts

@@ -0,0 +1,50 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-mainmenu-container {
+      display: flex;
+      height: 100%;
+      background: #1a1a1a;
+      border-radius: 8px;
+    }
+    .demo-mainmenu-container .spacer {
+      flex: 1;
+      background: #0f0f0f;
+    }
+  </style>
+  <div class="demo-mainmenu-container">
+    <dees-appui-mainmenu
+      .logoIcon=${'lucide:box'}
+      .logoText=${'Acme App'}
+      .menuGroups=${[
+        {
+          tabs: [
+            { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
+            { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox') },
+          ]
+        },
+        {
+          name: 'Workspace',
+          tabs: [
+            { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
+            { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks') },
+            { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents') },
+          ]
+        },
+        {
+          name: 'Analytics',
+          tabs: [
+            { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports') },
+            { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights') },
+          ]
+        }
+      ]}
+      .bottomTabs=${[
+        { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
+        { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help') },
+      ]}
+    ></dees-appui-mainmenu>
+    <div class="spacer"></div>
+  </div>
+`;

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts

@@ -0,0 +1,460 @@
+import * as plugins from '../../00plugins.js';
+import * as interfaces from '../../interfaces/index.js';
+import { zIndexLayers } from '../../00zindex.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from './dees-appui-mainmenu.demo.js';
+
+/**
+ * the most left menu
+ * usually used as organization selector
+ */
+@customElement('dees-appui-mainmenu')
+export class DeesAppuiMainmenu extends DeesElement {
+  public static demo = demoFunc;
+
+  // INSTANCE
+
+  // Logo properties
+  @property({ type: String })
+  accessor logoIcon: string = '';
+
+  @property({ type: String })
+  accessor logoText: string = '';
+
+  // Menu groups (new way)
+  @property({ type: Array })
+  accessor menuGroups: interfaces.IMenuGroup[] = [];
+
+  // Bottom tabs (pinned to bottom)
+  @property({ type: Array })
+  accessor bottomTabs: interfaces.ITab[] = [];
+
+  // Legacy tabs property (for backward compatibility)
+  @property({ type: Array })
+  accessor tabs: interfaces.ITab[] = [];
+
+  @property()
+  accessor selectedTab: interfaces.ITab;
+
+  @property({ type: Boolean, reflect: true })
+  accessor collapsed: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        --menu-width-expanded: 200px;
+        --menu-width-collapsed: 56px;
+        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        position: relative;
+        display: block;
+        height: 100%;
+      }
+
+      .mainContainer {
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        z-index: ${zIndexLayers.fixed.appBar};
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        width: var(--menu-width-expanded);
+        height: 100%;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        user-select: none;
+        border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        transition: width 0.25s ease;
+      }
+
+      :host([collapsed]) .mainContainer {
+        width: var(--menu-width-collapsed);
+      }
+
+      /* Floating collapse toggle button */
+      .collapse-toggle {
+        position: absolute;
+        right: -12px;
+        top: 24px;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        opacity: 0;
+        transition: opacity 0.2s ease, background 0.15s ease;
+        padding: 0;
+      }
+
+      .collapse-toggle:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      :host(:hover) .collapse-toggle {
+        opacity: 1;
+      }
+
+      .collapse-toggle dees-icon {
+        font-size: 14px;
+      }
+
+      /* Logo Section */
+      .logoSection {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        height: 48px;
+        padding: 0 14px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        flex-shrink: 0;
+        box-sizing: border-box;
+      }
+
+      .logoSection .logoIcon {
+        font-size: 22px;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        flex-shrink: 0;
+      }
+
+      .logoSection .logoText {
+        flex: 1;
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      :host([collapsed]) .logoSection {
+        justify-content: center;
+        padding: 0;
+        gap: 0;
+      }
+
+      :host([collapsed]) .logoSection .logoText {
+        display: none;
+      }
+
+      /* Middle Section (scrollable) */
+      .menuSection {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 8px 0;
+      }
+
+      .menuSection::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .menuSection::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        border-radius: 3px;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+      }
+
+      /* Menu Group */
+      .menuGroup {
+        padding: 0 8px;
+        margin-bottom: 8px;
+      }
+
+      .menuGroup:last-child {
+        margin-bottom: 0;
+      }
+
+      .groupHeader {
+        padding: 8px 12px 6px;
+        font-size: 11px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#737373', '#737373')};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        white-space: nowrap;
+        overflow: hidden;
+        transition: opacity 0.2s ease, max-height 0.25s ease;
+        max-height: 30px;
+      }
+
+      :host([collapsed]) .groupHeader {
+        opacity: 0;
+        max-height: 0;
+        padding: 0;
+        margin: 0;
+      }
+
+      .groupTabs {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      :host([collapsed]) .menuGroup {
+        padding: 0 4px;
+      }
+
+      /* Tab Item */
+      .tab {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 12px;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+      }
+
+      .tab:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
+      }
+
+      .tab:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+      }
+
+      .tab.selectedTab {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      .tab.selectedTab::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 16px;
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        border-radius: 0 2px 2px 0;
+      }
+
+      .tab dees-icon {
+        font-size: 18px;
+        opacity: 0.85;
+        flex-shrink: 0;
+      }
+
+      .tab.selectedTab dees-icon {
+        opacity: 1;
+      }
+
+      .tab .tabLabel {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      /* Collapsed tab styles */
+      :host([collapsed]) .tab {
+        justify-content: center;
+        padding: 10px;
+        gap: 0;
+      }
+
+      :host([collapsed]) .tab .tabLabel {
+        opacity: 0;
+        width: 0;
+        position: absolute;
+      }
+
+      :host([collapsed]) .tab.selectedTab::before {
+        left: -4px;
+      }
+
+      /* Tooltip for collapsed state */
+      .tab-tooltip {
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 12px;
+        padding: 6px 12px;
+        background: var(--tooltip-bg);
+        color: var(--tooltip-fg);
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.15s ease;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      .tab-tooltip::before {
+        content: '';
+        position: absolute;
+        left: -4px;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
+        border-right-color: var(--tooltip-bg);
+      }
+
+      :host([collapsed]) .tab:hover .tab-tooltip {
+        opacity: 1;
+        transition-delay: 1s;
+      }
+
+      /* Bottom Section */
+      .bottomSection {
+        flex-shrink: 0;
+        padding: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      :host([collapsed]) .bottomSection {
+        padding: 8px 4px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    // Get all tabs for selection (from groups or legacy tabs)
+    const allTabs = this.getAllTabs();
+
+    return html`
+      <div class="mainContainer" @contextmenu=${(eventArg: MouseEvent) => {
+        DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+          name: 'app settings',
+          action: async () => {},
+          iconName: 'gear',
+        }])
+      }}>
+        ${this.logoIcon || this.logoText ? html`
+          <div class="logoSection">
+            ${this.logoIcon ? html`<dees-icon class="logoIcon" .icon="${this.logoIcon}"></dees-icon>` : ''}
+            ${this.logoText ? html`<span class="logoText">${this.logoText}</span>` : ''}
+          </div>
+        ` : ''}
+
+        <div class="menuSection">
+          ${this.menuGroups.length > 0 ? this.renderMenuGroups() : this.renderLegacyTabs()}
+        </div>
+
+        ${this.bottomTabs.length > 0 ? html`
+          <div class="bottomSection">
+            ${this.bottomTabs.map((tabArg) => this.renderTab(tabArg))}
+          </div>
+        ` : ''}
+      </div>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
+    `;
+  }
+
+  private renderMenuGroups(): TemplateResult {
+    return html`
+      ${this.menuGroups.map((group) => html`
+        <div class="menuGroup">
+          ${group.name ? html`<div class="groupHeader">${group.name}</div>` : ''}
+          <div class="groupTabs">
+            ${group.tabs.map((tabArg) => this.renderTab(tabArg))}
+          </div>
+        </div>
+      `)}
+    `;
+  }
+
+  private renderLegacyTabs(): TemplateResult {
+    return html`
+      <div class="menuGroup">
+        <div class="groupTabs">
+          ${this.tabs.map((tabArg) => this.renderTab(tabArg))}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderTab(tabArg: interfaces.ITab): TemplateResult {
+    return html`
+      <div
+        class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
+        @click="${() => {
+          this.updateTab(tabArg);
+        }}"
+      >
+        <dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
+        <span class="tabLabel">${tabArg.key}</span>
+        <span class="tab-tooltip">${tabArg.key}</span>
+      </div>
+    `;
+  }
+
+  private getAllTabs(): interfaces.ITab[] {
+    if (this.menuGroups.length > 0) {
+      const groupTabs = this.menuGroups.flatMap(group => group.tabs);
+      return [...groupTabs, ...this.bottomTabs];
+    }
+    return [...this.tabs, ...this.bottomTabs];
+  }
+
+  updateTab(tabArg: interfaces.ITab) {
+    this.selectedTab = tabArg;
+    this.selectedTab.action();
+
+    // Emit tab-select event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: { tab: tabArg },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  firstUpdated() {
+    const allTabs = this.getAllTabs();
+    if (allTabs.length > 0) {
+      this.updateTab(allTabs[0]);
+    }
+  }
+
+  public toggleCollapse(): void {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('collapse-change', {
+      detail: { collapsed: this.collapsed },
+      bubbles: true,
+      composed: true
+    }));
+  }
+}

ts_web/elements/00group-appui/dees-appui-mainmenu/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-mainmenu.js';

ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts

@@ -1,5 +1,5 @@
-import * as plugins from './00plugins.js';
-import { zIndexLayers } from './00zindex.js';
+import * as plugins from '../../00plugins.js';
+import { zIndexLayers } from '../../00zindex.js';
 
 import {
   DeesElement,
@@ -36,21 +36,21 @@ export class DeesAppuiProfileDropdown extends DeesElement {
   `;
 
   @property({ type: Object })
-  public user?: {
+  accessor user: {
     name: string;
     email?: string;
     avatar?: string;
     status?: 'online' | 'offline' | 'busy' | 'away';
-  };
+  } | undefined = undefined;
 
   @property({ type: Array })
-  public menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+  accessor menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
 
   @property({ type: Boolean, reflect: true })
-  public isOpen: boolean = false;
+  accessor isOpen: boolean = false;
 
   @property({ type: String })
-  public position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';
+  accessor position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';
 
   public static styles = [
     cssManager.defaultStyles,

ts_web/elements/00group-appui/dees-appui-profiledropdown/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-profiledropdown.js';

ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts

@@ -0,0 +1,52 @@
+import { html } from '@design.estate/dees-element';
+import type * as interfaces from '../../interfaces/index.js';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-secondarymenu-container {
+      display: flex;
+      height: 100%;
+      background: #1a1a1a;
+      border-radius: 8px;
+    }
+    .demo-secondarymenu-container .spacer {
+      flex: 1;
+      background: #0f0f0f;
+    }
+  </style>
+  <div class="demo-secondarymenu-container">
+    <dees-appui-secondarymenu
+      .heading=${'Projects'}
+      .groups=${[
+        {
+          name: 'Active',
+          iconName: 'lucide:folder',
+          items: [
+            { key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
+            { key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
+            { key: 'Database', iconName: 'database', action: () => console.log('Database') },
+          ]
+        },
+        {
+          name: 'Archived',
+          iconName: 'lucide:archive',
+          collapsed: true,
+          items: [
+            { key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
+            { key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
+          ]
+        },
+        {
+          name: 'Settings',
+          iconName: 'lucide:settings',
+          items: [
+            { key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
+            { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
+          ]
+        }
+      ] as interfaces.ISecondaryMenuGroup[]}
+      @item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
+    ></dees-appui-secondarymenu>
+    <div class="spacer"></div>
+  </div>
+`;

ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts

@@ -0,0 +1,601 @@
+import * as plugins from '../../00plugins.js';
+import * as interfaces from '../../interfaces/index.js';
+
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '../../dees-icon/dees-icon.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  state,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { demoFunc } from './dees-appui-secondarymenu.demo.js';
+
+/**
+ * Secondary navigation menu for sub-navigation within MainMenu views
+ * Supports collapsible groups, badges, and dynamic headings
+ */
+@customElement('dees-appui-secondarymenu')
+export class DeesAppuiSecondarymenu extends DeesElement {
+  public static demo = demoFunc;
+
+  // INSTANCE
+
+  /** Dynamic heading - typically shows the selected MainMenu item */
+  @property({ type: String })
+  accessor heading: string = 'Menu';
+
+  /** Grouped items with collapse support */
+  @property({ type: Array })
+  accessor groups: interfaces.ISecondaryMenuGroup[] = [];
+
+  /** Legacy flat list support for backward compatibility */
+  @property({ type: Array })
+  accessor selectionOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
+
+  /** Currently selected item */
+  @property({ type: Object })
+  accessor selectedItem: interfaces.ISecondaryMenuItem | null = null;
+
+  /** Internal state for collapsed groups */
+  @state()
+  accessor collapsedGroups: Set<string> = new Set();
+
+  /** Horizontal collapse state */
+  @property({ type: Boolean, reflect: true })
+  accessor collapsed: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        --sidebar-width-expanded: 240px;
+        --sidebar-width-collapsed: 56px;
+        --sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        --sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+        --sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
+        --sidebar-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        --sidebar-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        --sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        --sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        --sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+
+        /* Badge colors */
+        --badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        --badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+        --badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        --badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
+        --badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+        --badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+        --badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
+        --badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
+
+        position: relative;
+        display: block;
+        height: 100%;
+        width: var(--sidebar-width-expanded);
+        background: var(--sidebar-bg);
+        border-right: 1px solid var(--sidebar-border);
+        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        user-select: none;
+        transition: width 0.25s ease;
+      }
+
+      :host([collapsed]) {
+        width: var(--sidebar-width-collapsed);
+      }
+
+      .maincontainer {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+      }
+
+      /* Floating collapse toggle button */
+      .collapse-toggle {
+        position: absolute;
+        right: -12px;
+        top: 24px;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        opacity: 0;
+        transition: opacity 0.2s ease, background 0.15s ease;
+        padding: 0;
+      }
+
+      .collapse-toggle:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      :host(:hover) .collapse-toggle {
+        opacity: 1;
+      }
+
+      .collapse-toggle dees-icon {
+        font-size: 14px;
+      }
+
+      /* Header Section */
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 48px;
+        padding: 0 16px;
+        border-bottom: 1px solid var(--sidebar-border);
+        flex-shrink: 0;
+        box-sizing: border-box;
+      }
+
+      .header .heading {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--sidebar-fg-active);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      :host([collapsed]) .header {
+        justify-content: center;
+        padding: 0 8px;
+      }
+
+      :host([collapsed]) .header .heading {
+        opacity: 0;
+        width: 0;
+        overflow: hidden;
+      }
+
+      /* Scrollable Menu Section */
+      .menuSection {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 8px 0;
+      }
+
+      .menuSection::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .menuSection::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        border-radius: 3px;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+      }
+
+      /* Menu Group */
+      .menuGroup {
+        padding: 0 8px;
+        margin-bottom: 4px;
+      }
+
+      :host([collapsed]) .menuGroup {
+        padding: 0 4px;
+      }
+
+      .groupHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 8px;
+        cursor: pointer;
+        border-radius: 6px;
+        transition: background 0.15s ease, opacity 0.2s ease, max-height 0.25s ease;
+        max-height: 40px;
+      }
+
+      .groupHeader:hover {
+        background: var(--sidebar-hover);
+      }
+
+      .groupHeader .groupTitle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--sidebar-fg-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .groupHeader .groupTitle dees-icon {
+        font-size: 14px;
+        opacity: 0.7;
+      }
+
+      .groupHeader .chevron {
+        font-size: 12px;
+        transition: transform 0.2s ease;
+        color: var(--sidebar-fg-muted);
+      }
+
+      .groupHeader.collapsed .chevron {
+        transform: rotate(-90deg);
+      }
+
+      /* Hide group headers when horizontally collapsed */
+      :host([collapsed]) .groupHeader {
+        opacity: 0;
+        max-height: 0;
+        padding: 0;
+        margin: 0;
+        pointer-events: none;
+      }
+
+      /* Group Items Container */
+      .groupItems {
+        overflow: hidden;
+        transition: max-height 0.25s ease, opacity 0.2s ease;
+        max-height: 500px;
+        opacity: 1;
+      }
+
+      .groupItems.collapsed {
+        max-height: 0;
+        opacity: 0;
+      }
+
+      /* Always show items when horizontally collapsed (regardless of group collapse state) */
+      :host([collapsed]) .groupItems {
+        max-height: none;
+        opacity: 1;
+      }
+
+      /* Menu Item */
+      .menuItem {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 8px 12px;
+        margin: 2px 0;
+        font-size: 13px;
+        font-weight: 450;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: var(--sidebar-fg);
+      }
+
+      .menuItem:hover {
+        background: var(--sidebar-hover);
+        color: var(--sidebar-fg-active);
+      }
+
+      .menuItem:active {
+        background: var(--sidebar-active);
+      }
+
+      .menuItem.selected {
+        background: var(--sidebar-active);
+        color: var(--sidebar-fg-active);
+        font-weight: 500;
+      }
+
+      .menuItem.selected::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 16px;
+        background: var(--sidebar-accent);
+        border-radius: 0 2px 2px 0;
+      }
+
+      .menuItem dees-icon {
+        font-size: 16px;
+        opacity: 0.7;
+        flex-shrink: 0;
+      }
+
+      .menuItem.selected dees-icon {
+        opacity: 1;
+      }
+
+      .menuItem .itemLabel {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      /* Collapsed menu item styles */
+      :host([collapsed]) .menuItem {
+        justify-content: center;
+        padding: 8px;
+        gap: 0;
+      }
+
+      :host([collapsed]) .menuItem .itemLabel {
+        opacity: 0;
+        width: 0;
+        position: absolute;
+      }
+
+      :host([collapsed]) .menuItem.selected::before {
+        left: -4px;
+      }
+
+      /* Tooltip for collapsed state */
+      .item-tooltip {
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 12px;
+        padding: 6px 12px;
+        background: var(--tooltip-bg);
+        color: var(--tooltip-fg);
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.15s ease;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      .item-tooltip::before {
+        content: '';
+        position: absolute;
+        left: -4px;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
+        border-right-color: var(--tooltip-bg);
+      }
+
+      :host([collapsed]) .menuItem:hover .item-tooltip {
+        opacity: 1;
+        transition-delay: 1s;
+      }
+
+      /* Badge Styles */
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 6px;
+        font-size: 10px;
+        font-weight: 600;
+        border-radius: 9px;
+        flex-shrink: 0;
+      }
+
+      .badge.default {
+        background: var(--badge-default-bg);
+        color: var(--badge-default-fg);
+      }
+
+      .badge.success {
+        background: var(--badge-success-bg);
+        color: var(--badge-success-fg);
+      }
+
+      .badge.warning {
+        background: var(--badge-warning-bg);
+        color: var(--badge-warning-fg);
+      }
+
+      .badge.error {
+        background: var(--badge-error-bg);
+        color: var(--badge-error-fg);
+      }
+
+      :host([collapsed]) .badge {
+        display: none;
+      }
+
+      /* Divider */
+      .divider {
+        height: 1px;
+        background: var(--sidebar-border);
+        margin: 8px 12px;
+      }
+
+      /* Legacy options container */
+      .legacyOptions {
+        padding: 0 8px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <div class="header">
+          <span class="heading">${this.heading}</span>
+        </div>
+        <div class="menuSection">
+          ${this.groups.length > 0
+            ? this.renderGroups()
+            : this.renderLegacyOptions()}
+        </div>
+      </div>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
+    `;
+  }
+
+  private renderGroups(): TemplateResult {
+    return html`
+      ${this.groups.map((group) => html`
+        <div class="menuGroup">
+          <div
+            class="groupHeader ${this.collapsedGroups.has(group.name) ? 'collapsed' : ''}"
+            @click="${() => this.toggleGroup(group.name)}"
+          >
+            <span class="groupTitle">
+              ${group.iconName ? html`<dees-icon .icon="${group.iconName.startsWith('lucide:') ? group.iconName : `lucide:${group.iconName}`}"></dees-icon>` : ''}
+              ${group.name}
+            </span>
+            <dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
+          </div>
+          <div class="groupItems ${this.collapsedGroups.has(group.name) ? 'collapsed' : ''}">
+            ${group.items.map((item) => this.renderMenuItem(item, group))}
+          </div>
+        </div>
+      `)}
+    `;
+  }
+
+  private renderMenuItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
+    const isSelected = this.selectedItem?.key === item.key;
+    return html`
+      <div
+        class="menuItem ${isSelected ? 'selected' : ''}"
+        @click="${() => this.selectItem(item, group)}"
+        @contextmenu="${(e: MouseEvent) => this.handleContextMenu(e, item)}"
+      >
+        ${item.iconName ? html`<dees-icon .icon="${item.iconName.startsWith('lucide:') ? item.iconName : `lucide:${item.iconName}`}"></dees-icon>` : ''}
+        <span class="itemLabel">${item.key}</span>
+        ${item.badge !== undefined ? html`
+          <span class="badge ${item.badgeVariant || 'default'}">${item.badge}</span>
+        ` : ''}
+        <span class="item-tooltip">${item.key}</span>
+      </div>
+    `;
+  }
+
+  private renderLegacyOptions(): TemplateResult {
+    return html`
+      <div class="legacyOptions">
+        ${this.selectionOptions.map((option) => {
+          if ('divider' in option && option.divider) {
+            return html`<div class="divider"></div>`;
+          }
+          const item = option as interfaces.ISelectionOption;
+          return this.renderMenuItem({
+            key: item.key,
+            iconName: item.iconName,
+            action: item.action,
+          });
+        })}
+      </div>
+    `;
+  }
+
+  private toggleGroup(groupName: string): void {
+    const newCollapsed = new Set(this.collapsedGroups);
+    if (newCollapsed.has(groupName)) {
+      newCollapsed.delete(groupName);
+    } else {
+      newCollapsed.add(groupName);
+    }
+    this.collapsedGroups = newCollapsed;
+  }
+
+  public toggleCollapse(): void {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('collapse-change', {
+      detail: { collapsed: this.collapsed },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private selectItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): void {
+    this.selectedItem = item;
+    item.action();
+
+    this.dispatchEvent(new CustomEvent('item-select', {
+      detail: { item, group },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleContextMenu(event: MouseEvent, item: interfaces.ISecondaryMenuItem): void {
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View details',
+        action: async () => {},
+        iconName: 'lucide:eye',
+      },
+      {
+        name: 'Edit',
+        action: async () => {},
+        iconName: 'lucide:pencil',
+      },
+    ]);
+  }
+
+  async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+
+    // Initialize collapsed state from group defaults
+    if (this.groups.length > 0) {
+      const initialCollapsed = new Set<string>();
+      this.groups.forEach(group => {
+        if (group.collapsed) {
+          initialCollapsed.add(group.name);
+        }
+      });
+      this.collapsedGroups = initialCollapsed;
+
+      // Auto-select first item if none selected
+      if (!this.selectedItem && this.groups[0]?.items.length > 0) {
+        this.selectItem(this.groups[0].items[0], this.groups[0]);
+      }
+    } else if (this.selectionOptions.length > 0) {
+      // Legacy mode: select first non-divider option
+      const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.ISelectionOption;
+      if (firstOption && !this.selectedItem) {
+        this.selectItem({
+          key: firstOption.key,
+          iconName: firstOption.iconName,
+          action: firstOption.action,
+        });
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-appui-secondarymenu': DeesAppuiSecondarymenu;
+  }
+}

ts_web/elements/00group-appui/dees-appui-secondarymenu/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-secondarymenu.js';

ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts

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

ts_web/elements/00group-appui/dees-appui-tabs/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-tabs.js';

ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts

@@ -1,4 +1,4 @@
-import * as interfaces from './interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,
@@ -11,8 +11,8 @@ import {
   state,
 } from '@design.estate/dees-element';
 
-import './dees-appui-tabs.js';
-import type { DeesAppuiTabs } from './dees-appui-tabs.js';
+import '../dees-appui-tabs/dees-appui-tabs.js';
+import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
 
 export interface IAppViewTab extends interfaces.ITab {
   content?: TemplateResult | (() => TemplateResult);
@@ -35,17 +35,17 @@ export class DeesAppuiView extends DeesElement {
         id: 'demo-view',
         name: 'Demo View',
         description: 'A demonstration view',
-        iconName: 'home',
+        iconName: 'lucide:home',
         tabs: [
           {
             key: 'overview',
-            iconName: 'chart-line',
+            iconName: 'lucide:lineChart',
             action: () => console.log('Overview tab'),
             content: html`<div style="padding: 20px;">Overview Content</div>`
           },
           {
             key: 'details',
-            iconName: 'file-alt',
+            iconName: 'lucide:fileText',
             action: () => console.log('Details tab'),
             content: html`<div style="padding: 20px;">Details Content</div>`
           }
@@ -60,13 +60,13 @@ export class DeesAppuiView extends DeesElement {
 
   // INSTANCE
   @property({ type: Object })
-  public viewConfig: IAppView;
+  accessor viewConfig: IAppView;
 
   @state()
-  private selectedTab: IAppViewTab | null = null;
+  accessor selectedTab: IAppViewTab | null = null;
 
   @state()
-  private tabs: DeesAppuiTabs;
+  accessor tabs: DeesAppuiTabs;
 
   public static styles = [
     cssManager.defaultStyles,

ts_web/elements/00group-appui/dees-appui-view/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-view.js';

ts_web/elements/00group-appui/index.ts

@@ -0,0 +1,10 @@
+// App UI Components
+export * from './dees-appui-activitylog/index.js';
+export * from './dees-appui-appbar/index.js';
+export * from './dees-appui-base/index.js';
+export * from './dees-appui-maincontent/index.js';
+export * from './dees-appui-mainmenu/index.js';
+export * from './dees-appui-secondarymenu/index.js';
+export * from './dees-appui-profiledropdown/index.js';
+export * from './dees-appui-tabs/index.js';
+export * from './dees-appui-view/index.js';

ts_web/elements/00group-button/dees-button-exit/dees-button-exit.ts

@@ -21,7 +21,7 @@ export class DeesButtonExit extends DeesElement {
   @property({
     type: Number
   })
-  public size: number = 24;
+  accessor size: number = 24;
 
   public styles = [
     cssManager.defaultStyles,

ts_web/elements/00group-button/dees-button-exit/index.ts

@@ -0,0 +1 @@
+export * from './dees-button-exit.js';

ts_web/elements/00group-button/dees-button-group/dees-button-group.ts

@@ -22,10 +22,10 @@ export class DeesButtonGroup extends DeesElement {
   public static demo = demoFunc;
 
   @property()
-  public label: string = '';
+  accessor label: string = '';
 
   @property()
-  public direction: 'horizontal' | 'vertical' = 'horizontal';
+  accessor direction: 'horizontal' | 'vertical' = 'horizontal';
 
   constructor() {
     super();

ts_web/elements/00group-button/dees-button-group/index.ts

@@ -0,0 +1 @@
+export * from './dees-button-group.js';

ts_web/elements/00group-button/dees-button/dees-button.demo.ts

@@ -0,0 +1,421 @@
+import { html, css, cssManager, domtools } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../dees-panel/dees-panel.js';
+import '../../00group-form/dees-form/dees-form.js';
+import '../../00group-form/dees-form-submit/dees-form-submit.js';
+import '../../00group-input/dees-input-text/dees-input-text.js';
+import '../../dees-icon/dees-icon.js';
+import type { DeesButton } from '../dees-button/dees-button.js';
+
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding: 24px;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      
+      dees-panel {
+        margin-bottom: 24px;
+      }
+      
+      dees-panel:last-child {
+        margin-bottom: 0;
+      }
+      
+      .button-group {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      
+      .vertical-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        max-width: 300px;
+      }
+      
+      .horizontal-group {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      
+      .demo-output {
+        margin-top: 16px;
+        padding: 12px;
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        border-radius: 6px;
+        font-size: 14px;
+        font-family: monospace;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+      }
+      
+      .icon-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin: 8px 0;
+      }
+      
+      .code-snippet {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+        padding: 8px 12px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 13px;
+        display: inline-block;
+        margin: 4px 0;
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Log button clicks for demo purposes
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const type = button.getAttribute('type') || 'default';
+          console.log(`Button variant clicked: ${type}`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'1. Button Variants'} .subtitle=${'Different visual styles for various use cases'}>
+        <div class="button-group">
+          <dees-button type="default">Default</dees-button>
+          <dees-button type="secondary">Secondary</dees-button>
+          <dees-button type="destructive">Destructive</dees-button>
+          <dees-button type="outline">Outline</dees-button>
+          <dees-button type="ghost">Ghost</dees-button>
+          <dees-button type="link">Link Button</dees-button>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate size differences programmatically
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const size = button.getAttribute('size') || 'default';
+          console.log(`Button size: ${size}`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'2. Button Sizes'} .subtitle=${'Multiple sizes for different contexts and use cases'}>
+        <div class="button-group">
+          <dees-button size="sm">Small Button</dees-button>
+          <dees-button size="default">Default Size</dees-button>
+          <dees-button size="lg">Large Button</dees-button>
+          <dees-button size="icon" type="outline" .text=${'🚀'}></dees-button>
+        </div>
+        
+        <div class="button-group" style="margin-top: 16px;">
+          <dees-button size="sm" type="secondary">Small Secondary</dees-button>
+          <dees-button size="default" type="destructive">Default Destructive</dees-button>
+          <dees-button size="lg" type="outline">Large Outline</dees-button>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track icon button clicks
+      const iconButtons = elementArg.querySelectorAll('dees-button');
+      iconButtons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const hasIcon = button.querySelector('dees-icon');
+          if (hasIcon) {
+            const iconName = hasIcon.getAttribute('iconFA') || 'unknown';
+            console.log(`Icon button clicked: ${iconName}`);
+          }
+        });
+      });
+    }}>
+      <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
+        <div class="icon-row">
+          <dees-button>
+            <dees-icon iconFA="faPlus"></dees-icon>
+            Add Item
+          </dees-button>
+          <dees-button type="destructive">
+            <dees-icon iconFA="faTrash"></dees-icon>
+            Delete
+          </dees-button>
+          <dees-button type="outline">
+            <dees-icon iconFA="faDownload"></dees-icon>
+            Download
+          </dees-button>
+        </div>
+        
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm">
+            <dees-icon iconFA="faCog"></dees-icon>
+            Settings
+          </dees-button>
+          <dees-button type="ghost">
+            <dees-icon iconFA="faChevronLeft"></dees-icon>
+            Back
+          </dees-button>
+          <dees-button type="ghost">
+            Next
+            <dees-icon iconFA="faChevronRight"></dees-icon>
+          </dees-button>
+        </div>
+        
+        <div class="icon-row">
+          <dees-button size="icon" type="default">
+            <dees-icon iconFA="faPlus"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="secondary">
+            <dees-icon iconFA="faCog"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="outline">
+            <dees-icon iconFA="faSearch"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="ghost">
+            <dees-icon iconFA="faEllipsisV"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="destructive">
+            <dees-icon iconFA="faTrash"></dees-icon>
+          </dees-button>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate status changes
+      const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
+      const successButton = elementArg.querySelector('dees-button[status="success"]');
+      const errorButton = elementArg.querySelector('dees-button[status="error"]');
+      
+      // Simulate status changes
+      if (pendingButton) {
+        setTimeout(() => {
+          console.log('Pending button is showing loading state');
+        }, 1000);
+      }
+      
+      if (successButton) {
+        successButton.addEventListener('clicked', () => {
+          console.log('Success state button clicked');
+        });
+      }
+      
+      if (errorButton) {
+        errorButton.addEventListener('clicked', () => {
+          console.log('Error state button clicked');
+        });
+      }
+    }}>
+      <dees-panel .title=${'4. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
+        <div class="button-group">
+          <dees-button status="normal">Normal</dees-button>
+          <dees-button status="pending">Processing...</dees-button>
+          <dees-button status="success">Success!</dees-button>
+          <dees-button status="error">Error!</dees-button>
+          <dees-button disabled>Disabled</dees-button>
+        </div>
+        
+        <div class="button-group" style="margin-top: 16px;">
+          <dees-button type="secondary" status="pending" size="sm">Small Loading</dees-button>
+          <dees-button type="outline" status="pending">Default Loading</dees-button>
+          <dees-button type="destructive" status="pending" size="lg">Large Loading</dees-button>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Set up click handlers with the output element
+      const output = elementArg.querySelector('#click-output');
+      
+      const clickMeBtn = elementArg.querySelector('dees-button:first-of-type');
+      const dataBtn = elementArg.querySelector('dees-button[type="secondary"]');
+      const asyncBtn = elementArg.querySelector('dees-button[type="destructive"]');
+      
+      if (clickMeBtn && output) {
+        clickMeBtn.addEventListener('clicked', () => {
+          output.textContent = `Clicked: Default button at ${new Date().toLocaleTimeString()}`;
+        });
+      }
+      
+      if (dataBtn && output) {
+        dataBtn.addEventListener('clicked', (e: CustomEvent) => {
+          output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
+        });
+      }
+      
+      if (asyncBtn && output) {
+        asyncBtn.addEventListener('clicked', async () => {
+          output.textContent = 'Processing...';
+          await domtools.plugins.smartdelay.delayFor(2000);
+          output.textContent = 'Action completed!';
+        });
+      }
+    }}>
+      <dees-panel .title=${'5. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
+        <div class="button-group">
+          <dees-button>Click Me</dees-button>
+          <dees-button type="secondary" .eventDetailData=${'custom-data-123'}>
+            Click with Data
+          </dees-button>
+          <dees-button type="destructive">Async Action</dees-button>
+        </div>
+        
+        <div id="click-output" class="demo-output">
+          <em>Click a button to see the result...</em>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Set up form submission handling
+      const form = elementArg.querySelector('dees-form');
+      const output = elementArg.querySelector('#form-output');
+      
+      if (form && output) {
+        form.addEventListener('formData', (e: CustomEvent) => {
+          output.innerHTML = '<strong>Form submitted with data:</strong><br>' + 
+            JSON.stringify(e.detail.data, null, 2);
+        });
+      }
+      
+      // Track non-submit button clicks
+      const draftBtn = elementArg.querySelector('dees-button[type="secondary"]');
+      const cancelBtn = elementArg.querySelector('dees-button[type="ghost"]');
+      
+      if (draftBtn) {
+        draftBtn.addEventListener('clicked', () => {
+          console.log('Save Draft clicked');
+        });
+      }
+      
+      if (cancelBtn) {
+        cancelBtn.addEventListener('clicked', () => {
+          console.log('Cancel clicked');
+        });
+      }
+    }}>
+      <dees-panel .title=${'6. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
+        <dees-form>
+          <dees-input-text label="Name" key="name" required></dees-input-text>
+          <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
+          <dees-input-text label="Message" key="message" isMultiline></dees-input-text>
+          
+          <dees-button type="secondary">Save Draft</dees-button>
+          <dees-button type="ghost">Cancel</dees-button>
+          <dees-form-submit>Submit Form</dees-form-submit>
+        </dees-form>
+        
+        <div id="form-output" class="demo-output" style="white-space: pre-wrap;">
+          <em>Submit the form to see the data...</em>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Log legacy type mappings
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        const type = button.getAttribute('type');
+        if (type) {
+          console.log(`Legacy type "${type}" is supported for backward compatibility`);
+        }
+      });
+    }}>
+      <dees-panel .title=${'7. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
+        <div class="button-group">
+          <dees-button type="normal">Normal → Default</dees-button>
+          <dees-button type="highlighted">Highlighted → Destructive</dees-button>
+          <dees-button type="discreet">Discreet → Outline</dees-button>
+          <dees-button type="big">Big → Large Size</dees-button>
+        </div>
+        
+        <p style="margin-top: 16px; font-size: 14px; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};">
+          These legacy type values are maintained for backward compatibility but we recommend using the new variant system.
+        </p>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track action group clicks
+      const actionGroup = elementArg.querySelectorAll('.vertical-group')[0];
+      const dangerGroup = elementArg.querySelectorAll('.vertical-group')[1];
+      
+      if (actionGroup) {
+        const buttons = actionGroup.querySelectorAll('dees-button');
+        buttons.forEach((button, index) => {
+          button.addEventListener('clicked', () => {
+            const action = ['Save Changes', 'Discard', 'Help'][index];
+            console.log(`Action group: ${action} clicked`);
+          });
+        });
+      }
+      
+      if (dangerGroup) {
+        const buttons = dangerGroup.querySelectorAll('dees-button');
+        buttons.forEach((button, index) => {
+          button.addEventListener('clicked', () => {
+            const action = ['Delete Account', 'Archive Data', 'Not Available'][index];
+            if (index !== 2) { // Skip disabled button
+              console.log(`Danger zone: ${action} clicked`);
+            }
+          });
+        });
+      }
+    }}>
+      <dees-panel .title=${'8. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
+        <div class="horizontal-group">
+          <div class="vertical-group">
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
+            <dees-button type="default" size="sm">
+              <dees-icon iconFA="faSave"></dees-icon>
+              Save Changes
+            </dees-button>
+            <dees-button type="secondary" size="sm">
+              <dees-icon iconFA="faUndo"></dees-icon>
+              Discard
+            </dees-button>
+            <dees-button type="ghost" size="sm">
+              <dees-icon iconFA="faQuestionCircle"></dees-icon>
+              Help
+            </dees-button>
+          </div>
+          
+          <div class="vertical-group">
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
+            <dees-button type="destructive" size="sm">
+              <dees-icon iconFA="faTrash"></dees-icon>
+              Delete Account
+            </dees-button>
+            <dees-button type="outline" size="sm">
+              <dees-icon iconFA="faArchive"></dees-icon>
+              Archive Data
+            </dees-button>
+            <dees-button type="ghost" size="sm" disabled>
+              <dees-icon iconFA="faBan"></dees-icon>
+              Not Available
+            </dees-button>
+          </div>
+        </div>
+        
+        <div style="margin-top: 24px;">
+          <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
+          <div class="code-snippet">
+            &lt;dees-button type="default" size="sm" @clicked="\${handleClick}"&gt;<br>
+            &nbsp;&nbsp;&lt;dees-icon iconFA="faSave"&gt;&lt;/dees-icon&gt;<br>
+            &nbsp;&nbsp;Save Changes<br>
+            &lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+  </div>
+`;

ts_web/elements/00group-button/dees-button/dees-button.ts

@@ -29,42 +29,42 @@ export class DeesButton extends DeesElement {
       return true;
     }
   })
-  public text: string;
+  accessor text: string;
 
   @property()
-  public eventDetailData: string;
+  accessor eventDetailData: string;
 
   @property({
     type: Boolean,
     reflect: true,
   })
-  public disabled = false;
+  accessor disabled = false;
 
   @property({
     type: Boolean
   })
-  public isHidden = false;
+  accessor isHidden = false;
 
   @property({
     type: String
   })
-  public type: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
-  
-  @property({
-    type: String
-  })
-  public size: 'default' | 'sm' | 'lg' | 'icon' = 'default';
+  accessor type: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
 
   @property({
     type: String
   })
-  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+  accessor size: 'default' | 'sm' | 'lg' | 'icon' = 'default';
+
+  @property({
+    type: String
+  })
+  accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
   @property({
     type: Boolean,
     reflect: true
   })
-  public insideForm: boolean = false;
+  accessor insideForm: boolean = false;
 
   constructor() {
     super();

ts_web/elements/00group-button/dees-button/index.ts

@@ -0,0 +1 @@
+export * from './dees-button.js';

ts_web/elements/00group-button/index.ts

@@ -0,0 +1,4 @@
+// Button Components
+export * from './dees-button/index.js';
+export * from './dees-button-exit/index.js';
+export * from './dees-button-group/index.js';

ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -1,16 +1,15 @@
 import {
   DeesElement,
-  css,
-  cssManager,
   customElement,
-  html,
   property,
   state,
   type TemplateResult,
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { demoFunc } from './dees-chart-area.demo.js';
+import { demoFunc } from './demo.js';
+import { chartAreaStyles } from './styles.js';
+import { renderChartArea } from './template.js';
 
 import ApexCharts from 'apexcharts';
 
@@ -26,36 +25,36 @@ export class DeesChartArea extends DeesElement {
 
   // instance
   @state()
-  public chart: ApexCharts;
+  accessor chart: ApexCharts;
 
   @property()
-  public label: string = 'Untitled Chart';
+  accessor label: string = 'Untitled Chart';
 
   @property({ type: Array })
-  public series: ApexAxisChartSeries = [];
-  
+  accessor series: ApexAxisChartSeries = [];
+
   // Override getter to return internal chart data
   get chartSeries(): ApexAxisChartSeries {
     return this.internalChartData.length > 0 ? this.internalChartData : this.series;
   }
 
   @property({ attribute: false })
-  public yAxisFormatter: (value: number) => string = (val) => `${val} Mbps`;
-  
+  accessor yAxisFormatter: (value: number) => string = (val) => `${val} Mbps`;
+
   @property({ type: Number })
-  public rollingWindow: number = 0; // 0 means no rolling window
-  
+  accessor rollingWindow: number = 0; // 0 means no rolling window
+
   @property({ type: Boolean })
-  public realtimeMode: boolean = false;
-  
+  accessor realtimeMode: boolean = false;
+
   @property({ type: String })
-  public yAxisScaling: 'fixed' | 'dynamic' | 'percentage' = 'dynamic';
-  
+  accessor yAxisScaling: 'fixed' | 'dynamic' | 'percentage' = 'dynamic';
+
   @property({ type: Number })
-  public yAxisMax: number = 100; // Used when yAxisScaling is 'fixed' or 'percentage'
-  
+  accessor yAxisMax: number = 100; // Used when yAxisScaling is 'fixed' or 'percentage'
+
   @property({ type: Number })
-  public autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable)
+  accessor autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable)
 
   private resizeObserver: ResizeObserver;
   private resizeTimeout: number;
@@ -141,73 +140,14 @@ export class DeesChartArea extends DeesElement {
     }
   }
 
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-        font-weight: 400;
-        font-size: 14px;
-      }
-      .mainbox {
-        position: relative;
-        width: 100%;
-        height: 400px;
-        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;
-      }
-
-      .chartTitle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        text-align: left;
-        padding: 16px 24px;
-        z-index: 10;
-        font-size: 14px;
-        font-weight: 500;
-        letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
-      }
-      .chartContainer {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        bottom: 0px;
-        right: 0px;
-        padding: 44px 16px 16px 0px;
-        overflow: hidden;
-        background: transparent; /* Ensure container doesn't override chart background */
-      }
-      
-      /* ApexCharts theme overrides */
-      .apexcharts-canvas {
-        background: transparent !important;
-      }
-      
-      .apexcharts-inner {
-        background: transparent !important;
-      }
-      
-      .apexcharts-graphical {
-        background: transparent !important;
-      }
-    `,
-  ];
+  public static styles = chartAreaStyles;
 
   public render(): TemplateResult {
-    return html`
-      <div class="mainbox">
-        <div class="chartTitle">${this.label}</div>
-        <div class="chartContainer"></div>
-      </div>
-    `;
+    return renderChartArea(this);
   }
 
+
+
   public async firstUpdated() {
     await this.domtoolsPromise;
     

ts_web/elements/00group-chart/dees-chart-area/demo.ts

@@ -1,6 +1,7 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
-import type { DeesChartArea } from './dees-chart-area.js';
+import type { DeesChartArea } from './component.js';
 import '@design.estate/dees-wcctools/demotools';
+import './component.js';
 
 export const demoFunc = () => {
   // Initial dataset values

ts_web/elements/00group-chart/dees-chart-area/index.ts

@@ -0,0 +1 @@
+export * from './component.js';

ts_web/elements/00group-chart/dees-chart-area/styles.ts

@@ -0,0 +1,60 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const chartAreaStyles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        font-weight: 400;
+        font-size: 14px;
+      }
+      .mainbox {
+        position: relative;
+        width: 100%;
+        height: 400px;
+        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;
+      }
+
+      .chartTitle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        text-align: left;
+        padding: 16px 24px;
+        z-index: 10;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+      }
+      .chartContainer {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        bottom: 0px;
+        right: 0px;
+        padding: 44px 16px 16px 0px;
+        overflow: hidden;
+        background: transparent; /* Ensure container doesn't override chart background */
+      }
+      
+      /* ApexCharts theme overrides */
+      .apexcharts-canvas {
+        background: transparent !important;
+      }
+      
+      .apexcharts-inner {
+        background: transparent !important;
+      }
+      
+      .apexcharts-graphical {
+        background: transparent !important;
+      }
+    `,
+  ];
+

ts_web/elements/00group-chart/dees-chart-area/template.ts

@@ -0,0 +1,12 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartArea } from './component.js';
+
+export const renderChartArea = (component: DeesChartArea): TemplateResult => {
+      return html`
+        <div class="mainbox">
+          <div class="chartTitle">${component.label}</div>
+          <div class="chartContainer"></div>
+        </div>
+      `;
+  
+};

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts

@@ -1,5 +1,5 @@
 import { html } from '@design.estate/dees-element';
-import type { DeesChartLog } from './dees-chart-log.js';
+import type { DeesChartLog } from '../dees-chart-log/dees-chart-log.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => {

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts

@@ -30,16 +30,16 @@ export class DeesChartLog extends DeesElement {
   public static demo = demoFunc;
 
   @property()
-  public label: string = 'Server Logs';
+  accessor label: string = 'Server Logs';
 
   @property({ type: Array })
-  public logEntries: ILogEntry[] = [];
+  accessor logEntries: ILogEntry[] = [];
 
   @property({ type: Boolean })
-  public autoScroll: boolean = true;
+  accessor autoScroll: boolean = true;
 
   @property({ type: Number })
-  public maxEntries: number = 1000;
+  accessor maxEntries: number = 1000;
 
   private logContainer: HTMLDivElement;
 

ts_web/elements/00group-chart/dees-chart-log/index.ts

@@ -0,0 +1 @@
+export * from './dees-chart-log.js';

ts_web/elements/00group-chart/index.ts

@@ -0,0 +1,3 @@
+// Chart Components
+export * from './dees-chart-area/index.js';
+export * from './dees-chart-log/index.js';

ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -8,14 +8,14 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import { cssGeistFontFamily, cssMonoFontFamily } from './00fonts.js';
+import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
 
 import hlight from 'highlight.js';
 
 import * as smartstring from '@push.rocks/smartstring';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from './dees-contextmenu.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,13 +28,13 @@ export class DeesDataviewCodebox extends DeesElement {
   public static demo = demoFunc;
 
   @property()
-  public progLang: string = 'typescript';
+  accessor progLang: string = 'typescript';
 
   @property({
     type: String,
     reflect: true,
   })
-  public codeToDisplay: string = '';
+  accessor codeToDisplay: string = '';
 
   constructor() {
     super();
@@ -228,7 +228,6 @@ export class DeesDataviewCodebox extends DeesElement {
     `;
   }
 
-  @state()
   private codeToDisplayStore = '';
 
   public async updated(_changedProperties) {

ts_web/elements/00group-dataview/dees-dataview-codebox/index.ts

@@ -0,0 +1 @@
+export * from './dees-dataview-codebox.js';

ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

@@ -1,5 +1,5 @@
-import * as colors from './00colors.js';
-import * as plugins from './00plugins.js';
+import * as colors from '../../00colors.js';
+import * as plugins from '../../00plugins.js';
 
 import { demoFunc } from './dees-dataview-statusobject.demo.js';
 import {
@@ -15,7 +15,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as tsclass from '@tsclass/tsclass';
-import { DeesContextmenu } from './dees-contextmenu.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,7 +27,7 @@ declare global {
 export class DeesDataviewStatusobject extends DeesElement {
   public static demo = demoFunc;
 
-  @property({ type: Object }) statusObject: tsclass.code.IStatusObject;
+  @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
 
   public static styles = [
     cssManager.defaultStyles,
@@ -175,21 +175,21 @@ export class DeesDataviewStatusobject extends DeesElement {
                 DeesContextmenu.openContextMenuWithOptions(event, [
                   {
                     name: 'Copy Value',
-                    iconName: 'lucideCopy',
+                    iconName: 'lucide:copy',
                     action: async () => {
                       await this.copyToClipboard(detailArg.value, 'Value');
                     },
                   },
                   {
                     name: 'Copy Key',
-                    iconName: 'lucideKey',
+                    iconName: 'lucide:key',
                     action: async () => {
                       await this.copyToClipboard(detailArg.name, 'Key');
                     },
                   },
                   {
                     name: 'Copy Key:Value',
-                    iconName: 'lucideCopyPlus',
+                    iconName: 'lucide:copy-plus',
                     action: async () => {
                       await this.copyToClipboard(`${detailArg.name}: ${detailArg.value}`, 'Key:Value');
                     },

ts_web/elements/00group-dataview/dees-dataview-statusobject/index.ts

@@ -0,0 +1 @@
+export * from './dees-dataview-statusobject.js';

ts_web/elements/00group-dataview/index.ts

@@ -0,0 +1,3 @@
+// Data View Components
+export * from './dees-dataview-codebox/index.js';
+export * from './dees-dataview-statusobject/index.js';

ts_web/elements/00group-editor/dees-editor-markdown/index.ts

@@ -0,0 +1 @@
+export * from './dees-editor-markdown.js';

ts_web/elements/00group-editor/dees-editor-markdownoutlet/index.ts

@@ -0,0 +1 @@
+export * from './dees-editor-markdownoutlet.js';

ts_web/elements/00group-editor/dees-editor/dees-editor.ts

@@ -8,6 +8,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import { MONACO_VERSION } from './version.js';
 
 import type * as monaco from 'monaco-editor';
 
@@ -32,17 +33,17 @@ export class DeesEditor extends DeesElement {
   @property({
     type: String
   })
-  public content = "function hello() {\n\talert('Hello world!');\n}";
+  accessor content = "function hello() {\n\talert('Hello world!');\n}";
 
   @property({
     type: Object
   })
-  public contentSubject = new domtools.plugins.smartrx.rxjs.Subject<string>();
+  accessor contentSubject = new domtools.plugins.smartrx.rxjs.Subject<string>();
 
   @property({
     type: Boolean
   })
-  public wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
+  accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
 
   constructor() {
     super();
@@ -80,10 +81,11 @@ export class DeesEditor extends DeesElement {
   ): Promise<void> {
     super.firstUpdated(_changedProperties);
     const container = this.shadowRoot.getElementById('container');
+    const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
 
     if (!DeesEditor.monacoDeferred) {
       DeesEditor.monacoDeferred = domtools.plugins.smartpromise.defer();
-      const scriptUrl = `https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js`;
+      const scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
       const script = document.createElement('script');
       script.src = scriptUrl;
       script.onload = () => {
@@ -94,7 +96,7 @@ export class DeesEditor extends DeesElement {
     await DeesEditor.monacoDeferred.promise;
 
     (window as any).require.config({
-      paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' },
+      paths: { vs: `${monacoCdnBase}/min/vs` },
     });
     (window as any).require(['vs/editor/editor.main'], async () => {
       const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
@@ -109,7 +111,7 @@ export class DeesEditor extends DeesElement {
       this.editorDeferred.resolve(editor);
     });
     const css = await (
-      await fetch('https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css')
+      await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`)
     ).text();
     const styleElement = document.createElement('style');
     styleElement.textContent = css;

ts_web/elements/00group-editor/dees-editor/index.ts

@@ -0,0 +1 @@
+export * from './dees-editor.js';

ts_web/elements/00group-editor/dees-editor/version.ts

@@ -0,0 +1,2 @@
+// Auto-generated by scripts/update-monaco-version.cjs
+export const MONACO_VERSION = '0.52.2';

ts_web/elements/00group-editor/index.ts

@@ -0,0 +1,4 @@
+// Editor Components
+export * from './dees-editor/index.js';
+export * from './dees-editor-markdown/index.js';
+export * from './dees-editor-markdownoutlet/index.js';

ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts

@@ -7,7 +7,7 @@ import {
   cssManager,
   property,
 } from '@design.estate/dees-element';
-import type { DeesForm } from './dees-form.js';
+import type { DeesForm } from '../dees-form/dees-form.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,17 +23,17 @@ export class DeesFormSubmit extends DeesElement {
     type: Boolean,
     reflect: true,
   })
-  public disabled = false;
+  accessor disabled = false;
 
   @property({
     type: String,
   })
-  public text: string;
+  accessor text: string;
 
   @property({
     type: String,
   })
-  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+  accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
   constructor() {
     super();
@@ -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();
     }
   }
 

ts_web/elements/00group-form/dees-form-submit/index.ts

@@ -0,0 +1 @@
+export * from './dees-form-submit.js';

ts_web/elements/00group-form/dees-form/dees-form.demo.ts

@@ -0,0 +1,313 @@
+import { html, css, domtools, cssManager } from '@design.estate/dees-element';
+import type { DeesForm } from './dees-form.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding: 24px;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      
+      dees-panel {
+        margin-bottom: 24px;
+      }
+      
+      dees-panel:last-child {
+        margin-bottom: 0;
+      }
+      
+      .form-output {
+        margin-top: 16px;
+        padding: 12px;
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        border-radius: 6px;
+        font-size: 14px;
+        font-family: monospace;
+        white-space: pre-wrap;
+      }
+      
+      .status-message {
+        margin-top: 16px;
+        padding: 12px;
+        border-radius: 6px;
+        font-size: 14px;
+      }
+      
+      .status-message.success {
+        background: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(142.1 70.6% 35.3%)', 'hsl(142.1 70.6% 65.3%)')};
+      }
+      
+      .status-message.error {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 72.2% 50.6% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 72.2% 40.6%)', 'hsl(0 72.2% 60.6%)')};
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
+      const outputDiv = elementArg.querySelector('.form-output');
+      
+      if (form && outputDiv) {
+        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+          const data = eventArg.detail.data;
+          console.log('Form submitted with data:', data);
+          
+          // Show processing state
+          form.setStatus('pending', 'Processing your registration...');
+          outputDiv.innerHTML = `<strong>Submitted Data:</strong>\n${JSON.stringify(data, null, 2)}`;
+          
+          // Simulate API call
+          await domtools.plugins.smartdelay.delayFor(2000);
+          
+          // Show success
+          form.setStatus('success', 'Registration completed successfully!');
+          
+          // Reset form after delay
+          await domtools.plugins.smartdelay.delayFor(2000);
+          form.reset();
+          outputDiv.innerHTML = '<em>Form has been reset</em>';
+        });
+        
+        // Track individual field changes
+        const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
+        inputs.forEach((input) => {
+          input.addEventListener('changeSubject', () => {
+            console.log('Field changed:', input.getAttribute('key'));
+          });
+        });
+      }
+    }}>
+      <dees-panel .heading="Complete Form Example" .description="A comprehensive form with various input types, validation, and form submission handling">
+        <dees-form>
+          <dees-input-text 
+            .required=${true} 
+            key="firstName" 
+            label="First Name"
+            .description=${'Your given name'}
+          ></dees-input-text>
+          
+          <dees-input-text 
+            .required=${true} 
+            key="lastName" 
+            label="Last Name"
+          ></dees-input-text>
+          
+          <dees-input-text 
+            .required=${true} 
+            key="email" 
+            label="Email Address"
+            .description=${'We will use this to contact you'}
+          ></dees-input-text>
+          
+          <dees-input-dropdown
+            .required=${true}
+            key="country"
+            .label=${'Country'}
+            .options=${[
+              { option: 'United States', key: 'us' },
+              { option: 'Canada', key: 'ca' },
+              { option: 'Germany', key: 'de' },
+              { option: 'France', key: 'fr' },
+              { option: 'United Kingdom', key: 'uk' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-text
+            .required=${true}
+            key="password"
+            label="Password"
+            isPasswordBool
+            .description=${'Minimum 8 characters'}
+          ></dees-input-text>
+          
+          <dees-input-checkbox
+            .required=${true}
+            key="terms"
+            label="I agree to the Terms and Conditions"
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox
+            key="newsletter"
+            label="Send me promotional emails"
+            .value=${true}
+          ></dees-input-checkbox>
+          
+          <dees-form-submit>Create Account</dees-form-submit>
+        </dees-form>
+        
+        <div class="form-output">
+          <em>Submit the form to see the collected data...</em>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
+      
+      if (form) {
+        // Track horizontal layout behavior
+        console.log('Horizontal form layout active');
+        
+        // Monitor filter changes
+        form.addEventListener('formData', (event: CustomEvent) => {
+          const filters = event.detail.data;
+          console.log('Filter applied:', filters);
+          
+          // Simulate search
+          const resultsCount = Math.floor(Math.random() * 100) + 1;
+          console.log(`Found ${resultsCount} results with filters:`, filters);
+        });
+        
+        // Setup real-time filter updates
+        const inputs = form.querySelectorAll('[key]');
+        inputs.forEach((input) => {
+          input.addEventListener('changeSubject', async () => {
+            // Get current form data
+            const formData = await form.collectFormData();
+            console.log('Live filter update:', formData);
+          });
+        });
+      }
+    }}>
+      <dees-panel .heading="Horizontal Form Layout" .description="Compact form with inputs arranged horizontally - perfect for filters and quick forms">
+        <dees-form horizontal-layout>
+          <dees-input-text 
+            key="search" 
+            label="Search"
+            placeholder="Enter keywords..."
+          ></dees-input-text>
+          
+          <dees-input-dropdown
+            key="category"
+            .label=${'Category'}
+            .enableSearch=${false}
+            .options=${[
+              { option: 'All', key: 'all' },
+              { option: 'Products', key: 'products' },
+              { option: 'Services', key: 'services' },
+              { option: 'Support', key: 'support' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-dropdown
+            key="sort"
+            .label=${'Sort By'}
+            .enableSearch=${false}
+            .options=${[
+              { option: 'Newest', key: 'newest' },
+              { option: 'Popular', key: 'popular' },
+              { option: 'Price: Low to High', key: 'price_asc' },
+              { option: 'Price: High to Low', key: 'price_desc' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-checkbox
+            key="inStock"
+            label="In Stock Only"
+            .value=${true}
+          ></dees-input-checkbox>
+        </dees-form>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
+      const statusDiv = elementArg.querySelector('#status-display');
+      
+      if (form) {
+        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+          const data = eventArg.detail.data;
+          console.log('Advanced form data:', data);
+          
+          // Show validation in progress
+          form.setStatus('pending', 'Validating your information...');
+          
+          // Simulate validation
+          await domtools.plugins.smartdelay.delayFor(1500);
+          
+          // Check IBAN validity (simple check)
+          if (data.iban && data.iban.length > 15) {
+            form.setStatus('success', 'Application submitted successfully!');
+            
+            if (statusDiv) {
+              statusDiv.className = 'status-message success';
+              statusDiv.textContent = '✓ Your application has been submitted. We will contact you soon.';
+            }
+          } else {
+            form.setStatus('error', 'Please check your IBAN');
+            
+            if (statusDiv) {
+              statusDiv.className = 'status-message error';
+              statusDiv.textContent = '✗ Invalid IBAN format. Please check and try again.';
+            }
+          }
+          
+          console.log('Form data logged:', data);
+        });
+        
+        // Monitor file uploads
+        const fileUpload = form.querySelector('dees-input-fileupload');
+        if (fileUpload) {
+          fileUpload.addEventListener('change', (event: any) => {
+            const files = event.detail?.files || [];
+            console.log(`${files.length} file(s) selected for upload`);
+          });
+        }
+      }
+    }}>
+      <dees-panel .heading="Advanced Form Features" .description="Form with specialized input types and complex validation">
+        <dees-form>
+          <dees-input-iban 
+            key="iban"
+            label="IBAN"
+            .required=${true}
+          ></dees-input-iban>
+          
+          <dees-input-phone
+            key="phone"
+            label="Phone Number"
+            .required=${true}
+          ></dees-input-phone>
+          
+          <dees-input-multitoggle
+            key="preferences"
+            .label=${'Notification Preferences'}
+            .options=${['Email', 'SMS', 'Push', 'In-App']}
+            .selectedOption=${'Email'}
+          ></dees-input-multitoggle>
+          
+          <dees-input-multiselect
+            key="interests"
+            .label=${'Areas of Interest'}
+            .options=${[
+              { option: 'Technology', key: 'tech' },
+              { option: 'Design', key: 'design' },
+              { option: 'Business', key: 'business' },
+              { option: 'Marketing', key: 'marketing' },
+              { option: 'Sales', key: 'sales' },
+            ]}
+          ></dees-input-multiselect>
+          
+          <dees-input-fileupload
+            key="documents"
+            .label=${'Upload Documents'}
+            .description=${'PDF, DOC, or DOCX files up to 10MB'}
+          ></dees-input-fileupload>
+          
+          <dees-form-submit>Submit Application</dees-form-submit>
+        </dees-form>
+        
+        <div id="status-display"></div>
+      </dees-panel>
+    </dees-demowrapper>
+  </div>
+`;

ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -8,23 +8,25 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import { DeesInputCheckbox } from './dees-input-checkbox.js';
-import { DeesInputText } from './dees-input-text.js';
-import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
-import { DeesInputRadiogroup } from './dees-input-radiogroup.js';
-import { DeesInputDropdown } from './dees-input-dropdown.js';
-import { DeesInputFileupload } from './dees-input-fileupload.js';
-import { DeesInputIban } from './dees-input-iban.js';
-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 { DeesInputCheckbox } from '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
+import { DeesInputDatepicker } from '../../00group-input/dees-input-datepicker/index.js';
+import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
+import { DeesInputQuantitySelector } from '../../00group-input/dees-input-quantityselector/dees-input-quantityselector.js';
+import { DeesInputRadiogroup } from '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
+import { DeesInputDropdown } from '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
+import { DeesInputFileupload } from '../../00group-input/dees-input-fileupload/index.js';
+import { DeesInputIban } from '../../00group-input/dees-input-iban/dees-input-iban.js';
+import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
+import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
+import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
+import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
+import { DeesTable } from '../../dees-table/index.js';
 import { demoFunc } from './dees-form.demo.js';
 
 // Unified set for form input types
 const FORM_INPUT_TYPES = [
   DeesInputCheckbox,
+  DeesInputDatepicker,
   DeesInputDropdown,
   DeesInputFileupload,
   DeesInputIban,
@@ -39,6 +41,7 @@ const FORM_INPUT_TYPES = [
 
 export type TFormInputElement =
   | DeesInputCheckbox
+  | DeesInputDatepicker
   | DeesInputDropdown
   | DeesInputFileupload
   | DeesInputIban
@@ -69,7 +72,7 @@ export class DeesForm extends DeesElement {
    * When true, sets all child inputs to horizontal layout
    */
   @property({ type: Boolean, reflect: true, attribute: 'horizontal-layout' })
-  public horizontalLayout: boolean = false;
+  accessor horizontalLayout: boolean = false;
 
   public render(): TemplateResult {
     return html`

ts_web/elements/00group-form/dees-form/index.ts

@@ -0,0 +1 @@
+export * from './dees-form.js';

ts_web/elements/00group-form/index.ts

@@ -0,0 +1,3 @@
+// Form Components
+export * from './dees-form/index.js';
+export * from './dees-form-submit/index.js';

ts_web/elements/00group-input/dees-input-base/dees-input-base.ts

@@ -19,31 +19,31 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
    * - auto: Detect from parent context
    */
   @property({ type: String })
-  public layoutMode: 'vertical' | 'horizontal' | 'auto' = 'auto';
+  accessor layoutMode: 'vertical' | 'horizontal' | 'auto' = 'auto';
 
   /**
    * Position of the label relative to the input
    */
   @property({ type: String })
-  public labelPosition: 'top' | 'left' | 'right' | 'none' = 'top';
+  accessor labelPosition: 'top' | 'left' | 'right' | 'none' = 'top';
 
   /**
    * Common properties for all inputs
    */
   @property({ type: String })
-  public key: string;
+  accessor key: string;
 
   @property({ type: String })
-  public label: string;
+  accessor label: string;
 
   @property({ type: Boolean })
-  public required: boolean = false;
+  accessor required: boolean = false;
 
   @property({ type: Boolean })
-  public disabled: boolean = false;
+  accessor disabled: boolean = false;
 
   @property({ type: String })
-  public description: string;
+  accessor description: string;
 
   /**
    * Common styles for all input components

ts_web/elements/00group-input/dees-input-base/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-base.js';

ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts

@@ -1,8 +1,8 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
-import type { DeesInputCheckbox } from './dees-input-checkbox.js';
-import './dees-button.js';
+import '../../dees-panel/dees-panel.js';
+import type { DeesInputCheckbox } from '../dees-input-checkbox/dees-input-checkbox.js';
+import '../../00group-button/dees-button/dees-button.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {

ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts

@@ -6,9 +6,9 @@ import {
   css,
   cssManager,
 } from '@design.estate/dees-element';
-import { DeesInputBase } from './dees-input-base.js';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import { demoFunc } from './dees-input-checkbox.demo.js';
-import { cssGeistFontFamily } from './00fonts.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -26,7 +26,10 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
   @property({
     type: Boolean,
   })
-  public value: boolean = false;
+  accessor value: boolean = false;
+
+  @property({ type: Boolean })
+  accessor indeterminate: boolean = false;
 
 
   constructor() {
@@ -166,7 +169,15 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
                     </svg>
                   </span>
                 `
-              : html``}
+              : 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">
             ${this.label ? html`<div class="checkbox-label">${this.label}</div>` : ''}

ts_web/elements/00group-input/dees-input-checkbox/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-checkbox.js';

ts_web/elements/00group-input/dees-input-datepicker/component.ts

@@ -0,0 +1,624 @@
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+} from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { demoFunc } from './demo.js';
+import { datepickerStyles } from './styles.js';
+import { renderDatepicker } from './template.js';
+import type { IDateEvent } from './types.js';
+import '../../dees-icon/dees-icon.js';
+import '../../dees-label/dees-label.js';
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-datepicker': DeesInputDatepicker;
+  }
+}
+
+@customElement('dees-input-datepicker')
+export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
+  public static demo = demoFunc;
+
+  @property({ type: String })
+  accessor value: string = '';
+
+  @property({ type: Boolean })
+  accessor enableTime: boolean = false;
+
+  @property({ type: String })
+  accessor timeFormat: '24h' | '12h' = '24h';
+
+  @property({ type: Number })
+  accessor minuteIncrement: number = 1;
+
+  @property({ type: String })
+  accessor dateFormat: string = 'YYYY-MM-DD';
+
+  @property({ type: String })
+  accessor minDate: string = '';
+
+  @property({ type: String })
+  accessor maxDate: string = '';
+
+  @property({ type: Array })
+  accessor disabledDates: string[] = [];
+
+  @property({ type: Number })
+  accessor weekStartsOn: 0 | 1 = 1; // Default to Monday
+
+  @property({ type: String })
+  accessor placeholder: string = 'YYYY-MM-DD';
+
+  @property({ type: Boolean })
+  accessor enableTimezone: boolean = false;
+
+  @property({ type: String })
+  accessor timezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  @property({ type: Array })
+  accessor events: IDateEvent[] = [];
+
+  @state()
+  accessor isOpened: boolean = false;
+
+  @state()
+  accessor opensToTop: boolean = false;
+
+  @state()
+  accessor selectedDate: Date | null = null;
+
+  @state()
+  accessor viewDate: Date = new Date();
+
+  @state()
+  accessor selectedHour: number = 0;
+
+  @state()
+  accessor selectedMinute: number = 0;
+
+  public static styles = datepickerStyles;
+
+
+
+  public getTimezones(): { value: string; label: string }[] {
+    // Common timezones with their display names
+    return [
+      { value: 'UTC', label: 'UTC (Coordinated Universal Time)' },
+      { value: 'America/New_York', label: 'Eastern Time (US & Canada)' },
+      { value: 'America/Chicago', label: 'Central Time (US & Canada)' },
+      { value: 'America/Denver', label: 'Mountain Time (US & Canada)' },
+      { value: 'America/Los_Angeles', label: 'Pacific Time (US & Canada)' },
+      { value: 'America/Phoenix', label: 'Arizona' },
+      { value: 'America/Anchorage', label: 'Alaska' },
+      { value: 'Pacific/Honolulu', label: 'Hawaii' },
+      { value: 'Europe/London', label: 'London' },
+      { value: 'Europe/Paris', label: 'Paris' },
+      { value: 'Europe/Berlin', label: 'Berlin' },
+      { value: 'Europe/Moscow', label: 'Moscow' },
+      { value: 'Asia/Dubai', label: 'Dubai' },
+      { value: 'Asia/Kolkata', label: 'India Standard Time' },
+      { value: 'Asia/Shanghai', label: 'China Standard Time' },
+      { value: 'Asia/Tokyo', label: 'Tokyo' },
+      { value: 'Australia/Sydney', label: 'Sydney' },
+      { value: 'Pacific/Auckland', label: 'Auckland' },
+    ];
+  }
+
+  public render(): TemplateResult {
+    return renderDatepicker(this);
+  }
+
+
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    document.removeEventListener('click', this.handleClickOutside);
+  }
+
+  async firstUpdated() {
+    // Initialize with empty value if not set
+    if (!this.value) {
+      this.value = '';
+    }
+
+    // Initialize view date and selected time
+    if (this.value) {
+      try {
+        const date = new Date(this.value);
+        if (!isNaN(date.getTime())) {
+          this.selectedDate = date;
+          this.viewDate = new Date(date);
+          this.selectedHour = date.getHours();
+          this.selectedMinute = date.getMinutes();
+        }
+      } catch {
+        // Invalid date
+      }
+    } else {
+      const now = new Date();
+      this.viewDate = new Date(now);
+      this.selectedHour = now.getHours();
+      this.selectedMinute = 0;
+    }
+  }
+
+  public formatDate(isoString: string): string {
+    if (!isoString) return '';
+
+    try {
+      const date = new Date(isoString);
+      if (isNaN(date.getTime())) return '';
+
+      let formatted = this.dateFormat;
+      
+      // Basic date formatting
+      const day = date.getDate().toString().padStart(2, '0');
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const year = date.getFullYear().toString();
+      
+      // Replace in correct order to avoid conflicts
+      formatted = formatted.replace('YYYY', year);
+      formatted = formatted.replace('YY', year.slice(-2));
+      formatted = formatted.replace('MM', month);
+      formatted = formatted.replace('DD', day);
+
+      // Time formatting if enabled
+      if (this.enableTime) {
+        const hours24 = date.getHours();
+        const hours12 = hours24 === 0 ? 12 : hours24 > 12 ? hours24 - 12 : hours24;
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const ampm = hours24 >= 12 ? 'PM' : 'AM';
+
+        if (this.timeFormat === '12h') {
+          formatted += ` ${hours12}:${minutes} ${ampm}`;
+        } else {
+          formatted += ` ${hours24.toString().padStart(2, '0')}:${minutes}`;
+        }
+      }
+
+      // Timezone formatting if enabled
+      if (this.enableTimezone) {
+        const formatter = new Intl.DateTimeFormat('en-US', {
+          timeZoneName: 'short',
+          timeZone: this.timezone
+        });
+        const parts = formatter.formatToParts(date);
+        const tzPart = parts.find(part => part.type === 'timeZoneName');
+        if (tzPart) {
+          formatted += ` ${tzPart.value}`;
+        }
+      }
+
+      return formatted;
+    } catch {
+      return '';
+    }
+  }
+
+  private handleClickOutside = (event: MouseEvent) => {
+    const path = event.composedPath();
+    if (!path.includes(this)) {
+      this.isOpened = false;
+      document.removeEventListener('click', this.handleClickOutside);
+    }
+  };
+
+  public async toggleCalendar(): Promise<void> {
+    if (this.disabled) return;
+
+    this.isOpened = !this.isOpened;
+
+    if (this.isOpened) {
+      // Check available space and set position
+      const inputContainer = this.shadowRoot!.querySelector('.input-container') as HTMLElement;
+      const rect = inputContainer.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      
+      // Determine if we should open upwards (approximate height of 400px)
+      this.opensToTop = spaceBelow < 400 && spaceAbove > spaceBelow;
+
+      // Add click outside listener
+      setTimeout(() => {
+        document.addEventListener('click', this.handleClickOutside);
+      }, 0);
+    } else {
+      document.removeEventListener('click', this.handleClickOutside);
+    }
+  }
+
+  public getDaysInMonth(): Date[] {
+    const year = this.viewDate.getFullYear();
+    const month = this.viewDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const days: Date[] = [];
+
+    // Adjust for week start
+    const startOffset = this.weekStartsOn === 1 
+      ? (firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1)
+      : firstDay.getDay();
+
+    // Add days from previous month
+    for (let i = startOffset; i > 0; i--) {
+      days.push(new Date(year, month, 1 - i));
+    }
+
+    // Add days of current month
+    for (let i = 1; i <= lastDay.getDate(); i++) {
+      days.push(new Date(year, month, i));
+    }
+
+    // Add days from next month to complete the grid (6 rows)
+    const remainingDays = 42 - days.length;
+    for (let i = 1; i <= remainingDays; i++) {
+      days.push(new Date(year, month + 1, i));
+    }
+
+    return days;
+  }
+
+  public isToday(date: Date): boolean {
+    const today = new Date();
+    return date.getDate() === today.getDate() &&
+           date.getMonth() === today.getMonth() &&
+           date.getFullYear() === today.getFullYear();
+  }
+
+  public isSelected(date: Date): boolean {
+    if (!this.selectedDate) return false;
+    return date.getDate() === this.selectedDate.getDate() &&
+           date.getMonth() === this.selectedDate.getMonth() &&
+           date.getFullYear() === this.selectedDate.getFullYear();
+  }
+
+  public isDisabled(date: Date): boolean {
+    // Check min date
+    if (this.minDate) {
+      const min = new Date(this.minDate);
+      if (date < min) return true;
+    }
+
+    // Check max date
+    if (this.maxDate) {
+      const max = new Date(this.maxDate);
+      if (date > max) return true;
+    }
+
+    // Check disabled dates
+    if (this.disabledDates && this.disabledDates.length > 0) {
+      return this.disabledDates.some(disabledStr => {
+        try {
+          const disabled = new Date(disabledStr);
+          return date.getDate() === disabled.getDate() &&
+                 date.getMonth() === disabled.getMonth() &&
+                 date.getFullYear() === disabled.getFullYear();
+        } catch {
+          return false;
+        }
+      });
+    }
+
+    return false;
+  }
+
+  public getEventsForDate(date: Date): IDateEvent[] {
+    if (!this.events || this.events.length === 0) return [];
+    
+    const dateStr = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+    return this.events.filter(event => event.date === dateStr);
+  }
+
+  public selectDate(date: Date): void {
+    this.selectedDate = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+      this.selectedHour,
+      this.selectedMinute
+    );
+    
+    this.value = this.formatValueWithTimezone(this.selectedDate);
+    this.changeSubject.next(this);
+    
+    if (!this.enableTime) {
+      this.isOpened = false;
+    }
+  }
+
+  public selectToday(): void {
+    const today = new Date();
+    this.selectedDate = today;
+    this.viewDate = new Date(today);
+    this.selectedHour = today.getHours();
+    this.selectedMinute = today.getMinutes();
+    
+    this.value = this.formatValueWithTimezone(this.selectedDate);
+    this.changeSubject.next(this);
+    
+    if (!this.enableTime) {
+      this.isOpened = false;
+    }
+  }
+
+  public clear(): void {
+    this.value = '';
+    this.selectedDate = null;
+    this.changeSubject.next(this);
+    this.isOpened = false;
+  }
+
+  public previousMonth(): void {
+    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1);
+  }
+
+  public nextMonth(): void {
+    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1);
+  }
+
+  public handleHourInput(e: InputEvent): void {
+    const input = e.target as HTMLInputElement;
+    let value = parseInt(input.value) || 0;
+    
+    if (this.timeFormat === '12h') {
+      value = Math.max(1, Math.min(12, value));
+      // Convert to 24h format
+      if (this.selectedHour >= 12 && value !== 12) {
+        this.selectedHour = value + 12;
+      } else if (this.selectedHour < 12 && value === 12) {
+        this.selectedHour = 0;
+      } else {
+        this.selectedHour = value;
+      }
+    } else {
+      this.selectedHour = Math.max(0, Math.min(23, value));
+    }
+    
+    this.updateSelectedDateTime();
+  }
+
+  public handleMinuteInput(e: InputEvent): void {
+    const input = e.target as HTMLInputElement;
+    let value = parseInt(input.value) || 0;
+    value = Math.max(0, Math.min(59, value));
+    
+    if (this.minuteIncrement && this.minuteIncrement > 1) {
+      value = Math.round(value / this.minuteIncrement) * this.minuteIncrement;
+    }
+    
+    this.selectedMinute = value;
+    this.updateSelectedDateTime();
+  }
+
+  public setAMPM(period: 'am' | 'pm'): void {
+    if (period === 'am' && this.selectedHour >= 12) {
+      this.selectedHour -= 12;
+    } else if (period === 'pm' && this.selectedHour < 12) {
+      this.selectedHour += 12;
+    }
+    this.updateSelectedDateTime();
+  }
+
+  private updateSelectedDateTime(): void {
+    if (this.selectedDate) {
+      this.selectedDate = new Date(
+        this.selectedDate.getFullYear(),
+        this.selectedDate.getMonth(),
+        this.selectedDate.getDate(),
+        this.selectedHour,
+        this.selectedMinute
+      );
+      this.value = this.formatValueWithTimezone(this.selectedDate);
+      this.changeSubject.next(this);
+    }
+  }
+
+  public handleTimezoneChange(e: Event): void {
+    const select = e.target as HTMLSelectElement;
+    this.timezone = select.value;
+    this.updateSelectedDateTime();
+  }
+
+  private formatValueWithTimezone(date: Date): string {
+    if (!this.enableTimezone) {
+      return date.toISOString();
+    }
+    
+    // Format the date with timezone offset
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+      timeZone: this.timezone,
+      timeZoneName: 'short'
+    });
+    
+    const parts = formatter.formatToParts(date);
+    const dateParts: any = {};
+    parts.forEach(part => {
+      dateParts[part.type] = part.value;
+    });
+    
+    // Create ISO-like format with timezone
+    const isoString = `${dateParts.year}-${dateParts.month}-${dateParts.day}T${dateParts.hour}:${dateParts.minute}:${dateParts.second}`;
+    
+    // Get timezone offset
+    const tzOffset = this.getTimezoneOffset(date, this.timezone);
+    return `${isoString}${tzOffset}`;
+  }
+
+  private getTimezoneOffset(date: Date, timezone: string): string {
+    // Create a date in the target timezone
+    const tzDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
+    const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
+    
+    const offsetMinutes = (tzDate.getTime() - utcDate.getTime()) / (1000 * 60);
+    const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+    const minutes = Math.abs(offsetMinutes) % 60;
+    const sign = offsetMinutes >= 0 ? '+' : '-';
+    
+    return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+  }
+
+  public handleKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.toggleCalendar();
+    } else if (e.key === 'Escape' && this.isOpened) {
+      e.preventDefault();
+      this.isOpened = false;
+    }
+  }
+
+  public clearValue(e: Event): void {
+    e.stopPropagation();
+    this.value = '';
+    this.selectedDate = null;
+    this.changeSubject.next(this);
+  }
+
+  public handleManualInput(e: InputEvent): void {
+    const input = e.target as HTMLInputElement;
+    const inputValue = input.value.trim();
+    
+    if (!inputValue) {
+      // Clear the value if input is empty
+      this.value = '';
+      this.selectedDate = null;
+      return;
+    }
+
+    const parsedDate = this.parseManualDate(inputValue);
+    if (parsedDate && !isNaN(parsedDate.getTime())) {
+      // Update internal state without triggering re-render of input
+      this.value = parsedDate.toISOString();
+      this.selectedDate = parsedDate;
+      this.viewDate = new Date(parsedDate);
+      this.selectedHour = parsedDate.getHours();
+      this.selectedMinute = parsedDate.getMinutes();
+      this.changeSubject.next(this);
+    }
+  }
+
+  public handleInputBlur(e: FocusEvent): void {
+    const input = e.target as HTMLInputElement;
+    const inputValue = input.value.trim();
+    
+    if (!inputValue) {
+      this.value = '';
+      this.selectedDate = null;
+      this.changeSubject.next(this);
+      return;
+    }
+
+    const parsedDate = this.parseManualDate(inputValue);
+    if (parsedDate && !isNaN(parsedDate.getTime())) {
+      this.value = parsedDate.toISOString();
+      this.selectedDate = parsedDate;
+      this.viewDate = new Date(parsedDate);
+      this.selectedHour = parsedDate.getHours();
+      this.selectedMinute = parsedDate.getMinutes();
+      this.changeSubject.next(this);
+      // Update the input with formatted date
+      input.value = this.formatDate(this.value);
+    } else {
+      // Revert to previous valid value on blur if parsing failed
+      input.value = this.formatDate(this.value);
+    }
+  }
+
+  private parseManualDate(input: string): Date | null {
+    if (!input) return null;
+
+    // Split date and time parts if present
+    const parts = input.split(' ');
+    let datePart = parts[0];
+    let timePart = parts[1] || '';
+
+    let parsedDate: Date | null = null;
+
+    // Try different date formats
+    // Format 1: YYYY-MM-DD (ISO-like)
+    const isoMatch = datePart.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+    if (isoMatch) {
+      const [_, year, month, day] = isoMatch;
+      parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    }
+
+    // Format 2: DD.MM.YYYY (European)
+    if (!parsedDate) {
+      const euMatch = datePart.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+      if (euMatch) {
+        const [_, day, month, year] = euMatch;
+        parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+      }
+    }
+
+    // Format 3: MM/DD/YYYY (US)
+    if (!parsedDate) {
+      const usMatch = datePart.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+      if (usMatch) {
+        const [_, month, day, year] = usMatch;
+        parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+      }
+    }
+
+    // If no date was parsed, return null
+    if (!parsedDate || isNaN(parsedDate.getTime())) {
+      return null;
+    }
+
+    // Parse time if present (HH:MM format)
+    if (timePart) {
+      const timeMatch = timePart.match(/^(\d{1,2}):(\d{2})$/);
+      if (timeMatch) {
+        const [_, hours, minutes] = timeMatch;
+        parsedDate.setHours(parseInt(hours));
+        parsedDate.setMinutes(parseInt(minutes));
+      }
+    } else if (!this.enableTime) {
+      // If time is not enabled and not provided, use current time
+      const now = new Date();
+      parsedDate.setHours(now.getHours());
+      parsedDate.setMinutes(now.getMinutes());
+      parsedDate.setSeconds(0);
+      parsedDate.setMilliseconds(0);
+    }
+
+    return parsedDate;
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+    if (value) {
+      try {
+        const date = new Date(value);
+        if (!isNaN(date.getTime())) {
+          this.selectedDate = date;
+          this.viewDate = new Date(date);
+          this.selectedHour = date.getHours();
+          this.selectedMinute = date.getMinutes();
+        }
+      } catch {
+        // Invalid date
+      }
+    }
+  }
+}

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

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

ts_web/elements/00group-input/dees-input-datepicker/index.ts

@@ -0,0 +1 @@
+export * from './component.js';

ts_web/elements/00group-input/dees-input-datepicker/styles.ts

@@ -0,0 +1,514 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+
+export const datepickerStyles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .input-container {
+        position: relative;
+        width: 100%;
+      }
+
+      .date-input {
+        width: 100%;
+        height: 40px;
+        padding: 0 12px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        border-radius: 6px;
+        font-size: 14px;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        cursor: pointer;
+        transition: all 0.2s ease;
+        outline: none;
+        font-family: inherit;
+      }
+
+      .date-input::placeholder {
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .date-input:hover:not(:disabled) {
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+      }
+
+      .date-input:focus,
+      .date-input.open {
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')},
+                    0 0 0 4px ${cssManager.bdTheme('hsl(222.2 47.4% 11.2% / 0.1)', 'hsl(210 20% 98% / 0.1)')};
+      }
+
+      .date-input:disabled {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      /* Icon container using flexbox for better positioning */
+      .icon-container {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0 12px;
+        pointer-events: none;
+      }
+
+      .icon-container > * {
+        pointer-events: auto;
+      }
+
+      .calendar-icon {
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .clear-button {
+        width: 20px;
+        height: 20px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        transition: opacity 0.2s ease, background-color 0.2s ease;
+        padding: 0;
+        flex-shrink: 0;
+      }
+
+      .clear-button:hover {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+      }
+
+      .clear-button:disabled {
+        display: none;
+      }
+
+      /* Calendar Popup Styles */
+      .calendar-popup {
+        will-change: transform, opacity;
+        pointer-events: none;
+        transition: all 0.2s ease;
+        opacity: 0;
+        transform: translateY(-4px);
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        box-shadow: ${cssManager.bdTheme(
+          '0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1)',
+          '0 10px 15px -3px hsl(0 0% 0% / 0.2), 0 4px 6px -4px hsl(0 0% 0% / 0.2)'
+        )};
+        border-radius: 6px;
+        padding: 12px;
+        position: absolute;
+        user-select: none;
+        margin-top: 4px;
+        z-index: 50;
+        left: 0;
+        min-width: 280px;
+      }
+
+      .calendar-popup.top {
+        bottom: calc(100% + 4px);
+        top: auto;
+        margin-top: 0;
+        margin-bottom: 4px;
+        transform: translateY(4px);
+      }
+
+      .calendar-popup.bottom {
+        top: 100%;
+      }
+
+      .calendar-popup.show {
+        pointer-events: all;
+        transform: translateY(0);
+        opacity: 1;
+      }
+
+      /* Calendar Header */
+      .calendar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+        gap: 8px;
+      }
+
+      .month-year-display {
+        font-weight: 500;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        flex: 1;
+        text-align: center;
+      }
+
+      .nav-button {
+        width: 28px;
+        height: 28px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        transition: all 0.2s ease;
+      }
+
+      .nav-button:hover {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+      }
+
+      .nav-button:active {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      /* Weekday headers */
+      .weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 0;
+        margin-bottom: 4px;
+      }
+
+      .weekday {
+        text-align: center;
+        font-size: 12px;
+        font-weight: 400;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        padding: 0 0 8px 0;
+      }
+
+      /* Days grid */
+      .days-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+      }
+
+      .day {
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: all 0.2s ease;
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        border: none;
+        width: 36px;
+        height: 36px;
+        background: transparent;
+      }
+
+      .day:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+      }
+
+      .day.other-month {
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        opacity: 0.5;
+      }
+
+      .day.today {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        font-weight: 500;
+      }
+
+      .day.selected {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        color: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(222.2 47.4% 11.2%)')};
+        font-weight: 500;
+      }
+
+      .day.disabled {
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        cursor: not-allowed;
+        opacity: 0.3;
+      }
+
+      /* Event indicators */
+      .day.has-event {
+        position: relative;
+      }
+
+      .event-indicator {
+        position: absolute;
+        bottom: 4px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 2px;
+        justify-content: center;
+      }
+
+      .event-dot {
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .event-dot.info {
+        background: ${cssManager.bdTheme('hsl(211 70% 52%)', 'hsl(211 70% 62%)')};
+      }
+
+      .event-dot.warning {
+        background: ${cssManager.bdTheme('hsl(45 90% 45%)', 'hsl(45 90% 55%)')};
+      }
+
+      .event-dot.success {
+        background: ${cssManager.bdTheme('hsl(142 69% 45%)', 'hsl(142 69% 55%)')};
+      }
+
+      .event-dot.error {
+        background: ${cssManager.bdTheme('hsl(0 72% 51%)', 'hsl(0 72% 61%)')};
+      }
+
+      .event-count {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        min-width: 16px;
+        height: 16px;
+        padding: 0 4px;
+        background: ${cssManager.bdTheme('hsl(0 72% 51%)', 'hsl(0 72% 61%)')};
+        color: white;
+        border-radius: 8px;
+        font-size: 10px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+
+      /* Tooltip for event details */
+      .event-tooltip {
+        position: absolute;
+        bottom: calc(100% + 8px);
+        left: 50%;
+        transform: translateX(-50%);
+        background: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 0%)')};
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        z-index: 10;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      }
+
+      .event-tooltip::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 4px solid transparent;
+        border-top-color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+      }
+
+      .day.has-event:hover .event-tooltip {
+        opacity: 1;
+      }
+
+      /* Time selector */
+      .time-selector {
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .time-selector-title {
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .time-inputs {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .time-input {
+        width: 65px;
+        height: 36px;
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        border-radius: 6px;
+        padding: 0 12px;
+        font-size: 14px;
+        text-align: center;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        transition: all 0.2s ease;
+      }
+
+      .time-input:hover {
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+      }
+
+      .time-input:focus {
+        outline: none;
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 11.2% / 0.1)', 'hsl(210 20% 98% / 0.1)')};
+      }
+
+      .time-separator {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .am-pm-selector {
+        display: flex;
+        gap: 4px;
+        margin-left: 8px;
+      }
+
+      .am-pm-button {
+        padding: 6px 12px;
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .am-pm-button.selected {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        color: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(222.2 47.4% 11.2%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+      }
+
+      .am-pm-button:hover:not(.selected) {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      /* Action buttons */
+      .calendar-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .action-button {
+        flex: 1;
+        height: 36px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .today-button {
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+      }
+
+      .today-button:hover {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .today-button:active {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .clear-button {
+        background: transparent;
+        border: 1px solid transparent;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .clear-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 30.6% / 0.1)')};
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
+      }
+
+      .clear-button:active {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.2)', 'hsl(0 62.8% 30.6% / 0.2)')};
+      }
+
+      /* Timezone selector */
+      .timezone-selector {
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .timezone-selector-title {
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .timezone-select {
+        width: 100%;
+        height: 36px;
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        border-radius: 6px;
+        padding: 0 12px;
+        font-size: 14px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .timezone-select:hover {
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+      }
+
+      .timezone-select:focus {
+        outline: none;
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 11.2% / 0.1)', 'hsl(210 20% 98% / 0.1)')};
+      }
+    `,
+  ];

ts_web/elements/00group-input/dees-input-datepicker/template.ts

@@ -0,0 +1,179 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesInputDatepicker } from './component.js';
+
+export const renderDatepicker = (component: DeesInputDatepicker): TemplateResult => {
+      const monthNames = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+      ];
+
+      const weekDays = component.weekStartsOn === 1 
+        ? ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+        : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+      const days = component.getDaysInMonth();
+      const isAM = component.selectedHour < 12;
+      const timezones = component.getTimezones();
+
+      return html`
+        <div class="input-wrapper">
+          <dees-label .label=${component.label} .description=${component.description} .required=${component.required}></dees-label>
+          <div class="input-container">
+            <input
+              type="text"
+              class="date-input ${component.isOpened ? 'open' : ''}"
+              .value=${component.formatDate(component.value)}
+              .placeholder=${component.placeholder}
+              ?disabled=${component.disabled}
+              @click=${component.toggleCalendar}
+              @keydown=${component.handleKeydown}
+              @input=${component.handleManualInput}
+              @blur=${component.handleInputBlur}
+              style="padding-right: ${component.value ? '64px' : '40px'}"
+            />
+            <div class="icon-container">
+              ${component.value && !component.disabled ? html`
+                <button class="clear-button" @click=${component.clearValue} title="Clear">
+                  <dees-icon icon="lucide:x" iconSize="14"></dees-icon>
+                </button>
+              ` : ''}
+              <dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
+            </div>
+          
+            <!-- Calendar Popup -->
+            <div class="calendar-popup ${component.isOpened ? 'show' : ''} ${component.opensToTop ? 'top' : 'bottom'}">
+              <!-- Month/Year Navigation -->
+              <div class="calendar-header">
+                <button class="nav-button" @click=${component.previousMonth}>
+                  <dees-icon icon="lucide:chevronLeft" iconSize="16"></dees-icon>
+                </button>
+                <div class="month-year-display">
+                  ${monthNames[component.viewDate.getMonth()]} ${component.viewDate.getFullYear()}
+                </div>
+                <button class="nav-button" @click=${component.nextMonth}>
+                  <dees-icon icon="lucide:chevronRight" iconSize="16"></dees-icon>
+                </button>
+              </div>
+
+              <!-- Weekday Headers -->
+              <div class="weekdays">
+                ${weekDays.map(day => html`<div class="weekday">${day}</div>`)}
+              </div>
+
+              <!-- Days Grid -->
+              <div class="days-grid">
+                ${days.map(day => {
+                  const isToday = component.isToday(day);
+                  const isSelected = component.isSelected(day);
+                  const isOtherMonth = day.getMonth() !== component.viewDate.getMonth();
+                  const isDisabled = component.isDisabled(day);
+                  const dayEvents = component.getEventsForDate(day);
+                  const hasEvents = dayEvents.length > 0;
+                  const totalEventCount = dayEvents.reduce((sum, event) => sum + (event.count || 1), 0);
+
+                  return html`
+                    <div 
+                      class="day ${isOtherMonth ? 'other-month' : ''} ${isToday ? 'today' : ''} ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''} ${hasEvents ? 'has-event' : ''}"
+                      @click=${() => !isDisabled && component.selectDate(day)}
+                    >
+                      ${day.getDate()}
+                      ${hasEvents ? html`
+                        ${totalEventCount > 3 ? html`
+                          <div class="event-count">${totalEventCount}</div>
+                        ` : html`
+                          <div class="event-indicator">
+                            ${dayEvents.slice(0, 3).map(event => html`
+                              <div class="event-dot ${event.type || 'info'}"></div>
+                            `)}
+                          </div>
+                        `}
+                        ${dayEvents[0].title ? html`
+                          <div class="event-tooltip">
+                            ${dayEvents[0].title}
+                            ${totalEventCount > 1 ? html` (+${totalEventCount - 1} more)` : ''}
+                          </div>
+                        ` : ''}
+                      ` : ''}
+                    </div>
+                  `;
+                })}
+              </div>
+
+              <!-- Time Selector -->
+              ${component.enableTime ? html`
+                <div class="time-selector">
+                  <div class="time-selector-title">Time</div>
+                  <div class="time-inputs">
+                    <input 
+                      type="number" 
+                      class="time-input" 
+                      .value=${component.timeFormat === '12h' 
+                        ? (component.selectedHour === 0 ? 12 : component.selectedHour > 12 ? component.selectedHour - 12 : component.selectedHour).toString().padStart(2, '0')
+                        : component.selectedHour.toString().padStart(2, '0')}
+                      @input=${(e: InputEvent) => component.handleHourInput(e)}
+                      min="${component.timeFormat === '12h' ? 1 : 0}"
+                      max="${component.timeFormat === '12h' ? 12 : 23}"
+                    />
+                    <span class="time-separator">:</span>
+                    <input 
+                      type="number" 
+                      class="time-input" 
+                      .value=${component.selectedMinute.toString().padStart(2, '0')}
+                      @input=${(e: InputEvent) => component.handleMinuteInput(e)}
+                      min="0"
+                      max="59"
+                      step="${component.minuteIncrement || 1}"
+                    />
+                    ${component.timeFormat === '12h' ? html`
+                      <div class="am-pm-selector">
+                        <button 
+                          class="am-pm-button ${isAM ? 'selected' : ''}"
+                          @click=${() => component.setAMPM('am')}
+                        >
+                          AM
+                        </button>
+                        <button 
+                          class="am-pm-button ${!isAM ? 'selected' : ''}"
+                          @click=${() => component.setAMPM('pm')}
+                        >
+                          PM
+                        </button>
+                      </div>
+                    ` : ''}
+                  </div>
+                </div>
+              ` : ''}
+
+              <!-- Timezone Selector -->
+              ${component.enableTimezone ? html`
+                <div class="timezone-selector">
+                  <div class="timezone-selector-title">Timezone</div>
+                  <select 
+                    class="timezone-select" 
+                    .value=${component.timezone}
+                    @change=${(e: Event) => component.handleTimezoneChange(e)}
+                  >
+                    ${timezones.map(tz => html`
+                      <option value="${tz.value}" ?selected=${tz.value === component.timezone}>
+                        ${tz.label}
+                      </option>
+                    `)}
+                  </select>
+                </div>
+              ` : ''}
+
+              <!-- Action Buttons -->
+              <div class="calendar-actions">
+                <button class="action-button today-button" @click=${component.selectToday}>
+                  Today
+                </button>
+                <button class="action-button clear-button" @click=${component.clear}>
+                  Clear
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+  
+};