v3.52.2

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2026-04-03 - 3.52.2 - fix(chart-log, simple-appdash)
+align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation
+
+- Update dees-chart-log to refresh the terminal theme when goBright changes and derive dark mode directly from the brightness setting.
+- Refine dees-simple-appdash control bar colors, borders, and shadow gradients for better light and dark theme consistency.
+- Expand the app dashboard demo with recent activity content to showcase scrollable layout behavior.
+
+## 2026-04-03 - 3.52.1 - fix(dees-modal)
+refine modal styling, spacing, and animations for a cleaner overlay presentation
+
+- Adjust modal entrance and exit transitions with updated transform, opacity, and timing values
+- Refresh heading and action button styling with tighter spacing, smaller controls, and improved theme-aware colors
+- Update tile shadow, margins, and content scrollbar styling to improve modal visual polish and readability
+
 ## 2026-04-03 - 3.52.0 - feat(dees-chart-area)
 add full page toggle control for chart area
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.52.0",
+  "version": "3.52.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",

ts_web/00_commitinfo_data.ts

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

@@ -458,6 +458,9 @@ export class DeesChartLog extends DeesElement {
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
+    if (changedProperties.has('goBright') && this.terminal) {
+      this.terminal.options.theme = this.getTerminalTheme();
+    }
     if (changedProperties.has('logEntries') && this.terminalReady && this.logEntries.length > 0) {
       const oldEntries: ILogEntry[] = changedProperties.get('logEntries') || [];
       const newEntries = this.logEntries;
@@ -504,7 +507,7 @@ export class DeesChartLog extends DeesElement {
   }
 
   private getTerminalTheme() {
-    const isDark = this.domtoolsInstance?.themeManager?.isDarkMode ?? true;
+    const isDark = !this.goBright;
     return isDark
       ? {
           background: '#0a0a0a',

ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -21,6 +21,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
@@ -128,8 +129,7 @@ export class DeesModal extends DeesElement {
       /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        will-change: transform;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
       .modalContainer {
         display: flex;
@@ -142,106 +142,112 @@ export class DeesModal extends DeesElement {
         align-items: center;
         justify-content: center;
       }
-      .modal {
-        will-change: transform;
-        transform: translateY(0px) scale(0.95);
+      dees-tile {
+        will-change: transform, opacity;
+        transform: translateY(8px) scale(0.98);
         opacity: 0;
         min-height: 120px;
-        max-height: calc(100vh - 40px);
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        transition: all 0.2s ease;
-        overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-        margin: 20px;
-        display: flex;
-        flex-direction: column;
+        max-height: calc(100vh - 80px);
+        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+        margin: 40px;
         overscroll-behavior: contain;
       }
 
+      dees-tile::part(outer) {
+        box-shadow:
+          0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
+          0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
+          0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
+      }
+
       /* Width variations */
-      .modal.width-small {
+      dees-tile.width-small {
         width: 380px;
       }
 
-      .modal.width-medium {
+      dees-tile.width-medium {
         width: 560px;
       }
 
-      .modal.width-large {
+      dees-tile.width-large {
         width: 800px;
       }
 
-      .modal.width-fullscreen {
+      dees-tile.width-fullscreen {
         width: calc(100vw - 40px);
         height: calc(100vh - 40px);
         max-height: calc(100vh - 40px);
       }
 
       @media (max-width: 768px) {
-        .modal {
+        dees-tile {
           width: calc(100vw - 40px) !important;
           max-width: none !important;
         }
-        
-        /* Allow full height on mobile when content needs it */
+
         .modalContainer {
           padding: 10px;
         }
-        
-        .modal {
+
+        dees-tile {
           margin: 10px;
           max-height: calc(100vh - 20px);
         }
-        
-        /* Full screen mode on mobile */
-        .modal.mobile-fullscreen {
+
+        dees-tile.mobile-fullscreen {
           width: 100vw !important;
           height: 100vh !important;
           max-height: 100vh !important;
           margin: 0;
+        }
+
+        dees-tile.mobile-fullscreen::part(outer) {
           border-radius: 0;
           border: none;
         }
       }
 
-      .modal.show {
+      dees-tile.show {
         opacity: 1;
-        transform: translateY(0px) scale(1);
+        transform: translateY(0) scale(1);
       }
 
-      .modal.show.predestroy {
+      dees-tile.show.predestroy {
         opacity: 0;
-        transform: translateY(10px) scale(1);
+        transform: translateY(6px) scale(0.98);
+        transition: transform 0.15s ease-in, opacity 0.15s ease-in;
       }
 
-      .modal .heading {
-        height: 40px;
-        min-height: 40px;
-        font-family: ${cssGeistFontFamily};
+      .heading {
+        height: 36px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 0 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        padding: 0 8px 0 16px;
         position: relative;
-        flex-shrink: 0;
       }
 
-      .modal .heading .header-buttons {
+      .heading .heading-text {
+        flex: 1;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .heading .header-buttons {
         display: flex;
         align-items: center;
-        gap: 4px;
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
+        gap: 2px;
+        flex-shrink: 0;
+        margin-left: 8px;
       }
 
-      .modal .heading .header-button {
-        width: 28px;
-        height: 28px;
+      .heading .header-button {
+        width: 24px;
+        height: 24px;
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -249,89 +255,85 @@ export class DeesModal extends DeesElement {
         cursor: pointer;
         transition: all 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
       }
 
-      .modal .heading .header-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      .heading .header-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
       }
 
-      .modal .heading .header-button:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+      .heading .header-button:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
       }
 
-      .modal .heading .header-button dees-icon {
-        width: 16px;
-        height: 16px;
+      .heading .header-button dees-icon {
+        width: 14px;
+        height: 14px;
         display: block;
       }
 
-      .modal .heading .heading-text {
-        flex: 1;
-        text-align: center;
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 40px;
-        padding: 0 40px;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-      }
-
-      .modal .content {
-        flex: 1;
+      .content {
         overflow-y: auto;
         overflow-x: hidden;
         overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
       }
-      .modal .bottomButtons {
+      .bottomButtons {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         justify-content: flex-end;
-        gap: 8px;
-        padding: 8px;
-        flex-shrink: 0;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .modal .bottomButtons .bottomButton {
-        padding: 8px 16px;
-        border-radius: 4px;
-        line-height: 16px;
+      .bottomButtons .bottomButton {
+        padding: 0 16px;
+        height: 100%;
         text-align: center;
-        font-size: 14px;
+        font-size: 12px;
         font-weight: 500;
         cursor: pointer;
         user-select: none;
         transition: all 0.15s ease;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: transparent;
+        border: none;
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
         white-space: nowrap;
+        display: flex;
+        align-items: center;
       }
 
-      .modal .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
-      }
-      .modal .bottomButtons .bottomButton:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
-      }
-      .modal .bottomButtons .bottomButton:last-child {
-        border-right: none;
+      .bottomButtons .bottomButton:first-child {
+        border-left: none;
       }
 
-      .modal .bottomButtons .bottomButton.primary {
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        color: #ffffff;
+      .bottomButtons .bottomButton:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }
-      .modal .bottomButtons .bottomButton.primary:hover {
-        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
-        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+
+      .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
       }
-      .modal .bottomButtons .bottomButton.primary:active {
-        background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
-        border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
+
+      .bottomButtons .bottomButton.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .bottomButtons .bottomButton.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .bottomButtons .bottomButton.primary:active {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.12)', 'hsl(213.1 93.9% 67.8% / 0.12)')};
       }
     `,
   ];
@@ -345,13 +347,13 @@ export class DeesModal extends DeesElement {
 
     return html`
       <style>
-        ${customWidth ? `.modal { width: ${customWidth}; }` : ''}
-        ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''}
-        ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
+        ${customWidth ? `dees-tile { width: ${customWidth}; }` : ''}
+        ${maxWidthStyle ? `dees-tile { max-width: ${maxWidthStyle}; }` : ''}
+        ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ''}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <div class="modal ${widthClass} ${mobileFullscreenClass}">
-          <div class="heading">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
+          <div slot="header" class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">
               ${this.showHelpButton ? html`
@@ -368,7 +370,7 @@ export class DeesModal extends DeesElement {
           </div>
           <div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div>
           ${this.menuOptions.length > 0 ? html`
-            <div class="bottomButtons">
+            <div slot="footer" class="bottomButtons">
               ${this.menuOptions.map(
                 (actionArg, index) => html`
                   <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
@@ -378,7 +380,7 @@ export class DeesModal extends DeesElement {
               )}
             </div>
           ` : ''}
-        </div>
+        </dees-tile>
       </div>
     `;
   }
@@ -388,8 +390,8 @@ export class DeesModal extends DeesElement {
     super.firstUpdated(_changedProperties);
     const domtools = await this.domtoolsPromise;
     await domtools.convenience.smartdelay.delayFor(30);
-    const modal = this.shadowRoot!.querySelector('.modal');
-    modal!.classList.add('show');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
+    tile!.classList.add('show');
   }
 
   public async handleOutsideClick(eventArg: MouseEvent) {
@@ -402,8 +404,8 @@ export class DeesModal extends DeesElement {
 
   public async destroy() {
     const domtools = await this.domtoolsPromise;
-    const modal = this.shadowRoot!.querySelector('.modal');
-    modal!.classList.add('predestroy');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
+    tile!.classList.add('predestroy');
     await domtools.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();

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

@@ -110,6 +110,48 @@ class DemoViewDashboard extends DeesElement {
           console.log('Tile action:', e.detail);
         }}
       ></dees-statsgrid>
+
+      <h2 style="margin-top: 40px;">Recent Activity</h2>
+      <p>Below is a log of recent system events and user activity to demonstrate scrollable content.</p>
+
+      ${[
+        { time: '2 min ago', event: 'User john@example.com logged in from 192.168.1.42', type: 'info' },
+        { time: '5 min ago', event: 'Deployment v3.52.1 completed successfully on production', type: 'success' },
+        { time: '12 min ago', event: 'Database backup finished — 2.4 GB compressed', type: 'info' },
+        { time: '18 min ago', event: 'SSL certificate renewed for api.example.com (expires 2027-04-03)', type: 'success' },
+        { time: '25 min ago', event: 'Memory usage spike on worker-03 (92%) — auto-scaled to 4 instances', type: 'warning' },
+        { time: '31 min ago', event: 'New user registration: sarah@company.io', type: 'info' },
+        { time: '45 min ago', event: 'Scheduled job "cleanup-temp-files" completed — removed 1,247 files', type: 'info' },
+        { time: '1 hour ago', event: 'API rate limit reached for client app-mobile-ios (429 responses)', type: 'warning' },
+        { time: '1.5 hours ago', event: 'CDN cache purged for /assets/* — 340 objects invalidated', type: 'info' },
+        { time: '2 hours ago', event: 'Failed login attempt for admin@example.com from 203.0.113.50 (blocked)', type: 'error' },
+        { time: '2.5 hours ago', event: 'Webhook delivery to https://hooks.slack.com succeeded (200 OK)', type: 'info' },
+        { time: '3 hours ago', event: 'Cron job "generate-reports" started — processing Q1 2026 data', type: 'info' },
+        { time: '3.5 hours ago', event: 'Load balancer health check: all 8 nodes healthy', type: 'success' },
+        { time: '4 hours ago', event: 'DNS propagation complete for new subdomain staging.example.com', type: 'success' },
+      ].map(item => html`
+        <div style="
+          display: flex;
+          align-items: baseline;
+          gap: 12px;
+          padding: 10px 0;
+          border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
+          font-size: 13px;
+        ">
+          <span style="
+            flex-shrink: 0;
+            width: 100px;
+            font-size: 11px;
+            color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
+          ">${item.time}</span>
+          <span style="
+            color: ${item.type === 'error' ? cssManager.bdTheme('hsl(0 72% 50%)', 'hsl(0 72% 65%)') :
+              item.type === 'warning' ? cssManager.bdTheme('hsl(25 95% 50%)', 'hsl(25 95% 63%)') :
+              item.type === 'success' ? cssManager.bdTheme('hsl(142 70% 40%)', 'hsl(142 70% 55%)') :
+              cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 75%)')};
+          ">${item.event}</span>
+        </div>
+      `)}
     `;
   }
 }

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

@@ -299,15 +299,51 @@ export class DeesSimpleAppDash extends DeesElement {
         overscroll-behavior: contain;
       }
 
+      .appcontent::before {
+        content: '';
+        position: sticky;
+        top: 0;
+        left: 0;
+        right: 0;
+        display: block;
+        height: 8px;
+        margin-bottom: -8px;
+        z-index: 10;
+        pointer-events: none;
+        background: linear-gradient(
+          to bottom,
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+          transparent
+        );
+      }
+
+      .controlbar::before {
+        content: '';
+        position: absolute;
+        top: -8px;
+        left: 240px;
+        right: 0;
+        height: 8px;
+        pointer-events: none;
+        background: linear-gradient(
+          to top,
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+          transparent
+        );
+      }
+
       .controlbar {
-        color: #fff;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
         position: absolute;
         bottom: 0px;
         left: 0px;
         width: 100%;
         height: 24px;
-        background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
-        z-index: 2;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        z-index: 11;
         display: flex;
         justify-content: flex-end;
         align-items: center;
@@ -325,9 +361,10 @@ export class DeesSimpleAppDash extends DeesElement {
         height: 100%;
         white-space: nowrap;
         cursor: default;
-        color: hsl(0 0% 70%);
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 50%)')};
         transition: all 0.15s ease;
-        border-left: 1px solid hsl(0 0% 100% / 0.08);
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+
       }
 
       .control:first-child {
@@ -335,8 +372,8 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .control:hover {
-        background: hsl(0 0% 100% / 0.06);
-        color: hsl(0 0% 95%);
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.06)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
       }
 
       .control dees-icon {