@aquera/nile-visualization 2.1.0 → 2.2.0

package/dist/src/nile-chart/nile-chart.css.js

@@ -172,30 +172,28 @@ export const styles = css `
     contain: layout style;
   }
 
-  /* Grid: height applies to the whole card — header + grid together */
+  /* Grid layout:
+     - card uses clip-path (not overflow:hidden) so position:sticky on the header is not broken
+     - height goes on nile-data-grid itself so .scroll-container inside shadow DOM scrolls,
+       making position:sticky on <th> work correctly
+     - AI panel is rendered outside the wrapper and anchored via position:relative on the card */
   .nile-chart-card--grid {
-    display: flex;
-    flex-direction: column;
+    position: relative;
+    clip-path: inset(0);
   }
 
-  .nile-chart-card--grid .nile-chart-wrapper {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
+  .nile-chart-card--grid .nile-chart-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   .nile-chart-card--grid .nile-chart-inner {
-    flex: 1;
-    min-height: 0;
+    overflow: visible;
     contain: none;
   }
 
-  .nile-chart-card--grid nile-data-grid {
-    display: block;
-    height: 100%;
-  }
-
   /* ── Default slot (custom chart body only — not named slots) ── */
   slot:not([name])::slotted(*) {
     display: block;

package/dist/src/nile-chart/nile-chart.js

@@ -1657,7 +1657,8 @@ let NileChart = class NileChart extends NileElement {
             case 'grid': {
                 const gridChrome = '--nile-data-grid-radius:0;' +
                     '--nile-data-grid-border-color:transparent;' +
-                    '--nile-data-grid-shadow:none;';
+                    '--nile-data-grid-shadow:none;' +
+                    (config.height ? `height:${config.height};` : '');
                 return html `<nile-data-grid
           class="nile-chart-grid"
           .data=${config.data}
@@ -1698,11 +1699,8 @@ let NileChart = class NileChart extends NileElement {
     render() {
         const isLoading = this.loading || (this.activeConfig?.loading ?? false);
         const isGrid = this.activeConfig?.type === 'grid';
-        const cardStyle = isGrid && this.activeConfig?.height
-            ? `height:${this.activeConfig.height}`
-            : '';
         return html `
-      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}" style=${cardStyle}>
+      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}">
         ${this.renderHeader()}
         <div class="nile-chart-wrapper">
           <div class="nile-chart-inner ${this.activeConfig?.type === 'kpi' ? 'nile-chart-inner--kpi' : ''}">
@@ -1711,9 +1709,10 @@ let NileChart = class NileChart extends NileElement {
             : this.activeConfig
                 ? this.renderChartContent()
                 : html `<slot></slot>`}
-            ${this.renderAiPanel()}
+            ${isGrid ? nothing : this.renderAiPanel()}
           </div>
         </div>
+        ${isGrid ? this.renderAiPanel() : nothing}
         <slot name="footer"></slot>
       </div>
     `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",