v3.1.2

changelog.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.1.0",
+  "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",
@@ -48,7 +48,7 @@
     "@git.zone/tsbuild": "^3.1.2",
     "@git.zone/tsbundle": "^2.6.3",
     "@git.zone/tstest": "^3.1.3",
-    "@git.zone/tswatch": "^2.3.1",
+    "@git.zone/tswatch": "^2.3.2",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
     "@types/node": "^24.10.1"

pnpm-lock.yaml

@@ -100,8 +100,8 @@ importers:
         specifier: ^3.1.3
         version: 3.1.3(@push.rocks/smartserve@1.3.0)(socks@2.8.7)(typescript@5.9.3)
       '@git.zone/tswatch':
-        specifier: ^2.3.1
-        version: 2.3.1(@tiptap/pm@2.27.1)
+        specifier: ^2.3.2
+        version: 2.3.2(@tiptap/pm@2.27.1)
       '@push.rocks/projectinfo':
         specifier: ^5.0.2
         version: 5.0.2
@@ -552,8 +552,8 @@ packages:
     resolution: {integrity: sha512-t+/cKV21JHK8X7NGAmihs5M/eMm+V+jn4R5rzfwGG97WJFAcP5qE1Os9VYtyZw3tx/NZXA2yA4abo/ELluTuRA==}
     hasBin: true
 
-  '@git.zone/tswatch@2.3.1':
-    resolution: {integrity: sha512-KjJRXs+XkXXXDUqmEb1tZuDM1IEVI/RzAo3wS2bFv/UhOY7iYAxPL+eKl55FxBFftB4ecAfxeBhbhijTbklAMA==}
+  '@git.zone/tswatch@2.3.2':
+    resolution: {integrity: sha512-M4B4D7BlfGb3ssgMHFMHc+hhEmxY6WzNd87ihuLReXMD+twjMA99u2hyAvAnboa3lERlixvHz/nN+rdbGH5VlA==}
     hasBin: true
 
   '@hapi/bourne@3.0.0':
@@ -1020,8 +1020,8 @@ packages:
   '@push.rocks/smartversion@3.0.5':
     resolution: {integrity: sha512-8MZSo1yqyaKxKq0Q5N188l4un++9GFWVbhCAX5mXJwewZHn97ujffTeL+eOQYpWFTEpUhaq1QhL4NhqObBCt1Q==}
 
-  '@push.rocks/smartwatch@5.0.0':
-    resolution: {integrity: sha512-uuWUlTo0l5LWOWoOuTMG7zzxpUNKBcyqoB+zyQ24NHTtSYNcaUJtaQzTO2gxMXr5sqiZDkohlThS0KvsBc3g7w==}
+  '@push.rocks/smartwatch@5.1.0':
+    resolution: {integrity: sha512-vf4yT8F8V+vstnrr0sh64rGF/8Z8dZlLR4T95KcVtm7F0H3dKxLcvZ3HT0xayw0gQow8+CCtDdts9Wgq5ipJTw==}
     engines: {node: '>=20.0.0'}
 
   '@push.rocks/smartxml@2.0.0':
@@ -4735,7 +4735,7 @@ snapshots:
       '@push.rocks/smartsitemap': 2.0.4
       '@push.rocks/smartstream': 3.2.5
       '@push.rocks/smarttime': 4.1.1
-      '@push.rocks/smartwatch': 5.0.0
+      '@push.rocks/smartwatch': 5.1.0
       '@push.rocks/taskbuffer': 3.5.0
       '@push.rocks/webrequest': 4.0.1
       '@push.rocks/webstore': 2.0.20
@@ -5613,7 +5613,7 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@git.zone/tswatch@2.3.1(@tiptap/pm@2.27.1)':
+  '@git.zone/tswatch@2.3.2(@tiptap/pm@2.27.1)':
     dependencies:
       '@api.global/typedserver': 7.11.0(@tiptap/pm@2.27.1)
       '@git.zone/tsbundle': 2.6.3
@@ -5626,7 +5626,7 @@ snapshots:
       '@push.rocks/smartlog': 3.1.10
       '@push.rocks/smartlog-destination-local': 9.0.2
       '@push.rocks/smartshell': 3.3.0
-      '@push.rocks/smartwatch': 5.0.0
+      '@push.rocks/smartwatch': 5.1.0
       '@push.rocks/taskbuffer': 3.5.0
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -6672,7 +6672,7 @@ snapshots:
       '@types/semver': 7.7.1
       semver: 7.7.3
 
-  '@push.rocks/smartwatch@5.0.0':
+  '@push.rocks/smartwatch@5.1.0':
     dependencies:
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartenv': 6.0.0

ts_web/00_commitinfo_data.ts

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

@@ -12,6 +12,7 @@ import {
   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
@@ -19,49 +20,7 @@ import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
  */
 @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>
-  `;
+  public static demo = demoFunc;
 
   // INSTANCE
 
@@ -98,6 +57,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         --menu-width-collapsed: 56px;
         --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
         --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        position: relative;
         display: block;
         height: 100%;
       }
@@ -188,13 +148,12 @@ export class DeesAppuiMainmenu extends DeesElement {
 
       :host([collapsed]) .logoSection {
         justify-content: center;
-        padding: 0 8px;
+        padding: 0;
+        gap: 0;
       }
 
       :host([collapsed]) .logoSection .logoText {
-        opacity: 0;
-        width: 0;
-        overflow: hidden;
+        display: none;
       }
 
       /* Middle Section (scrollable) */
@@ -395,9 +354,6 @@ export class DeesAppuiMainmenu extends DeesElement {
     const allTabs = this.getAllTabs();
 
     return html`
-      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
-        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
-      </button>
       <div class="mainContainer" @contextmenu=${(eventArg: MouseEvent) => {
         DeesContextmenu.openContextMenuWithOptions(eventArg, [{
           name: 'app settings',
@@ -422,6 +378,9 @@ export class DeesAppuiMainmenu extends DeesElement {
           </div>
         ` : ''}
       </div>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
     `;
   }
 

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

@@ -14,6 +14,7 @@ import {
   css,
   cssManager,
 } from '@design.estate/dees-element';
+import { demoFunc } from './dees-appui-secondarymenu.demo.js';
 
 /**
  * Secondary navigation menu for sub-navigation within MainMenu views
@@ -21,51 +22,7 @@ import {
  */
 @customElement('dees-appui-secondarymenu')
 export class DeesAppuiSecondarymenu extends DeesElement {
-  public static demo = () => html`
-    <style>
-      .demo-container {
-        height: 500px;
-        display: flex;
-        background: #1a1a1a;
-        border-radius: 8px;
-        overflow: hidden;
-      }
-    </style>
-    <div class="demo-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>
-  `;
+  public static demo = demoFunc;
 
   // INSTANCE
 
@@ -120,6 +77,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         --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);
@@ -486,9 +444,6 @@ export class DeesAppuiSecondarymenu extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
-        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
-      </button>
       <div class="maincontainer">
         <div class="header">
           <span class="heading">${this.heading}</span>
@@ -499,6 +454,9 @@ export class DeesAppuiSecondarymenu extends DeesElement {
             : this.renderLegacyOptions()}
         </div>
       </div>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
     `;
   }