@aquera/nile-visualization 2.9.0 → 2.9.2

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

@@ -1707,10 +1707,10 @@ let NileChart = class NileChart extends NileElement {
         const isLoading = this.loading || (this.activeConfig?.loading ?? false);
         const isGrid = this.activeConfig?.type === 'grid';
         return html `
-      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}">
+      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}" part="chart-card">
         ${this.renderHeader()}
         <div class="nile-chart-wrapper">
-          <div class="nile-chart-inner ${this.activeConfig?.type === 'kpi' ? 'nile-chart-inner--kpi' : ''} ${this.activeConfig?.type === 'filter' ? 'nile-chart-inner--filter' : ''}">
+          <div class="nile-chart-inner ${this.activeConfig?.type === 'kpi' ? 'nile-chart-inner--kpi' : ''} ${this.activeConfig?.type === 'filter' ? 'nile-chart-inner--filter' : ''}" part="chart-inner">
             ${isLoading
             ? this.renderSkeleton()
             : this.activeConfig

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

@@ -47,7 +47,7 @@ export const styles = css `
     --nile-kpi-label-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     --nile-kpi-label-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     --nile-kpi-label-font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    --nile-kpi-value-font-size: clamp(1.25rem, 5cqi + 0.5rem, 36px);
+    --nile-kpi-value-font-size: clamp(1rem, 5cqi + 0.25rem, 36px);
     --nile-kpi-value-color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     --nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
     --nile-kpi-prefix-suffix-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
@@ -111,13 +111,17 @@ export const styles = css `
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    gap: var(--nile-kpi-content-gap);
+    /* gap: var(--nile-kpi-content-gap); */
     padding: var(--nile-kpi-padding-v) var(--nile-kpi-padding-h);
     min-width: 0;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
     overflow: hidden;
   }
 
   .kpi-label {
+    display: block;
     margin: 0;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-kpi-label-font-size);
@@ -129,6 +133,8 @@ export const styles = css `
     text-overflow: ellipsis;
     min-width: 0;
     width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
   }
 
   .kpi-value-row {
@@ -149,7 +155,10 @@ export const styles = css `
     line-height: 1.2;
     cursor: default;
     white-space: nowrap;
-    flex-shrink: 0;
+    min-width: 0;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .kpi-prefix,
@@ -204,16 +213,18 @@ export const styles = css `
   }
 
   .kpi-description {
+    display: block;
     margin: 0;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-kpi-description-font-size);
     color: var(--nile-kpi-description-color);
     line-height: 1.5;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     min-width: 0;
     width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
   }
 
   .kpi-sparkline {
@@ -223,6 +234,53 @@ export const styles = css `
     margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
+  /* ── Container queries: scale down for narrow cards ── */
+
+  /* Medium-small: ~280px and below — tighten padding, shrink prefix/suffix. */
+  @container (max-width: 280px) {
+    :host {
+      --nile-kpi-padding-v: var(--nile-spacing-lg, var(--ng-spacing-lg));
+      --nile-kpi-padding-h: var(--nile-spacing-xl, var(--ng-spacing-xl));
+      --nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+      --nile-kpi-label-font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    }
+
+    .kpi-value-row {
+      gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    }
+
+    .kpi-trend {
+      padding: 0;
+    }
+  }
+
+  /* Small: ~220px and below — tighten further; description/sparkline stay visible. */
+  @container (max-width: 220px) {
+    :host {
+      --nile-kpi-padding-v: var(--nile-spacing-md, var(--ng-spacing-md));
+      --nile-kpi-padding-h: var(--nile-spacing-lg, var(--ng-spacing-lg));
+      --nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+      --nile-kpi-description-font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    }
+
+    .kpi-sparkline {
+      flex-basis: 32px;
+      min-height: 18px;
+    }
+  }
+
+  /* Very small: under ~180px — stack the trend below the value so neither clips. */
+  @container (max-width: 180px) {
+    .kpi-value-row {
+      flex-wrap: wrap;
+      row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    }
+
+    .kpi-trend {
+      flex-basis: 100%;
+    }
+  }
+
   /* ── Gauge variant ── */
 
   .kpi--gauge {

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

@@ -564,8 +564,6 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (aq) {
             if (aq.chartTitle != null)
                 this.label = aq.chartTitle;
-            if (aq.chartSubtitle != null)
-                this.description = aq.chartSubtitle;
         }
     }
     // ── Lifecycle ────────────────────────────────────────────────────────────

package/package.json

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