v3.2.0

changelog.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## 2025-12-08 - 3.2.0 - feat(dees-simple-appdash,dees-simple-login,dees-terminal)
+Revamp UI: dashboard & login styling, standardize icons to Lucide, and add terminal background/config
+
+- Standardize icon usage to Lucide prefixes in dees-simple-appdash; add fallback handling for legacy icon names
+- Revamped dees-simple-appdash sidebar: updated spacing, typography, header icon wrapper, scrollbar styling, section labels, hover/selected states, and visual indicators
+- Change 'Logout' label to 'Sign out' in dees-simple-appdash and add explicit status classes for controlbar (connected, terminal)
+- Improve terminal UX: smoother launch/close animations, updated shadow and sizing logic in dees-simple-appdash
+- Add background property to dees-terminal, sync it to a CSS variable and apply it to xterm theme for configurable terminal background
+- Redesign dees-simple-login: new header/subheader, card layout, spacing, and updated submit text to 'Sign in'
+- Bump devDependency @git.zone/tswatch to ^2.3.5
+
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "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.5",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
     "@types/node": "^24.10.1"

pnpm-lock.yaml

@@ -98,10 +98,10 @@ importers:
         version: 2.6.3
       '@git.zone/tstest':
         specifier: ^3.1.3
-        version: 3.1.3(@push.rocks/smartserve@1.3.0)(socks@2.8.7)(typescript@5.9.3)
+        version: 3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)
       '@git.zone/tswatch':
-        specifier: ^2.3.1
+        specifier: ^2.3.5
-        version: 2.3.1(@tiptap/pm@2.27.1)
+        version: 2.3.5(@tiptap/pm@2.27.1)
       '@push.rocks/projectinfo':
         specifier: ^5.0.2
         version: 5.0.2
@@ -126,8 +126,8 @@ packages:
   '@api.global/typedserver@3.0.80':
     resolution: {integrity: sha512-dcp0oXsjBL+XdFg1wUUP08uJQid5bQ0Yv3V3Y3lnI2QCbat0FU+Tsb0TZRnZ4+P150Vj/ITBqJUgDzFsF34grA==}
 
-  '@api.global/typedserver@7.11.0':
+  '@api.global/typedserver@7.11.1':
-    resolution: {integrity: sha512-DHB3oGRgiLbAeRRFAlXIbjvNACw9YqsfOtLVCPq0nUcGMGSsUQ4SNrJ5OGk9GhVF8bl/jn8SF8w08rnApmZ0uw==}
+    resolution: {integrity: sha512-1vQUJ2/DszDFHVkCmqqBy/qNiIP/jltFN3KxHtoNLxjbdBZYfw1Zd1Odjs6YSPalAD0p8wQ/alJblJEAewNQVg==}
 
   '@api.global/typedsocket@3.1.1':
     resolution: {integrity: sha512-Wkz3NlhmfdZMKqXXI2c2dMtGGmSmhdOegZiziL+9b2mqPYdc7Gd8AZRdEOKvbSoIvc9G22/5BEadIWHrfq66TA==}
@@ -316,6 +316,9 @@ packages:
   '@borewit/text-codec@0.1.1':
     resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==}
 
+  '@cfworker/json-schema@4.1.1':
+    resolution: {integrity: sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==}
+
   '@cloudflare/workers-types@4.20251205.0':
     resolution: {integrity: sha512-7pup7fYkuQW5XD8RUS/vkxF9SXlrGyCXuZ4ro3uVQvca/GTeSa+8bZ8T4wbq1Aea5lmLIGSlKbhl2msME7bRBA==}
 
@@ -329,8 +332,8 @@ packages:
   '@dabh/diagnostics@2.0.8':
     resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
 
-  '@design.estate/dees-catalog@2.0.7':
+  '@design.estate/dees-catalog@3.1.2':
-    resolution: {integrity: sha512-rshv71LqA2PXaEEf6C1/hv6Yu2ovRuWaZhdnUznCDpjdYgxBq7PHkiHCNvg/m6wJ9Ue/03HcuuPqtj2bksgAag==}
+    resolution: {integrity: sha512-T4ZhoZzl6NAWGhrz00MDFla5syeMz53euZ+QcBftRMmHuqPHDU/JlBi+K2SmILtnRfWH/lGYWBKugYop6q0chg==}
 
   '@design.estate/dees-comms@1.0.30':
     resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
@@ -552,8 +555,8 @@ packages:
     resolution: {integrity: sha512-t+/cKV21JHK8X7NGAmihs5M/eMm+V+jn4R5rzfwGG97WJFAcP5qE1Os9VYtyZw3tx/NZXA2yA4abo/ELluTuRA==}
     hasBin: true
 
-  '@git.zone/tswatch@2.3.1':
+  '@git.zone/tswatch@2.3.5':
-    resolution: {integrity: sha512-KjJRXs+XkXXXDUqmEb1tZuDM1IEVI/RzAo3wS2bFv/UhOY7iYAxPL+eKl55FxBFftB4ecAfxeBhbhijTbklAMA==}
+    resolution: {integrity: sha512-wYekG7Q/wg5uptXHPHhVi7dHq19QnLoevQpcpAzF6hMiNbOozN3+4zxOktyJBl6EHUYcFvHXA4fZ4bkJpo5TcA==}
     hasBin: true
 
   '@hapi/bourne@3.0.0':
@@ -981,8 +984,8 @@ packages:
   '@push.rocks/smarts3@3.0.3':
     resolution: {integrity: sha512-Y9nXMwurthJ9Z7yi0RwjhPFUC58aY8Mhia8kFo6Xj1tBM4LE8Oxg/ydejF7otHqQGr3QyqV5C4YrDEG17rUuzg==}
 
-  '@push.rocks/smartserve@1.3.0':
+  '@push.rocks/smartserve@1.4.0':
-    resolution: {integrity: sha512-4ZR9uKVWXVAPzU5wtCQ1mA9jNmOlUl3oGr50EceLT6803UwbNcst7Ek/BhzSaZ0qb2pz0jO5T/V+icgvZ1/5ww==}
+    resolution: {integrity: sha512-cEoXZQSBX3pOv9AyhxRPkrMAWzs2XQhTBmW95BFtTSNzZdji0XgqUu92p7iuF+NVuTFX1QZ8+dbCClLCoRRW7g==}
 
   '@push.rocks/smartshell@3.3.0':
     resolution: {integrity: sha512-m0w618H6YBs+vXGz1CgS4nPi5CUAnqRtckcS9/koGwfcIx1IpjqmiP47BoCTbdgcv0IPUxQVBG1IXTHPuZ8Z5g==}
@@ -1020,8 +1023,8 @@ packages:
   '@push.rocks/smartversion@3.0.5':
     resolution: {integrity: sha512-8MZSo1yqyaKxKq0Q5N188l4un++9GFWVbhCAX5mXJwewZHn97ujffTeL+eOQYpWFTEpUhaq1QhL4NhqObBCt1Q==}
 
-  '@push.rocks/smartwatch@5.0.0':
+  '@push.rocks/smartwatch@6.1.1':
-    resolution: {integrity: sha512-uuWUlTo0l5LWOWoOuTMG7zzxpUNKBcyqoB+zyQ24NHTtSYNcaUJtaQzTO2gxMXr5sqiZDkohlThS0KvsBc3g7w==}
+    resolution: {integrity: sha512-wmhLKu9bdpvRcjOfitJOi4jsNKD7S2hVlVq6fAv3IhB2ZbRlSB+Hai4DwOlrdUZaWrg+dFIZU+/ifTOozOPiMg==}
     engines: {node: '>=20.0.0'}
 
   '@push.rocks/smartxml@2.0.0':
@@ -4656,11 +4659,11 @@ snapshots:
       '@push.rocks/webrequest': 3.0.37
       '@push.rocks/webstream': 1.0.10
 
-  '@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.3.0)':
+  '@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.4.0)':
     dependencies:
       '@api.global/typedrequest': 3.2.5
       '@api.global/typedrequest-interfaces': 3.0.19
-      '@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.3.0)
+      '@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.4.0)
       '@cloudflare/workers-types': 4.20251205.0
       '@design.estate/dees-comms': 1.0.30
       '@push.rocks/lik': 6.2.2
@@ -4704,13 +4707,13 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@api.global/typedserver@7.11.0(@tiptap/pm@2.27.1)':
+  '@api.global/typedserver@7.11.1(@tiptap/pm@2.27.1)':
     dependencies:
       '@api.global/typedrequest': 3.2.5
       '@api.global/typedrequest-interfaces': 3.0.19
-      '@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@1.3.0)
+      '@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@1.4.0)
       '@cloudflare/workers-types': 4.20251205.0
-      '@design.estate/dees-catalog': 2.0.7(@tiptap/pm@2.27.1)
+      '@design.estate/dees-catalog': 3.1.2(@tiptap/pm@2.27.1)
       '@design.estate/dees-comms': 1.0.30
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
@@ -4731,11 +4734,11 @@ snapshots:
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrequest': 5.0.1
       '@push.rocks/smartrx': 3.0.10
-      '@push.rocks/smartserve': 1.3.0
+      '@push.rocks/smartserve': 1.4.0
       '@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': 6.1.1
       '@push.rocks/taskbuffer': 3.5.0
       '@push.rocks/webrequest': 4.0.1
       '@push.rocks/webstore': 2.0.20
@@ -4750,7 +4753,7 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.3.0)':
+  '@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.4.0)':
     dependencies:
       '@api.global/typedrequest': 3.2.5
       '@api.global/typedrequest-interfaces': 3.0.19
@@ -4761,7 +4764,7 @@ snapshots:
       '@push.rocks/smartstring': 4.1.0
       '@push.rocks/smarturl': 3.1.0
     optionalDependencies:
-      '@push.rocks/smartserve': 1.3.0
+      '@push.rocks/smartserve': 1.4.0
     transitivePeerDependencies:
       - '@nuxt/kit'
       - bufferutil
@@ -4770,7 +4773,7 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.3.0)':
+  '@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.4.0)':
     dependencies:
       '@api.global/typedrequest': 3.2.5
       '@api.global/typedrequest-interfaces': 3.0.19
@@ -4779,7 +4782,7 @@ snapshots:
       '@push.rocks/smartjson': 5.2.0
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
-      '@push.rocks/smartserve': 1.3.0
+      '@push.rocks/smartserve': 1.4.0
       '@push.rocks/smartstring': 4.1.0
       '@push.rocks/smarturl': 3.1.0
 
@@ -5274,6 +5277,8 @@ snapshots:
 
   '@borewit/text-codec@0.1.1': {}
 
+  '@cfworker/json-schema@4.1.1': {}
+
   '@cloudflare/workers-types@4.20251205.0': {}
 
   '@colors/colors@1.6.0': {}
@@ -5288,7 +5293,7 @@ snapshots:
       enabled: 2.0.0
       kuler: 2.0.0
 
-  '@design.estate/dees-catalog@2.0.7(@tiptap/pm@2.27.1)':
+  '@design.estate/dees-catalog@3.1.2(@tiptap/pm@2.27.1)':
     dependencies:
       '@design.estate/dees-domtools': 2.3.6
       '@design.estate/dees-element': 2.1.3
@@ -5564,9 +5569,9 @@ snapshots:
       '@push.rocks/smartshell': 3.3.0
       tsx: 4.21.0
 
-  '@git.zone/tstest@3.1.3(@push.rocks/smartserve@1.3.0)(socks@2.8.7)(typescript@5.9.3)':
+  '@git.zone/tstest@3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)':
     dependencies:
-      '@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.3.0)
+      '@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.4.0)
       '@git.zone/tsbundle': 2.6.3
       '@git.zone/tsrun': 2.0.0
       '@push.rocks/consolecolor': 2.0.3
@@ -5613,9 +5618,9 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@git.zone/tswatch@2.3.1(@tiptap/pm@2.27.1)':
+  '@git.zone/tswatch@2.3.5(@tiptap/pm@2.27.1)':
     dependencies:
-      '@api.global/typedserver': 7.11.0(@tiptap/pm@2.27.1)
+      '@api.global/typedserver': 7.11.1(@tiptap/pm@2.27.1)
       '@git.zone/tsbundle': 2.6.3
       '@git.zone/tsrun': 2.0.0
       '@push.rocks/early': 4.0.4
@@ -5626,7 +5631,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': 6.1.1
       '@push.rocks/taskbuffer': 3.5.0
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -6555,9 +6560,10 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@push.rocks/smartserve@1.3.0':
+  '@push.rocks/smartserve@1.4.0':
     dependencies:
       '@api.global/typedrequest': 3.2.5
+      '@cfworker/json-schema': 4.1.1
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartenv': 6.0.0
       '@push.rocks/smartlog': 3.1.10
@@ -6588,7 +6594,7 @@ snapshots:
   '@push.rocks/smartsocket@2.1.0':
     dependencies:
       '@api.global/typedrequest-interfaces': 3.0.19
-      '@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.3.0)
+      '@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.4.0)
       '@push.rocks/isohash': 2.0.1
       '@push.rocks/isounique': 1.0.5
       '@push.rocks/lik': 6.2.2
@@ -6672,7 +6678,7 @@ snapshots:
       '@types/semver': 7.7.1
       semver: 7.7.3
 
-  '@push.rocks/smartwatch@5.0.0':
+  '@push.rocks/smartwatch@6.1.1':
     dependencies:
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartenv': 6.0.0
@@ -6715,20 +6721,17 @@ snapshots:
     transitivePeerDependencies:
       - '@aws-sdk/credential-providers'
       - '@mongodb-js/zstd'
-      - '@nuxt/kit'
       - aws-crt
       - bare-abort-controller
       - bufferutil
       - gcp-metadata
       - kerberos
       - mongodb-client-encryption
-      - react
       - react-native-b4a
       - snappy
       - socks
       - supports-color
       - utf-8-validate
-      - vue
 
   '@push.rocks/taskbuffer@3.5.0':
     dependencies:

ts_web/00_commitinfo_data.ts

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

@@ -63,13 +63,14 @@ export class DeesAppuiActivitylog extends DeesElement {
       .topbar {
         position: absolute;
         top: 0px;
-        height: 40px;
+        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 {
@@ -81,7 +82,7 @@ export class DeesAppuiActivitylog extends DeesElement {
 
       .activityContainer {
         position: absolute;
-        top: 40px;
+        top: 48px;
         bottom: 48px;
         width: 100%;
         padding: 12px 0px;
@@ -315,7 +316,7 @@ export class DeesAppuiActivitylog extends DeesElement {
         position: absolute;
         width: 100%;
         height: 24px;
-        top: 40px;
+        top: 48px;
         background: ${cssManager.bdTheme(
           'linear-gradient(0deg, transparent 0%, #fafafa 100%)',
           'linear-gradient(0deg, transparent 0%, #0a0a0a 100%)'

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

@@ -89,6 +89,13 @@ export class DeesAppuiBase extends DeesElement {
   @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[] = [];
@@ -124,9 +131,30 @@ export class DeesAppuiBase extends DeesElement {
         height: calc(100% - 40px);
         width: 100%;
         display: grid;
-        grid-template-columns: 200px 240px 1fr 240px;
+        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;
+      }
     `,
   ];
 
@@ -156,14 +184,18 @@ export class DeesAppuiBase extends DeesElement {
           .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}
@@ -244,4 +276,23 @@ export class DeesAppuiBase extends DeesElement {
       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-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`
+  public static demo = demoFunc;
-    <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
 
@@ -87,27 +46,75 @@ export class DeesAppuiMainmenu extends DeesElement {
   @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 {
-        --menuWidth: 200px;
         color: ${cssManager.bdTheme('#666', '#ccc')};
         z-index: ${zIndexLayers.fixed.appBar};
         display: flex;
         flex-direction: column;
         position: relative;
-        width: var(--menuWidth);
+        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 */
@@ -115,23 +122,38 @@ export class DeesAppuiMainmenu extends DeesElement {
         display: flex;
         align-items: center;
         gap: 10px;
-        padding: 16px 14px;
+        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 dees-icon {
-        font-size: 22px;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-      }
-
       .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) */
@@ -176,6 +198,17 @@ export class DeesAppuiMainmenu extends DeesElement {
         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 {
@@ -184,6 +217,10 @@ export class DeesAppuiMainmenu extends DeesElement {
         gap: 2px;
       }
 
+      :host([collapsed]) .menuGroup {
+        padding: 0 4px;
+      }
+
       /* Tab Item */
       .tab {
         position: relative;
@@ -240,6 +277,60 @@ export class DeesAppuiMainmenu extends DeesElement {
         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 */
@@ -251,6 +342,10 @@ export class DeesAppuiMainmenu extends DeesElement {
         flex-direction: column;
         gap: 2px;
       }
+
+      :host([collapsed]) .bottomSection {
+        padding: 8px 4px;
+      }
     `,
   ];
 
@@ -268,7 +363,7 @@ export class DeesAppuiMainmenu extends DeesElement {
       }}>
         ${this.logoIcon || this.logoText ? html`
           <div class="logoSection">
-            ${this.logoIcon ? html`<dees-icon .icon="${this.logoIcon}"></dees-icon>` : ''}
+            ${this.logoIcon ? html`<dees-icon class="logoIcon" .icon="${this.logoIcon}"></dees-icon>` : ''}
             ${this.logoText ? html`<span class="logoText">${this.logoText}</span>` : ''}
           </div>
         ` : ''}
@@ -283,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>
     `;
   }
 
@@ -319,6 +417,7 @@ export class DeesAppuiMainmenu extends DeesElement {
       >
         <dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
         <span class="tabLabel">${tabArg.key}</span>
+        <span class="tab-tooltip">${tabArg.key}</span>
       </div>
     `;
   }
@@ -349,4 +448,13 @@ export class DeesAppuiMainmenu extends DeesElement {
       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-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`
+  public static demo = demoFunc;
-    <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>
-  `;
 
   // INSTANCE
 
@@ -89,11 +46,16 @@ export class DeesAppuiSecondarymenu extends DeesElement {
   @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: 240px;
+        --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')};
@@ -102,6 +64,8 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         --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')};
@@ -113,13 +77,19 @@ 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);
+        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 {
@@ -127,6 +97,43 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         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 */
@@ -134,18 +141,33 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 16px 16px;
+        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 */
@@ -179,6 +201,10 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         margin-bottom: 4px;
       }
 
+      :host([collapsed]) .menuGroup {
+        padding: 0 4px;
+      }
+
       .groupHeader {
         display: flex;
         align-items: center;
@@ -186,7 +212,8 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         padding: 8px 8px;
         cursor: pointer;
         border-radius: 6px;
-        transition: background 0.15s ease;
+        transition: background 0.15s ease, opacity 0.2s ease, max-height 0.25s ease;
+        max-height: 40px;
       }
 
       .groupHeader:hover {
@@ -202,6 +229,8 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         color: var(--sidebar-fg-muted);
         text-transform: uppercase;
         letter-spacing: 0.5px;
+        white-space: nowrap;
+        overflow: hidden;
       }
 
       .groupHeader .groupTitle dees-icon {
@@ -219,6 +248,15 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         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;
@@ -232,6 +270,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         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;
@@ -290,6 +334,60 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         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 */
@@ -326,6 +424,10 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         color: var(--badge-error-fg);
       }
 
+      :host([collapsed]) .badge {
+        display: none;
+      }
+
       /* Divider */
       .divider {
         height: 1px;
@@ -352,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>
     `;
   }
 
@@ -390,6 +495,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         ${item.badge !== undefined ? html`
           <span class="badge ${item.badgeVariant || 'default'}">${item.badge}</span>
         ` : ''}
+        <span class="item-tooltip">${item.key}</span>
       </div>
     `;
   }
@@ -422,6 +528,15 @@ export class DeesAppuiSecondarymenu extends DeesElement {
     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();

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

@@ -132,7 +132,9 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .tabs-wrapper.horizontal-wrapper {
+        height: 48px;
         border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        box-sizing: border-box;
       }
 
       .tabsContainer {
@@ -146,7 +148,7 @@ export class DeesAppuiTabs extends DeesElement {
         font-size: 14px;
         overflow-x: auto;
         scrollbar-width: none;
-        height: 48px;
+        height: 100%;
         padding: 0 16px;
         gap: 4px;
       }

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts

@@ -266,17 +266,17 @@ export const demoFunc = () => html`
       .viewTabs=${[
         {
           name: 'Dashboard',
-          iconName: 'home',
+          iconName: 'lucide:home',
           element: DemoViewDashboard,
         },
         {
           name: 'Analytics',
-          iconName: 'lineChart',
+          iconName: 'lucide:lineChart',
           element: DemoViewAnalytics,
         },
         {
           name: 'Settings',
-          iconName: 'settings',
+          iconName: 'lucide:settings',
           element: DemoViewSettings,
         }
       ] as IView[]}

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -51,7 +51,7 @@ export class DeesSimpleAppDash extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
         user-select: none;
         display: block;
         overflow: hidden;
@@ -75,67 +75,122 @@ export class DeesSimpleAppDash extends DeesElement {
         left: 0px;
         height: calc(100% - 24px);
         width: 240px;
-        background: ${cssManager.bdTheme('#fafafa', '#000')};
+        background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
-        border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
-        font-size: 12px;
+        font-size: 13px;
         font-family: 'Geist Sans', sans-serif;
         z-index: 2;
         display: grid;
-        grid-template-rows: auto min-content;
+        grid-template-rows: auto 1fr min-content;
         overflow: hidden;
       }
 
       .sidebar-header {
-        padding: 16px 12px;
+        padding: 20px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 12px;
+      }
+
+      .header-icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border-radius: 10px;
+        background: ${cssManager.bdTheme(
+          'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
+          'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
+        )};
+        box-shadow: ${cssManager.bdTheme(
+          '0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
+          '0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
+        )};
+      }
+
+      .header-icon-wrapper dees-icon {
+        font-size: 18px;
+        color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
       }
 
       .appName {
-        font-size: 14px;
+        font-size: 15px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#000', '#fff')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        letter-spacing: -0.02em;
       }
 
       .viewTabs-container {
-        flex: 1;
         overflow-y: auto;
-        padding: 4px 0;
+        padding: 12px 8px;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
+      }
+
+      .viewTabs-container::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .viewTabs-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .viewTabs-container::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        border-radius: 3px;
+      }
+
+      .viewTabs-container::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 30%)')};
+      }
+
+      .section-label {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        padding: 8px 12px 8px;
+        margin-bottom: 4px;
       }
 
       .viewTabs {
         display: flex;
         flex-direction: column;
+        gap: 2px;
       }
 
       .viewTab {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 10px;
-        padding: 8px 12px;
+        padding: 10px 12px;
         cursor: default;
-        transition: background 0.1s;
+        transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
         user-select: none;
         position: relative;
+        border-radius: 8px;
       }
 
       .viewTab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }
 
       .viewTab:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
+        transform: scale(0.99);
       }
 
       .viewTab.selected {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
+        background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
-        color: ${cssManager.bdTheme('#000', '#fff')};
+        color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
         font-weight: 500;
       }
 
@@ -143,41 +198,65 @@ export class DeesSimpleAppDash extends DeesElement {
         content: '';
         position: absolute;
         left: 0;
-        top: 0;
+        top: 8px;
-        bottom: 0;
+        bottom: 8px;
         width: 3px;
-        background: ${cssManager.bdTheme('#26a69a', '#26a69a')};
+        border-radius: 0 2px 2px 0;
+        background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
       }
 
       .viewTab dees-icon {
-        font-size: 14px;
+        font-size: 16px;
-        opacity: 0.7;
+        opacity: 0.55;
+        transition: all 0.15s ease;
       }
 
+      .viewTab:hover dees-icon {
+        opacity: 0.75;
+      }
+
+      .viewTab.selected dees-icon {
+        opacity: 0.9;
+        color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
+      }
+
+      .viewTab span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
       .appActions {
-        padding: 12px;
+        padding: 12px 8px;
-        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
       }
 
       .action {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 10px;
-        padding: 8px;
+        padding: 10px 12px;
-        border-radius: 4px;
+        border-radius: 8px;
         cursor: default;
-        transition: background 0.1s;
+        transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
       }
 
       .action:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
+        background: ${cssManager.bdTheme('hsl(0 84% 60% / 0.08)', 'hsl(0 84% 60% / 0.12)')};
+        color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
       }
 
       .action dees-icon {
-        font-size: 14px;
+        font-size: 16px;
-        opacity: 0.7;
+        opacity: 0.6;
+        transition: all 0.15s ease;
+      }
+
+      .action:hover dees-icon {
+        opacity: 0.9;
+        color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
       }
 
       .appcontent {
@@ -189,7 +268,7 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 24px;
         width: calc(100% - 240px);
         overflow: auto;
-        background: ${cssManager.bdTheme('#f5f5f5', '#000')};
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
         overscroll-behavior: contain;
       }
 
@@ -199,36 +278,51 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 0px;
         left: 0px;
         width: 100%;
-        border-top: 1px solid ${cssManager.bdTheme('#00000020', '#ffffff20')};
         height: 24px;
-        background: ${cssManager.bdTheme('#2196f3', '#1565c0')};
+        background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
         z-index: 2;
         display: flex;
         justify-content: flex-end;
         align-items: center;
         flex-direction: row;
-        font-size: 12px;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.01em;
       }
 
       .control {
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 6px;
-        margin-right: 16px;
+        padding: 0 12px;
+        height: 100%;
         white-space: nowrap;
         cursor: default;
-        opacity: 0.8;
+        color: hsl(0 0% 70%);
-        transition: opacity 0.2s;
+        transition: all 0.15s ease;
+        border-left: 1px solid hsl(0 0% 100% / 0.08);
+      }
+
+      .control:first-child {
+        border-left: none;
       }
 
       .control:hover {
-        opacity: 1;
+        background: hsl(0 0% 100% / 0.06);
+        color: hsl(0 0% 95%);
       }
 
       .control dees-icon {
-        font-size: 14px;
+        font-size: 13px;
       }
 
+      .control.status-connected dees-icon {
+        color: hsl(142 70% 50%);
+      }
+
+      .control.status-terminal dees-icon {
+        color: hsl(45 90% 55%);
+      }
     `,
   ];
 
@@ -236,12 +330,14 @@ export class DeesSimpleAppDash extends DeesElement {
     return html`
       <div class="maincontainer">
         <div class="appbar">
-          <div>
           <div class="sidebar-header">
-              <dees-icon .icon="${'lucide:grid3x3'}" style="font-size: 18px;"></dees-icon>
+            <div class="header-icon-wrapper">
+              <dees-icon .icon="${'lucide:layoutGrid'}"></dees-icon>
+            </div>
             <div class="appName">${this.name}</div>
           </div>
           <div class="viewTabs-container">
+            <div class="section-label">Navigation</div>
             <div class="viewTabs">
               ${this.viewTabs.map(
                 (view) => html`
@@ -250,21 +346,22 @@ export class DeesSimpleAppDash extends DeesElement {
                     @click=${() => this.loadView(view)}
                   >
                     ${view.iconName ? html`
-                        <dees-icon .icon="${`${view.iconName}`}"></dees-icon>
+                      <dees-icon .icon="${view.iconName.includes(':') ? view.iconName : `lucide:${view.iconName}`}"></dees-icon>
-                      ` : ''}
+                    ` : html`
-                      <span style="flex: 1;">${view.name}</span>
+                      <dees-icon .icon="${'lucide:file'}"></dees-icon>
+                    `}
+                    <span>${view.name}</span>
                   </div>
                 `
               )}
             </div>
           </div>
-          </div>
           <div class="appActions">
             <div class="action" @click=${() => {
               this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
             }}>
               <dees-icon .icon="${'lucide:logOut'}"></dees-icon>
-              <span>Logout</span>
+              <span>Sign out</span>
             </div>
           </div>
         </div>
@@ -272,11 +369,11 @@ export class DeesSimpleAppDash extends DeesElement {
           <!-- Content goes here -->
         </div>
         <div class="controlbar">
-          <div class="control">
+          <div class="control status-connected">
             <dees-icon .icon="${'lucide:wifi'}"></dees-icon>
             <span>Connected</span>
           </div>
-          <div class="control" @click=${this.launchTerminal}>
+          <div class="control status-terminal" @click=${this.launchTerminal}>
             <dees-icon .icon="${'lucide:terminal'}"></dees-icon>
             <span>Terminal</span>
           </div>
@@ -315,10 +412,10 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.style.right = '0px';
     terminal.style.bottom = '24px';
     terminal.style.opacity = '0';
-    terminal.style.transform = 'translateY(20px)';
+    terminal.style.transform = 'translateY(8px) scale(0.99)';
-    terminal.style.transition = 'all 0.2s';
+    terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
-    terminal.style.background = '#000';
+    terminal.background = 'hsl(220 13% 8%)';
-    terminal.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+    terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
     terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
     terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
     
@@ -327,7 +424,7 @@ export class DeesSimpleAppDash extends DeesElement {
     
     await domtools.convenience.smartdelay.delayFor(0);
     terminal.style.opacity = '1';
-    terminal.style.transform = 'translateY(0px)';
+    terminal.style.transform = 'translateY(0) scale(1)';
     return terminal;
   }
   
@@ -335,8 +432,8 @@ export class DeesSimpleAppDash extends DeesElement {
     const domtools = await this.domtoolsPromise;
     if (this.currentTerminal) {
       this.currentTerminal.style.opacity = '0';
-      this.currentTerminal.style.transform = 'translateY(20px)';
+      this.currentTerminal.style.transform = 'translateY(8px) scale(0.99)';
-      await domtools.convenience.smartdelay.delayFor(200);
+      await domtools.convenience.smartdelay.delayFor(250);
       this.currentTerminal.remove();
       this.currentTerminal = null;
     }

ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts

@@ -29,7 +29,7 @@ export class DeesSimpleLogin extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
         user-select: none;
         display: block;
         width: 100%;
@@ -46,7 +46,7 @@ export class DeesSimpleLogin extends DeesElement {
         height: 100%;
         top: 0;
         left: 0;
-        background: ${cssManager.bdTheme('#f5f5f5', '#000')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
       }
 
       .slotContainer {
@@ -56,43 +56,56 @@ export class DeesSimpleLogin extends DeesElement {
         top: 0;
         left: 0;
         opacity: 0;
-        transition: opacity 0.3s, transform 0.3s;
+        transition: opacity 0.2s ease, transform 0.2s ease;
         pointer-events: none;
       }
 
       .login {
-        min-width: 320px;
+        width: 100%;
-        background: ${cssManager.bdTheme('#ffffff', '#111')};
+        max-width: 360px;
-        box-shadow: ${cssManager.bdTheme(
+        display: flex;
-          '0 4px 12px rgba(0, 0, 0, 0.15)',
+        flex-direction: column;
-          '0 4px 12px rgba(0, 0, 0, 0.3)'
+        gap: 24px;
-        )};
+      }
-        border-radius: 8px;
+
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+      .login-header {
-        padding: 24px;
+        display: flex;
-        transition: opacity 0.3s, transform 0.3s;
+        flex-direction: column;
+        gap: 8px;
+        text-align: center;
       }
 
       .header {
-        text-align: center;
+        font-size: 24px;
-        font-size: 16px;
         font-weight: 600;
-        margin-bottom: 20px;
+        letter-spacing: -0.025em;
-        color: ${cssManager.bdTheme('#000', '#fff')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
       }
 
-      .login dees-form {
+      .subheader {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+      }
+
+      .login-card {
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 8px;
+        padding: 24px;
+      }
+
+      .login-card dees-form {
         display: flex;
         flex-direction: column;
-        gap: 12px;
+        gap: 16px;
       }
 
-      .login dees-input-text {
+      .login-card dees-input-text {
         width: 100%;
       }
 
-      .login dees-form-submit {
+      .login-card dees-form-submit {
-        margin-top: 4px;
+        margin-top: 8px;
         width: 100%;
       }
     `,
@@ -102,14 +115,19 @@ export class DeesSimpleLogin extends DeesElement {
     return html`
       <div class="loginContainer">
         <div class="login">
-          <div class="header">Login to ${this.name}</div>
+          <div class="login-header">
+            <div class="header">Sign in</div>
+            <div class="subheader">Enter your credentials to access ${this.name}</div>
+          </div>
+          <div class="login-card">
             <dees-form>
               <dees-input-text key="username" label="Username" required></dees-input-text>
               <dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
-            <dees-form-submit>Login</dees-form-submit>
+              <dees-form-submit>Sign in</dees-form-submit>
             </dees-form>
           </div>
         </div>
+      </div>
       <div class="slotContainer">
         <slot></slot>
       </div>

ts_web/elements/dees-terminal/dees-terminal.ts

@@ -38,6 +38,9 @@ export class DeesTerminal extends DeesElement {
   @property()
   accessor environment: {[key: string]: string} = {};
 
+  @property()
+  accessor background: string = '#000000';
+
   // exposing webcontainer
   private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
   public webcontainerPromise = this.webcontainerDeferred.promise;
@@ -58,7 +61,7 @@ export class DeesTerminal extends DeesElement {
     css`
       :host {
         padding: 20px;
-        background: #000;
+        background: var(--dees-terminal-background, #000000);
         position: absolute;
         height: 100%;
         width: 100%;
@@ -153,7 +156,7 @@ export class DeesTerminal extends DeesElement {
 
       .xterm .composition-view {
         /* TODO: Composition position got messed up somewhere */
-        background: #000;
+        background: var(--dees-terminal-background, #000000);
         color: #fff;
         display: none;
         position: absolute;
@@ -167,7 +170,7 @@ export class DeesTerminal extends DeesElement {
 
       .xterm .xterm-viewport {
         /* On OS X this is required in order for the scroll bar to appear fully opaque */
-        background-color: #000;
+        background-color: var(--dees-terminal-background, #000000);
         overflow-y: scroll;
         cursor: default;
         position: absolute;
@@ -261,11 +264,18 @@ export class DeesTerminal extends DeesElement {
   ): Promise<void> {
     const domtools = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
+
+    // Sync CSS variable with background property
+    this.style.setProperty('--dees-terminal-background', this.background);
+
     const container = this.shadowRoot.getElementById('container');
 
     const term = new Terminal({
       convertEol: true,
       cursorBlink: true,
+      theme: {
+        background: this.background,
+      },
     });
     this.fitAddon = new FitAddon();
     term.loadAddon(this.fitAddon);