@aquera/nile-visualization 1.8.0 → 2.0.0

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

@@ -2,9 +2,17 @@ import { __decorate } from "tslib";
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html, nothing } from 'lit';
 import NileElement from '../internal/nile-element.js';
-import { styles } from './nile-chart.css.js';
+import { styles, tooltipCss } from './nile-chart.css.js';
 import { nileChartConfig } from './nile-chart-config-builder.js';
 import { convertConfig } from '../internal/chart-adapters.js';
+import { deepMerge } from '../internal/utils.js';
+import { initNileChartExporting, getHighcharts } from '../internal/highcharts-provider.js';
+// Start loading exporting/offline-exporting/export-data at module import time.
+// `chart.fullscreen` is attached via a `beforeRender` hook installed by the exporting module's
+// compose step, so if a chart is constructed before the module applies, that instance will have
+// no `fullscreen`. Kicking the load off here gives it a head start; handlers still await it
+// before invoking methods, and viewFullscreen falls back to the DOM Fullscreen API.
+initNileChartExporting();
 import '../nile-bar-chart/index.js';
 import '../nile-pie-chart/index.js';
 import '../nile-trendline-chart/index.js';
@@ -100,9 +108,20 @@ function chartTypeLabel(type) {
         .replace(/-/g, ' ')
         .replace(/\b\w/g, ch => ch.toUpperCase());
 }
+let _headerTooltipStylesInjected = false;
+function ensureHeaderTooltipStyles() {
+    if (_headerTooltipStylesInjected || typeof document === 'undefined')
+        return;
+    const style = document.createElement('style');
+    style.dataset['nilechart'] = '';
+    style.textContent = tooltipCss;
+    document.head.appendChild(style);
+    _headerTooltipStylesInjected = true;
+}
 let NileChart = class NileChart extends NileElement {
     constructor() {
         super(...arguments);
+        this._headerTipEl = null;
         /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
         this.config = null;
         /**
@@ -122,27 +141,60 @@ let NileChart = class NileChart extends NileElement {
          */
         this.chartTypeAttr = '';
         /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
+        this.summary = '';
         /**
-         * When set, fills `chart.type` if the config omits it (same values as `chart.type`, e.g. `stacked`, `pie`).
-         * Usage: `<nile-chart chart-type="pie" />` plus `config.chart` with series data only.
+         * Controls which items appear in the actions menu. All items are opt-in —
+         * only items explicitly set to `true` are shown. Merged with (and takes
+         * priority over) `config.menu`.
+         *
+         * @example
+         * // PNG + CSV only
+         * chart.menu = { enabled: true, downloadPng: true, downloadCsv: true }
          */
-        /** Summary/insight text — shown as the AI panel's opening message when the chat is opened. */
-        this.summary = '';
+        this.menu = null;
         this.activeType = null;
         this.activeConfig = null;
         this.menuOpen = false;
         this.chatOpen = false;
+        this._hcChart = null;
         /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
         this.hasHeaderSlotContent = false;
         /** True when elements are projected into `header-actions` (used to show the header row). */
         this.hasHeaderActionsSlot = false;
         this.handleOutsideClick = (e) => {
-            if (!e.composedPath().includes(this)) {
+            const path = e.composedPath();
+            if (!path.includes(this)) {
                 this.menuOpen = false;
                 this.chatOpen = false;
+                return;
             }
+            if (this.chatOpen) {
+                const root = this.renderRoot;
+                const panel = root.querySelector('.nile-ai-panel-overlay');
+                const trigger = root.querySelector('.nile-ai-trigger');
+                if (!path.some((n) => n === panel || n === trigger)) {
+                    this.chatOpen = false;
+                }
+            }
+        };
+        this.handleChartReady = (e) => {
+            this._hcChart = e.detail?.chart ?? null;
         };
         this.resolvedConfig = null;
+        this._onTitleEnter = (e) => {
+            const el = e.currentTarget;
+            if (el.scrollWidth <= el.clientWidth)
+                return;
+            const rect = el.getBoundingClientRect();
+            this._showHeaderTip(el.textContent ?? '', rect.left + rect.width / 2, rect.top);
+        };
+        this._onSubtitleEnter = (e) => {
+            const el = e.currentTarget;
+            if (el.scrollWidth <= el.clientWidth)
+                return;
+            const rect = el.getBoundingClientRect();
+            this._showHeaderTip(el.textContent ?? '', rect.left + rect.width / 2, rect.top);
+        };
     }
     get effectiveSummary() {
         return this.resolvedConfig?.summary ?? this.summary;
@@ -153,7 +205,14 @@ let NileChart = class NileChart extends NileElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        ensureHeaderTooltipStyles();
+        const tip = document.createElement('div');
+        tip.className = 'nile-chart-header-tooltip';
+        document.body.appendChild(tip);
+        this._headerTipEl = tip;
         document.addEventListener('click', this.handleOutsideClick);
+        this.addEventListener('nile-chart-ready', this.handleChartReady);
+        initNileChartExporting();
         // Pick up config set before element upgrade (e.g. Angular ngAfterViewInit)
         if (this.config && !this.resolvedConfig) {
             this.resolvedConfig = this.resolveConfig(this.config);
@@ -164,6 +223,9 @@ let NileChart = class NileChart extends NileElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('click', this.handleOutsideClick);
+        this.removeEventListener('nile-chart-ready', this.handleChartReady);
+        this._headerTipEl?.remove();
+        this._headerTipEl = null;
     }
     mergeChartTypeFromAttr(chart) {
         const t = this.chartTypeAttr?.trim();
@@ -278,7 +340,8 @@ let NileChart = class NileChart extends NileElement {
     }
     shouldShowHeader() {
         const hasTitles = !!(this.headerTitle || this.headerSubtitle);
-        const hasBuiltinActions = this.aiEnabled || (this.resolvedConfig?.switchableTypes?.length ?? 0) > 0;
+        const menuEnabled = this.resolvedConfig?.menu?.enabled === true || this.menu?.enabled === true;
+        const hasBuiltinActions = this.aiEnabled || (this.resolvedConfig?.switchableTypes?.length ?? 0) > 0 || menuEnabled;
         return (hasTitles ||
             this.hasHeaderSlotContent ||
             this.hasHeaderActionsSlot ||
@@ -286,36 +349,102 @@ let NileChart = class NileChart extends NileElement {
             this.lightDomHasSlot('header-actions') ||
             hasBuiltinActions);
     }
-    renderTypeSwitcher() {
-        const types = this.resolvedConfig?.switchableTypes;
-        if (!types || types.length === 0)
+    buildExportingOptions() {
+        return { exporting: { enabled: true, buttons: { contextButton: { enabled: false } } } };
+    }
+    /** Ensures exporting modules are loaded and the chart's exporting/fullscreen instances exist. */
+    async ensureExporting() {
+        await initNileChartExporting();
+        const chart = this._hcChart;
+        if (chart && !chart.exporting) {
+            const HC = await getHighcharts();
+            HC.fireEvent(chart, 'afterInit');
+        }
+    }
+    async viewFullscreen() {
+        this.menuOpen = false;
+        await this.ensureExporting();
+        if (this._hcChart?.fullscreen?.open) {
+            this._hcChart.fullscreen.open();
+            return;
+        }
+        const target = this.shadowRoot?.querySelector('.nile-chart-card') ?? this;
+        target.requestFullscreen?.();
+    }
+    async printChart() {
+        this.menuOpen = false;
+        await this.ensureExporting();
+        this._hcChart?.print?.();
+    }
+    async exportChart(type) {
+        this.menuOpen = false;
+        await this.ensureExporting();
+        const filename = (this.headerTitle || 'chart').replace(/[^a-z0-9_-]+/gi, '_');
+        this._hcChart?.exportChartLocal?.({ type, filename, local: true });
+    }
+    async downloadCsv() {
+        this.menuOpen = false;
+        await this.ensureExporting();
+        this._hcChart?.downloadCSV?.();
+    }
+    renderActionsMenu() {
+        if (!this.resolvedConfig)
             return nothing;
+        const menuCfg = { ...(this.resolvedConfig.menu ?? {}), ...(this.menu ?? {}) };
+        if (menuCfg.enabled !== true)
+            return nothing;
+        const types = this.resolvedConfig.switchableTypes;
+        const allItems = [
+            ...(this.resolvedConfig.menuItems ?? []),
+            ...(menuCfg.items ?? []),
+        ];
+        const hasChart = !!this._hcChart;
+        const hasAnyItems = !!(types?.length || allItems.length);
         return html `
-      <div class="chart-menu-anchor">
+      <div class="nile-chart-menu-anchor">
         <button
-          class="chart-menu-trigger"
+          type="button"
+          class="nile-chart-menu-trigger"
           aria-haspopup="true"
           aria-expanded=${this.menuOpen ? 'true' : 'false'}
-          aria-label="Change chart type"
-          @click=${this.toggleMenu}
+          aria-label="Chart actions"
+          @click=${(e) => this.toggleMenu(e)}
         >
           <nile-glyph name="options" size="16"></nile-glyph>
         </button>
-        ${this.menuOpen
-            ? html `
-              <div class="chart-menu-dropdown" role="menu" aria-label="Chart type">
-                ${types.map(type => html `
-                    <button
-                      class="chart-menu-item ${type === this.activeType ? 'active' : ''}"
-                      role="menuitem"
-                      @click=${() => this.switchType(type)}
-                    >
-                      ${chartTypeLabel(type)} chart
-                    </button>
-                  `)}
-              </div>
-            `
-            : nothing}
+        ${this.menuOpen && hasAnyItems ? html `
+          <div class="nile-chart-menu-dropdown" role="menu">
+            ${types?.length ? html `
+              ${types.map(type => html `
+                <button type="button" class="nile-chart-menu-item ${type === this.activeType ? 'active' : ''}" role="menuitem" @click=${() => this.switchType(type)}>
+                  ${chartTypeLabel(type)}
+                </button>
+              `)}
+              ${allItems.length ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
+            ` : nothing}
+            ${allItems.map(item => {
+            if (item.type === 'custom') {
+                return html `
+                  ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
+                  <button type="button" class="nile-chart-menu-item" role="menuitem"
+                    @click=${() => { this.menuOpen = false; this.emit('nile-menu-change', { id: item.id }); }}>
+                    ${item.label}
+                  </button>
+                `;
+            }
+            if (!hasChart)
+                return nothing;
+            return html `
+                ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
+                ${item.fullscreen ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.viewFullscreen()}>${item.label ?? 'Fullscreen'}</button>` : nothing}
+                ${item.print ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.printChart()}>${item.label ?? 'Print'}</button>` : nothing}
+                ${item.downloadPng ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/png')}>${item.label ?? 'Download PNG'}</button>` : nothing}
+                ${item.downloadSvg ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/svg+xml')}>${item.label ?? 'Download SVG'}</button>` : nothing}
+                ${item.downloadCsv ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.downloadCsv()}>${item.label ?? 'Download CSV'}</button>` : nothing}
+              `;
+        })}
+          </div>
+        ` : nothing}
       </div>
     `;
     }
@@ -324,16 +453,29 @@ let NileChart = class NileChart extends NileElement {
             return nothing;
         return html `
       <button
-        class="ai-trigger ${this.chatOpen ? 'active' : ''}"
+        class="nile-ai-trigger ${this.chatOpen ? 'active' : ''}"
         aria-label="Ask AI about this chart"
         aria-expanded=${this.chatOpen ? 'true' : 'false'}
         @click=${this.toggleChat}
+        part="ai-trigger"
       >
         <nile-glyph name="smart-code" size="16"></nile-glyph>
       </button>
-      <slot name="ai-trigger-after"></slot>
+      <slot name="nile-ai-trigger-after"></slot>
     `;
     }
+    _showHeaderTip(text, x, y) {
+        if (!this._headerTipEl)
+            return;
+        this._headerTipEl.textContent = text;
+        this._headerTipEl.style.left = `${x}px`;
+        this._headerTipEl.style.top = `${y}px`;
+        this._headerTipEl.style.display = 'block';
+    }
+    _hideHeaderTip() {
+        if (this._headerTipEl)
+            this._headerTipEl.style.display = 'none';
+    }
     renderHeader() {
         if (!this.shouldShowHeader())
             return nothing;
@@ -342,20 +484,20 @@ let NileChart = class NileChart extends NileElement {
         const showDefaultTitles = !this.hasHeaderSlotContent && !!(title || subtitle);
         const headerCompact = !subtitle?.trim();
         return html `
-      <div class="chart-header ${headerCompact ? 'chart-header--compact' : ''}">
-        <div class="chart-header-titles">
+      <div class="nile-chart-header ${headerCompact ? 'nile-chart-header--compact' : ''}">
+        <div class="nile-chart-header-titles">
           <slot name="header" @slotchange=${this.onHeaderSlotChange}></slot>
           ${showDefaultTitles
             ? html `
-                ${title ? html `<p class="chart-header-title">${title}</p>` : nothing}
-                ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
+                ${title ? html `<p class="nile-chart-header-title" @mouseenter=${this._onTitleEnter} @mouseleave=${() => this._hideHeaderTip()}>${title}</p>` : nothing}
+                ${subtitle ? html `<p class="nile-chart-header-subtitle" @mouseenter=${this._onSubtitleEnter} @mouseleave=${() => this._hideHeaderTip()}>${subtitle}</p>` : nothing}
               `
             : nothing}
         </div>
-        <div class="chart-header-actions">
+        <div class="nile-chart-header-actions">
           <slot name="header-actions" @slotchange=${this.onHeaderActionsSlotChange}></slot>
           ${this.renderAiTrigger()}
-          ${this.renderTypeSwitcher()}
+          ${this.renderActionsMenu()}
         </div>
       </div>
     `;
@@ -371,7 +513,7 @@ let NileChart = class NileChart extends NileElement {
         const summaryMessage = summary;
         const welcomeMessage = summary ? '' : (aiConfig?.welcomeMessage ?? '');
         return html `
-      <div class="ai-panel-overlay" ?data-open=${this.chatOpen}>
+      <div class="nile-ai-panel-overlay" ?data-open=${this.chatOpen}>
         <nile-ai-panel
           .placeholder=${aiConfig?.placeholder ?? 'Ask about this chart...'}
           .welcomeMessage=${welcomeMessage}
@@ -385,7 +527,7 @@ let NileChart = class NileChart extends NileElement {
         const config = this.activeConfig;
         // Suppress inner Highcharts title/subtitle — the card header shows them
         const noTitle = { title: { text: undefined }, subtitle: { text: undefined } };
-        const mergedOptions = { ...(config.options ?? {}), ...noTitle };
+        const mergedOptions = deepMerge(deepMerge(config.options ?? {}, noTitle), this.buildExportingOptions());
         switch (config.type) {
             case 'bar':
                 return html `<nile-bar-chart
@@ -542,7 +684,6 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .innerSize=${config.innerSize ?? '50%'}
           .semiCircle=${config.semiCircle ?? false}
-          .semiCircle=${config.semiCircle ?? false}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -1370,6 +1511,7 @@ let NileChart = class NileChart extends NileElement {
         ></nile-xrange-chart>`;
             case 'kpi': {
                 const k = config;
+                const kpiOptions = deepMerge(k.options ?? {}, this.buildExportingOptions());
                 return html `<nile-kpi-chart
           embed-in-nile-chart
           .config=${{
@@ -1429,8 +1571,11 @@ let NileChart = class NileChart extends NileElement {
                         contentGap: k.contentGap,
                         tooltipEnabled: k.tooltipEnabled,
                         loading: k.loading,
-                        options: k.options,
+                        options: kpiOptions,
                         height: k.height,
+                        valueFormat: k.valueFormat,
+                        precision: k.precision,
+                        unit: k.unit,
                     },
                     aq: {
                         chartSubtitle: k.chartSubtitle,
@@ -1442,9 +1587,6 @@ let NileChart = class NileChart extends NileElement {
                 const gridChrome = '--nile-data-grid-radius:0;' +
                     '--nile-data-grid-border-color:transparent;' +
                     '--nile-data-grid-shadow:none;';
-                const gridStyle = config.height
-                    ? `${gridChrome}height:${config.height};`
-                    : gridChrome;
                 return html `<nile-data-grid
           class="nile-chart-grid"
           .data=${config.data}
@@ -1454,9 +1596,9 @@ let NileChart = class NileChart extends NileElement {
           .hoverable=${config.hoverable ?? false}
           .stickyHeader=${config.stickyHeader ?? false}
           .emptyMessage=${config.emptyMessage ?? 'No data'}
-          .loadingMessage=${config.loadingMessage ?? 'Loading\u2026'}
+          .loadingMessage=${config.loadingMessage ?? 'Loading…'}
           .noMatchMessage=${config.noMatchMessage ?? 'No matching rows'}
-          style=${gridStyle}
+          style=${gridChrome}
         ></nile-data-grid>`;
             }
             default: {
@@ -1467,28 +1609,32 @@ let NileChart = class NileChart extends NileElement {
     }
     renderSkeleton() {
         return html `
-      <div class="chart-skeleton" aria-busy="true" aria-label="Loading chart">
-        <div class="chart-skeleton-body">
+      <div class="nile-chart-skeleton" aria-busy="true" aria-label="Loading chart">
+        <div class="nile-chart-skeleton-body">
           ${[78, 55, 91, 42, 68].map(w => html `
-              <div class="chart-skeleton-row">
-                <div class="chart-skeleton-ylabel"></div>
-                <div class="chart-skeleton-bar" style="--w: ${w}%"></div>
+              <div class="nile-chart-skeleton-row">
+                <div class="nile-chart-skeleton-ylabel"></div>
+                <div class="nile-chart-skeleton-bar" style="--w: ${w}%"></div>
               </div>
             `)}
         </div>
-        <div class="chart-skeleton-xaxis-row">
-          ${[0, 1, 2, 3, 4].map(i => html `<div class="chart-skeleton-xlabel" style="--d: ${i * 80}ms"></div>`)}
+        <div class="nile-chart-skeleton-xaxis-row">
+          ${[0, 1, 2, 3, 4].map(i => html `<div class="nile-chart-skeleton-xlabel" style="--d: ${i * 80}ms"></div>`)}
         </div>
       </div>
     `;
     }
     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="chart-card">
+      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}" style=${cardStyle}>
         ${this.renderHeader()}
-        <div class="chart-wrapper">
-          <div class="chart-inner ${this.activeConfig?.type === 'kpi' ? 'chart-inner--kpi' : ''}">
+        <div class="nile-chart-wrapper">
+          <div class="nile-chart-inner ${this.activeConfig?.type === 'kpi' ? 'nile-chart-inner--kpi' : ''}">
             ${isLoading
             ? this.renderSkeleton()
             : this.activeConfig
@@ -1515,6 +1661,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileChart.prototype, "summary", void 0);
+__decorate([
+    property({ type: Object })
+], NileChart.prototype, "menu", void 0);
 __decorate([
     state()
 ], NileChart.prototype, "activeType", void 0);
@@ -1527,6 +1676,9 @@ __decorate([
 __decorate([
     state()
 ], NileChart.prototype, "chatOpen", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "_hcChart", void 0);
 __decorate([
     state()
 ], NileChart.prototype, "hasHeaderSlotContent", void 0);

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, 2.5vw + 0.75rem, 36px);
+    --nile-kpi-value-font-size: clamp(1.25rem, 5cqi + 0.5rem, 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));
@@ -59,8 +59,11 @@ export const styles = css `
     display: flex;
     flex-direction: column;
     width: 100%;
+    min-width: 160px;
     position: relative;
     box-sizing: border-box;
+    overflow: hidden;
+    container-type: inline-size;
   }
 
   :host([hidden]) {
@@ -89,12 +92,29 @@ export const styles = css `
     box-shadow: var(--nile-kpi-card-shadow-hover);
   }
 
+  /* Accent variant — card chrome with a prominent left colour bar. */
+  :host([variant='accent']:not([embed-in-nile-chart])) {
+    --nile-kpi-accent-color: #005EA6;
+    background: var(--nile-kpi-card-bg);
+    border: var(--nile-kpi-card-border-width) solid var(--nile-kpi-card-border-color);
+    border-left: 4px solid var(--nile-kpi-accent-color);
+    border-radius: var(--nile-kpi-card-border-radius);
+    box-shadow: var(--nile-kpi-card-shadow);
+    transition: box-shadow var(--nile-transition-duration-default, var(--ng-transition-duration-default)) ease;
+  }
+
+  :host([variant='accent']:not([embed-in-nile-chart]):hover) {
+    box-shadow: var(--nile-kpi-card-shadow-hover);
+  }
+
   .kpi {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     gap: var(--nile-kpi-content-gap);
     padding: var(--nile-kpi-padding-v) var(--nile-kpi-padding-h);
+    min-width: 0;
+    overflow: hidden;
   }
 
   .kpi-label {
@@ -104,13 +124,20 @@ export const styles = css `
     font-weight: var(--nile-kpi-label-font-weight);
     color: var(--nile-kpi-label-color);
     line-height: 1.4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    width: 100%;
   }
 
   .kpi-value-row {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    min-width: 0;
+    overflow: hidden;
   }
 
   .kpi-value {
@@ -121,6 +148,8 @@ export const styles = css `
     color: var(--nile-kpi-value-color);
     line-height: 1.2;
     cursor: default;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .kpi-prefix,
@@ -141,6 +170,16 @@ export const styles = css `
     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));
     line-height: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  @container (max-width: 240px) {
+    .kpi-trend {
+      display: none;
+    }
   }
 
   .kpi-trend--up {
@@ -176,6 +215,11 @@ export const styles = css `
     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%;
   }
 
   .kpi-sparkline {

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

@@ -3,8 +3,9 @@ import type Highcharts from 'highcharts';
 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';
+export type KpiVariant = 'default' | 'card' | 'gauge' | 'accent';
 export type SparklineType = 'area' | 'line';
+export type KpiValueFormat = 'auto' | 'K' | 'M' | 'B' | 'T' | 'none';
 /** `chart` slice for `<nile-kpi-chart>.config` (discriminated by `type: 'kpi'`). */
 export interface ChartKpiSeparatedPayload {
     type: 'kpi';
@@ -63,6 +64,8 @@ export interface ChartKpiSeparatedPayload {
     loadingText?: string;
     /** Whether the hover tooltip is shown on value / sparkline / gauge (default: true). */
     tooltipEnabled?: boolean;
+    /** Accent bar colour for the 'accent' variant (default: brand blue). */
+    accentColor?: string;
     cardBackground?: string;
     cardBorderColor?: string;
     cardBorderWidth?: string | number;
@@ -86,6 +89,18 @@ export interface ChartKpiSeparatedPayload {
     options?: Highcharts.Options;
     /** Box size when a height is set (host min-height and height). */
     height?: string | number;
+    /** How to abbreviate the display value. 'auto' picks K/M/B/T by magnitude. Default: 'auto'. */
+    valueFormat?: KpiValueFormat;
+    /** Decimal places for the abbreviated value. Auto-selects 0–2 when omitted. */
+    precision?: number;
+    /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
+    locale?: string;
+    /**
+     * Base unit appended after the magnitude prefix — e.g. `'L'` + `valueFormat: 'auto'` on 1500
+     * renders `"1.5KL"` on the card and `"1,500L"` in the tooltip. Use for physical units
+     * (L, g, m, Pa, Hz, B, etc.). For non-unit suffix text (%, /day), use `suffix` instead.
+     */
+    unit?: string;
 }
 /** Separated `{ chart, aq }` input for `<nile-kpi-chart>`. */
 export interface NileKpiConfigInputType {
@@ -196,6 +211,8 @@ export declare class NileKpiChart extends NileElement {
     cardPaddingVertical: string | number;
     cardPaddingHorizontal: string | number;
     contentGap: string | number;
+    /** Accent bar colour for the 'accent' variant. */
+    accentColor: string;
     labelColor: string;
     labelFontSize: string | number;
     labelFontWeight: string | number;
@@ -210,6 +227,14 @@ export declare class NileKpiChart extends NileElement {
     loading: boolean;
     /** Highcharts options override for the sparkline or gauge. */
     options: Highcharts.Options;
+    /** How to abbreviate the numeric value. 'auto' picks K/M/B/T by magnitude. Default: 'auto'. */
+    valueFormat: KpiValueFormat;
+    /** Base unit combined with the magnitude prefix (e.g. 'L' → "1.5KL"). */
+    unit: string;
+    /** Decimal places for the abbreviated value. null = auto (0–2 by magnitude). */
+    precision: number | null;
+    /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
+    locale: string;
     /**
      * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
      */
@@ -223,6 +248,7 @@ export declare class NileKpiChart extends NileElement {
     private formatTooltipNumber;
     private inferSparklineTooltipScale;
     private getTooltipContent;
+    private formatValue;
     private applyConfig;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -240,6 +266,8 @@ export declare class NileKpiChart extends NileElement {
     private destroyGauge;
     private destroyCharts;
     private _onValueEnter;
+    private _onDescEnter;
+    private _onLabelEnter;
     private _onGaugeEnter;
     private _onTipLeave;
     private renderTrend;