@aquera/nile-visualization 0.7.0 → 0.9.0

package/dist/src/index.d.ts

@@ -100,3 +100,5 @@ export { NileWidgetViewer } from './nile-widget-viewer/index.js';
 export type { NileWidgetConfig, NileWidgetChartConfig, NileWidgetKpiConfig, WidgetLayout, } from './nile-widget-viewer/index.js';
 export { NileDashboardViewer } from './nile-dashboard-viewer/index.js';
 export type { NileDashboardConfig } from './nile-dashboard-viewer/index.js';
+export { NileExecutiveSummary } from './nile-executive-summary/index.js';
+export type { NileExecutiveSummaryConfig } from './nile-executive-summary/index.js';

package/dist/src/index.js

@@ -54,4 +54,5 @@ export { NileAiSender } from './nile-ai-sender/index.js';
 export { NileAiPanel } from './nile-ai-panel/index.js';
 export { NileWidgetViewer } from './nile-widget-viewer/index.js';
 export { NileDashboardViewer } from './nile-dashboard-viewer/index.js';
+export { NileExecutiveSummary } from './nile-executive-summary/index.js';
 //# sourceMappingURL=index.js.map

package/dist/src/nile-ai-panel/nile-ai-panel.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import NileElement from '../internal/nile-element.js';
 import { styles } from './nile-ai-panel.css.js';
 import '../nile-ai-sender/index.js';
@@ -87,12 +88,12 @@ let NileAiPanel = class NileAiPanel extends NileElement {
         return html `
       <div class="messages">
         ${this.welcomeMessage
-            ? html `<div class="message message--assistant">${this.welcomeMessage}</div>`
+            ? html `<div class="message message--assistant">${unsafeHTML(this.welcomeMessage)}</div>`
             : nothing}
         ${this.summaryMessage
-            ? html `<div class="message message--summary">${this.summaryMessage}</div>`
+            ? html `<div class="message message--summary">${unsafeHTML(this.summaryMessage)}</div>`
             : nothing}
-        ${this.messages.map(m => html `<div class="message message--${m.role}">${m.text}</div>`)}
+        ${this.messages.map(m => html `<div class="message message--${m.role}">${unsafeHTML(m.text)}</div>`)}
         ${this.loading
             ? html `<div class="typing">
               <span class="typing-dot"></span>

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

@@ -333,5 +333,103 @@ export const styles = css `
   .ai-panel-overlay[data-open] {
     transform: translateY(0);
   }
+
+  /* ── Skeleton loader (matches nile-skeleton-loader animation style) ── */
+
+  :host([loading]) .chart-card {
+    pointer-events: none;
+  }
+
+  .chart-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: var(--nile-spacing-3xl, 24px) var(--nile-spacing-3xl, 24px) var(--nile-spacing-xl, 16px);
+    min-height: var(--nile-chart-skeleton-height, 300px);
+  }
+
+  .chart-skeleton-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    flex: 1;
+    gap: var(--nile-spacing-xl, 14px);
+    padding-left: 44px;
+    position: relative;
+  }
+
+  /* Vertical y-axis rule */
+  .chart-skeleton-body::before {
+    content: '';
+    position: absolute;
+    left: 34px;
+    top: 4px;
+    bottom: 4px;
+    width: 2px;
+    border-radius: 1px;
+    background: var(--nile-colors-neutral-400, #e5e7eb);
+  }
+
+  .chart-skeleton-row {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, 8px);
+    height: 24px;
+  }
+
+  .chart-skeleton-ylabel {
+    width: 26px;
+    height: 10px;
+    border-radius: 3px;
+    flex-shrink: 0;
+    background: var(--nile-colors-neutral-400, #e5e7eb);
+    animation: nile-skeleton-blink 1.2s ease-in-out infinite;
+  }
+
+  .chart-skeleton-bar {
+    height: 20px;
+    width: var(--w, 60%);
+    border-radius: 0 3px 3px 0;
+    background: var(--nile-colors-neutral-400, #e5e7eb);
+    animation: nile-skeleton-blink 1.2s ease-in-out infinite;
+  }
+
+  /* Staggered wave across the bars */
+  .chart-skeleton-row:nth-child(1) .chart-skeleton-bar { animation-delay: 0ms; }
+  .chart-skeleton-row:nth-child(2) .chart-skeleton-bar { animation-delay: 100ms; }
+  .chart-skeleton-row:nth-child(3) .chart-skeleton-bar { animation-delay: 200ms; }
+  .chart-skeleton-row:nth-child(4) .chart-skeleton-bar { animation-delay: 300ms; }
+  .chart-skeleton-row:nth-child(5) .chart-skeleton-bar { animation-delay: 400ms; }
+
+  /* Horizontal x-axis labels row */
+  .chart-skeleton-xaxis-row {
+    display: flex;
+    justify-content: space-around;
+    padding-left: 44px;
+    margin-top: var(--nile-spacing-xl, 14px);
+  }
+
+  .chart-skeleton-xlabel {
+    height: 10px;
+    width: 30px;
+    border-radius: 3px;
+    background: var(--nile-colors-neutral-400, #e5e7eb);
+    animation: nile-skeleton-blink 1.2s ease-in-out infinite;
+    animation-delay: var(--d, 0ms);
+  }
+
+  @keyframes nile-skeleton-blink {
+    0%, 100% { opacity: 0.5; }
+    50%       { opacity: 1; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chart-skeleton-bar,
+    .chart-skeleton-ylabel,
+    .chart-skeleton-xlabel {
+      animation: none;
+      opacity: 0.7;
+    }
+  }
 `;
 //# sourceMappingURL=nile-chart.css.js.map

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

@@ -53,6 +53,17 @@ export declare class NileChart extends NileElement {
     static styles: CSSResultGroup;
     /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
     config: NileChartConfig | NileChartConfigInputType | null;
+    /**
+     * When true, hides the chart and shows a skeleton bar-chart loader.
+     * Set to false once data is ready to reveal the chart.
+     *
+     * @example
+     * ```js
+     * chart.loading = true;
+     * fetchData().then(data => { chart.config = buildConfig(data); chart.loading = false; });
+     * ```
+     */
+    loading: boolean;
     /**
      * 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.
@@ -108,6 +119,7 @@ export declare class NileChart extends NileElement {
     private renderHeader;
     private renderAiPanel;
     private renderChartContent;
+    private renderSkeleton;
     render(): TemplateResult;
 }
 declare global {

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

@@ -103,6 +103,17 @@ let NileChart = class NileChart extends NileElement {
         super(...arguments);
         /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
         this.config = null;
+        /**
+         * When true, hides the chart and shows a skeleton bar-chart loader.
+         * Set to false once data is ready to reveal the chart.
+         *
+         * @example
+         * ```js
+         * chart.loading = true;
+         * fetchData().then(data => { chart.config = buildConfig(data); chart.loading = false; });
+         * ```
+         */
+        this.loading = false;
         /**
          * 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.
@@ -887,16 +898,35 @@ 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">
+          ${[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>
+            `)}
+        </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>
+      </div>
+    `;
+    }
     render() {
+        const isLoading = this.loading || (this.activeConfig?.loading ?? false);
         return html `
       <div class="chart-card">
         ${this.renderHeader()}
         <div class="chart-wrapper">
-          <div class="chart-inner">
-          <div
-            class="chart-inner ${this.activeConfig?.type === 'kpi' ? 'chart-inner--kpi' : ''}"
-          >
-            ${this.activeConfig ? this.renderChartContent() : html `<slot></slot>`}
+          <div class="chart-inner ${this.activeConfig?.type === 'kpi' ? 'chart-inner--kpi' : ''}">
+            ${isLoading
+            ? this.renderSkeleton()
+            : this.activeConfig
+                ? this.renderChartContent()
+                : html `<slot></slot>`}
             ${this.renderAiPanel()}
           </div>
         </div>
@@ -909,6 +939,9 @@ NileChart.styles = styles;
 __decorate([
     property({ type: Object })
 ], NileChart.prototype, "config", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChart.prototype, "loading", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-type' })
 ], NileChart.prototype, "chartTypeAttr", void 0);

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.css.js

@@ -15,7 +15,6 @@ export const styles = css `
   }
 
   .dashboard-cell {
-    overflow: hidden;
     min-height: 0;
     min-width: 0;
   }

package/dist/src/nile-executive-summary/index.d.ts

@@ -0,0 +1,2 @@
+export { NileExecutiveSummary } from './nile-executive-summary.js';
+export type { NileExecutiveSummaryConfig } from './nile-executive-summary-config.js';

package/dist/src/nile-executive-summary/index.js

@@ -0,0 +1,2 @@
+export { NileExecutiveSummary } from './nile-executive-summary.js';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-executive-summary/nile-executive-summary-config.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Configuration interface for the nile-executive-summary component.
+ * Assign to the component's `config` property via JavaScript.
+ *
+ * @example
+ * ```js
+ * const el = document.querySelector('nile-executive-summary');
+ * el.config = {
+ *   summary: '<p>Q1 revenue grew <strong>23%</strong> YoY...</p>',
+ *   buttonLabel: 'View Summary',
+ *   drawerLabel: 'AI Executive Summary',
+ * };
+ * ```
+ */
+export interface NileExecutiveSummaryConfig {
+    /** Text or HTML string displayed with the typewriter effect inside the drawer. */
+    summary: string;
+    /** Label rendered on the built-in trigger nile-button. Default: 'Executive Summary' */
+    buttonLabel?: string;
+    /**
+     * Variant forwarded to the internal nile-button. Default: 'primary'
+     * Mirrors nile-button's `variant` property.
+     */
+    buttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'caution' | 'ghost' | 'destructive' | 'secondary-grey' | 'secondary-blue';
+    /** Title displayed in the drawer header. Default: 'Executive Summary' */
+    drawerLabel?: string;
+    /** Milliseconds per character for the typing animation. Default: 30 */
+    typingSpeed?: number;
+    /** Close the drawer when the user presses Escape. Default: true */
+    closeOnEscape?: boolean;
+    /** Prevent the drawer from closing when the overlay is clicked. Default: false */
+    preventOverlayClose?: boolean;
+}

package/dist/src/nile-executive-summary/nile-executive-summary-config.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {};
+//# sourceMappingURL=nile-executive-summary-config.js.map

package/dist/src/nile-executive-summary/nile-executive-summary.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-executive-summary/nile-executive-summary.css.js

@@ -0,0 +1,196 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    display: inline-block;
+    position: relative;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  /* ─── Trigger button ───────────────────────────────────────────────────── */
+
+  .es-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: var(--executive-summary-btn-padding, 8px 14px);
+    border: none;
+    border-radius: var(--executive-summary-btn-radius, var(--nile-radius-base-standard, 4px));
+    background-color: var(--executive-summary-btn-bg, var(--nile-colors-primary-600, #0052a3));
+    color: var(--executive-summary-btn-color, var(--nile-colors-white-base, #fff));
+    font-family: var(--nile-font-family-body, sans-serif);
+    font-size: var(--nile-type-scale-3, 14px);
+    font-weight: 500;
+    line-height: 1.4;
+    cursor: pointer;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .es-trigger:hover {
+    background-color: var(--executive-summary-btn-bg-hover, var(--nile-colors-primary-700, #003d7a));
+  }
+
+  .es-trigger:focus-visible {
+    box-shadow: 0 0 0 3px var(--nile-colors-primary-200, rgba(0, 82, 163, 0.3));
+  }
+
+  .es-trigger:active {
+    background-color: var(--executive-summary-btn-bg-active, var(--nile-colors-primary-800, #002e5b));
+  }
+
+  /* ─── Backdrop wrapper (fixed, full viewport) ──────────────────────────── */
+
+  .es-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    z-index: var(--executive-summary-z-index, 700);
+  }
+
+  /* ─── Overlay ──────────────────────────────────────────────────────────── */
+
+  .es-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--executive-summary-overlay-color, hsl(240 3.8% 46.1% / 33%));
+    pointer-events: all;
+  }
+
+  /* ─── Drawer panel ─────────────────────────────────────────────────────── */
+
+  .es-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--executive-summary-size, 480px);
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    background-color: var(--nile-colors-white-base, #fff);
+    box-shadow: var(
+      --executive-summary-shadow,
+      var(
+        --nile-box-shadow-2,
+        0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+        0px 8px 8px -4px rgba(16, 24, 40, 0.03)
+      )
+    );
+    pointer-events: all;
+    outline: none;
+  }
+
+  /* ─── Header ───────────────────────────────────────────────────────────── */
+
+  .es-header {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: var(--executive-summary-header-spacing, 16px 20px);
+    border-bottom: 1px solid var(--nile-colors-neutral-100, #e5e7eb);
+  }
+
+  .es-title {
+    flex: 1 1 auto;
+    margin: 0;
+    font-family: var(--nile-font-family-body, sans-serif);
+    font-size: var(--nile-font-size-rem-small, 16px);
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--nile-colors-dark-900, #111827);
+  }
+
+  /* ─── Close button ─────────────────────────────────────────────────────── */
+
+  .es-close {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    background: none;
+    border-radius: var(--nile-radius-sm, 4px);
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, #374151);
+    transition: background-color 0.15s ease;
+    margin-left: 8px;
+  }
+
+  .es-close:hover {
+    background-color: var(--nile-colors-neutral-50, #f3f4f6);
+  }
+
+  .es-close:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, #0052a3);
+    outline-offset: 1px;
+  }
+
+  .es-close svg {
+    width: 18px;
+    height: 18px;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* ─── Body ─────────────────────────────────────────────────────────────── */
+
+  .es-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--executive-summary-body-spacing, 20px);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* ─── Typed text ───────────────────────────────────────────────────────── */
+
+  .es-typed-text {
+    font-family: var(--nile-font-family-body, sans-serif);
+    font-size: var(--nile-type-scale-3, 14px);
+    line-height: 1.7;
+    color: var(--nile-colors-dark-900, #111827);
+    word-break: break-word;
+  }
+
+@media (forced-colors: active) {
+    .es-panel {
+      border: 1px solid ButtonText;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-executive-summary.css.js.map

package/dist/src/nile-executive-summary/nile-executive-summary.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import type { NileExecutiveSummaryConfig } from './nile-executive-summary-config.js';
+/**
+ * Nile Executive Summary component.
+ *
+ * @tag nile-executive-summary
+ *
+ * @summary A self-contained drawer component with a built-in trigger button.
+ * Place it anywhere — clicking the button slides in a right-side drawer that
+ * displays summary content (plain text or HTML) with a typewriter animation.
+ * Configured entirely via the `config` JS property.
+ *
+ * @event nile-show         - Emitted when the drawer starts opening.
+ * @event nile-after-show   - Emitted when the drawer is fully open and typing begins.
+ * @event nile-hide         - Emitted when the drawer starts closing.
+ * @event nile-after-hide   - Emitted when the drawer is fully closed.
+ * @event nile-typing-complete - Emitted when the typewriter animation finishes.
+ * @event nile-init         - Emitted when the component connects to the DOM.
+ * @event nile-destroy      - Emitted when the component disconnects from the DOM.
+ *
+ * @csspart base    - Root wrapper (contains trigger + drawer).
+ * @csspart trigger - The built-in button that opens the drawer.
+ * @csspart overlay - The dim overlay behind the panel.
+ * @csspart panel   - The drawer panel.
+ * @csspart header  - The drawer header.
+ * @csspart title   - The drawer title.
+ * @csspart close   - The close button.
+ * @csspart body    - The drawer body containing the typed summary.
+ *
+ * @cssproperty --executive-summary-size           - Drawer width. Default: 480px.
+ * @cssproperty --executive-summary-header-spacing - Header padding. Default: 16px 20px.
+ * @cssproperty --executive-summary-body-spacing   - Body padding. Default: 20px.
+ * @cssproperty --executive-summary-z-index        - Z-index of the drawer. Default: 700.
+ * @cssproperty --executive-summary-overlay-color  - Overlay background colour.
+ * @cssproperty --executive-summary-btn-bg         - Trigger button background.
+ * @cssproperty --executive-summary-btn-color      - Trigger button text colour.
+ * @cssproperty --executive-summary-btn-radius     - Trigger button border-radius.
+ */
+export declare class NileExecutiveSummary extends NileElement {
+    static styles: CSSResultGroup;
+    private typingTimer;
+    private keyDownHandler;
+    private originalTrigger;
+    private scrollLockActive;
+    private backdrop;
+    private panel;
+    private overlay;
+    /**
+     * Full configuration. Assign via JavaScript — all fields are optional except `summary`.
+     *
+     * @example
+     * ```js
+     * el.config = {
+     *   summary: '<p>Q1 revenue grew <strong>23%</strong>.</p>',
+     *   buttonLabel: 'View Summary',
+     *   drawerLabel: 'AI Executive Summary',
+     *   typingSpeed: 20,
+     * };
+     * ```
+     */
+    config: NileExecutiveSummaryConfig | null;
+    /**
+     * Whether the drawer is currently open.
+     * Can be set programmatically; use `show()` / `hide()` for animated transitions.
+     */
+    open: boolean;
+    /** @internal Characters revealed so far during typing. */
+    private displayedText;
+    /** @internal Whether typing is still in progress (drives cursor visibility). */
+    private isTyping;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private addKeyListener;
+    private removeKeyListener;
+    private handleKeyDown;
+    private lockScroll;
+    private unlockScroll;
+    private animatePanel;
+    private animateOverlay;
+    private requestClose;
+    private startTyping;
+    private stopTyping;
+    /** Opens the drawer with animation. Resolves when the animation completes. */
+    show(): Promise<void>;
+    /** Closes the drawer with animation. Resolves when the animation completes. */
+    hide(): Promise<void>;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-executive-summary': NileExecutiveSummary;
+    }
+}

package/dist/src/nile-executive-summary/nile-executive-summary.js

@@ -0,0 +1,308 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import NileElement from '../internal/nile-element.js';
+import { styles } from './nile-executive-summary.css.js';
+/**
+ * Nile Executive Summary component.
+ *
+ * @tag nile-executive-summary
+ *
+ * @summary A self-contained drawer component with a built-in trigger button.
+ * Place it anywhere — clicking the button slides in a right-side drawer that
+ * displays summary content (plain text or HTML) with a typewriter animation.
+ * Configured entirely via the `config` JS property.
+ *
+ * @event nile-show         - Emitted when the drawer starts opening.
+ * @event nile-after-show   - Emitted when the drawer is fully open and typing begins.
+ * @event nile-hide         - Emitted when the drawer starts closing.
+ * @event nile-after-hide   - Emitted when the drawer is fully closed.
+ * @event nile-typing-complete - Emitted when the typewriter animation finishes.
+ * @event nile-init         - Emitted when the component connects to the DOM.
+ * @event nile-destroy      - Emitted when the component disconnects from the DOM.
+ *
+ * @csspart base    - Root wrapper (contains trigger + drawer).
+ * @csspart trigger - The built-in button that opens the drawer.
+ * @csspart overlay - The dim overlay behind the panel.
+ * @csspart panel   - The drawer panel.
+ * @csspart header  - The drawer header.
+ * @csspart title   - The drawer title.
+ * @csspart close   - The close button.
+ * @csspart body    - The drawer body containing the typed summary.
+ *
+ * @cssproperty --executive-summary-size           - Drawer width. Default: 480px.
+ * @cssproperty --executive-summary-header-spacing - Header padding. Default: 16px 20px.
+ * @cssproperty --executive-summary-body-spacing   - Body padding. Default: 20px.
+ * @cssproperty --executive-summary-z-index        - Z-index of the drawer. Default: 700.
+ * @cssproperty --executive-summary-overlay-color  - Overlay background colour.
+ * @cssproperty --executive-summary-btn-bg         - Trigger button background.
+ * @cssproperty --executive-summary-btn-color      - Trigger button text colour.
+ * @cssproperty --executive-summary-btn-radius     - Trigger button border-radius.
+ */
+let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.typingTimer = null;
+        this.originalTrigger = null;
+        this.scrollLockActive = false;
+        /**
+         * Full configuration. Assign via JavaScript — all fields are optional except `summary`.
+         *
+         * @example
+         * ```js
+         * el.config = {
+         *   summary: '<p>Q1 revenue grew <strong>23%</strong>.</p>',
+         *   buttonLabel: 'View Summary',
+         *   drawerLabel: 'AI Executive Summary',
+         *   typingSpeed: 20,
+         * };
+         * ```
+         */
+        this.config = null;
+        /**
+         * Whether the drawer is currently open.
+         * Can be set programmatically; use `show()` / `hide()` for animated transitions.
+         */
+        this.open = false;
+        /** @internal Characters revealed so far during typing. */
+        this.displayedText = '';
+        /** @internal Whether typing is still in progress (drives cursor visibility). */
+        this.isTyping = false;
+    }
+    // ─── Lifecycle ─────────────────────────────────────────────────────────────
+    connectedCallback() {
+        super.connectedCallback();
+        this.keyDownHandler = this.handleKeyDown.bind(this);
+        this.emit('nile-init');
+    }
+    firstUpdated() {
+        this.backdrop.hidden = !this.open;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopTyping();
+        this.removeKeyListener();
+        this.unlockScroll();
+        this.emit('nile-destroy');
+    }
+    // ─── Keyboard / scroll ─────────────────────────────────────────────────────
+    addKeyListener() {
+        if (this.config?.closeOnEscape ?? true) {
+            document.addEventListener('keydown', this.keyDownHandler);
+        }
+    }
+    removeKeyListener() {
+        document.removeEventListener('keydown', this.keyDownHandler);
+    }
+    handleKeyDown(e) {
+        if (this.open && e.key === 'Escape') {
+            e.stopPropagation();
+            this.requestClose('keyboard');
+        }
+    }
+    lockScroll() {
+        if (!this.scrollLockActive) {
+            document.body.style.overflow = 'hidden';
+            this.scrollLockActive = true;
+        }
+    }
+    unlockScroll() {
+        if (this.scrollLockActive) {
+            document.body.style.overflow = '';
+            this.scrollLockActive = false;
+        }
+    }
+    // ─── Animation helpers ──────────────────────────────────────────────────────
+    async animatePanel(show) {
+        const from = show ? { opacity: '0', translate: '100%' } : { opacity: '1', translate: '0' };
+        const to = show ? { opacity: '1', translate: '0' } : { opacity: '0', translate: '100%' };
+        await this.panel.animate([from, to], { duration: 250, easing: 'ease', fill: 'forwards' }).finished;
+    }
+    async animateOverlay(show) {
+        const from = show ? { opacity: '0' } : { opacity: '1' };
+        const to = show ? { opacity: '1' } : { opacity: '0' };
+        await this.overlay.animate([from, to], { duration: 250, fill: 'forwards' }).finished;
+    }
+    // ─── Close request ──────────────────────────────────────────────────────────
+    requestClose(source) {
+        const preventOverlayClose = this.config?.preventOverlayClose ?? false;
+        if ((source === 'overlay' || source === 'keyboard') && preventOverlayClose)
+            return;
+        const ev = this.emit('nile-request-close', { cancelable: true, detail: { source } });
+        if (ev.defaultPrevented) {
+            // Deny-close jiggle
+            this.panel.animate([{ scale: '1' }, { scale: '1.01' }, { scale: '1' }], { duration: 250 });
+            return;
+        }
+        this.hide();
+    }
+    // ─── Typing animation ───────────────────────────────────────────────────────
+    startTyping() {
+        this.stopTyping();
+        this.displayedText = '';
+        this.isTyping = true;
+        const text = this.config?.summary ?? '';
+        const speed = this.config?.typingSpeed ?? 30;
+        let index = 0;
+        const tick = () => {
+            if (index < text.length) {
+                this.displayedText += text[index++];
+                this.typingTimer = setTimeout(tick, speed);
+            }
+            else {
+                this.isTyping = false;
+                this.emit('nile-typing-complete');
+            }
+        };
+        tick();
+    }
+    stopTyping() {
+        if (this.typingTimer !== null) {
+            clearTimeout(this.typingTimer);
+            this.typingTimer = null;
+        }
+        this.isTyping = false;
+    }
+    // ─── Open / close ───────────────────────────────────────────────────────────
+    /** Opens the drawer with animation. Resolves when the animation completes. */
+    async show() {
+        if (this.open)
+            return;
+        this.open = true;
+        this.emit('nile-show');
+        this.addKeyListener();
+        this.lockScroll();
+        this.originalTrigger = document.activeElement;
+        this.backdrop.hidden = false;
+        await Promise.all([this.animatePanel(true), this.animateOverlay(true)]);
+        requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));
+        this.emit('nile-after-show');
+        this.startTyping();
+    }
+    /** Closes the drawer with animation. Resolves when the animation completes. */
+    async hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.emit('nile-hide');
+        this.removeKeyListener();
+        this.stopTyping();
+        this.displayedText = '';
+        this.unlockScroll();
+        await Promise.all([this.animatePanel(false), this.animateOverlay(false)]);
+        this.backdrop.hidden = true;
+        // Reset animation fill state for next open
+        this.panel.getAnimations().forEach(a => a.cancel());
+        this.overlay.getAnimations().forEach(a => a.cancel());
+        // Restore focus to original trigger
+        const trigger = this.originalTrigger;
+        if (typeof trigger?.focus === 'function')
+            setTimeout(() => trigger.focus());
+        this.emit('nile-after-hide');
+    }
+    // ─── Render ─────────────────────────────────────────────────────────────────
+    render() {
+        const buttonLabel = this.config?.buttonLabel ?? 'Executive Summary';
+        const buttonVariant = this.config?.buttonVariant ?? 'primary';
+        const drawerLabel = this.config?.drawerLabel ?? 'Executive Summary';
+        return html `
+      <div part="base">
+
+        <!-- Built-in trigger — renders wherever the element is placed -->
+        <nile-button
+          part="trigger"
+          type="button"
+          variant=${buttonVariant}
+          aria-haspopup="dialog"
+          aria-expanded=${this.open ? 'true' : 'false'}
+          @click=${this.show}
+        >${buttonLabel}</nile-button>
+
+        <!-- Fixed backdrop: overlay + panel -->
+        <div class="es-backdrop">
+
+          <div
+            part="overlay"
+            class="es-overlay"
+            @click=${() => this.requestClose('overlay')}
+            tabindex="-1"
+          ></div>
+
+          <div
+            part="panel"
+            class="es-panel"
+            role="dialog"
+            aria-modal="true"
+            aria-hidden=${this.open ? 'false' : 'true'}
+            aria-labelledby="es-title"
+            tabindex="0"
+          >
+            <header part="header" class="es-header">
+              <h2 part="title" class="es-title" id="es-title">${drawerLabel}</h2>
+
+              <button
+                part="close"
+                class="es-close"
+                type="button"
+                aria-label="Close"
+                @click=${() => this.requestClose('close-button')}
+              >
+                <!-- X icon (inline SVG — no icon lib dependency) -->
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <line x1="18" y1="6" x2="6" y2="18"/>
+                  <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+              </button>
+            </header>
+
+            <div part="body" class="es-body">
+              <div
+                class=${classMap({
+            'es-typed-text': true,
+            'es-typed-text--typing': this.isTyping,
+        })}
+              >${unsafeHTML(this.displayedText)}</div>
+              <slot></slot>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+NileExecutiveSummary.styles = styles;
+__decorate([
+    query('.es-backdrop')
+], NileExecutiveSummary.prototype, "backdrop", void 0);
+__decorate([
+    query('.es-panel')
+], NileExecutiveSummary.prototype, "panel", void 0);
+__decorate([
+    query('.es-overlay')
+], NileExecutiveSummary.prototype, "overlay", void 0);
+__decorate([
+    property({ type: Object })
+], NileExecutiveSummary.prototype, "config", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileExecutiveSummary.prototype, "open", void 0);
+__decorate([
+    state()
+], NileExecutiveSummary.prototype, "displayedText", void 0);
+__decorate([
+    state()
+], NileExecutiveSummary.prototype, "isTyping", void 0);
+NileExecutiveSummary = __decorate([
+    customElement('nile-executive-summary')
+], NileExecutiveSummary);
+export { NileExecutiveSummary };
+//# sourceMappingURL=nile-executive-summary.js.map

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

@@ -1 +1,6 @@
+/**
+ * Global tooltip styles — injected once into document.head so the tooltip
+ * element on document.body is styled independently of the shadow DOM.
+ */
+export declare const tooltipCss = "\n  .nile-kpi-tooltip {\n    position: fixed;\n    display: none;\n    transform: translate(-50%, calc(-100% - 10px));\n    background: #1D2939;\n    color: #fff;\n    font-family: system-ui, sans-serif;\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1.4;\n    padding: 5px 10px;\n    border-radius: 6px;\n    pointer-events: none;\n    white-space: nowrap;\n    z-index: 2147483647;\n    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22);\n  }\n\n  .nile-kpi-tooltip::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 5px solid transparent;\n    border-top-color:rgb(54, 74, 99);\n  }\n";
 export declare const styles: import("lit").CSSResult;

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

@@ -1,4 +1,37 @@
 import { css } from 'lit';
+/**
+ * Global tooltip styles — injected once into document.head so the tooltip
+ * element on document.body is styled independently of the shadow DOM.
+ */
+export const tooltipCss = `
+  .nile-kpi-tooltip {
+    position: fixed;
+    display: none;
+    transform: translate(-50%, calc(-100% - 10px));
+    background: #1D2939;
+    color: #fff;
+    font-family: system-ui, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.4;
+    padding: 5px 10px;
+    border-radius: 6px;
+    pointer-events: none;
+    white-space: nowrap;
+    z-index: 2147483647;
+    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22);
+  }
+
+  .nile-kpi-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color:rgb(54, 74, 99);
+  }
+`;
 export const styles = css `
   :host {
     display: flex;
@@ -29,7 +62,6 @@ export const styles = css `
 
   .kpi {
     flex: 1 1 auto;
-    
     display: flex;
     flex-direction: column;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
@@ -59,6 +91,7 @@ export const styles = css `
     font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     line-height: 1.2;
+    cursor: default;
   }
 
   .kpi-prefix,

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

@@ -51,6 +51,8 @@ export declare class NileKpiChart extends NileElement {
     private sparklineChart;
     private gaugeChart;
     private resizeObserver;
+    /** Tooltip element on document.body — outside shadow DOM, never clipped. */
+    private _tipEl;
     private sparklineContainer;
     private gaugeContainer;
     /** Full configuration: `{ chart, aq }` (same convention as other Nile charts). */
@@ -93,8 +95,14 @@ export declare class NileKpiChart extends NileElement {
      * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
      */
     embedInNileChart: boolean;
+    private _createTipEl;
+    private _showTip;
+    private _hideTip;
     private formatCssLength;
-    /** Apply `{ chart, aq }` to individual properties. */
+    private parseNumericValue;
+    private formatTooltipNumber;
+    private inferSparklineTooltipScale;
+    private getTooltipContent;
     private applyConfig;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -102,6 +110,8 @@ export declare class NileKpiChart extends NileElement {
     protected updated(changedProperties: PropertyValues): void;
     private syncSparklineChartSize;
     private setupResizeObserver;
+    private _onSparklineMouseMove;
+    private _onSparklineMouseLeave;
     private buildSparklineOptions;
     private buildGaugeOptions;
     private initSparkline;
@@ -109,8 +119,10 @@ export declare class NileKpiChart extends NileElement {
     private destroySparkline;
     private destroyGauge;
     private destroyCharts;
+    private _onValueEnter;
+    private _onGaugeEnter;
+    private _onTipLeave;
     private renderTrend;
-    private renderContent;
     render(): TemplateResult;
 }
 declare global {

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

@@ -3,7 +3,18 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { html, nothing } from 'lit';
 import NileElement from '../internal/nile-element.js';
 import { getHighcharts } from '../internal/highcharts-provider.js';
-import { styles } from './nile-kpi-chart.css.js';
+import { styles, tooltipCss } from './nile-kpi-chart.css.js';
+// Inject tooltip styles into document.head once per page load.
+let _tooltipStylesInjected = false;
+function ensureTooltipStyles() {
+    if (_tooltipStylesInjected || typeof document === 'undefined')
+        return;
+    const style = document.createElement('style');
+    style.dataset['nilekpichart'] = '';
+    style.textContent = tooltipCss;
+    document.head.appendChild(style);
+    _tooltipStylesInjected = true;
+}
 let NileKpiChart = class NileKpiChart extends NileElement {
     constructor() {
         super(...arguments);
@@ -11,6 +22,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.sparklineChart = null;
         this.gaugeChart = null;
         this.resizeObserver = null;
+        /** Tooltip element on document.body — outside shadow DOM, never clipped. */
+        this._tipEl = null;
         /** Full configuration: `{ chart, aq }` (same convention as other Nile charts). */
         this.config = null;
         /** Display variant: default (flat), card (bordered container), gauge (Highcharts solid gauge). */
@@ -51,7 +64,70 @@ 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;
+        // ── Sparkline mousemove tooltip ──────────────────────────────────────────
+        this._onSparklineMouseMove = (e) => {
+            const chart = this.sparklineChart;
+            if (!chart || !this.sparklineContainer)
+                return;
+            const series = chart.series[0];
+            if (!series?.points?.length)
+                return;
+            const rect = this.sparklineContainer.getBoundingClientRect();
+            const mouseXInPlot = e.clientX - rect.left - (chart.plotLeft ?? 0);
+            // Snap to nearest point by plotX
+            let nearest = series.points[0];
+            let minDist = Infinity;
+            for (const p of series.points) {
+                const dist = Math.abs((p.plotX ?? 0) - mouseXInPlot);
+                if (dist < minDist) {
+                    minDist = dist;
+                    nearest = p;
+                }
+            }
+            const scale = this.inferSparklineTooltipScale();
+            const text = this.getTooltipContent((nearest.y ?? 0) * scale);
+            const tipX = rect.left + (chart.plotLeft ?? 0) + (nearest.plotX ?? 0);
+            const tipY = rect.top + (chart.plotTop ?? 0) + (nearest.plotY ?? 0);
+            this._showTip(text, tipX, tipY);
+        };
+        this._onSparklineMouseLeave = () => {
+            this._hideTip();
+        };
+        // ── Value / Gauge hover handlers ─────────────────────────────────────────
+        this._onValueEnter = (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            this._showTip(this.getTooltipContent(), 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._onTipLeave = () => {
+            this._hideTip();
+        };
+    }
+    // ── Tooltip ──────────────────────────────────────────────────────────────
+    _createTipEl() {
+        if (this._tipEl)
+            return;
+        const el = document.createElement('div');
+        el.className = 'nile-kpi-tooltip';
+        document.body.appendChild(el);
+        this._tipEl = el;
+    }
+    _showTip(text, x, y) {
+        if (!this._tipEl)
+            return;
+        this._tipEl.textContent = text;
+        this._tipEl.style.left = `${x}px`;
+        this._tipEl.style.top = `${y}px`;
+        this._tipEl.style.display = 'block';
+    }
+    _hideTip() {
+        if (this._tipEl)
+            this._tipEl.style.display = 'none';
     }
+    // ── Formatting helpers ───────────────────────────────────────────────────
     formatCssLength(value) {
         if (value == null)
             return null;
@@ -65,7 +141,52 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             return `${s}px`;
         return s;
     }
-    /** Apply `{ chart, aq }` to individual properties. */
+    parseNumericValue(v) {
+        if (typeof v === 'number')
+            return Number.isFinite(v) ? v : null;
+        if (typeof v !== 'string')
+            return null;
+        const cleaned = v.replace(/,/g, '').trim();
+        if (!cleaned)
+            return null;
+        const n = Number(cleaned);
+        return Number.isFinite(n) ? n : null;
+    }
+    formatTooltipNumber(n) {
+        const maxFractionDigits = Number.isInteger(n) ? 0 : 6;
+        return new Intl.NumberFormat(undefined, {
+            useGrouping: true,
+            minimumFractionDigits: 0,
+            maximumFractionDigits: maxFractionDigits,
+        }).format(n);
+    }
+    inferSparklineTooltipScale() {
+        if (!this.sparkline?.length)
+            return 1;
+        const main = this.parseNumericValue(this.value);
+        const last = this.sparkline[this.sparkline.length - 1];
+        if (main == null || !Number.isFinite(last) || last === 0)
+            return 1;
+        const ratio = Math.abs(main / last);
+        const candidates = [1000, 1000000];
+        for (const c of candidates) {
+            if (Math.abs(ratio - c) / c < 0.02)
+                return c;
+        }
+        return 1;
+    }
+    getTooltipContent(overrideNumeric) {
+        const prefix = this.prefix ?? '';
+        const suffix = this.suffix ?? '';
+        const numeric = overrideNumeric ?? this.parseNumericValue(this.value) ??
+            (this.variant === 'gauge' ? this.gaugeValue : null) ??
+            (this.sparkline.length ? this.sparkline[this.sparkline.length - 1] : null);
+        const valueText = numeric == null
+            ? String(this.value ?? '').trim()
+            : this.formatTooltipNumber(numeric);
+        return `${prefix}${valueText}${suffix}`.trim();
+    }
+    // ── Config ───────────────────────────────────────────────────────────────
     applyConfig(cfg) {
         const { chart: c, aq } = cfg;
         if (c) {
@@ -106,7 +227,6 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             if ('height' in c) {
                 const h = this.formatCssLength(c.height);
                 if (h) {
-                    /* min-height only: host can grow with content; sparkline shrinks via flex + setSize */
                     this.style.minHeight = h;
                     this.style.removeProperty('height');
                     this.style.removeProperty('max-height');
@@ -125,13 +245,19 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.description = aq.chartSubtitle;
         }
     }
+    // ── Lifecycle ────────────────────────────────────────────────────────────
     connectedCallback() {
         super.connectedCallback();
+        ensureTooltipStyles();
+        this._createTipEl();
         if (this.config)
             this.applyConfig(this.config);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this._hideTip();
+        this._tipEl?.remove();
+        this._tipEl = null;
         this.destroyCharts();
         this.resizeObserver?.disconnect();
         this.resizeObserver = null;
@@ -166,6 +292,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             }
         }
     }
+    // ── Chart sizing ─────────────────────────────────────────────────────────
     syncSparklineChartSize() {
         if (!this.sparklineChart || !this.sparklineContainer)
             return;
@@ -183,6 +310,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (this.gaugeContainer)
             this.resizeObserver.observe(this.gaugeContainer);
     }
+    // ── Chart options ────────────────────────────────────────────────────────
     buildSparklineOptions() {
         const brandColor = this.sparklineColor || '#005EA6';
         const defaults = {
@@ -278,6 +406,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             ...this.options,
         };
     }
+    // ── Chart init/destroy ───────────────────────────────────────────────────
     async initSparkline() {
         if (!this.sparkline.length || !this.sparklineContainer)
             return;
@@ -286,6 +415,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.destroySparkline();
         this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
         requestAnimationFrame(() => this.syncSparklineChartSize());
+        this.sparklineContainer.addEventListener('mousemove', this._onSparklineMouseMove);
+        this.sparklineContainer.addEventListener('mouseleave', this._onSparklineMouseLeave);
         this.emit('nile-chart-ready', { chart: this.sparklineChart });
     }
     async initGauge() {
@@ -298,6 +429,10 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.emit('nile-chart-ready', { chart: this.gaugeChart });
     }
     destroySparkline() {
+        if (this.sparklineContainer) {
+            this.sparklineContainer.removeEventListener('mousemove', this._onSparklineMouseMove);
+            this.sparklineContainer.removeEventListener('mouseleave', this._onSparklineMouseLeave);
+        }
         if (this.sparklineChart) {
             this.sparklineChart.destroy();
             this.sparklineChart = null;
@@ -313,6 +448,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.destroySparkline();
         this.destroyGauge();
     }
+    // ── Render ───────────────────────────────────────────────────────────────
     renderTrend() {
         if (this.trendValue === null)
             return nothing;
@@ -331,18 +467,37 @@ let NileKpiChart = class NileKpiChart extends NileElement {
       </span>
     `;
     }
-    renderContent() {
+    render() {
+        if (this.loading) {
+            return html `<div class="chart-loading">Loading...</div>`;
+        }
         const isGauge = this.variant === 'gauge';
         return html `
       <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
         ${this.label ? html `<p class="kpi-label">${this.label}</p>` : nothing}
 
-        ${isGauge ? html `<div class="kpi-gauge-container"></div>` : nothing}
+        ${isGauge
+            ? html `
+              <div
+                class="kpi-gauge-container"
+                @mouseenter=${this._onGaugeEnter}
+                @mouseleave=${this._onTipLeave}
+              ></div>
+            `
+            : nothing}
 
         <div class="kpi-value-row">
-          <h2 class="kpi-value">
-            ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${this.value}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
-          </h2>
+          ${!isGauge
+            ? html `
+                <h2
+                  class="kpi-value"
+                  @mouseenter=${this._onValueEnter}
+                  @mouseleave=${this._onTipLeave}
+                >
+                  ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${this.value}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
+                </h2>
+              `
+            : nothing}
           ${!isGauge ? this.renderTrend() : nothing}
         </div>
 
@@ -356,13 +511,6 @@ let NileKpiChart = class NileKpiChart extends NileElement {
       </div>
     `;
     }
-    render() {
-        if (this.loading) {
-            return html `<div class="chart-loading">Loading...</div>`;
-        }
-        /* Same DOM as inside nile-chart: one surface; card/gauge chrome is on :host when standalone. */
-        return this.renderContent();
-    }
 };
 NileKpiChart.styles = styles;
 __decorate([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",
@@ -42,7 +42,8 @@
     "./nile-kpi-chart": "./dist/src/nile-kpi-chart/index.js",
     "./nile-chart": "./dist/src/nile-chart/index.js",
     "./nile-widget-viewer": "./dist/src/nile-widget-viewer/index.js",
-    "./nile-dashboard-viewer": "./dist/src/nile-dashboard-viewer/index.js"
+    "./nile-dashboard-viewer": "./dist/src/nile-dashboard-viewer/index.js",
+    "./nile-executive-summary": "./dist/src/nile-executive-summary/index.js"
   },
   "files": [
     "dist/src/**/*.js",