1.10.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.10.4",
+  "version": "1.10.5",
   "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/elements/dees-statsgrid.demo.ts

@@ -381,8 +381,9 @@ export const demoFunc = () => {
                   name: 'Increment',
                   iconName: 'lucide:plus',
                   action: async () => {
-                    const grid = document.querySelector('#interactive-grid');
-                    const tile = grid.tiles.find(t => t.id === 'counter');
+                    const grid = document.querySelector('#interactive-grid') as any;
+                    if (!grid) return;
+                    const tile = grid.tiles.find((t: any) => t.id === 'counter');
                     tile.value = typeof tile.value === 'number' ? tile.value + 1 : 1;
                     grid.tiles = [...grid.tiles];
                   }
@@ -391,8 +392,9 @@ export const demoFunc = () => {
                   name: 'Reset',
                   iconName: 'lucide:rotate-ccw',
                   action: async () => {
-                    const grid = document.querySelector('#interactive-grid');
-                    const tile = grid.tiles.find(t => t.id === 'counter');
+                    const grid = document.querySelector('#interactive-grid') as any;
+                    if (!grid) return;
+                    const tile = grid.tiles.find((t: any) => t.id === 'counter');
                     tile.value = 0;
                     grid.tiles = [...grid.tiles];
                   }
@@ -406,9 +408,9 @@ export const demoFunc = () => {
               iconName: 'lucide:play',
               action: async function() {
                 // Toggle live updates
-                if (!window.liveUpdateInterval) {
-                  window.liveUpdateInterval = setInterval(() => {
-                    const grid = document.querySelector('#interactive-grid');
+                if (!(window as any).liveUpdateInterval) {
+                  (window as any).liveUpdateInterval = setInterval(() => {
+                    const grid = document.querySelector('#interactive-grid') as any;
                     if (grid) {
                       const tiles = [...grid.tiles];
                       
@@ -433,8 +435,8 @@ export const demoFunc = () => {
                   this.name = 'Stop Live Updates';
                   this.iconName = 'lucide:pause';
                 } else {
-                  clearInterval(window.liveUpdateInterval);
-                  window.liveUpdateInterval = null;
+                  clearInterval((window as any).liveUpdateInterval);
+                  (window as any).liveUpdateInterval = null;
                   this.name = 'Start Live Updates';
                   this.iconName = 'lucide:play';
                 }
@@ -506,8 +508,8 @@ html\`
     <script>
       // Cleanup live updates on page unload
       window.addEventListener('beforeunload', () => {
-        if (window.liveUpdateInterval) {
-          clearInterval(window.liveUpdateInterval);
+        if ((window as any).liveUpdateInterval) {
+          clearInterval((window as any).liveUpdateInterval);
         }
       });
     </script>

ts_web/elements/dees-statsgrid.ts

@@ -226,8 +226,9 @@ export class DeesStatsGrid extends DeesElement {
 
       .gauge-container {
         width: 140px;
-        height: 70px;
+        height: 80px;
         position: relative;
+        margin-top: -10px;
       }
 
       .gauge-svg {
@@ -473,10 +474,10 @@ export class DeesStatsGrid extends DeesElement {
     
     // SVG dimensions and calculations
     const width = 140;
-    const height = 70;
+    const height = 80;
     const strokeWidth = 8;
     const padding = strokeWidth / 2 + 2;
-    const radius = 40;
+    const radius = 48;
     const centerX = width / 2;
     const centerY = height - padding;