@aquera/nile-visualization 2.9.10 → 2.9.11

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

@@ -133,20 +133,20 @@ export const styles = css `
   }
 
   @container (max-width: 400px) {
-    .nile-chart-header {
+    .nile-chart-card:not(.nile-chart-card--kpi) .nile-chart-header {
       padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-lg, var(--ng-spacing-lg));
     }
-    .nile-chart-header.nile-chart-header--compact {
+    .nile-chart-card:not(.nile-chart-card--kpi) .nile-chart-header.nile-chart-header--compact {
       padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
     }
   }
 
   @container (max-width: 280px) {
-    .nile-chart-header {
+    .nile-chart-card:not(.nile-chart-card--kpi) .nile-chart-header {
       padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
       gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
     }
-    .nile-chart-header.nile-chart-header--compact {
+    .nile-chart-card:not(.nile-chart-card--kpi) .nile-chart-header.nile-chart-header--compact {
       padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
     }
   }

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

@@ -1737,7 +1737,7 @@ 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' : ''} ${isLoading ? 'nile-chart-card--loading' : ''}" part="chart-card">
+      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''} ${isLoading ? 'nile-chart-card--loading' : ''} ${this.activeConfig?.type === 'kpi' ? 'nile-chart-card--kpi' : ''}" 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' : ''}" part="chart-inner">

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(1rem, 5cqi + 0.25rem, 36px);
+    --nile-kpi-value-font-size: clamp(22px, 9cqi, 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));
@@ -63,7 +63,14 @@ export const styles = css `
     position: relative;
     box-sizing: border-box;
     overflow: hidden;
-    container-type: inline-size;
+    /* size containment so @container queries can use both width and height */
+    container-type: size;
+    min-height: 120px;
+  }
+
+  /* Gauge variant needs more vertical room so the ring renders at a usable size. */
+  :host([variant='gauge']) {
+    min-height: 200px;
   }
 
   :host([hidden]) {
@@ -75,6 +82,7 @@ export const styles = css `
      element is already flex:1, so it stretches with the host. */
   :host([fit]) {
     height: 100%;
+    min-height: 0;
   }
 
   /* Card / gauge chrome on the host when used alone (inside nile-chart, embed-in-nile-chart skips this). */
@@ -142,6 +150,7 @@ export const styles = css `
     align-items: center;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     flex-wrap: nowrap;
+    flex: 0 0 auto;
     min-width: 0;
     overflow: hidden;
   }
@@ -155,10 +164,7 @@ export const styles = css `
     line-height: 1.2;
     cursor: default;
     white-space: nowrap;
-    min-width: 0;
-    flex: 0 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    flex: 0 0 auto;
   }
 
   .kpi-prefix,
@@ -178,6 +184,21 @@ export const styles = css `
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .kpi-trend-arrow,
+  .kpi-trend-value {
+    flex: 0 0 auto;
+  }
+
+  .kpi-trend-label {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     line-height: 1;
     flex-shrink: 1;
     min-width: 0;
@@ -229,20 +250,17 @@ export const styles = css `
 
   .kpi-sparkline {
     width: 100%;
-    flex: 0 1 48px;
-    min-height: 22px;
+    flex: 1 1 24px;
+    min-height: 24px;
     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. */
+  /* Medium-small: ~280px and below — shrink prefix/suffix only */
   @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 {
@@ -257,8 +275,6 @@ export const styles = css `
   /* 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));
     }
@@ -269,15 +285,161 @@ export const styles = css `
     }
   }
 
-  /* Very small: under ~180px — stack the trend below the value so neither clips. */
+  /* Sparkline is the lowest-priority piece — hide it before the trend so
+     the visible order stays value → trend → sparkline. */
   @container (max-width: 180px) {
+    .kpi-sparkline {
+      display: none;
+    }
+  }
+
+  /* At minimum height (h ≤ 75px and not short-wide) —
+     hide everything except the value and trend. */
+  @container (max-height: 50px) and (max-width: 319.98px) {
+    .kpi-label,
+    .kpi-description,
+    .kpi-sparkline {
+      display: none;
+    }
+
+    :host([variant='gauge']) .kpi {
+      padding: 0;
+    }
+  }
+
+  /* Gauge card is short — collapse padding so the gauge still renders. */
+  @container (max-height: 109.98px) {
+    :host([variant='gauge']) .kpi {
+      padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    }
+  }
+
+  /* Narrow card — keep trend inline next to value. Behavior is the same at
+     any height so the trend doesn't appear/disappear when the card grows
+     taller, only when it grows wider/narrower. The arrow + numeric value
+     stay intact; only the label ellipses when space is tight. */
+  @container (max-width: 320px) {
     .kpi-value-row {
-      flex-wrap: wrap;
-      row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+      flex-direction: row;
+      align-items: center;
+      gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+      overflow: hidden;
     }
 
+    /* Treat arrow + value + label as a single text run that ellipses
+       together: switch the trend from flex to a single inline-block with
+       white-space:nowrap so text-overflow:ellipsis applies across the
+       whole "▲ 14.2% vs last month" string instead of only the label. */
     .kpi-trend {
-      flex-basis: 100%;
+      display: inline-block;
+      flex: 1 1 0;
+      min-width: 0;
+      max-width: 100%;
+      padding-left: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: 1;
+    }
+
+    .kpi-trend-arrow {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .kpi-trend-value,
+    .kpi-trend-label {
+      display: inline;
+      flex: initial;
+      overflow: visible;
+      text-overflow: clip;
+      min-width: 0;
+      white-space: nowrap;
+    }
+  }
+
+  /* Card too short for a clean sparkline — hide it (unless short-wide layout below restores it). */
+  @container (max-height: 70px) {
+    .kpi-sparkline {
+      display: none;
+    }
+  }
+
+  /* Tall — there is enough vertical room, bring the sparkline back even at narrow widths. */
+  @container (min-height: 80px) {
+    .kpi-sparkline {
+      display: block;
+    }
+  }
+
+  /* Short but wide (h ≤ 110, w ≥ 320) — lay out value, trend and sparkline horizontally.
+     Skip the card-variant gauge here so the gauge ring keeps its vertical room. */
+  @container (max-height: 110px) and (min-width: 320px) {
+    :host(:not([variant='gauge'])) .kpi {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: flex-start;
+      gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    }
+
+    .kpi-label,
+    .kpi-description {
+      display: none;
+    }
+
+    .kpi-value-row {
+      flex: 0 0 auto;
+      flex-direction: row;
+      align-items: center;
+      overflow: visible;
+    }
+
+    .kpi-trend {
+      display: inline-flex;
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
+      padding-left: var(--nile-spacing-md, var(--ng-spacing-md));
+    }
+
+    .kpi-trend-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .kpi-sparkline {
+      display: block;
+      flex: 1 1 0;
+      min-width: 0;
+      margin-top: 0;
+      align-self: stretch;
+      height: auto;
+    }
+  }
+
+  @container (max-width: 100px) {
+    .kpi-sparkline {
+      display: none;
+    }
+  }
+
+  /* Constrained both ways — only show the value. */
+    
+
+  @container (max-width: 180px) and (max-height: 70px) {
+   
+    .kpi-description,
+    .kpi-sparkline {
+      display: none;
+    }
+  }
+
+  /* Short but wide — drop description, keep trend (and sparkline) alongside value. */
+  @container (min-width: 180.01px) and (max-height: 85px) {
+    .kpi-description {
+      display: none;
     }
   }
 
@@ -288,13 +450,24 @@ export const styles = css `
     text-align: center;
   }
 
-  .kpi-gauge-container {
+  .kpi-gauge-slot {
+    flex: 1 1 0;
     width: 100%;
-    max-width: 160px;
-    aspect-ratio: 1;
-    flex: 0 1 160px;
-    min-width: 72px;
-    margin: 0 auto;
+    min-width: 0;
+    min-height: 40px;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .kpi-gauge-container {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: block;
+    flex: 0 0 auto;
   }
 
   .kpi--gauge .kpi-value-row {

package/dist/src/nile-kpi-chart/nile-kpi-chart.d.ts

@@ -4,7 +4,7 @@ import NileElement from '../internal/nile-element.js';
 import type { AqConfigType } from '../internal/types/aq-config.type.js';
 export type TrendDirection = 'up' | 'down' | 'neutral';
 export type KpiVariant = 'default' | 'card' | 'gauge' | 'accent';
-export type SparklineType = 'area' | 'line';
+export type SparklineType = 'area' | 'line' | 'column' | 'bar' | 'spline' | 'areaspline' | 'pie' | 'scatter';
 export type KpiValueFormat = 'auto' | 'K' | 'M' | 'B' | 'T' | 'none';
 export type KpiNumberSystem = 'indian' | 'international';
 /** `chart` slice for `<nile-kpi-chart>.config` (discriminated by `type: 'kpi'`). */
@@ -136,6 +136,7 @@ export declare class NileKpiChart extends NileElement {
     private _tipEl;
     private sparklineContainer;
     private gaugeContainer;
+    private gaugeSlot;
     /** Full configuration: `{ chart, aq }` (same convention as other Nile charts). */
     config: NileKpiConfigInputType | null;
     /** Display variant: default (flat), card (bordered container), gauge (Highcharts solid gauge). */
@@ -264,6 +265,12 @@ export declare class NileKpiChart extends NileElement {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;
+    private _lastSparkSize;
+    private _lastGaugeSize;
+    private _gaugeRafScheduled;
+    private _scheduleGaugeSync;
+    private _syncGaugeNow;
+    private syncGaugeChartSize;
     private syncSparklineChartSize;
     private setupResizeObserver;
     private _onSparklineMouseMove;
@@ -278,7 +285,9 @@ export declare class NileKpiChart extends NileElement {
     private _onValueEnter;
     private _onDescEnter;
     private _onLabelEnter;
+    private _onTrendEnter;
     private _onGaugeEnter;
+    private _onTrendKeydown;
     private _onTipLeave;
     private renderTrend;
     render(): TemplateResult;

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

@@ -140,11 +140,18 @@ let NileKpiChart = class NileKpiChart extends NileElement {
          * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
          */
         this.embedInNileChart = false;
+        // ── Chart sizing ─────────────────────────────────────────────────────────
+        this._lastSparkSize = { w: 0, h: 0 };
+        this._lastGaugeSize = { w: 0, h: 0 };
+        this._gaugeRafScheduled = false;
         // ── Sparkline mousemove tooltip ──────────────────────────────────────────
         this._onSparklineMouseMove = (e) => {
             const chart = this.sparklineChart;
             if (!chart || !this.sparklineContainer)
                 return;
+            // Pie uses Highcharts' native tooltip — the x-snap logic below is meaningless for radial layouts.
+            if (this.sparklineType === 'pie')
+                return;
             const series = chart.series[0];
             if (!series?.points?.length)
                 return;
@@ -192,10 +199,29 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             const rect = el.getBoundingClientRect();
             this._showTip(this.label ?? '', rect.left + rect.width / 2, rect.top);
         };
+        this._onTrendEnter = (e) => {
+            const el = e.currentTarget;
+            // Only show a tooltip when the trend is actually clipped/ellipsized.
+            const hasEllipsis = getComputedStyle(el).textOverflow === 'ellipsis';
+            if (!hasEllipsis)
+                return;
+            if (el.scrollWidth <= el.clientWidth + 2)
+                return;
+            const rect = el.getBoundingClientRect();
+            const dir = this.trendDirection;
+            const arrow = dir === 'up' ? '▲' : dir === 'down' ? '▼' : '–';
+            const pct = this.trendValue !== null ? `${Math.abs(this.trendValue).toFixed(1)}%` : '';
+            const text = `${arrow} ${pct}${this.trendLabel ? ' ' + this.trendLabel : ''}`.trim();
+            this._showTip(text, rect.left + rect.width / 2, rect.top);
+        };
         this._onGaugeEnter = (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
             this._showTip(this.getTooltipContent(), rect.left + rect.width / 2, rect.top + rect.height / 2);
         };
+        this._onTrendKeydown = (e) => {
+            if (e.key === 'Escape')
+                this._hideTip();
+        };
         this._onTipLeave = () => {
             this._hideTip();
         };
@@ -623,29 +649,83 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (gaugeProps.some(p => changedProperties.has(p))) {
             if (this.gaugeChart) {
                 this.gaugeChart.update(this.buildGaugeOptions(), true, true);
+                requestAnimationFrame(() => this.syncGaugeChartSize());
             }
             else {
                 this.initGauge();
             }
         }
     }
-    // ── Chart sizing ─────────────────────────────────────────────────────────
+    _scheduleGaugeSync() {
+        if (this._gaugeRafScheduled)
+            return;
+        this._gaugeRafScheduled = true;
+        requestAnimationFrame(() => {
+            this._gaugeRafScheduled = false;
+            this._syncGaugeNow();
+        });
+    }
+    _syncGaugeNow() {
+        if (!this.gaugeContainer || !this.gaugeSlot || this.variant !== 'gauge')
+            return;
+        // Hide the gauge container while measuring the slot
+        const prevDisplay = this.gaugeContainer.style.display;
+        this.gaugeContainer.style.display = 'none';
+        const rect = this.gaugeSlot.getBoundingClientRect();
+        this.gaugeContainer.style.display = prevDisplay;
+        const w = Math.max(1, Math.round(rect.width));
+        const h = Math.max(1, Math.round(rect.height));
+        const size = Math.max(1, Math.min(w, h));
+        // writing its size re-fires the observer.
+        if (size === this._lastGaugeSize.w && this.gaugeChart)
+            return;
+        this._lastGaugeSize = { w: size, h: size };
+        this.gaugeContainer.style.width = `${size}px`;
+        this.gaugeContainer.style.height = `${size}px`;
+        if (!this._hc)
+            return;
+        if (this.gaugeChart) {
+            this.gaugeChart.setSize(size, size, false);
+        }
+        else {
+            this.gaugeChart = this._hc.chart(this.gaugeContainer, this.buildGaugeOptions());
+            this.gaugeChart.setSize(size, size, false);
+        }
+    }
+    syncGaugeChartSize() {
+        // always measure after the layout
+        this._scheduleGaugeSync();
+    }
     syncSparklineChartSize() {
         if (!this.sparklineChart || !this.sparklineContainer)
             return;
         const rect = this.sparklineContainer.getBoundingClientRect();
+        const w = Math.max(1, Math.round(rect.width));
         const h = Math.max(22, Math.round(rect.height));
-        this.sparklineChart.setSize(null, h, false);
+        if (w === this._lastSparkSize.w && h === this._lastSparkSize.h)
+            return;
+        this._lastSparkSize = { w, h };
+        // Rebuild the chart 
+        this.destroySparkline();
+        if (!this._hc)
+            return;
+        this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
+        this.sparklineChart.setSize(w, h, false);
+        this.sparklineContainer.addEventListener('mousemove', this._onSparklineMouseMove);
+        this.sparklineContainer.addEventListener('mouseleave', this._onSparklineMouseLeave);
     }
     setupResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
             this.syncSparklineChartSize();
-            this.gaugeChart?.reflow();
+            this.syncGaugeChartSize();
         });
+        this.resizeObserver.observe(this);
         if (this.sparklineContainer)
             this.resizeObserver.observe(this.sparklineContainer);
         if (this.gaugeContainer)
             this.resizeObserver.observe(this.gaugeContainer);
+        if (this.gaugeSlot)
+            this.resizeObserver.observe(this.gaugeSlot);
     }
     // ── Chart options ────────────────────────────────────────────────────────
     buildSparklineOptions() {
@@ -653,8 +733,37 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         const lineWidth = this.sparklineLineWidth;
         const seriesType = this.sparklineType;
         const topAlpha = Math.round(Math.min(1, Math.max(0, this.sparklineFillOpacity)) * 255).toString(16).padStart(2, '0');
+        // Pie variant — a compact pie with no slice labels / connectors.
+        if (seriesType === 'pie') {
+            const defaults = {
+                chart: { type: 'pie', height: this.sparklineHeight, margin: [0, 0, 0, 0], backgroundColor: 'transparent' },
+                title: { text: undefined },
+                subtitle: { text: undefined },
+                legend: { enabled: false },
+                tooltip: {
+                    enabled: true,
+                    outside: true,
+                    pointFormat: '<b>{point.y}</b> ({point.percentage:.1f}%)',
+                },
+                plotOptions: {
+                    pie: {
+                        size: '100%',
+                        borderWidth: 0,
+                        dataLabels: { enabled: false },
+                        states: { hover: { enabled: true } },
+                        allowPointSelect: false,
+                    },
+                },
+                series: [{ type: 'pie', data: this.sparkline.map((v, i) => ({ y: v, name: `Slice ${i + 1}` })) }],
+                credits: { enabled: false },
+            };
+            return { ...defaults, ...this.options };
+        }
         const plotKey = seriesType;
-        const fillColor = seriesType === 'area'
+        const isAreaLike = seriesType === 'area' || seriesType === 'areaspline';
+        const isBarLike = seriesType === 'column' || seriesType === 'bar';
+        const isScatter = seriesType === 'scatter';
+        const fillColor = isAreaLike
             ? {
                 fillColor: {
                     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -665,6 +774,28 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 },
             }
             : {};
+        const seriesPlotOptions = isBarLike
+            ? {
+                color: brandColor,
+                borderWidth: 0,
+                pointPadding: 0.05,
+                groupPadding: 0.05,
+                states: { hover: { enabled: false } },
+            }
+            : isScatter
+                ? {
+                    color: brandColor,
+                    marker: { enabled: true, radius: Math.max(2, lineWidth) },
+                    states: { hover: { enabled: false } },
+                }
+                : {
+                    marker: { enabled: this.sparklineMarkers },
+                    lineWidth,
+                    lineColor: brandColor,
+                    color: brandColor,
+                    ...fillColor,
+                    states: { hover: { lineWidth } },
+                };
         const defaults = {
             chart: { type: seriesType, height: this.sparklineHeight, margin: [2, 0, 2, 0], backgroundColor: 'transparent' },
             title: { text: undefined },
@@ -674,13 +805,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             legend: { enabled: false },
             tooltip: { enabled: false },
             plotOptions: {
-                [plotKey]: {
-                    marker: { enabled: this.sparklineMarkers },
-                    lineWidth,
-                    lineColor: brandColor,
-                    ...fillColor,
-                    states: { hover: { lineWidth } },
-                },
+                [plotKey]: seriesPlotOptions,
             },
             series: [{ type: seriesType, data: this.sparkline }],
             credits: { enabled: false },
@@ -692,17 +817,22 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         const trackColor = this.gaugeTrackColor || '#E5E7EB';
         const innerRadius = this.gaugeInnerRadius || '80%';
         const outerRadius = this.gaugeOuterRadius || '100%';
-        const labelFontSize = this.formatCssLength(this.gaugeLabelFontSize) ?? '28px';
+        const maxLabelFontPx = (() => {
+            const raw = this.gaugeLabelFontSize;
+            if (typeof raw === 'number' && Number.isFinite(raw))
+                return raw;
+            const m = String(raw).match(/^(\d+(?:\.\d+)?)/);
+            return m ? Number(m[1]) : 28;
+        })();
         const labelColor = this.gaugeLabelColor || '#101828';
         const labelFontWeight = this.gaugeLabelFontWeight ?? 600;
-        const displayValue = typeof this.value !== 'undefined' && this.value !== ''
-            ? (typeof this.value === 'number' ? this.value : this.gaugeValue)
-            : this.gaugeValue;
+        const parsedValue = this.parseNumericValue(this.value);
+        const displayValue = parsedValue != null ? parsedValue : this.gaugeValue;
         return {
             chart: {
                 type: 'solidgauge',
-                height: this.gaugeHeight,
                 margin: [0, 0, 0, 0],
+                spacing: [0, 0, 0, 0],
                 backgroundColor: 'transparent',
             },
             title: { text: undefined },
@@ -735,13 +865,17 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                     dataLabels: {
                         enabled: true,
                         borderWidth: 0,
-                        y: this.gaugeLabelYOffset,
+                        y: 0,
+                        verticalAlign: 'middle',
                         useHTML: true,
                         formatter: (() => {
                             const self = this;
                             return function () {
                                 const fmtResult = self.formatValue(this.y ?? 0);
-                                return `<div style="text-align:center"><span style="font-size:${labelFontSize};font-weight:${labelFontWeight};color:${labelColor}">${self.prefix}${fmtResult.display}${self.suffix}</span></div>`;
+                                const chart = this.series?.chart;
+                                const size = chart ? Math.min(chart.plotWidth || chart.chartWidth || 160, chart.plotHeight || chart.chartHeight || 160) : 160;
+                                const fontPx = Math.max(10, Math.min(maxLabelFontPx, Math.round(size * 0.18)));
+                                return `<div style="text-align:center;line-height:1;"><span style="font-size:${fontPx}px;font-weight:${labelFontWeight};color:${labelColor}">${self.prefix}${fmtResult.display}${self.suffix}</span></div>`;
                             };
                         })(),
                     },
@@ -771,7 +905,11 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroySparkline();
         this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
-        requestAnimationFrame(() => this.syncSparklineChartSize());
+        // Force a reflow after the next layout pass 
+        requestAnimationFrame(() => {
+            this.syncSparklineChartSize();
+            requestAnimationFrame(() => this.syncSparklineChartSize());
+        });
         this.sparklineContainer.addEventListener('mousemove', this._onSparklineMouseMove);
         this.sparklineContainer.addEventListener('mouseleave', this._onSparklineMouseLeave);
         this.emit('nile-chart-ready', { chart: this.sparklineChart });
@@ -783,6 +921,13 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this._hc = await getHighcharts();
         this.destroyGauge();
         this.gaugeChart = this._hc.chart(this.gaugeContainer, this.buildGaugeOptions());
+        // Force the chart to match the container's measured size
+        this._lastGaugeSize = { w: 0, h: 0 };
+        this.syncGaugeChartSize();
+        requestAnimationFrame(() => {
+            this.syncGaugeChartSize();
+            requestAnimationFrame(() => this.syncGaugeChartSize());
+        });
         this.emit('nile-chart-ready', { chart: this.gaugeChart });
     }
     destroySparkline() {
@@ -811,8 +956,19 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             return undefined;
         const dir = this.trendDirection;
         const formatted = Math.abs(this.trendValue).toFixed(1) + '%';
+        const trendAriaLabel = `Trend ${dir === 'up' ? 'up' : dir === 'down' ? 'down' : 'neutral'} ${formatted}${this.trendLabel ? ' ' + this.trendLabel : ''}`.trim();
         return html `
-      <span class="kpi-trend kpi-trend--${dir}">
+      <span
+        class="kpi-trend kpi-trend--${dir}"
+        tabindex="0"
+        role="button"
+        aria-label=${trendAriaLabel}
+        @mouseenter=${this._onTrendEnter}
+        @mouseleave=${this._onTipLeave}
+        @focus=${this._onTrendEnter}
+        @blur=${this._onTipLeave}
+        @keydown=${this._onTrendKeydown}
+      >
         <span class="kpi-trend-arrow">
           ${dir === 'up'
             ? html `<svg viewBox="0 0 12 12"><path d="M6 2.5l4 5H2z"/></svg>`
@@ -820,7 +976,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 ? html `<svg viewBox="0 0 12 12"><path d="M6 9.5l4-5H2z"/></svg>`
                 : html `<svg viewBox="0 0 12 12"><path d="M2 6.5h8" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>`}
         </span>
-        ${formatted}${this.trendLabel ? html ` <span>${this.trendLabel}</span>` : nothing}
+        <span class="kpi-trend-value">${formatted}</span>${this.trendLabel ? html ` <span class="kpi-trend-label">${this.trendLabel}</span>` : nothing}
       </span>
     `;
     }
@@ -837,24 +993,40 @@ let NileKpiChart = class NileKpiChart extends NileElement {
       <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
         ${this.label ? html `<p
           class="kpi-label"
+          tabindex="0"
           @mouseenter=${this._onLabelEnter}
           @mouseleave=${this._onTipLeave}
+          @focus=${this._onLabelEnter}
+          @blur=${this._onTipLeave}
+          @keydown=${this._onTrendKeydown}
         >${this.label}</p>` : nothing}
 
         ${isGauge ? html `
-          <div
-            class="kpi-gauge-container"
-            @mouseenter=${this._onGaugeEnter}
-            @mouseleave=${this._onTipLeave}
-          ></div>
+          <div class="kpi-gauge-slot">
+            <div
+              class="kpi-gauge-container"
+              tabindex="0"
+              role="img"
+              aria-label=${this.getTooltipContent()}
+              @mouseenter=${this._onGaugeEnter}
+              @mouseleave=${this._onTipLeave}
+              @focus=${this._onGaugeEnter}
+              @blur=${this._onTipLeave}
+              @keydown=${this._onTrendKeydown}
+            ></div>
+          </div>
         ` : nothing}
 
         <div class="kpi-value-row">
           ${!isGauge ? html `
             <h2
               class="kpi-value"
+              tabindex=${showTooltip ? '0' : nothing}
               @mouseenter=${showTooltip ? this._onValueEnter : nothing}
               @mouseleave=${showTooltip ? this._onTipLeave : nothing}
+              @focus=${showTooltip ? this._onValueEnter : nothing}
+              @blur=${showTooltip ? this._onTipLeave : nothing}
+              @keydown=${showTooltip ? this._onTrendKeydown : nothing}
             >
               ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${displayValue}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
             </h2>
@@ -866,8 +1038,12 @@ let NileKpiChart = class NileKpiChart extends NileElement {
 
         ${this.description ? html `<p
           class="kpi-description"
+          tabindex="0"
           @mouseenter=${this._onDescEnter}
           @mouseleave=${this._onTipLeave}
+          @focus=${this._onDescEnter}
+          @blur=${this._onTipLeave}
+          @keydown=${this._onTrendKeydown}
         >${this.description}</p>` : nothing}
 
         ${this.sparkline.length && !isGauge ? html `<div class="kpi-sparkline"></div>` : nothing}
@@ -882,6 +1058,9 @@ __decorate([
 __decorate([
     query('.kpi-gauge-container')
 ], NileKpiChart.prototype, "gaugeContainer", void 0);
+__decorate([
+    query('.kpi-gauge-slot')
+], NileKpiChart.prototype, "gaugeSlot", void 0);
 __decorate([
     property({ type: Object })
 ], NileKpiChart.prototype, "config", void 0);

package/package.json

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