@aquera/nile-visualization 2.9.3 → 2.9.5

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

@@ -111,6 +111,8 @@ export declare class NileChart extends NileElement {
     addAiResponse(text: string): void;
     private handleAiSend;
     private switchType;
+    /** Single-control filter chart where the in-body label should be promoted to the chart header. */
+    private get isPromotableFilter();
     private get headerTitle();
     private get headerSubtitle();
     private onHeaderSlotChange;

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

@@ -286,11 +286,32 @@ let NileChart = class NileChart extends NileElement {
             config: converted,
         });
     }
+    /** Single-control filter chart where the in-body label should be promoted to the chart header. */
+    get isPromotableFilter() {
+        const cfg = (this.activeConfig ?? this.resolvedConfig);
+        return cfg?.type === 'filter'
+            && Array.isArray(cfg?.controls)
+            && cfg.controls.length === 1;
+    }
     get headerTitle() {
-        return this.activeConfig?.chartTitle ?? this.resolvedConfig?.chartTitle ?? '';
+        const explicit = this.activeConfig?.chartTitle ?? this.resolvedConfig?.chartTitle;
+        if (explicit)
+            return explicit;
+        if (this.isPromotableFilter) {
+            const cfg = (this.activeConfig ?? this.resolvedConfig);
+            return cfg.controls[0]?.label ?? '';
+        }
+        return '';
     }
     get headerSubtitle() {
-        return this.activeConfig?.chartSubtitle ?? this.resolvedConfig?.chartSubtitle ?? '';
+        const explicit = this.activeConfig?.chartSubtitle ?? this.resolvedConfig?.chartSubtitle;
+        if (explicit)
+            return explicit;
+        if (this.isPromotableFilter) {
+            const cfg = (this.activeConfig ?? this.resolvedConfig);
+            return cfg.controls[0]?.description ?? '';
+        }
+        return '';
     }
     onHeaderSlotChange(e) {
         const slot = e.target;
@@ -1675,8 +1696,10 @@ let NileChart = class NileChart extends NileElement {
         ></nile-data-grid>`;
             }
             case 'filter': {
+                const promote = this.isPromotableFilter;
                 return html `<nile-filter-chart
           .config=${{ chart: config }}
+          ?hide-control-headers=${promote}
           @nile-change="${(e) => this.emit('nile-change', e.detail)}"
         ></nile-filter-chart>`;
             }

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

@@ -90,7 +90,10 @@ export const styles = css `
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    line-height: 1.4;
+    padding-top: 2px;
     margin-bottom: var(--nile-spacing-4px, var(--ng-spacing-1));
+    overflow: visible;
   }
 
   .fc-control__desc {
@@ -487,9 +490,9 @@ export const styles = css `
     outline: none;
     background: transparent;
     border-radius: inherit;
-    padding: var(--nile-spacing-2xl, var(--ng-spacing-5)) var(--nile-spacing-xl, var(--ng-spacing-4));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-size: var(--nile-font-size-sm);
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     line-height: 1.4;
     box-sizing: border-box;

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

@@ -5,6 +5,9 @@ export type { NileTagVariant, FilterOption, QueryLanguageConfig, QueryNode, Quer
 export declare class NileFilterChart extends NileElement implements FilterChartHost {
     static get styles(): CSSResultArray;
     config: FilterChartSeparatedPayload | null;
+    /** When set, the host (e.g. nile-chart) is already rendering the control's label/description
+     *  in its own header — skip the in-body copies to avoid duplication. */
+    hideControlHeaders: boolean;
     selectedValues: Map<string, unknown>;
     private collapsedGroups;
     /** Currently displayed (animated) placeholder text per prompt-variant control id. */

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

@@ -21,6 +21,9 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
     constructor() {
         super(...arguments);
         this.config = null;
+        /** When set, the host (e.g. nile-chart) is already rendering the control's label/description
+         *  in its own header — skip the in-body copies to avoid duplication. */
+        this.hideControlHeaders = false;
         this.selectedValues = new Map();
         this.collapsedGroups = new Set();
         /** Currently displayed (animated) placeholder text per prompt-variant control id. */
@@ -468,10 +471,11 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
                 break;
             default: body = html ``;
         }
+        const showHeader = !this.hideControlHeaders;
         return html `
       <div class="fc-control" part="filter-control">
-        ${ctrl.label ? html `<div class="fc-control__label">${ctrl.label}</div>` : nothing}
-        ${ctrl.description ? html `<div class="fc-control__desc">${ctrl.description}</div>` : nothing}
+        ${showHeader && ctrl.label ? html `<div class="fc-control__label">${ctrl.label}</div>` : nothing}
+        ${showHeader && ctrl.description ? html `<div class="fc-control__desc">${ctrl.description}</div>` : nothing}
         <div class="fc-control__body">${body}</div>
       </div>`;
     }
@@ -541,6 +545,9 @@ NileFilterChart._PROMPT_DEBOUNCE_MS = 500;
 __decorate([
     property({ attribute: false })
 ], NileFilterChart.prototype, "config", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-control-headers', reflect: true })
+], NileFilterChart.prototype, "hideControlHeaders", void 0);
 __decorate([
     state()
 ], NileFilterChart.prototype, "selectedValues", void 0);

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

@@ -135,6 +135,7 @@ export const styles = css `
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
+    flex-shrink: 0;
   }
 
   .kpi-value-row {
@@ -144,6 +145,7 @@ export const styles = css `
     flex-wrap: nowrap;
     min-width: 0;
     overflow: hidden;
+    flex-shrink: 0;
   }
 
   .kpi-value {
@@ -225,13 +227,15 @@ export const styles = css `
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
+    flex-shrink: 1;
   }
 
   .kpi-sparkline {
     width: 100%;
-    flex: 0 1 48px;
-    min-height: 22px;
+    flex: 1 1 0;
+    min-height: 0;
     margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    overflow: hidden;
   }
 
   /* ── Container queries: scale down for narrow cards ── */
@@ -264,8 +268,7 @@ export const styles = css `
     }
 
     .kpi-sparkline {
-      flex-basis: 32px;
-      min-height: 18px;
+      min-height: 0;
     }
   }
 

package/package.json

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