@aquera/nile-visualization 1.5.0 → 1.7.0

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

@@ -22,6 +22,40 @@ let NileInvertedAreaChart = class NileInvertedAreaChart extends NileElement {
         this.height = '400px';
         this.yAxisTitle = '';
         this.stacked = false;
+        // ── Container styling ──
+        this.chartBg = '';
+        this.chartBorderRadius = '';
+        this.chartBorder = '';
+        this.chartShadow = '';
+        this.chartPadding = '';
+        this.chartMinHeight = '';
+        // ── Loading ──
+        this.loadingText = 'Loading...';
+        this.loadingColor = '';
+        this.loadingFontSize = '';
+        this.loadingFontFamily = '';
+        this.loadingBg = '';
+    }
+    _syncCssVars() {
+        const set = (prop, val) => {
+            const s = typeof val === 'number'
+                ? (Number.isFinite(val) ? `${val}px` : '')
+                : String(val ?? '').trim();
+            if (s)
+                this.style.setProperty(prop, s);
+            else
+                this.style.removeProperty(prop);
+        };
+        set('--nile-chart-bg', this.chartBg);
+        set('--nile-chart-border-radius', this.chartBorderRadius);
+        set('--nile-chart-border', this.chartBorder);
+        set('--nile-chart-shadow', this.chartShadow);
+        set('--nile-chart-padding', this.chartPadding);
+        set('--nile-chart-min-height', this.chartMinHeight);
+        set('--nile-chart-loading-color', this.loadingColor);
+        set('--nile-chart-loading-font-size', this.loadingFontSize);
+        set('--nile-chart-loading-font-family', this.loadingFontFamily);
+        set('--nile-chart-loading-bg', this.loadingBg);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -35,6 +69,7 @@ let NileInvertedAreaChart = class NileInvertedAreaChart extends NileElement {
         this.resizeObserver = null;
     }
     firstUpdated() {
+        this._syncCssVars();
         this.initChart();
         this.setupResizeObserver();
     }
@@ -54,6 +89,10 @@ let NileInvertedAreaChart = class NileInvertedAreaChart extends NileElement {
             'stacked',
             'loading',
         ];
+        const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
+            'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
+        if (cssVarProps.some(p => changedProperties.has(p)))
+            this._syncCssVars();
         if (!props.some(p => changedProperties.has(p)))
             return;
         if (this.loading) {
@@ -127,7 +166,7 @@ let NileInvertedAreaChart = class NileInvertedAreaChart extends NileElement {
     }
     render() {
         if (this.loading) {
-            return html `<div class="chart-loading" style="height:${this.height}">Loading...</div>`;
+            return html `<div class="chart-loading" style="height:${this.height}">${this.loadingText}</div>`;
         }
         return html `<div class="chart-container"></div>`;
     }
@@ -166,6 +205,39 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NileInvertedAreaChart.prototype, "stacked", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-bg' })
+], NileInvertedAreaChart.prototype, "chartBg", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border-radius' })
+], NileInvertedAreaChart.prototype, "chartBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-border' })
+], NileInvertedAreaChart.prototype, "chartBorder", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-shadow' })
+], NileInvertedAreaChart.prototype, "chartShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-padding' })
+], NileInvertedAreaChart.prototype, "chartPadding", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-min-height' })
+], NileInvertedAreaChart.prototype, "chartMinHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileInvertedAreaChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-color' })
+], NileInvertedAreaChart.prototype, "loadingColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-size' })
+], NileInvertedAreaChart.prototype, "loadingFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-font-family' })
+], NileInvertedAreaChart.prototype, "loadingFontFamily", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-bg' })
+], NileInvertedAreaChart.prototype, "loadingBg", void 0);
 NileInvertedAreaChart = __decorate([
     customElement('nile-inverted-area-chart')
 ], NileInvertedAreaChart);

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

@@ -2,5 +2,5 @@
  * 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 tooltipCss = "\n  .nile-kpi-tooltip {\n    position: fixed;\n    display: none;\n    transform: translate(-50%, calc(-100% - 10px));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 1.4;\n    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-sm));\n    border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    pointer-events: none;\n    white-space: nowrap;\n    z-index: 2147483647;\n    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));\n  }\n\n  .nile-kpi-tooltip::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: var(--nile-border-size-5, 5px) solid transparent;\n    border-top-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n";
 export declare const styles: import("lit").CSSResult;

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

@@ -8,18 +8,19 @@ export const tooltipCss = `
     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;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    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));
     line-height: 1.4;
-    padding: 5px 10px;
-    border-radius: 6px;
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-sm));
+    border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     pointer-events: none;
     white-space: nowrap;
     z-index: 2147483647;
-    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22);
+    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
   }
 
   .nile-kpi-tooltip::after {
@@ -28,12 +29,33 @@ export const tooltipCss = `
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
-    border: 5px solid transparent;
-    border-top-color:rgb(54, 74, 99);
+    border: var(--nile-border-size-5, 5px) solid transparent;
+    border-top-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 `;
 export const styles = css `
   :host {
+    --nile-kpi-card-bg: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    --nile-kpi-card-border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    --nile-kpi-card-border-width: var(--nile-border-width-1, var(--ng-stroke-width-1));
+    --nile-kpi-card-border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
+    --nile-kpi-card-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+    --nile-kpi-card-shadow-hover: var(--nile-kpi-card-shadow, var(--nile-box-shadow-7, var(--ng-shadow-md)));
+    --nile-kpi-padding-v: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
+    --nile-kpi-padding-h: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    --nile-kpi-content-gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    --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-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));
+    --nile-kpi-trend-up-color: var(--nile-colors-success-700, var(--ng-color-success-700));
+    --nile-kpi-trend-down-color: var(--nile-colors-error-700, var(--ng-color-error-700));
+    --nile-kpi-trend-neutral-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    --nile-kpi-description-font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    --nile-kpi-description-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -48,32 +70,32 @@ export const styles = css `
   /* Card / gauge chrome on the host when used alone (inside nile-chart, embed-in-nile-chart skips this). */
   :host([variant='card']:not([embed-in-nile-chart])),
   :host([variant='gauge']:not([embed-in-nile-chart])) {
-    background: transparent;
-    border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
-    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+    background: var(--nile-kpi-card-bg);
+    border: var(--nile-kpi-card-border-width) solid var(--nile-kpi-card-border-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='card']:not([embed-in-nile-chart]):hover),
   :host([variant='gauge']:not([embed-in-nile-chart]):hover) {
-    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
+    box-shadow: var(--nile-kpi-card-shadow-hover);
   }
 
   .kpi {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md, var(--ng-spacing-md));
-    padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    gap: var(--nile-kpi-content-gap);
+    padding: var(--nile-kpi-padding-v) var(--nile-kpi-padding-h);
   }
 
   .kpi-label {
     margin: 0;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-kpi-label-font-size);
+    font-weight: var(--nile-kpi-label-font-weight);
+    color: var(--nile-kpi-label-color);
     line-height: 1.4;
   }
 
@@ -87,9 +109,9 @@ export const styles = css `
   .kpi-value {
     margin: 0;
     font-family: var(--nile-font-family-serif-colfax-medium, var(--ng-font-family-display));
-    font-size: clamp(1.25rem, 2.5vw + 0.75rem, 36px);
+    font-size: var(--nile-kpi-value-font-size);
     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));
+    color: var(--nile-kpi-value-color);
     line-height: 1.2;
     cursor: default;
   }
@@ -97,9 +119,9 @@ export const styles = css `
   .kpi-prefix,
   .kpi-suffix {
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
+    font-size: var(--nile-kpi-prefix-suffix-font-size);
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    color: var(--nile-kpi-prefix-suffix-color);
   }
 
   .kpi-trend {
@@ -116,23 +138,23 @@ export const styles = css `
 
   .kpi-trend--up {
     background: none;
-    color: var(--nile-colors-success-700, #067647);
+    color: var(--nile-kpi-trend-up-color);
   }
 
   .kpi-trend--down {
     background: none;
-    color: var(--nile-colors-error-700, #B42318);
+    color: var(--nile-kpi-trend-down-color);
   }
 
   .kpi-trend--neutral {
     background: none;
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    color: var(--nile-kpi-trend-neutral-color);
   }
 
   .kpi-trend-arrow {
     display: inline-flex;
-    width: 12px;
-    height: 12px;
+    width: var(--nile-width-12px, 12px);
+    height: var(--nile-height-12px, 12px);
   }
 
   .kpi-trend-arrow svg {
@@ -144,8 +166,8 @@ export const styles = css `
   .kpi-description {
     margin: 0;
     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));
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-kpi-description-font-size);
+    color: var(--nile-kpi-description-color);
     line-height: 1.5;
   }
 
@@ -193,11 +215,10 @@ export const styles = css `
   /* ── Loading state ── */
 
   .chart-loading {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: var(--nile-height-200px, var(--ng-height-200px));
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));

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

@@ -4,6 +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';
+export type SparklineType = 'area' | 'line';
 /** `chart` slice for `<nile-kpi-chart>.config` (discriminated by `type: 'kpi'`). */
 export interface ChartKpiSeparatedPayload {
     type: 'kpi';
@@ -18,10 +19,69 @@ export interface ChartKpiSeparatedPayload {
     description?: string;
     sparkline?: number[];
     sparklineColor?: string;
+    /** Sparkline chart height in pixels (default: 48). */
+    sparklineHeight?: number;
+    /** Sparkline stroke width (default: 2). */
+    sparklineLineWidth?: number;
+    /** Sparkline series type: 'area' (filled) or 'line' (default: 'area'). */
+    sparklineType?: SparklineType;
+    /** Fill area opacity 0–1 (default: 0.2). Only applies when sparklineType is 'area'. */
+    sparklineFillOpacity?: number;
+    /** Show data-point markers on the sparkline (default: false). */
+    sparklineMarkers?: boolean;
     gaugeValue?: number;
     gaugeMin?: number;
     gaugeMax?: number;
     gaugeColor?: string;
+    /** Background track color for the gauge ring (default: '#E5E7EB'). */
+    gaugeTrackColor?: string;
+    /** Gauge start angle in degrees (default: 0 = full circle). */
+    gaugeStartAngle?: number;
+    /** Gauge end angle in degrees (default: 360 = full circle). */
+    gaugeEndAngle?: number;
+    /** Inner radius of the gauge arc as a percentage string (default: '80%'). */
+    gaugeInnerRadius?: string;
+    /** Whether gauge arc ends are rounded (default: true). */
+    gaugeRounded?: boolean;
+    /** Font size of the center data label inside the gauge (default: 28). */
+    gaugeLabelFontSize?: string | number;
+    /** Text color of the center data label inside the gauge (default: '#101828'). */
+    gaugeLabelColor?: string;
+    /** Font weight of the center data label inside the gauge (default: 600). */
+    gaugeLabelFontWeight?: string | number;
+    /** Vertical offset of the center data label in pixels (default: -25). */
+    gaugeLabelYOffset?: number;
+    /** Height of the gauge chart in pixels (default: 160). */
+    gaugeHeight?: number;
+    /** Outer radius of the gauge arc as a percentage string (default: '100%'). */
+    gaugeOuterRadius?: string;
+    /** Override the KPI value font size (e.g. '48px', '2rem'). */
+    valueFontSize?: string | number;
+    /** Override the KPI value text color. */
+    valueColor?: string;
+    /** Custom text shown in the loading state (default: 'Loading...'). */
+    loadingText?: string;
+    /** Whether the hover tooltip is shown on value / sparkline / gauge (default: true). */
+    tooltipEnabled?: boolean;
+    cardBackground?: string;
+    cardBorderColor?: string;
+    cardBorderWidth?: string | number;
+    cardBorderRadius?: string | number;
+    cardShadow?: string;
+    cardShadowHover?: string;
+    cardPaddingVertical?: string | number;
+    cardPaddingHorizontal?: string | number;
+    contentGap?: string | number;
+    labelColor?: string;
+    labelFontSize?: string | number;
+    labelFontWeight?: string | number;
+    descriptionColor?: string;
+    descriptionFontSize?: string | number;
+    prefixSuffixColor?: string;
+    prefixSuffixFontSize?: string | number;
+    trendUpColor?: string;
+    trendDownColor?: string;
+    trendNeutralColor?: string;
     loading?: boolean;
     options?: Highcharts.Options;
     /** Box size when a height is set (host min-height and height). */
@@ -33,7 +93,7 @@ export interface NileKpiConfigInputType {
     aq?: AqConfigType;
 }
 export interface KpiConfig {
-    label: string;
+    label?: string;
     value: number | string;
     prefix?: string;
     suffix?: string;
@@ -79,6 +139,16 @@ export declare class NileKpiChart extends NileElement {
     sparkline: number[];
     /** Color for the sparkline. */
     sparklineColor: string;
+    /** Sparkline chart height in pixels. */
+    sparklineHeight: number;
+    /** Sparkline stroke width. */
+    sparklineLineWidth: number;
+    /** Sparkline series type: 'area' (filled) or 'line'. */
+    sparklineType: SparklineType;
+    /** Fill area opacity 0–1. Only applies when sparklineType is 'area'. */
+    sparklineFillOpacity: number;
+    /** Show data-point markers on the sparkline. */
+    sparklineMarkers: boolean;
     /** Gauge: the numeric value (0-100 by default). */
     gaugeValue: number;
     /** Gauge: minimum value. */
@@ -87,6 +157,55 @@ export declare class NileKpiChart extends NileElement {
     gaugeMax: number;
     /** Gauge: ring color. Falls back to brand color. */
     gaugeColor: string;
+    /** Gauge: background track color. */
+    gaugeTrackColor: string;
+    /** Gauge: start angle in degrees (0 = full circle start). */
+    gaugeStartAngle: number;
+    /** Gauge: end angle in degrees (360 = full circle). */
+    gaugeEndAngle: number;
+    /** Gauge: inner radius as percentage string (controls ring thickness). */
+    gaugeInnerRadius: string;
+    /** Gauge: whether arc ends are rounded. */
+    gaugeRounded: boolean;
+    /** Gauge: font size for the center data label. */
+    gaugeLabelFontSize: string | number;
+    /** Gauge: text color for the center data label. */
+    gaugeLabelColor: string;
+    /** Gauge: font weight for the center data label. */
+    gaugeLabelFontWeight: string | number;
+    /** Gauge: vertical offset of the center data label in pixels. */
+    gaugeLabelYOffset: number;
+    /** Gauge: chart height in pixels. */
+    gaugeHeight: number;
+    /** Gauge: outer radius of the arc as a percentage string. */
+    gaugeOuterRadius: string;
+    /** Override the KPI value font size (e.g. '48px', '2rem'). */
+    valueFontSize: string | number;
+    /** Override the KPI value text color. */
+    valueColor: string;
+    /** Custom text shown in the loading state. */
+    loadingText: string;
+    /** Whether the hover tooltip is shown on value / sparkline / gauge. */
+    tooltipEnabled: boolean;
+    cardBackground: string;
+    cardBorderColor: string;
+    cardBorderWidth: string | number;
+    cardBorderRadius: string | number;
+    cardShadow: string;
+    cardShadowHover: string;
+    cardPaddingVertical: string | number;
+    cardPaddingHorizontal: string | number;
+    contentGap: string | number;
+    labelColor: string;
+    labelFontSize: string | number;
+    labelFontWeight: string | number;
+    descriptionColor: string;
+    descriptionFontSize: string | number;
+    prefixSuffixColor: string;
+    prefixSuffixFontSize: string | number;
+    trendUpColor: string;
+    trendDownColor: string;
+    trendNeutralColor: string;
     /** Whether the component is in a loading state. */
     loading: boolean;
     /** Highcharts options override for the sparkline or gauge. */
@@ -98,6 +217,7 @@ export declare class NileKpiChart extends NileElement {
     private _createTipEl;
     private _showTip;
     private _hideTip;
+    private _syncCssVars;
     private formatCssLength;
     private parseNumericValue;
     private formatTooltipNumber;