fix(dees-statsgrid): center CPU core bars when they occupy less than ~66% of the tile and switch bar fills to absolute positioning for correct alignment and smoother transitions

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-01-12 - 3.35.1 - fix(dees-statsgrid)
+center CPU core bars when they occupy less than ~66% of the tile and switch bar fills to absolute positioning for correct alignment and smoother transitions
+
+- Add .cpu-cores-bars.centered CSS rule to horizontally center the bars when appropriate.
+- Compute shouldCenter by estimating max bars width (cores * 24px + gaps) and comparing to estimated tile content width (accounts for columnSpan, minTileWidth, gap and ~32px padding), using a 66.6% threshold.
+- Change .cpu-core-bar-container to position: relative and .cpu-core-bar-fill to position: absolute (bottom:0; left:0; right:0) to ensure correct vertical alignment and smoother height transitions.
+
 ## 2026-01-12 - 3.35.0 - feat(dees-statsgrid)
 add cpuCores tile type with column spanning, rendering, demo and docs
 

ts_web/00_commitinfo_data.ts

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

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

@@ -426,6 +426,10 @@ export class DeesStatsGrid extends DeesElement {
         padding: 4px 0;
       }
 
+      .cpu-cores-bars.centered {
+        justify-content: center;
+      }
+
       .cpu-core-bar-container {
         flex: 1;
         min-width: 6px;
@@ -442,14 +446,16 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
         background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
         border-radius: 2px;
-        display: flex;
+        position: relative;
-        flex-direction: column;
-        justify-content: flex-end;
         overflow: hidden;
         min-height: 40px;
       }
 
       .cpu-core-bar-fill {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
         width: 100%;
         background: ${cssManager.bdTheme('#666666', '#888888')};
         transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
@@ -832,6 +838,14 @@ export class DeesStatsGrid extends DeesElement {
       return 'high';
     };
 
+    // Calculate if bars should be centered (when they take up less than 66.6% of available width)
+    // Max bar width = cores * 24px + (cores - 1) * 3px gap
+    const maxBarsWidth = cores.length * 24 + (cores.length - 1) * 3;
+    // Estimate tile content width based on columnSpan and minTileWidth (subtract padding)
+    const columnSpan = tile.columnSpan || 1;
+    const estimatedTileWidth = (this.minTileWidth * columnSpan) + ((columnSpan - 1) * this.gap) - 32; // 32px for padding
+    const shouldCenter = maxBarsWidth < estimatedTileWidth * 0.666;
+
     return html`
       <div class="cpu-cores-wrapper">
         <div class="cpu-cores-header">
@@ -839,7 +853,7 @@ export class DeesStatsGrid extends DeesElement {
           <span class="cpu-cores-unit">%</span>
           <span class="cpu-cores-label">${cores.length} cores</span>
         </div>
-        <div class="cpu-cores-bars">
+        <div class="cpu-cores-bars ${shouldCenter ? 'centered' : ''}">
           ${cores.map(core => {
             const usage = Math.min(100, Math.max(0, core.usage));
             const colorClass = getColorClass(usage);