@design.estate/dees-catalog 3.36.0 → 3.37.1

package/npmextra.json

@@ -59,5 +59,8 @@
         "bundler": "esbuild"
       }
     ]
+  },
+  "@git.zone/tswatch": {
+    "preset": "element"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.36.0",
+  "version": "3.37.1",
   "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",
@@ -9,7 +9,7 @@
   "scripts": {
     "test": "tstest test/ --web --verbose --timeout 30 --logfile",
     "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
-    "watch": "tswatch element",
+    "watch": "tswatch",
     "buildDocs": "tsdoc",
     "postinstall": "node scripts/update-monaco-version.cjs"
   },
@@ -37,19 +37,19 @@
     "apexcharts": "^5.3.6",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.562.0",
+    "lucide": "^0.563.0",
     "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.1.0",
-    "@git.zone/tsbundle": "^2.8.1",
-    "@git.zone/tstest": "^3.1.4",
-    "@git.zone/tswatch": "^2.3.13",
+    "@git.zone/tsbuild": "^4.1.2",
+    "@git.zone/tsbundle": "^2.8.3",
+    "@git.zone/tstest": "^3.1.7",
+    "@git.zone/tswatch": "^3.0.1",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.6"
+    "@types/node": "^25.0.10"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts

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

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

@@ -142,54 +142,95 @@ export const demoFunc = () => html`
       <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
         <div class="icon-row">
           <dees-button>
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
             Add Item
           </dees-button>
           <dees-button type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
             Delete
           </dees-button>
           <dees-button type="outline">
-            <dees-icon iconFA="faDownload"></dees-icon>
+            <dees-icon icon="lucide:Download"></dees-icon>
             Download
           </dees-button>
         </div>
-        
+
         <div class="icon-row">
           <dees-button type="secondary" size="sm">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
             Settings
           </dees-button>
           <dees-button type="ghost">
-            <dees-icon iconFA="faChevronLeft"></dees-icon>
+            <dees-icon icon="fa:caretLeft"></dees-icon>
             Back
           </dees-button>
           <dees-button type="ghost">
             Next
-            <dees-icon iconFA="faChevronRight"></dees-icon>
+            <dees-icon icon="fa:caretRight"></dees-icon>
           </dees-button>
         </div>
-        
+
         <div class="icon-row">
           <dees-button size="icon" type="default">
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="secondary">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="outline">
-            <dees-icon iconFA="faSearch"></dees-icon>
+            <dees-icon icon="lucide:Search"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="ghost">
-            <dees-icon iconFA="faEllipsisV"></dees-icon>
+            <dees-icon icon="lucide:MoreVertical"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
           </dees-button>
         </div>
       </dees-panel>
     </dees-demowrapper>
-    
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track icon property button clicks
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const icon = button.getAttribute('icon') || 'none';
+          const position = button.getAttribute('iconPosition') || 'left';
+          console.log(`Icon property button: icon=${icon}, position=${position}`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'4. Icons via Property'} .subtitle=${'Simplified icon syntax using the icon property'}>
+        <div class="icon-row">
+          <dees-button icon="fa:plus">Add Item</dees-button>
+          <dees-button type="destructive" icon="fa:trash">Delete</dees-button>
+          <dees-button type="outline" icon="lucide:Download">Download</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm" icon="fa:gear">Settings</dees-button>
+          <dees-button type="ghost" icon="fa:caretLeft">Back</dees-button>
+          <dees-button type="ghost" icon="fa:caretRight" iconPosition="right">Next</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button size="icon" type="default" icon="fa:plus"></dees-button>
+          <dees-button size="icon" type="secondary" icon="lucide:Settings"></dees-button>
+          <dees-button size="icon" type="outline" icon="lucide:Search"></dees-button>
+          <dees-button size="icon" type="ghost" icon="lucide:MoreVertical"></dees-button>
+          <dees-button size="icon" type="destructive" icon="fa:trash"></dees-button>
+        </div>
+
+        <div style="margin-top: 16px;">
+          <div class="code-snippet">
+            &lt;dees-button icon="fa:plus"&gt;Add Item&lt;/dees-button&gt;<br>
+            &lt;dees-button icon="fa:caretRight" iconPosition="right"&gt;Next&lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
       // Demonstrate status changes
       const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
@@ -215,7 +256,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'4. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
+      <dees-panel .title=${'5. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
         <div class="button-group">
           <dees-button status="normal">Normal</dees-button>
           <dees-button status="pending">Processing...</dees-button>
@@ -260,7 +301,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'5. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
+      <dees-panel .title=${'6. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
         <div class="button-group">
           <dees-button>Click Me</dees-button>
           <dees-button type="secondary" .eventDetailData=${'custom-data-123'}>
@@ -303,7 +344,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'6. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
+      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
         <dees-form>
           <dees-input-text label="Name" key="name" required></dees-input-text>
           <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
@@ -330,7 +371,7 @@ export const demoFunc = () => html`
         }
       });
     }}>
-      <dees-panel .title=${'7. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
+      <dees-panel .title=${'8. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
         <div class="button-group">
           <dees-button type="normal">Normal → Default</dees-button>
           <dees-button type="highlighted">Highlighted → Destructive</dees-button>
@@ -371,36 +412,36 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'8. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
+      <dees-panel .title=${'9. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
         <div class="horizontal-group">
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
             <dees-button type="default" size="sm">
-              <dees-icon iconFA="faSave"></dees-icon>
+              <dees-icon icon="lucide:Save"></dees-icon>
               Save Changes
             </dees-button>
             <dees-button type="secondary" size="sm">
-              <dees-icon iconFA="faUndo"></dees-icon>
+              <dees-icon icon="lucide:Undo2"></dees-icon>
               Discard
             </dees-button>
             <dees-button type="ghost" size="sm">
-              <dees-icon iconFA="faQuestionCircle"></dees-icon>
+              <dees-icon icon="lucide:HelpCircle"></dees-icon>
               Help
             </dees-button>
           </div>
-          
+
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
             <dees-button type="destructive" size="sm">
-              <dees-icon iconFA="faTrash"></dees-icon>
+              <dees-icon icon="fa:trash"></dees-icon>
               Delete Account
             </dees-button>
             <dees-button type="outline" size="sm">
-              <dees-icon iconFA="faArchive"></dees-icon>
+              <dees-icon icon="lucide:Archive"></dees-icon>
               Archive Data
             </dees-button>
             <dees-button type="ghost" size="sm" disabled>
-              <dees-icon iconFA="faBan"></dees-icon>
+              <dees-icon icon="lucide:Ban"></dees-icon>
               Not Available
             </dees-button>
           </div>
@@ -409,8 +450,7 @@ export const demoFunc = () => html`
         <div style="margin-top: 24px;">
           <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
           <div class="code-snippet">
-            &lt;dees-button type="default" size="sm" @clicked="\${handleClick}"&gt;<br>
-            &nbsp;&nbsp;&lt;dees-icon iconFA="faSave"&gt;&lt;/dees-icon&gt;<br>
+            &lt;dees-button type="default" size="sm" icon="lucide:Save" @clicked="\${handleClick}"&gt;<br>
             &nbsp;&nbsp;Save Changes<br>
             &lt;/dees-button&gt;
           </div>

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

@@ -68,6 +68,12 @@ export class DeesButton extends DeesElement {
   })
   accessor insideForm: boolean = false;
 
+  @property({ type: String, reflect: true })
+  accessor icon: string;
+
+  @property({ type: String, reflect: true })
+  accessor iconPosition: 'left' | 'right' = 'left';
+
   constructor() {
     super();
   }
@@ -340,9 +346,62 @@ export class DeesButton extends DeesElement {
         height: 18px;
       }
 
+      /* Text alignment */
+      .textbox {
+        display: flex;
+        align-items: center;
+      }
+
     `,
   ];
 
+  /**
+   * Extracts icon and text from light DOM and sets properties
+   */
+  private extractLightDom(): void {
+    const iconElement = this.querySelector('dees-icon') as any;
+
+    // Get all text content from light DOM
+    const textContent = Array.from(this.childNodes)
+      .filter(node => node.nodeType === Node.TEXT_NODE)
+      .map(node => node.textContent?.trim())
+      .filter(Boolean)
+      .join(' ');
+
+    if (textContent && !this.text) {
+      this.text = textContent;
+    }
+
+    if (iconElement) {
+      // Get icon value
+      const iconValue = iconElement.icon || iconElement.getAttribute('icon') ||
+                        (iconElement.iconFA ? `fa:${iconElement.iconFA}` : null);
+
+      if (iconValue) {
+        // Determine position based on DOM order
+        const children = Array.from(this.childNodes);
+        const iconIndex = children.indexOf(iconElement);
+        const textNodes = children.filter(node =>
+          node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
+        );
+
+        if (textNodes.length > 0) {
+          const firstTextIndex = children.indexOf(textNodes[0]);
+          this.iconPosition = iconIndex < firstTextIndex ? 'left' : 'right';
+        }
+
+        // Set the icon property
+        this.icon = iconValue;
+      }
+
+      // Remove the light DOM icon element
+      iconElement.remove();
+    }
+
+    // Clear all remaining light DOM
+    this.innerHTML = '';
+  }
+
   public render(): TemplateResult {
     // Map old types to new types for backward compatibility
     const typeMap: {[key: string]: string} = {
@@ -351,10 +410,20 @@ export class DeesButton extends DeesElement {
       'discreet': 'outline',
       'big': 'default' // Will use size instead
     };
-    
+
     const actualType = typeMap[this.type] || this.type;
     const actualSize = this.type === 'big' ? 'lg' : this.size;
-    
+
+    const leftIcon = this.iconPosition === 'left' && this.icon
+      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+      : '';
+    const rightIcon = this.iconPosition === 'right' && this.icon
+      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+      : '';
+
+    // For icon-only buttons, hide the textbox
+    const isIconOnly = actualSize === 'icon' && this.icon;
+
     return html`
       <div
         class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} ${this.status} ${this.disabled
@@ -363,13 +432,15 @@ export class DeesButton extends DeesElement {
         @click="${this.dispatchClick}"
       >
         ${this.status === 'normal' ? html``: html`
-          <dees-spinner 
-            .bnw=${true} 
+          <dees-spinner
+            .bnw=${true}
             status="${this.status}"
             size="${actualSize === 'sm' ? 14 : actualSize === 'lg' ? 18 : 16}"
           ></dees-spinner>
         `}
-        <div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
+        ${leftIcon}
+        ${isIconOnly ? '' : html`<div class="textbox">${this.text || 'Button'}</div>`}
+        ${rightIcon}
       </div>
     `;
   }
@@ -390,6 +461,7 @@ export class DeesButton extends DeesElement {
   }
 
   public async firstUpdated() {
-    // Don't set default text here as it interferes with slotted content
+    // Extract light DOM content (icon + text) and set as properties
+    this.extractLightDom();
   }
 }

package/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -90,10 +90,26 @@ export class DeesInputCode extends DeesInputBase<string> {
       }
 
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+
+      .input-wrapper,
+      :host([label-position="top"]) .input-wrapper,
+      :host([label-position="left"]) .input-wrapper,
+      :host([label-position="right"]) .input-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
       }
 
       .code-container {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
         border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         border-radius: 6px;
         overflow: hidden;
@@ -206,10 +222,13 @@ export class DeesInputCode extends DeesInputBase<string> {
 
       .editor-wrapper {
         position: relative;
+        flex: 1;
+        min-height: 0;
       }
 
       dees-workspace-monaco {
         display: block;
+        height: 100%;
       }
 
       .toolbar-divider {
@@ -231,7 +250,7 @@ export class DeesInputCode extends DeesInputBase<string> {
 
     return html`
       <style>
-        .editor-wrapper {
+        :host {
           height: ${this.height};
         }
       </style>

package/ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts

@@ -70,12 +70,22 @@ export class DeesWorkspaceMonaco extends DeesElement {
     css`
       /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
       }
 
       * {
         box-sizing: border-box;
       }
 
+      .mainbox {
+        position: relative;
+        height: 100%;
+        width: 100%;
+      }
+
       #container {
         position: absolute;
         height: 100%;

package/ts_web/elements/dees-statsgrid/dees-statsgrid.demo.ts

@@ -1,7 +1,7 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
 import '../dees-panel/dees-panel.js';
-import type { IStatsTile, ICpuCore } from '../dees-statsgrid/dees-statsgrid.js';
+import type { IStatsTile, ICpuCore, IPartitionData, IDiskData } from '../dees-statsgrid/dees-statsgrid.js';
 
 // Helper function to generate random CPU core data
 const generateCpuCores = (count: number): ICpuCore[] => {
@@ -601,8 +601,136 @@ html\`
   ></dees-statsgrid>
 \`;`}</div>
       </dees-panel>
+
+      <dees-panel .title=${'7. Disk & Storage Tiles'} .subtitle=${'Partition and physical disk visualization tiles'}>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'root-partition',
+              title: 'Root Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:folder-root',
+              partitionData: {
+                used: 698_341_425_152,      // ~650 GB
+                total: 1_073_741_824_000,   // ~1 TB
+                filesystem: 'ext4',
+                mountPoint: '/'
+              }
+            },
+            {
+              id: 'home-partition',
+              title: 'Home Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:home',
+              partitionData: {
+                used: 214_748_364_800,      // ~200 GB
+                total: 536_870_912_000,     // ~500 GB
+                filesystem: 'ext4',
+                mountPoint: '/home'
+              }
+            },
+            {
+              id: 'data-partition',
+              title: 'Data Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:database',
+              partitionData: {
+                used: 1_932_735_283_200,    // ~1.8 TB (90% - critical)
+                total: 2_147_483_648_000,   // ~2 TB
+                filesystem: 'xfs',
+                mountPoint: '/data'
+              }
+            },
+            {
+              id: 'nvme-ssd',
+              title: 'Primary NVMe',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:hard-drive',
+              columnSpan: 2,
+              diskData: {
+                capacity: 2_000_000_000_000,  // 2 TB
+                model: 'Samsung 990 Pro',
+                type: 'nvme',
+                iops: {
+                  read: 7450,
+                  write: 6900
+                },
+                health: 98
+              }
+            },
+            {
+              id: 'sata-ssd',
+              title: 'Secondary SSD',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:hard-drive',
+              diskData: {
+                capacity: 1_000_000_000_000,  // 1 TB
+                model: 'Crucial MX500',
+                type: 'ssd',
+                iops: {
+                  read: 560,
+                  write: 510
+                },
+                health: 85
+              }
+            },
+            {
+              id: 'hdd-storage',
+              title: 'Backup HDD',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:archive',
+              diskData: {
+                capacity: 8_000_000_000_000,  // 8 TB
+                model: 'Seagate IronWolf',
+                type: 'hdd',
+                iops: {
+                  read: 210,
+                  write: 195
+                },
+                health: 42
+              }
+            }
+          ]}
+          .minTileWidth=${280}
+          .gap=${16}
+        ></dees-statsgrid>
+
+        <div class="tile-config">
+          <div class="config-section">
+            <div class="config-title">Partition Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>partitionData.used:</strong> Used space in bytes (auto-formatted)</li>
+                <li><strong>partitionData.total:</strong> Total capacity in bytes</li>
+                <li><strong>partitionData.filesystem:</strong> Filesystem type (ext4, xfs, ntfs)</li>
+                <li><strong>partitionData.mountPoint:</strong> Mount point path (optional)</li>
+              </ul>
+              Color thresholds: Normal (&lt;75%), Warning (75-90%), Critical (&gt;90%)
+            </div>
+          </div>
+          <div class="config-section">
+            <div class="config-title">Disk Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>diskData.capacity:</strong> Total capacity in bytes</li>
+                <li><strong>diskData.model:</strong> Disk model name (optional)</li>
+                <li><strong>diskData.type:</strong> Disk type: 'ssd', 'hdd', or 'nvme'</li>
+                <li><strong>diskData.iops:</strong> Read/write IOPS (optional)</li>
+                <li><strong>diskData.health:</strong> Health percentage 0-100 (optional)</li>
+              </ul>
+              Health thresholds: Good (70-100%), Warning (30-70%), Critical (&lt;30%)
+            </div>
+          </div>
+        </div>
+      </dees-panel>
     </div>
-    
+
     <script>
       // Cleanup live updates on page unload
       window.addEventListener('beforeunload', () => {