v2.0.7

- 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.

.serena/.gitignore

@@ -1 +0,0 @@
-/cache

.serena/memories/done_checklist.md

@@ -1,6 +0,0 @@
-Before finishing a task:
-- Run `pnpm run build` to ensure TypeScript compile + bundling succeed.
-- Verify `dist_ts_web/` and `dist_bundle/bundle.js` updated.
-- Optionally run `pnpm run test` and inspect failures.
-- Avoid changing public APIs unless required; keep changes scoped.
-- Update readme or inline docs only if user-facing behavior changes.

.serena/memories/project_overview.md

@@ -1,11 +0,0 @@
-Project: @design.estate/dees-catalog
-Purpose: A component library of dynamic Web Components (TypeScript) for building modern web apps.
-Tech stack: TypeScript (ES2022, NodeNext), decorators, custom elements via @design.estate/dees-element (Lit-style), bundling with esbuild via @git.zone/tsbundle, TypeScript building via @git.zone/tsbuild (tsfolders), tests with @git.zone/tstest, various UI libs (tiptap, apexcharts, monaco-editor runtime via CDN), DOM helpers via @design.estate/dees-domtools.
-Structure: 
-- ts_web/: source of web components and pages
-- dist_ts_web/: transpiled TS output
-- dist_bundle/: production bundle (bundle.js + map)
-- test/: tests
-- html/: static demo assets
-Key configs: tsconfig.json sets ES2022, NodeNext module/resolution, decorators enabled, skipLibCheck enabled to avoid third-party d.ts issues.
-Entrypoints: ts_web/index.ts for bundling; custom elements annotated with @customElement.

.serena/memories/style_and_conventions.md

@@ -1,5 +0,0 @@
-Language: TypeScript, ES2022 target, NodeNext module + resolution.
-Patterns: Web Components with @customElement decorators; class-based components extending DeesElement; styles via css/cssManager; template render via html tagged literal.
-Typing: Prefer explicit types where practical; tolerate `any` for external browser-injected libs (e.g., monaco) to keep build healthy.
-Config: skipLibCheck enabled to avoid third-party d.ts breakages; exclude built declaration outputs.
-Formatting/Linting: Not explicitly configured; follow existing style (2-space indents, single quotes often, semicolons present).

.serena/memories/suggested_commands.md

@@ -1,6 +0,0 @@
-Build: pnpm run build
-Watch: pnpm run watch
-Test: pnpm run test
-Docs: pnpm run buildDocs
-Inspect bundle size: ls -lh dist_bundle/bundle.js
-Open demo (if applicable): serve static `html/` with any web server

.serena/project.yml

@@ -1,67 +0,0 @@
-# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
-#  * For C, use cpp
-#  * For JavaScript, use typescript
-# Special requirements:
-#  * csharp: Requires the presence of a .sln file in the project folder.
-language: typescript
-
-# whether to use the project's gitignore file to ignore files
-# Added on 2025-04-07
-ignore_all_files_in_gitignore: true
-# list of additional paths to ignore
-# same syntax as gitignore, so you can use * and **
-# Was previously called `ignored_dirs`, please update your config if you are using that.
-# Added (renamed) on 2025-04-07
-ignored_paths: []
-
-# whether the project is in read-only mode
-# If set to true, all editing tools will be disabled and attempts to use them will result in an error
-# Added on 2025-04-18
-read_only: false
-
-# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
-# Below is the complete list of tools for convenience.
-# To make sure you have the latest list of tools, and to view their descriptions, 
-# execute `uv run scripts/print_tool_overview.py`.
-#
-#  * `activate_project`: Activates a project by name.
-#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
-#  * `create_text_file`: Creates/overwrites a file in the project directory.
-#  * `delete_lines`: Deletes a range of lines within a file.
-#  * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
-#  * `execute_shell_command`: Executes a shell command.
-#  * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
-#  * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
-#  * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
-#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
-#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
-#  * `initial_instructions`: Gets the initial instructions for the current project.
-#     Should only be used in settings where the system prompt cannot be set,
-#     e.g. in clients you have no control over, like Claude Desktop.
-#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
-#  * `insert_at_line`: Inserts content at a given line in a file.
-#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
-#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
-#  * `list_memories`: Lists memories in Serena's project-specific memory store.
-#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
-#  * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
-#  * `read_file`: Reads a file within the project directory.
-#  * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
-#  * `remove_project`: Removes a project from the Serena configuration.
-#  * `replace_lines`: Replaces a range of lines within a file with new content.
-#  * `replace_symbol_body`: Replaces the full definition of a symbol.
-#  * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
-#  * `search_for_pattern`: Performs a search for a pattern in the project.
-#  * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
-#  * `switch_modes`: Activates modes by providing a list of their names
-#  * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
-#  * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
-#  * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
-#  * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
-excluded_tools: []
-
-# initial prompt for the project. It will always be given to the LLM upon activating the project
-# (contrary to the memories, which are loaded on demand).
-initial_prompt: ""
-
-project_name: "dees-catalog"

changelog.md

@@ -1,5 +1,57 @@
 # Changelog
 
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "2.0.1",
+  "version": "2.0.7",
   "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",
@@ -38,20 +38,20 @@
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
     "lit": "^3.3.1",
-    "lucide": "^0.553.0",
+    "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": "^3.1.0",
-    "@git.zone/tsbundle": "^2.5.2",
-    "@git.zone/tstest": "^2.8.1",
-    "@git.zone/tswatch": "^2.2.1",
+    "@git.zone/tsbuild": "^3.1.2",
+    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tstest": "^3.1.3",
+    "@git.zone/tswatch": "^2.2.3",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
-    "@types/node": "^22.0.0"
+    "@types/node": "^24.10.1"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '2.0.1',
+  version: '2.0.7',
   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

@@ -1,4 +1,4 @@
-import * as plugins from './00plugins.js';
+import * as plugins from '../../00plugins.js';
 import {
   DeesElement,
   type TemplateResult,
@@ -10,8 +10,8 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from './dees-contextmenu.js';
-import './dees-icon.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '../../dees-icon/dees-icon.js';
 
 @customElement('dees-appui-activitylog')
 export class DeesAppuiActivitylog extends DeesElement {

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

@@ -8,16 +8,16 @@ import {
 } 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 * 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 {

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

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import type { DeesAppuiBar } from './component.js';
-import type { IAppBarMenuItem } from '../interfaces/appbarmenuitem.js';
+import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js';
 import '@design.estate/dees-wcctools/demotools';
 import './component.js';
 

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

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

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

@@ -1,9 +1,10 @@
 import { html, css } from '@design.estate/dees-element';
-import type { DeesAppuiBase } from './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 * as plugins from './00plugins.js';
+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 * as plugins from '../../00plugins.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => {
@@ -63,12 +64,35 @@ export const demoFunc = () => {
     }
   ];
 
-  // Main menu tabs (left sidebar)
-  const mainMenuTabs: ITab[] = [
-    { key: 'dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard selected') },
-    { key: 'projects', iconName: 'lucide:folder', action: () => console.log('Projects selected') },
-    { key: 'analytics', iconName: 'lucide:lineChart', action: () => console.log('Analytics selected') },
-    { key: 'settings', iconName: 'lucide:settings', action: () => console.log('Settings selected') },
+  // 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') },
   ];
 
   // Selector options (second sidebar)
@@ -127,7 +151,10 @@ export const demoFunc = () => {
           .appbarProfileMenuItems=${profileMenuItems}
           .appbarShowWindowControls=${true}
           .appbarShowSearch=${true}
-          .mainmenuTabs=${mainMenuTabs}
+          .mainmenuLogoIcon=${'lucide:box'}
+          .mainmenuLogoText=${'Acme App'}
+          .mainmenuGroups=${mainMenuGroups}
+          .mainmenuBottomTabs=${mainMenuBottomTabs}
           .mainselectorOptions=${selectorOptions}
           .maincontentTabs=${mainContentTabs}
           @appbar-menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail)}

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

@@ -8,21 +8,21 @@ import {
   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.js';
-import type { DeesAppuiMainselector } from './dees-appui-mainselector.js';
-import type { DeesAppuiMaincontent } from './dees-appui-maincontent.js';
-import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
+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 { DeesAppuiMainselector } from '../dees-appui-mainselector/dees-appui-mainselector.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.js';
-import './dees-appui-mainselector.js';
-import './dees-appui-maincontent.js';
-import './dees-appui-activitylog.js';
+import '../dees-appui-appbar/index.js';
+import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
+import '../dees-appui-mainselector/dees-appui-mainselector.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 {
@@ -57,6 +57,18 @@ export class DeesAppuiBase extends DeesElement {
   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[] = [];
 
@@ -105,7 +117,8 @@ export class DeesAppuiBase extends DeesElement {
         height: calc(100% - 40px);
         width: 100%;
         display: grid;
-        grid-template-columns: 60px 240px 1fr 240px;
+        grid-template-columns: 200px 240px 1fr 240px;
+        grid-template-rows: 1fr;
       }
     `,
   ];
@@ -130,6 +143,10 @@ export class DeesAppuiBase extends DeesElement {
       ></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}
           @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}

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,8 +11,8 @@ 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 {

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.ts

@@ -0,0 +1,352 @@
+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';
+
+/**
+ * the most left menu
+ * usually used as organization selector
+ */
+@customElement('dees-appui-mainmenu')
+export class DeesAppuiMainmenu extends DeesElement {
+  public static demo = () => html`
+    <style>
+      .demo-mainmenu-container {
+        height: 500px;
+        background: #1a1a1a;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+    </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>
+  `;
+
+  // 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;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .mainContainer {
+        --menuWidth: 200px;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        z-index: ${zIndexLayers.fixed.appBar};
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        width: var(--menuWidth);
+        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;
+      }
+
+      /* Logo Section */
+      .logoSection {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 16px 14px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        flex-shrink: 0;
+      }
+
+      .logoSection dees-icon {
+        font-size: 22px;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      .logoSection .logoText {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* 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;
+      }
+
+      .groupTabs {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      /* 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;
+      }
+
+      /* Bottom Section */
+      .bottomSection {
+        flex-shrink: 0;
+        padding: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+    `,
+  ];
+
+  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 .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>
+    `;
+  }
+
+  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>
+      </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]);
+    }
+  }
+}

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-mainselector/dees-appui-mainselector.ts

@@ -1,8 +1,8 @@
-import * as plugins from './00plugins.js';
-import * as interfaces from './interfaces/index.js';
+import * as plugins from '../../00plugins.js';
+import * as interfaces from '../../interfaces/index.js';
 
-import { DeesContextmenu } from './dees-contextmenu.js';
-import './dees-icon.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '../../dees-icon/dees-icon.js';
 
 import {
   DeesElement,

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

@@ -0,0 +1 @@
+export * from './dees-appui-mainselector.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,

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-tabs/dees-appui-tabs.ts

@@ -1,4 +1,4 @@
-import * as interfaces from './interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,

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);

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-mainselector/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/index.ts

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

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

@@ -1,11 +1,11 @@
 import { html, css, cssManager, domtools } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
-import './dees-form.js';
-import './dees-form-submit.js';
-import './dees-input-text.js';
-import './dees-icon.js';
-import type { DeesButton } from './dees-button.js';
+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>

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/index.ts

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

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/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 {

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 {

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/index.ts

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

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 {

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.ts

@@ -8,19 +8,19 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import { DeesInputCheckbox } from './dees-input-checkbox.js';
-import { DeesInputDatepicker } from './dees-input-datepicker/index.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/index.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/index.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

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/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 {

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

@@ -4,13 +4,13 @@ import {
   property,
   state,
 } 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 './demo.js';
 import { datepickerStyles } from './styles.js';
 import { renderDatepicker } from './template.js';
 import type { IDateEvent } from './types.js';
-import '../dees-icon.js';
-import '../dees-label.js';
+import '../../dees-icon/dees-icon.js';
+import '../../dees-label/dees-label.js';
 
 
 declare global {

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

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel.js';
+import '../../dees-panel/dees-panel.js';
 import './component.js';
 import type { DeesInputDatepicker } from './component.js';
 

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

@@ -1,5 +1,5 @@
 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';
 
 export const datepickerStyles = [
     ...DeesInputBase.baseStyles,

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

@@ -1,8 +1,8 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
-import './dees-form.js';
-import './dees-form-submit.js';
+import '../../dees-panel/dees-panel.js';
+import '../../00group-form/dees-form/dees-form.js';
+import '../../00group-form/dees-form-submit/dees-form-submit.js';
 
 export const demoFunc = () => html`
   <style>

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

@@ -9,8 +9,8 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-input-dropdown.demo.js';
-import { DeesInputBase } from './dees-input-base.js';
-import { cssGeistFontFamily } from './00fonts.js';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {

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

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

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

@@ -1,8 +1,8 @@
-import { DeesInputBase } from '../dees-input-base.js';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import { demoFunc } from './demo.js';
 import { fileuploadStyles } from './styles.js';
-import '../dees-icon.js';
-import '../dees-label.js';
+import '../../dees-icon/dees-icon.js';
+import '../../dees-label/dees-label.js';
 
 import {
   customElement,

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

@@ -1,6 +1,6 @@
 import { css, cssManager, html } from '@design.estate/dees-element';
 import './component.js';
-import '../dees-panel.js';
+import '../../dees-panel/dees-panel.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

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

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

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

@@ -1,5 +1,5 @@
 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';
 
 export const fileuploadStyles = [
   cssManager.defaultStyles,

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

@@ -8,7 +8,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesInputBase } from './dees-input-base.js';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import * as ibantools from 'ibantools';
 import { demoFunc } from './dees-input-iban.demo.js';
 

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

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

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

@@ -1,9 +1,9 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
-import './dees-form.js';
-import './dees-input-text.js';
-import './dees-form-submit.js';
+import '../../dees-panel/dees-panel.js';
+import '../../00group-form/dees-form/dees-form.js';
+import '../dees-input-text/dees-input-text.js';
+import '../../00group-form/dees-form-submit/dees-form-submit.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

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

@@ -7,9 +7,9 @@ import {
   state,
   type TemplateResult,
 } from '@design.estate/dees-element';
-import { DeesInputBase } from './dees-input-base.js';
-import './dees-icon.js';
-import './dees-button.js';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import '../../dees-icon/dees-icon.js';
+import '../../00group-button/dees-button/dees-button.js';
 import { demoFunc } from './dees-input-list.demo.js';
 
 declare global {

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

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

ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.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 * as colors from './00colors.js'
+import * as colors from '../../00colors.js'
 
 import { demoFunc } from './dees-input-multitoggle.demo.js';
 

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

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